/* ==========================================================================
   movil.css — arreglos de la versión móvil (320–767 px). 29-sep-2026.
   Todo va dentro de @media (max-width: 767px): el escritorio no cambia.
   Enlazado con un <link> en el <head> de cada index.html (no se tocan los
   bundles de /assets/). Técnica para zonas táctiles sin mover la maqueta:
   padding-block:X + margin-block:-X agranda el área que se toca pero deja la
   caja de maquetación igual.
   ========================================================================== */
@media (max-width: 767px) {

  /* 1. Pie de las páginas estáticas: los enlaces iban pegados sin espacio
        («InicioServiciosTrabajos…»), y en /productora-audiovisual-miami/ la
        cadena «…BogotáPreguntas frecuentes» no cabía y ensanchaba la página a
        449 px (el móvil hacía zoom de alejamiento). */
  .seo-fallback footer > p:first-child,
  .seo-shell footer > p:first-child {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
  }
  .seo-fallback footer > p:first-child > a,
  .seo-shell footer > p:first-child > a {
    display: inline-block;
    padding-block: 12px;
  }

  /* 1b. En las páginas estáticas «.container» hereda el relleno de 32 px por
         lado del CSS general, que se suma a los 20 px de .seo-fallback: el
         texto quedaba a 52 px de cada borde (216 px de columna en 320). Se
         deja solo el margen de 20 px de .seo-fallback. */
  html body #root > .seo-fallback > .container,
  html body #root > .seo-shell > .container { padding-left: 0; padding-right: 0; }

  /* 2. Galería de las fichas de /work/ (minmax(280px)) se salía 12 px a 320. */
  html body .seo-fallback .galeria,
  html body .seo-shell .galeria { grid-template-columns: minmax(0, 1fr); }
  .seo-fallback img, .seo-shell img { max-width: 100%; }

  /* 2b. Titulares: a 320 px «AUDIOVISUAL» (32 px, peso 900) no cabía en el H1
         de /productora-audiovisual-miami/ y ensanchaba la página a 348 px. Se
         ajusta el cuerpo al ancho (24–32 px) para que quepa «ESTADOUNIDENSE» y, solo si una
         palabra sigue sin caber, se parte en vez de salirse. */
  h1, h2, h3 { overflow-wrap: break-word; }
  html body .seo-fallback h1, html body .seo-shell h1 { font-size: clamp(1.5rem, calc(8.4vw - 4px), 2rem); }

  /* 3. Tablas: ya hacen scroll dentro de su caja; que se deslice suave en iOS
        y que las celdas no se estrechen hasta partir cada palabra. */
  .seo-fallback table, .seo-shell table { -webkit-overflow-scrolling: touch; }
  .seo-fallback th, .seo-shell th,
  .seo-fallback td, .seo-shell td { min-width: 7.5em; }

  /* 4. Tarjeta del brief dentro de las páginas estáticas: la regla
        «.seo-fallback p» (18 px, gris #666) le ganaba a la tarjeta, así que
        «10 PREGUNTAS · 2 MIN» se partía en 3 líneas y el texto quedaba gris
        oscuro sobre negro. Se devuelven sus valores propios. */
  .seo-fallback .bcb p.bcb-k, .seo-shell .bcb p.bcb-k {
    font-size: 12px; line-height: 1.4; color: #999; margin: 0 0 18px;
  }
  .seo-fallback .bcb p.bcb-p, .seo-shell .bcb p.bcb-p {
    font-size: 15px; line-height: 1.6; color: #bdbdbd; margin: 0 0 24px;
  }
  .seo-fallback .bcb p.bcb-n, .seo-shell .bcb p.bcb-n {
    font-size: 14px; line-height: 1.5; color: #8a8a8a; margin: 14px 0 0;
  }
  html body .bcb p.bcb-n { font-size: 14px; }
  /* En 320–390 px «CUÉNTANOS» no cabía en la tarjeta (se cortaba) y
     «10 PREGUNTAS · 2 MIN» se partía: menos relleno lateral, titular un poco
     menor en pantallas estrechas y la línea de arriba sin partir. */
  html body .bcb.bcb-main { padding-left: 24px; padding-right: 24px; }
  html body .bcb h2 { font-size: clamp(22px, 7.2vw, 26px); }
  html body .bcb p.bcb-k { flex-wrap: wrap; row-gap: 8px; white-space: nowrap; letter-spacing: .1em; }

  /* 5. Bloque oscuro de enlaces (#bc-seo-nav): enlaces de 21 px de alto y la
        nota final gris #5b6672 sobre #0d0f11 (contraste 3,2:1) a 12,5 px. */
  html body #bc-seo-nav li { margin: 0; }
  html body #bc-seo-nav a { display: inline-block; padding-block: 11px; }
  html body #bc-seo-nav .note { color: #8b96a2; font-size: 14px; }

  /* 6. «Más de B.CONTENT»: fichas de 34 px de alto. */
  html body #bc-mas a { min-height: 44px; display: inline-flex; align-items: center; }

  /* 7. Menú hamburguesa (React): enlaces de 24 px, EN/ES de 20 px y la X de
        cierre de 16 px; además la barra LLAMAR/WHATSAPP (z-index máximo)
        tapaba el pie del menú abierto. */
  nav[aria-label="Mobile navigation"] > a:not(.px-4) {
    padding-block: 10px; margin-block: -10px;
  }
  nav[aria-label="Mobile navigation"] > a.px-4 { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  nav[aria-label="Mobile navigation"] + div > button {
    min-width: 44px; min-height: 44px;
  }
  [role="dialog"] > button.absolute {
    padding: 14px; margin: -14px;
  }
  body:has([role="dialog"][data-state="open"]) #bc-contacto { display: none !important; }

  /* 8. Pie de React: enlaces de 20 px de alto (se agranda solo el área táctil). */
  footer ul.space-y-2 > li > a:not(.line-clamp-1),
  footer a.hover\:text-foreground:not(.line-clamp-1) {
    display: inline-block; padding-block: 12px; margin-block: -12px;
  }

  /* 9. Enlaces de texto con flecha («CONÓCENOS →», «VER MÁS →»…) y enlaces
        de contacto: 18–32 px de alto. */
  main a.uppercase.tracking-wider:not([class*="px-"]):not([class*="py-"]),
  a.text-lg.hover\:opacity-60, a.text-xl.hover\:opacity-60, a.text-2xl.hover\:opacity-60,
  a.inline-flex.items-center.gap-2.text-lg,
  main a.text-sm.underline {
    padding-block: 12px; margin-block: -12px;
  }

  /* 10. Textos de 12–13 px en el cuerpo: descripciones de las opciones de
         /cotizar/ y /calculadora/, etiquetas de /proceso/. */
  main p[class="text-xs text-muted-foreground"],
  html body .calc .op-d,
  main .flex-wrap.text-xs > span.border { font-size: 14px; }

  /* 11. Filtros de /work/ (34 px) y botones con borde de /proceso/ (38 px). */
  main button.text-xs.uppercase.tracking-wider.px-4.py-2 { padding-top: 13px; padding-bottom: 13px; }
  main a.text-sm.border.px-4 { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 29-sep-2026 · Portada: la cabecera mide el alto de la pantalla (h-screen) con el vídeo 16:9
   centrado → en un móvil vertical quedaban ~320 px en blanco encima y otros tantos debajo, y
   los botones flotaban al 16 % del fondo. Se ajusta al contenido y los botones van debajo del
   vídeo. Además el iframe llevaba pointer-events:none: si el móvil no lo reproduce solo (ahorro
   de batería, modo de datos) sale el ▶ de Bunny y no respondía al toque. */
@media (max-width: 767px) and (orientation: portrait) {
  .relative.w-full.h-screen.bg-white { height: auto; flex-direction: column; justify-content: flex-start; padding-top: 20px; padding-bottom: 28px; }
  .relative.w-full.h-screen.bg-white > iframe { pointer-events: auto; }
  .relative.w-full.h-screen.bg-white > div[style*="position: absolute"] { position: static !important; margin-top: 24px; width: 100%; }
  /* El carrusel de trabajos, lo mismo: min-h-screen para 186 px de tarjetas. */
  .min-h-screen.py-12.overflow-hidden.flex.items-center.relative { min-height: 0; }
}