/* ==========================================================================
   Sahade & Cía — Landing 3 · Textil Institucional (Hotelería y Salud)
   ..........................................................................
   QUÉ SE HEREDA, SIN TOCAR NADA, DE landing.sahade-ropa-blanca.eon.ar:

     · La paleta completa. Los mismos hex, con los mismos roles: crema de fondo,
       Mineral Hulett para texto secundario, Caribou como único acento.
     · Las tres familias y su reparto: Poppins display, Abhaya Libre bajada
       serif, Roboto texto denso.
     · Las primitivas: .shell, .bleed, .tag, .lead, .qlink, .btn, .reveal,
       .band, .split, .acc, .form, .footer, .modal. Mismos hairlines, mismo
       radio cero, misma pill del botón, mismos easings y duraciones.

   EL DESVÍO DELIBERADO — y es UNO SOLO: EL REGISTRO TIPOGRÁFICO.

   La landing de Ropa Blanca copia el registro de cultiver.com.au: TODO titular
   en caja alta, cuerpo diminuto y tracking positivo fuerte. Es un registro de
   marca de blanquería premium para consumidor.

   Esta landing le habla a un gerente de compras de hotel, a un administrador de
   clínica, a un encargado de housekeeping. La referencia pedida es frette.com,
   que resuelve el mismo problema al revés: los TITULARES van en caja baja
   ("Thoughtfully Crafted for Modern Living", "165 Years Of Exquisite
   Craftmanship") y la caja alta queda reservada para las etiquetas diminutas,
   el nav y los botones. El resultado se lee institucional y editorial en vez de
   lookbook, y —lo que importa acá— deja poner titulares más largos y más
   informativos sin que la línea se vuelva un cartel.

   Concretamente, lo que cambia respecto de la landing hermana:

     1. h1/h2/h3 pierden `text-transform: uppercase`. La caja alta sobrevive
        SÓLO en .tag, .nav, .btn, .qlink, .field label, .figure__l, .topbar,
        los h2 del footer y los micro-labels. Ese contraste —etiqueta en
        versalita contra titular en caja baja— es la firma de la referencia.
     2. La escala sube. Un titular en caja baja a 38px lee más chico que el
        mismo texto en caja alta: la altura de x manda. Se compensa llevando el
        H1 a ~54px y el H2 a ~33px en desktop.
     3. El tracking de titulares baja a ~0. El tracking positivo fuerte es un
        recurso de caja alta; aplicado a caja baja separa las letras y rompe la
        palabra. El tracking positivo se mantiene íntegro donde sigue habiendo
        caja alta (etiquetas, nav, botones), que es de donde viene la marca.

   Y una decisión de layout que también viene de la referencia:
     4. La ficha de producto pasa de 4:5 a CUADRADA, y con dos fotos que se
        cruzan al pasar el mouse (Frette rota a una segunda imagen en hover).
        Son ocho tiles cuadrados, igual que la grilla de categorías de la home
        de Frette; el octavo no es un producto, es el CTA a WhatsApp (ver §10).

   Índice
     1. Tokens
     2. Reset y base
     3. Primitivas (shell, bleed, tag, lead, qlink, btn, reveal, placeholder)
     4. Preloader
     5. Barra de anuncio, header y nav
     6. Hero
     7. Franja de distribuciones
     8. Bandas editoriales (a sangre, 2-up y split)
     9. Por qué Sahade — pilares
    10. Productos por aplicación — tiles cuadrados + tile de CTA
    11. Segmentos que atendemos
    12. Respaldo institucional + clientes de referencia
    13. FAQ
    14. Contacto
    15. Footer y modal
    16. Ajustes del widget de WhatsApp
    17. Accesibilidad y motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* 1.1 Paleta — idéntica a las dos landings hermanas. NO se derivan tonos
     intermedios de --mineral ni de --accent: si algo no contrasta, se resuelve
     con los acromáticos, nunca tocando el hex de marca. */
  --mineral: #706f6f;            /* Mineral Hulett · principal */
  /* Complementario de marca: Caribou · PANTONE 18-1017 TPX / 7531 C.
     El manual imprime "Hexadecimal: #8fb189", que es un verde y no coincide ni
     con el Pantone ni con el RGB de la misma ficha. Manda el RGB (123,104,86),
     que además es el color medido sobre el propio pastón del manual (#7A6956). */
  --accent: #7B6856;             /* Complementario · Caribou */
  --accent-deep: #5F5044;        /* Caribou oscurecido — sólo para hover del botón */
  --accent-veil: rgba(123, 104, 86, 0.18);

  --ink: #2f2e2e;
  --ink-soft: #3d3c3c;
  --mineral-mid: #8a8989;
  --mineral-pale: #d8d6d3;
  /* --mineral-text: el acromático para TEXTO. Medido, no elegido a ojo.
     Ni --mineral ni --mineral-mid llegan a AA como color de texto chico acá:
         --mineral-mid #8a8989 sobre --cream       → 3.33:1   (pide 4.5) ✗
         --mineral     #706f6f sobre --cream       → 4.80:1   ✓
         --mineral     #706f6f sobre --cream-warm  → 4.48:1   ✗ por dos centésimas
     Y ese último caso no es teórico: --cream-warm es el fondo de «Segmentos» y de
     «Contacto», donde viven la bajada, el cuerpo de cada segmento y los datos de
     contacto. El sistema heredado ya prevé la salida por regla: «si algo no
     contrasta, se resuelve con los acromáticos, nunca tocando el hex de marca».
     Éste es ese acromático, y pasa en los tres fondos claros de la página:
         sobre --cream #faf9f7      → 5.54:1
         sobre --cream-warm #f4f2ee → 5.18:1
         sobre --paper #ffffff      → 5.71:1
     A diez unidades de --mineral el corrimiento visual es imperceptible y el tono
     sigue siendo neutro. --mineral y --mineral-pale quedan como referencia de
     paleta y para lo que no es texto; --mineral-mid ya no se usa. */
  --mineral-text: #666565;
  --cream: #faf9f7;
  --cream-warm: #f4f2ee;
  --paper: #ffffff;

  --line: rgba(112, 111, 111, 0.16);
  --line-strong: rgba(112, 111, 111, 0.32);
  --line-light: rgba(255, 255, 255, 0.28);

  /* 1.2 Tipografía — las mismas tres familias, los mismos roles. */
  --f-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Abhaya Libre", Georgia, "Times New Roman", serif;
  --f-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 1.3 Escala — subida respecto de la landing hermana porque acá los titulares
     van en caja baja (ver cabecera §2). El cuerpo NO se toca: es el mismo texto
     de 15px de la landing de blanquería, y el público de esta landing está en
     el mismo rango de edad. */
  --t-micro: clamp(0.66rem, 0.63rem + 0.12vw, 0.72rem);   /* etiquetas, nav, botones */
  --t-small: clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);
  --t-body: clamp(0.88rem, 0.85rem + 0.16vw, 0.95rem);    /* ~15px */
  --t-lead: clamp(1.02rem, 0.94rem + 0.4vw, 1.24rem);     /* bajada serif */
  --t-h3: clamp(1rem, 0.94rem + 0.3vw, 1.18rem);
  --t-h2: clamp(1.3rem, 1.02rem + 1.15vw, 2.05rem);       /* ~33px */
  --t-band: clamp(1.45rem, 1.15rem + 1.25vw, 2.25rem);    /* títulos sobre foto */
  --t-h1: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);           /* ~54px */
  --t-figure: clamp(2.1rem, 1.45rem + 2.7vw, 3.35rem);    /* cifras del respaldo */

  /* 1.4 Tracking — dos regímenes, y ésa es la gracia.
     Caja baja (titulares): ~0. Caja alta (etiquetas, nav, botones): positivo
     fuerte, exactamente el de la landing hermana. */
  --ls-h1: 0.002em;
  --ls-h2: 0.004em;
  --ls-band: 0.004em;
  --ls-micro: 0.16em;    /* caja alta — intacto */
  --ls-body: 0.018em;

  /* 1.5 Ritmo y grilla */
  --gutter: clamp(1.15rem, 6.94vw, 100px);
  --shell: 1440px;

  /* --edge: la MISMA línea vertical en la que empieza y termina el contenido de
     .shell, pero expresada contra el viewport, para las piezas que no cuelgan de
     un .shell (barra de anuncio, still del hero, lado exterior del split).
     --sbw lo escribe main.js con el ancho real de la barra de scroll: 100vw la
     incluye y el cálculo se corría ~8px en Windows/Chrome. Sin JS vale 0px y el
     desvío es el de siempre, nunca un layout roto. */
  --sbw: 0px;
  --edge: max(var(--gutter), calc((100vw - var(--sbw) - var(--shell)) / 2 + var(--gutter)));
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);

  /* Sin radio: ni Frette ni Cultiver redondean una sola imagen. El único radio
     que sobrevive es la pill del botón de WhatsApp. */
  --radius: 0px;
  --radius-pill: 999px;

  --header-h: 64px;
  --bar-h: 34px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html.lenis { scroll-behavior: auto; }
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

/* EL CAMBIO DE REGISTRO (cabecera §1). Poppins liviano, CAJA BAJA, tracking
   neutro. La jerarquía entre H1, H2 y H3 la hace el cuerpo y el aire, no el
   peso: nada pasa de 400 salvo el H3, que a 18px necesita el 500 para no
   confundirse con el párrafo que lo sigue. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 300; line-height: 1.1; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.18; letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: 0.002em; }

p { margin: 0; }
p + p { margin-top: 0.9em; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. PRIMITIVAS
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Banda a sangre. NO se usa el truco `width:100vw; margin-inline:calc(50% - 50vw)`:
   100vw incluye el ancho de la barra de scroll, así que con scrollbar clásica
   (Windows/Chrome) la banda se pasa ~8px por cada lado y aparece scroll
   horizontal. Todos los .bleed cuelgan directo de <main>, que no tiene padding
   ni max-width, así que ya ocupan el ancho real disponible sin ayuda. */
.bleed {
  width: 100%;
  margin-inline: 0;
}

.section { padding-block: var(--section-y); }

/* Cabecera de sección: etiqueta en versalita + H2 en caja baja + una línea de
   bajada + link quieto. Nunca centrada, nunca más de dos oraciones. */
.section__head { max-width: 68ch; margin-bottom: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .lead { margin-top: 0.9rem; }
.section__head .qlink { margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.5rem); }

/* 3.1 Etiqueta de sección — acá SÍ vive la caja alta con tracking fuerte. */
.tag {
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem);
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Sobre foto la etiqueta necesita blanco: --mineral-text no contrasta contra el
   velo de .porque. Mismo cuerpo y mismo tracking, solo cambia el color. */
.tag--light { color: #fff; }

/* 3.2 Bajada — la única pieza serif. Es donde vive Abhaya Libre. */
.lead {
  max-width: 62ch;
  color: var(--mineral-text);
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 3.3 QLINK — CTA secundario: versalita diminuta subrayada con un hairline.
   No es un botón, y por eso nunca compite con el de WhatsApp. */
.qlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), gap 0.4s var(--ease);
}
.qlink svg { width: 11px; height: 11px; flex: none; }
.qlink:hover { color: var(--accent); gap: 0.85em; }
.qlink--light { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.75); }
.qlink--light:hover { color: #fff; border-bottom-color: #fff; }

/* 3.4 Botón — el único elemento macizo de la página, reservado para WhatsApp,
   que es el canal de cierre del segmento. Mismo pill y mismos hex que las dos
   landings hermanas. */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.82em 1.5em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--sm { padding: 0.7em 1.15em; }
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: scale(0.98); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  border: 1px solid var(--accent);
}
.btn--outline:hover { background: var(--accent); color: #fff; }

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn--onDark:hover { background: #fff; color: var(--ink); border-color: #fff; }

.cta-row { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2vw, 1.8rem); align-items: center; }
/* El qlink que va al lado del botón no hereda el margin-top de su sección: con
   align-items:center ese margen lo bajaba media altura y el par quedaba
   desalineado. Ambos comparten el eje. */
.cta-row > .qlink.qlink { margin-top: 0; }

/* Microcopy debajo de un CTA: quita la duda de "¿esto es para mí?" en el mismo
   golpe de vista que el botón. */
.cta-note {
  margin-top: 0.85rem;
  color: var(--mineral-text);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}
.cta-note--light { color: rgba(255, 255, 255, 0.72); }

/* 3.5 Scroll reveals — fade + slide corto. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .reveal-img { opacity: 0; transition: opacity 0.7s var(--ease-out); }
.js .reveal-img.is-in { opacity: 1; }
.js .reveal-img img,
.js .reveal-img .ph {
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
}
.js .reveal-img.is-in img,
.js .reveal-img.is-in .ph { transform: scale(1); }

/* Titular del hero: revelado por líneas.
   La máscara (overflow hidden + translateY 105%) SÓLO funciona si cada .line
   ocupa una única fila: si el texto wrappea, las dos filas se revelan como una
   y la animación se ve rota. En mobile el H1 wrappea sí o sí, así que ahí la
   máscara se desactiva y el revelado pasa a ser un fade-up común.
   El corte va en 860px, no en 700: este H1 es más largo que el de la landing
   hermana (caja baja, tres líneas) y a 700px todavía wrappea. */
.line { display: block; }
.line > span { display: block; }

@media (min-width: 860px) {
  .line { overflow: hidden; }
  .js .hero__title .line > span {
    transform: translateY(105%);
    transition: transform 1s var(--ease-out);
    transition-delay: var(--ld, 0ms);
  }
  .js .hero.is-ready .hero__title .line > span { transform: none; }
}

@media (max-width: 859px) {
  .js .hero__title .line > span {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--ld, 0ms);
  }
  .js .hero.is-ready .hero__title .line > span { opacity: 1; transform: none; }
}

/* 3.6 Placeholder de imagen — mismo aspect-ratio que la foto que va a ocupar
   ese lugar, así al cargarla el layout no se mueve. */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(112, 111, 111, 0.05) 0 10px,
      rgba(112, 111, 111, 0) 10px 20px),
    var(--cream-warm);
  border: 1px dashed var(--line-strong);
}
.ph::after {
  content: "◻ " attr(data-placeholder);
  position: absolute;
  inset-inline: 8%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.7;
  word-break: break-word;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 999;
  padding: 0.7em 1.2em;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-display);
  font-size: var(--t-small);
  transition: top 0.25s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* --------------------------------------------------------------------------
   4. PRELOADER
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
html:not(.js) .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__inner { display: grid; justify-items: center; gap: 1.6rem; width: min(240px, 58vw); }
.preloader__mark { width: 100%; height: auto; opacity: 0.9; }
.preloader__line { display: block; width: 100%; height: 1px; background: var(--line); overflow: hidden; }
.preloader__line i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: pl-load 1.1s var(--ease-out) forwards;
}
@keyframes pl-load { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   5. BARRA DE ANUNCIO, HEADER Y NAV
   -------------------------------------------------------------------------- */

/* 5.1 Barra de anuncio — la franja diminuta con el dato institucional. */
.topbar {
  position: relative;
  z-index: 101;
  /* flex, NO grid: los nodos de texto sueltos entre los <span> se vuelven ítems
     de grilla anónimos y cada palabra caería en su propia fila. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  height: var(--bar-h);
  padding-inline: var(--edge);
  background: var(--cream-warm);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar span { opacity: 0.55; padding-inline: 0.5em; }

/* Debajo de 620px la frase completa no entra y nowrap la recortaba por los dos
   lados. Se esconde la cola geográfica y queda sólo el dato institucional. */
@media (max-width: 619px) {
  .topbar { letter-spacing: 0.1em; }
  .topbar .topbar__geo { display: none; }
}

/* 5.2 Header */
.header {
  position: fixed;
  inset-inline: 0;
  top: var(--bar-h);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              transform 0.5s var(--ease), top 0.5s var(--ease);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  height: var(--header-h);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header__logo { flex: none; }
.header__logo img {
  width: clamp(112px, 11vw, 150px);
  height: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.5s var(--ease);
}

/* Nav: versalita diminuta y muy espaciada. Es una de las piezas donde la caja
   alta sobrevive al cambio de registro (cabecera §1). */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.5vw, 1.9rem);
  margin-inline: auto;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav a { position: relative; color: #fff; transition: color 0.4s var(--ease), opacity 0.4s var(--ease); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cross { opacity: 0.6; }

.nav__cta { display: none; }

.header__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* Estado sólido: al salir del hero. Crema opaco, no vidrio. */
.header.is-solid {
  top: 0;
  background: var(--cream);
  border-bottom-color: var(--line);
}
.header.is-solid .header__logo img { filter: none; }
.header.is-solid .nav a { color: var(--ink); }

.header.is-hidden { transform: translateY(-140%); }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 6px;
}
.burger span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.header.is-solid .burger span { background: var(--ink); }
.burger[aria-expanded="true"] span { background: var(--ink); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* El corte pasa a 1100px, no 1024: esta nav tiene un ítem más que la de la
   landing hermana (SEGMENTOS) y a 1024px el conjunto logo + nav + botón ya no
   entra sin que los links se peguen. */
@media (max-width: 1100px) {
  .burger { display: grid; }
  .header__actions .btn { display: none; }

  /* .nav pasa a position:fixed y sale del flujo, así que sin este margen el
     burger queda pegado al logo, a la izquierda, con medio header vacío. */
  .header__actions { margin-inline-start: auto; }

  /* Sin la nav al lado sobra ancho: el logo puede respirar. */
  .header__logo img { width: clamp(150px, 42vw, 178px); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: clamp(1rem, 2.6vw, 1.6rem);
    margin: 0;
    padding: calc(var(--header-h) + 7vh) var(--gutter) 7vh;
    background: var(--cream);
    font-size: clamp(0.95rem, 0.85rem + 0.9vw, 1.2rem);
    letter-spacing: 0.12em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s var(--ease);
    overflow-y: auto;
  }
  .nav a { color: var(--ink); }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a.nav__cta { display: inline-flex; margin-top: clamp(0.6rem, 1.6vw, 1.1rem); color: #fff; }
  .nav__cta::after { display: none; }
  .header:has(.nav.is-open) .header__logo img { filter: none; }
}

/* --------------------------------------------------------------------------
   6. HERO
   ..........................................................................
   Anatomía: foto a sangre, degradé cruzado, y UN bloque abajo a la izquierda
   con H1 + bajada + el par de CTA. A la derecha, el validador del Hotel
   Windsor: es el único diferencial que ningún competidor puede copiar, así que
   entra antes del primer scroll y no más abajo.

   El objetivo declarado de esta landing es cerrar la brecha de 872 visitas
   contra 8 clics en WhatsApp de la campaña anterior. De ahí que el botón macizo
   esté acá arriba, con microcopy al pie, y no recién en el pie de página.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* La barra de anuncio va en flujo normal y ya consumió sus 34px antes de que
     empiece el hero, así que acá se descuentan una sola vez. El padding-top sólo
     tiene que despejar el header, que es fixed y no ocupa lugar. */
  min-height: calc(100svh - var(--bar-h));
  padding-top: var(--header-h);
  padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__bg { position: absolute; inset: -6% 0; z-index: -2; }
.hero__bg picture, .hero__bg img { width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: 50% 46%; }

/* Dos degradés cruzados, no uno.
   Con sólo el vertical, el promedio de contraste sobre el H1 daba bien pero el
   PEOR pixel caía por debajo de 1.5:1: el titular cruza la colcha iluminada y
   ahí el blanco desaparece. El promedio no sirve para decidir esto —lo que se
   lee mal es el peor punto—. El degradé horizontal oscurece el tercio
   izquierdo, que es donde vive el texto, y deja limpia la mitad derecha, que es
   donde vive la cama.

   Respecto de la landing hermana el velo izquierdo sube de 0.46 a 0.52: este H1
   ocupa tres líneas en vez de dos y por lo tanto sube más alto dentro de la
   foto, hasta una zona más clara. Si se cambia la foto del hero, hay que volver
   a medir: estos números valen para hero-dormitorio.webp y para ninguna otra. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* 1. CABECERA. El nav va en blanco puro sobre la foto y la parte de arriba de
       esta imagen son los brillos de las almohadas: medido, «Contacto» daba
       3.97:1 y «Preguntas» 4.29:1 contra los 4.5:1 que pide AA a 11.5px. Y en
       blanco puro no hay margen de color que ajustar: la única salida es
       oscurecer el fondo. Se apaga a los 20% del alto para no ensuciar la foto. */
    linear-gradient(to bottom,
      rgba(24, 20, 17, 0.46) 0%,
      rgba(24, 20, 17, 0.20) 11%,
      rgba(24, 20, 17, 0) 20%),
    /* 2. COLUMNA DERECHA, donde vive el bloque del Hotel Windsor. El degradé
       horizontal principal ya vale 0 ahí, así que el bloque quedaba sobre la
       almohada iluminada: la etiqueta daba 3.43:1 y la bajada 3.90:1. */
    linear-gradient(to left,
      rgba(24, 20, 17, 0.40) 0%,
      rgba(24, 20, 17, 0.16) 14%,
      rgba(24, 20, 17, 0) 28%),
    /* 3. TERCIO IZQUIERDO, donde vive el H1 y la bajada. */
    linear-gradient(to right,
      rgba(24, 20, 17, 0.52) 0%,
      rgba(24, 20, 17, 0.30) 38%,
      rgba(24, 20, 17, 0) 62%),
    /* 4. BASE. Sube respecto de la versión anterior porque esta foto es bastante
       más clara que la que había: el H1 pasó de 5.4:1 a 3.4:1 con el mismo velo. */
    linear-gradient(to top,
      rgba(24, 20, 17, 0.66) 0%,
      rgba(24, 20, 17, 0.46) 32%,
      rgba(24, 20, 17, 0.22) 66%,
      rgba(24, 20, 17, 0.20) 100%);
}

.hero__inner { width: 100%; }

/* Medido, no estimado: la línea más larga del H1 ("que conoce la hotelería")
   pide ~640px a 54px en Poppins 300 caja baja. Si el bloque es más angosto, la
   línea wrappea y la máscara de .line revela dos filas como una sola: la
   animación de entrada se rompe. De ahí el piso de 700px. */
.hero__copy { max-width: min(92vw, 700px); }

.hero__title { color: #fff; }
.hero__title .line + .line { margin-top: 0.01em; }

.hero__sub {
  max-width: 46ch;
  margin-top: clamp(0.9rem, 0.7rem + 0.6vw, 1.35rem);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  line-height: 1.48;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
}
.hero__cta .cta-note { flex-basis: 100%; margin-top: 0; }

/* 6.1 VALIDADOR DEL HOTEL WINDSOR
   Donde la landing hermana pone un muestrario de colores, acá va el único
   diferencial que ningún competidor de Córdoba puede copiar: la misma familia
   opera un hotel desde hace más de 60 años.

   Es TEXTO, no una foto. No hay ninguna imagen del Hotel Windsor en el
   repositorio, y rotular una foto de otra cosa como si fuera el hotel sería
   inventar un activo que no existe. De paso, el tratamiento sale de la propia
   referencia: Frette pone su antigüedad como cifra suelta y grande ("165 Years
   Of Exquisite Craftmanship"), no como imagen.

   El borde derecho usa --edge, no --gutter: así cierra en la misma línea que el
   texto del hero y que el resto de las secciones.
   Sólo desde 1024px: en mobile taparía la cama, que es el sujeto de la foto, y
   el mismo dato lo repite el pilar 01 de «Por qué Sahade». */
.hero__proof { display: none; }

@media (min-width: 1024px) {
  .hero__proof {
    position: absolute;
    right: var(--edge);
    /* Piso de 92px: abajo a la derecha vive el botón flotante de WhatsApp
       (~56px + su propio offset) y con menos le pisa la última línea a 1024px. */
    bottom: clamp(5.75rem, 6vw, 6.5rem);
    z-index: 1;
    display: block;
    width: clamp(215px, 19vw, 290px);
    padding-top: clamp(0.9rem, 1vw, 1.25rem);
    /* Un solo hairline arriba, como las filas de pilares y la franja de
       clientes. Sin caja, sin fondo y sin sombra: el hero no lleva tarjetas. */
    border-top: 1px solid rgba(255, 255, 255, 0.45);
  }
  .hero__proof-eyebrow {
    /* 0.82, no 0.62. Medido sobre la escena compuesta (foto + los dos degradés)
       muestreando el rect real del texto: con 0.62 el peor pixel daba 3.16:1
       contra los 4.5:1 que pide AA para 11.5px. El bloque cae sobre la mitad
       derecha del hero, que es justo donde el degradé horizontal ya vale 0 y la
       colcha está iluminada. Misma razón en .hero__proof-src más abajo.
       El peor pixel de fondo ahí es rgb(120,103,92): barrido de alphas sobre ese
       punto, 0.82 daba 4.24 y 0.88 daba 4.60. Se toma 0.92 → 4.85:1, con margen,
       y todavía se lee claramente más apagado que la cifra en blanco puro. */
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--f-display);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  /* La cifra es el ancla visual de la pieza: mismo cuerpo y mismo peso que las
     cifras de «Respaldo», para que se lean como el mismo tipo de dato. */
  .hero__proof-n {
    margin-top: 0.5rem;
    color: #fff;
    font-family: var(--f-display);
    font-size: var(--t-figure);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .hero__proof-t {
    margin-top: 0.45rem;
    max-width: 22ch;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--f-serif);
    font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.08rem);
    line-height: 1.4;
  }
  .hero__proof-src {
    margin-top: 0.7rem;
    /* 0.80, no 0.66: con 0.66 el peor pixel daba 4.38:1 contra 4.5:1. */
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--f-display);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-transform: uppercase;
  }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2vw, 1.6rem);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-pill);
}
.hero__scroll span {
  display: block;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  animation: scroll-hint 1.9s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translateY(-5px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}

@media (max-width: 700px) {
  .hero { min-height: calc(92svh - var(--bar-h)); }
  .hero__scroll { display: none; }

  /* Velo mas fuerte en mobile. Dos razones: la foto vertical es mas clara que la
     apaisada, y el bloque de texto ocupa una porcion mucho mayor del hero, asi
     que sube hasta donde el degradé de desktop ya se apago. Medido sobre
     hero-habitacion-portrait.webp: con los valores de desktop la primera fila del
     H1 daba 3.00:1 contra el minimo de 3:1 exacto —pasa, pero sin margen—. Con
     estos sube a ~4:1. El degradé horizontal no hace falta acá: en una pantalla
     de 390px el texto cruza todo el ancho, no un tercio. */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(24, 20, 17, 0.42) 0%,
        rgba(24, 20, 17, 0.18) 10%,
        rgba(24, 20, 17, 0) 18%),
      linear-gradient(to top,
        rgba(24, 20, 17, 0.76) 0%,
        rgba(24, 20, 17, 0.60) 34%,
        rgba(24, 20, 17, 0.34) 68%,
        rgba(24, 20, 17, 0.28) 100%);
  }
}

/* --------------------------------------------------------------------------
   7. MARQUEE DE CLIENTES INSTITUCIONALES  [HOY SIN USO EN EL HTML]
   ..........................................................................
   El cliente pidio retirar la seccion de clientes (feedback 02/09/2026): "no
   pongamos clientes por las dudas". Se borro el <section class="clientes"> del
   HTML y se dejo este bloque intacto, porque reponerlo es volver a pegar la
   seccion y nada mas. Los PNG de los cuatro logos siguen en assets/images/.
   ..........................................................................
   Los cinco nombres estaban antes en una fila quieta al pie de la sección
   oscura de respaldo. Acá suben a la posición que la referencia le da a la
   prueba social —justo después del hero— y se mueven.

   POR QUÉ NO SWIPER. .rules/stack.md §6 pide Swiper para los carruseles de
   logos. Acá no entra: no hay logos, son cinco palabras, y Swiper serían ~40 KB
   de CDN y un contenedor con overflow propio para animar un translate que el
   CSS hace en seis líneas. Sí se respeta lo que esa regla busca de fondo: bucle
   continuo y máscara de difuminado en los dos bordes.

   CÓMO CIERRA EL BUCLE. Hay DOS pistas idénticas, una al lado de la otra, y se
   corre el conjunto -50%: cuando la primera termina de salir, la segunda está
   exactamente donde arrancó la primera, así que el salto de vuelta a 0 no se ve.
   Por eso el HTML duplica la lista (y la copia va con aria-hidden, para que el
   lector de pantalla no lea diez clientes donde hay cinco).
   -------------------------------------------------------------------------- */
.clientes {
  border-block: 1px solid var(--line);
  background: var(--cream);
  overflow: hidden;
}
.clientes__inner {
  display: grid;
  gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
}
.clientes__label {
  padding-inline: var(--edge);
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* La máscara que pide stack.md §6: los nombres no se cortan contra el borde,
     se desvanecen. Se declara -webkit- primero para Safari. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  padding-right: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  /* La duración vive en el token para poder frenarla sin tocar el keyframe. */
  animation: marquee var(--marquee-dur, 38s) linear infinite;
}
.marquee__track li { flex: none; display: flex; align-items: center; }

/* LOS LOGOS. Los cuatro archivos vienen APLANADOS A NEGRO + ALFA desde
   /fuentes-cliente (ver su LEEME): el color de marca se descarta en el asset y
   no con un filter. Por que: los cuatro venian en su color -verde Holiday Inn,
   bordo Amerian, azul Allende, gris azulado Quinto Centenario- y cuatro colores
   de marca distintos sobre el crema competian entre si y con el resto de la
   pagina; es el mismo criterio que ya se habia aplicado a las distribuciones.
   Aplanarlos ademas los deja en un solo color, que comprime muchisimo mejor:
   los cuatro juntos pesan 71 KB en vez de 240 KB. Aca solo hace falta bajarles
   la opacidad, que es lo que los lleva al gris carbon de la casa. */
.marquee__logo {
  width: auto;
  height: clamp(21px, 2.1vw, 29px);
  opacity: 0.55;
  transition: opacity 0.45s var(--ease);
}
.marquee__track li:hover .marquee__logo { opacity: 0.85; }
/* Quinto Centenario es un lockup apilado en tres renglones, no un wordmark
   apaisado: a la misma altura de caja que los otros, cada renglon queda en 7px.
   Se lo mide por peso optico, igual que Brescia en las distribuciones. */
.marquee__logo.marquee__stack { height: clamp(32px, 3.2vw, 44px); }

/* Norte Abanicos no tiene archivo. Va en texto con el mismo tratamiento que
   «Universo» en las distribuciones; cuando llegue el logo se reemplaza el <li>
   por su <img> y esto se puede borrar. */
.marquee__word {
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: clamp(0.82rem, 0.75rem + 0.35vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* Al pasar el mouse se frena: si un nombre le interesa, el usuario tiene que
   poder leerlo sin perseguirlo. */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   7.1 DISTRIBUCIONES - vive dentro de «A quien abastecemos» (§12.2)
   ..........................................................................
   Es un validador institucional, asi que su lugar es junto a los segmentos.
   Chica y sin protagonismo: en esta landing las marcas propias NO son el ancla
   del mensaje.

   Al partirse el respaldo en dos, este bloque paso del plano --ink al claro: se
   retira el invert(1) que pasaba los logos a blanco y se mantiene el
   brightness(0), asi que quedan en gris carbon en vez de en su color de marca.
   El por que esta en la nota de .dist__list img.
   -------------------------------------------------------------------------- */
.dist {
  margin-top: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.dist__label {
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dist__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
}
/* NEUTRALIZADOS, no a color. Los tres PNG traen su color de marca -Arcoiris es
   azul y rojo, Coteminas rojo- y sobre el crema esos dos rojos eran lo mas
   saturado de toda la pagina: se comian a los cuatro segmentos que estan arriba,
   que son el contenido de la seccion. Con brightness(0) mas opacidad quedan en un
   gris carbon que se lee como texto de la casa y no como cuatro logos peleando.
   Es el mismo recurso que usa el wordmark del footer, y el que usaban aca cuando
   el plano era oscuro: solo se retira el invert(1), que era lo que los pasaba a
   blanco. Negro al 55% sobre --cream-warm da ~5:1. */
.dist__list img {
  width: auto;
  height: clamp(17px, 2vw, 24px);
  filter: brightness(0);
  opacity: 0.55;
  transition: opacity 0.45s var(--ease);
}
.dist__list li:hover img { opacity: 0.82; }
/* Brescia no es un wordmark apaisado como Arcoiris o Coteminas: es un lockup
   encajonado, casi 2:1, y a la altura de los otros el texto adentro del recuadro
   quedaba en 9px. Se lo mide por peso óptico, no por altura de caja. */
.dist__list img.dist__lockup { height: clamp(26px, 3vw, 38px); }
.dist__word {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. BANDAS EDITORIALES
   ..........................................................................
   Tres formatos, todos a sangre, sin gaps, sin radio y sin sombra.
   -------------------------------------------------------------------------- */

/* 8.1 Banda simple: una foto panorámica con o sin texto encima abajo a la izq. */
.band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 42vw, 620px);
  overflow: hidden;
  background: var(--cream-warm);
}
.band__img { position: absolute; inset: 0; z-index: 0; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band__over {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--gutter);
}
/* Sólo cuando hay texto encima: sin esto la foto va limpia. */
.band--titled .band__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 24, 20, 0.58), rgba(28, 24, 20, 0) 58%);
}
/* .band--onLight se retiró junto con la banda de almohadas que era la única que
   lo usaba. Si vuelve a hacer falta un velo intermedio para una foto clara con
   título encima, está medido en el CSS de landing.sahade-ropa-blanca.eon.ar. */
/* .band--onWhite — para las fotos de TEXTIL BLANCO, que son otra categoría de
   problema. Una toalla o una bata blanca llenando el cuadro deja el fondo
   arriba de 240 en los tres canales, y con el velo de .band--onLight el título
   en blanco daba 1.76:1 (banda del asesor) y 2.46:1 (banda de baño) contra los
   3:1 que pide AA para texto grande. Con estos valores el peor pixel sube a
   ~6.7:1. Es un velo fuerte, pero sobre una foto casi blanca no se lee como
   suciedad: se lee como el degradé editorial de siempre. */
.band--onWhite .band__img::after {
  background: linear-gradient(to top,
    rgba(28, 24, 20, 0.82) 0%,
    rgba(28, 24, 20, 0.64) 30%,
    rgba(28, 24, 20, 0.18) 75%,
    rgba(28, 24, 20, 0.08) 100%);
}

.band__title {
  color: #fff;
  font-size: var(--t-band);
  letter-spacing: var(--ls-band);
}
.band__lead {
  max-width: 36ch;
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--f-serif);
  font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.1rem);
  line-height: 1.5;
}
.band__over .qlink { margin-top: 1.15rem; }

/* 8.2 Banda partida en 2 */
.band-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .band-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band-2 > .band { min-height: clamp(300px, 38vw, 560px); }

/* Zoom sutil de la foto al pasar el mouse por una banda que es link */
a.band .band__img img { transition: transform 1.1s var(--ease); }
a.band:hover .band__img img { transform: scale(1.035); }

/* 8.3 El split 50/50 se retiro.
   Era el componente con el que la landing hermana arma su seccion de pilares:
   foto a un lado, lista vertical con hairlines del otro. Repetirlo aca era lo
   que hacia que las dos paginas se leyeran iguales. Lo reemplazan la banda de
   statement y la fila de pilares de la seccion 9. Si alguna vez se necesita un
   split, esta en el CSS de landing.sahade-ropa-blanca.eon.ar. */

/* --------------------------------------------------------------------------
   9. POR QUE SAHADE - split con la lista vertical numerada
   ..........................................................................
   CUARTA forma de esta seccion. El recorrido completo esta en el comentario del
   HTML; lo que importa aca es por que quedo asi:

     · La version anterior tenia el texto a la derecha y los cuatro pilares en
       una fila DEBAJO del bloque. Resolvia el contraste -saco el texto de
       encima de la foto- pero dejaba dos huecos: la columna de texto era mas
       corta que la foto, y la fila de pilares quedaba lejos, sin relacion
       visual con lo que tenia arriba.
     · Metiendo los pilares DENTRO de la columna como lista numerada, la columna
       se alarga y pasa a marcar el alto de la seccion. La foto la acompana con
       align-items: stretch, asi que los dos huecos desaparecen solos: no hay
       ninguna altura fija que mantener.

   ES EL COMPONENTE DE LA LANDING HERMANA, a pedido del cliente, que quiere las
   dos paginas unificadas. Hasta aca se lo habia evitado justamente porque era
   lo que las hacia leer iguales. Lo que NO se copia es el registro tipografico:
   alla los titulares van en caja alta y aca siguen en caja baja, que es el unico
   desvio declarado de esta landing y el que ordena toda la pagina.

   CONTRASTE: cero texto sobre fotografia. El indice y el dato duro van en
   --accent, que sobre --cream-warm da 4.75:1 (pide 4.5 a 11.5px).
   -------------------------------------------------------------------------- */
.porque { background: var(--cream-warm); }

.porque__grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.porque__media { margin: 0; }
.porque__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mobile: la foto arriba a todo el ancho y el texto debajo con el margen normal.
   Se le fija proporcion porque el archivo es 4:5 y a todo el ancho de un celular
   eso son 490px: demasiado para lo primero que se ve de la seccion. */
.porque__media { aspect-ratio: 4 / 3; }
.porque__say { padding: clamp(1.8rem, 1.3rem + 2.4vw, 3rem) var(--edge); }

@media (min-width: 960px) {
  .porque__grid {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    /* stretch, NO center: es lo que hace que la foto tome el alto que le marca
       la columna de texto. Con center volvian los dos huecos. */
    align-items: stretch;
    column-gap: clamp(2.5rem, 5vw, 6rem);
    /* Solo a la derecha: a la izquierda la foto TIENE que llegar al borde del
       viewport, que es de donde sale la asimetria. */
    padding-right: var(--edge);
  }
  /* Sin aspect-ratio ni alto fijo: lo pone la fila del grid. */
  .porque__media { aspect-ratio: auto; height: 100%; }
  .porque__say {
    /* El alto minimo evita el caso raro de la columna corta -si alguna vez se
       recorta el copy- dejando la foto en una tira apaisada. */
    min-height: clamp(560px, 46vw, 760px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
  }
}

.porque__title { max-width: 22ch; }
.porque__say .lead { max-width: 48ch; margin-top: clamp(0.8rem, 0.6rem + 0.6vw, 1.2rem); }

/* 9.1 Los cuatro pilares, en lista vertical numerada -------------------------- */
.pilares {
  margin-top: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.pilar {
  display: grid;
  /* PISTA FIJA para el indice, no `auto`. Con auto la columna se adapta a cada
     numero y los cuatro titulos arrancaban en cuatro verticales distintas:
     medido, «01» ocupa 14.66px y «04» 18.08px, asi que los h3 se corrian hasta
     3.4px entre si. font-variant-numeric: tabular-nums no alcanza -Poppins de
     Google Fonts no trae la feature `tnum`-, asi que se resuelve por layout.
     1.5rem entra comodo: el indice mas ancho mide 1.13rem. */
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.8rem);
  padding-block: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
/* El indice, en versalita y en el acento: ordena la lectura sin competir con el
   titulo. Va con aria-hidden en el HTML porque es un <ol>: el lector de pantalla
   ya numera solo, y si no lo leeria dos veces. */
.pilar__n {
  color: var(--accent);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.pilar h3 {
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: 0.004em;
}
.pilar p {
  margin-top: 0.3rem;
  color: var(--mineral-text);
  font-size: var(--t-small);
  line-height: 1.68;
}

.porque__say .cta-row { margin-top: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }

/* --------------------------------------------------------------------------
   9.2 LA HABITACION, PUNTO POR PUNTO
   ..........................................................................
   El recurso de la home de frette.com: foto ambientada con puntos encima, y al
   pasar por uno se abre el nombre de la pieza. Alla el punto lleva a la ficha
   del producto con su precio; aca no hay precios ni fichas, asi que lleva a la
   consulta de esa linea por WhatsApp -la unica conversion de la pagina-.

   Va sobre --ink y con la foto a sangre y sin velo: el texto de la cabecera esta
   ARRIBA de la imagen, no encima, asi que otra vez no hay contraste que medir
   sobre fotografia. El plano oscuro ademas separa esta seccion de la de arriba
   (--cream-warm) y de la grilla de abajo (--cream), que si no se pegarian.

   LOS PUNTOS. Cada uno es un <a> real con el rotulo adentro, asi que su nombre
   accesible sale del propio texto y funciona con teclado. El rotulo se muestra en
   :hover y en :focus-visible -el recorrido por teclado ve lo mismo que el mouse-.
   El punto es blanco con un halo oscuro: la foto es casi toda ropa de cama
   blanca, y un punto blanco pelado desaparece encima.

   Los .hs--l abren el rotulo hacia la IZQUIERDA. Son los dos que estan pasando
   el 65% del ancho: con el rotulo hacia la derecha se salian del cuadro.

   TOUCH. Abajo de 900px no hay hover, asi que los puntos dejan de estar encima
   de la foto y se acomodan como fila de chips debajo, con el rotulo siempre
   visible y area de toque de 44px. Es el MISMO markup: solo cambia el layout.
   -------------------------------------------------------------------------- */
/* Se retiro el bloque de titular y bajada que iba encima de la foto sobre el
   plano oscuro, asi que la seccion no lleva padding: es la foto a sangre, borde
   a borde, entre la seccion de arriba y la grilla de productos.
   El plano --ink igual se queda: en desktop no se ve -la foto lo tapa entero-
   pero abajo de 900px es el fondo sobre el que caen los chips. */
.habitacion { background: var(--ink); color: #fff; padding: 0; }

.hs { position: relative; margin: 0; }
/* EL ENCUADRE ES PANORAMICO (2.38:1, ~21:9) Y NO 16:9, y eso es una decision de
   ALTO, no de composicion. A sangre, el ancho del viewport manda: con 16:9 la
   seccion medía 810px de alto en 1440px y 1070px en 1920, o sea que un solo
   bloque se comia una pantalla entera. Con 2.38:1 baja a 605px y 800px.
   Se recorto arriba y abajo desde el original, NO con object-fit: los puntos se
   posicionan en porcentajes sobre el marco, asi que un recorte por CSS los
   habria despegado de los objetos. Los cinco --y estan recalculados sobre el
   encuadre nuevo; los --x no cambian porque el ancho es el mismo. */
.hs__frame { overflow: hidden; }
.hs__frame img { display: block; width: 100%; height: auto; }

/* En touch los puntos NO estan sobre la foto -son chips debajo-, asi que aca si
   se puede recortar por CSS sin desalinear nada. A 390px de ancho, 2.38:1 deja
   la imagen en 164px y queda una tira demasiado fina; 2:1 la sube a 195px
   recortando un 8% por lado, con lo que la frazada del borde izquierdo entra. */
@media (max-width: 899px) {
  .hs__frame { aspect-ratio: 2 / 1; }
  .hs__frame img { height: 100%; object-fit: cover; }
}

.hs__pts { list-style: none; }

.hs__pt {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;              /* area de toque, no tamano visible */
  height: 44px;
}
.hs__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  /* El halo es lo que lo hace visible sobre la ropa de cama blanca. */
  box-shadow: 0 0 0 1px rgba(28, 24, 20, 0.45), 0 2px 12px rgba(28, 24, 20, 0.55);
  transition: transform 0.35s var(--ease);
}
/* Anillo que late, para que se lea que son interactivos y no una marca de agua. */
.hs__pt::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  animation: hs-late 2.6s var(--ease) infinite;
}
@keyframes hs-late {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
.hs__pt:hover .hs__dot,
.hs__pt:focus-visible .hs__dot { transform: scale(1.25); }

.hs__tip {
  display: grid;
  gap: 0.12rem;
}
.hs__tip b {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hs__tip em {
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 9.2.1 Desktop: los puntos, encima de la foto ------------------------------- */
@media (min-width: 900px) {
  .hs__pts { position: absolute; inset: 0; }
  .hs__pts > li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
  }
  .hs__tip {
    position: absolute;
    top: 50%;
    left: calc(50% + 18px);
    transform: translateY(-50%) translateX(-6px);
    padding: 0.6rem 0.9rem;
    background: var(--paper);
    box-shadow: 0 18px 40px -18px rgba(24, 21, 19, 0.55);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  /* Los dos puntos que estan pasando el 65% del ancho abren hacia el otro lado:
     con el rotulo a la derecha se salian del cuadro. */
  .hs--l .hs__tip {
    left: auto;
    right: calc(50% + 18px);
    transform: translateY(-50%) translateX(6px);
  }
  .hs__pt:hover .hs__tip,
  .hs__pt:focus-visible .hs__tip {
    opacity: 1;
    transform: translateY(-50%);
  }
  /* El que esta abierto se pone por encima de los demas puntos. */
  .hs__pts > li:hover,
  .hs__pts > li:focus-within { z-index: 2; }
}

/* 9.2.2 Touch: los puntos bajan y se vuelven chips ---------------------------- */
@media (max-width: 899px) {
  .habitacion { padding-bottom: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
  .hs__pts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: clamp(1rem, 0.8rem + 1vw, 1.5rem) var(--edge) 0;
  }
  .hs__pt {
    width: auto;
    height: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
  }
  .hs__dot { width: 7px; height: 7px; box-shadow: none; }
  .hs__pt::after { display: none; }
  .hs__tip { white-space: nowrap; }
  .hs__tip b { color: #fff; }
  /* En el chip alcanza con el nombre: la coda tecnica ya la dice la ficha. */
  .hs__tip em { display: none; }
}

/* --------------------------------------------------------------------------
   10. PRODUCTOS POR APLICACIÓN
   ..........................................................................
   Tiles CUADRADOS, como la grilla de categorías de la home de Frette, y con la
   segunda foto que aparece en hover (allá rota a una toma alternativa del mismo
   producto; acá, a un plano de detalle o de uso).

   Sin recuadro, sin fondo, sin sombra: la foto, y debajo el nombre y una línea.
   El texto de cada tile NO nombra la marca: dice para qué sirve y cómo aguanta.
   Ése es el eje del segmento institucional.

   Son SIETE productos y un octavo tile que no es producto: es el CTA a
   WhatsApp. La landing anterior tuvo 872 usuarios navegando catálogo con 8
   conversiones; el tile de cierre existe para que el CTA viva dentro de la
   grilla y no sólo debajo de ella.
   -------------------------------------------------------------------------- */
.catalogo { background: var(--cream); }

.grid-prod {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.6vw, 2rem) clamp(0.7rem, 0.4rem + 1.2vw, 1.4rem);
}
@media (min-width: 640px) { .grid-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.prod a { display: block; }

.prod__media {
  position: relative;
  aspect-ratio: 1;          /* Frette: tile cuadrado, no 4:5 */
  overflow: hidden;
  background: var(--cream-warm);
}
.prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}

/* La segunda foto en hover se retiró (ver la nota del HTML): sustituir la imagen
   robaba la lectura del nombre y de la línea técnica, que es lo que define la
   consulta, y en touch nunca existió. Queda el zoom lento, que refuerza el tile
   como zona clickeable sin cambiar lo que se está mirando. */
.prod a:hover .prod__media img { transform: scale(1.045); }

.prod__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.prod__foot h3 { color: var(--ink); }
.prod__go {
  flex: none;
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s var(--ease);
}
.prod a:hover .prod__go { opacity: 1; transform: none; color: var(--accent); }

.prod__note {
  margin-top: 0.3rem;
  color: var(--mineral-text);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* En touch el "Consultar" se muestra fijo, porque no hay hover que lo revele.
   Pero en la grilla de 2 columnas de mobile la ficha mide ~170px y "Consultar ↗"
   al lado del nombre desborda la fila. Debajo de 640px se oculta: la tarjeta
   entera sigue siendo un link a WhatsApp. */
@media (hover: none) {
  .prod__go { opacity: 1; transform: none; }
}
@media (max-width: 639px) {
  .prod__go { display: none; }
}

/* 10.1 EL OCTAVO TILE — CTA, no producto.
   Ocupa exactamente el mismo cuadrado que los otros siete y lleva el único
   fondo macizo de la grilla, así que es lo primero que el ojo encuentra cuando
   barre la fila. */
.prod--cta a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  background: var(--accent);
  color: #fff;
  transition: background 0.5s var(--ease);
}
.prod--cta a:hover { background: var(--accent-deep); }
.prod--cta h3 { color: #fff; font-weight: 400; font-size: var(--t-h3); }
.prod--cta p {
  margin-top: 0.5rem;
  /* 0.94, no 0.82: sobre Caribou el peor caso con 0.82 daba 4.19:1 contra los
     4.5:1 que pide AA a 14px. Ver la nota del footer sobre el techo de contraste
     que tiene el blanco sobre este acento. */
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--t-small);
  line-height: 1.55;
}
.prod--cta .prod__cta-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1rem;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.prod--cta .prod__cta-foot svg { width: 14px; height: 14px; flex: none; }

/* Debajo de 400px el cuadrado de 2 columnas mide ~160px y el texto del tile no
   entra: se libera la proporción y crece en alto lo que necesite. */
@media (max-width: 399px) {
  .prod--cta a { aspect-ratio: auto; min-height: 160px; }
}

.catalogo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.catalogo__foot p { max-width: 52ch; color: var(--mineral-text); font-size: var(--t-small); }

/* --------------------------------------------------------------------------
   11. (libre) - «Segmentos» dejo de ser una seccion propia
   ..........................................................................
   Era otra fila de cuatro con hairlines -el mismo componente que la landing
   hermana usa para sus pilares- y sumaba cuatro parrafos de texto. Se fusiono
   dentro de la seccion de respaldo como una fila compacta de nombres con una
   coda de tres palabras (.segs, en la seccion 12.1): el decisor se reconoce
   igual de rapido y la pagina tiene una seccion menos.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12. RESPALDO INSTITUCIONAL - PARTIDO EN DOS
   ..........................................................................
   Era una sola seccion con cinco bloques sobre el mismo plano oscuro: titular,
   bajada, cuatro cifras, cuatro segmentos, cuatro distribuciones y el CTA. El
   fondo no cambiaba nunca, asi que nada indicaba donde terminaba un argumento y
   empezaba el siguiente: el decisor llegaba a los segmentos sin altura de
   lectura y las distribuciones -que son un validador fuerte- quedaban al pie de
   un muro de texto.

   Ahora son dos secciones, con una pregunta cada una y dos bloques cada una:
       12    QUIENES SOMOS, en cifras.        Plano --ink.
       12.2  A QUIEN ABASTECEMOS, y con que.  Plano --cream-warm.
   El corte de color entre las dos es lo que marca el cambio de pregunta, y es
   ademas lo que le devuelve respiro al scroll: entre la grilla de productos y el
   FAQ habia 1400px de plano oscuro seguido.
   -------------------------------------------------------------------------- */
/* Plano --ink, sin foto de fondo. La landing hermana pone una foto al 42% de
   opacidad detrás de esta sección; acá se retiró porque todo el texto blanco
   pasaba a depender del peor pixel de la foto —tres de las alphas heredadas no
   llegaban a AA justo por eso—. Sobre el plano, el contraste queda garantizado
   por token: blanco puro da 13.5:1 y el más apagado de la sección, 7.8:1. */
.respaldo { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.respaldo__inner { position: relative; z-index: 1; }
.respaldo h2 { color: #fff; }
.respaldo .lead { color: rgba(255, 255, 255, 0.78); }

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 1.2rem + 3vw, 3.5rem) clamp(1rem, 2vw, 2.5rem);
  padding-top: clamp(0.5rem, 1vw, 1.5rem);
}
/* TRES columnas, no cuatro: la cifra de vendedores se retiro a pedido del
   cliente (feedback 02/09/2026). Si vuelve, esto vuelve a repeat(4). */
@media (min-width: 800px) { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.figure { display: grid; gap: 0.5rem; }
.figure__n {
  color: #fff;
  font-family: var(--f-display);
  font-size: var(--t-figure);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.figure__l {
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.85;
  text-transform: uppercase;
}
/* 0.72, no 0.44: sobre --ink el 0.44 daba 3.11:1 contra los 4.5:1 que pide AA a
   11.5px. Con 0.72 sube a 7.78:1. */
.figure__l em { font-style: normal; color: rgba(255, 255, 255, 0.72); }

/* 12.2 A QUIEN ABASTECEMOS - la mitad clara
   ..........................................................................
   Los cuatro segmentos y las distribuciones, mas el CTA que cierra el bloque
   institucional. En plano claro los dos suben de calidad: los nombres de rubro
   van en --ink en vez de blanco-alpha, y los logos -que son artwork oscuro sobre
   transparente- se muestran tal cual, sin el brightness(0) invert(1) que hacia
   falta para pasarlos a blanco. Se leen mejor aca que donde estaban.
   -------------------------------------------------------------------------- */
.alcance { background: var(--cream-warm); }

.segs__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem) clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 620px) { .segs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .segs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.segs__list li { display: grid; gap: 0.3rem; }
.segs__list b {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 0.002em;
}
.segs__list em {
  color: var(--mineral-text);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.alcance .cta-row { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--cream); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
  .faq__head { position: sticky; top: calc(var(--header-h) + 5vh); }
}

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item h3 { margin: 0; font-size: inherit; font-weight: inherit; text-transform: none; }

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.002em;
  transition: color 0.4s var(--ease);
}
.acc__q:hover { color: var(--accent); }

.acc__q i { position: relative; flex: none; width: 13px; height: 13px; }
.acc__q i::before,
.acc__q i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}
.acc__q i::after { transform: rotate(90deg); }
.acc__q[aria-expanded="true"] i::after { transform: rotate(0deg); opacity: 0; }
.acc__q[aria-expanded="true"] { color: var(--accent); }

.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.acc__a > div { overflow: hidden; }
.acc__a > div > p {
  padding-bottom: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  padding-right: clamp(0rem, 4vw, 3rem);
  color: var(--mineral-text);
  font-size: var(--t-small);
  line-height: 1.75;
}
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a strong { color: var(--ink-soft); font-weight: 500; }

/* --------------------------------------------------------------------------
   14. CONTACTO
   -------------------------------------------------------------------------- */
.contacto { background: var(--cream-warm); }
.contacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .contacto__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.contacto__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.contacto__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 939px) { .contacto__media { aspect-ratio: 16 / 10; } }

/* Formulario: lo sirve GHL dentro de un iframe cross-origin, así que acá sólo
   vive la caja. Todo lo de adentro —grilla de dos columnas, versalitas de las
   etiquetas, hairlines de los campos, pill del botón— se estila con el CSS que
   se pega en el builder de GHL. La copia versionada de ese CSS está en
   assets/css/ghl-form.css, que NO se enlaza desde el HTML: es la fuente de verdad
   para volver a pegarlo si alguien lo pisa en el CRM. Ver README §5. */
.form-embed {
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  padding-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  border-top: 1px solid var(--line);
}

/* El fondo del iframe se pinta del lado de GHL con el mismo --cream-warm de la
   sección, así que el embed no se lee como una tarjeta pegada encima. Éste es
   el mismo color, por si el iframe tarda en pintar. */
.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 516px;
  border: 0;
  border-radius: 0;
  background: var(--cream-warm);
  color-scheme: light;
}

/* Microcopy debajo del embed: quita la duda de "¿esto es para mí?" sin entrar
   al iframe, donde no llega nuestro CSS. */
.form__micro {
  margin-top: 0.9rem;
  color: var(--mineral-text);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}

.contacto__data {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.contacto__data li { display: flex; align-items: center; gap: 0.7rem; color: var(--mineral-text); font-size: var(--t-small); }
.contacto__data svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.contacto__data a { transition: color 0.35s var(--ease); }
.contacto__data a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. FOOTER Y MODAL
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem) clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  /* --accent-deep, no --accent. El footer es el ultimo plano de la pagina y con
     Caribou pleno quedaba casi tan claro como la seccion de contacto que tiene
     encima: el pie no cerraba, seguia. Caribou oscurecido lo asienta y ademas
     libera el techo de contraste que tenia el plano anterior.
        blanco sobre --accent      #7B6856  ->  5.31:1  (techo)
        blanco sobre --accent-deep #5F5044  ->  7.73:1
     No es un tono nuevo: es el mismo token que ya usaba el hover del boton, asi
     que la paleta no crece. Y como sigue siendo un derivado de marca ya
     existente, no se toca ningun hex nuevo. */
  background: var(--accent-deep);
  /* Se mantiene 0.94 y NO se baja a 0.68 como en la landing hermana. Con el plano
     anterior era obligatorio —el techo de 5.31:1 no daba margen—; ahora que hay
     7.73:1 podria bajarse, pero la jerarquia de este bloque ya esta resuelta por
     cuerpo, tracking y caja alta, y apagar el cuerpo solo lo haria mas dificil de
     leer sin agregar nada. El h2 se distingue por ser diminuto, espaciado y en
     versalita, no por ser mas apagado. */
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--t-small);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.6rem + 2.5vw, 3.5rem);
}
@media (min-width: 700px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tres columnas, no cuatro: se retiro «Otras unidades», que enlazaba a las otras
   dos unidades de la casa. La marca se queda con el ancho que libera la cuarta,
   asi que la fila sigue cerrando en la misma linea que el resto de la pagina. */
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1.4fr 1fr 1.3fr; } }

.footer__logo { width: clamp(130px, 14vw, 175px); height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.footer__brand p { max-width: 38ch; margin-top: 1.1rem; line-height: 1.68; }

.footer h2 {
  margin-bottom: 1rem;
  /* 0.94, igual que el cuerpo: ver la nota de arriba. */
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer__nav ul, .footer__col ul { display: grid; gap: 0.6rem; }
.footer a { transition: color 0.35s var(--ease); }
.footer a:hover { color: #fff; }

/* .footer__cross y .footer__cross-note se retiraron con la columna «Otras
   unidades». Si vuelven a hacer falta los links cruzados entre unidades, el
   componente esta en el CSS de las dos landings hermanas. */

/* Centrada y en una sola linea: al retirarse el boton de «Politica de
   privacidad» quedaba un unico elemento empujado contra el borde izquierdo por
   el space-between, que sin su contrapeso se leia como un error de alineacion. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: clamp(1.2rem, 0.9rem + 1.2vw, 1.9rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-align: center;
}
.footer__bottom strong { font-weight: 600; color: #fff; }
/* .footer__legal se retiro junto con el boton de «Politica de privacidad». El
   modal en si NO se toco: sigue en 15.1, sigue en el HTML con hidden y su JS es
   un no-op mientras no exista el disparador. Reponer el boton alcanza. */

/* 15.1 Modal ---------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--gutter); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(24, 21, 19, 0.6); }
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(80vh, 760px);
  background: var(--cream);
  box-shadow: 0 40px 100px -30px rgba(24, 21, 19, 0.55);
  animation: modal-in 0.4s var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(18px); } }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) clamp(1.2rem, 1rem + 1.4vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-size: var(--t-h3); font-weight: 500; }
.modal__x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.modal__x svg { width: 16px; height: 16px; }
.modal__x:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.modal__body {
  overflow-y: auto;
  padding: clamp(1.2rem, 1rem + 1.4vw, 2rem);
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--mineral-text);
  overscroll-behavior: contain;
}
.modal__body h3 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.modal__body strong { color: var(--ink); font-weight: 500; }
.modal__date { margin-top: 2em; color: var(--mineral-text); font-size: var(--t-micro); }

/* --------------------------------------------------------------------------
   16. MARCA DEL WIDGET DE WHATSAPP DE GHL
   ..........................................................................
   El widget real de GHL (loader.js al final del <body>) monta un elemento
   <chat-widget> con shadow DOM, así que su interior NO se puede alcanzar con
   selectores desde acá. Sí se puede pintar: todo el componente lee sus colores,
   su tipografía y sus medidas de custom properties --chat-widget-*, y las
   declara sobre :host dentro del shadow. Una regla del documento externa sobre
   el host —esta— gana siempre sobre una regla :host del árbol interno, así que
   alcanza con redeclararlas acá. No hace falta inyectar nada en el shadow.

   Los valores son los del clon que se retiró, que a su vez salían de la
   auditoría de contraste de la página: es el mismo panel de antes, ahora
   conectado al CRM.

   OJO: estos valores pisan al tema cargado en el CRM (Sitios > Chat widget >
   Estilos). Si alguien cambia los colores allá y no se ven, es por esto.
   -------------------------------------------------------------------------- */
chat-widget {
  /* Cabecera: el mismo degradé 270deg Caribou → Caribou oscuro del clon. */
  --chat-widget-header-color: #7B6856;
  --chat-widget-header-darken-color: #5F5044;
  --chat-widget-header-message-text-color: #ffffff;

  /* Burbuja flotante y botones. El verde de WhatsApp que trae GHL por defecto
     (#039855) con texto blanco da 3.73:1, por debajo de los 4.5:1 que pide AA
     a 14px; Caribou da 5.30:1 y además es el color de todos los demás botones
     de la página, así que el panel deja de parecer de otra marca. */
  --chat-widget-bubble-color: #7B6856;
  --chat-widget-button-color: #7B6856;
  --chat-widget-active-color: #5F5044;
  --chat-widget-primary-color: #7B6856;
  --chat-widget-primary-solid-color: #7B6856;

  /* Mensajes: el globo del visitante en Caribou oscuro, el del bot en el gris
     frío del widget. */
  --chat-widget-background-color: #ffffff;
  --chat-widget-sender-message-color: #5F5044;
  --chat-widget-sender-message-text-color: #ffffff;
  --chat-widget-received-message-color: #EEF0F3;
  --chat-widget-received-message-text-color: #1c1c1c;
  --chat-widget-welcome-message-text-color: #1c1c1c;

  /* Gris de los textos de servicio (consentimiento, "Powered by"). El #8a8f98
     del widget sobre blanco da 3.25:1; éste da 4.78:1 y se mantiene en la misma
     familia de gris frío, así que el panel no cambia de aspecto. */
  --chat-widget-system-message-text-color: #6b7280;

  /* Avatar: fondo blanco y anillo Caribou, como el del clon. */
  --chat-widget-avatar-background-color: #ffffff;
  --chat-widget-avatar-border-color: #7B6856;

  --chat-widget-font-family: var(--f-display);

  /* Medidas del panel del clon. En mobile el propio widget se lleva la caja a
     max-width:95%, así que este ancho sólo manda en desktop. */
  --chat-widget-width: 400px;
  --chat-widget-max-height: min(760px, 85vh);
}

/* --------------------------------------------------------------------------
   17. ACCESIBILIDAD Y MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal,
  .js .reveal-img { opacity: 1 !important; transform: none !important; }
  .js .reveal-img img,
  .js .reveal-img .ph { transform: none !important; }
  .js .hero__title .line > span { transform: none !important; }

  .hero__scroll span { animation: none; }
  .preloader { display: none; }

  /* El marquee de clientes se detiene y queda mostrando la primera vuelta. La
     regla global de arriba le pone duración 0.001ms a TODA animación, lo que a
     un bucle infinito lo dejaría vibrando; acá se apaga del todo. La segunda
     pista se oculta para que no queden los cinco nombres repetidos al lado. */
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

@media print {
  .preloader, .header, .topbar, .hero__scroll, .modal, chat-widget { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal, .reveal-img { opacity: 1 !important; transform: none !important; }
}