/* ==========================================================================
   Sahade & Cía — Landing 2 · Blanquería / Ropa Blanca Mayorista
   ..........................................................................
   REFERENCIA DE DISEÑO: cultiver.com.au
   Medida sobre el sitio real (no a ojo). Lo que se replica:

     · Escala tipográfica plana y silenciosa. Cultiver tiene H2 de 16px y body
       de 12px: los titulares apenas superan al texto. La jerarquía la hace el
       espacio en blanco y la caja alta, no el cuerpo.
     · Tracking POSITIVO en todo lo que va en mayúscula (+0.75px en H2,
       +0.64px en H1). Es la marca de la casa y lo opuesto al tracking negativo
       de una landing tech.
     · Bandas de imagen a sangre (100vw), sin radio, sin sombra, sin borde.
     · Cero "card chrome": las fichas de producto son la foto y abajo el texto.
     · El CTA es un link en versalita subrayado, no un botón.
     · Footer de color plano con columnas de links chicos.

   DOS DESVÍOS DELIBERADOS respecto de la referencia (justificados):

     1. CUERPO +25%. Los 12px de Cultiver son ilegibles para el público de esta
        landing: compradores de comercio de 30 a 65 años (brief §2). Se conservan
        las PROPORCIONES y el tracking de Cultiver, subiendo la escala absoluta.
     2. UN botón macizo (WhatsApp). Cultiver no tiene ninguno, pero structure.md §1
        lo exige y es el único canal de cierre del negocio (brief §6).

   PALETA Y FAMILIAS: intactas, las de sahade.eon.ar (BRESCIA_BRAND_BOOK).
   Lo que cambia son los ROLES tipográficos, y cambian PARA VOLVER a lo que
   define el brief §5: Poppins es display, Abhaya Libre es la bajada serif,
   Roboto es el texto denso. La versión anterior de esta landing los tenía
   invertidos (Abhaya como titular gigante); Cultiver pide exactamente el
   reparto que el brief ya pedía.

   Í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 marcas
     8. Bandas editoriales (a sangre, 2-up y 4-up)
     9. [01] Por qué elegirnos
    10. [02] Catálogo
    11. [03] Respaldo
    12. [04] FAQ
    13. [05] Contacto
    14. Footer y modal
    15. Ajustes del widget de chat (GoHighLevel)
    16. Accesibilidad y motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* 1.1 Paleta — idéntica a sahade.eon.ar. 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;
  --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 — mismas tres familias del sistema, roles del brief §5. */
  --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 — proporciones de Cultiver, magnitud +25%.
     Referencia medida en cultiver.com.au @1440px:
       H1 30px / H2 16px / banda 21px / body 12px / link 10-11px
     Acá, respectivamente: 38 / 20 / 26 / 15 / 11.5. El SALTO entre niveles es
     el mismo; lo que sube es el piso, por legibilidad (ver cabecera). */
  --t-micro: clamp(0.66rem, 0.63rem + 0.12vw, 0.72rem);   /* eyebrow, links quietos */
  --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(0.95rem, 0.9rem + 0.24vw, 1.08rem);
  --t-h2: clamp(1.02rem, 0.94rem + 0.34vw, 1.26rem);      /* ~20px */
  --t-band: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);     /* títulos sobre foto */
  --t-h1: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem);        /* ~38px */
  --t-figure: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);        /* cifras del respaldo */

  /* 1.4 Tracking — positivo, la firma de la referencia */
  --ls-h1: 0.021em;      /* Cultiver: 0.64px sobre 30px */
  --ls-h2: 0.047em;      /* Cultiver: 0.75px sobre 16px */
  --ls-band: 0.03em;     /* Cultiver: 0.63px sobre 21px */
  --ls-micro: 0.16em;
  --ls-body: 0.018em;    /* Cultiver: 0.24px sobre 12px */

  /* 1.5 Ritmo y grilla */
  --gutter: clamp(1.15rem, 6.94vw, 100px);   /* Cultiver: 100px @1440 */
  --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).
     Sin esto cada una de esas piezas se pegaba a su propio borde y la página
     quedaba con tres márgenes distintos por encima de 1440px.
     --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: la referencia no redondea ni 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; }

/* Todos los titulares comparten la misma receta: Poppins, peso liviano, caja
   alta y tracking POSITIVO. La diferencia entre H1, H2 y H3 es sólo de cuerpo
   —igual que en la referencia, donde el H2 son 16px contra 12px de texto. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.22;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.14; letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); letter-spacing: var(--ls-h2); font-weight: 400; }
h3 { font-size: var(--t-h3); letter-spacing: var(--ls-h2); font-weight: 500; }

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: ancho completo, el recurso de layout central de la referencia.
   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 —medido: con
   ese truco, scrollWidth 405 contra clientWidth 374 a 390px de viewport—.
   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 de la referencia: etiqueta + H2 + una sola línea de
   texto + link quieto. Nunca centrada, nunca más de una oración. */
.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. Mantiene la numeración [01] pedida por el brief §5
   (lenguaje Entuitive) dentro del cuerpo diminuto de la referencia. */
.tag {
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem);
  color: var(--mineral);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

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

/* 3.3 QLINK — el CTA de la referencia: versalita diminuta, subrayada con un
   hairline, con la línea que se retrae y vuelve en hover. No es un botón. */
.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. Se reserva para WhatsApp,
   que es el canal de cierre (brief §6). Mismo pill y mismos hex que la landing
   de telas, pero más chico y sin el glow: acá tiene que convivir con una página
   silenciosa, no gritar. */
.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. Igual que en el hero, ambos comparten el eje. */
.cta-row > .qlink.qlink { margin-top: 0; }

/* 3.5 Scroll reveals — fade + slide corto. La referencia es sobria: 18px, no 28. */
.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. */
.line { display: block; }
.line > span { display: block; }

@media (min-width: 700px) {
  .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: 699px) {
  .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-mid);
  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 de 11px que la referencia tiene arriba de
   todo. Acá lleva el dato institucional, igual que en sahade.eon.ar. */
.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, como la referencia. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.75vw, 2.2rem);
  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. La referencia usa el 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); }

@media (max-width: 1024px) {
  .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. El header mide
     64px, así que a 178px de ancho el wordmark queda en ~36px de alto. */
  .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(1.1rem, 3vw, 1.8rem);
    margin: 0;
    padding: calc(var(--header-h) + 8vh) var(--gutter) 8vh;
    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);
  }
  .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.8rem, 2vw, 1.4rem); color: #fff; }
  .nav__cta::after { display: none; }
  .header:has(.nav.is-open) .header__logo img { filter: none; }
}

/* --------------------------------------------------------------------------
   6. HERO
   ..........................................................................
   Anatomía de la referencia, capa por capa:
     1. foto a sangre a 100svh, sin marco ni hairlines
     2. degradé desde abajo, sólo lo necesario para que el texto se lea
     3. bloque único abajo a la izquierda: H1 en caja alta + bajada + CTA
     4. cero micro-datos flotando y cero widgets sueltos sobre la foto
   La foto de este hero tiene la cama CENTRADA y el piso claro, así que el
   degradé inferior no es decorativo: sin él, el blanco sobre la alfombra beige
   no llega a contraste AA. Se mide, no se estima.
   -------------------------------------------------------------------------- */
.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 7.1:1 pero el
   PEOR pixel caía a 1.29:1: el titular cruza la colcha iluminada y ahí el blanco
   desaparecía. El promedio no sirve para decidir esto —lo que se lee mal es el
   peor punto—. Se suma un degradé horizontal que oscurece el tercio izquierdo,
   que es donde vive el texto, y deja limpia la mitad derecha, que es donde vive
   la cama.

   Medido después del cambio, muestreando los rects reales de cada glifo sobre
   la escena compuesta (foto + los dos degradés), en el peor pixel de cada zona:
       H1       5.13:1   (AA grande pide 3:1 · AAA grande pide 4.5:1)
       bajada   6.80:1   (AA normal pide 4.5:1)
       link     12.67:1
   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:
    linear-gradient(to right,
      rgba(24, 20, 17, 0.46) 0%,
      rgba(24, 20, 17, 0.26) 36%,
      rgba(24, 20, 17, 0) 60%),
    linear-gradient(to top,
      rgba(24, 20, 17, 0.58) 0%,
      rgba(24, 20, 17, 0.36) 30%,
      rgba(24, 20, 17, 0.10) 62%,
      rgba(24, 20, 17, 0.14) 100%);
}

.hero__inner { width: 100%; }

/* Medido, no estimado: la línea más larga del H1 ("CON ENVÍO A TODO EL PAÍS.")
   pide 560px a 38.4px en Poppins caja alta. Si el bloque es más angosto, la
   línea wrappea y la máscara de .line revela las dos filas como una sola:
   la animación de entrada se rompe. De ahí el piso de 620px. */
.hero__copy { max-width: min(92vw, 620px); }

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

.hero__sub {
  max-width: 44ch;
  margin-top: clamp(0.9rem, 0.7rem + 0.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.86);
  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);
}

/* 6.1 MUESTRARIO DEL HERO — los colores del Cubrecama Brescia.
   Cultiver no tiene ningún elemento flotando sobre la foto del hero, así que
   esta pieza es un pedido explícito, no la referencia. Sigue en el registro de
   la página —cuadrado, esquina recta, sin sombra, sin marco, epígrafe en
   versalita abajo— pero con el cuerpo que pide un muestrario: tiene que dejar
   ver la trama y el color, no insinuarlos.

   Las cuatro fotos van APILADAS en el mismo cuadro y se cruzan por opacidad
   (main.js §muestrario). Todas cargan en el HTML: son 4 webp de ~140 KB y el
   crossfade no puede esperar a una descarga.

   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. */
.hero__still { display: none; }

@media (min-width: 1024px) {
  .hero__still {
    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 el valor anterior le pisaba el epígrafe
       a 1024px. Medido, no estimado. */
    bottom: clamp(5.75rem, 6vw, 6.5rem);
    z-index: 1;
    display: block;
    margin: 0;
    width: clamp(190px, 17vw, 290px);
  }
  .hero__still-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--mineral-pale);
  }
  .hero__still-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
  }
  /* .is-on ya viene puesta en el HTML sobre la primera foto, así que sin JS el
     bloque se comporta como una imagen fija en lugar de quedar en blanco. */
  .hero__still-img.is-on { opacity: 1; }
  .hero__still:hover .hero__still-img.is-on { transform: scale(1.1); }

  .hero__still-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--f-display);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* El nombre nunca se parte en dos: si no entra junto a los puntos, son los
     puntos los que bajan a la segunda línea. */
  .hero__still-cap > span:first-child { white-space: nowrap; }

  /* Puntos de color: el mismo dato que la foto, pero legible de un vistazo. */
  .hero__still-dots { display: flex; gap: 6px; }
  .hero__still-dots i {
    display: block;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: var(--dot);
    opacity: 0.45;
    transition: opacity 0.5s var(--ease);
  }
  .hero__still-dots i.is-on { opacity: 1; }
}

.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(88svh - var(--bar-h)); }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   7. FRANJA DE MARCAS
   -------------------------------------------------------------------------- */
/* Un solo componente, dos apariciones: #marcas (propias) debajo del hero y
   #distribucion debajo de la banda de dos. Lo que Sahade fabrica y lo que
   distribuye son dos argumentos distintos y se cobran en momentos distintos
   de la página; apilados no se distinguían. La franja no lleva variante: es
   la misma pieza, y lo único que cambia es el rótulo y los logos. */
.marcas { border-bottom: 1px solid var(--line); background: var(--cream); }
.marcas__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 1rem + 2.5vw, 3.5rem);
  padding-block: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}
.marcas__label {
  flex: none;
  color: var(--mineral-mid);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.marcas__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  margin-left: auto;
}
.marcas__list img {
  width: auto;
  height: clamp(17px, 2vw, 24px);
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
}
.marcas__list li:hover img { opacity: 1; filter: none; }

/* Brescia no es un wordmark apaisado como Arcoiris: 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. */
.marcas__list img.marcas__lockup { height: clamp(26px, 3vw, 38px); }

/* Palette y Prata tampoco son wordmarks planos: Palette cuelga un swash por
   debajo de la línea de base y Prata tiene descendente en la "p", así que a la
   misma altura de caja que Arcoiris o Fantasía las letras quedaban un tercio
   más chicas. Mismo criterio que Brescia: se miden por peso óptico. */
.marcas__list img.marcas__tall { height: clamp(22px, 2.7vw, 32px); }

/* En celular el rótulo más cuatro logos no entran en una línea, y con la lista
   empujada a la derecha el que sobraba quedaba colgado solo contra el margen
   izquierdo. Abajo de 700px el rótulo se queda con su propia línea y los logos
   fluyen desde el borde, alineados entre sí. */
@media (max-width: 700px) {
  .marcas__inner { gap: 0.9rem 1.7rem; }
  .marcas__label { flex-basis: 100%; }
  .marcas__list { margin-left: 0; row-gap: 1.1rem; }
}

/* --------------------------------------------------------------------------
   8. BANDAS EDITORIALES
   ..........................................................................
   Los tres formatos que la referencia repite a lo largo de toda la home.
   Todos a sangre, sin gaps entre piezas, 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, como en la
   referencia, donde muchas bandas no llevan una sola palabra. */
.band--titled .band__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 24, 20, 0.55), rgba(28, 24, 20, 0) 58%);
}
/* Foto clara debajo del título: con 0.55 el qlink caía a 3.8:1. Se sube el
   velo y se estira el fade para que el blanco siga en AA sin apagar la foto.
   El fade llegaba al 66%, y al sumar la línea de subtítulo (feedback 6be94ffd)
   el bloque de texto subió ~45px: la bajada se iba a 4.28:1 contra un 4.5:1
   requerido. Se estira el fade al 80% en vez de ennegrecer la base, para no
   apagar la foto. Medido a 1440: título 3.9:1 (26px, texto grande, pide 3),
   bajada 4.8:1 y qlink 6.1:1. */
.band--onLight .band__img::after {
  background: linear-gradient(to top, rgba(28, 24, 20, 0.70), rgba(28, 24, 20, 0) 80%);
}
/* Abajo de 1025px la banda se achica (300px de alto en celular) y el título
   baja de 24px: deja de contar como texto grande y pasa a necesitar 4.5:1, que
   con el degradé de arriba no llegaba (3.6:1 a 390px). Se estira el fade en vez
   de ennegrecer la base, porque el texto acá está más arriba dentro de la banda. */
@media (max-width: 1024px) {
  .band--onLight .band__img::after {
    background: linear-gradient(to top, rgba(28, 24, 20, 0.78), rgba(28, 24, 20, 0) 88%);
  }
}
.band__title {
  color: #fff;
  font-size: var(--t-band);
  letter-spacing: var(--ls-band);
}
.band__lead {
  max-width: 34ch;
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.86);
  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 — la de "SPRING AT HOME / SHOP SPRING BEDDING" */
.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 Split 50/50 imagen + texto — el bloque de "THE CULTIVER ARTS SCHOLARSHIP".
   La imagen llega hasta el borde de la ventana; el texto respeta la grilla. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.split__media { position: relative; margin: 0; min-height: clamp(300px, 48vw, 720px); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Mismo alto de sección que .section: el split es una sección más y tiene que
     abrir y cerrar en la misma línea horizontal que las de arriba y abajo. */
  padding: var(--section-y) var(--gutter);
}
/* En desktop el texto termina en la misma línea que el contenido de .shell */
@media (min-width: 900px) {
  .split__body { padding-right: var(--edge); }
  .split--flip .split__media { order: 2; }
  .split--flip .split__body {
    padding-right: var(--gutter);
    padding-left: var(--edge);
  }
}
.split__body .lead { margin-top: 0.9rem; }
.split__body .qlink,
.split__body .cta-row { margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }

/* --------------------------------------------------------------------------
   9. POR QUÉ ELEGIRNOS
   -------------------------------------------------------------------------- */

/* La foto es apaisada (1672x941) y la columna del split es alta —720x1046 a
   1440px—, así que `cover` sólo deja ver ~39% del ancho del original. Con el
   centro por defecto el recorte parte la cabecera de la cama al medio y no se
   entiende la escena. Encuadre elegido comparando renders: a 40% entran la
   cortina con la luz de la ventana, el cuadro, el velador y el acolchado
   entero. Si se cambia la foto, hay que volver a elegir este número. */
#por-que .split__media img { object-position: 40% 50%; }
.pillars {
  display: grid;
  gap: 0;
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.pillar {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 clamp(0.6rem, 1.2vw, 1rem);
  padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.pillar__n {
  color: var(--mineral-mid);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.pillar h3 { color: var(--ink); }
.pillar p { margin-top: 0.5em; color: var(--mineral); font-size: var(--t-small); line-height: 1.68; }

/* --------------------------------------------------------------------------
   10. [02] CATÁLOGO
   ..........................................................................
   Ficha de producto de la referencia: la foto, y debajo el nombre y una línea.
   Sin recuadro, sin fondo, sin sombra, sin radio. El único movimiento es el
   zoom de la foto al pasar el mouse.
   -------------------------------------------------------------------------- */
.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: 4 / 5;
  overflow: hidden;
  background: var(--cream-warm);
}
.prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.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-mid);
  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);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* En touch no hay hover, así que el "Consultar" se muestra fijo. Pero en la
   grilla de 2 columnas de mobile la ficha mide ~170px y "Consultar ↗" al lado
   del nombre desborda la fila —medido: right 405 contra 374 de viewport útil—.
   Debajo de 640px se oculta: la referencia tampoco pone etiqueta de acción en
   la ficha, y la tarjeta entera sigue siendo un link. */
@media (hover: none) {
  .prod__go { opacity: 1; transform: none; }
}
@media (max-width: 639px) {
  .prod__go { display: none; }
}

.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); font-size: var(--t-small); }

/* --------------------------------------------------------------------------
   11. [03] RESPALDO
   -------------------------------------------------------------------------- */
.respaldo { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.respaldo__bg { position: absolute; inset: -10% 0; z-index: 0; }
.respaldo__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.respaldo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 20, 0.34);
}
.respaldo__inner { position: relative; z-index: 1; }
.respaldo h2 { color: #fff; }
.respaldo .lead { color: rgba(255, 255, 255, 0.76); }

.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);
}
@media (min-width: 800px) { .figures { grid-template-columns: repeat(4, 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.72);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.85;
  text-transform: uppercase;
}
.figure__l em { font-style: normal; color: rgba(255, 255, 255, 0.42); }

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

/* --------------------------------------------------------------------------
   12. [04] FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--cream-warm); }
.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.01em;
  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);
  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; }

/* --------------------------------------------------------------------------
   13. [05] CONTACTO
   -------------------------------------------------------------------------- */
.contacto { background: var(--cream); }
.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 de GHL (iframe). El interior lo pinta el Custom CSS que vive en
   GHL —desde acá no se puede: es otro origen—, así que estas reglas resuelven
   sólo el marco: el hairline superior y el aire que antes daba .form.
   El iframe arranca en 512px (height inline, el que declara GHL) y desde ahí lo
   maneja form_embed.js; min-height evita el colapso a 0 si el script no carga. */
.form-ghl {
  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);
}
.form-ghl iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Transparente a propósito: el Custom CSS de GHL pone en transparent el html,
     el body y el #_builder-form del form, así que lo que se ve entre los campos
     es el crema de la sección, igual que en el <form> nativo. Un fondo blanco
     acá dibujaba una tarjeta que la landing no tiene en ninguna parte. */
  background: transparent;
  /* Piso, NO alto: a dos columnas el form mide 234px y form_embed.js lo ajusta
     solo. El min-height de 512px que había antes le ganaba al script y dejaba
     ~280px de hueco muerto abajo del botón. Los 200px son el colchón para que
     no colapse si el script no carga. */
  min-height: 200px;
}

.form__micro {
  margin-top: 0.9rem;
  color: var(--mineral-mid);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}

/* Los datos de contacto (dirección, teléfono y WhatsApp) se sacaron de
   #contacto el 03/09/2026 a pedido del cliente: estaban repetidos idénticos en
   la columna CONTACTO del footer. El .contacto__data que los pintaba se retiró
   junto con el <ul>. */

/* --------------------------------------------------------------------------
   14. FOOTER Y MODAL
   ..........................................................................
   Bloque de color plano con el wordmark a la izquierda y columnas de links
   diminutos, como la referencia. Ahí el bloque es verde salvia; acá, el
   complementario de marca (Caribou). Sin azul: no está en el manual.
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 5rem) clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  background: var(--accent);
  color: rgba(255, 255, 255, 0.68);
  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)); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; } }

.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;
  color: rgba(255, 255, 255, 0.52);
  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 {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  transition: border-color 0.35s var(--ease);
}
.footer__cross:hover { border-bottom-color: #fff; }
.footer__cross-note { display: block; margin-top: 0.5rem; font-size: var(--t-micro); line-height: 1.6; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  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;
}
.footer__legal {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.35s var(--ease);
}
.footer__legal:hover { color: #fff; }

/* 14.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); }
.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);
  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;
}
.modal__body strong { color: var(--ink); font-weight: 500; }
.modal__date { margin-top: 2em; color: var(--mineral-mid); font-size: var(--t-micro); }

/* --------------------------------------------------------------------------
   15. AJUSTES DEL WIDGET DE CHAT (GoHighLevel)
   ..........................................................................
   El widget se monta en <chat-widget> con shadow DOM, así que una regla normal
   no entra: no hay forma de seleccionar nada de adentro desde este archivo.
   PERO las CUSTOM PROPERTIES sí heredan al shadow tree, y el widget de GHL está
   escrito para eso: pinta todo con var(--chat-widget-*, <fallback>). Los valores
   los define su propio `:host`, y las reglas del árbol externo (este archivo) le
   ganan a `:host`. O sea: seteando las vars acá se pinta el widget entero.

   Verificado en el navegador (03/09/2026): burbuja, barra del header, botón
   «Enviar Whatsapp» y checkbox pasan a Caribou.

   Los hex van literales y no como var(--accent): el `:host` del widget declara
   `all: initial`, y aunque la spec excluye las custom properties de `all`, no
   conviene apoyar la marca del widget en que ese detalle no cambie.
   -------------------------------------------------------------------------- */
chat-widget {
  /* Burbuja flotante y acentos */
  --chat-widget-bubble-color: #7B6856;          /* default GHL: #039855 (verde WhatsApp) */
  --chat-widget-active-color: #7B6856;
  --chat-widget-primary-color: #7B6856;
  --chat-widget-primary-solid-color: #7B6856;
  --chat-widget-button-color: #7B6856;          /* botón «Enviar Whatsapp» */

  /* Barra del header del panel */
  --chat-widget-header-color: #7B6856;          /* default GHL: #00600F */
  --chat-widget-header-darken-color: #5F5044;   /* Caribou oscurecido */
  --chat-widget-header-message-text-color: #ffffff;
  --chat-widget-avatar-border-color: #7B6856;

  /* Burbujas de mensaje */
  --chat-widget-sender-message-color: #7B6856;
  --chat-widget-sender-message-text-color: #ffffff;

  /* Mismas familias que la landing (display + texto denso) */
  --chat-widget-font-family: "Poppins", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tope de z-index: el widget se pinta con position:fixed y un z-index
     altísimo dentro de su shadow root, y así tapaba el modal de privacidad
     (z-index 150). Dándole al host un stacking context propio en 60, el widget
     entero queda por debajo del modal y por encima de la página. */
  position: relative;
  z-index: 60;
}

/* El ícono blanco sobre el verde de WhatsApp daba 1.98:1; sobre el Caribou da
   5.31:1. El cambio lo pidió el cliente por consistencia de marca (27/08/2026,
   cuando el widget era el clon) y de paso arregla el contraste. */

/* --------------------------------------------------------------------------
   16. 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; }
}

@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; }
}