/* ─── COMPONENTS ────────────────────────────────────────────────── */
/* Se va completando a medida que construimos cada bloque del home. */

/* ─── BUTTONS ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-cta);
  font-weight: 500;
  white-space: nowrap;
}

.btn-pill {
  background: var(--color-accent);
  color: #faf9f4;
  padding: 14px 24px;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), background 0.2s ease;
}
/* Sin ícono para mover (ej. el "Consultar por WhatsApp" del nav): el
   hover es solo el levantamiento del botón, sin cambio de color. Envuelto
   en (hover:hover) — sin esto, un tap en touch deja el :hover "pegado"
   (botón flotando) hasta el próximo tap en otro lado. */
@media (hover: hover) {
  .btn-pill:hover { transform: translateY(-2px); background: var(--color-accent); }
}

.btn-pill--icon {
  justify-content: space-between;
  padding: 8px 8px 8px 24px;
}
/* Botones con ícono: en hover solo se mueven, nunca cambian de color —
   ni el fondo del botón ni el círculo. Pisa el fondo que .btn-pill pone
   en hover para dejarlo igual al estado normal (.btn-pill-light tiene
   su propio hover más abajo, con el mismo criterio). */
.btn-pill--icon {
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), background 0.2s ease;
}
@media (hover: hover) {
  .btn-pill--icon:hover {
    transform: translateY(-2px);
    background: var(--color-accent);
  }
}
.btn-pill--icon img {
  background: #fff;
  border-radius: 50%;
  padding: 11px;
  width: 40px;
  height: 40px;
}
/* El span .icon-mask ya trae su propio mask-image (el ícono recortado) —
   no se le puede poner background:#fff directo porque el fondo también
   queda recortado a la forma del ícono (se ve el ícono blanco, no un
   círculo). El span pasa a ser el círculo puro (sin máscara) y el
   ícono recortado va en el ::before, adentro. */
.btn-pill--icon .icon-mask {
  position: relative;
  background: #fff;
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.btn-pill--icon .icon-mask--download::before {
  content: '';
  position: absolute;
  inset: 8px;
  background-color: var(--color-accent);
  -webkit-mask-image: url('/Assets/Iconos/icono-descarga.svg');
  mask-image: url('/Assets/Iconos/icono-descarga.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.btn-pill-light {
  background: var(--color-cream);
  color: var(--color-accent);
  padding: 8px;
  padding-left: 24px;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), background 0.2s ease;
}
/* Sin cambio de color en hover — solo se levanta, igual que .btn-pill--icon. */
@media (hover: hover) {
  .btn-pill-light:hover {
    transform: translateY(-2px);
    background: var(--color-cream);
  }
}

.btn-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* ─── CTA ICON MOTION ─────────────────────────────────────────────── */
/* Todo CTA con ícono (flecha, descarga u ojo) lo mueve al hacer hover,
   para que la interactividad "se note" más allá del cambio de color de
   fondo. Flecha: desliza hacia donde apunta (arriba-derecha). Descarga:
   baja, como si cayera. Ojo: escala, como un parpadeo. Pura transición
   CSS — sin JS, sin GSAP. */

.cta-icon {
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* Todo lo de acá abajo es :hover puro — envuelto en (hover:hover) para que
   un tap en touch no deje el ícono "pegado" en su estado de hover hasta
   el próximo tap en otro lado (no hay mouseout real en touch). */
@media (hover: hover) {
  .btn:hover .cta-icon--arrow,
  a:hover .cta-icon--arrow {
    transform: scale(1.05) rotate(45deg);
  }

  .btn:hover .cta-icon--download,
  a:hover .cta-icon--download,
  .btn:hover .icon-mask--download,
  a:hover .icon-mask--download {
    transform: scale(1.1);
  }

  .btn:hover .btn-icon-circle {
    transform: scale(1.08);
  }

  .unit-card-link:hover .cta-icon--eye {
    transform: scale(1.15);
  }

  .unit-card-link:hover { color: var(--color-accent); }
}

.unit-card-link { transition: color 0.2s ease; }

/* ─── 01 · HERO ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #faf9f4;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgb(0 0 0 / 35%), rgb(0 0 0 / 0%));
  color: #faf9f4;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}
.hero-nav.is-hidden { transform: translateY(-100%); }

.hero-nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.hero-nav-row .hero-logo { justify-self: start; }
.hero-nav-row .btn-pill { justify-self: end; }

.hero-logo img { height: 78px; width: auto; }

/* Ancho fijo — Figma mide 228px exactos (pad 24px parejo + texto 180px);
   no dejarlo a merced del ancho que renderice la fuente en cada navegador. */
.hero-nav .btn-pill {
  width: 228px;
  height: 44px;
  justify-content: center;
}

.hero-nav-links {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--fs-body-md);
}
@media (hover: hover) {
  .hero-nav-links a:hover { opacity: 0.75; }
}

/* ─── NAV — hamburguesa + panel mobile (ocultos en desktop) ──────── */

.hero-nav-toggle {
  display: none;
  position: relative; /* para el ::before que agranda el hit area, abajo */
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}
/* Hit area real de 44×44 sin agrandar el ícono visual (24×24, spec
   Figma) — un ::before invisible más grande que el botón, en vez de
   tocar su tamaño/layout. */
.hero-nav-toggle::before {
  content: '';
  position: absolute;
  inset: -10px;
}
.hero-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #faf9f4;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hero-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hero-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.hero-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero-nav-mobile-panel {
  display: none;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}
/* Scrim preventivo — hoy el H1 cae sobre una zona oscura de la foto en
   todos los recortes probados (320-1440px) y el contraste ya es bueno,
   pero no hay nada que lo garantice si cambia la imagen o su recorte.
   Colgado de .hero (full-bleed, igual que .hero-bg) y NO de .hero-content:
   .hero-content hereda el max-width 1440 de .container, así que colgado
   ahí el gradiente se cortaba en seco a los 1440px — en monitores más
   anchos se veía una línea vertical dura (el borde del gradiente contra
   la foto sin oscurecer al costado). Acá, al ser hijo directo de .hero,
   cubre el ancho real de la foto sin importar cuán ancho sea el viewport. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 28%), rgb(0 0 0 / 0%) 55%);
  pointer-events: none;
}

.hero-content h1 {
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Cortes de línea del H1 — mobile tiene su propio patrón de 5 líneas
   (no es solo el de desktop reflowing a un ancho angosto, Figma corta
   distinto). Este <br> extra solo existe en mobile. */
.mobile-break { display: none; }

/* Inverso de .mobile-break — <br> que solo corta en desktop (≥901px),
   para cortes exactos que el wrap natural no puede lograr (ver
   .impact-header h2 / index.html). Visible por default, se oculta en el
   media query mobile de abajo. */
.desktop-break { }

.hero-sub {
  margin-top: 32px;
  font-size: 24px; /* prueba Diego — antes var(--fs-body-xl, 18px) */
  max-width: 38ch;
}

.hero-bottom {
  margin-top: 32px; /* mismo gap que H1→.hero-sub, spec Diego */
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.hero-apps {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 80px; /* más aire bajo el CTA — pedido Diego, antes 64px (--space-xl) */
  max-width: 400px; /* fuerza el wrap 3+2 (Techos/Muros/Cielorrasos · Entrepisos/Pisos) del Figma */
}

.hero-apps-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-apps-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  white-space: nowrap;
}

.hero-apps-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Ancho fijo — Figma mide 268px exactos. */
.hero-apps .btn-pill--icon { width: 268px; height: 56px; }

.hero-seal {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius) 0 0 0;
  padding: var(--space-lg);
  /* El fondo blanco sangra hasta el borde real de la ventana (right:0),
     pero los logos tienen que quedar alineados al mismo margen que ve el
     CTA del nav de arriba — el margen que tendría un .container normal a
     este ancho. A ≤1440px ese cálculo da negativo/0 y el max() lo clampea
     a los 40px fijos de siempre. */
  padding-right: max(var(--space-lg), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.hero-seal p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--color-text-soft); max-width: 321px; }

.hero-seal-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
/* flex-shrink:0 + object-fit:contain explícitos en los logos — hoy no se
   deforman porque el contenedor siempre tiene lugar de sobra, pero sin
   esto cualquier logo nuevo/más ancho se achicaría con el height fijo
   (84px) y rompería el aspect ratio (flex-shrink:1 es el default). */
.hero-seal-logos img { width: auto; height: 90px; flex-shrink: 0; object-fit: contain; }

@media (max-width: 900px) {
  /* En mobile la foto deja de ser full-bleed-height: Figma la fija en
     666px y la tarjeta de sellos pasa a ser un bloque blanco normal
     DEBAJO de la foto (no superpuesto) — en vez de absolute+inset:0
     cubriendo toda la altura (que en desktop incluía el área de la
     tarjeta), la imagen pasa a flujo normal con alto fijo, y el
     contenido del hero se overlay-ea sobre ESA caja puntual. */
  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero-bg { position: static; height: 666px; }
  .hero-content {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 666px;
    padding-top: 0;
  }

  .hero-nav-links { display: none; }
  .hero-nav-row .btn-pill { display: none; }
  /* Spec Figma: padding 24px arriba/derecha/abajo, 20px izquierda. En
     mobile solo quedan 2 ítems visibles (logo + toggle) — el grid de 3
     columnas reservaba el gap (40px) a los dos lados de la columna del
     medio aunque esté vacía (links/botón en display:none), empujando el
     ancho total más allá del viewport. Flex + space-between no tiene
     ese problema: solo separa los ítems que realmente existen. */
  .hero-nav-row {
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
    gap: 0;
    padding: 24px 24px 24px 20px;
  }
  .hero-nav-toggle { display: flex; }

  /* Overlay full-screen (no más dropdown bajo el nav) — spec Figma: logo
     + cierre propios arriba, links grandes, mails abajo. Entrada/salida
     animadas por GSAP (ver js/nav-toggle.js), este CSS solo define el
     estado inicial oculto para que no haya flash antes de que el JS
     tome control. */
  .hero-nav-mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--color-pine);
    padding: 30px 20px 40px;
    overflow-y: auto; /* landscape (alto ~375px): sin esto el contenido no entra y queda cortado, sin forma de scrollear */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hero-nav-mobile-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .mobile-menu-logo { width: 70px; height: 60px; }

  .mobile-menu-close {
    position: relative; /* para el ::before que agranda el hit area */
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    color: #faf9f4;
  }
  /* Mismo criterio que .hero-nav-toggle::before: hit area de 44×44 sin
     cambiar el tamaño visual del ícono de cierre. */
  .mobile-menu-close::before {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .icon-mask--close {
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    -webkit-mask-image: url('/Assets/Iconos/icono-mas.svg');
    mask-image: url('/Assets/Iconos/icono-mas.svg');
  }

  .mobile-menu-links {
    /* clamp en vez de 120px fijo: en landscape (alto ~375px) 120px fijos
       empujaban los links fuera de pantalla; con vh se achica solo ahí. */
    margin-top: clamp(40px, 15vh, 120px);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .mobile-menu-links a {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #faf9f4;
  }

  .mobile-menu-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mobile-menu-footer a {
    font-size: var(--fs-body-md);
    color: rgba(250, 249, 244, 0.7);
  }
  /* CTA de WhatsApp del panel — reusa .footer-cta-btn (fondo crema, texto
     pine) para que se vea sobre el fondo pine del panel; acá pisamos el
     margin-top:40px propio de esa clase (pensado para ir después del
     texto del footer-cta, no para este contexto) y el color (el resto de
     .mobile-menu-footer a usa cream translúcido para los mails). */
  /* .mobile-menu-footer a (compuesto, especificidad 0,1,1) le gana a una
     sola clase (0,1,0) y pisaba el color pine con el cream-70% pensado
     para los mails — de ahí que el botón se viera "vacío" (texto cream
     sobre fondo cream de .footer-cta-btn). Encadenar con el padre sube la
     especificidad a 0,2,0 y gana. */
  .mobile-menu-footer .mobile-menu-whatsapp {
    margin-top: 0;
    margin-bottom: 4px;
    color: var(--color-accent);
  }

  /* Logo mobile real (Logo-AbrigA-mobile.svg, 70×28) servido vía
     <picture>/<source> — ya no hace falta recortar el logo desktop. */
  .hero-logo { display: block; }
  .hero-logo img { width: 70px; height: auto; }

  /* clamp en vez de 34px fijo: a 320-360px (box de 280-320px con el
     padding unificado) "MANTOS AISLANTES" no entraba en una sola línea y
     agregaba una 6ª línea no prevista (spec: 5 líneas fijas por <br>). El
     clamp solo achica en ese rango angosto — de 375px para arriba sigue
     en el tope de 34px, igual que antes. */
  .hero-content h1 { font-size: clamp(26px, 8.8vw, 34px); letter-spacing: -0.03em; text-wrap: balance; }
  .mobile-break { display: block; }
  .hero-sub { margin-top: 16px; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; max-width: 335px; }
  .hero-bottom { margin-top: 32px; flex-direction: column; align-items: stretch; }
  .hero-apps { max-width: 284px; gap: 40px; padding-bottom: 40px; }
  .hero-apps-list li { font-size: 14px; }

  .hero-seal {
    position: static;
    border-radius: 0;
    max-width: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 20px 43px;
    gap: 32px;
  }
  .hero-seal p { max-width: 335px; font-size: 16px; line-height: 1.4; color: var(--color-accent); }
  /* min(300px, 100%) en vez de 300px fijo: a 320px de viewport, con los
     20px de padding del .hero-seal, el contenedor fijo de 300px se comía
     el padding derecho entero (0px de aire en vez de 20px). Con min()
     nunca excede el ancho real disponible. flex-wrap de respaldo por si
     algún día entra un 4º logo y no hay lugar en una sola fila. */
  .hero-seal-logos { width: min(300px, 100%); gap: 16px; flex-wrap: wrap; }
  .hero-seal-logos img { height: 56px; }
}

/* ─── EYEBROW PILL ───────────────────────────────────────────────── */
/* Variante con borde de .eyebrow (typography.css) — usada en Diferenciales
   y, probablemente, el resto de los bloques de contenido (no el Hero). */

.eyebrow-pill {
  display: inline-block;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--color-accent);
}

/* ─── 03 · DIFERENCIALES ─────────────────────────────────────────── */

.diff {
  background: var(--color-white);
  padding-top: 120px; /* antes 0 — la sección quedaba pegada al hero, sin aire */
  padding-bottom: 160px;
  overflow: hidden;
}

/* Título a ancho completo, con el mismo inset izquierdo que el resto del
   sitio. La imagen de abajo usa ese mismo inset (ver .diff-grid) para
   quedar alineada con el h2/la pill — ya no va pegada al borde real de
   la ventana como en el spec viejo del rollo. */
.diff-header {
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}
.diff-header h2 {
  margin-top: var(--space-md);
  font-size: var(--fs-h03);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  text-transform: uppercase;
  max-width: 781px;
}

/* Imagen y acordeón alineados al mismo nivel (antes el acordeón tenía
   160px de padding-top propio, de cuando la imagen era el rollo, mucho
   más alta — con la imagen nueva (628×548, parecida en alto al bloque de
   texto) ya no hace falta ese desfasaje). */
.diff-grid {
  display: flex;
  align-items: center; /* antes flex-start — imagen y acordeón quedaban desalineados verticalmente */
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  /* Mismo inset que .diff-header — la imagen queda alineada con el h2 y
     la pill en vez de pegada al borde real de la ventana. */
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

/* Antes una sola imagen fija (el rollo); ahora 4 fotos superpuestas, una
   por diferencial, que hacen crossfade según cuál acordeón esté abierto
   (ver .diff-image-img abajo y js/diff-stepper.js). 628×548 y radius:16
   son el spec de Figma puntual de este componente — no el de ningún otro
   ejemplo de referencia. */
.diff-image {
  position: relative;
  flex: 0 0 auto;
  width: min(628px, 44vw);
  aspect-ratio: 628 / 548;
  border-radius: var(--radius);
  overflow: hidden;
}

.diff-image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.diff-image-img.is-active { opacity: 1; }

.diff-content {
  flex: 1;
  min-width: 0;
  /* Mismo cálculo que .hero-seal: el margen derecho real del .container a
     este ancho de ventana, para que el borde derecho de las cards quede
     alineado con el resto del sitio por más ancha que sea la pantalla. */
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

/* Acordeón (antes grid 2x2 de cards con foto propia, sin JS — las 4
   quedaban siempre abiertas). Un solo item abierto a la vez, ver
   js/diff-stepper.js. Sin margin-top propio: ya arranca alineado con la
   imagen gracias al .diff-grid { margin-top } de arriba. */
.diff-cards {
  display: flex;
  flex-direction: column;
}

.diff-card { border-top: 1px solid var(--color-border); }
.diff-card:last-child { border-bottom: 1px solid var(--color-border); }

.diff-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 24px 0;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.diff-card-toggle .label { flex-shrink: 0; color: var(--color-accent); }

.diff-card-toggle h3 {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-h06);
  line-height: var(--lh-h06);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

/* Ícono +/− dibujado con dos pseudo-elementos (sin SVG nuevo) — la barra
   vertical se achica a 0 cuando el item está activo, dejando solo la
   horizontal (el "−"). */
.diff-card-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.diff-card-icon::before,
.diff-card-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  transition: transform 0.3s ease;
}
.diff-card-icon::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}
.diff-card-icon::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
.diff-card.is-active .diff-card-icon::after { transform: translateX(-50%) scaleY(0); }

/* max-height (no height:auto) para poder animar el alto en el open/close
   — 300px alcanza de sobra para el texto más largo de las 4 descripciones
   actuales; si algún día se agrega una mucho más larga, subir este valor. */
.diff-card-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}
.diff-card.is-active .diff-card-panel { max-height: 300px; }

.diff-card-panel p {
  padding-bottom: 24px;
  color: var(--color-text-soft);
}

.diff-marquee {
  /* 116px + los 64px de padding-top de abajo = 180px exactos entre el
     final del acordeón/imagen y el texto del marquee (spec de Diego). */
  margin-top: 116px;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.diff-marquee-track {
  display: flex;
  width: max-content;
  animation: diff-marquee-scroll 42s linear infinite;
}

/* Dos copias del mismo texto, una al lado de la otra — el loop se ve
   continuo porque -50% equivale exactamente al ancho de una copia. */
.diff-marquee-track p {
  flex-shrink: 0;
  padding-right: var(--space-2xl);
  font-size: var(--fs-h0);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

@keyframes diff-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .diff-marquee-track { animation: none; }
  .diff-marquee-track p:nth-child(2) { display: none; }
}

@media (max-width: 900px) {
  /* Mobile sigue sin imagen (ni la del rollo antes, ni las 4 nuevas) —
     en Figma esta sección es solo el acordeón de texto, sin ningún
     elemento visual al lado. El acordeón en sí (abrir/cerrar) funciona
     igual que en desktop, mismo js/diff-stepper.js. */
  /* padding-top:80px — el de desktop (120px) se heredaba sin override acá
     y quedaba desparejo contra el resto de las secciones mobile (80px). */
  .diff { padding-top: 80px; padding-bottom: 80px; } /* antes 90px de bottom — alineado al resto de las secciones (80px); sin spec de Figma a mano para confirmar el valor exacto, ver reporte */
  .diff-header { padding: 40px 20px 0; }
  .diff-header h2 { font-size: 34px; letter-spacing: -0.03em; max-width: 280px; }
  /* margin-top:0 — el de desktop (var(--space-xl)) se suma al padding-top
     de .diff-header y queda doble espaciado; acá el aire entre título y
     acordeón ya lo da el margin-top de .diff-cards de abajo. */
  /* padding-left:0 — en mobile .diff-content ya pone su propio inset
     (0 20px 0, ver abajo); el padding-left de .diff-grid es cosa de
     desktop para alinear la imagen, que acá ni se muestra. */
  .diff-grid { flex-direction: column; margin-top: 0; padding-left: 0; }
  .diff-image { display: none; }
  .diff-content { padding: 0 20px 0; }
  .diff-cards { margin-top: var(--space-xl); }
  .diff-card-toggle { padding: 20px 0; gap: 16px; }
  .diff-card-toggle .label { font-size: 14px; font-weight: 400; }
  .diff-card-toggle h3 { font-size: 24px; }
  .diff-card-panel p { font-size: 16px; line-height: 1.4; padding-bottom: 20px; }
}

/* ─── 04 · BENEFICIOS ────────────────────────────────────────────── */
/* Pin + snap real vía ScrollTrigger — ver js/benefits-stepper.js. El CSS
   acá solo define los dos estados (colapsado/activo); la lógica de cuál
   está activo es JS. */

.benefits {
  background: var(--color-bg-dark);
  color: #faf9f4;
  padding: 160px 0;
}

.benefits-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.benefits-header .eyebrow-pill {
  border-color: var(--color-olive-15);
  color: #faf9f4;
}

.benefits-header h2 {
  font-size: var(--fs-h01);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 1074px;
}

.benefits-list {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
}

.benefits-item {
  display: grid;
  grid-template-columns: 227px 422px 1fr;
  align-items: center;
  gap: 0;
  padding: var(--space-sm) 0; /* antes --space-md (24px) — ver nota en .benefits-item.is-active .benefits-item-media img */
  border-top: 1px solid var(--color-olive-15);
}
.benefits-item:last-child { border-bottom: 1px solid var(--color-olive-15); }

.benefits-item .label {
  color: #faf9f4;
  font-size: 18px;
  font-weight: 400;
}

.benefits-item-media {
  overflow: hidden;
  border-radius: var(--radius);
  width: 422px;
}
.benefits-item-media img {
  width: 100%;
  height: 64px; /* antes 84px — ver nota en .benefits-item.is-active .benefits-item-media img */
  object-fit: cover;
  display: block;
  transition: height 0.6s cubic-bezier(.2, .8, .2, 1);
}

.benefits-item-body { padding-left: 73px; }

.benefits-item-body h3 { letter-spacing: -0.02em; }

.benefits-item-desc {
  display: none;
  margin-top: var(--space-xs);
  font-size: var(--fs-body-xl);
  max-width: 553px;
  color: rgba(250, 249, 244, 0.7);
}

.benefits-item.is-active .benefits-item-media {
  grid-row: span 1;
}
/* Antes 620px fijo: con el ítem activo (620px de imagen + 4 filas
   colapsadas) la lista pineada mide ~1200px — más alta que prácticamente
   cualquier ventana de navegador real (incluso maximizada, con barra de
   direcciones/pestañas, rara vez se llega a 900-1000px de alto) — así
   que "que la imagen abra a los 620px" y "que la lista nunca se corte
   mientras está pineada" son objetivos que no entran juntos en una
   ventana normal. Para no sacrificar ninguno de los dos de forma
   extrema: se achicaron las filas colapsadas (84→64px de imagen,
   padding 24→16px, ver .benefits-item y .benefits-item-media img) para
   liberarle presupuesto vertical a la fila activa, y el piso de este
   clamp se subió de 130px a 260px (~4x una fila colapsada en vez de
   ~1.5x) para que el paso activo se sienta realmente "abierto" y no
   apenas distinto. calc(100svh - 424px) es el presupuesto exacto que le
   queda a la imagen activa después de las 4 filas colapsadas (64+32px
   c/u = 384px) y el padding propio de la fila activa (32px) — con esto
   la lista completa sigue sin cortarse nunca (se recalcula en base al
   alto real del viewport), y en una ventana típica de 700-900px de alto
   la imagen activa mide ~276-476px en vez de los ~130-250px de antes. */
.benefits-item.is-active .benefits-item-media img {
  height: clamp(260px, calc(100svh - 424px), 620px);
}
.benefits-item.is-active .benefits-item-desc {
  display: block;
}
.benefits-item.is-active h3 {
  color: #faf9f4;
}

.benefits-cta {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  /* Mobile: sin pin/stepper (ver benefits-stepper.js, corta antes del
     ScrollTrigger.create en este breakpoint) — todas las cards quedan
     expandidas y el scroll es el nativo de la página, como pide Figma. */
  .benefits { padding: 80px 0; }
  /* Padding lateral ya viene de .container (--container-pad-mobile,
     variables.css) — antes este override duplicaba el valor acá con un
     número suelto (20px) en vez de heredarlo. */
  .benefits-header { gap: 24px; align-items: flex-start; text-align: left; }
  .benefits-header h2 { font-size: 34px; letter-spacing: -0.03em; }
  .benefits-header .eyebrow-pill { padding: 8px 16px; }

  .benefits-list {
    margin-top: 40px;
    flex-direction: column;
    gap: 40px;
  }

  /* Orden visual: imagen primero, después número + título + párrafo
     todos juntos como un solo bloque de texto (pedido de Diego) — el
     DOM mantiene label/media/body en ese orden por el layout desktop,
     así que la imagen se reordena con `order` en vez de tocar el HTML. */
  .benefits-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-top: none;
  }
  .benefits-item:last-child { border-bottom: none; }

  .benefits-item-media { order: -1; width: 100%; margin-bottom: 20px; }
  .benefits-item-media img {
    height: 432px;
    transition: none;
  }
  .benefits-item.is-active .benefits-item-media img { height: 432px; }

  .benefits-item-body { padding-left: 0; }
  .benefits-item .label { display: block; font-size: 14px; margin-bottom: 16px; }
  .benefits-item-body h3 { font-size: var(--fs-h06); }

  .benefits-item-desc,
  .benefits-item.is-active .benefits-item-desc {
    display: block;
    margin-top: 16px;
    font-size: var(--fs-body-md);
    max-width: none;
    color: rgba(250, 249, 244, 0.7);
  }

  .benefits-cta { margin-top: 60px; }
}

/* ─── 05 · APLICACIONES ──────────────────────────────────────────── */
/* Carrusel con scroll-snap nativo (touch/trackpad funcionan solos) +
   js/applications-drag.js solo agrega arrastre con mouse. */

.applications {
  background: var(--color-cream);
  color: var(--color-text);
  padding: 160px 0;
}

.applications-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.applications-header .eyebrow-pill {
  align-self: flex-start;
}

.applications-header h2 {
  color: var(--color-accent);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 1014px;
}

.applications-header p {
  font-size: var(--fs-body-xl);
  color: var(--color-text-soft);
  max-width: 662px;
}

.applications-track {
  margin-top: 80px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Sin esto, scroll-snap dejaba la card pegada al borde real del
     contenedor después del primer swipe — el inset del primer swipe lo
     daba el spacer ::before, pero scroll-padding es lo que hace que
     CUALQUIER snap intermedio respete el mismo margen. */
  scroll-padding-inline: 20px;
  cursor: grab;
  scrollbar-width: none;
}
.applications-track::-webkit-scrollbar { display: none; }
.applications-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* El inset es un elemento espaciador real (::before/::after), no padding
   ni margin: un contenedor flex con overflow-x + scroll-snap no respeta
   de forma confiable ninguno de los dos en el borde de scroll — por eso
   la primera card quedaba pegada al borde real de la ventana en vez de
   respetar los 40px. Un flex-item vacío sí se renderiza siempre. Mismo
   cálculo responsivo que .hero-seal/.diff-content para que quede
   alineada con el resto del sitio a cualquier ancho. */
.applications-track::before,
.applications-track::after {
  content: '';
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  /* -24px: el "gap" del flex se suma solo entre el espaciador y la
     primera/última card, así que hay que restarlo del ancho para que el
     inset total dé justo los 40px (o el cálculo responsivo). */
  width: calc(max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))) - 24px);
}
/* Sin esto, scroll-snap-type:proximity salta de largo el espaciador en
   el load inicial (no es un punto de snap válido) y "come" el inset. */
.applications-track::before { scroll-snap-align: start; }

.app-card {
  flex: 0 0 auto;
  width: clamp(280px, 38vw, 553px);
  height: 464px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
}

.app-card > img:first-child,
.app-card > picture:first-child > img {
  flex-shrink: 0;
  margin: 28px 46px 0;
  width: calc(100% - 92px);
  height: 361px;
  object-fit: cover;
  pointer-events: none;
}

.app-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  color: var(--color-accent);
}

.app-card-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.app-card-footer .text-h05 {
  min-width: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.applications-cta {
  margin-top: 120px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .applications { padding: 80px 0; }
  /* padding-left/right ya vienen de .container — ver nota en .benefits-header. */
  .applications-header { gap: 24px; }
  .applications-header p { font-size: var(--fs-body-md); max-width: none; }

  .applications-track { margin-top: 40px; gap: 20px; }
  /* El inset se logra solo con el gap (20px) + spacer en 0 — ver el
     comentario arriba del ::before/::after: a este ancho el cálculo
     responsivo del padding desktop (--container-pad: 40px) da un inset
     mucho más grande que el real de Figma (20px), así que en mobile el
     spacer se anula y el gap mismo hace de margen. */
  .applications-track::before,
  .applications-track::after { width: 0; }

  .app-card {
    width: calc(100vw - 40px);
    height: auto;
  }
  .app-card > img:first-child,
  .app-card > picture:first-child > img {
    flex: 1;
    min-height: 0;
    margin: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 462 / 361;
  }
  /* Alto fijo en 2 líneas, aunque el título entre en una — así las 4
     cards miden lo mismo en el carrusel sin importar si el título es
     corto ("Techo y muro") o largo ("Piso y muro con revestimientos
     interiores"), que es lo que las hacía quedar desparejas. */
  .app-card-footer {
    height: auto;
    min-height: 84px;
    padding: 12px 20px;
  }
  .app-card-footer .text-h05 { white-space: normal; line-height: 1.3; }

  .applications-cta { margin-top: 60px; }
}

/* ─── 06 · PRODUCTO ──────────────────────────────────────────────── */

.product {
  position: relative;
  color: #faf9f4;
  padding: 160px 0;
  overflow: hidden;
}

.product-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.product::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 35%), rgb(0 0 0 / 55%));
  z-index: -1;
}

.product-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-header .eyebrow-pill {
  border-color: rgb(255 255 255 / 40%);
  color: #faf9f4;
}

.product-header h2 {
  margin-top: var(--space-lg);
  text-transform: uppercase;
  max-width: 16ch;
}

.product-header p {
  margin-top: var(--space-md);
  max-width: 50ch;
}

.product-card {
  margin-top: 60px;
  max-width: 898px;
  margin-left: auto;
  margin-right: auto;
  background: #faf9f4;
  color: var(--color-text);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgb(0 0 0 / 4%);
  display: flex;
  gap: 42px;
  padding: 20px 40px 20px 20px;
  overflow: hidden;
}

.product-card-image {
  flex: 0 0 284px;
}
/* <picture> no tiene alto propio (es inline por default) — sin esto el
   height:100% del img de abajo no tenía contra qué resolverse y la
   imagen quedaba con su alto natural en vez de estirarse hasta el pie
   de la card, dejando un hueco debajo. */
.product-card-image picture {
  display: block;
  height: 100%;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.product-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.product-card-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}
.product-card-icon { flex-shrink: 0; }
.product-card-icon img { width: 70px; height: 70px; }
.product-card-heading h3 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-accent);
}

.product-specs {
  margin: 40px 0 0;
}

.product-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.product-spec:first-child { padding-top: 0; border-top: none; }
.product-spec dt {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.product-spec dd {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-accent);
  text-align: right;
}
.product-spec:last-child dd {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.product-card-download {
  margin-top: auto;
  padding-top: 64px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-body-md);
  text-decoration: underline;
  color: var(--color-text-soft);
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .product-card-download:hover { color: var(--color-accent); }
}

/* El SVG de icono-descarga.svg tiene el fill hardcodeado en #FAF9F4 (pensado
   para fondos oscuros) — acá va sobre la card clara, así que se usa como
   máscara para poder pintarlo con currentColor en vez de con su color fijo. */
.icon-mask {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.icon-mask--download {
  width: 24px;
  height: 24px;
  -webkit-mask-image: url('/Assets/Iconos/icono-descarga.svg');
  mask-image: url('/Assets/Iconos/icono-descarga.svg');
}

.product-cta {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .product { padding: 80px 0; }
  /* padding-left/right ya vienen de .container — ver nota en .benefits-header. */
  .product-header h2 { margin-top: 24px; }
  .product-header p { margin-top: 24px; }

  .product-card {
    margin-top: 40px;
    max-width: none;
    flex-direction: column;
    gap: 24px;
    padding: 16px 16px 40px;
  }
  .product-card-image { flex-basis: auto; }
  .product-card-image img { height: 202px; border-radius: var(--radius); }

  .product-card-body { gap: 24px; }
  .product-card-heading { gap: 20px; }
  .product-card-icon img { width: 64px; height: 64px; }
  .product-card-heading h3 { font-size: var(--fs-h06); line-height: 1.05; }

  .product-specs { margin-top: 0; }
  .product-spec {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .product-spec dt { font-size: 12px; }
  .product-spec dd { text-align: left; }

  .product-card-download {
    margin-top: 0;
    padding-top: 0;
    align-self: flex-start;
  }

  .product-cta { margin-top: 60px; }
}

/* ─── 07 · ENSAYOS Y CERTIFICACIONES ──────────────────────────────── */

.tests {
  padding: 160px 0;
}

.tests-header h2 {
  margin-top: var(--space-lg);
  color: var(--color-accent);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.tests-list {
  margin-top: 80px;
  border-top: 1px solid var(--color-border);
}

.tests-row {
  display: grid;
  grid-template-columns: 231px 576px 1fr;
  align-items: center;
  gap: 0;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border);
}

.tests-icon { width: auto; height: 78px; }

.tests-row h3 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.tests-row p {
  font-size: var(--fs-body-xl);
  font-weight: 400;
  max-width: 553px;
  color: var(--color-text-soft);
}

.tests-footer {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.tests-footer p {
  font-size: 24px;
  line-height: 1.4;
  max-width: 668px;
  color: var(--color-accent);
}

.tests-certs {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.tests-cert-logo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #faf9f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tests-cert-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tests-cta {
  margin-top: 96px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .tests { padding: 80px 0; }
  /* Antes 19px propio acá (uno de los 3 valores sueltos — ver variables.css
     --container-pad-mobile); ahora hereda igual que el resto de .container. */
  .tests-header h2 { margin-top: 24px; }

  .tests-list { margin-top: 20px; }
  .tests-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px 0;
  }
  .tests-icon { width: auto; height: 73px; }
  .tests-row h3 { font-size: var(--fs-h06); letter-spacing: -0.02em; }
  .tests-row p { font-size: 16px; font-weight: 400; max-width: none; }

  .tests-footer { margin-top: 80px; flex-direction: column; align-items: flex-start; gap: 40px; }
  .tests-footer p { font-size: 18px; font-weight: 400; max-width: none; }
  /* clamp + flex-wrap: 100px fijos × 3 + gaps no entraban en 320px (solo
     overflow real de documento de los 12 anchos de QA) y a 360px comían
     casi todo el padding derecho. clamp() los achica solo donde hace
     falta; flex-wrap es red de respaldo si igual no entran. */
  .tests-certs { gap: 16px; flex-wrap: wrap; }
  .tests-cert-logo { width: clamp(64px, 24vw, 100px); height: clamp(64px, 24vw, 100px); }

  .tests-cta { margin-top: 80px; }
}

/* ─── 08 · OBRAS ──────────────────────────────────────────────────── */

.works {
  background: var(--color-pine);
  color: #faf9f4;
  padding: 160px 0;
}

.works-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
}

.works-header .eyebrow-pill {
  border-color: rgb(255 255 255 / 40%);
  color: #faf9f4;
}

.works-header h2 {
  margin-top: 40px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 553px;
}

.works-header p {
  font-size: var(--fs-body-xl);
  letter-spacing: -0.03em;
  max-width: 436px;
  color: rgba(250, 249, 244, 0.7);
}

.works-list {
  margin-top: 176px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.work-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 692px 1fr;
  height: 512px;
}

.work-card-body {
  color: var(--color-text);
  padding: 0 127px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.work-card-body h3 {
  color: var(--color-accent);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* "Universidad Nacional" sola no entra en los 438px estándar a 48px y
   fuerza una 3ra línea — en Figma esta card puntual ya tiene una caja de
   título más ancha (447px) por el mismo motivo. */
.work-card-title--wide {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

.work-meta {
  margin: 56px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.work-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 4px 0;
}
.work-meta-row dt {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.work-meta-row dd {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

/* Wrapper a propósito, aunque hoy solo tenga una imagen — cuando sumemos
   más de una foto por obra, las flechas de navegación van acá adentro
   sin tocar el resto del card. */
.work-card-media {
  position: relative;
}
.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Galería de varias fotos por obra (hoy solo La Escocesa) — desktop:
   se apilan con crossfade por hover (ver js/works-gallery.js). Mobile:
   se reconvierte en scroll-snap horizontal nativo, mismo mecanismo que
   .applications-track — swipe sin JS, sin flechas en ningún breakpoint. */
@media (min-width: 901px) {
  .work-card-media--gallery .work-card-media-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .work-card-media--gallery .work-card-media-slide.is-active { opacity: 1; }
}

@media (max-width: 900px) {
  .works { padding: 80px 0; }
  /* padding-left/right ya vienen de .container — ver nota en .benefits-header. */
  .works-header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .works-header h2 { margin-top: 24px; font-size: 34px; letter-spacing: -0.03em; }
  .works-header p { font-size: var(--fs-body-md); max-width: none; }

  .works-list { margin-top: 40px; gap: 40px; }

  .work-card {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0 0 20px;
  }
  .work-card-media { order: -1; }
  .work-card-media img { height: 317px; }

  .work-card-media--gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .work-card-media--gallery .work-card-media-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .work-card-body {
    width: 295px;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0 0;
    gap: 0;
  }
  .work-card-body h3 { font-size: var(--fs-h06); }
  .work-card-title--wide { width: auto; margin: 0; }

  .work-meta { margin-top: 24px; }
  .work-meta-row { padding: 0; }
  .work-meta-row + .work-meta-row { margin-top: 16px; }
  .work-meta-row dt { font-size: 12px; }
  .work-meta-row dd { font-size: 16px; }
}

/* ─── 09 · IMPACTO ────────────────────────────────────────────────── */
/* Diagrama de Venn armado en CSS puro (3 círculos + mix-blend-mode para
   que las intersecciones se vean más oscuras solas) — no hace falta
   pedir una imagen para esto, es geometría simple. */

.impact { padding: 160px 0; }

.impact-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
/* Sin max-width — el corte en 3 líneas lo dan los <br> del HTML, medidos
   en px para que coincidan exactamente con el pedido (ver comentario en
   index.html). Un max-width en ch competía con esos <br> y en algunos
   anchos rompía una de las 3 líneas en dos. */
.impact-header h2 { color: var(--color-accent); text-transform: uppercase; }

.impact-diagram-row {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "social venn economia"
    "ambiente venn economia";
  align-items: stretch;
  gap: var(--space-xl);
}

.impact-group--social   { grid-area: social; display: flex; align-items: center; padding: var(--space-lg) 0; }
.impact-group--ambiente { grid-area: ambiente; display: flex; align-items: center; padding: var(--space-lg) 0; }
.impact-group--economia { grid-area: economia; display: flex; align-items: center; justify-content: center; }
.impact-venn { grid-area: venn; }

/* Los títulos "Social/Economía/Ambiente" arriba de cada lista son
   mobile-only — en desktop esa info ya está en las etiquetas del venn,
   repetirla ahí sería redundante. */
.impact-group-title { display: none; }

.impact-note {
  display: flex;
  align-items: center;
  gap: 24px;
}
.impact-note p { line-height: 2; color: var(--color-text-soft); }

/* Las dos notas de Ambiente (Biodiversidad / Residuo sólido) van juntas,
   no separadas en columnas opuestas como el resto. */
.impact-note-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.impact-note-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-cream));
}
/* Mismo color que el círculo del diagrama al que pertenece cada nota. */
.impact-note-icon--social   { background: #CFEEDC; }
.impact-note-icon--ambiente { background: #8FD9B5; }
.impact-note-icon--economia { background: #AEEEE4; }
.impact-note-icon::before,
.impact-note-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.impact-note-icon--plus::before { width: 14px; height: 2px; }
.impact-note-icon--plus::after  { width: 2px; height: 14px; }
.impact-note-icon--minus::before { width: 14px; height: 2px; }
.impact-note-icon--minus::after  { display: none; }

.impact-venn {
  position: relative;
  width: clamp(320px, 38vw, 560px);
  aspect-ratio: 560 / 500;
  isolation: isolate;
}

.venn-circle {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.venn-circle--social   { top: 0;    left: 50%; transform: translateX(-50%); background: #CFEEDC; }
.venn-circle--ambiente { bottom: 0; left: 27%; transform: translateX(-50%); background: #8FD9B5; }
.venn-circle--economia { bottom: 0; left: 73%; transform: translateX(-50%); background: #AEEEE4; }

.venn-label {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
.venn-label--social   { top: 26%;   left: 50%; }
.venn-label--ambiente { top: 71.7%; left: 21%; }
.venn-label--economia { top: 71.7%; left: 77%; }

.venn-center {
  position: absolute;
  z-index: 3;
  top: 57.5%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.venn-logo {
  font-weight: 900;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--color-accent);
}
.venn-logo span { font-weight: 500; }

@media (max-width: 900px) {
  .impact { padding: 80px 0; }
  /* padding-left/right ya vienen de .container — ver nota en .benefits-header. */
  .impact-header { gap: 24px; }
  /* Antes 34px fijo para todo el rango 320-900px — a 320px ni "CONVERTIMOS
     LA" entraba en una línea a ese tamaño. Un primer ajuste a clamp(24px,
     7vw,34px) arreglaba el overflow pero Diego lo vio muy chico (28px) en
     un iPhone común — esta curva sube más rápido: ~29px en 320px (ya no
     se ve mini, y "Convertimos la" sigue entrando sin desbordar) y llega
     a los 34px de siempre desde ~378px (la mayoría de los celulares). */
  .impact-header h2 { font-size: clamp(26px, 9vw, 34px); letter-spacing: -0.03em; text-wrap: balance; }
  .desktop-break { display: none; }

  .impact-diagram-row {
    margin-top: 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "venn"
      "social"
      "economia"
      "ambiente";
    gap: 0;
  }
  /* min-width:0 — bug de WebKit (confirmado en iOS Safari, no en
     Chromium): .impact-venn es un grid item de 1 columna con
     aspect-ratio seteado en la regla base (no se pisa acá). Sin
     min-width:0, el min-width:auto implícito de los grid items hace que
     WebKit infle el track más allá del 1fr disponible ("grid blowout")
     — ahí es donde arrastra a .venn-circle--economia (left:73% sobre ese
     ancho inflado) fuera del viewport y causa el zoom-out / franja
     blanca de iOS Safari. Chromium no lo sufre, por eso no se veía en
     DevTools. */
  .impact-venn { width: 100%; max-width: none; min-width: 0; margin: 0 auto 40px; }

  .impact-group--social,
  .impact-group--ambiente,
  .impact-group--economia {
    display: block;
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-border);
  }
  .impact-group--economia,
  .impact-group--ambiente { padding-top: 40px; }
  .impact-group--ambiente { border-bottom: none; padding-bottom: 0; }

  .impact-group-title {
    display: block;
    margin-bottom: 20px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--color-accent);
  }

  .impact-note p { font-size: 16px; line-height: 1.4; }
}

/* ─── 10 · OTRAS UNIDADES DE NEGOCIO ──────────────────────────────── */

.units { padding: 160px 0; }

.units-header h2 {
  margin-top: 24px;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  text-transform: uppercase;
  max-width: 18ch;
}

.units-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.unit-card {
  display: flex;
  flex-direction: column;
}

.unit-card > img,
.unit-card > picture > img {
  width: 100%;
  aspect-ratio: 437 / 480;
  object-fit: cover;
  border-radius: var(--radius);
}

.unit-card h3 {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-accent);
}

.unit-card p {
  margin-top: 8px;
  font-size: var(--fs-body-md);
  line-height: 1.4;
  color: var(--color-text-soft);
}

.unit-card-link {
  margin-top: auto;
  padding-top: 20px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-md);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .units { padding: 80px 0; } /* antes 96px — único outlier, el resto de las secciones usa 80px */
  .units-grid { grid-template-columns: 1fr; }

  /* La imagen mobile (670x844, ratio 0.794) tiene otra proporción que la
     de desktop (874x960, ratio 0.910 = el 437/480 de la regla base). Con
     el aspect-ratio de desktop heredado, object-fit:cover recortaba ~54px
     arriba/abajo y se comía el borde del logo circular, que está pegado
     a la esquina superior izquierda de la foto. */
  .unit-card > picture > img { aspect-ratio: 670 / 844; }
}

/* ─── 11 · CIERRE / CONTACTO + FOOTER ─────────────────────────────── */
/* Mismo patrón que .footer-cta de diego-portfolio (columna de contacto +
   columna de CTA, barra legal aparte) — sin el parallax/curva de scroll
   de ahí, versión básica. */

.footer-cta {
  background: var(--color-pine);
  color: #faf9f4;
  padding-top: 80px;
}

.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
}

.footer-logo {
  flex-shrink: 0;
  height: 77px;
  width: auto;
}

.footer-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #faf9f4;
}

.footer-mail {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(250, 249, 244, 0.7);
}
@media (hover: hover) {
  .footer-mail:hover { opacity: 0.75; }
}

.footer-cta-col {
  width: 553px;
  flex-shrink: 0;
}

.footer-cta-heading {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.footer-cta-sub {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 448px;
  color: rgba(250, 249, 244, 0.7);
}

.footer-cta-btn {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  background: var(--color-cream);
  color: var(--color-accent);
  padding: 16px 24px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), background 0.2s ease;
}
@media (hover: hover) {
  .footer-cta-btn:hover {
    transform: translateY(-2px);
    background: var(--color-cream);
  }
}

.site-footer {
  position: relative;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
/* La línea divisoria tiene que arrancar/terminar donde arranca/termina el
   texto (el padding del .container), no en el borde exterior del box de
   1440px — por eso va como pseudo-elemento inset, no como border-top. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--container-pad);
  right: var(--container-pad);
  height: 1px;
  background: rgb(255 255 255 / 15%);
}

.site-footer-legal {
  text-align: left;
  white-space: nowrap;
  font-size: var(--fs-body-sm);
  color: rgb(255 255 255 / 60%);
}

.site-footer > span:last-child {
  font-size: var(--fs-body-sm);
  color: rgb(255 255 255 / 60%);
}

/* ─── WHATSAPP FAB ───────────────────────────────────────────────── */
/* Verde de WhatsApp a propósito, no el verde de marca — es un patrón
   reconocible aparte, como usar el azul real de Twitter en un botón de
   tuitear. Fijo en toda la web, no solo en el footer. */

.whatsapp-fab {
  position: fixed;
  right: var(--space-lg);
  /* + env(safe-area-inset-bottom): en iPhones con home indicator, el FAB
     quedaba pegado al borde físico / parcialmente tapado por la barra
     gestual de iOS. 0px de fallback para navegadores sin notch. */
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .whatsapp-fab:hover { transform: scale(1.08); }
}

@media (max-width: 900px) {
  .footer-cta { padding-top: 40px; }
  /* padding-left/right de .footer-row y .site-footer ya vienen de
     .container — ver nota en .benefits-header. */
  .site-footer::before { left: var(--container-pad-mobile); right: var(--container-pad-mobile); }

  /* Orden visual pedido por Figma: logo, bloque CTA, Contacto, Social —
     distinto del orden del DOM (pensado para el layout horizontal de
     desktop), así que se resuelve con `order` en vez de reordenar el
     HTML. */
  .footer-row { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer-row > .footer-logo { order: 0; }
  .footer-row > .footer-cta-col { order: 1; width: 100%; }
  .footer-row > .footer-group:nth-of-type(1) { order: 2; }
  .footer-row > .footer-group:nth-of-type(2) { order: 3; }

  .footer-cta-sub { max-width: none; text-wrap: balance; }
  .footer-cta-heading { font-size: 24px; text-wrap: balance; }

  .site-footer {
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  /* nowrap (regla base, desktop) desbordaba en 320-360px — acá se permite
     wrap; los <br class="mobile-break"> siguen marcando el corte
     preferido, balance evita que quede una palabra sola huérfana. */
  .site-footer-legal { white-space: normal; text-wrap: balance; }
  .whatsapp-fab {
    right: var(--space-md);
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── ANCHOS INTERMEDIOS (901-1200px) ────────────────────────────── */
/* Entre el breakpoint mobile (≤900px) y el desktop "completo" (≥1280px
   más o menos), varios grids con columnas en px fijos no tenían ningún
   punto intermedio — a 901-1024px la 3ra columna (texto) quedaba
   comprimida a un hilo, y .footer-cta-col (553px fijo) directamente
   desbordaba el documento (overflow horizontal real, confirmado en QA
   Paso 0 a 901 y 1024px). Acá se pasan esas columnas a fluidas con
   minmax()/clamp() solo en este rango — ≥1201px vuelve a los valores
   fijos de siempre, que sí tienen lugar de sobra. */
@media (min-width: 901px) and (max-width: 1200px) {
  .benefits-item {
    grid-template-columns: minmax(100px, 180px) minmax(160px, 320px) 1fr;
  }
  .benefits-item-media { width: auto; }

  .tests-row {
    grid-template-columns: minmax(80px, 180px) minmax(200px, 420px) 1fr;
  }

  .work-card {
    grid-template-columns: minmax(320px, 55%) 1fr;
  }
  .work-card-body { padding: 0 48px; } /* 127px fijos apretaban demasiado el título en este rango */

  .footer-row { flex-wrap: wrap; row-gap: 40px; }
  .footer-cta-col { width: clamp(320px, 42vw, 553px); flex-shrink: 1; }

  .tests-footer { flex-wrap: wrap; }
  .tests-footer p { flex: 1 1 320px; }

  /* .hero-seal (ancho ~821px, constante por su contenido con topes fijos)
     se superponía con el CTA de WhatsApp del hero en viewports de altura
     baja (confirmado: 901×700, 1024×600/650) — se achica el texto y los
     logos solo en este rango para dejarle aire al CTA. Ajuste visual sin
     spec de Figma a mano para este rango puntual — confirmar antes de
     dar por cerrado, ver reporte. */
  .hero-seal { padding: 32px; gap: 24px; }
  .hero-seal p { max-width: 200px; }
  .hero-seal-logos { gap: 14px; }
  .hero-seal-logos img { height: 64px; }
}

/* ─── PRELOADER ───────────────────────────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-pine);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preloader-top {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  padding-left: 0;
}

.preloader-rule {
  position: relative; /* contiene al fill absolute de abajo */
  flex: 1;
  height: 1px;
  /* Sin background propio a propósito — no tiene que verse ningún "riel"
     de fondo antes de que el fill llegue ahí. Lo único visible es el
     fill avanzando (y el pine del preloader detrás, donde el fill
     todavía no llegó). */
  overflow: hidden;
}
/* La línea nunca tuvo relleno de progreso — solo era el riel de fondo al
   40%. El fill arranca en scaleX(0) y js/preloader.js lo escala en el
   mismo onUpdate que ya actualiza el texto del %, así nunca se
   desincroniza (no es un segundo tween aparte). transform-origin:left
   para que crezca de izquierda a derecha. */
.preloader-rule-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: #faf9f4;
}

.preloader-count {
  color: #faf9f4;
  font-size: var(--fs-h05);
  font-weight: 500;
  white-space: nowrap;
}

.preloader-media {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-img {
  position: absolute;
  width: clamp(260px, 34vw, 500px);
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--radius); /* mismo radio que el resto de las imágenes del sitio */
  opacity: 0;
}