/* ==========================================================================
   Sahade & Cía — Telas Mayoristas
   Sistema visual derivado de BRESCIA_BRAND_BOOK.pdf
   Colores: Mineral Hulett #706f6f · complementario #0F2648 — no se derivan variantes
   Tipografías: Avone Regular (pendiente) · Abhaya Libre · Roboto
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca — brandbook. NO agregar variantes de estos dos colores:
     no se derivan tonos intermedios, oscurecidos ni aclarados. Si un elemento
     no contrasta con el complementario, se resuelve con Mineral Hulett o con
     los acromáticos, nunca modificando el hex de marca. */
  --mineral: #706f6f;           /* Mineral Hulett · principal */
  --accent: #0F2648;            /* Complementario · azul marino */

  /* El complementario es MUY oscuro (~14,4:1 sobre crema): sirve para texto y
     como relleno con texto blanco, pero desaparece sobre las bandas oscuras
     (.figures, footer). Ahí el acento se resuelve con acromáticos claros. */
  --accent-veil: rgba(15, 38, 72, 0.18);   /* velos y anillos de foco */

  /* Acromáticos derivados (permitidos por el brandbook) */
  --ink: #2f2e2e;
  --ink-soft: #3d3c3c;
  --mineral-mid: #8a8989;
  --mineral-pale: #d8d6d3;
  --cream: #faf9f7;
  --cream-warm: #f4f2ee;
  --paper: #ffffff;
  /* Gris profundo: quedo solo como fondo de respaldo de la banda de cifras, por si
     la foto no carga. El footer paso al complementario el 19/08/2026. */
  --deep-2: #262523;

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

  /* Tipografía — BRESCIA_BRAND_BOOK: Avone Regular · Abhaya Libre · Roboto.
     Montserrat NO está en el manual: se retiró en la corrección del 18/08/2026.
     No agregar familias que no estén en estas tres.
     --f-sans queda como sustituto de Avone (pendiente el archivo de fuente) y como
     tipografía de UI; es la misma Roboto que --f-dense, se mantienen separadas para
     poder enchufar Avone en --f-sans sin tocar el texto denso. */
  --f-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Abhaya Libre", Georgia, "Times New Roman", serif;
  --f-dense: "Roboto", system-ui, sans-serif;
  /* Titulares. Poppins entra a pedido del cliente y NO esta en el brandbook
     (ver README). Roboto queda de fallback para que, si algun dia se vuelve al
     manual, alcance con cambiar esta linea. */
  --f-display: "Poppins", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --t-overline: clamp(0.66rem, 0.62rem + 0.16vw, 0.75rem);
  --t-small: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --t-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --t-lead: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  --t-h3: clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --t-h2: clamp(1.7rem, 1.32rem + 1.6vw, 2.65rem);
  --t-h1: clamp(2.1rem, 1.5rem + 2.5vw, 3.5rem);
  --t-figure: clamp(2.3rem, 1.6rem + 3vw, 3.8rem);

  /* Ritmo */
  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  --section-y: clamp(4rem, 2.5rem + 7vw, 8.5rem);
  --shell: 1240px;
  --pad-x: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  /* Nada cuadrado: campos, tarjetas y formularios van redondeados (19/08/2026, a
     pedido del cliente). El --radius de 3px que traia el sistema dejaba todo con
     esquina viva y obligaba a radios sueltos, como los 18px de .need. */
  --radius: 12px;          /* campos, tarjetas chicas, muestras */
  --radius-lg: 18px;       /* superficies grandes: formulario, modal, fotos */
  --radius-pill: 999px;
  /* Alto del header (barra utilitaria + fila principal): lo usa el padding del hero */
  --header-h: 100px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}

/* En desktop el header crece: barra utilitaria 35px + fila principal 72px */
@media (min-width: 900px) {
  :root { --header-h: 108px; }
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis controla el scroll cuando está activo */
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;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }

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

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

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

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

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Tipografía de apoyo
   -------------------------------------------------------------------------- */

/* Sustituto de Avone Regular (no disponible en Google Fonts):
   Roboto Light con tracking abierto para titulares y frases cortas. */
.overline {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  color: var(--mineral);
  font-size: var(--t-overline);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.overline::before {
  content: "";
  width: clamp(20px, 3vw, 38px);
  height: 1px;
  background: var(--accent);
}
.overline--center { justify-content: center; }
/* Sobre banda oscura el complementario #0F2648 no se ve: el guión pasa a acromático claro */
.overline--light { color: rgba(255, 255, 255, 0.72); }
.overline--light::before { background: rgba(255, 255, 255, 0.55); }

/* Frases complementarias — Abhaya Libre, del brandbook */
.lead {
  max-width: 54ch;
  color: var(--mineral);
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
.lead strong { color: var(--ink); font-weight: 700; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 + .lead { margin-top: 1.35rem; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.02em 1.8em;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* CTA primario: relleno del complementario #0F2648 con texto blanco (~15,1:1).
   El complementario es oscuro, así que acá va texto blanco y NO tinta (1,1:1).
   En hover pasa a Mineral Hulett, el otro color del manual, con blanco (4,6:1). */
/* El hover ya no pasa a Mineral Hulett (ese gris apagaba el CTA). Ahora se
   mantiene el complementario y el cambio lo hace un barrido de luz sobre el
   relleno mas un halo mas profundo: solo blanco translucido, sin color nuevo. */
.btn--wa {
  --btn-bg: var(--accent);
  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 58%);
  box-shadow: 0 1px 2px rgba(47, 46, 46, 0.16), 0 12px 26px -14px rgba(15, 38, 72, 0.55);
  transition: background var(--dur) var(--ease), background-image var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--wa:hover {
  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 62%);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(47, 46, 46, 0.16), 0 20px 42px -16px rgba(15, 38, 72, 0.75);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Secundario del hero: solo el borde del complementario sobre vidrio esmerilado,
   asi no tapa la tela; en hover se pinta entero de #0F2648. Reemplaza al
   .btn--light, cuyo relleno blanco y hover a tinta quedaban pesados sobre el video. */
.btn--outline {
  --btn-bg: rgba(250, 249, 247, 0.3);
  --btn-fg: var(--accent);
  border: 1.5px solid var(--accent);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.btn--outline:hover {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -18px rgba(15, 38, 72, 0.62);
}

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

.btn--sm { padding: 0.8em 1.25em; }
.btn:active { transform: scale(0.975); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Micro-copy junto al CTA: el mensaje que corrige la landing vieja */
.micro {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.1rem;
  color: var(--mineral);
  font-size: var(--t-small);
  font-weight: 500;
}
.micro svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.micro--light { color: rgba(255, 255, 255, 0.68); }
/* Idem: sobre foto/banda oscura el acento va acromático, no el complementario */
.micro--light svg { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: rgba(250, 249, 247, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), transform 0.5s var(--ease);
}
.site-header.is-stuck {
  background: rgba(250, 249, 247, 0.95);
  box-shadow: 0 14px 34px -30px rgba(47, 46, 46, 0.75);
}
.site-header.is-hidden { transform: translateY(-102%); }

/* Barra utilitaria superior — se colapsa al scrollear */
.topbar {
  overflow: hidden;
  max-height: 42px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-warm);
  transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.site-header.is-stuck .topbar {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
}
.topbar p {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  color: var(--mineral);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__region { display: inline-flex; align-items: center; gap: 0.6em; }
.topbar__sep {
  width: 14px; height: 1px;
  background: var(--mineral-pale);
  flex: none;
}
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  transition: color var(--dur) var(--ease);
}
.topbar__contact svg { width: 12px; height: 12px; color: var(--accent); flex: none; }
.topbar__contact a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .topbar__region { display: none; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 66px;
}

/* Logo institucional. Respeta el área de protección del brandbook
   (1 módulo = 1/15 del ancho) con el padding vertical del enlace. */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; }
.brand__logo {
  width: auto;
  height: clamp(24px, 1.2rem + 1.4vw, 38px);
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--mineral);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.brand__text { display: grid; gap: 0.15rem; }
.brand__name {
  color: var(--ink);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand__tag {
  color: var(--mineral);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 0.6rem + 1.3vw, 2.2rem); }
.nav__link {
  position: relative;
  padding-block: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.header__cta { display: none; }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* Panel móvil */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  /* minmax(0,1fr) evita que el CTA con nowrap agrande la columna y desborde */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 0.4rem;
  padding: var(--pad-x);
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__close {
  position: absolute;
  top: 16px; right: var(--pad-x);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}
.mobile-nav__close svg { width: 20px; height: 20px; }
.mobile-nav a {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(1.35rem, 1rem + 2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.mobile-nav .btn { margin-top: 1.6rem; justify-content: center; white-space: normal; text-align: center; }

@media (min-width: 900px) {
  /* Logo a la izquierda · navegación centrada · CTA a la derecha */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 72px;
  }
  .nav { display: block; justify-self: center; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Video de tela a sangre + overlay "mesh" (velos crema, reticula y burbujas
   desenfocadas). Referencia de composicion: orbitthreads.com.
   Orden de capas: video (-2) < velos (::after del media) < reticula < burbujas
   (-1) < contenido (1). */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Pantalla completa. svh y no vh en mobile: con vh el navegador cuenta la
     altura sin la barra de direcciones y el hero queda mas alto que la pantalla. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(2.2rem, 1.4rem + 4vw, 5rem));
  padding-bottom: clamp(3rem, 2rem + 5vw, 6.5rem);
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

/* Capa 1 — video. El background es el primer frame del propio video
   (assets/images/hero-fabric-poster.jpg, 480px): tapa el hueco mientras carga
   y queda como fondo definitivo si el video no se descarga. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--cream) url("../images/hero-fabric-poster.jpg") center / cover no-repeat;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
/* main.js §4 marca is-playing en el primer frame reproducido */
.hero__video.is-playing { opacity: 1; }

/* Velos crema: diagonal (texto legible a la izquierda, tela visible a la derecha)
   + remate inferior para empalmar con la banda de marcas. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Macro de lino en gris medio: crema casi opaco sobre la columna de texto y
       apertura progresiva hacia la derecha, donde el tejido se ve entero. Mismo
       reparto que la referencia. */
    linear-gradient(100deg,
      rgba(250, 249, 247, 0.97) 0%,
      rgba(250, 249, 247, 0.9) 26%,
      rgba(250, 249, 247, 0.7) 48%,
      rgba(250, 249, 247, 0.38) 72%,
      rgba(250, 249, 247, 0.1) 100%),
    /* remate inferior, para empalmar con la banda de marcas */
    linear-gradient(0deg,
      rgba(250, 249, 247, 0.4) 0%,
      rgba(250, 249, 247, 0) 38%);
}

/* Capa 2 — mesh */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Mancha de color anclada a las esquinas. En la referencia esto venia dentro de la
   propia imagen de fondo (hero-mesh-blue.jpg); aca se hace con dos radiales.
   Se hace asi y no solo con las burbujas porque una burbuja circular colocada en
   la esquina queda casi toda fuera del recorte del hero: entraba un borde
   desenfocado y el azul no se leia. Anclada a 100% 0% no se corre ni se recorta. */
.hero__mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 58% at 100% 0%,
      rgba(15, 38, 72, 0.62) 0%,
      rgba(15, 38, 72, 0) 72%),
    radial-gradient(48% 48% at 0% 100%,
      rgba(15, 38, 72, 0.16) 0%,
      rgba(15, 38, 72, 0) 70%);
}

/* Burbujas en degrade: una densa arriba a la derecha y una tenue abajo a la
   izquierda, detras del titular. Las dos son el complementario translucido: no hay
   color nuevo, solo opacidad. */
.hero__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  filter: blur(80px);
  animation: hero-float 14s ease-in-out infinite;
  will-change: transform;
}

/* La mancha azul de la esquina superior derecha, como en la referencia.
   El complementario es un azul muy oscuro y poco cromatico: al 26% sobre el gris
   del lino no se leia como azul, solo oscurecia. Va mas opaca, mas chica y mas
   metida en la esquina, arriba del titular, para que tinte sin robarle contraste. */
/* Encima de la mancha van las dos burbujas, que son las que se mueven: le dan
   vida al degrade sin cargar el color. */
.hero__blob--navy {
  top: -22%;
  right: -6%;
  width: min(46vw, 480px);
  background: var(--accent);
  opacity: 0.2;
}

.hero__blob--haze {
  bottom: -20%;
  left: -10%;
  width: min(52vw, 480px);
  background: var(--accent);
  opacity: 0.1;
  animation-delay: -6s;
}

@keyframes hero-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

.hero__inner { position: relative; z-index: 1; }

/* Poppins no tiene eje de ancho variable, asi que se fue el font-stretch que
   condensaba el titular en Roboto. El H1 se acorto en el copy en vez de apretarlo. */
.hero h1 {
  max-width: 24ch;
  margin-bottom: clamp(1.1rem, 0.8rem + 1vw, 1.7rem);
  font-size: clamp(2.3rem, 1rem + 5.2vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Segunda linea: sigue siendo Roboto Black italica, pero en vez de un plano de
   #0F2648 lleva un degrade entre los dos colores del manual (complementario ->
   Mineral Hulett). No hay color nuevo: son los dos hex de marca, sin variantes.
   El color plano queda como fallback donde no haya background-clip: text. */
.hero h1 em {
  display: block;
  color: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* El degrade va de Mineral al complementario, y no al reves, por contraste: el
   fondo se oscurece hacia la derecha (ahi la tela se ve casi sin velo), asi que el
   texto se oscurece con el. Al reves, el gris caia sobre el azul de la tela y
   quedaba en 2,4:1, debajo del 3:1 que pide WCAG AA para texto grande. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background-image: linear-gradient(96deg, var(--mineral) 0%, var(--accent) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* La bajada ahora respira a lo ancho (antes 42ch) */
.hero__lead {
  max-width: 60ch;
  color: var(--ink-soft);
}

.hero .cta-row { margin-top: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); }

/* En pantallas angostas el video pasa a ser un fondo velado a lo alto */
@media (max-width: 760px) {
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(250, 249, 247, 0.93) 0%,
      rgba(250, 249, 247, 0.85) 44%,
      rgba(250, 249, 247, 0.5) 100%);
  }
  .hero__blob { filter: blur(60px); }
}

/* Sin movimiento: burbujas quietas y video congelado (main.js ni lo descarga) */
@media (prefers-reduced-motion: reduce) {
  .hero__blob,
  .footer__blob { animation: none; }
  .hero__video { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Banda de marcas
   -------------------------------------------------------------------------- */
/* Banda de marcas. Guino textil: un barrido de luz diagonal, como el brillo del
   raso sobre la pieza. Sin reticulas, sin tarjetas y sin separadores: los logos
   van sueltos en un marquee continuo, en gris, para que la banda lea como una
   linea de respaldo y no como cuatro elementos peleandose. */
.brands {
  position: relative;
  overflow: hidden;
  background:
    /* barrido de luz en diagonal, como el brillo del raso sobre la pieza */
    linear-gradient(104deg,
      rgba(255, 255, 255, 0) 4%,
      rgba(255, 255, 255, 0.95) 40%,
      rgba(255, 255, 255, 0.95) 54%,
      rgba(255, 255, 255, 0) 92%),
    /* halo del complementario, muy abierto, para que la banda no quede plana */
    radial-gradient(130% 130% at 50% -10%, rgba(15, 38, 72, 0.09), transparent 60%),
    var(--cream-warm);
}

/* Titular chico y en complementario: la banda es un validador, no una seccion
   con voz propia. Antes competia en tamano con los H2 de las secciones reales. */
.brands__title {
  max-width: 40ch;
  margin: 0 auto;
  padding-block: clamp(2.4rem, 1.7rem + 2.2vw, 3.6rem) clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  color: var(--accent);
  font-size: clamp(0.95rem, 0.88rem + 0.34vw, 1.18rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Marquee ---------------------------------------------------------------- */
.brands__reel {
  padding-bottom: clamp(2.4rem, 1.7rem + 2.2vw, 3.6rem);
  overflow: hidden;
  /* los logos se desvanecen contra los bordes en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* 96s para un desplazamiento lento: la banda acompana, no llama la atencion. */
.brands__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brands-scroll 96s linear infinite;
}

.brands__group { display: flex; align-items: center; }

@keyframes brands-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Los logos van en gris: asi los tres pesan parejo y ninguno le roba el ojo al
   titular. Al pasar el mouse el logo recupera su color, pero la banda no frena.
   Los archivos originales de Vicunha y Santista venian en blanco (invisibles
   sobre esta banda clara): Vicunha se repinto en --ink sobre el SVG y a Santista
   se le repinto el wordmark en el rojo de la marca y se armo el lockup
   horizontal, porque el vertical (147x98) quedaba diminuto al lado de Modelo.
   Va height y no max-height porque los tres archivos vienen a tamanos muy
   distintos (Vicunha 142x52, Modelo 643x105, Santista 327x56) y con max-height
   cada uno se quedaba en el suyo. */
.brands__logo {
  height: clamp(26px, 22px + 0.85vw, 34px);
  width: auto;
  flex: none;
  padding-inline: clamp(1.8rem, 1.1rem + 2.6vw, 3.8rem);
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.brands__logo:hover { filter: grayscale(0); opacity: 1; }

/* Ajuste optico: a la misma altura de caja los tres no pesan igual. Vicunha
   trae aire arriba y abajo dentro del viewBox, asi que se agranda; Santista
   lleva el cuadrado macizo del isotipo y se baja para que no domine la banda. */
.brands__logo[src$="logo-vicunha.svg"] { height: clamp(30px, 25px + 1vw, 40px); }
.brands__logo[src$="logo-santista.png"] { height: clamp(23px, 19px + 0.8vw, 30px); }

/* Sin movimiento: el marquee se queda quieto y se centra lo que haya a la vista */
@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; }
  .brands__reel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   9. Propuesta de valor — banda clara con foto de fondo y parallax
   -------------------------------------------------------------------------- */
/* Tres tarjetas con copy corto (segmento → qué resuelve) sobre la foto de telas.
   El velo es crema y no el complementario (19/08/2026, a pedido del cliente: el
   azul lleno tiraba toda la sección al color de marca y tapaba la tela). Al ser
   un acromático, el velo deja pasar los grises y beiges reales del género y el
   texto vuelve a ir en tinta, como en el resto de la página. */
.propuesta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* El alto de la banda define cuanto recorta el object-fit: cover. Cerca de
     750px en desktop la foto (16:9) entra casi entera y se reconoce la pila de
     telas; con la seccion mas alta quedaba un primerisimo plano borroso. */
  padding-block: clamp(3.5rem, 2.2rem + 4.5vw, 6.5rem);
  background: var(--cream);         /* fondo de respaldo si la imagen no carga */
  color: var(--ink-soft);
}

/* Capa de la imagen: mide 124% del alto y arranca 12% mas arriba, para que el
   desplazamiento del parallax (±8% de su propio alto, en main.js) nunca descubra
   el borde de arriba ni el de abajo. Con 120% el margen quedaba en 3 px. */
.propuesta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.propuesta__bg img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: 62% center;      /* la pila de telas vive a la derecha del encuadre */
  will-change: transform;
}

/* Velo crema, más abierto hacia la derecha: ahí está la pila de telas y no hay
   texto largo encima, así que se la deja respirar. Subió de opacidad el
   19/08/2026 (a pedido del cliente): con el velo más fino la trama de la foto
   competía con las tarjetas de papel translúcido y se perdían contra el fondo. */
.propuesta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(250, 249, 247, 0.93) 0%,
      rgba(250, 249, 247, 0.86) 46%,
      rgba(250, 249, 247, 0.68) 100%);
}

.propuesta__inner { position: relative; z-index: 1; }
.propuesta .section-head { margin-bottom: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); }
/* El overline va acá en el complementario y no en Mineral Hulett: es texto chico
   en mayúsculas y, apoyado directo sobre la foto, en gris quedaba en 3:1. */
.propuesta .overline { color: var(--accent); }

.propuesta__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Tarjeta de papel translúcido: la trama de la tela se sigue insinuando detrás
   pero el copy no depende de lo que haya en la foto. Sin backdrop-filter
   (Firefox viejo) queda el relleno claro y el contraste se mantiene igual. */
.need {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  box-shadow: 0 18px 44px -30px rgba(15, 38, 72, 0.45);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.need:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
  box-shadow: 0 26px 54px -30px rgba(15, 38, 72, 0.55);
}

.need__icon {
  width: 30px;
  height: 30px;
  margin-bottom: clamp(0.9rem, 0.8rem + 0.5vw, 1.25rem);
  color: var(--accent);
}

/* El segmento al que le habla la tarjeta: misma pauta que .overline */
.need__who {
  margin-bottom: 0.7rem;
  color: var(--mineral);
  font-size: var(--t-overline);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.need h3 {
  color: var(--accent);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
}

.need__fix {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.6;
}

.cta-row--center { justify-content: center; }
.propuesta .cta-row { margin-top: clamp(2.2rem, 1.6rem + 1.8vw, 3.4rem); }

/* En mobile la banda queda casi cuatro veces mas alta que ancha: estirar la foto
   sobre todo el bloque la ampliaba hasta perder la tela. La imagen se queda en el
   arranque (recorte vertical, ver el <source> de 760px) y se disuelve en el crema
   antes de las tarjetas, que ya traen su propio fondo. */
@media (max-width: 760px) {
  .propuesta__bg { bottom: auto; height: 66%; }
  .propuesta__bg img { object-position: center; }
  .propuesta::after {
    background:
      linear-gradient(180deg,
        rgba(250, 249, 247, 0.62) 0%,
        rgba(250, 249, 247, 0.76) 28%,
        rgba(250, 249, 247, 0.95) 52%,
        var(--cream) 66%);
  }
  .propuesta .cta-row { flex-direction: column; align-items: stretch; }
  .propuesta .cta-row .btn { justify-content: center; }
}


/* --------------------------------------------------------------------------
   10. Catálogo de telas — carta de muestras
   -------------------------------------------------------------------------- */
/* Formato muestrario: la muestra manda y el nombre va debajo, chico y en
   versalita. Reemplaza a la grilla anterior (foto con el nombre encima, sobre
   un degradado negro), que competia con el hero, y absorbe la seccion
   "Categorias por uso": los cuatro destinos ahora son cuatro renglones en la
   bajada, no cuatro tarjetas con su propio titular.
   El titulo ocupa dos celdas de la primera fila, como en una carta de color:
   con 18 muestras + 2 celdas de titulo la grilla de 5 columnas cierra en 4
   filas exactas y no queda ningun hueco. */
.catalog { background: var(--cream-warm); }

/* Fuera del desktop el titular va arriba, a lo ancho. A partir de 1000px pasa a
   ocupar 3 columnas por 2 filas dentro de la propia carta: con 6 columnas, las
   18 muestras cierran en 4 filas exactas (3 + 3 + 6 + 6) y no queda ningun hueco.
   Con 5 columnas el titular era mas alto que su fila y abria un vacio debajo de
   las tres primeras muestras. */
.catalog__grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.7rem) clamp(0.7rem, 0.5rem + 0.9vw, 1.2rem);
  grid-template-columns: repeat(2, 1fr);
}
.catalog__intro {
  grid-column: 1 / -1;
  align-content: start;
  margin-bottom: clamp(0.6rem, 0.3rem + 1vw, 1.4rem);
}
@media (min-width: 620px) { .catalog__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) {
  .catalog__grid { grid-template-columns: repeat(6, 1fr); }
  .catalog__intro {
    grid-column: span 3;
    grid-row: span 2;
    margin-bottom: 0;
    padding-right: clamp(1rem, 0.5rem + 1.5vw, 2.4rem);
  }
}

.catalog__intro h2 { margin-bottom: 1.1rem; }
.catalog__intro .lead { font-size: clamp(1rem, 0.94rem + 0.32vw, 1.15rem); }

/* Los cuatro destinos de uso, en cuatro renglones: es todo lo que quedo de la
   seccion de usos. El resto de ese contenido ya vivia en el FAQ.
   Va como <dl> en dos columnas para que los destinos queden alineados entre si;
   con etiquetas en linea, "Uso profesional" desalineaba al resto. */
.catalog__uses {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.1rem;
  margin: clamp(1.4rem, 1rem + 1.2vw, 2.1rem) 0 0;
  padding-top: clamp(1.2rem, 0.9rem + 1vw, 1.8rem);
  border-top: 1px solid var(--line);
}
.catalog__uses dt {
  color: var(--ink);
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
.catalog__uses dd {
  margin: 0;
  color: var(--mineral);
  font-size: var(--t-small);
  line-height: 1.45;
}

/* Muestra. Es un enlace a WhatsApp con el nombre de la tela ya escrito: la
   consulta arranca desde la propia grilla y no hace falta bajar al formulario. */
/* La muestra abre la caja de luz, ya no dispara WhatsApp directo: el cursor de
   lupa reemplaza a la pastilla "Consultar" que antes aparecia en hover. */
.swatch { display: block; cursor: zoom-in; }
.swatch__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mineral-pale);
  aspect-ratio: 1;
  box-shadow: 0 1px 2px rgba(47, 46, 46, 0.05);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.swatch img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.9s var(--ease);
}
.swatch:hover .swatch__frame,
.swatch:focus-visible .swatch__frame {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -24px rgba(47, 46, 46, 0.6);
}
.swatch:hover img { transform: scale(1.07); }

.swatch__name {
  display: block;
  margin-top: 0.7rem;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.swatch:hover .swatch__name { color: var(--accent); }

.catalog__note {
  max-width: 62ch;
  margin-top: clamp(1.8rem, 1.3rem + 1.4vw, 2.8rem);
  color: var(--mineral);
  font-family: var(--f-serif);
  font-size: var(--t-small);
}
.catalog__note strong { color: var(--ink); font-weight: 700; }

.catalog .cta-row { margin-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }

/* --------------------------------------------------------------------------
   11. Respaldo — cifras sobre foto de telas
   -------------------------------------------------------------------------- */
/* Antes la banda era un color plano con el cuadriculado de .weave encima. Ahora
   el fondo es una foto de telas plegadas bajo un velo oscuro, y las celdas son
   paneles translucidos: la cifra sigue en blanco puro y la foto se ve alrededor. */
.figures {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--deep-2);
  overflow: hidden;
}
.figures__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.figures__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Velo: sin esto el texto blanco no llega al contraste minimo sobre la foto. */
.figures::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(38, 37, 35, 0.84) 0%, rgba(38, 37, 35, 0.6) 48%, rgba(38, 37, 35, 0.88) 100%),
    radial-gradient(120% 90% at 15% 0%, rgba(15, 38, 72, 0.42), transparent 68%);
}
.figures__inner { position: relative; }
.figures h2 { color: #fff; }
.figures .lead { color: rgba(255, 255, 255, 0.7); }

.figures__grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .figures__grid { grid-template-columns: repeat(4, 1fr); } }

.figure {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem) clamp(1rem, 0.8rem + 1vw, 1.8rem);
  background: rgba(30, 29, 27, 0.42);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: background var(--dur) var(--ease);
}
.figure:hover { background: rgba(30, 29, 27, 0.24); }
.figure__value {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  min-height: var(--t-figure);
  color: #fff;
  font-size: var(--t-figure);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1;
}
.figure__value b { font-weight: 300; }
/* El "+" de "+50 tipos" va como pseudo-elemento del <b>: el contador de
   main.js §6 pisa el textContent en cada frame y se lo llevaría puesto. */
.figure__value--plus b::before { content: "+"; }
/* "Exclusivo" no es una cifra: va en Abhaya Libre en cursiva para que la fila
   no lea como si faltara un numero. */
.figure__value--word {
  align-items: flex-end;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(var(--t-figure) * 0.66);
}
/* Unidad de la cifra: va sobre la banda oscura, así que acromático claro
   en lugar del complementario (que ahí sería ilegible). */
.figure__value .u { color: rgba(255, 255, 255, 0.72); font-size: 0.42em; font-weight: 500; letter-spacing: 0; }
.figure__label {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--t-small);
  line-height: 1.5;
}
.figure__label b { display: block; color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Contacto / formulario  (desacoplado — reemplazable por iFrame GHL)
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  column-gap: clamp(2rem, 1.4rem + 3vw, 4rem);
  row-gap: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  align-items: start;
}
@media (min-width: 940px) { .contact__grid { grid-template-columns: 0.92fr 1.08fr; } }

.contact { background: var(--paper); }
.contact__aside .lead { margin-top: 1.35rem; }

/* Los datos pasaron de lista tipografica a tarjetas accionables: cada renglon
   es un enlace (mapa, llamada, WhatsApp) con su icono en un disco. Antes eran
   tres lineas de texto muerto al lado de un formulario que se llevaba todo. */
.contact__list { display: grid; gap: 0.6rem; margin-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }
.contact__list a {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact__list a:hover {
  border-color: var(--accent-veil);
  background: var(--paper);
  transform: translateX(4px);
  box-shadow: 0 16px 34px -28px rgba(47, 46, 46, 0.7);
}
.contact__ico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.contact__ico svg { width: 17px; height: 17px; }
.contact__ico--wa {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.contact__list a:hover .contact__ico {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.contact__data {
  display: grid;
  gap: 0.1rem;
  color: var(--mineral);
  font-size: 0.8rem;
  line-height: 1.4;
}
.contact__data b {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Foto del deposito: la columna izquierda terminaba en un vacio largo frente a
   la tarjeta del formulario, que es bastante mas alta. */
/* Banda al pie de la seccion, a lo ancho de las dos columnas. Lleva encima la
   promesa operativa: asi cierra el bloque con un mensaje y deja de leerse como
   una foto decorativa colgada al final (19/08/2026, a pedido del cliente). */
.contact__photo {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.contact__photo img {
  width: 100%;
  aspect-ratio: 1800 / 504;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease);
}
.contact__photo:hover img { transform: scale(1.04); }

/* Panel de papel translucido sobre la foto, del mismo material que las tarjetas
   de la seccion "Por que elegirnos". La foto es muy clara, asi que el texto va en
   tinta y el panel aporta el contraste. */
.contact__photo-card {
  position: absolute;
  left: clamp(1rem, 0.6rem + 1.6vw, 2.4rem);
  bottom: clamp(1rem, 0.6rem + 1.6vw, 2.4rem);
  width: min(40ch, 46%);
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  box-shadow: 0 20px 48px -30px rgba(15, 38, 72, 0.5);
}
.contact__photo-title {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.94rem + 0.32vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.018em;
}
.contact__photo-text {
  margin-top: 0.45rem;
  color: var(--mineral);
  font-size: var(--t-small);
  line-height: 1.5;
}
.contact__photo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9rem;
  color: var(--accent);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact__photo-link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.contact__photo-link:hover svg { transform: translateX(4px); }

/* En pantallas finas el panel encima taparia casi toda la foto: se apoya debajo,
   y la foto se recorta a 3:2 para que los rollos se sigan reconociendo. */
@media (max-width: 700px) {
  .contact__photo { overflow: visible; }
  .contact__photo picture { display: block; overflow: hidden; border-radius: var(--radius-lg); }
  .contact__photo img { aspect-ratio: 3 / 2; }
  .contact__photo-card {
    position: static;
    width: auto;
    margin-top: 0.9rem;
    background: var(--cream-warm);
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* Slot reemplazable: al llegar la integración de GHL, se sustituye el
   contenido de .form-card por el <iframe> sin tocar el resto del layout. */
.form-card {
  padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(47, 46, 46, 0.03), 0 30px 60px -40px rgba(47, 46, 46, 0.35);
}

.form-grid { display: grid; gap: 1.05rem; }
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.4rem; }
.field label {
  color: var(--ink);
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field label .opt { color: var(--mineral-mid); font-weight: 400; letter-spacing: 0.06em; }
.field input {
  width: 100%;
  padding: 0.86em 0.95em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--mineral-mid); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--accent-veil);
}
.field input:user-invalid { border-color: #b4544a; }
.field__error { display: none; color: #b4544a; font-size: var(--t-small); }
.field.has-error .field__error { display: block; }
.field.has-error input { border-color: #b4544a; }

.form-card .btn { width: 100%; margin-top: 0.4rem; }
.form-note {
  margin-top: 1rem;
  color: var(--mineral);
  font-size: 0.8rem;
  line-height: 1.5;
}
.form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.form-status {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-size: var(--t-small);
}
.form-status.is-visible { display: block; }
.form-status--ok { background: rgba(15, 38, 72, 0.09); color: var(--accent); }
.form-status--err { background: rgba(180, 84, 74, 0.12); color: #94433a; }

/* --------------------------------------------------------------------------
   13. FAQ — Roboto para texto denso (brandbook)
   -------------------------------------------------------------------------- */
.faq { background: var(--cream-warm); }
.faq__grid { display: grid; gap: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); align-items: start; }
@media (min-width: 940px) { .faq__grid { grid-template-columns: 0.8fr 1.2fr; } }

/* El aside se queda fijo mientras el acordeon corre al lado: en desktop la
   columna izquierda terminaba a un tercio y dejaba media pantalla vacia. */
@media (min-width: 940px) {
  .faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.faq__list { border-top: 1px solid var(--line-strong); }
/* Sin relleno: la pregunta abierta se marca con el filete de acento, el numero en
   complementario y el titular en color. Los rellenos blancos recortaban una caja
   sobre el crema y ensuciaban la columna. */
.faq__item {
  position: relative;
  border-bottom: 1px solid var(--line-strong);
}
/* Filete de acento que crece desde la izquierda al abrir: marca cual esta
   activa sin recurrir a un relleno de color. */
.faq__item::before {
  content: "";
  position: absolute;
  left: calc(var(--pad-x) * -0.4);
  top: 0; bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.faq__item.is-open::before { transform: scaleY(1); }

/* Numeracion: le da ritmo a la columna y ubica al lector en una lista larga. */
.faq__num {
  position: absolute;
  top: clamp(1.2rem, 1rem + 0.6vw, 1.62rem);
  left: 0;
  color: var(--mineral-mid);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.faq__item.is-open .faq__num { color: var(--accent); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem) 0.4rem;
  padding-left: 2.6rem;
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(0.98rem, 0.94rem + 0.24vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-align: left;
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__item.is-open .faq__q { color: var(--accent); }

.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--mineral);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::before { background: var(--accent); }
.faq__item.is-open .faq__sign::after { transform: rotate(0deg); background: var(--accent); }

.faq__a {
  overflow: hidden;
  height: 0;
  font-family: var(--f-dense);
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--mineral);
}
.faq__a-inner {
  padding: 0 0.4rem clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem) 2.6rem;
  max-width: 66ch;
}
.faq__a strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
/* Footer en el complementario lleno (19/08/2026, a pedido del cliente; antes era
   el gris profundo --deep-2 con la trama cuadriculada encima). Las burbujas son
   las mismas del hero pero en acromatico claro: sobre el complementario lleno,
   una burbuja del propio complementario no se veria. */
.site-footer {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3.4rem, 2.4rem + 4vw, 5.5rem);
  color: rgba(255, 255, 255, 0.72);
  background: var(--accent);
  overflow: hidden;
}
.footer__blob {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: #fff;
  filter: blur(90px);
  animation: hero-float 18s ease-in-out infinite;
  will-change: transform;
}
.footer__blob--a {
  top: -38%;
  right: -4%;
  width: min(48vw, 460px);
  opacity: 0.12;
}
.footer__blob--b {
  bottom: -34%;
  left: -8%;
  width: min(54vw, 500px);
  opacity: 0.07;
  animation-delay: -8s;
}
/* Logo real en lugar del monograma provisorio "S&C". El archivo es gris
   (#706f6f del manual) y sobre el fondo oscuro quedaba en 2:1, asi que se pasa
   a blanco con filtro: es el mismo logo, no una variante de color de marca. */
.footer__brand { display: block; padding: 0; }
.footer__logo {
  width: auto;
  height: clamp(30px, 1.4rem + 2vw, 46px);
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity var(--dur) var(--ease);
}
.footer__brand:hover .footer__logo { opacity: 1; }

.footer__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  padding-bottom: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
}
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__blurb { margin-top: 1.2rem; max-width: 34ch; font-family: var(--f-serif); font-size: 1.02rem; line-height: 1.5; }

.footer__title {
  margin-bottom: 1.1rem;
  color: #fff;
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer__links { display: grid; gap: 0.65rem; font-size: var(--t-small); }
.footer__links a { transition: color var(--dur) var(--ease); }
.footer__links a:hover { color: #fff; }
.footer__links address { font-style: normal; }

/* Columna de contacto: cada dato con su icono, a pedido del cliente. El icono
   se desplaza junto al texto en hover para que el renglon entero lea como un
   solo objeto clickeable. */
.footer__links--ico { gap: 0.85rem; }
.footer__links--ico a {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  line-height: 1.45;
}
.footer__links--ico svg {
  width: 16px; height: 16px;
  margin-top: 0.18em;
  flex: none;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer__links--ico a:hover svg { color: #fff; transform: translateX(2px); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.socials a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.socials svg { width: 17px; height: 17px; }

.footer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
}
.footer__bar a { text-decoration: underline; text-underline-offset: 2px; }
.footer__bar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   15. Chat de WhatsApp — ajuste de marca sobre el clon de GHL
   -------------------------------------------------------------------------- */
/* El widget vive en assets/css/whatsapp-chat-clone.css, que es copia literal de la
   skill whatsapp-chat-clone-ghl (salvo el @import de Poppins, que la landing ya
   carga). Todo lo de marca se resuelve acá, por fuera de ese archivo, para poder
   reemplazarlo por el embed real de GHL sin arrastrar estos ajustes.

   El color lo maneja WGC_CONFIG desde el index (burbuja, header, globo saliente,
   check de consentimiento y links, todos en el complementario #0F2648). Lo que
   queda acá es lo que la skill trae con valores fijos: el botón de envío en verde
   y la tipografía. Reemplaza al botón flotante propio, que ocupaba esta misma
   esquina y era el único verde WhatsApp que quedaba en la página. */

/* Tipografía de la landing: Roboto para la UI y Poppins sólo en los titulares,
   como en el resto de la página. La skill pone Poppins en todo. */
.wgc-widget { font-family: var(--f-sans); }
.wgc-name,
.wgc-bubble--thanks strong { font-family: var(--f-display); letter-spacing: -0.018em; }

/* El botón de envío viene con un verde fijo (#039855) que WGC_CONFIG no toca:
   pasa al complementario, igual que el CTA primario de la landing. */
.wgc-submit {
  background-color: var(--accent);
  border-radius: var(--radius);
  font-family: var(--f-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Campos y burbuja alineados a los radios del sistema. */
.wgc-form input,
.wgc-form textarea,
.wgc-phone-field { border-radius: var(--radius); }
.wgc-panel { border-radius: var(--radius-lg); }

/* La burbuja pierde la sombra negra genérica y toma el halo del CTA primario. */
.wgc-bubble-btn {
  box-shadow: 0 1px 2px rgba(47, 46, 46, 0.16), 0 14px 30px -14px rgba(15, 38, 72, 0.6);
}
.wgc-bubble-btn:hover {
  box-shadow: 0 1px 2px rgba(47, 46, 46, 0.16), 0 22px 46px -16px rgba(15, 38, 72, 0.75);
}

/* --------------------------------------------------------------------------
   16. Modal de privacidad
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(0.8rem, 2vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(38, 37, 35, 0.6); backdrop-filter: blur(3px); }

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(84vh, 780px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 40px 90px -40px rgba(38, 37, 35, 0.6);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.45s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.9rem) clamp(1.2rem, 1rem + 1.4vw, 2.2rem) 1rem;
  border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); }
.modal__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { background: var(--ink); color: #fff; }
.modal__close svg { width: 18px; height: 18px; }

.modal__body {
  overflow-y: auto;
  padding: clamp(1.2rem, 1rem + 1.4vw, 2rem) clamp(1.2rem, 1rem + 1.4vw, 2.2rem) clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-family: var(--f-dense);
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--mineral);
  overscroll-behavior: contain;
}
.modal__body h3 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.modal__body h3:first-child { margin-top: 0; }
.modal__body p + p { margin-top: 0.7em; }
.modal__body strong { color: var(--ink); }
.modal__body .modal__updated {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   16b. Caja de luz del catalogo
   Comparte .modal (posicion, velo, foco atrapado) y cambia solo el panel: la
   foto manda y no hay cabecera, asi que la cruz va flotando sobre la esquina.
   -------------------------------------------------------------------------- */
/* El ancho tambien se limita por altura (62vh) porque la foto es cuadrada: asi
   entra completa junto con el pie, sin recortar la muestra ni desbordar la
   ventana en pantallas bajas. */
.lightbox__panel {
  position: relative;
  width: min(92vw, 620px, 62vh);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.45s var(--ease);
}
.modal.is-open .lightbox__panel { transform: none; }

.lightbox__figure {
  display: flex;
  margin: 0;                 /* el UA le pone `margin: 1em 40px` a <figure> */
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 40px 90px -40px rgba(38, 37, 35, 0.6);
}
/* La foto de origen mide 640 px: 620 px es el techo. Ampliarla mas la pone
   blanda y en un muestrario la textura es justamente lo que se mira. */
.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--mineral-pale);
}

/* Nombre y CTA en la primera fila, la aclaracion del color abajo cruzando el
   ancho: como columna al lado del boton quedaba en tres renglones cortos. */
.lightbox__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.55rem 1.2rem;
  padding: clamp(0.9rem, 0.7rem + 0.7vw, 1.25rem) clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
}
/* Ubicacion explicita: en el HTML el orden es nombre, aclaracion y CTA, asi que
   con auto-placement el boton caia en una tercera fila estirado a todo el ancho. */
.lightbox__name {
  grid-area: 1 / 1;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox__cta { grid-area: 1 / 2; justify-self: end; }
.lightbox__note {
  grid-area: 2 / 1 / 3 / -1;
  color: var(--mineral);
  font-family: var(--f-dense);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* La cruz va sobre la foto, no sobre el crema: fondo propio para que se lea
   igual arriba de una tela clara o de una marron oscura. */
.lightbox__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  background: rgba(250, 249, 247, 0.92);
  box-shadow: 0 2px 10px -2px rgba(38, 37, 35, 0.45);
}

@media (max-width: 560px) {
  .lightbox__caption { grid-template-columns: 1fr; }
  .lightbox__note { grid-area: 2 / 1 / 3 / -1; }
  .lightbox__cta { grid-area: 3 / 1; justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   17. Reveal (GSAP) — estado inicial con guarda de no-JS
   -------------------------------------------------------------------------- */
html.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
html.js [data-reveal="up"] { transform: translateY(24px); }
html.js [data-reveal="fade"] { transform: none; }

/* --------------------------------------------------------------------------
   18. Accesibilidad — movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .swatch:hover img,
  .swatch:hover .swatch__frame,
  .contact__photo:hover img { transform: none; }
}