/* ==========================================================================
   Responsive
   El mockup aprobado solo cubre desktop (1920px). Estos breakpoints
   adaptan el mismo sistema visual a tablet y mobile — nada de lo que hay
   acá toca una sola regla fuera de un @media: el desktop queda intacto.

   Prioridad al ajustar (pedido explícito): primero que el contenido
   escrito se lea bien (tamaños, interlineado, ancho de línea), después
   que las imágenes/video de apoyo escalen bien.

   Pasada de revisión completa (2026-08-11): se encontraron y corrigieron
   varios bugs reales que traía este archivo desde antes —
   - .work-tabs__title no existe en el HTML (la clase real es
     .work-tabs__overlay-title): ese override nunca aplicaba, el título
     gigante de "Cómo trabajamos" se quedaba en su tamaño desktop
     (hasta 8rem) en mobile. Corregido con el selector real.
   - .numbered-list__label (sin ámbito) pierde SIEMPRE contra
     #como-trabajamos/#capacidades .numbered-list__label (ID + clase le
     gana en especificidad a una clase sola, en cualquier media query):
     ese override tampoco aplicaba nunca. Ahora los overrides de mobile
     van con el mismo ámbito que el desktop, para que sí ganen.
   - .capacidades__media traía aspect-ratio:4/3 en tablet, pero el
     desktop ahora es 4/5 (se igualó a la tarjeta de "Experiencia" en un
     ajuste reciente) — quedaban desalineados. Corregido.
   - El título de Capacidades ahora tiene margin-left:-100px en desktop
     (para alinearlo con "Experiencia", ajuste reciente) que cancela el
     margin-left:100px de .capacidades__left — en tablet/mobile ese
     grupo pasa a una sola columna a ancho completo, así que ambos
     márgenes tienen que resetearse a 0 o el título queda empujado fuera
     de pantalla por la izquierda. Corregido.
   - El marquee de Stats (agregado en esta misma sesión) no tenía NINGÚN
     ajuste responsive: cada tarjeta mide min-width:30rem (480px) fijo,
     más ancha que cualquier mobile, y el texto se mueve todo el tiempo
     — pésimo para leer en una pantalla chica. Se apaga el movimiento y
     se pasa a una lista estática de una columna en tablet/mobile.
   ========================================================================== */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  /* --hero-top-h (variables.css) es un alto FIJO pensado para el título
     desktop, en una sola línea de grid (auto auto auto 1fr). En una
     columna angosta, título+subtítulo+@handle apilados (varias líneas
     cada uno) pueden pesar más que ese alto fijo — y como .hero__top no
     tenía overflow:hidden, ese sobrante se salía por ARRIBA de su propia
     caja (align-items:flex-end ancla el borde de ABAJO, así que lo que
     no entra se va hacia arriba) y terminaba renderizando detrás del
     header fijo (mismo azul, así que se veía como si el título
     directamente no existiera — bug real reportado: "no se está viendo
     la palabra principal"). height:auto deja que la caja crezca según
     su contenido real, sin importar cuántas líneas ocupe cada parte. */
  .hero__top {
    height: auto;
  }

  /* Antes pasaba a una grilla de 2 columnas rara (título+subtítulo
     lado a lado, handle+ancla del punto lado a lado abajo) que partía
     el párrafo del subtítulo de forma poco legible. Una sola columna,
     todo en el orden natural del HTML (el ancla del punto es invisible,
     no importa dónde caiga). */
  .hero__intro {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }

  /* Los módulos de una sola pantalla (.screen, 100vh — Cómo trabajamos,
     Firma no agencia, Capacidades, Experiencia, Team/Hablemos) son un
     ajuste pensado para desktop: en tablet/mobile sus grids pasan a una
     sola columna y necesitan más alto del que da una pantalla. Se apaga
     el 100vh forzado (vuelve a alto natural, según contenido) y el
     apilado sticky (para que no quede una sección "pegada" tapando a la
     siguiente en un alto que ya no le alcanza). */
  /* Nota: apuntamos a .screen (no a .stack-section a secas) a propósito —
     .stack-section también la usan .hero__media y .intro-statement__stage,
     que NO deben perder su sticky acá (su propio ajuste mobile vive en
     el breakpoint de 640px, más abajo). .screen es exclusiva de estos
     módulos. */
  .screen {
    position: static;
    height: auto;
    overflow: visible;
  }

  /* Fix: la estrella verde de "Antes del brief" aparecía flotando en el
     Hero (bug real reportado, "no debería ir ahí"). .work-quote__star es
     position:absolute — necesita un ancestro "posicionado" para anclarse
     (.work-quote). En desktop ese ancestro lo da position:sticky (que
     también cuenta como "posicionado" para CSS); acá arriba, .screen
     ACABA de pisar ese sticky con position:static, así que .work-quote
     se queda sin ningún ancestro posicionado — la estrella termina
     anclada al contenedor posicionado válido más cercano (ninguno,
     virtualmente la página completa), por eso aparecía arriba del todo,
     en el Hero. position:relative acá le devuelve un ancla propia, sin
     tocar nada más (no reactiva el sticky ni el 100vh). */
  .work-quote {
    position: relative;
  }

  .work-tabs { grid-template-columns: 1fr; }
  .work-tabs__media { min-height: 320px; }
  #como-trabajamos .work-tabs { height: auto; }

  /* Título gigante de la palabra activa (Comprender/Dirigir/Construir):
     a ancho completo de columna (ya no la mitad del work-tabs), el
     clamp desktop se ve proporcionado igual — se deja tal cual, sin
     recorte de tamaño acá (el ajuste real de tamaño es para mobile,
     más abajo). */

  /* .work-quote__group ya es columna por defecto desde desktop (ver
     sections.css) — esta regla queda solo para el max-width del párrafo,
     que a este ancho ya empieza a quedar apretado. */
  .work-quote__text { max-width: none; }

  .capacidades__grid { grid-template-columns: 1fr; }
  /* El margin-left:100px de .capacidades__left (que en desktop corre
     todo el bloque izquierdo, para dejar sitio al título) y el
     margin-left:-100px de .capacidades__title (que compensa SOLO el
     título, para alinearlo con "Experiencia") solo tienen sentido en el
     grid de 2 columnas de desktop — en una sola columna a ancho
     completo se resetean los dos a 0, si no el título queda corrido
     fuera de la pantalla por la izquierda. */
  .capacidades__left { margin-left: 0; }
  .capacidades__title { margin-left: 0; }
  .capacidades__media {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5; /* igual que en desktop (antes decía 4/3 acá, desalineado) */
  }
  #capacidades .numbered-list { margin-right: 0; }

  .experiencia__grid { grid-template-columns: 1fr; }
  /* El párrafo pasó a width:50% en desktop (para llegar hasta la mitad
     de la palabra "EXPERIENCIA", pedido explícito) — en una sola columna
     a ancho completo eso lo dejaría angostísimo, así que se resetea a
     ancho completo acá. */
  .experiencia__intro { width: 100%; }
  .experiencia__media { width: 100%; max-width: 280px; }

  /* Marquee de la frase de Experiencia: se apaga el movimiento y se deja
     que el texto se parta en varias líneas — a este ancho, una frase
     moviéndose todo el tiempo ya es difícil de leer con calma. La copia
     duplicada (aria-hidden, solo existía para el loop infinito) se
     oculta del todo: no aporta nada sin el movimiento. */
  .stats-marquee { overflow: visible; }
  .stats-marquee__track {
    animation: none;
    transform: none;
    display: block;
    width: 100%;
  }
  .experiencia__figures {
    display: block;
    white-space: normal;
    padding-right: 0;
    font-size: calc(var(--fs-stat) * 0.55 * 0.8); /* -20%, pedido explícito */
  }
  .experiencia__figures[aria-hidden] { display: none; }

  /* .team-section es .screen (ver arriba, se le apaga el 100vh acá) —
     sin un alto propio, la foto/palabra (position:absolute, hijos sin
     alto real) colapsarían a 0. min-height le da un alto real de sobra
     para que la foto (object-fit:cover) siga llenando la sección.
     Queda el ajuste igual aunque el módulo esté oculto (display:none),
     por si se reactiva más adelante. */
  .team-section { min-height: 60vh; }

  /* Contacto: la tarjeta pasa a ancho completo (el clamp(...,50vw,...)
     de desktop se queda corta a este ancho) — el pimiento sigue detrás,
     un poco menos grande para no asomar tan lejos de una tarjeta más
     angosta/alta. */
  .contact-section__stage { display: block; }
  .contact-card { width: 100%; max-width: 520px; }
  .contact-section__pepper { height: 140%; }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  /* Header + punto: en mobile arrancan YA en su estado compacto/alojado
     final, fijo — sin la animación de "logo grande bajando a chico +
     punto subiendo" que sí pasa en desktop con el scroll (pedido
     explícito: "no es necesario que se haga la animación... podemos de
     una vez empezar con el logo y el circulito arriba, como en el menú
     horizontal tradicional"). initHeaderScrollState()/initDotDock()
     (main.js) detectan este mismo ancho y no tocan estos elementos con
     inline styles, así que estas reglas mandan solas, sin pelea. */
  .site-header {
    height: var(--header-h-compact);
    padding: 0 var(--gutter);
    align-items: center;
  }
  .header-spacer {
    height: var(--header-h-compact);
  }
  .site-header__logo-img {
    height: var(--logo-h-compact);
  }
  /* Centrado en el alto de la barra compacta (que ya no cambia): mismo
     cálculo que hacía JS en desktop una vez terminado el scroll, pero
     fijo en CSS. */
  .dot-dock {
    top: calc(var(--header-h-compact) / 2 - 14px);
  }
  /* El placeholder ya no lo usa initDotDock() en este ancho (ver
     main.js) — se saca del flujo del todo para no dejar un hueco
     invisible de sobra dentro de .hero__intro. */
  .hero__dot-anchor {
    display: none;
  }

  .hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Achicado (antes 0.75rem): pedido explícito "que quede más pegada
       [el título] a la frase descriptiva" — el gap se aplica parejo
       entre los 3 elementos (título/subtítulo/@handle), así que bajarlo
       acerca al título con el subtítulo de una. La separación con el
       logo de arriba (pedido: "que se aleje un poco del logo") la pone
       el margin-top de .hero__title, más abajo — así ese primer hueco
       queda controlado aparte del resto. */
    gap: 0.4rem;
    padding-bottom: clamp(1.25rem, 4vh, 2rem);
  }

  /* "Baja un poco la frase principal... que se aleje un poco del logo"
     (pedido explícito): empuja SOLO el título hacia abajo, separándolo
     del logo/header de arriba — el gap ya reducido de .hero__intro
     (arriba) es lo que lo mantiene pegado al subtítulo por debajo. */
  .hero__title {
    margin-top: 1rem;
  }

  .hero__intro > .hero__handle,
  .hero__intro > .hero__subtitle {
    max-width: none;
  }

  /* Pedido explícito: en mobile el título debe quedar en exactamente 2
     renglones — "El criterio es nuestro" / "verdadero producto" — así
     que ESE salto de línea (el único que trae .hero__title) se
     mantiene. Los saltos manuales del SUBTÍTULO sí se siguen ocultando
     (son 3 renglones pensados para el ancho de desktop; en mobile
     angosto generarían renglones huérfanos) — se deja que envuelva
     natural. */
  .hero__subtitle .hero__br { display: none; }

  /* (El acomodo que tenía acá .hero__dot-anchor ya no hace falta: ahora
     se oculta del todo más arriba, initDotDock() no lo usa en mobile). */

  /* El reveal palabra-por-palabra con scroll pineado se apoya en tener
     suficiente alto de viewport para que el "stage" se vea completo; en
     mobile no cabe ni hace falta el efecto — se apaga el sticky/runway y
     se muestra el párrafo completo de una vez (initIntroReveal() en
     main.js revisa este mismo breakpoint y no llega a usar el runway). */
  .intro-statement__stage {
    height: auto;
    padding-bottom: clamp(2rem, 8vh, 3rem);
  }

  /* Sin el runway no hay pin/scroll pineado que "llenar": se apaga del
     todo para que no deje un tramo de scroll vacío de más. */
  .intro-statement__runway {
    display: none;
  }

  .intro-statement__inner { padding-top: clamp(2rem, 8vh, 3rem); }

  /* Tamaño propio para mobile: heredaba --fs-h2 (clamp con mínimo
     2rem/32px), pensado como título — acá es un párrafo largo de varias
     frases, a 32px+ se ve desproporcionado y obliga a scrollear mucho
     para leerlo completo. Bajado a un tamaño de lectura cómoda,
     todavía con jerarquía (más grande que el body). */
  .intro-statement__text {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    max-width: none;
  }

  .intro-statement__br { display: none; }

  .intro-statement__media {
    position: static;
    margin: 1.5rem auto 0;
    width: clamp(140px, 40vw, 200px);
  }

  /* #como-trabajamos y #capacidades comparten .numbered-list, pero cada
     uno pisa el tamaño base con su propio ID — hay que igualar ese mismo
     ámbito acá para que el override de mobile realmente gane (antes
     apuntaba a .numbered-list__label sin ID y perdía siempre). También
     se achica --wt-index-w (ancho reservado para "01." / "02.") para
     liberar más espacio de lectura en pantallas angostas. */
  #como-trabajamos,
  #capacidades {
    --wt-index-w: 2rem;
  }

  #como-trabajamos .numbered-list__label,
  #capacidades .numbered-list__label {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  #como-trabajamos .numbered-list__desc,
  #capacidades .numbered-list__desc {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  /* Selector real: .work-tabs__overlay-title (antes decía
     .work-tabs__title acá, una clase que no existe en el HTML — el
     override nunca llegaba a aplicar y el título se quedaba hasta en
     8rem/128px en mobile). */
  .work-tabs__overlay-title { font-size: clamp(2.5rem, 15vw, 3.5rem); }
  .work-tabs__eyebrow { font-size: 0.75rem; }
  .work-tabs__panel { padding: 1.75rem var(--gutter); }

  /* Sin el runway no hay pin/scroll pineado que "llenar" (mismo patrón
     que .intro-statement__runway / .work-quote__runway) — en mobile
     initWorkTabsScroll() ni siquiera lo mide, deja "Comprender" activo
     de una. */
  .work-tabs__runway {
    display: none;
  }

  /* ---- Restaurar el sticky-stack en mobile para Cómo trabajamos y Work ----
     Pedido explícito: "cuando se hace scroll el segundo módulo [Qué
     resolvemos] queda fijo en mobile, mientras que cómo trabajamos
     debería pasarle por encima... después viene el work, el work
     también debería pasar". El breakpoint de tablet (arriba) apaga
     TODO .screen (position:static/height:auto) porque la mayoría de
     esos módulos (Capacidades, Experiencia...) tienen grids de 2
     columnas que, en una sola columna angosta, ya no caben en 100vh —
     ahí sí hacía falta auto. Pero #como-trabajamos y #proyectos son
     angostos por naturaleza (un video + una lista de 3 acordeones
     cerrados; una fila de tarjetas) y SÍ caben cómodos en una pantalla
     completa — así que estos dos, puntualmente, recuperan
     sticky+100vh en mobile (selector por ID: le gana en especificidad
     a .screen sin importar el orden en el archivo). Sin esto,
     "Qué resolvemos" se queda pegada arriba para siempre (nada la
     cubre) apenas se le pasa por encima con el scroll — el bug
     reportado.
     min-height:480px de guarda: en el rarísimo caso de una pantalla
     realísimamente corta (celular en horizontal muy chico), esta regla
     de más especificidad no llega a aplicar y el módulo vuelve solo al
     fallback seguro de auto-height de .screen (no se arriesga a
     recortar contenido) — ver query combinada más abajo, fuera de este
     bloque (se evita anidar @media adentro de @media). */

  /* Las tarjetas de Work se veían muy chicas en mobile (pedido
     explícito, "debería agrandarse") — ancho mínimo y preferido bastante
     más grandes, para que una tarjeta ocupe la mayor parte del ancho de
     la pantalla (estilo carrusel de "una tarjeta protagonista + un
     poquito de la siguiente asomando"), en vez de mostrar 2-3 chiquitas. */
  .proyectos-section {
    padding-block: clamp(2rem, 6vh, 3rem);
  }
  .proyectos-card {
    width: clamp(240px, 74vw, 340px);
  }

  /* "WORK" un poco más grande y un poco más abajo en mobile (pedido
     explícito, esta ronda sobre el ajuste ya hecho antes: 3.2rem→3.6rem
     de piso, -8px→0px = baja 8px netos más). */
  .proyectos-section__eyebrow {
    font-size: clamp(3.6rem, 8.5vw, 6.4rem);
    transform: translateY(0px);
  }

  /* "Antes del brief" se veía muy delgado en mobile (pedido explícito,
     "el fondo negro es muy delgado en altura") — con .screen apagado en
     este rango, el alto de la sección lo da solo el padding-block que
     hereda de .section (layout.css); se le suma un extra fijo de 50px
     (pedido explícito, "unos cincuenta píxeles") arriba y abajo.
     align-items:center ya viene de la regla base (sections.css, sin
     media query) y sigue aplicando acá: con más aire arriba/abajo, el
     centrado se nota más. */
  .work-quote {
    padding-block: calc(var(--section-pad-y) + 50px);
  }

  .work-quote__group {
    gap: 1.25rem;
  }

  /* Solo el ancho: la posición la sigue calculando JS por transform
     (top:0/left:0 de la regla base es el anclaje, no hace falta
     redeclararlo acá). */
  .work-quote__star {
    width: clamp(120px, 40vw, 200px);
  }

  /* Sin el runway no hay pin/scroll pineado que "llenar": se apaga del
     todo para que no deje un tramo de scroll vacío de más (mismo patrón
     que .intro-statement__runway más arriba). */
  .work-quote__runway {
    display: none;
  }

  .work-quote__text { max-width: none; }

  .capacidades__intro { max-width: none; font-size: 1.05rem; }

  /* "CAPACIDADES"/"EXPERIENCIA" partían en 2 renglones en mobile
     (pedido explícito, con referencia visual) — son palabras sueltas
     sin espacio donde partir, y el piso del clamp de .display-xl
     (3.5rem/56px) no baja más aunque la pantalla se angoste (mismo caso
     que ya se documentó en typography.css, overflow-wrap:break-word
     como red de seguridad — acá se evita que haga falta usarla,
     bajando el tamaño real). clamp con piso más chico y buena parte en
     vw para que seaproporcional en toda la franja de mobile — a los
     anchos más angostos (320-375px) cae en el piso de 2.4rem, que sí
     alcanza a entrar en una sola línea con el ancho disponible. */
  .capacidades__title,
  .experiencia__title {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
  }

  /* ---- Capacidades en mobile: sin tarjeta giratoria, párrafo al final ----
     Pedido explícito: "quita las tarjetas giratorias, deja de una vez
     las secciones (estrategia, branding...) y debajo de todas sí pones
     el párrafo". Orden pedido: título → lista numerada → párrafo.
     .capacidades__left (título+tarjeta+párrafo, en ese orden en el HTML)
     pasa a display:contents: la caja en sí desaparece del layout y sus
     3 hijos quedan como si fueran hijos directos de .capacidades__grid,
     mezclados con .capacidades__right (la lista) — así cada uno se puede
     reordenar con `order` de forma independiente, sin tocar el HTML. */
  .capacidades__left {
    display: contents;
  }
  .capacidades__media {
    display: none;
  }
  .capacidades__title {
    order: 1;
  }
  .capacidades__right {
    order: 2;
  }
  .capacidades__intro {
    order: 3;
  }

  .experiencia__grid { gap: 2rem; }
  /* width:100% ya lo resuelve el breakpoint de tablet de arriba (cascada,
     sigue aplicando acá también) — nada que agregar en mobile. */

  /* Misma lógica que Capacidades (pedido explícito, "en experiencia
     también quitemos la tarjeta giratoria"): se deja solo el párrafo de
     "diez años..." y, debajo, los módulos de industria (Hospitalidad,
     Real Estate...) — ambos ya vienen en ese orden en el HTML, alcanza
     con ocultar la tarjeta. */
  .experiencia__media {
    display: none;
  }

  /* Título "Capacidades"/"Experiencia" (.display-xl): a este ancho el
     mínimo del clamp (3.5rem/56px) ya es cómodo por sí solo, se deja tal
     cual (mismo criterio que el resto de títulos grandes del sitio). */

  /* ---- "14+Años/120+Proyectos/8+Industrias": misma animación que
     desktop en mobile (pedido explícito) ----
     El breakpoint de tablet (arriba) apaga el marquee del todo (texto
     estático, partido en varias líneas) porque a ese ancho medio se veía
     difícil de leer en movimiento — pero en mobile Alejo prefiere lo
     contrario: "creo que en responsive sí se puede agrandar y que tenga
     la misma navegación o animación que en escritorio... más pegadita
     abajo". Se revierten, uno por uno, los mismos overrides que puso el
     bloque de tablet (mismos selectores, este bloque carga después así
     que gana), volviendo al comportamiento de la regla base (sections.css,
     sin media query): track en flex con animación infinita, texto en una
     sola línea, copia aria-hidden visible de nuevo (la necesita el loop).
     Sin font-size propio acá a propósito: se deja el tamaño de la regla
     base (bastante más grande que el que tenía antes en mobile) — "que
     sea más grande" ya queda cubierto solo con no recalibrarlo hacia
     abajo como hacía este archivo antes. */
  .stats-marquee {
    overflow: hidden;
    padding-left: var(--gutter);
  }
  .stats-marquee__track {
    display: flex;
    width: max-content;
    animation: stats-marquee-scroll 30s linear infinite;
  }
  /* +40% sobre el tamaño ya heredado de la regla base (pedido explícito
     de esta ronda, "puede ser mas grande un 40%") — mismo cálculo de
     siempre con un *1.4 al final. */
  .experiencia__figures {
    display: block;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: clamp(15px, 1.5vw, 32px);
    font-size: calc(var(--fs-stat) * 1.3 * 1.2 * 0.8 * 1.4);
  }
  .experiencia__figures[aria-hidden] {
    display: block;
  }

  /* "Más pegadita abajo" (pedido explícito): menos aire propio abajo del
     bloque de Stats, así queda más cerca del borde inferior del módulo
     (arriba se deja algo más de aire, de separación con la lista de
     industrias). */
  .experiencia__stats {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .team-section { min-height: 50vh; }
  .team-section__word { font-size: clamp(1.5rem, 8vw, 2rem); }

  /* Contacto: la tarjeta pierde algo de aire interno (a este ancho el
     padding de tablet ya se siente holgado). */
  .contact-card { padding: 1.5rem; }
  .contact-card__heading { margin-bottom: 0.75rem; }

  /* Tarjeta blanca -20% completa (pedido explícito: "achícala a un 20%
     para que se alcance a ver el pimentón de fondo") — transform:scale
     encoge TODO lo que contiene (form, texto, pills) de forma
     proporcional de una sola vez, sin tener que recalcular cada tamaño
     interno a mano. Como scale() no cambia el tamaño de layout que
     reserva .contact-section__stage (sigue midiendo el ancho/alto
     ORIGINAL de la tarjeta, sin transformar), el pimiento —posicionado
     detrás en base a ese mismo stage— no se mueve ni cambia de tamaño:
     el efecto es exactamente que la tarjeta "se achica sobre" el
     pimiento, dejando ver más de él alrededor. */
  .contact-card {
    transform: scale(0.8);
    transform-origin: center;
  }

  /* Barra de cierre: se mantiene en fila (ya no se apila/centra como
     antes) — logo a la izquierda y un poco más abajo, ciudad+contacto
     agrupados y justificados a la derecha (pedido explícito). */
  .contact-section__logo {
    margin-top: 0.75rem;
  }
  .contact-section__footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.25rem;
    margin-left: auto;
  }
}

/* Restaura sticky+100vh en Cómo trabajamos y Work SOLO cuando además hay
   alto de sobra (ver comentario largo junto a estos mismos IDs, arriba,
   dentro del bloque de max-width:640px) — query combinada en vez de
   anidar @media dentro de @media, por compatibilidad. */
@media (max-width: 640px) and (min-height: 480px) {
  #como-trabajamos,
  #proyectos {
    position: sticky;
    top: 0;
    z-index: calc(1 + var(--stack-index, 0));
    height: 100vh;
    overflow: hidden;
  }

  /* El bloque de tablet (más arriba, mismo archivo) puso
     #como-trabajamos .work-tabs en height:auto porque ahí el módulo ya
     no tenía un 100vh real que llenar — acá sí lo vuelve a tener, así
     que se restaura para que el video + panel ocupen la pantalla
     completa, igual que en desktop. */
  #como-trabajamos .work-tabs {
    height: 100%;
  }
}

/* ---- Auditoría responsive de alto nivel (2026-08-19) ----
   Pasada completa pensada en "que nunca se pierda ni se deje de leer
   contenido" (pedido explícito), más allá de los ajustes de ancho de
   arriba, que ya cubren celular/tablet en vertical. Dos riesgos reales
   que no dependen del ANCHO sino del ALTO del viewport, y por eso no los
   cubría nada de lo anterior:

   1) Ventanas/pantallas BAJAS (celular en horizontal, laptop con
      ventana chica, notebook 1366×768 con la barra de tareas/toolbar
      del navegador comiéndose un buen pedazo del alto real disponible):
      los módulos .screen (ver layout.css) fuerzan height:100vh +
      overflow:hidden — si el contenido de esa sección no alcanza a
      caber en un alto tan corto, overflow:hidden lo recorta EN
      SILENCIO, sin scrollbar ni aviso, así el ancho sea de escritorio
      completo (por eso el breakpoint de ancho ≤1024px de arriba no
      alcanza a cubrir este caso: una ventana de 1440×650 sigue siendo
      "desktop" en ancho). Mismo apagado de 100vh/overflow/sticky que ya
      se usa arriba por ancho, ahora también por alto — así el contenido
      simplemente crece hacia abajo (con scroll normal de página) en vez
      de recortarse.
   2) El menú fullscreen (.site-nav) ahora tiene 6 links (se sumó
      "Proyectos" en una ronda anterior) a tamaño grande — en un alto muy
      corto, aunque el overflow-y:auto que se agregó en layout.css ya
      evita que quede algo inalcanzable, es mejor que ni siquiera haga
      falta scrollear: acá se achican tamaño/espaciado para que los 6
      quepan cómodos de una. */
@media (max-height: 820px) {
  .screen {
    position: static;
    height: auto;
    overflow: visible;
  }
}

@media (max-height: 500px) {
  .site-nav {
    justify-content: flex-start;
    gap: 0.6rem;
    padding-block: 3.5rem 1.5rem;
  }
  .site-nav a {
    font-size: clamp(1.25rem, 5vh, 2rem);
  }
}