/* ==========================================================================
   Ingenti AI — one-pager · build v3
   Ajustes de móvil. Se carga el último, después de sections.css y gallery.css,
   así que gana a igualdad de especificidad y casi nunca hace falta !important.

   El objetivo de este fichero es uno solo: que la versión de móvil cuente lo
   mismo que la de escritorio. Casi todos los defectos vienen del mismo sitio —
   retículas de dos columnas y alturas mínimas pensadas para un monitor — así
   que aquí se deshacen esas maquetas, no se inventa un diseño nuevo.

   Todo va dentro de @media (max-width: …): por encima de 900px no cambia nada.
   Son reglas de maqueta, sin animación, así que el bloque
   @media (prefers-reduced-motion: reduce) de sections.css sigue mandando igual.

   Tres cortes, cada uno atado a lo que pasa en el proyecto a ese ancho:
     900px — sections.css ya da por hecho que no hay puntero (menú, carrusel
             nativo, tarjetas sin apilar). Aquí va el grueso.
     720px — es donde el equipo y el pie bajan a una sola columna.
     560px — sólo teléfono: apretar lo que a 600-700px todavía respiraba.
   ========================================================================== */


/* ==========================================================================
   A · Táctil y pantalla estrecha (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {

  /* ---------- A1. Ritmo vertical ---------------------------------------- */
  /* --sec-y vale 101px en una pantalla de 844px, y lo pone ARRIBA y ABAJO de
     cada .section: entre dos bloques consecutivos quedaban 200px en blanco,
     casi un cuarto de pantalla sin nada. Se corrige el token y no sección por
     sección porque el defecto no es de ninguna sección concreta, es del ritmo:
     una medida calculada para que respire un monitor de 1440px de alto.
     A 7.5vh siguen siendo ~63px, suficiente para separar dos bloques sin que
     haya que hacer scroll a ciegas para llegar al siguiente. */
  :root { --sec-y: clamp(52px, 7.5vh, 88px); }


  /* ---------- A2. Hero --------------------------------------------------- */
  /* El orbe mide 190vw, mucho más que la ventana, y se centraba con
     `left:0; right:0; margin-inline:auto`. Ese centrado sólo funciona mientras
     los márgenes salen positivos: en cuanto el elemento es más ancho que su
     contenedor, el navegador descarta el reparto y lo pega a la izquierda (es
     el caso sobre-restringido de la especificación). En escritorio el orbe cabe
     y queda centrado; en móvil se iba a un lado y se veía medio nudo pegado al
     borde derecho. Se centra desde el 50% del contenedor, que no depende del
     ancho propio y por tanto no se rompe.
     `translate` y no `transform`: motion.js anima el transform de este mismo
     elemento (escala y desplazamiento vertical con el scroll) y lo borraría. */
  .hero__orb {
    left: 50%;
    right: auto;
    translate: -50% 0;
  }


  /* ---------- A3. Texto cinético ----------------------------------------- */
  /* 14vw son 55px en un móvil de 390: "EN EL NEGOCIO" medía 370 de los 390px
     de pantalla, así que la frase sólo cabía entera en el fotograma exacto en
     que cruza el centro y el resto del recorrido se leía cortada por los dos
     lados. Con line-height .86 encima, las mayúsculas de las dos líneas se
     tocaban. A 9vw la frase ocupa dos tercios de pantalla: se lee entera
     durante buena parte del barrido, que es justo lo que el efecto pretende, y
     el recorrido de ±105% del ancho propio la sigue sacando de cuadro. */
  .kinetic__line {
    font-size: clamp(2rem, 9vw, 3.25rem);
    line-height: 1;
    letter-spacing: clamp(-3px, -.5vw, -1.5px);
  }
  /* 118px de respiro arriba y abajo para dos líneas de 35px: el bloque medía
     330px y dos tercios eran aire. */
  .kinetic { padding-block: clamp(40px, 6vh, 72px); }


  /* ---------- A4. V.Suite · tarjetas y fichas sectoriales ---------------- */
  /* El defecto más caro de la página. El bloque responsive de sections.css
     apila `.pcard__in`, pero `.pcard__in` ya era una columna flex: la retícula
     de verdad (gráfico | texto) vive en `.pcard__body`, y esa nunca llegaba a
     deshacerse. Resultado en 390px: 112px para una caja de gráfico decorativa
     y 162px para TODO el texto, con titulares partidos en cuatro líneas
     ("Reclutamiento / end-to-end / automatizado / con IA"). */
  .pcard__body {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.6vh, 24px);
  }
  /* Se repite la regla de sections.css: al cambiar el display del panel hay que
     dejar claro que uno oculto sigue sin ocupar sitio. Por especificidad
     `[hidden]` ya ganaría, pero esto es demasiado fácil de romper sin querer
     como para dejarlo al azar. */
  .pcard__body[hidden] { display: none; }

  /* El texto manda y va primero: es lo único de la tarjeta que informa. El
     gráfico y las cifras quedan debajo, que es el orden natural de lectura
     cuando ya no hay dos columnas que mirar a la vez. */
  .pcard__main { order: -1; }
  /* Los 22ch estaban puestos para frenar el titular en una columna ancha de
     escritorio. A ancho completo de móvil ya no hace falta nadie que lo frene. */
  .pcard__main .t-h3 { max-width: none; }

  /* 24px de aire por los cuatro lados son 48 de los 350px útiles de un móvil
     de 390: la tarjeta gasta en marco lo que le falta al texto. A 18px varios
     párrafos se ahorran una línea y las cuatro tarjetas pierden alto. Sigue
     siendo un clamp porque de 560 a 900px el marco todavía tiene sitio. */
  .pcard__in { padding: clamp(18px, 2.8vw, 28px); }

  /* El gráfico no se oculta —deja la tarjeta sin respiro entre el texto y las
     cifras— pero pasa a banda baja: de media tarjeta a una franja. Es
     decorativo (los SVG van aria-hidden), así que es lo primero que debe ceder
     altura cuando la sección mide ocho pantallas. */
  .pcard__aside .prod__viz {
    aspect-ratio: 16 / 6;
    min-height: 0;
    flex: none;
  }
  /* El dibujo se ata al ANCHO de la franja, nunca al alto. Atarlo al alto no
     surtía ningún efecto: .prod__viz es un grid de una sola fila automática, y
     un porcentaje de alto contra una fila que se dimensiona por su contenido
     es una referencia circular, así que el navegador lo resuelve como `auto`.
     El SVG se quedaba cuadrado de 244px dentro de una franja de 131px y se
     recortaba más de la mitad — justo la de abajo, que es donde cada dibujo
     remata con su acento ámbar (el punto y el anillo del embudo). El ancho sí
     es medida definida, porque la franja ocupa toda la columna: con la
     proporción 16/6, un 35% de ancho son 109px de lado en un móvil de 390: el
     93% del alto de la banda, y entra entero con aire por los dos lados.
     Los viewBox ya traen además su propio margen interior (el dibujo vive
     entre el 17% y el 90% del lienzo), así que no hace falta dejar más aire. */
  .pcard__aside .prod__viz svg { width: 35%; height: auto; }

  /* Con la columna a ancho completo las cuatro métricas pueden crecer hasta el
     cuerpo que tienen en escritorio, donde son el remate de la tarjeta. */
  .pcard__aside .bento--compact .bento__n { font-size: 1.375rem; }
  /* 18px de aire por lado más 16px entre rótulo y cifra son 52 de los 107px
     que mide la celda: la mitad de la caja es margen. Son medidas de la
     columna ancha de escritorio; aquí van cuatro celdas por tarjeta y cuatro
     tarjetas. Con 13 y 10 la cifra sigue despegada del rótulo y la sección se
     ahorra unos 130px. Dos columnas se quedan: en una sola las cuatro celdas
     harían el doble de alto, que es justo lo contrario de lo que se busca. */
  .pcard__aside .bento--compact .bento__cell { padding: 13px; gap: 10px; }

  /* La pila reserva 84px al final para que la última tarjeta sticky tenga
     margen de maniobra al soltarse. A este ancho sections.css ya las ha
     devuelto al flujo normal (`position: static`), así que ese respiro no lo
     usa nadie: es hueco muerto justo antes de la galería sectorial. */
  .pstack { padding-bottom: clamp(24px, 3vh, 40px); }

  /* La misma checklist que .pcard__main, pero la de las seis fichas
     sectoriales del panel: se quedó a dos columnas cuando el .sdetail__grid
     que la contiene ya había bajado a una. En 155px por columna, "Journey
     multicanal: WhatsApp, llamada telefónica, llamada web" cae en seis
     líneas. */
  .sdetail__main .checks { grid-template-columns: 1fr; }


  /* ---------- A5. Casos de éxito · hueco muerto -------------------------- */
  /* Las 100vh y los 88px de respiro superior son del anclaje de escritorio: al
     pegarse la sección al viewport, el encabezado del caso tenía que esquivar
     la cabecera fija. En táctil sections.css ya degrada el carrusel a scroll
     nativo con snap y no hay anclaje, así que esa altura mínima se quedaba
     como 223px de vacío entre el título de la sección y el primer caso. */
  .cases {
    min-height: 0;
    padding-top: 0;
  }


  /* ---------- A6. Isla flotante ----------------------------------------- */
  /* Encogerla no servía: lo que estorba de la isla no es su alto, es su ancho.
     En fila ocupaba 100px de los 350 útiles de un móvil de 390, con el botón
     ámbar —el único opaco— aterrizando a 278-324px, o sea en mitad de la
     columna. Eso no muerde el final de una línea: se traga una palabra entera
     por el centro, y como es opaco la borra, no la atenúa.
     Siendo `position: fixed` no hay hueco inferior que lo arregle: estorba a
     media sección, no al final, y ningún `padding` alcanza a un elemento
     anclado al viewport. Lo que sí se puede es elegir el carril. En vertical
     los dos botones comparten los 44px pegados al borde, donde sólo llega el
     remate de las líneas más largas. Barriendo el documento entero en pasos de
     120px y midiendo rects de Range (glifo, no caja): 110 líneas tocadas y
     55.666px² de texto tapado pasan a 56 líneas y 10.809px², y los 35
     mordiscos a mitad de línea bajan a CERO — los 64 que quedan se comen el
     último 8% de una línea. Del lado táctil, ningún control queda cubierto en
     más del 9% de su caja. 44px es el mínimo de superficie táctil, así que de
     ahí no se baja. */
  .fab {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    right: 10px;
    bottom: 10px;
  }
  .fab__btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  /* El rótulo del botón de llamada ES el nombre accesible del enlace: no hay
     aria-label, el icono va aria-hidden y no queda nada más. sections.css lo
     quitaba con `display: none` bajo 720px, dejando el enlace sin nombre. Aquí
     se oculta a la vista pero se conserva en el árbol de accesibilidad, y de
     paso se desactiva el despliegue por puntero —entre 721 y 900px todavía
     existía— porque en un botón de 44px fijos el rótulo se saldría. */
  .fab__btn--call .fab__t,
  .fab__btn--call:hover .fab__t,
  .fab__btn--call:focus-visible .fab__t {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: none;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* El pie sí es la excepción: es el final del documento, no se puede seguir
     bajando, así que ahí la isla taparía los avisos legales para siempre. En
     columna la isla mide 98px de alto contando el margen inferior, no 46. */
  .ftr__bar { padding-bottom: 104px; }


  /* ---------- A7. Cuerpo mínimo de 12px --------------------------------- */
  /* Etiquetas en versalitas calculadas para mirarse de cerca en un monitor: a
     10-11px en un móvil dejan de leerse. Suben todas a 12px, el mínimo que el
     cliente pide, y a cambio se les recorta algo de tracking — era el tracking
     ancho lo que las sostenía como etiqueta cuando eran diminutas, y mantenerlo
     al subir el cuerpo las haría competir con el texto corrido. Siguen siendo
     versalitas espaciadas, sólo que legibles. */
  .bento--compact .eyebrow { font-size: .75rem; letter-spacing: .08em; }
  .cbento__k               { font-size: .75rem; letter-spacing: .1em; }
  .cslide__idx             { font-size: .75rem; letter-spacing: .18em; }
  .member__label           { font-size: .75rem; }
  .field__l                { font-size: .75rem; letter-spacing: .1em; }
  .ftr__h                  { font-size: .75rem; letter-spacing: .12em; }
  /* El selector de idioma de la cabecera no estaba en la lista del cliente,
     pero son dos etiquetas de 11px en lo primero que se ve de la página. */
  .lang__btn               { font-size: .75rem; letter-spacing: .08em; }
  /* Los índices 01-10 del menú. Es el único que no es decorativo: bajo 900px
     .hdr__nav desaparece y este menú es TODA la navegación del sitio, así que
     su numeración es lo que te dice por dónde vas. */
  .menu__idx               { font-size: .75rem; letter-spacing: .12em; }
}


/* ==========================================================================
   B · Una sola columna (≤ 720px)
   ========================================================================== */
@media (max-width: 720px) {

  /* ---------- B1. Equipo ------------------------------------------------- */
  /* `grid-auto-rows: 1fr` iguala las seis fichas a la más alta. En tres
     columnas eso es lo correcto: cuadra las dos filas. En una sola columna
     significa que las seis heredan la altura de la biografía más larga, y la
     sección se iba a 2.555px siendo casi todo relleno vacío dentro de cada
     ficha. En vertical no hay nada que cuadrar: cada una mide lo suyo. */
  .team-grid { grid-auto-rows: auto; }

  /* ---------- B2. Pie ---------------------------------------------------- */
  /* En escritorio son cuatro columnas; en una sola el pie se iba a 1.063px,
     una pantalla y cuarto de enlaces. Dos columnas se acercan más a la forma
     original y ahorran un tercio de altura. La marca y el bloque de contacto
     cruzan las dos: la primera lleva el logotipo y el párrafo, y el último los
     datos largos (el correo no cabe en media columna de 390px). Si algún día
     se añade una cuarta lista, cruzará ella en lugar de contacto; se verá raro,
     pero no se rompe. */
  .ftr__grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }
  .ftr__brand,
  .ftr__grid > :last-child { grid-column: 1 / -1; }
}


/* ==========================================================================
   C · Teléfono (≤ 560px)
   ========================================================================== */
@media (max-width: 560px) {

  /* ---------- C1. Fichas del equipo ------------------------------------- */
  /* 96px de foto más 22px de separación son casi un tercio de la ficha en
     vertical. A 76px el retrato sigue reconociéndose y seis fichas ahorran
     unos 250px de recorrido. */
  .member__photo {
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
  }

  /* ---------- C2. Bento del caso ---------------------------------------- */
  /* Los 140px de alto mínimo venían de cuando las celdas iban en retícula y
     tenían que cuadrar entre ellas. Apiladas, cuatro celdas con más aire del
     que su contenido necesita suman medio viewport de propina. */
  .cbento__cell { min-height: 118px; }
}