/* =======================================================================
   AL&T — adaptación a tablet y mobile
   -----------------------------------------------------------------------
   El sitio se diseñó para desktop; este archivo sólo agrega reglas debajo
   de 1024px y no toca nada de lo que se ve en desktop. Lo comparten las
   cuatro páginas.

   Especificidad: Tailwind por CDN inyecta su hoja DESPUÉS de esta, así que
   un selector de una sola clase pierde contra la utilidad. Por eso todo va
   con el prefijo :root, igual que el <style> de cada página (0,2,0 contra
   0,1,0), sin !important.

   Tramos:  ≤1023  aparece la hamburguesa (el nav es lg:flex)
            ≤767   layout a una columna
   ======================================================================= */


/* --- hamburguesa: fuera de mobile no existe ------------------------------ */
.nav-burger { display: none; }

@media (max-width: 1023px) {

  /* --- header ----------------------------------------------------------- */
  /* La grilla 1fr·auto·1fr centraba el nav; sin nav a la vista pasa a fila
     simple: logo a la izquierda, CTA y hamburguesa a la derecha.          */
  :root #site-header > div { display: flex; align-items: center; gap: 12px; }
  :root #site-header > div > a:first-child { margin-right: auto; }

  .nav-burger {
    display: grid; place-content: center; gap: 7px;
    width: 44px; height: 44px; margin-right: -10px;     /* área táctil sin correr la línea visual */
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--cream);                               /* dentro del header vale la tinta */
  }
  .nav-burger span {
    display: block; width: 24px; height: 1.5px; background: currentColor;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
  }
  #site-header.menu-abierto .nav-burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
  #site-header.menu-abierto .nav-burger span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

  /* El menú es el mismo <nav> del desktop, desplegado como panel a pantalla
     completa detrás de la barra. Se oculta con opacidad + visibility y no con
     display, para que abra y cierre con la misma transición.               */
  :root #site-header nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: 0; z-index: -1;
    padding: 110px 20px 40px;
    background: var(--ink);                            /* dentro del header vale el fondo */
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .4s;
  }
  :root #site-header.menu-abierto nav { opacity: 1; visibility: visible; transform: none; }
  :root #site-header nav a:not(.nav-cta) {
    display: block; width: 100%; padding: 18px 0;
    font-size: 15px; justify-items: start;
    border-bottom: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  }
  /* El botón de contacto lo mueve responsive.js adentro del panel: en la
     barra sólo quedan el logo y la hamburguesa.                          */
  :root #site-header nav .nav-cta {
    width: 100%; margin-top: 32px; padding: 16px 20px;
    justify-content: center; text-align: center; font-size: 13px;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  :root #site-header nav, .nav-burger span { transition: none; }
}


@media (max-width: 767px) {

  /* --- medianil --------------------------------------------------------- */
  /* px-7 (28px) es el medianil del sitio; en mobile baja a 20px. Al ser la
     misma utilidad en todas las secciones, se ajusta una sola vez.        */
  :root .px-7 { padding-left: 20px; padding-right: 20px; }
  :root .mx-7 { margin-left: 20px; margin-right: 20px; }

  /* --- header ----------------------------------------------------------- */
  :root #site-header { padding-top: 18px; padding-bottom: 18px; }
  :root #site-logo { height: 40px; }
  :root #site-header.is-scrolled { padding-top: 11px; padding-bottom: 11px; }
  :root #site-header.is-scrolled #site-logo { height: 34px; }
  :root .nav-cta { padding: 10px 14px; font-size: 12px; }
  :root #site-header.is-scrolled .nav-cta { padding-top: 8px; padding-bottom: 8px; }
  :root #site-header nav { padding-top: 96px; }
  /* el body reserva el alto del header extendido: 18+40+18 */
  :root body { padding-top: 76px; }

  /* El texto mínimo del sitio es 11,5px en desktop; en un teléfono se lee
     a la distancia del brazo y no baja de 12.                            */
  :root .text-\[11\.5px\] { font-size: 12px; }

  /* Formularios: bajo 16px iOS hace zoom al enfocar el campo. */
  :root input, :root textarea, :root select { font-size: 16px; }

  /* --- títulos de sección con columna de etiqueta ------------------------ */
  /* Patrón repetido: etiqueta a la izquierda (26.9%) y titular a la
     derecha. En mobile la etiqueta va encima.                              */
  :root .grid-cols-\[26\.9\%_1fr\] { grid-template-columns: 1fr; row-gap: 14px; }

  /* --- banners de página (servicios y sobre nosotros) --------------------- */
  :root .grid-cols-\[1fr_auto\] { grid-template-columns: 1fr; row-gap: 16px; }


  /* ======================== HOME ======================================== */

  /* Hero: 100vh en iOS es el alto con la barra de Safari escondida, así que
     el hero se cortaba bajo la barra. svh es el alto visible real.       */
  :root #inicio > .hero-wipe { height: calc(100vh - 110px); height: calc(100svh - 110px); min-height: 460px; }
  :root #inicio { padding-bottom: 20px; }
  :root #inicio .gap-x-16 { column-gap: 28px; }
  :root #inicio .mt-10.flex.gap-9 { gap: 28px; }

  /* Nuestra oficina: la cifra pasa abajo del texto y la regla vertical se
     va (no tiene a qué separar en una sola columna).                       */
  :root #nuestra-oficina { min-height: 0; }
  :root #nuestra-oficina > div { padding-top: 64px; padding-bottom: 64px; }
  :root #nuestra-oficina .grid-cols-\[280px_1fr\] { grid-template-columns: 1fr; }
  :root #nuestra-oficina .line-grow { display: none; }
  :root #nuestra-oficina .pl-\[45px\] { padding: 0; }
  /* La cifra baja bajo el texto, alineada a la derecha como en desktop. Sin
     filete: en una sola columna no separa dos cosas, sólo subraya.       */
  :root #nuestra-oficina .pr-\[52px\] {
    order: 2; align-items: flex-end; text-align: right;
    padding: 0; margin-top: 36px;
  }
  :root #nuestra-oficina .text-\[21px\] { font-size: 18px; }

  /* Servicios: la pila sticky se apaga. En un teléfono vertical también
     se cumplía min-height:680, pero las fichas, ya en una columna, miden
     casi una pantalla cada una y la pila tapaba el contenido. El JS ve que
     .svc no es sticky y limpia sus propios estilos en línea.             */
  :root .svc { position: relative; top: auto; }
  :root .svc + .svc { margin-top: 0; }
  :root .svc-titulo { position: static; margin-bottom: 0; padding-bottom: 0; }
  :root .svc-list { margin-top: 32px; }
  :root .svc-pista { height: 0; }
  :root #servicios > div { padding-top: 64px; }
  :root #servicios h2 { font-size: 24px; }
  :root .svc-head { grid-template-columns: auto 1fr 24px; column-gap: 16px; padding: 22px 0 14px; }
  :root .svc-num { font-size: 52px; }
  :root .svc-title { font-size: 18px; }
  :root .svc-body {
    margin-left: 0; max-width: none; padding-bottom: 36px;
    grid-template-columns: 1fr;
  }
  :root .svc-body > div:first-child { grid-row: auto; }
  /* en desktop la bajada va al lado de la foto y parte sin margen */
  :root .svc-body > p { margin-top: 18px; }

  /* Blog (home y sobre nosotros): tarjetas en una columna, sin las reglas
     verticales. El velo del hover se sale 42px por el costado: en mobile
     desbordaba la página y además no hay hover.                           */
  :root #blog { margin-top: 0; }
  :root #blog > div { padding-top: 72px; padding-bottom: 80px; }
  :root #blog .flex.items-baseline { flex-wrap: wrap; row-gap: 10px; }
  :root .grid-cols-\[1fr_1px_1fr_1px_1fr\] { grid-template-columns: 1fr; row-gap: 48px; }
  :root .blog-list > .line-grow { display: none; }
  :root #blog article > span:first-child { display: none; }
  :root #blog h3 { font-size: 22px; }


  /* ======================== FOOTER (las cuatro páginas) ================== */
  :root #contacto > div { padding-top: 56px; }
  :root #contacto .grid-cols-\[1fr_1px_1fr\] { grid-template-columns: 1fr; row-gap: 56px; }
  :root #contacto .line-grow { display: none; }
  :root #contacto .w-\[420px\] { width: 260px; }
  :root #contacto .mt-16.flex { margin-top: 40px; flex-direction: column; align-items: flex-start; gap: 32px; }
  :root #contacto form { margin-top: 28px; }
  :root #contacto [type="submit"] { width: 100%; }
  :root #contacto .mt-20.pt-7 { margin-top: 56px; flex-direction: column; align-items: flex-start; }


  /* ======================== SERVICIOS =================================== */
  /* El selector pasa a ser tres botones: un rectángulo de línea cada uno,
     sin relleno y sobre el fondo de la página, para que se lean como algo
     que se toca. El listado queda abajo, con su gris.                    */
  :root .fs-barra { background: transparent; padding: 0; margin-bottom: 18px; }
  :root .fs-tabs { grid-template-columns: 1fr; row-gap: 10px; }
  :root .fs-tab {
    display: flex; align-items: baseline; column-gap: 10px;
    padding: 15px 16px;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    transition: border-color .4s ease;
  }
  :root .fs-tab[aria-selected="true"] { border-color: var(--accent); }
  /* El botón manda sobre la prestación que lista: 18px contra los 16 de
     .fs-titulo, si no el selector pesaba menos que su propio contenido. */
  :root .fs-tab-num { font-size: 15px; }
  :root .fs-tab-nombre { font-size: 18px; line-height: 1.25; }
  /* Los cortes de línea existen para que las tres pestañas calcen a lo ancho
     en desktop; acá cada botón tiene su fila. El fuente lleva un espacio
     antes del <br>, así que ocultarlo no pega las palabras.              */
  :root .fs-tab-nombre br { display: none; }
  :root .fs-lista { padding: 24px 14px 30px; }
  :root .fs-cab { grid-template-columns: 48px 1fr 18px; column-gap: 14px; padding: 18px 10px; }
  :root .fs-icono { width: 48px; }
  :root .fs-titulo { font-size: 16px; }
  :root .fs-panel-texto > div { padding: 0 10px 24px; }
  :root .pb-32 { padding-bottom: 72px; }


  /* ======================== SOBRE NOSOTROS ============================== */
  /* ya no hay que dejar hueco para la banda de cifras: bajó al flujo */
  :root .pb-\[136px\] { padding-bottom: 48px; }

  /* Cifras: una por fila. En desktop la banda monta sobre el borde del
     banner; en una columna esa superposición pegaba la primera tarjeta al
     bloque rojo y las tres se leían como un solo bloque. Acá bajan enteras,
     con aire arriba, y se ven como tres tarjetas independientes.         */
  :root .-mt-\[112px\] { margin-top: 32px; }
  :root .grid.grid-cols-3.gap-7 { grid-template-columns: 1fr; gap: 12px; }
  :root .grid.grid-cols-3.gap-7 > div { height: auto; padding-top: 28px; padding-bottom: 28px; }

  /* Mosaico de la oficina: una celda por fila. Las de texto dejan la
     proporción 4:3 y miden lo que pide su contenido.                      */
  :root .grid.grid-cols-3.gap-px { grid-template-columns: 1fr; }
  :root .grid.grid-cols-3.gap-px > .col-span-2 { grid-column: auto; }
  :root .grid.grid-cols-3.gap-px > .h-\[260px\] { height: auto; padding: 40px 24px; }
  :root .grid.grid-cols-3.gap-px > .aspect-\[4\/3\]:not(.img-wipe) { aspect-ratio: auto; padding: 28px 24px; }
  :root .grid.grid-cols-3.gap-px .mos-cta { margin-top: 28px; }
  /* Apilado, las dos fotos partían los cuatro pilares en dos pares. Se va la
     segunda (la 7ª celda) y los pilares corren seguidos; el 04 toma el rojo
     para que queden alternados: 01 claro, 02 rojo, 03 claro, 04 rojo.    */
  :root .grid.grid-cols-3.gap-px > :nth-child(7) { display: none; }
  :root .grid.grid-cols-3.gap-px > :nth-child(8) { background-color: var(--ink); }
  :root .grid.grid-cols-3.gap-px > :nth-child(8) > p:first-child {
    color: color-mix(in srgb, var(--cream) 85%, transparent);
  }
  :root .grid.grid-cols-3.gap-px > :nth-child(8) > p:nth-child(2),
  :root .grid.grid-cols-3.gap-px > :nth-child(8) .mos-cta { color: var(--cream); }
  :root section > .pt-28.pb-28 { padding-top: 64px; padding-bottom: 64px; }

  /* Visión y misión */
  :root .vm-banda > div { padding-top: 64px; padding-bottom: 64px; }
  :root .vm-banda .grid-cols-2 { grid-template-columns: 1fr; row-gap: 40px; }
  :root .vm-banda .text-\[22px\] { font-size: 19px; }

  /* Equipo: dos fichas por fila. El velo rojo se mete en medio medianil. */
  :root .team-list { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 44px; margin-top: 40px; }
  :root .team-list .eq-velo { left: -8px; right: -8px; }
  :root .team-list .eq-nombre { font-size: 17px; }
  :root section > .pt-28.pb-20 { padding-top: 72px; padding-bottom: 56px; }

  /* Modal de perfil: foto chica arriba y la caja entera scrollea (en una
     columna no hay una foto fija al lado que conservar).                  */
  :root #perfil-modal { padding: 12px; }
  :root #perfil-modal .pm-caja { padding: 28px 20px; max-height: 90vh; max-height: 90svh; overflow-y: auto; }
  /* Pop-up: la foto se queda arriba a la izquierda y el nombre con el cargo
     corren a su derecha; el desarrollo baja a todo el ancho. Va con float y
     clear y no con grilla: la foto mide 187px de alto contra los ~90 del
     nombre más el cargo, y en una grilla ese sobrante estiraba las filas y
     abría un hueco entre los dos.                                        */
  :root #perfil-modal .pm-grid { display: block; }
  :root #perfil-modal .pm-foto { width: 140px; float: left; margin: 0 18px 16px 0; }
  :root #perfil-modal .pm-cuerpo,
  :root #perfil-modal .pm-texto > span[aria-hidden] { clear: both; }
  :root #perfil-modal .pm-texto { max-height: none; overflow: visible; padding-right: 0; }
  :root #perfil-modal .pm-cerrar { top: 8px; right: 8px; width: 44px; height: 44px; }
  :root #perfil-modal h3 { font-size: 20px; padding-right: 32px; }  /* a la derecha de la foto quedan ~170px */


  /* ======================== BLOG ======================================== */
  :root .grid.grid-cols-3.gap-x-\[42px\] { grid-template-columns: 1fr; row-gap: 56px; }
  :root .grid.grid-cols-3.gap-x-\[42px\] article > span:first-child { display: none; }
  :root .grid.grid-cols-3.gap-x-\[42px\] h2 { font-size: 22px; }
    :root section > .pt-16.pb-16 { padding-top: 40px; padding-bottom: 8px; }
  /* en escritorio el hueco sobre las tarjetas lo da el pie del bloque de
     título, que acá está recortado: la grilla pone el suyo */
  :root #blog-listado { padding-top: 32px; }
}


/* Tablet y mobile: el texto del banner de servicios corre por el flujo
   sobre la foto, que tiene el mismo margen que el texto. Bajo 1156px de
   ancho (1100 + medianiles) quedaban al filo; acá se le da aire.         */
@media (max-width: 1023px) {
  :root section > .relative.z-10.grid-cols-\[1fr_auto\] { padding: 56px 40px 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root section > .relative.z-10.grid-cols-\[1fr_auto\] { padding: 64px 48px 0; }
}

/* --- servicios en mobile: el banner deja de estar pegado ----------------
   En desktop la foto queda fija y el panel gris corre por encima. En un
   teléfono eso no funciona: la barra del navegador cambia de alto y el
   recorrido se desarma. Acá la foto vuelve al flujo como banner normal,
   el título se apoya en su borde inferior y el panel arranca debajo.
   Va después del bloque de arriba a propósito: comparte selector con él y
   tiene que ganarle por orden, no por especificidad.                     */
@media (max-width: 767px) {
  :root .hero-wipe.sticky {
    position: relative; top: auto; height: 100%; min-height: 0;
  }
  :root section > .absolute.inset-x-0.-top-\[46px\] {
    top: 0; bottom: auto; height: 420px;
  }
  /* El lateral son los 20px del margen de la foto más 24 de aire adentro:
     con 20 el texto quedaba pegado al canto de la imagen.                */
  :root section > .relative.z-10.grid-cols-\[1fr_auto\] {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 420px; padding: 56px 44px 32px; row-gap: 14px;
  }
  :root section > .relative.z-20.mt-14 { margin-top: 28px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  /* equipo en tres columnas en vez de cuatro */
  :root .team-list { grid-template-columns: repeat(3, 1fr); }

  /* servicios (home): con la foto a 330px fijos la bajada quedaba en una
     columna de ~160px. Foto y bajada se reparten mitad y mitad.          */
  :root .svc-body { grid-template-columns: 1fr 1fr; }

  /* mosaico de la oficina: a 3 columnas de ~237px, «MULTIDISCIPLINARIO» no
     cabía en la celda y se montaba sobre la foto vecina.                  */
  :root .grid.grid-cols-3.gap-px > div:not(.img-wipe) { padding: 22px; }
  :root .grid.grid-cols-3.gap-px .text-\[19px\] { font-size: 15px; }
}


/* --- touch: sin hover persistente -------------------------------------
   En una pantalla táctil el :hover queda pegado después del toque: el
   listado quedaba atenuado y la ficha tocada en rojo. Se anulan los
   efectos que dependen de pasar el puntero; los estados reales (fila
   abierta, pestaña elegida) siguen igual.                                */
@media (hover: none) {
  :root .blog-list:hover article,
  :root .team-list:hover article { opacity: 1; }
  :root .team-list article:hover .eq-velo { background-color: transparent; }
  :root .team-list article:hover .eq-nombre,
  :root .team-list article:hover .ver-perfil { color: var(--ink); }
  :root .team-list article:hover .eq-cargo { color: var(--accent); }
  :root .fs-fila:not([data-abierto="true"]):hover { background: none; }
  :root .fs-fila:not([data-abierto="true"]):hover .fs-titulo { color: var(--ink); }
  :root .fs-fila:not([data-abierto="true"]):hover .fs-icono { color: var(--ink); }
  :root .fs-fila:not([data-abierto="true"]):hover .fs-mas { color: color-mix(in srgb, var(--ink) 45%, transparent); }
  :root .group:hover .group-hover\:scale-\[1\.06\],
  :root .group:hover .group-hover\:scale-\[1\.05\] { transform: none; }
}