/* ============================================================================
   SPICA HOME V6 · RESPONSIVE (r6, 30-ago) · iPhone + iPad
   Hoja de adaptacion. Carga DESPUES de todas las demas: aqui vive TODO lo
   nuevo de responsive de estructura (nav, hero, secciones, grids, footer,
   formularios, targets tactiles). No se redefine ningun token; no se toca
   nada del desktop >=1081px salvo que se indique.
   Escalones: <=430 (iPhone), 431-767 (phone grande / plegable), 768-834
   (iPad retrato), 835-1080 (iPad apaisado y ventanas medianas).
   ========================================================================== */

/* ============================================================================
   1 · PISO DE LEGIBILIDAD (<=1080)
   r6 C34: la escala mono del desktop baja hasta 8.8px en tactil (medido: 22
   nodos entre 8.8 y 11.8px). A distancia de brazo y sin puntero fino ese
   cuerpo no se lee. El piso queda en 12px (0.75rem) para TODO el texto de la
   pagina. La escala de titulares ya bajo en el bloque responsive de
   tokens.css, que es el unico sitio donde se tocan tokens.
   r6 supervision P1-1: los iPad que se venden hoy miden mas de 1080 al girarlos
   (mini 6/7 1133, gen 10 y Air 11 1180, Pro 11 1194, 13 pulgadas 1366), asi que
   en apaisado se caian al escritorio crudo con texto de 7.7px. La condicion
   tactil los recupera sin rozar el escritorio: un equipo con raton reporta
   hover: hover y pointer: fine, y nunca puede cumplirla.
   ========================================================================== */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .site-header__cta { font-size: 0.75rem; }
  .hero__specialties { font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem); }
  .hero__cue,
  .hero__hint { font-size: 0.75rem; }
  .numbers__label { font-size: 0.75rem; }
  .pin-slide__meta { font-size: 0.75rem; }
  .pin-slide__more { font-size: 0.75rem; }
  .chip { font-size: 0.75rem; }
  .ba__tag { font-size: 0.75rem; }
  .ba__list li { font-size: 0.75rem; }
  .spec-card__lines a span { font-size: 0.75rem; }
  .contact__direct dt { font-size: 0.75rem; }
  .contact__legend { font-size: 0.75rem; }
  .field label { font-size: 0.75rem; }
  .footer__partners-label { font-size: 0.75rem; }
  .footer__problems-label { font-size: 0.75rem; }
  .footer__legal { font-size: 0.75rem; }
}

/* ============================================================================
   2 · TARGETS TACTILES (<=1080)
   Todo lo que se toca mide 44px de lado como minimo (guia de Apple). Los
   enlaces sueltos crecen por min-height, no por font-size: el dibujo no
   cambia, solo el area. Los subrayados se re-anclan al texto para que no se
   despeguen al crecer la caja.
   r6 supervision P1-1: misma condicion tactil que el bloque 1, por los iPad
   apaisados de mas de 1080 (ahi habia 26 targets por debajo de 44px).
   ========================================================================== */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .brand { min-height: 44px; }
  .site-header__cta { padding: 0.78rem 0.95rem; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .pin-slide__more { min-height: 44px; }
  .contact__direct a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__nav a,
  .footer__social a { display: flex; align-items: center; min-height: 44px; }
  .footer__nav,
  .footer__social { gap: 0; }
  /* "Sound familiar?" pasa de lista suelta a menu de filas: cada dolor es una
     fila tocable con su hairline, y el subrayado del hover deja de hacer falta */
  .footer__problems ul { gap: 0; border-top: 1px solid rgba(246, 245, 241, 0.14); }
  .footer__problems li { border-bottom: 1px solid rgba(246, 245, 241, 0.14); }
  .footer__problems a {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    border-bottom: 0;
  }
}

/* ============================================================================
   3 · HEADER
   El menu movil (boton + capa) vive en css/base.css y js/nav-mobile.js, para
   que services.html lo herede sin cargar esta hoja. Aqui solo el encaje del
   header en tablet y el respiro de los safe areas de iOS.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 900px) {
  /* a 768px la fila entra por 25px: se afina el gap de los links antes de que
     el CTA se coma la marca. Debajo de 768 ya no hay nav en linea. */
  .site-nav { gap: 1.35rem; }
  .site-header__row { gap: 1.2rem; }
}
@media (max-width: 1080px) {
  /* con viewport-fit=cover el header quedaria bajo la barra de estado; hoy el
     meta no lo pide y env() devuelve 0, asi que el valor no cambia nada */
  .site-header { padding-top: calc(0.5rem + env(safe-area-inset-top)); }
}

/* ============================================================================
   4 · HERO
   Tres comportamientos:
   - <=767  el cluster 3D vive SOLO en la franja de arriba y la copy va debajo
            (tratamiento aprobado en r2, aqui extendido hasta 767 y expresado
            con un clamp para que el apaisado de telefono no lo aplaste).
   - 768-899 misma franja: medido en vivo, a 768 y a 844 el cluster se comia
            "GET YOUR FREE DEMO" y la sublinea de specialties.
   - 900-1080 composicion de desktop (copy a la izquierda, objeto a la
            derecha), que a 1024x768 ya se leia limpia; solo se acota el ancho
            de la copy para que nunca alcance al cluster.
   OJO: la franja del stage y el padding superior de la copy son el MISMO
   valor. Si se cambia uno, cambiar los dos (mismo clamp).
   ========================================================================== */
@media (max-width: 899px) {
  .hero { min-height: auto; }
  .hero__stage { height: clamp(200px, 46svh, 460px); }
  .hero__grid {
    padding-top: calc(clamp(200px, 46svh, 460px) + 1.6rem);
    padding-bottom: 3.4rem;
  }
  .hero__copy { max-width: 100%; }
  .hero__cue { display: none; }
  /* r8c: el hint SALE de la franja 3D. Hasta r7 vivia dentro del canvas, a 3rem
     de su borde inferior, con 1 a 2 cruces cayendole encima tras un burst
     (medido en los cinco telefonos). Ahora va en el papel libre que hay entre
     la franja y el H1 (el padding-top de .hero__grid es la franja + 1.6rem), y
     centrado: en movil el cluster esta centrado (CLUSTER_MOBILE 0, 0.3), asi
     que la frase queda justo debajo del objeto del que habla.
     Resultado medido: 0 cuerpos sobre el texto en reposo y tras el burst. */
  .hero__hint {
    left: 0;
    right: 0;
    /* r8 C40: 0.29rem y no 0.55, medido: con 0.55 quedaban 13.7px de aire
       arriba contra 5.5 abajo hasta el H1; asi el hint queda centrado en
       su hueco (9.5 contra 9.7) en vez de pegado al titular. */
    top: calc(clamp(200px, 46svh, 460px) + 0.29rem);
    text-align: center;
  }
}
@media (min-width: 900px) and (max-width: 1080px) {
  /* el titular y los botones nunca cruzan el eje del cluster */
  .hero__copy { max-width: min(46rem, 56%); }
  .hero__grid { padding: 7rem 0 5rem; }
  .hero__cue { bottom: calc(1.4rem + env(safe-area-inset-bottom)); }
}
/* r6 supervision P1-2: telefono APAISADO de 768 a 899 (844x390 del 14/15/16 Pro
   Max, 832x380, 814x380). Ahi vuelve el nav en linea pero el hero seguia con la
   franja de 200px pegada arriba y el header transparente: las cruces 3D se
   pintaban justo detras de "How you start" y "Contact", y la franja se comia el
   51% del alto. En esa banda mandan las mismas reglas que de 900 a 1080: el
   stage recupera el alto completo, el cluster se va a su sitio de escritorio
   (abajo a la derecha, lejos del nav) y la copy se acota para no cruzarlo.
   El tope de alto deja fuera el iPad retrato (768x1024 y 744x1133). */
@media (min-width: 768px) and (max-width: 899px) and (max-height: 560px) {
  .hero__stage { height: 100svh; }
  .hero__copy { max-width: min(46rem, 54%); }
  .hero__grid { padding: 5.6rem 0 3rem; }
  /* r8c: aqui el hint colgaba de `bottom: 1.1rem` de `.hero`, y `.hero` mide
     497px con un viewport de 390: caia en y = 486 y no se veia. Ahora se ancla
     al STAGE (que en esta banda mide 100svh), no al fondo de `.hero`.
     La x es la unica libre que hay dentro de los 390px, y esta medida: el
     cluster de escritorio ocupa de x 381 a 809 y de y 92 a 492 (recortado en
     390), asi que toda la columna derecha esta bajo cruces. En la columna
     izquierda hay un hueco real de 51px entre la linea de specialties (acaba en
     307) y los botones (empiezan en 358), y a 114px del borde del cluster:
     0 cuerpos encima en reposo y tras el burst. La composicion de r6 no se
     toca, solo el anclaje. */
  .hero__hint {
    left: var(--gutter);
    right: auto;
    bottom: auto;
    top: calc(100svh - 4.6rem);
    text-align: left;
  }
  /* con el hero a pantalla completa el cluster sigue alcanzando la fila del
     nav (medido por pixeles: se pintaba detras de "Contact"). Aqui, y solo
     aqui, la pastilla de glass va encendida desde el primer frame en vez de
     esperar al scroll: los enlaces nunca quedan sobre las cruces. La decision 8
     sigue mandando en todo lo demas. */
  .site-header .site-header__row::before,
  .site-header .site-header__row::after { opacity: 1; }
}

/* ============================================================================
   4.bis · EL CLUSTER BAJA EN TELEFONO (r12, 1-sep, Cesar)
   Medido con el header escondido: en 390 el cluster empezaba en y 47 y en 360
   en y 40, y la fila del nav acaba en y 67. Le entraba 20 y 27px por debajo,
   asi que la primera impresion era un objeto cortado por la pastilla en vez de
   una pieza que invita a tocarla.
   El arreglo va en dos mitades porque ninguna sola alcanza: la franja entera
   baja 2.75rem, y dentro de la franja el cluster baja otro tanto gastando el
   aire muerto que le sobraba abajo (67px medidos, ver CLUSTER_MOBILE en
   js/hero3d.js). Asi el objeto no encoge ni se sale por abajo.
   El corte es 720 y NO 899 a proposito: `isMobileLayout()` de hero3d.js usa
   720, asi que de 721 a 899 el cluster ya se coloca con las coordenadas de
   escritorio (abajo y a la derecha) y ahi nunca toco el nav. Bajarlo tambien
   ahi lo habria sacado por el borde inferior de la franja.
   OJO: la franja, el padding de la copy y el top del hint comparten el mismo
   valor. Si se cambia uno, cambiar los tres.
   ========================================================================== */
@media (max-width: 720px) {
  .hero__stage { top: 2.75rem; }
  .hero__grid { padding-top: calc(2.75rem + clamp(200px, 46svh, 460px) + 1.6rem); }
  .hero__hint { top: calc(2.75rem + clamp(200px, 46svh, 460px) + 0.29rem); }
}

/* ============================================================================
   5 · RITMO Y CABECERAS DE SECCION
   ========================================================================== */
@media (max-width: 1080px) {
  /* ningun hijo de grilla puede imponer su min-content: sin esto las tarjetas
     de steps se pasaban 34px del shell a 375px (la escena pide 300px) */
  .pin-slide__inner > *,
  .steps__grid > *,
  .ba__grid > *,
  .doors__grid > *,
  .contact__grid > *,
  .footer__show > *,
  .footer__grid > *,
  .steps__card > *,
  .pin-slide__media .demo { min-width: 0; }
  .section-head { gap: 1rem; }
}
@media (max-width: 767px) {
  .section-head { gap: 0.85rem; }
  .numbers__row { gap: 1.2rem; }
  .numbers__label { max-width: 22ch; }
}

/* ============================================================================
   6 · FALLBACK APILADO DE LOS PINES (outcomes 7 slides · specialties 3)
   Los pines solo montan >=1081px (decision firmada, js/pinned.js no se toca).
   Debajo el problema no es tecnico sino de composicion: siete bloques
   identicos en fila de una sola columna.
   - 768-1080 vuelve la composicion de dos columnas del desktop (copy a un
     lado, escena al otro) y con ella la maya del sector derecho: cada slide
     se lee como una pieza y la seccion mide la mitad. La reparticion NO es
     6/6 como en desktop sino 5/7: a 1024 el 6/6 deja 443px de escena y las
     escenas estan dibujadas para 460-610; con 5/7 quedan 522px y entran sin
     recortarse. La copy del slide es centrada y corta, aguanta la columna
     angosta mejor que la escena.
     (r8 A, 31-ago) La banda arrancaba en 835 y ahora arranca en 768: Cesar
     aprueba pagar la escena mas chica a cambio del alto. Medido en la pagina
     real, el documento a 768 baja de 17.066 a 13.004px y a 820 de 17.149 a
     13.015px. El 5/7 a 768 deja 391.56px de escena (425.20 a 834), que cae de
     lleno en el tramo de caja angosta de 332 a 480px para el que estan
     calibradas las 14 hojas de css/responsive-scenes.css: sus dos bloques
     (721-1080 y <=1080) YA se aplicaban en 768-834, asi que la escena no
     necesita ni un valor nuevo. El 6/6 a 768 daria 335.60px, el suelo del
     tramo, y el 4/8 dejaria la copy en 223.71px, por debajo de los 225.70px
     que mide el CTA de la spec-card: 5/7 es el unico reparto que sirve para
     los dos pines.
   - <=767 (telefono) una sola columna, con hairline entre slides y la escena
     encuadrada y centrada: queda una secuencia numerada, no una lista caida.
   HAIRLINE (r8 A): `.pin-slide + .pin-slide` se queda SOLO en una columna. Con
   dos columnas cada slide ya se lee como pieza suya, que es por lo que la
   banda 835-1080 nunca lo llevo, y a 768 esa linea cruzaria por encima de la
   maya que se acaba de re-encender. Sin el, 834 y 835 dibujan igual.
   El rail .pin__progress solo existe con .pin--active (>=1081): nada de lo de
   aqui lo toca, y por eso el calc que lo alinea con la columna de texto no
   necesita duplicarse en este tramo.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1080px) {
  .pin-slide__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.2rem, 2.6vw, 3rem);
    align-items: center;
  }
  /* con dos columnas la maya vuelve a tener sector derecho propio: se
     re-enciende el pseudo que el fallback de r4 apagaba */
  .pin__stage::before { display: block; }
  .pin-slide { padding: calc(var(--rhythm) * 0.34) 0; }
  .pin-slide__copy { gap: 0.85rem; }
  .pin-slide__actions { gap: 0.9rem 1.1rem; }
  .pin--spec .spec-card { max-width: none; }
}
@media (max-width: 767px) {
  .pin-slide { padding: calc(var(--rhythm) * 0.42) 0; }
  /* hairline de continuidad: marca el corte entre slides sin inventar
     superficies por slide (regla r3.1: el fondo del pin es uno solo) */
  .pin-slide + .pin-slide { border-top: 1px solid var(--line); }
  /* la copy y su escena se agrupan (gap corto) y el corte entre slides
     respira el doble: el ojo lee siete piezas, no catorce bloques sueltos */
  .pin-slide__inner { gap: 1.15rem; }
  .pin-slide__copy { gap: 0.8rem; }
  .pin-slide__meta { letter-spacing: 0.07em; }
  .pin-slide__actions { gap: 0.9rem; flex-direction: column; align-items: center; }
  .pin--spec .spec-card { max-width: 34rem; justify-self: center; }
}
/* r8 A: con la banda de dos columnas en 768 la spec-card baja a la columna de
   5fr, que a 768 mide 279.67px. Con el padding de 1.9rem le quedan 216.87px de
   contenido y el CTA ("Get a free demo") mide 225.70px intrinsecos: se salia
   8.82px, y con el 1.9rem el ultimo ancho que fallaba era 792. Con el padding
   que ya usa el telefono quedan 232.87px y entra con 7.17px de sobra. Valor
   existente, ningun numero nuevo. */
@media (max-width: 834px) {
  .spec-card { padding: 1.5rem 1.4rem 1rem; }
}

/* ============================================================================
   7 · CONTRATO DE ENCUADRE DE LAS ESCENAS
   El interior de las 14 escenas "app viva" es del agente D
   (css/responsive-scenes.css). Aqui solo se fija el CONTENEDOR: ancho
   disponible y alto reservado en cada escalon. Las medidas reales de ancho
   que quedan para .demo, con el shell y los gaps de arriba, estan en el
   informe ../docs-r6/INFORME-C-RESPONSIVE-ESTRUCTURA.md.
   ========================================================================== */
/* r8 A: la banda baja a 768 con el pin. Ancho real de .demo medido en la
   pagina: 391.56px a 768, 407.86 a 800, 418.06 a 820, 425.20 a 834, 458.86 a
   900, 522.08 a 1024 y 550.63 a 1080. El piso de 420px lo unico que hace es
   igualar las dos escenas mas bajas (find y strategy) con el resto del pin,
   igual que venia haciendo de 835 para arriba; el resto de las 12 lo superan
   por contenido. El .pin-slide__media de 36rem del tramo de una columna
   desaparece: con dos columnas el media ES la columna. */
@media (min-width: 768px) and (max-width: 1080px) {
  .pin-slide__media .demo { min-height: 420px; }
  .pin--spec .pin-slide__media .demo { min-height: 440px; }
}
@media (min-width: 431px) and (max-width: 767px) {
  .pin-slide__media { justify-self: center; width: 100%; max-width: 30rem; }
  .pin-slide__media .demo { min-height: 360px; }
  .pin--spec .pin-slide__media .demo { min-height: 380px; }
}
@media (max-width: 430px) {
  .pin-slide__media { justify-self: center; width: 100%; max-width: 30rem; }
  .pin-slide__media .demo { min-height: 330px; }
  .pin--spec .pin-slide__media .demo { min-height: 350px; }
}

/* ============================================================================
   9 · THE DIFFERENCE (before / after)
   En iPad apaisado las dos tarjetas vuelven a la pareja: el sentido de la
   seccion es la comparacion lado a lado. En retrato y telefono no caben (las
   listas son mono en mayusculas) y se apilan.
   ========================================================================== */
@media (min-width: 835px) and (max-width: 1080px) {
  .ba__grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}
@media (max-width: 834px) {
  .ba__grid { gap: 1.1rem; }
  .ba { padding: var(--rhythm) 0 calc(var(--rhythm) * 0.5); }
}
@media (max-width: 767px) {
  .ba__list { gap: 0.55rem; }
  .ba__list li { padding-left: 1.35rem; }
}

/* ============================================================================
   10 · TRES PASOS
   Tres formas segun el ancho:
   - >=960  las tres tarjetas en fila, como el desktop (la escena entra en la
            columna porque min-width:0 la deja encogerse).
   - 620-959 tarjeta horizontal: escena a la izquierda, numero y texto a la
            derecha. Es la que salva el iPad retrato y el apaisado de telefono,
            donde una columna deja la escena de 300px flotando en 690px.
   - <=619  apilada, como venia.
   ========================================================================== */
@media (min-width: 960px) and (max-width: 1080px) {
  .steps__grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .steps__card { padding: 1.3rem 1.3rem 1.2rem; }
}
@media (min-width: 620px) and (max-width: 959px) {
  .steps__grid { gap: 1.1rem; }
  /* las filas 1 y 5 son 1fr y se reparten el sobrante: el bloque de texto
     queda centrado frente a la escena en vez de estirarse en tres pedazos */
  .steps__card {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 1.6rem;
    row-gap: 0;
    align-content: stretch;
    padding: 1.5rem 1.6rem;
  }
  .steps__card .steps__scene {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin-bottom: 0;
  }
  .steps__num { grid-column: 2; grid-row: 2; }
  .steps__card h3 { grid-column: 2; grid-row: 3; margin-top: 0.2rem; }
  .steps__card p { grid-column: 2; grid-row: 4; margin-top: 0.5rem; }
}
@media (max-width: 619px) {
  .steps__card { padding: 1.4rem 1.3rem 1.3rem; }
  .steps__card .steps__scene { width: 100%; }
}

/* ============================================================================
   11 · DOORS
   Las dos puertas son una pareja: se separan solo cuando dejan de caber.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1080px) {
  .doors__grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}
@media (max-width: 767px) {
  .door-card { padding: 1.5rem 1.4rem; }
  .doors__tone { font-size: 0.95rem; }
}

/* ============================================================================
   12 · FAQ Y CONTACTO
   Desde 768px la pareja cabecera + contenido vuelve a las dos columnas del
   desktop; debajo, una columna.
   (r8 A, 31-ago) La banda empezaba en 900 y el README tenia anotado el tramo
   768-899 como el bloque peor equilibrado del iPad retrato. Medido a 768, que
   es el peor caso de la banda nueva:
   - CONTACTO en 6fr/6fr deja 329.59px de columna y 278.39px de ancho util
     dentro del formulario. Las tres puertas del radiogroup siguen en UNA sola
     linea: la mas larga, "Free plan · growth & strategy", mide 203.50px sobre
     216.39px utiles (el disco de 20px, el gap de 11.20, el padding de 28.80 y
     los 2 de borde se llevan 62.00). Los campos miden 53.19px de alto y el
     submit 50.34px, los dos por encima de los 44px tactiles. El 6/6 aguanta a
     768: no hace falta un reparto distinto para ninguna sub-banda.
   - FAQ en 5fr/7fr deja 274.66px de cabecera y 384.53px de lista. Dos de las
     cinco preguntas pasan a dos lineas a 768, una sola a 820 y ninguna a 834;
     una pregunta que envuelve no es un defecto de encaje, y la seccion baja de
     526.41 a 445.22px de alto.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1080px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ============================================================================
   13 · FORMULARIO Y CAMPOS
   iOS hace zoom al enfocar cualquier campo con cuerpo menor de 16px. El
   formulario ya heredaba 1rem por `font: inherit`, pero queda explicito para
   que no dependa del root. Los campos y las puertas crecen a 44px de alto.
   ========================================================================== */
@media (max-width: 1080px) {
  .field input,
  .field textarea {
    font-size: 16px;
    padding: 0.8rem 0.9rem;
  }
  .field textarea { min-height: 7rem; }
  .contact__doors label {
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
  }
  /* el area tocable real de la puerta es la etiqueta entera (48px de alto);
     el disco crece igual para que el dedo lo acierte sin apuntar */
  .contact__doors input { width: 1.25rem; height: 1.25rem; flex: none; }
  .contact__submit { justify-self: stretch; justify-content: center; }
}
@media (max-width: 767px) {
  .contact__form { gap: 0.95rem; }
  .contact__direct { gap: 0.7rem; }
  /* r8: EL FORMULARIO SUBE POR DELANTE DEL TEXTO DE APOYO.
     `.contact__grid` se apila SOLO por debajo de 768px (arriba manda el bloque
     12, que la devuelve a dos columnas), y apilada el intro empujaba el <form>
     hasta 675.4px: con la seccion aterrizada en su top el formulario quedaba
     al 23.3% en 402x874 y al 9.9% en 375x812, con el primer campo 66.8px por
     debajo del pliegue. Aqui el orden pasa a kicker, titular, FORMULARIO, y
     despues el parrafo y los contactos directos, que es la practica normal en
     telefono. `display: contents` en el intro sube sus cuatro hijos a la
     grilla para poder ordenarlos; el `row-gap` baja a los mismos 1.3rem que
     tenia el intro por dentro, y el formulario recupera el aire con su propio
     margen. Inerte de 768px para arriba: ahi el formulario ya se ve entero. */
  .contact__grid { row-gap: 1.3rem; }
  .contact__intro { display: contents; }
  .contact__intro > * { min-width: 0; }
  .contact .kicker { order: 1; }
  .contact #contact-title { order: 2; }
  .contact__form { order: 3; margin: 1.1rem 0 0.5rem; }
  .contact .lead { order: 4; }
  .contact__direct { order: 5; margin-top: 0; }
}

/* ============================================================================
   14 · FOOTER
   ========================================================================== */
@media (min-width: 835px) and (max-width: 1080px) {
  .footer__show { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
}
@media (max-width: 1080px) {
  /* con viewport-fit=cover la tinta del footer llegaria al indicador de inicio;
     hoy env() devuelve 0 y el valor no cambia nada */
  .footer { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  /* el billboard es 16/9: a 342px de ancho mide 192px de alto, pero heredaba
     el min-height de 380px de .demo y dejaba 188px de vacio negro debajo.
     El encuadre lo manda la relacion de aspecto, no el piso de las escenas. */
  .footer__show .footer__billboard { min-height: 0; }
  /* la ultima fila ya tiene debajo el borde de .footer__show: no van dos */
  .footer__problems li:last-child { border-bottom: 0; }
}
@media (max-width: 767px) {
  .footer__partners { justify-content: center; }
  .footer__partners ul { margin-left: 0; justify-content: center; gap: 1.2rem 1.6rem; }
  .footer__partners-label { width: 100%; text-align: center; }
  .footer__grid { gap: 1.6rem; padding-bottom: 1.8rem; }
  .footer__legal { gap: 0.4rem; }
}

/* ============================================================================
   15 · TACTIL SIN PUNTERO FINO
   En (hover: none) el :hover se queda pegado tras el toque: tarjetas
   levantadas para siempre, sombras que no bajan y, en la puerta violeta, el
   label del boton en blanco sobre fondo claro. Todo eso se neutraliza; el
   llenado liquido y el asiento de :active viven en css/base.css.
   ========================================================================== */
@media (hover: none) {
  .steps__card:hover,
  .door-card:hover,
  .plan:hover,
  .spec-card:hover { transform: none; box-shadow: none; }
  .spec-card:hover { border-color: var(--line); }
  .door-card--violet .btn--primary:hover { color: var(--ink); }
  .pin-slide__more:hover em { transform: none; }
  .spec-card__lines a:hover { color: inherit; padding-left: 0.2rem; }
  /* r13: vuelve el markup, vuelven los tres selectores (r7 C36 los habia
     retirado con el). Este es el segundo sitio donde se enciende la flecha de
     las lineas del catalogo en tactil; el primero es el @media (hover: none)
     del final del bloque de .spec-card__lines a en sections.css. Los dos hacen
     falta: aqui ademas se apaga el hover pegado que deja el toque. */
  .spec-card__lines a em { opacity: 1; transform: none; }
  .footer__problems a:hover { color: rgba(246, 245, 241, 0.75); border-color: transparent; }
  .footer__nav a:hover,
  .footer__social a:hover,
  .contact__direct a:hover { color: inherit; }
  .strategy li:hover { background: none; }
}

/* ============================================================================
   16 · MARCA EN PANTALLAS MUY ESTRECHAS (r8)
   Por debajo de ~350px la fila del header no da de si: marca, CTA y boton de
   menu no caben a tamano completo. Sin ayuda, el flex aprieta el lockup y lo
   deja un 25% mas pequeno de lo debido, con hueco alrededor.
   El primer intento fue `flex-shrink: 0`, y estaba MAL: la marca dejaba de
   ceder pero el CTA se le montaba encima 13.45px, se quedaba el toque
   (elementFromPoint devolvia el boton) y 23.05px del logo caian fuera del area
   clicable, de 320 a 342px. Peor el remedio.
   La solucion real es pedir menos sitio, no negarse a ceder: se baja el lockup
   a una medida que SI cabe, y de paso se aprieta el CTA. Asi no hay solape,
   el logo se lee entero y el toque sigue siendo suyo.
   ========================================================================== */
@media (max-width: 360px) {
  .brand { gap: 0.45rem; }
  .brand__mark { height: 1.45rem; width: auto; }
  .brand__word { height: 1.09rem; }
  .site-header__cta { padding: 0.5rem 0.8rem; font-size: 0.62rem; }
}