/* ============================================================
   FIRECOOL — CSS global
   ------------------------------------------------------------
   Mundo visual «Catálogo de noche» (decisión 2026-09-07): carbón
   cálido como ground, papel en etiquetas, llama y los 9 modos LED
   como campo de color por acto. Tokens en 3 niveles en :root
   (primitivos → semánticos → componente). Fuera de :root no hay
   ningún color literal: lo vigila stylelint (npm run lint:css).
   DESIGN.md se escribe desde lo construido al cerrar la home (hito 02).
   ============================================================ */

/* ─────────────────────────────────────────
   Tokens
───────────────────────────────────────── */
:root {
  /* ═══ 1. PRIMITIVOS — DESIGN v4 «Fuego y agua» (2026-09-22, aprobado): los únicos literales del CSS ═══ */
  --crema-100: #F7F1E7;   /* suelo */
  --crema-200: #EFE6D8;   /* crema hundido: paneles, campos */
  --crema-300: #D8CBB8;   /* separadores */
  --tinta-900: #22303A;   /* tinta azulada: todo el texto */
  --tinta-950: #16222A;
  --tinta-600: #5C6B75;   /* secundario */
  --agua-900:  #16404A;
  --agua-700:  #1F4E5A;   /* AGUA profunda: bandas, pie, sello, cantos */
  --agua-500:  #1F6F8B;   /* foco */
  --vapor-200: #DCE6E8;   /* vapor: paneles claros */
  --vapor-100: #EDF2F3;
  --brasa-600: #B83A16;
  --brasa-500: #D9481F;   /* BRASA: solo comprar/avanzar */
  --brasa-200: #F6D9C9;   /* tinte de brasa: etiquetas, estados */
  --ok:    #2F8F5B;  --warn: #D9A21F;  --error: #C0392B;
  --blanco: #FFF7EE; --negro: #16222A;
  /* nombres heredados que siguen usando componentes viejos (se van retirando página a página) */
  --carbon-900: var(--agua-700); --carbon-800: var(--agua-900); --carbon-700: var(--agua-700); --carbon-600: var(--agua-500);
  --gris-500: var(--vapor-200); --gris-300: var(--vapor-100);
  --papel-100: var(--crema-100); --papel-200: var(--crema-200); --papel-300: var(--crema-300);
  --llama-300: var(--brasa-200); --llama-500: var(--brasa-500); --llama-600: var(--brasa-600);
  --llama-papel: var(--brasa-600); --agua: var(--agua-700);
  --led-cian: var(--agua-500); --led-morado: var(--agua-700); --led-verde: var(--ok); --led-azul: var(--agua-500);
  --led-amarillo: var(--warn); --led-rosa: var(--brasa-200); --led-rojo: var(--error); --led-naranja: var(--brasa-500); --led-llama: var(--brasa-200);
  --madera-nogal: #6B4A2E; --madera-roble: #C9A16E; --madera-blanco: #F7F4EE; --madera-negro: #2A2522;
  --carbon-rgb: 31 78 90; --carbon-600-rgb: 31 111 139; --tinta-rgb: 34 48 58; --papel-rgb: 247 241 231;
  --llama-rgb: 217 72 31; --llama-600-rgb: 184 58 22; --llama-300-rgb: 246 217 201; --led-cian-rgb: 31 111 139;
  --crema-rgb: 247 241 231; --agua-rgb: 31 78 90;

  /* ═══ 2. SEMÁNTICOS — lo que usan los componentes ═══ */
  --bg:           var(--crema-100);    /* el suelo: crema */
  --bg-2:         var(--crema-200);    /* bloque alterno: crema hundido */
  --bg-3:         var(--vapor-200);    /* tercer nivel: vapor */
  --bg-agua:      var(--agua-700);     /* banda de marca */
  --bg-papel:     var(--vapor-200);    /* los antiguos paneles «de papel» pasan a vapor */
  --bg-papel-2:   var(--vapor-100);
  --bg-papel-3:   var(--crema-300);
  --fg:           var(--tinta-900);    /* texto sobre crema */
  --fg-2:         var(--tinta-600);
  --fg-muted:     var(--tinta-600);
  --fg-agua:      var(--crema-100);    /* texto sobre agua */
  --fg-papel:     var(--tinta-900);    /* texto sobre vapor */
  --fg-papel-2:   var(--tinta-600);
  --border:       var(--tinta-900);    /* todo borde es de tinta (2 px) o no existe */
  --border-suave: var(--crema-300);
  --border-papel: var(--tinta-900);
  --accent:       var(--brasa-500);
  --accent-hover: var(--brasa-600);
  --accent-soft:  var(--brasa-200);
  --accent-fg:    var(--blanco);
  --focus:        var(--agua-500);
  --canto:        4px 4px 0 0 var(--agua-700);
  --canto-lg:     6px 6px 0 0 var(--agua-700);
  --canto-sm:     2px 2px 0 0 var(--agua-700);
  /* Campo de color por acto: alternan crema / vapor / agua (los .acto--fN que ponían texto papel se leen sobre agua) */
  --acto-1: var(--vapor-200);
  --acto-2: var(--agua-700);
  --acto-3: var(--crema-200);
  --acto-4: var(--agua-900);
  --acto-5: var(--vapor-200);
  --acto-6: var(--crema-200);

  /* Espaciado (múltiplos de 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;  --s-6: 24px;
  --s-7: 28px; --s-8: 32px; --s-9: 36px; --s-10: 40px; --s-11: 44px; --s-12: 48px;
  --s-16: 64px; --s-24: 96px; --s-section: clamp(56px, 7vw, 96px);

  /* Radios: pastilla en lo interactivo, 12 px en tarjetas y paneles, 8 en etiquetas */
  --r-0: 0;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 12px;
  --r-pill: 9999px;

  /* Movimiento */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 500ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.2, 0, 0, 1);

  /* Tipografía v4: Bricolage Grotesque (display, headline, títulos) + Manrope (cuerpo, etiquetas, cifras) */
  --ff-display:    'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --ff-headline:   'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --ff-sans:       'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-lectura:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-cifra:      'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tamaños fluidos (v4: el display ya no grita) */
  --fs-eyebrow:    14px;
  --fs-body:       clamp(16px, 1.05vw, 18px);
  --fs-lead:       clamp(18px, 1.4vw, 22px);
  --fs-h3:         clamp(18px, 1.4vw, 22px);
  --fs-h2:         clamp(28px, 2.6vw, 40px);
  --fs-h1:         clamp(44px, 5.2vw, 80px);
  --fs-cifra:      clamp(18px, 1.3vw, 24px);

  /* Layout */
  --gutter:        24px;
  --maxw:          1280px;
  --maxw-text:     680px;
  --promobar-h:    40px;
  --promobar-offset: 0px;
  --h-header:      72px;
  --mu-arma-aire:  clamp(16px, 3.2vh, 40px);
}

/* ─────────────────────────────────────────
   Reset minimal
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* el atributo hidden gana a display:flex/inline-flex */
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Foco visible por teclado · acento llama. Solo en navegación por teclado
   (:focus-visible), no en clic de ratón. Cubre links, botones y todos los
   controles interactivos del sitio que antes no tenían indicador de foco. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* Sobre superficies crema la llama también contrasta; se mantiene. */

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

/* ─────────────────────────────────────────
   Tipografía  — Sofia Sans Extra Condensed + Manrope + Roboto
   ------------------------------------------------------------
   Medidas contra el comp en el hito 02 (font-match). Titulares en
   ALL CAPS con la display condensada; cifras con Manrope 800;
   lectura larga con Roboto. Las fuentes de mayo (Archivo Black,
   Fraunces, Inter) se retiraron con el legado en la tarea 06b.
───────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
}
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.10; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: 0.02em; }
h4 { font-size: 18px; line-height: 1.3; letter-spacing: 0.05em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Italic editorial puntual (citas, manifiesto numerado) */

/* ─────────────────────────────────────────
   Layout helpers
───────────────────────────────────────── */
.container {
  width: min(var(--maxw), 100% - 2 * var(--gutter));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Modificadores de superficie — esto es lo que da ritmo a la web */

/* ─────────────────────────────────────────
   Scroll progress bar (top)
───────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
/* El relleno es un elemento real (lo escala el JS con style.transform) y va SIN
   transition: el valor ya llega interpolado por Lenis. La transición de .08s era
   lo que se veía a escalones (hito 08). Color plano: a 2 px un degradado no se nota. */
.scroll-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ─────────────────────────────────────────
   Wordmark
───────────────────────────────────────── */
.wm {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1; text-align: left; color: var(--fg);
}
.wm-name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1;
}
.wm-line {
  width: 100%;
  height: 2px;
  background: var(--accent);
  margin: 5px 0 5px;
}
.wm-by {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ─────────────────────────────────────────
   Promobar — solo se pinta con campaña vigente (data/campanas.php)
───────────────────────────────────────── */
.promobar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--promobar-h);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--gutter);
  background: var(--accent);
  color: var(--fg-papel);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}
.promobar-fire { font-size: 14px; }
.promobar-text-short { display: none; }
@media (max-width: 760px) {
  .promobar { font-size: 12px; }
  .promobar-text { display: none; }
  .promobar-text-short { display: inline; }
}
body.has-promobar { --promobar-offset: var(--promobar-h); }
body.has-promobar .header { top: var(--promobar-h); }
body.has-promobar .nav-mobile { top: var(--promobar-h); height: calc(100vh - var(--promobar-h)); height: calc(100dvh - var(--promobar-h)); }

/* Precio anterior en tarjeta (solo con campaña) */
.col-card-price-old {
  color: var(--fg-muted);
  font-weight: 400;
  margin-left: var(--s-1);
}

/* Footer: wordmark grande y nota (antes eran estilos inline) */
.wm--footer .wm-name { font-size: 26px; }
.footer-note { margin-top: 6px; line-height: 1.5; }

/* ─────────────────────────────────────────
   Header
───────────────────────────────────────── */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  background: transparent;
  transition: background-color .35s var(--ease-out);
}
/* Al hacer scroll SOLO cambia el fondo: carbón sólido al 92 %. Ni altura, ni padding, ni
   tamaños — el header cambiaba de 68 a 52 px y todo daba un salto al primer scroll (hito 10).
   Sin backdrop-filter: cuesta fluidez en un fijo sobre una página que se mueve (hito 08). */
.header.is-scrolled {
  background: rgb(var(--carbon-rgb) / .92);
  backdrop-filter: blur(12px);   /* hito 26: la misma barra en toda la web, también sobre papel */
}
/* Tres columnas: wordmark · enlaces centrados · cesta (decisión de Álvaro, hito 08) */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
}
.nav {
  display: flex; column-gap: 40px; align-items: center;
  justify-self: center;
}
/* Tercera columna: cesta y (en móvil) hamburguesa */
.header-fin {
  display: flex; align-items: center; gap: 10px;
  justify-self: end;
}
/* Icono de cesta con burbuja-contador (botón → reset de fondo nativo) */
.nav-cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;          /* sin esto el <button> sale gris/blanco */
  border: none;
  color: var(--fg);
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.nav-cart:hover { color: var(--tinta-950); }
.nav-cart svg { width: 24px; height: 24px; display: block; margin: 0; }
.nav-cart-count {
  position: absolute;
  top: -6px; right: -8px;           /* burbuja en la esquina del icono */
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg-papel);
  border: 2px solid var(--bg);  /* aro para despegarla del icono */
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-size: 10px; font-weight: 800; line-height: 1;
  letter-spacing: 0;
}
/* La burbuja se atenúa cuando la cesta está vacía, pero sigue visible */
.nav-cart-count.is-empty { display: none; }   /* crítica hito 06: la burbuja «0» era ruido permanente */
.nav-link,
.nav a:not(.lang-opt) {
  font-family: var(--ff-lectura);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgb(var(--papel-rgb) / .85);
  transition: color .25s var(--ease-out);
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Subrayado pegado al texto (−4 px) y abriendo desde el centro. Antes caía a −8 px,
   por debajo de la regla del header, y se cruzaba con ella (hito 08). */
.nav-link::after,
.nav a:not(.lang-opt)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease-out);
}
.nav-link:hover,
.nav a:not(.lang-opt):hover { color: var(--fg); }
.nav-link:hover::after,
.nav a:not(.lang-opt):hover::after,
.nav-link[aria-current="page"]::after,
.nav a[aria-current="page"]:not(.lang-opt)::after { transform: scaleX(1); }
.nav-link[aria-current="page"],
.nav a[aria-current="page"]:not(.lang-opt) { color: var(--fg); }

/* ── Dropdown "Colección" (hover desktop, click mobile) ───── */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-chevron {
  transition: transform .25s var(--ease-out);
  opacity: 0.7;
}
.nav-dropdown.is-open .nav-chevron,
.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 200px;
  padding: 8px;
  background: rgb(var(--carbon-rgb) / .94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  box-shadow: 0 12px 40px rgb(var(--negro-rgb) / .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity    .32s cubic-bezier(.2,.7,.2,1),
    transform  .42s cubic-bezier(.2,.7,.2,1),
    visibility 0s   linear .42s;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
/* puente invisible para que no se cierre al cruzar el gap */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px;
}
/* Items del dropdown "Colección" — :not(.lang-opt) para no pisar el grid del lang-select */
.nav-dropdown-menu a:not(.lang-opt) {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  border-radius: 6px;
  opacity: 1;
  color: var(--fg-muted);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:not(.lang-opt):hover {
  background: var(--bg-3);
  color: var(--bg-papel);
}

/* ─── Banderas: SVG rectangulares (flag-icons, 4×3) ─────────────────
   Una sola fuente de verdad de tamaño/forma: .flag-svg.
   En cada contexto (navbar, dropdown item, footer) se reescala el padre. */
.flag-svg {
  display: block;
  width: 22px; height: 16px;          /* 4:3 aprox · razón visual del flag-icons */
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(var(--negro-rgb) / .18);  /* hairline crisp sobre fondo claro/oscuro */
  flex-shrink: 0;
}

/* ── Selector de idiomas en navbar (reusa estructura nav-dropdown) ─── */
.lang-select { /* sin margin extra: usa el gap uniforme de .nav */ }
.lang-select-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;       /* sin caja: solo bandera + chevron */
  color: var(--fg);
  opacity: 0.78;                 /* mismo patrón que los demás items de la navbar */
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity .25s var(--ease-out);
}
.lang-select-btn:hover,
.nav-dropdown.is-open .lang-select-btn { opacity: 1; }
.lang-select-btn:focus { outline: none; }
.lang-select-btn:focus-visible .nav-chevron {
  opacity: 1;
  color: var(--tinta-950);
}
.lang-select-flag {
  display: flex;
  align-items: center;
  height: 32px;
}
/* Menú del lang-select: anclado a la derecha (el de Colección va izquierda) */
.lang-select .nav-dropdown-menu {
  left: auto;
  right: 0;
  min-width: 220px;
}
/* Cada fila es un GRID 22×1fr con altura fija. Hijos absolutamente centrados.
   Independiente de glifos altos (Ñ/Ç/Ê) o del estado activo. */
.lang-opt {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: stretch;                 /* celdas a altura completa de la fila */
  column-gap: 12px;
  height: 36px;
  padding: 0 14px;
  border-radius: 4px;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.lang-opt::after { display: none; }
.lang-opt-flag,
.lang-opt-name {
  display: flex;
  align-items: center;                  /* centro absoluto vertical en la celda */
  justify-content: flex-start;
  line-height: 1;
  height: 100%;
}
.lang-opt-flag { justify-content: center; }
.lang-opt-name { white-space: nowrap; }
.lang-opt:hover:not(.is-soon) {
  background: var(--bg-3);
  color: var(--bg-papel);
}
.lang-opt.is-active {
  color: var(--bg-papel);
  background: rgb(var(--llama-rgb) / .10);
}
.lang-opt.is-soon {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

/* ── Footer · fila de banderas alineada con el copyright ─────────── */
.lang-switcher {
  display: inline-flex; align-items: center; gap: 10px;
}
.lang-flag {
  display: inline-flex;
  line-height: 0;
  padding: 0;
  border-radius: 3px;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.lang-flag .flag-svg {
  width: 26px; height: 19px;
}
.lang-flag:hover { transform: translateY(-1px); }
.lang-flag.is-active .flag-svg {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgb(var(--negro-rgb) / .18);
}
.lang-flag.is-soon {
  opacity: 0.42;
  pointer-events: none;
}

@media (max-width: 880px) {
  .nav { display: none; }
}

/* ─────────────────────────────────────────
   Hero  — proporcional al viewport pero CAPADO a 1080px.
   A 100% zoom (pantalla 1080p) ocupa toda la viewport (cinematic).
   A 50% zoom o pantallas muy altas, queda en 1080px y deja ver
   la siguiente sección — comportamiento proporcional como el resto.
───────────────────────────────────────── */
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.25; }
  50%      { transform: scaleY(1);    opacity: 0.7; }
}

/* ─────────────────────────────────────────
   Botones
───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 36px;
  padding: 0 32px;
  font-family: var(--ff-sans);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-arrow::after {
  content: "→";
  font-size: 14px;
  transition: transform .25s var(--ease-out);
}
.btn-arrow:hover::after { transform: translateX(4px); }
/* Estado "añadido a la cesta": confirma sin sacar la flecha */
.btn-arrow.is-added { background: var(--accent-hover); border-color: var(--accent-hover); transform: none; }
.btn-arrow.is-added::after { content: ""; }

/* CTA sobre crema: invierte */

/* ─────────────────────────────────────────
   Section head
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   Sección "Colección" — vuelve a oscuro
───────────────────────────────────────── */
.col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 1080px) {
  .col-grid { grid-template-columns: repeat(3, 1fr); }   /* 6 entradas → 2 filas de 3 */
}
@media (max-width: 640px) {
  .col-grid { grid-template-columns: 1fr; }
}

.col-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .4s var(--ease-out);
}
.col-card:hover {
  background: var(--bg-3);
  border-color: var(--tinta-950);
  transform: translateY(-3px);
}

.col-card-media {
  position: relative;
  aspect-ratio: 3 / 4;          /* 3:4 = el formato nativo de los packshots y de los clips */
  overflow: hidden;
  background: var(--bg);
  padding: clamp(20px, 4%, 36px);
}
/* Las tarjetas con clip animado: el vídeo ya trae su propio encuadre y su fondo
   compuesto sobre --carbon, así que ocupa el hueco entero, sin padding. */
.col-card-media.has-video { padding: 0; }
.col-card-media.has-video video { object-fit: cover; }
.col-card-media img,
.col-card-media video {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 1s var(--ease-out);
}
/* El zoom al pasar el ratón se retiró: la tarjeta ahora cambia de imagen fija a
   clip en marcha, y ampliar además distraía del propio efecto de la llama. */

/* ── Tarjeta con clip: imagen fija de entrada, vídeo al pasar el ratón ── */
.col-card-media.has-video .col-card-still,
.col-card-media.has-video .col-card-vid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.col-card-media.has-video .col-card-still {
  z-index: 1;
  opacity: 1;
  transition: opacity .45s var(--ease-out);
}
.col-card-media.has-video .col-card-vid {
  z-index: 2;
  opacity: 0;
  transition: opacity .28s linear;
  pointer-events: none;
}
/* el clip aparece al pasar el ratón */
.col-card-media.has-video.is-playing .col-card-vid { opacity: 1; }
/* ...y al retirarlo se va con un fundido largo y suave, sin pararse en seco */
.col-card-media.has-video.is-fading .col-card-vid { opacity: 0; transition: opacity .26s linear; }
.col-card-media.has-video.is-fading .col-card-still { opacity: 1; transition: opacity .26s linear; }
/* con el clip en marcha, la imagen fija se retira */
.col-card-media.has-video.is-playing .col-card-still { opacity: 0; }
.col-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  font-family: var(--ff-display);
  font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase;
  background: var(--bg-2);
}
.col-card-placeholder::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 30px, rgb(var(--llama-rgb) / .025) 30px 31px);
  pointer-events: none;
}
.col-card-body {
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  z-index: 2;
}
.col-card-eyebrow {
  font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 700;
}
.col-card-name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 6px 0 4px;
}
.col-card-sub {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--fg-muted);
  font-weight: 400;
  line-height: 1.5;
}
.col-card-foot {
  margin-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.col-card-cta {
  color: var(--tinta-950);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.col-card-cta::after {
  content: "→";
  transition: transform .25s var(--ease-out);
}
.col-card:hover .col-card-cta::after { transform: translateX(4px); }
/* Wrapper que se extiende a todo el ancho del viewport y enmascara los bordes */
/* Mobile: scroll horizontal con snap para que no se vean comprimidas */
/* El radial interior va dentro de un contenedor con overflow hidden */
@keyframes moodSpin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   Trust tiles — integrados dentro de Colección (justo bajo el grid)
   ------------------------------------------------------------
   Compactos, no invasivos. Margen propio respecto al grid
   de productos arriba. Tile crema sobre fondo --carbon.
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   Footer
───────────────────────────────────────── */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
  color: var(--fg);
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer h5, .footer .footer-h {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 18px;
  font-weight: 700;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 6px 0; }
.footer li a, .footer li {
  font-size: 13px;
  color: var(--fg);
  opacity: 0.78;
  transition: opacity .2s var(--ease-out), color .2s var(--ease-out);
}
.footer li a:hover { opacity: 1; color: var(--tinta-950); }
.footer-brand p {
  font-size: 13px; color: var(--fg); opacity: 0.7;
  max-width: 320px; margin-top: 18px; line-height: 1.6;
}
.footer-corp {
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.06em;
  padding-top: 28px; border-top: 1px solid var(--border);
  display: grid; gap: 4px;
}
.footer-bottom {
  margin-top: 24px;
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom .footer-copyright { flex: 1 1 auto; }
.footer-bottom .lang-switcher { margin-top: 0; flex: 0 0 auto; }
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* ─────────────────────────────────────────
   Marquee (Trusted by / Press)
───────────────────────────────────────── */

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 40px)); }
}

/* ─────────────────────────────────────────
   Reveal animations
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;   /* la capa de composición se libera al terminar (hito 08) */
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  FICHA DE PRODUCTO — plantilla compartida                 ║
   ║  Usada por compact.php / colors.php / orange-70.php /     ║
   ║  table.php. Ritmo de superficies igual que home.          ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ── Galería: slide arriba + tira horizontal de thumbs abajo ── */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;                 /* viaja con el scroll mientras se exploran acordeones */
  top: 88px;
  align-self: start;
  min-width: 0;                     /* respeta la columna del grid · evita inflado por thumbs */
  width: 100%;
}
.product-gallery-thumbs {
  display: flex;
  flex-direction: row;              /* HORIZONTAL: aprovecha el ancho del slide */
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;                     /* permite que overflow-x: auto opere · no se infla por hijos */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  /* Fade lateral por defecto · solo se muestra el lado donde hay "más por explorar".
     El JS añade .at-start (sin fade izquierdo) y .at-end (sin fade derecho). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--negro) 24px, var(--negro) calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, var(--negro) 24px, var(--negro) calc(100% - 24px), transparent 100%);
}
.product-gallery-thumbs.at-start {
  -webkit-mask-image: linear-gradient(to right, var(--negro) 0, var(--negro) calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, var(--negro) 0, var(--negro) calc(100% - 24px), transparent 100%);
}
.product-gallery-thumbs.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--negro) 24px, var(--negro) 100%);
          mask-image: linear-gradient(to right, transparent 0, var(--negro) 24px, var(--negro) 100%);
}
.product-gallery-thumbs.at-start.at-end {
  /* No hay overflow horizontal · sin fade en ningún lado. */
  -webkit-mask-image: none;
          mask-image: none;
}
.product-gallery-thumbs::-webkit-scrollbar { display: none; }
/* Filtrado por variante: oculta thumbs/slides/dots que no pertenecen a la activa */
.product-thumb.is-variant-hidden,
.product-slide.is-variant-hidden,
.product-dot.is-variant-hidden { display: none !important; }
.product-thumb {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  flex-shrink: 0;                   /* mantiene tamaño en el flex horizontal */
  padding: 0;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color .25s var(--ease-out),
    box-shadow   .25s var(--ease-out),
    transform    .25s var(--ease-out);
}
.product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-thumb:hover { border-color: var(--accent-hover); }
.product-thumb.is-active {
  border-color: var(--tinta-950);
  /* Outline contundente · construido en capas para frame profesional sin alterar layout:
     1) anillo exterior brand color (extiende el borde 2px hacia fuera)
     2) anillo interno refuerza el borde por dentro (1px)
     3) sombra cálida sutil que separa del fondo y aporta profundidad           */
  box-shadow:
    0 0 0 2px var(--accent),
    inset 0 0 0 1px var(--accent),
    0 6px 18px rgb(var(--llama-rgb) / .22);
  transform: scale(1.04);
}
.product-thumb-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg-papel);
  font-size: 22px;
  background: rgb(var(--negro-rgb) / .35);
  text-shadow: 0 1px 3px rgb(var(--negro-rgb) / .5);
  pointer-events: none;
}

.product-gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;           /* ratio nativo de las fotos · siempre completas, sin márgenes */
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.product-gallery-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 5;
  background: var(--accent);
  color: var(--bg-papel);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 4px;
}

.product-gallery-slides {
  position: relative;
  width: 100%; height: 100%;
}
.product-slide {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.product-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.product-slide img,
.product-slide video {
  width: 100%; height: 100%;
  object-fit: cover;           /* contenedor coincide con ratio de la foto · llena sin recortar */
  display: block;
}

.product-gallery-dots {
  display: flex;                    /* visible siempre · indicador discreto de posición */
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--carbon-rgb) / .72);          /* píldora legible sobre cualquier foto; sin blur:
                                                        está siempre visible y con scroll debajo (hito 08) */
  z-index: 5;
  pointer-events: auto;
}
.product-dot {
  width: 6px; height: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-papel);
  border: none;
  opacity: 0.45;
  cursor: pointer;
  transform-origin: center;
  transition: opacity .25s var(--ease-out), background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.product-dot:hover { opacity: 0.85; }
.product-dot.is-active {
  background: var(--accent);
  opacity: 1;
  transform: scaleX(3);            /* "pill" estilo iOS · señala posición sin gritar (transform, no width) */
}

@media (max-width: 880px) {
  .product-gallery { position: static; top: auto; }
}
@media (max-width: 700px) {
  .product-thumb { width: 64px; }
}

/* Color swatch variant (Table B/W) */

/* ─── CTAs hero ─── */
.product-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 36px;
}
.product-cta-row .btn { padding: 18px 32px; }

/* ─── Trust mini-strip (hero) ─── */

/* ─ Atributos rápidos (Smell Like / Grit Level / Featuring style) ─ */

/* ─ Microcopy de entrega ─ */

/* ─ Acordeón details/summary nativo ─ */

/* ─── UGC carrusel home (cards verticales estilo Reels drsquatch) ─── */
@media (max-width: 1100px) {   /* deja scrollear en pantallas chicas */
}

/* Icono play · glassmorph con backdrop blur */
/* Estado: vídeo reproduciendo → atenúa overlay (mantiene siempre el ícono play) */

/* Card blureada · vídeo de fondo borroso, sin texto, sin play */

/* ─── Sticky buy bar (ficha producto) ─── */
.sticky-buy {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: rgb(var(--carbon-rgb) / .96);   /* sólido: es fija y la página se mueve por debajo (hito 08) */
  border-top: 1px solid var(--border);
  padding: 14px 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .4s var(--ease-out), visibility 0s .4s;
  pointer-events: none;
}
.sticky-buy.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .4s var(--ease-out), visibility 0s;
  pointer-events: auto;
}
.sticky-buy-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
}
.sticky-buy-info {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sticky-buy-name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--bg-papel);
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy-price {
  display: flex; align-items: baseline; gap: 10px;
  flex-shrink: 0;
}
.sticky-buy-current {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--bg-papel);
}
.sticky-buy-old {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: line-through;
}
.sticky-buy-badge {
  background: var(--accent);
  color: var(--bg-papel);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 3px;
}
.sticky-buy-cta { flex-shrink: 0; }

/* La barra es position:fixed y taparía el final del footer. Reservamos al
   final de la página el alto de la barra (medido por JS en --sticky-buy-h)
   + un respiro, para que el footer se vea completo por encima de ella.
   Solo afecta a páginas con barra (la barra precede al footer en el DOM). */
.sticky-buy ~ .footer {
  padding-bottom: calc(var(--sticky-buy-h, 96px) + 28px);
}

@media (max-width: 700px) {
  .sticky-buy { padding: 10px 0; }
  .sticky-buy-inner { grid-template-columns: 1fr auto; gap: 14px; }
  .sticky-buy-price { display: flex; font-size: 15px; }     /* crítica hito 06: la cifra viaja con el botón también en móvil */
  .sticky-buy-name { font-size: 14px; }
}

/* ─── Cart drawer (modo tienda) ─────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(92vw, 420px);
  height: 100vh; height: 100dvh;
  background: rgb(var(--carbon-rgb) / .98);   /* a .98 el blur no se veía y sí costaba (hito 08) */
  border-left: 1px solid var(--border);
  z-index: 1000;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
  visibility: hidden;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }
.cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgb(var(--negro-rgb) / 0);
  z-index: 990;
  pointer-events: none;
  transition: background-color .35s var(--ease-out);
}
.cart-drawer.is-open ~ .cart-drawer-overlay {
  background: rgb(var(--negro-rgb) / .5);
  pointer-events: auto;
}
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-title {
  font-family: var(--ff-display);
  font-weight: 900; font-size: 18px;
  color: var(--bg-papel);
  letter-spacing: 0.01em;
}
.cart-drawer-close {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cart-drawer-close:hover { border-color: var(--tinta-950); color: var(--tinta-950); }
.cart-drawer-close svg { width: 18px; height: 18px; }
.cart-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 24px;
}
.cart-empty {
  padding: 64px 8px;
  text-align: center;
  color: var(--fg-muted);
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.6;
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-info { grid-column: 1; grid-row: 1; min-width: 0; }
.cart-line-name {
  font-family: var(--ff-display);
  font-weight: 800; font-size: 15px;
  color: var(--bg-papel);
  line-height: 1.2;
}
.cart-line-price {
  display: block;
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.cart-line-sub {
  grid-column: 2; grid-row: 1;
  text-align: right;
  font-family: var(--ff-display); font-weight: 800; font-size: 15px;
  color: var(--bg-papel);
  white-space: nowrap;
}
.cart-line-qty {
  grid-column: 1; grid-row: 2;
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  height: 36px;
  width: max-content;
}
.cart-qty-btn {
  width: 36px; height: 34px;
  background: transparent; border: none;
  color: var(--fg);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s var(--ease-out);
}
.cart-qty-btn:hover { color: var(--tinta-950); }
.cart-qty-val {
  min-width: 30px; text-align: center;
  font-family: var(--ff-sans); font-weight: 600; font-size: 14px;
  color: var(--bg-papel);
}
.cart-line-remove {
  grid-column: 2; grid-row: 2;
  justify-self: end; align-self: center;
  background: none; border: none; padding: 0;
  color: var(--fg-muted);
  font-family: var(--ff-sans); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.cart-line-remove:hover { color: var(--tinta-950); }
.cart-drawer-foot {
  border-top: 1px solid var(--border);
  padding: 20px 24px 24px;
  background: rgb(var(--carbon-rgb) / .55);
  flex-shrink: 0;
}
.cart-drawer-subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--bg-papel);
}
.cart-drawer-subtotal > span:first-child {
  font-family: var(--ff-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.cart-drawer-subtotal [data-cart-subtotal] {
  font-family: var(--ff-display); font-weight: 900; font-size: 22px;
}
.cart-drawer-note {
  font-family: var(--ff-sans); font-size: 11px; color: var(--fg-muted);
  margin: 8px 0 16px;
}
.cart-drawer-checkout { width: 100%; justify-content: center; }
/* Reusa estilos de .col-card desde la home */

/* Placeholder atmosférico: usa el mood-color como gradiente cinematic */

/* Activación: cuando .is-active los orbes entran + animan drift */

@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(7%, -5%) scale(1.06); }
}
@keyframes orbDriftReverse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6%, 7%) scale(0.94); }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  CONTROLES de navegación — margen izquierdo, vertical       ║
   ╚════════════════════════════════════════════════════════════╝ */

/* Tooltip al lado del botón */

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  MOBILE / RESPONSIVE ADAPTATION                                      ║
   ║  Aplica ≤880px (tablet portrait) y ≤480px (mobile real).            ║
   ║  Desktop (>880px) NO se ve afectado — todo está aislado en queries. ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* ── Hamburguesa: oculta en desktop, visible en mobile ─────────── */
.nav-burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;     /* tap target mínimo accesible (antes 38px) */
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.nav-burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out), top .25s var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger span:nth-child(3) { top: 28px; }
.nav-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Panel mobile + overlay (escondidos por defecto · solo aparecen al abrir) */
.nav-mobile {
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 360px);
  height: 100vh; height: 100dvh;
  background: rgb(var(--carbon-rgb) / .98);   /* sin blur: a .98 no se veía (hito 08) */
  border-left: 1px solid var(--border);
  z-index: 1000;                 /* por encima de .sticky-buy (800): si se abre el
                                    menú en una ficha, no debe taparlo la barra */
  padding: 78px 28px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
  visibility: hidden;
}
.nav-mobile.is-open { transform: translateX(0); visibility: visible; }
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--negro-rgb) / 0);
  z-index: 990;                  /* bajo el panel (1000), sobre la barra sticky (800) */
  pointer-events: none;
  transition: background-color .35s var(--ease-out);
}
.nav-mobile.is-open ~ .nav-mobile-overlay {
  background: rgb(var(--negro-rgb) / .5);
  pointer-events: auto;
}
.nav-mobile-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px;     /* tap target mínimo accesible (antes 38px) */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-mobile-close svg { width: 18px; height: 18px; }
.nav-mobile-inner { display: flex; flex-direction: column; gap: 4px; }
.nav-mobile-label {
  font-family: var(--ff-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-2);
  margin: 22px 0 8px;
}
.nav-mobile-label:first-child { margin-top: 0; }
.nav-mobile-link {
  display: block;
  padding: 12px 4px;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-papel);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--blanco-rgb) / .06);
  transition: color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-mobile-link:hover,
.nav-mobile-link:focus { color: var(--tinta-950); transform: translateX(8px); }
.nav-mobile-flags .lang-switcher { margin: 6px 0 0; }
body.nav-mobile-locked { overflow: hidden; }

/* Gutter por tramo (hito 21): 40 px de 1280 arriba, 24 entre 760 y 1279, 20 por debajo. */
@media (min-width: 1280px) { :root { --gutter: 40px; } }
@media (max-width: 759px)  { :root { --gutter: 20px; } }

/* ╔════════════════════════════════════════╗
   ║  BREAKPOINT ≤880px (tablet portrait)   ║
   ╚════════════════════════════════════════╝ */
@media (max-width: 880px) {
  /* Variables · tipografías y espaciado COMEDIDOS para evitar página interminable */
  :root {
    --fs-h1: clamp(28px, 7.5vw, 48px);
    --fs-h2: clamp(22px, 5.5vw, 34px);
    --fs-lead: 15px;
    --fs-eyebrow: 10px;
  }

  /* Hamburguesa ON, nav desktop OFF (ya estaba) */
  .nav-burger { display: block; }
  /* móvil: wordmark · cesta · hamburguesa (hito 08) */
  .header-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .wm-name { font-size: 19px; }
  .wm-by   { font-size: 8px; letter-spacing: 0.32em; }

  /* Section padding REDUCIDO · mobile no debería sentirse interminable */

  /* Collection grid + cross-sell: 2 columnas compactas (no 1) */
  .col-grid        { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Cards más compactas */
  .col-card-media  { aspect-ratio: 1 / 1; }
  .col-card-body   { padding: 14px 14px 16px; }
  .col-card-eyebrow { font-size: 9px; letter-spacing: 0.18em; }
  .col-card-name   { font-size: 18px; letter-spacing: -0.005em; }
  .col-card-sub    { font-size: 12px; line-height: 1.45; margin-top: 6px; }
  .col-card-foot   { font-size: 12px; margin-top: 14px; padding-top: 12px; }
  .col-card-cta    { font-size: 10px; letter-spacing: 0.12em; }

  /* ╔══ PRODUCT HERO ══╗ */
  .product-gallery { position: static; top: auto; }
  .product-gallery-main { aspect-ratio: 4 / 3; }
  .product-cta-row { flex-direction: column; gap: 10px; }
  .product-cta-row .btn { width: 100%; justify-content: center; }

  /* Sticky buy bar mobile · CTA full width abajo */
  .sticky-buy-inner {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
    row-gap: 10px;
  }
  .sticky-buy-info  { flex: 1 1 60%; min-width: 0; }
  .sticky-buy-name  { font-size: 13px; }
  .sticky-buy-price { flex: 0 0 auto; align-items: flex-end; }
  .sticky-buy-current { font-size: 16px; }
  .sticky-buy-old, .sticky-buy-badge { font-size: 11px; }
  .sticky-buy-cta { flex: 1 1 100%; order: 3; justify-content: center; padding: 12px 18px; }

  /* Footer · grid 2 columnas → 1 al final */
  .footer { padding: 56px 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; max-width: 100%; }
  .footer h5 { font-size: 11px; margin-bottom: 14px; }
  .footer ul li, .footer ul li a { font-size: 13px; }

}

/* ╔════════════════════════════════════════╗
   ║  BREAKPOINT ≤480px (mobile real)       ║
   ╚════════════════════════════════════════╝ */
@media (max-width: 480px) {
  :root {
    --fs-h1: clamp(28px, 8vw, 44px);
    --fs-h2: clamp(22px, 6.5vw, 32px);
  }

  /* Footer 1 col */
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { font-size: 10px; }

  /* CTA hero más estrecho */
}

/* ═════════════════════════════════════════════════════════════
   PORTADA v2 — hero de pantalla completa, sin venta (hito 09)
   Comp: .impeccable/mocks/hero-v2/A.webp (contrato de composición, no de píxeles).
   El hero v1 colocaba cada pieza en % sobre un aspect-ratio 2688/1520: en 1920×1080
   el bloque medía 1086 px y la ficha y el CTA caían bajo el pliegue. Aquí manda la
   ALTURA: 100svh y un grid de tres filas (decir · aire · pie), con los tipos limitados
   a la vez por ancho y por alto (min(vw, svh)) para que quepa en 1366×768 y en 2560.
───────────────────────────────────────────────────────────── */
.portada {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  isolation: isolate;
}
.portada-foto { will-change: transform; }   /* la anima el parallax con scrub (hito 08) */
.portada-foto,
.portada-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* la llama vive a la derecha: se mantiene a la vista al recortar */
  display: block;
  margin: 0;
}
/* Velo: el texto va sobre la zona oscura de la izquierda y el pie sobre el suelo */
.portada::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(var(--carbon-rgb) / .82) 0%, rgb(var(--carbon-rgb) / .45) 38%, rgb(var(--carbon-rgb) / 0) 62%),
    linear-gradient(0deg, rgb(var(--carbon-rgb) / .72) 0%, rgb(var(--carbon-rgb) / 0) 34%);
  pointer-events: none;
}
.portada-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s-4);
  padding: calc(var(--promobar-offset) + 88px) 2.46vw clamp(24px, 3.4vh, 56px);
  box-sizing: border-box;
}
/* El bloque de texto se centra en el hueco que queda entre el header y el pie: en 1920×1080
   arrancaba pegado al header y dejaba vacío el tercio medio (revisión del hito 09). */
.portada-decir { max-width: min(52ch, 62%); align-self: center; }
.portada-titular {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  /* limitado por ancho Y por alto: en 1366×768 manda el alto */
  font-size: min(6.6vw, 11.2svh);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--papel-100);
  text-wrap: balance;
}
.portada-linea { display: block; white-space: nowrap; }
.portada-sub {
  margin: clamp(12px, 1.6vh, 24px) 0 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: min(1.45vw, 2.6svh);
  line-height: 1.35;
  color: var(--papel-200);
  max-width: 40ch;
}
/* Pie: ficha de hechos a la izquierda, un solo CTA a la derecha */
.portada-pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.portada-ficha {
  list-style: none;
  margin: 0; padding: clamp(14px, 1.9vh, 26px) clamp(18px, 1.5vw, 32px);
  display: grid; gap: clamp(8px, 1.1vh, 16px);
  background: var(--papel-100);
  color: var(--tinta-950);
  border-radius: var(--r-0);
  /* La tarjeta mide lo que mide su línea más larga (la firma) y nunca más de media pantalla.
     Antes: max-width en ch del cuerpo con líneas en nowrap → a 1536 y 1920 la firma salía por
     la derecha (Álvaro, 2026-09-15). Si un día no cabe, la línea parte; no se corta. */
  width: max-content;
  max-width: min(100%, 48vw);
}
.portada-hecho {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  font-family: var(--ff-lectura);
  font-weight: 700;
  font-size: min(1.02vw, 1.9svh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: normal;
  text-wrap: balance;
}
/* Sin pictograma (la firma y los dos hechos), el texto se alinea con el del agua, que sí lo lleva. */
.portada-hecho > span:only-child { grid-column: 1 / -1; }
.portada-hecho-picto { display: block; width: clamp(20px, 1.5vw, 30px); height: auto; color: var(--tinta-950); }
/* «Simplemente agua.»: la resolución de la anáfora, en azul de agua y en sentence case */
.portada-hecho--agua {
  margin-top: clamp(6px, 0.8vh, 12px);
  padding-top: clamp(10px, 1.3vh, 18px);
  border-top: 1px solid rgb(var(--tinta-rgb) / .18);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--agua);
}
.portada-hecho--agua .portada-hecho-picto { color: var(--agua); }
.portada-agua { display: inline-block; }

.portada-cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: clamp(48px, 6.2vh, 64px);
  padding: 0 clamp(20px, 1.9vw, 36px);
  background: var(--accent);
  color: var(--tinta-900);
  font-family: var(--ff-lectura);
  font-weight: 700;
  font-size: min(1.18vw, 2.1svh);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-0);
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.portada-cta svg { display: block; width: clamp(16px, 1.1vw, 22px); height: auto; }
.portada-cta:hover { background: var(--llama-300); transform: translateY(-2px); }

/* Pantallas anchas: el claim no debe crecer sin fin */
@media (min-width: 1800px) {
  .portada-titular { font-size: min(5.4vw, 11.2svh); }
  .portada-decir { max-width: min(46ch, 56%); }
}
/* Tablet: el claim pierde el nowrap y la ficha se estrecha */
@media (max-width: 1080px) {
  .portada-decir { max-width: 78%; }
  .portada-titular { font-size: min(8.2vw, 10.5svh); }
  .portada-sub { font-size: min(2.1vw, 2.4svh); }
  .portada-hecho { font-size: min(1.5vw, 1.8svh); }
  .portada-cta { font-size: min(1.7vw, 2svh); }
}

/* Header de borde a borde. Hito 08: sin regla inferior (ni en reposo ni con scroll),
   y todo en píxeles fijos — con `vw` los enlaces salían a 18 px en 1440 y 24 px en 1920,
   que es lo que se veía «sin calidad». */
.header { padding: 0; }
.header .container { width: 100%; padding: 12px 2.46vw; }   /* la barra va a sangre, no al contenedor */
/* Con el burger visible (44 px de área táctil) el padding baja a 10 px para que el header
   siga midiendo exactamente 64 px en todos los anchos (hito 10). */
@media (max-width: 880px) {
  .header .container { padding: 10px 2.46vw; }
}
.header-inner {
  align-items: center;
  min-height: 64px;                /* el header mide 64 px SIEMPRE, en reposo y con scroll (hito 10) */
  gap: var(--s-5);
}
.wm-name {
  font-family: var(--ff-lectura);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.wm-line, .wm-by { display: none; }
.wm--footer .wm-line, .wm--footer .wm-by { display: block; }
.wm--footer .wm-name { font-size: 26px; letter-spacing: 0.06em; }
.nav { column-gap: 40px; }

/* ═════════════════════════════════════════════════════════════
   HOME v2 — actos con campo de color LED (hito 02, regla C)
   Un acto por objeción; nunca dos del mismo color seguidos; el acto
   denso alterna con el quieto. Solo tokens: el color viene de --acto-n.
───────────────────────────────────────────────────────────── */
.acto {
  position: relative;
  color: var(--tinta-950);
  padding: clamp(72px, 9vw, 160px) 0;
}
.acto--1 { background: var(--acto-1); }
.acto--4 { background: var(--acto-6); }                 /* amarillo: /en-tu-mueble#mi-hueco y el cierre de las guías */
.acto-inner {
  width: min(var(--maxw), 100% - 2 * max(var(--gutter), 2.46vw));
  margin: 0 auto;
}
.acto-picto { display: block; width: clamp(88px, 8vw, 136px); height: auto; margin: 0 0 var(--s-6); color: currentColor; }
.acto-h {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(64px, 11vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: currentColor;
  margin: 0 0 var(--s-8);
  max-width: 12ch;
  text-wrap: balance;
}
.acto-p {
  font-family: var(--ff-sans);
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.4;
  max-width: 34ch;
  margin: 0;
}
.acto-lecturas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8) var(--s-12);
  margin: clamp(40px, 5vw, 80px) 0 0;
  padding: 0;
}
.acto-lecturas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acto-lecturas > div { margin: 0; padding-top: var(--s-4); border-top: 2px solid currentColor; }
.acto-lecturas dt {
  font-family: var(--ff-cifra);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.acto-lecturas dd {
  margin: var(--s-2) 0 0;
  font-family: var(--ff-lectura);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.acto--denso .acto-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "picto picto" "h p" "lecturas lecturas";
  gap: 0 var(--s-12);
  align-items: end;
}
.acto--denso .acto-picto { grid-area: picto; }
.acto--denso .acto-h { grid-area: h; margin-bottom: 0; }
.acto--denso .acto-p { grid-area: p; padding-bottom: 0.4em; }
.acto--denso .acto-lecturas { grid-area: lecturas; }

/* ─── Modelos: grid de familias ─── */
.modelos { background: var(--bg); color: var(--fg); padding: clamp(36px, 4vw, 68px) 0; }
.modelos-head { margin-bottom: clamp(24px, 2.6vw, 40px); }
.modelos-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(56px, 8vw, 150px); line-height: 0.9; letter-spacing: -0.005em;
  text-transform: uppercase; margin: 0 0 var(--s-5);
}
.modelos-p { font-family: var(--ff-sans); font-size: clamp(17px, 1.3vw, 22px); max-width: 44ch; margin: 0; color: var(--fg-2); }
.modelos-label {
  font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2); margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border);
}
/* Cinco columnas: el grupo «Encastrables» tiene cinco modelos y con cuatro quedaba una
   tarjeta suelta en una fila vacía. «De mesa» usa la misma rejilla para que la Table
   sea del mismo tamaño que las demás (hito 09). */
.fam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }   /* 4 familias (hito 18): llenan el ancho (hito 21) */
.fam { display: block; color: var(--fg); text-decoration: none; }
.fam-media {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--bg-2); border-radius: var(--r-0);
}
.fam-media img, .fam-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fam-media video, .fam-img-hover { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.fam:hover .fam-media video, .fam:focus-visible .fam-media video, .fam:hover .fam-img-hover, .fam:focus-visible .fam-img-hover { opacity: 1; }
.fam-body { display: grid; gap: var(--s-1); padding: var(--s-4) 0 0; }
/* Hito 23: el estilo grande es el NOMBRE OFICIAL y el pequeño la línea comercial (los nombres
   de clase se mantienen, ver DESIGN.md). La reserva de dos líneas se muda con la línea: el
   nombre oficial cabe siempre en una, la línea comercial no («Un color para cada momento»). */
.fam-mote { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.4vw, 44px); line-height: 1; text-transform: uppercase; }
.fam-nombre { font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--papel-300); min-height: 2.6em; }
.fam-ancho { font-family: var(--ff-sans); font-size: 14px; color: var(--papel-300); opacity: 0.8; }
.fam-precio { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(20px, 1.6vw, 28px); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.fam-precio-old { color: var(--fg-muted); font-weight: 500; font-size: 0.7em; margin-left: var(--s-2); }
.fam--sec .fam-mote { font-size: clamp(22px, 1.8vw, 32px); }
.fam--sec .fam-media { aspect-ratio: 4 / 3; }

/* ─── En tu mueble: panel de papel (B, una sola vez) ─── */
.mueble-figura { margin: 0; }
.mueble-figura img { width: 100%; height: auto; display: block; border-radius: var(--r-0); }
.mueble-figura figcaption { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-papel-2); margin-top: var(--s-3); }

/* ─── Formularios de lead (plantilla / newsletter) ─── */
.lead-form { display: block; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-label { display: block; font-family: var(--ff-lectura); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-2); color: currentColor; opacity: 0.8; }
.lead-row { display: flex; gap: var(--s-2); }
.lead-input {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 var(--s-4);
  font-family: var(--ff-sans); font-size: 17px; color: var(--tinta-950);
  background: var(--blanco); border: 1px solid var(--papel-300); border-radius: var(--r-0);
}
.lead-input::placeholder { color: var(--fg-papel-2); }
.lead-btn {
  flex: 0 0 auto; height: 56px; padding: 0 var(--s-6);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  color: var(--tinta-950); background: var(--accent); border: 2px solid var(--accent); border-radius: var(--r-0);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.lead-btn:hover { background: var(--llama-300); border-color: var(--llama-300); }
.lead-legal { font-family: var(--ff-sans); font-size: 13px; margin: var(--s-3) 0 0; color: var(--fg-papel-2); }
.lead-ok { font-family: var(--ff-sans); font-size: clamp(17px, 1.3vw, 22px); font-weight: 600; padding: var(--s-4) 0; border-top: 2px solid currentColor; margin: 0; }
.lead-error { font-family: var(--ff-sans); font-size: 14px; color: var(--led-rojo); margin: var(--s-2) 0 0; }
.lead-form--news { max-width: 560px; margin-top: var(--s-8); }
.lead-form--news .lead-input { background: var(--bg-2); color: var(--fg); border-color: var(--fg); }
.lead-form--news .lead-input::placeholder { color: var(--fg-muted); }

/* ─── Prueba (vídeo real) ─── */
.prueba { background: var(--bg); color: var(--fg); padding: clamp(40px, 4.4vw, 76px) 0; }
.prueba-texto { display: grid; align-content: start; gap: var(--s-4); }
.prueba-video { margin: 0; position: relative; }
.prueba-video video { width: 100%; aspect-ratio: 9 / 16; max-height: 520px; object-fit: cover; background: var(--bg-2); display: block; border-radius: var(--r-0); }
.prueba-video figcaption { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-3); }   /* subtitular de segundo nivel, no eyebrow */

/* ─────────────────────────────────────────
   INSTALACIÓN (hito 24) — la sección 2 de la home, en DOS BANDAS.
   A: el mueble que ya tienes (vídeo vertical + panel de papel a su altura).
   B: el mueble que hacemos nosotros (panel + los tres tiempos, o el render mientras no
      haya material). Antes eran dos columnas de un mismo panel con el vídeo al lado, y el
      panel se quedaba corto: al ensanchar el contenedor (hito 21) sobraban ~150 px por arriba
      y por abajo. Ahora cada banda ocupa su ancho y el panel va a la altura de su medio.
───────────────────────────────────────── */
.instalacion { background: var(--bg); color: var(--fg); padding: clamp(40px, 4.4vw, 76px) 0; }
/* Hito 25: el panel de papel NO se estira al alto del vídeo — es del tamaño de su contenido y
   va centrado en su columna, con los ejes alineados con el medio de al lado. Estirarlo (hito 24)
   arreglaba el aire de fuera, pero lo metía dentro del propio panel. */
.inst-banda { display: grid; gap: clamp(20px, 2.4vw, 48px); align-items: center; }
.inst-banda + .inst-banda { margin-top: clamp(20px, 2.4vw, 48px); }
/* Hito 27: el hueco que dejaba el panel a medida (el vídeo en 9:16 solo ocupa 324 px de ancho a
   1440) lo llena el segundo panel, «Sobre la mesa.» — la tercera vía, la que no pide hueco. La fila
   vuelve a llenar el contenedor y ya no hay aire muerto a la derecha. */
.inst-banda--a { grid-template-columns: auto minmax(0, 1fr); }
/* Hito 29 — CENTRADOS. El escalonado del 28 (uno al borde de arriba, otro al de abajo) no convenció:
   los dos paneles vuelven a centrarse con el vídeo, cada uno con su propio alto. Viven en su propio
   grid —3:2, porque el de la izquierda tiene que dar de sí para los tres pictogramas de 130 px sin
   encogerlos— que se estira a la altura de la fila, y dentro cada panel se centra. */
.inst-paneles {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(20px, 2.4vw, 48px); align-items: center; align-self: stretch;
}
.inst-paneles .inst-panel { align-self: center; }
/* El pie del vídeo sigue fuera del flujo (hito 28): así la altura de la fila es exactamente la del
   vídeo y «centrado con el vídeo» es lo que dice, no «centrado con el vídeo más su pie», que son
   13 px de diferencia. Cabe en el aire que la banda deja debajo (8 + 15 px de pie contra 26-48 px de
   separación entre bandas; medido en el banco). */
/* El pie va fuera del flujo, así que su sitio hay que reservarlo en la BANDA, no en la figura: el
   padding de la banda no cuenta para el alto de la fila, y el centrado sigue siendo exacto. Sin esto,
   a 1280 quedaban 4 px entre el pie y la banda B. */
.inst-banda--a { align-items: stretch; padding-bottom: clamp(24px, 2vw, 34px); }
/* El vídeo se centra como los paneles: si alguno crece más que él (a 1920 el de mesa se pasa 3 px),
   la fila la manda ese panel, y con el vídeo anclado arriba los centros se separaban 1,4 px. */
.inst-banda--a .inst-video { align-self: center; }
.inst-banda--a .inst-video figcaption { position: absolute; top: calc(100% + var(--s-2)); left: 0; margin-top: 0; }
/* Hito 28: el marco pasa de banda 5:2 a **4:3** y la chimenea se ve entera, con su llama. 4:3 es
   además el formato en el que llega el par negro/blanco (docs/MATERIAL-muebles.md), así que cuando
   caiga no habrá que tocar nada. Mientras tanto la foto que hay es la tarjeta 3:4 (`cards/table.webp`)
   y el `object-position: center 55%` es lo que mete el producto entero dentro del recorte: medida la
   caja del aparato en el fichero (y 354-1138 de 1440), un 4:3 centrado se dejaba 15 px fuera. */
.inst-mesa { margin: 0; display: grid; gap: var(--s-2); }
.inst-mesa-img {
  width: 100%; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; object-position: center 55%; display: block;
  border: 1px solid var(--papel-300); background: var(--carbon-900);
}
.inst-mesa-aviso { margin: 0; font-family: var(--ff-sans); font-size: 12px; line-height: 1.4; color: var(--fg-papel-2); }

/* ── Comparador negro/blanco (hito 28) ──────────────────────────────────────
   Dos fotos del mismo encuadre superpuestas y una manilla que descubre una u otra. La de arriba se
   recorta con `clip-path` desde la manilla hacia la derecha: una sola variable (`--cmp`) mueve el
   recorte, la manilla y el valor accesible, y no hay ningún `width` que recalcular por fotograma.
   La manilla la enseña el JS (`hidden` en el HTML): sin JS no hay nada que arrastrar y se ve la negra
   entera, que es el estado público de hoy. */
/* `overflow: hidden` recorta la manilla en los extremos: sin él, al llegar a 0 o a 100 se sale 22 px
   del marco y se planta sobre el papel del panel. */
.cmp { position: relative; display: block; overflow: hidden; touch-action: pan-y; }
.cmp .cmp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cmp)); }
.cmp .cmp-b .inst-mesa-img { height: 100%; }
.cmp-eti {
  position: absolute; bottom: var(--s-2); z-index: 2;
  padding: 2px var(--s-2); background: rgb(var(--carbon-rgb) / .72); color: var(--fg);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmp-eti--a { left: var(--s-2); }
.cmp-eti--b { right: var(--s-2); }
.cmp-manilla {
  position: absolute; top: 0; bottom: 0; left: var(--cmp); z-index: 3;
  width: 44px; margin-left: -22px; padding: 0;
  background: transparent; border: none; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
/* La línea y el tirador: papel con un filete de carbón, que se leen igual sobre el acero negro y sobre
   el blanco. Cuadrado y sin radio, como el resto del mundo; las flechas van en SVG, no en triángulos de
   `border`, que además el detector lee (con razón) como una pestaña lateral. */
.cmp-manilla::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px;
  background: var(--papel-100); box-shadow: 0 0 0 1px rgb(var(--carbon-rgb) / .45);
}
.cmp-tirador {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--tinta-950);
  background: var(--papel-100); border-radius: var(--r-0);
  box-shadow: 0 0 0 1px rgb(var(--carbon-rgb) / .45);
}
.cmp-manilla:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Mientras no existe la foto del acabado blanco (`cmp--pronto`), el lado derecho es la MISMA foto,
   velada y con su placa. Se descartaron las dos alternativas y están en el informe con captura:
   blanquear el acero por software sale gris y con costuras alrededor de la llama, y además el
   modelo blanco es de MDF y mide otra cosa (sería enseñar un producto que no existe); y las dos
   fotos reales del catálogo son TOMAS DISTINTAS, así que al arrastrar se ve el salto. */
.cmp--pronto .cmp-b .inst-mesa-img { filter: brightness(0.42) saturate(0.25); }
.cmp-placa {
  position: absolute; top: 50%; right: 0; width: 50%; transform: translateY(-50%);
  padding: 0 var(--s-4); text-align: center;
  font-family: var(--ff-lectura); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--fg);
}
.inst-mesa figcaption {
  font-family: var(--ff-lectura); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2);
}
.inst-banda--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/* El vídeo manda la altura de la banda A: 9:16 de verdad, recortado del master, sin deformar. */
.inst-video { margin: 0; position: relative; }
.inst-video video {
  height: clamp(360px, 40vw, 640px); aspect-ratio: 9 / 16; width: auto;
  object-fit: cover; display: block; background: var(--bg-2); border-radius: var(--r-0);
}
.inst-video figcaption {
  font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-3);
}

/* El panel de papel se estira hasta donde llega su medio y centra su contenido: sin aire muerto. */
.inst-panel {
  align-self: center;
  background: var(--bg-papel); color: var(--tinta-950); border-radius: var(--r-0);
  padding: clamp(20px, 2.2vw, 44px);
  display: flex; flex-direction: column; gap: var(--s-3);
}
/* En columna flex el botón se estiraría a todo el ancho: `align-self` lo deja del ancho de su texto.
   Desde el hito 28 los paneles miden lo que su contenido, así que `margin-top: auto` no tiene espacio
   libre que repartir y no abre ningún hueco: se queda por si un panel vuelve a estirarse. */
.inst-panel .camino-cta { align-self: flex-start; margin-top: auto; }
.camino-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(24px, 2.3vw, 40px); line-height: 0.98;
  text-transform: uppercase; margin: 0; color: var(--tinta-950);
}
.camino-p {
  font-family: var(--ff-sans); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45;
  color: var(--fg-papel); margin: 0; max-width: 56ch;
}

/* Los tres tiempos del mueble: mismo tamaño, 4:5, en fila y en bucle sincronizado. */
.inst-tiempos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-content: center; }
.inst-tiempo { display: grid; gap: var(--s-2); align-content: start; }
.inst-tiempo-video, .inst-hueco {
  width: 100%; aspect-ratio: 4 / 5; display: block;
  background: var(--bg-2); border-radius: var(--r-0);
}
.inst-tiempo-video { object-fit: cover; }
.inst-tiempo-pie { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }

/* Huecos marcados: solo con clave de previsualización, nunca en público. */
.inst-hueco { display: grid; place-items: center; padding: var(--s-4); border: 2px dashed rgb(var(--papel-rgb) / .38); }
.inst-hueco-txt { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--fg-2); text-align: center; }
.inst-hueco-aviso { grid-column: 1 / -1; font-family: var(--ff-sans); font-size: 12px; color: var(--fg-muted); }

/* Mientras no hay material, el render ocupa el sitio de los tres. */
.inst-render { margin: 0; display: grid; gap: var(--s-2); align-content: center; }
.inst-render img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg-2); border-radius: var(--r-0); }
.inst-render figcaption { font-family: var(--ff-lectura); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }

.camino-cta {
  justify-self: start; margin-top: auto;
  display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s-5);
  background: var(--accent); color: var(--tinta-900);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 15px;
  text-decoration: none; border-radius: var(--r-0);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.camino-cta:hover { background: var(--llama-300); }
/* el camino «en tu mueble» lleva el secundario: no compiten dos naranjas */
.camino-cta--ghost {
  background: transparent; color: var(--tinta-950);
  border: 1px solid var(--papel-300);
}
.camino-cta--ghost:hover { background: var(--tinta-950); color: var(--papel-100); }
/* Hito 26: «corta · coloca · llena» son ICONOS con su pie, no tres láminas. Ocupaban todo el ancho
   del panel (299 px de lado a 1440, 394 a 1920) y convertían el papel en una caja alta de dibujo;
   ahora miden ~130 px a 1440 y el panel vuelve a ser del tamaño de su contenido, como el de la
   banda B. La fila no se estira: `max-content` la deja del ancho de los tres iconos. */
.instalacion-pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
  counter-reset: paso;
}
/* Hito 27: los tres se reparten el ancho del panel en vez de amontonarse a la izquierda. Con el panel
   a medida (46rem) del hito 26 sobraba papel a su derecha; ahora la fila de iconos llena el panel
   igual que la foto llena el de al lado. El TAMAÑO del icono no cambia (130 px a 1440). */
.instalacion-paso { display: grid; gap: var(--s-2); justify-items: start; }
.instalacion-paso img { width: clamp(96px, 9vw, 150px); }
.instalacion-paso img {
  height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  border: 1px solid var(--papel-300);
  background: var(--papel-100);
}
.instalacion-paso-txt {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px;
  font-family: var(--ff-lectura); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2);
}
.instalacion-paso-num { font-family: var(--ff-cifra); font-weight: 800; font-size: 15px; color: var(--tinta-950); }

/* ─────────────────────────────────────────
   ASISTENTE DE MODELO (hito 12) — sustituye al comprobador de espacio.
   Un paso visible a la vez, opciones grandes con pictograma, y resultados con el clip
   de cada modelo. Siempre hay salida: si no cabe nada, mueble a medida o de mesa.
───────────────────────────────────────── */
.asis { background: var(--bg-papel); color: var(--tinta-950); padding: clamp(40px, 4.4vw, 76px) 0; }
/* La cabecera se pliega al contestar la primera pregunta (hito 22). El truco de
   grid-template-rows 1fr→0fr anima el alto sin conocerlo; `visibility` entra al final de la
   transición para que además salga del árbol de accesibilidad y del foco. */
.asis-head {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out), visibility 0s;
}
/* el aire de debajo va DENTRO del envoltorio que se recorta —como margen del último hijo, no
   como padding suyo: el padding de un item en una fila de 0fr sigue ocupando— así se pliega
   con él y no hay que animar un margen (que provocaría relayout en cada fotograma) */
.asis-head-in { overflow: hidden; min-height: 0; }
.asis-head-in > :last-child { margin-bottom: var(--s-6); }
.asis-head.is-oculto {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out),
              visibility 0s var(--dur-2);
}
.asis-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(30px, 3.2vw, 54px); line-height: 0.95;
  text-transform: uppercase; margin: 0; color: var(--tinta-950);
}
.asis-p { font-family: var(--ff-sans); font-size: clamp(15px, 1.15vw, 18px); color: var(--fg-papel); margin: var(--s-2) 0 0; }

/* barra de pasos: los del camino elegido, clicables hacia atrás (hito 13) */
.asis-progreso { list-style: none; display: flex; gap: 8px; margin: 0 0 var(--s-5); padding: 0; }
.asis-punto {
  width: 34px; height: 6px; padding: 0;
  background: rgb(var(--tinta-rgb) / .18);
  border: 0; border-radius: 3px; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.asis-punto:disabled { cursor: default; }
.asis-punto.is-activo { background: var(--accent); }
.asis-punto.is-aqui { transform: scaleY(1.6); }
.asis-punto:not(:disabled):hover { background: var(--llama-300); }
.asis-punto-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* la palabra que define la opción, destacada dentro del recuadro */
.asis-opt-clave { color: var(--llama-papel); font-weight: 700; }
.asis-opt input:checked + .asis-opt-caja .asis-opt-clave { color: var(--llama-300); }

/* el paso entra con un fundido corto: se nota el cambio sin marear */
.asis-paso.is-activo { animation: asis-entra .2s var(--ease-out) both; }
@keyframes asis-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .asis-paso.is-activo { animation: none; }
}

.asis-paso { border: 0; padding: 0; margin: 0; }
.asis-q {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(22px, 2vw, 34px); line-height: 1; text-transform: uppercase;
  margin: 0 0 var(--s-4); padding: 0; color: var(--tinta-950);
}
.asis-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.asis-opts--tramos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.asis-opt { position: relative; display: block; }
.asis-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.asis-opt-caja {
  display: grid; gap: var(--s-3); align-content: start;
  min-height: 100%;
  padding: clamp(16px, 1.6vw, 26px);
  background: var(--papel-100);
  border: 2px solid rgb(var(--tinta-rgb) / .18);
  border-radius: var(--r-0);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.asis-opt--tramo .asis-opt-caja { padding: var(--s-4) var(--s-4); }
.asis-opt-picto { display: block; color: var(--tinta-950); }
.asis-opt-txt { font-family: var(--ff-lectura); font-weight: 700; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.2; }
.asis-opt-caja:hover { border-color: var(--tinta-950); }
.asis-opt input:focus-visible + .asis-opt-caja { outline: 2px solid var(--tinta-950); outline-offset: 2px; }
.asis-opt input:checked + .asis-opt-caja { background: var(--tinta-950); border-color: var(--tinta-950); color: var(--papel-100); }
.asis-opt input:checked + .asis-opt-caja .asis-opt-picto { color: var(--papel-100); }

/* el ancho se responde solo por tramos (hito 14); el modo numérico, con las tres medidas,
   vive en /en-tu-mueble#mi-hueco. Sin JS el asistente no resuelve: se dice y se ofrece el grid. */
.asis-nojs { font-family: var(--ff-sans); font-size: 15px; color: var(--fg-papel); margin: 0; }
.asis-nojs a { font-family: var(--ff-lectura); font-weight: 700; color: var(--tinta-950); text-decoration: underline; }
.asis-pie { margin: var(--s-5) 0 0; }
.asis-atras {
  background: transparent; border: 0; padding: var(--s-2) 0;
  font-family: var(--ff-lectura); font-weight: 700; font-size: 14px;
  color: var(--fg-papel-2); cursor: pointer; text-decoration: underline;
}
.asis-atras:hover { color: var(--tinta-950); }

/* resultados */
.asis-res-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 38px); line-height: 1; text-transform: uppercase; color: var(--tinta-950); margin: 0 0 var(--s-3); }
.asis-res-h--menor { font-size: clamp(19px, 1.5vw, 26px); margin-top: var(--s-5); }   /* «También te caben…» y «no te cabe ninguna» */
.asis-res-p { font-family: var(--ff-sans); font-size: clamp(15px, 1.15vw, 18px); color: var(--fg-papel); margin: 0 0 var(--s-5); max-width: 52ch; }
/* rótulo de la tarjeta principal («El que mejor encaja», «Necesita 70 cm», «También hace naranja fijo») */
.asis-card-flag {
  position: absolute; top: 0; left: 0; z-index: 1;
  margin: 0; padding: 6px var(--s-3);
  background: var(--accent); color: var(--tinta-900);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.asis-card-flag--necesita, .asis-card-flag--naranja { background: var(--tinta-950); color: var(--papel-100); }

/* Salidas: nunca se deja al visitante sin siguiente paso. Desde el hito 20 salen SIEMPRE las
   dos —quepa algo o no—, mitad y mitad bajo el resultado; y cuando no hay alternativas que
   poner a la derecha, suben ahí en columna (y no se repiten abajo). */
.asis-salidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); position: relative; }
.asis-salidas--una { grid-template-columns: minmax(0, 1fr); }
.asis-salidas--col { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; margin-top: 0; }
.asis-salidas--una .asis-salida { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.asis-salidas--una .asis-salida-txt, .asis-salidas--una .asis-salida-cta { grid-column: 1; justify-self: center; }
/* «Pero…» (hito 22): el giro del titular es el gesto — display de acto en llama sobre papel,
   sacado del margen y solapando la banda de salidas. `transform` no ocupa caja, así que no
   provoca scroll horizontal; el margen negativo es siempre menor que el gutter del tramo. */
.asis-salidas-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(72px, 9vw, 160px); line-height: 0.82;
  text-transform: uppercase; color: var(--llama-papel);
  transform: rotate(-4deg); transform-origin: left bottom;
  position: relative; z-index: 2;
  margin: var(--s-7) 0 -0.34em calc(-1 * clamp(6px, 1.1vw, 26px));   /* con line-height 0.82 el hueco bajo el glifo es grande: el solape se mide en em */
}
.asis-salida { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-content: space-between; padding: clamp(16px, 1.6vw, 24px); background: var(--papel-100); border: 2px solid rgb(var(--tinta-rgb) / .18); border-radius: var(--r-0); }
.asis-salida-txt { grid-column: 2; display: grid; gap: var(--s-1); }
.asis-salida-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.05; text-transform: uppercase; color: var(--tinta-950); margin: 0; }
.asis-salida-p { font-family: var(--ff-sans); font-size: 15px; color: var(--fg-papel); margin: 0; }
.asis-salida-cta {
  grid-column: 2; justify-self: start;
  display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s-5);
  background: var(--accent); color: var(--tinta-900);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 15px;
  text-decoration: none; border-radius: var(--r-0);
}
.asis-salida-cta:hover { background: var(--llama-300); }
.asis-fin { margin: var(--s-6) 0 0; }

/* ── Resultado del asistente (hito 19, disposición A; hito 20, sin dibujo y en una pantalla)
   La recomendación grande a la izquierda y, a su derecha, las que también caben en filas de
   una línea (o las dos salidas, si no hay alternativas). Filas de rejilla FIJAS para que el precio y el botón
   caigan a la misma altura aunque el copy cambie —era la queja: «Nuestro lado más rústico»
   ocupa dos líneas y «La clásica» una. La disposición B se retiró en la 19b. */
.res-linea { font-family: var(--ff-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 28px); line-height: 1; text-transform: uppercase; color: var(--tinta-950); margin: 0; }
.res-nombre { font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); margin: 0; min-height: 2.4em; }
.res-datos { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 2px; min-height: 4.4em; font-family: var(--ff-sans); font-size: 13px; line-height: 1.45; color: var(--fg-papel); }
.res-dato-hueco { font-weight: 600; color: var(--tinta-950); }   /* el tramo que dijo el cliente */
.res-precio { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(22px, 1.9vw, 28px); color: var(--tinta-950); margin: 0 0 var(--s-3); }
.res-cta {
  justify-self: start; display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s-4);
  background: var(--tinta-950); color: var(--papel-100);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 14px;
  text-decoration: none; border-radius: var(--r-0);
}
.res-cta:hover { background: var(--accent); color: var(--tinta-900); }

/* ── A: recomendación grande + alternativas al lado ── */
/* Los ideales: tarjetas IGUALES en una fila de 1, 2 o 3 columnas (hito 22). Con una sola, la
   tarjeta ocupa el ancho y el precio se va a su propia columna a la derecha, en vez de dejar
   medio metro de papel vacío. */
.res-ideales { display: grid; gap: var(--s-4); }
.res-ideales--1 { grid-template-columns: minmax(0, 1fr); }
.res-ideales--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-ideales--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Con un solo ideal la tarjeta va a media pantalla dentro de .res-a y al lado se pone lo que
   toque (los pequeños o las salidas): a todo el ancho, una foto 3:4 deja un hueco enorme. */
.res-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.res-menores > .asis-res-h--menor:first-child { margin-top: 0; }
.res-hero { position: relative; display: grid; grid-template-columns: clamp(190px, 15vw, 240px) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); background: var(--papel-100); border: 2px solid var(--accent); border-radius: var(--r-0); }
.res-ideales--3 .res-hero { grid-template-columns: 150px minmax(0, 1fr); }
.res-hero--necesita, .res-hero--naranja { border-style: dashed; }
.res-hero-media { align-self: start; aspect-ratio: 3 / 4; max-height: 420px; background: var(--bg); overflow: hidden; }
.res-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-hero-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.res-compra { margin-top: auto; padding-top: var(--s-4); display: grid; justify-items: start; }   /* al pie de la columna de texto */
.res-hero .asis-card-flag { top: var(--s-4); left: var(--s-4); }

.res-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.res-lista--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 3 o más: dos columnas, o no cabe en una pantalla */
.res-fila { margin: 0; }
.res-fila-a {
  /* alto fijo: el rótulo «El que mejor encaja» no puede hacer una fila más alta que las otras */
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 24px; gap: var(--s-3); align-items: center; min-height: 100px;
  padding: var(--s-2); background: var(--papel-100); border: 2px solid rgb(var(--tinta-rgb) / .18);
  border-radius: var(--r-0); color: var(--tinta-950); text-decoration: none;
}
.res-fila-a:hover { border-color: var(--tinta-950); }
.res-fila-media { display: block; width: 60px; aspect-ratio: 3 / 4; background: var(--bg); overflow: hidden; }
.res-fila-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-fila-txt { display: grid; gap: 1px; min-width: 0; }
.res-fila-linea { font-family: var(--ff-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; }
.res-fila-nombre { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.res-fila-dato { font-family: var(--ff-sans); font-size: 12px; color: var(--fg-papel); }
.res-fila-precio { font-family: var(--ff-cifra); font-weight: 800; font-size: 18px; white-space: nowrap; }
.res-fila-ir { font-size: 18px; color: var(--fg-papel-2); }

/* ── Las salidas (comunes): la de mesa siempre al pie; las dos juntas si no cabe nada ── */
.asis-salida-picto { color: var(--tinta-950); }

.asis-inicio { display: inline-block; padding: var(--s-2) 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--fg-papel-2); text-decoration: underline; }
.asis-inicio:hover { color: var(--tinta-950); }

/* ─── Grupos del grid: «Encastrables» y «De mesa» (hito 09) ───/* ─── Grupos del grid: «Encastrables» y «De mesa» (hito 09) ───
   La infografía corta · coloca · llena encabeza el grupo de encastrables: describe el
   encastre y por eso salió del hero, donde daba a entender que todo Firecool se encastra. */
.modelos-pasos {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 28px);
  counter-reset: paso;
}

/* ─────────────────────────────────────────
   TALLER (hito 08) — «En tu mueble» y «Elige por hueco» en una sola banda de papel.
───────────────────────────────────────── */
.taller-banda { background: var(--bg-papel); color: var(--tinta-950); padding: clamp(40px, 4.4vw, 76px) 0; }

/* ─── Confianza ─── */
.confianza { background: var(--bg); color: var(--fg); padding: clamp(36px, 4vw, 68px) 0; }
.confianza-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 40px); line-height: 0.98; text-transform: uppercase; margin: 0 0 var(--s-5); max-width: 22ch; }
.confianza-lista { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.confianza-lista li { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 2px solid var(--fg); align-content: start; }
.confianza-lista strong { font-family: var(--ff-lectura); font-weight: 700; font-size: clamp(15px, 1.1vw, 18px); }
.confianza-lista span { font-family: var(--ff-sans); font-size: 14px; line-height: 1.4; color: var(--fg-2); }

/* ─── Newsletter en el footer (hito 08: era una sección entera de la home) ─── */
.footer-news {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(16px, 2vw, 40px); align-items: end;
  padding-bottom: clamp(24px, 3vw, 44px); margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid rgb(var(--carbon-600-rgb) / .6);
}
.footer-news-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; text-transform: uppercase; margin: 0; }
.footer-news-p { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; color: var(--fg-2); margin: var(--s-2) 0 0; max-width: 52ch; }
.footer-news .lead-form { margin: 0; }

/* ─── Responsive de las secciones nuevas (el primer viewport se ajusta en la fase responsive) ─── */
@media (max-width: 1080px) {
  .fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inst-banda--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  /* Hito 27: por debajo de aquí los dos paneles ya no caben en fila — la de tres pictogramas de la
     izquierda se desborda a partir de ~900 px de ventana. Se apilan, todavía al lado del vídeo. */
  .inst-paneles { grid-template-columns: 1fr; align-content: center; }
  /* Apilados no hay escalón que hacer, y el pie del vídeo vuelve al flujo (fuera de él se montaría
     encima del panel de debajo). */
  .inst-paneles .inst-panel, .inst-paneles .inst-panel--mesa { align-self: auto; }
  .inst-banda--a .inst-video figcaption { position: static; margin-top: var(--s-3); }
  .inst-banda--a { padding-bottom: 0; }   /* apilado el pie está en el flujo: no hay nada que reservar */
  .prueba-video { grid-row: 1 / span 2; }
  .confianza-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .acto--denso .acto-inner { grid-template-columns: 1fr; }
  .acto--denso .acto-inner { grid-template-areas: "picto" "h" "p" "lecturas"; }
  .acto--denso .acto-h { margin-bottom: var(--s-6); }
  .acto-lecturas--3 { grid-template-columns: 1fr; }
  .fam-grid { grid-template-columns: 1fr 1fr; }
  .lead-row { flex-direction: column; }
  .lead-btn { width: 100%; }
  .confianza-lista { grid-template-columns: 1fr; }
  .prueba-video { grid-row: auto; max-width: 300px; }
  .prueba-video video { max-height: 400px; }

  /* Home v3 (hito 08): las tres ventajas y la banda del taller se apilan;
     el aire de sección baja a la mitad — en móvil el scroll cuesta el doble. */
  .instalacion, .asis, .modelos { padding: clamp(24px, 6vw, 36px) 0; }
  .asis-opts, .asis-opts--tramos { grid-template-columns: 1fr; }
  /* Resultado en móvil (hito 19): una columna. La principal se vuelve horizontal (media a la
     izquierda) para no comerse la pantalla con un 3:4 a todo lo ancho, y las alternativas son
     filas cortas. En B, la lista pierde las columnas de dato y deja cota y precio. */
  .res-a, .res-ideales--2, .res-ideales--3, .res-lista--2col { grid-template-columns: 1fr; }
  .asis-salidas--col { grid-auto-rows: auto; }
  .res-ideales { gap: var(--s-3); }
  /* El rótulo dejaba de caber sobre la foto (150 px) y se montaba encima del título: aquí es
     una fila propia arriba, a lo ancho de la tarjeta. */
  .res-hero, .res-ideales--3 .res-hero { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); }
  /* la fila del rótulo (8 arriba + 29 de alto + aire) SOLO se reserva donde hay rótulo:
     desde el hito 22 la mayoría de las tarjetas no lleva ninguno */
  .res-hero--naranja, .res-hero--necesita { padding-top: 46px; }
  .res-hero .asis-card-flag { top: var(--s-2); left: var(--s-2); right: var(--s-2); }
  .res-compra { padding-top: var(--s-3); }
  .asis-salidas-h { font-size: clamp(56px, 18vw, 96px); transform: rotate(-3deg); margin: var(--s-6) 0 -0.32em -6px; }
  /* a lo ancho de la tarjeta (≈ 326 px): en la columna del texto medía 168 y no se leía la
     chimenea dentro del mueble. */
  .res-linea { font-size: 22px; }
  .res-nombre { min-height: 0; }
  .res-datos { min-height: 0; }
  .res-fila-a { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .res-fila-dato2 { display: none; }   /* el depósito parte la línea en dos: fuera en móvil */
  .asis-salidas { grid-template-columns: 1fr; }
  .res-fila-ir { display: none; }
  .res-fila-linea { font-size: 18px; }
  .asis-salida { grid-template-columns: 40px 1fr; }
  .asis-salida-cta { grid-column: 2; }
  /* Las dos bandas a una columna; el vídeo a lo ancho y los tres tiempos APILADOS (no en
     carrusel: nada que descubrir con un gesto y ni un píxel de scroll horizontal). */
  .inst-banda--a, .inst-banda--b, .inst-paneles { grid-template-columns: 1fr; gap: var(--s-4); }
  .inst-video video { width: 100%; height: auto; max-height: 62vh; }
  .inst-panel { padding: var(--s-5); }
  .inst-tiempos { grid-template-columns: 1fr; }
  /* Apilados, tres 4:5 seguidos se comen tres pantallas: mandan por alto (la proporción da el
     ancho) y se centran. Así la sección entera se queda por debajo de 3 viewports a 390. */
  .inst-tiempo { justify-items: center; text-align: center; }
  .inst-tiempo-video, .inst-hueco { width: auto; height: 42vh; max-width: 100%; }
  .camino-cta { width: 100%; justify-content: center; }
  .instalacion-pasos { gap: var(--s-2); }
  .instalacion-paso-txt { font-size: 10px; letter-spacing: 0.05em; }
  /* el pie de cada tarjeta, más apretado: cuatro líneas cortas no necesitan tanto aire */
  .fam-grid { gap: 14px; }
  .modelos-pasos { gap: var(--s-3); flex-wrap: wrap; }
  .fam-body { gap: 2px; padding-top: var(--s-2); }
  .fam-mote { font-size: 22px; }
  /* En dos columnas los precios de una misma fila tienen que caer a la misma altura. A 168 px
     de tarjeta la línea comercial larga («Un color para cada momento») ocupa dos líneas y la
     lista de anchos de Colors también: las dos reservan su peor caso. */
  .fam-nombre { min-height: 3.3em; }
  .fam-ancho { min-height: 3.2em; }
  .fam-precio { font-size: 18px; }
  .modelos-head { margin-bottom: var(--s-5); }
  /* las cuatro garantías caben en dos columnas: son un titular corto y una frase */
  .confianza-lista { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
  .confianza-lista span { font-size: 13px; }
  .footer-news-p { font-size: 14px; }
  .footer-news { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
}

/* ─── Portada v2 en móvil (390 y 430): se RECOMPONE, no se reduce (hito 09) ───
   Foto a pantalla completa con degradado, claim en tres líneas, sublínea, CTA y la
   ficha como tira de tres hechos al pie. Sin scroll para llegar al CTA. */
@media (max-width: 760px) {
  .portada { height: 100svh; min-height: 560px; }
  .portada-foto,
  .portada-foto img { object-position: 64% center; }
  .portada::after {
    background:
      linear-gradient(180deg, rgb(var(--carbon-rgb) / .55) 0%, rgb(var(--carbon-rgb) / 0) 26%),
      linear-gradient(0deg, rgb(var(--carbon-rgb) / .92) 0%, rgb(var(--carbon-rgb) / .55) 34%, rgb(var(--carbon-rgb) / 0) 62%);
  }
  .portada-inner {
    grid-template-rows: 1fr auto auto;
    padding: calc(var(--promobar-offset) + 72px) var(--gutter) clamp(18px, 2.4vh, 28px);
    gap: var(--s-3);
  }
  .portada-decir { grid-row: 2; max-width: none; align-self: end; }
  .portada-titular { font-size: min(11.6vw, 7.4svh); line-height: 0.95; }
  .portada-linea { white-space: normal; }
  .portada-sub { font-size: 16px; margin-top: var(--s-2); max-width: 30ch; }
  .portada-pie {
    grid-row: 3;
    display: grid; grid-template-columns: 1fr; gap: var(--s-6);
    justify-content: stretch;   /* el space-between de escritorio encogía la columna */
    align-items: stretch;
  }
  .portada-cta { order: 1; justify-content: center; width: 100%; height: 52px; font-size: 16px; }
  .portada-ficha {
    order: 2;
    background: transparent; color: var(--papel-100);
    padding: 0; gap: 6px; max-width: none;
    border-top: 1px solid rgb(var(--papel-rgb) / .28); padding-top: var(--s-3);
  }
  .portada-hecho { font-size: 12px; letter-spacing: 0.07em; gap: 10px; }
  .portada-hecho-picto { width: 18px; color: var(--papel-100); }
  /* sobre la foto manda el cian claro: el azul de papel no contrasta sobre carbón */
  .portada-hecho--agua { margin-top: 4px; padding-top: 8px; border-top-color: rgb(var(--papel-rgb) / .28); color: var(--led-cian); }
  .portada-hecho--agua .portada-hecho-picto { color: var(--led-cian); }

  /* el burger mide 44 px (área táctil): con 10 px de padding el header sigue midiendo 64 */
  .header .container { padding: 10px var(--gutter); }
  .wm-name { font-size: 20px; letter-spacing: 0.12em; }
}
html.motion-off .portada-linea, html.motion-off .portada-ficha, html.motion-off .portada-sub, html.motion-off .portada-cta { opacity: 1; transform: none; }

/* ═════════════════════════════════════════════════════════════
   PDP — fichas de producto (hito 03, code-led): etiqueta gigante (C),
   panel de papel (B) para tabs, actos LED para las features.
───────────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdp-miga {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-top: calc(5.5vw + var(--promobar-offset)); padding-bottom: var(--s-4);
  font-family: var(--ff-lectura); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-2);
}
.pdp-miga a { color: var(--fg-2); text-decoration: none; }
.pdp-miga a:hover { color: var(--tinta-950); }
.pdp-miga span:last-child { color: var(--fg); }

/* Hero: galería + etiqueta */
.pdp-hero { background: var(--bg); color: var(--fg); padding-bottom: clamp(48px, 5vw, 80px); }
.pdp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.pdp-galeria { min-width: 0; }
.pdp-galeria .product-gallery { position: static; }
.pdp-galeria .product-gallery-thumbs { overflow-x: auto; max-width: 100%; }
.pdp-galeria .product-gallery-main { background: var(--bg-2); border-radius: var(--r-0); }
.pdp-galeria .product-thumb { border-radius: var(--r-0); }
.pdp-galeria .product-thumb.is-active { box-shadow: 0 0 0 2px var(--accent); transform: none; }

/* Etiqueta gigante (C): papel, precio enorme, botón dentro */
.etq {
  position: sticky; top: calc(5vw + var(--promobar-offset));
  background: var(--papel-100); color: var(--tinta-950);
  padding: var(--s-8) var(--s-8) var(--s-6);
  border-radius: var(--r-0);
  display: grid; gap: var(--s-3);
}
.etq-nombre { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(44px, 4.6vw, 84px); line-height: 0.9; text-transform: uppercase; color: var(--tinta-950); display: grid; gap: var(--s-2); }
.etq-nombre-mote { font-family: var(--ff-headline); font-weight: 600; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.1; text-transform: none; letter-spacing: 0; color: var(--fg-papel); }   /* el mote es la segunda línea del titular, no una etiqueta encima */
.etq-precio { margin: var(--s-2) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
.etq-precio-cifra { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(56px, 6vw, 112px); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.etq-precio-old { font-family: var(--ff-cifra); font-weight: 600; font-size: clamp(18px, 1.6vw, 28px); color: var(--fg-papel-2); }
.etq-precio-badge { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; padding: 4px 8px; background: var(--accent); color: var(--tinta-950); }
.etq-hueco { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--papel-300); font-family: var(--ff-lectura); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.etq-sel { border: 0; padding: var(--s-2) 0 0; margin: 0; }
.etq-sel legend { font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; margin-bottom: var(--s-3); }
.etq-sel-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.etq-opt {
  display: grid; gap: 2px; text-align: left; padding: var(--s-3) var(--s-4);
  background: var(--papel-100); color: var(--tinta-950); border: 1px solid var(--papel-300); border-radius: var(--r-0);
  font-family: var(--ff-sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.etq-opt-main { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: var(--s-2); }
.etq-opt-sub { font-family: var(--ff-cifra); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.etq-opt.is-active { background: var(--tinta-950); color: var(--papel-100); border-color: var(--tinta-950); }
.etq-opt:hover:not(.is-active) { background: var(--papel-200); }
.etq-opt-dot { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--tinta-950); }
.etq-btn {
  display: flex; align-items: center; justify-content: center; height: 64px; margin-top: var(--s-2);
  background: var(--accent); color: var(--tinta-950); border: 0; border-radius: var(--r-0);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.etq-btn:hover { background: var(--llama-300); transform: translateY(-2px); }
.etq-btn.is-added { background: var(--tinta-950); color: var(--papel-100); transform: none; }
.etq-kit { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; cursor: pointer; padding-top: var(--s-2); }
.etq-kit input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etq-kit-box { width: 22px; height: 22px; border: 1px solid var(--papel-300); background: transparent; transition: background-color var(--dur-1) var(--ease-out); }
.etq-kit input:checked + .etq-kit-box { background: var(--tinta-950); }
.etq-kit input:focus-visible + .etq-kit-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.etq-kit-txt { font-family: var(--ff-sans); font-size: 14px; line-height: 1.4; color: var(--fg-papel); }
.etq-kit-txt strong { display: block; font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); }
.pdp-pastillas { list-style: none; margin: clamp(24px, 3vw, 40px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.pdp-pastillas li { padding-top: var(--s-3); border-top: 2px solid var(--fg); font-family: var(--ff-lectura); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; color: var(--fg); }
.pdp-pastillas a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.pdp-pastillas a:hover { color: var(--tinta-950); }

/* Actos de la ficha: seis campos, nunca dos iguales seguidos */
.acto--f1 { background: var(--acto-1); }                                  /* cian */
.acto--f2 { background: var(--acto-2); color: var(--papel-100); }         /* morado */
.acto--f3 { background: var(--acto-3); }                                  /* verde */
.acto--f4 { background: var(--acto-6); }                                  /* amarillo */
.acto--f5 { background: var(--acto-4); color: var(--papel-100); }         /* azul */
.acto--f6 { background: var(--acto-5); }                                  /* rosa, tinta (6,0:1) */
.pdp-acto .acto-h { max-width: 14ch; }
.acto-figura { grid-column: 1 / -1; margin: var(--s-8) 0 0; }
.acto-media { display: block; width: 100%; max-width: 960px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg); border: 1px solid var(--tinta-950); }
.acto--denso.pdp-acto .acto-inner { grid-template-areas: "picto picto" "h p" "figura figura" "lecturas lecturas"; }
.acto--denso.pdp-acto .acto-figura { grid-area: figura; }

/* Tabs-promesa (panel de papel B) */
.pdp-tabs { background: var(--bg-papel); color: var(--tinta-950); padding: clamp(64px, 8vw, 140px) 0; }
.tabs-lista { display: flex; gap: var(--s-2); border-bottom: 2px solid var(--tinta-950); margin-bottom: var(--s-8); }
.tabs-tab {
  background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; padding: var(--s-3) var(--s-4);
  font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); text-transform: uppercase; line-height: 1; color: var(--fg-papel-2); cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.tabs-tab.is-active, .tabs-tab:hover { color: var(--tinta-950); }
.tabs-tab.is-active { border-bottom-color: var(--tinta-950); }
.tabs-panel p { max-width: 62ch; font-family: var(--ff-sans); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; margin: 0 0 var(--s-4); }
.tabs-panel .tabs-ficha { font-family: var(--ff-lectura); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }

/* Comparador por uso */
.compara { background: var(--bg); color: var(--fg); padding: clamp(64px, 8vw, 140px) 0; }
.compara-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(48px, 6vw, 110px); line-height: 0.9; text-transform: uppercase; margin: 0 0 var(--s-4); }
.compara-p { font-family: var(--ff-sans); font-size: clamp(16px, 1.25vw, 20px); color: var(--fg-2); max-width: 44ch; margin: 0 0 var(--s-8); }
.compara-scroll { overflow-x: auto; }
.compara-tabla { width: 100%; border-collapse: collapse; font-family: var(--ff-sans); font-size: 15px; }
.compara-tabla th, .compara-tabla td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: 1px solid var(--border); vertical-align: middle; }
.compara-tabla thead th { font-family: var(--ff-lectura); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); border-top: 0; }
.compara-tabla tbody th { font-family: var(--ff-lectura); font-weight: 700; }
.compara-precio { font-family: var(--ff-cifra); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compara-uso-movil { display: none; }
.compara-tabla tr.is-actual { background: var(--bg-2); }
.compara-tabla tr.is-actual th, .compara-tabla tr.is-actual td { border-top-color: var(--fg); }
.compara-ver { color: var(--fg); font-family: var(--ff-lectura); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* sobre carbón: papel, no tinta (axe, 15-09) */
.compara-ver:hover { text-decoration: underline; }
.compara-esta { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }

/* Reseñas honestas */
.video-sonido { position: absolute; right: var(--s-3); top: var(--s-3); width: 44px; height: 44px; display: grid; place-items: center; background: var(--papel-100); color: var(--tinta-950); border: 0; border-radius: var(--r-0); cursor: pointer; }
.video-sonido:hover { background: var(--accent); }
.video-sonido[aria-pressed="false"] .video-sonido-on { display: none; }
.video-sonido[aria-pressed="true"] .video-sonido-off { display: none; }

/* FAQ */
.pdp-faq { background: var(--bg); color: var(--fg); padding: clamp(64px, 8vw, 140px) 0; }
.pdp-faq-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 5vw, 96px); line-height: 0.92; text-transform: uppercase; margin: 0 0 clamp(24px, 3vw, 48px); max-width: 16ch; }
.faqs { max-width: 820px; }
.faqs-item { border-top: 2px solid var(--fg); }
.faqs-item:last-child { border-bottom: 2px solid var(--fg); }
.faqs-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; font-family: var(--ff-lectura); font-weight: 700; font-size: clamp(17px, 1.3vw, 22px); }
.faqs-q::-webkit-details-marker { display: none; }
.faqs-mas { font-family: var(--ff-cifra); font-weight: 800; font-size: 24px; line-height: 1; transition: transform var(--dur-2) var(--ease-out); }
.faqs-item[open] .faqs-mas { transform: rotate(45deg); }
.faqs-q:hover { color: var(--tinta-950); }
.faqs-a { margin: 0 0 var(--s-5); max-width: 62ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg-2); }

/* Cross-sell */
.pdp-cross { background: var(--bg); color: var(--fg); padding: 0 0 clamp(64px, 8vw, 140px); }
.pdp-cross-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(32px, 3vw, 56px); line-height: 0.95; text-transform: uppercase; margin: 0 0 var(--s-6); }
.fam-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }

/* Botón legado y barra sticky al mundo (radio 0) */
.btn { border-radius: var(--r-0); font-family: var(--ff-lectura); letter-spacing: 0.02em; text-transform: none; font-size: 14px; font-weight: 700; color: var(--tinta-950); }
.sticky-buy { border-radius: var(--r-0); }

@media (max-width: 1080px) {
  .pdp-hero-grid { grid-template-columns: 1fr; }
  .etq { position: static; }
  .pdp-pastillas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .compara-tabla thead { display: none; }
  .compara-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--border); }
  .compara-tabla tr.is-actual { padding-left: var(--s-2); padding-right: var(--s-2); }
  .compara-tabla th, .compara-tabla td { border-top: 0; padding: 0; }
  .compara-tabla tbody th { grid-column: 1 / -1; }
  .compara-tabla td:nth-child(3) { grid-column: 1 / -1; font-size: 13px; color: var(--fg-2); }
}
@media (max-width: 760px) {
  .pdp-miga { padding-top: 72px; }
  .etq { padding: var(--s-5) var(--s-4); }
  .pdp-pastillas { grid-template-columns: 1fr; }
  .acto--denso.pdp-acto .acto-inner { grid-template-areas: "picto" "h" "p" "figura" "lecturas"; }
  .fam-grid--2 { grid-template-columns: 1fr 1fr; }
  .tabs-lista { overflow-x: auto; }
}

/* ─── Actos compactos (revisión hito 03): los actos 3-6 de la ficha en rejilla 2×2, media altura;
       misma gramática (campo LED, pictograma, titular, una lectura). Apilados en móvil. ─── */
.actos-compactos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acto--compacto { padding: clamp(40px, 4.5vw, 72px) 0; }
.acto--compacto .acto-inner { width: min(var(--maxw), 100% - 2 * max(var(--gutter), 2.46vw)); }
.acto--compacto .acto-picto { width: clamp(56px, 4.5vw, 80px); margin-bottom: var(--s-4); }
.acto--compacto .acto-h { font-size: clamp(40px, 5vw, 96px); margin-bottom: var(--s-5); }
.acto--compacto .acto-p { font-size: clamp(16px, 1.15vw, 19px); max-width: 38ch; }
.acto--compacto .acto-lecturas { margin-top: clamp(24px, 2.5vw, 40px); }
.acto--compacto .acto-lecturas dt { font-size: clamp(32px, 3.2vw, 60px); }
@media (max-width: 760px) {
  .actos-compactos { grid-template-columns: 1fr; }
  .acto--compacto { padding: 40px 0; }
}

/* ─── Móvil (revisión hito 03): la ficha en ≤ 9 viewports de 844 px sin quitar contenido ─── */
@media (max-width: 760px) {
  .pdp-hero { padding-bottom: var(--s-8); }
  .pdp-pastillas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
  .pdp-pastillas li { font-size: 13px; padding-top: var(--s-2); }
  .pdp-acto.acto--denso, .pdp-acto.acto--quieto { padding: 48px 0; }
  .pdp-acto .acto-h { font-size: clamp(48px, 15vw, 64px); margin-bottom: var(--s-5); }
  .acto-figura { margin-top: var(--s-6); }
  .acto--compacto { padding: 32px 0; }
  .acto--compacto .acto-picto { width: 44px; margin-bottom: var(--s-3); }
  .acto--compacto .acto-h { font-size: 36px; margin-bottom: var(--s-3); }
  .acto--compacto .acto-p { font-size: 15px; line-height: 1.35; }
  .acto--compacto .acto-lecturas { margin-top: var(--s-4); }
  .acto--compacto .acto-lecturas dt { font-size: 28px; }
  .acto--compacto .acto-lecturas > div { padding-top: var(--s-2); }
  .pdp-tabs, .compara, .pdp-faq { padding: 48px 0; }
  .compara-h, .pdp-faq-h { font-size: 44px; margin-bottom: var(--s-3); }
  .compara-p { margin-bottom: var(--s-5); }
  .compara-tabla tr { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 2px; padding: var(--s-2) 0; }
  .compara-tabla tbody th { grid-column: 1; font-size: 15px; }
  .compara-tabla td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--fg-2); white-space: normal; }
  .compara-tabla .compara-uso { display: none; }
  .compara-uso-movil { display: inline; }
  .compara-tabla td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .compara-tabla td:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .etq-sel-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etq-opt { padding: var(--s-2) var(--s-3); }
  .video-sonido { right: var(--s-2); top: var(--s-2); }   /* 44 px también en móvil (objetivo táctil) */
  .faqs-q { padding: var(--s-3) 0; font-size: 16px; }
  .pdp-cross { padding-bottom: 48px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════════════════════
   EN TU MUEBLE (hito 04): la hoja de papel que se dibuja sola.
   Dibujo técnico SVG (clases dib-*), selector, ficha de piezas,
   montaje como pasos numerados, plantilla 1:1 y modo «mi hueco».
───────────────────────────────────────────────────────────── */
/* Dibujo técnico: papel, línea gruesa, acento solo en la chimenea */
.dibujo { display: block; width: 100%; height: auto; font-family: var(--ff-lectura); }
.dibujo .dib-madera { fill: var(--madera-nogal); }
.dibujo.dib-madera--roble .dib-madera { fill: var(--madera-roble); }
.dibujo.dib-madera--blanco .dib-madera { fill: var(--madera-blanco); }
.dibujo.dib-madera--negro .dib-madera { fill: var(--madera-negro); }
.dibujo .dib-frente { fill: none; stroke: var(--tinta-950); stroke-width: 0.9; }
.dibujo .dib-canto { fill: var(--tinta-950); stroke: none; opacity: 0.35; }
.dibujo .dib-linea { fill: none; stroke: var(--tinta-950); stroke-width: 1.4; }
.dibujo .dib-pomo { fill: var(--tinta-950); }
.dibujo .dib-pata { fill: var(--tinta-950); }
.dibujo .dib-oculto { fill: none; stroke: var(--tinta-950); stroke-width: 0.6; stroke-dasharray: 2 1.5; }
.dibujo .dib-llama { fill: var(--accent); stroke: var(--tinta-950); stroke-width: 0.6; }
.dibujo .dib-llama-linea { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.dibujo .dib-corte { fill: var(--papel-100); stroke: var(--accent); stroke-width: 1.2; }
.dibujo .dib-centro { stroke: var(--tinta-950); stroke-width: 0.35; stroke-dasharray: 2 1.5; }
.dibujo .dib-cota line { stroke: var(--tinta-950); stroke-width: 0.5; }
.dibujo .dib-cota .dib-cota--tenue { opacity: 0.4; }
.dibujo .dib-cota text { fill: var(--tinta-950); font-size: 4.2px; font-weight: 500; letter-spacing: 0.02em; }
.dibujo.dib-madera--negro .dib-frente, .dibujo.dib-madera--nogal .dib-frente { stroke: var(--papel-100); opacity: 0.7; }
.dibujo.dib-madera--negro .dib-pomo, .dibujo.dib-madera--nogal .dib-pomo { fill: var(--papel-100); }

/* Hoja (panel de papel B como layout) */
.hoja { background: var(--bg-papel); color: var(--tinta-950); padding: calc(6vw + var(--promobar-offset)) 0 clamp(48px, 6vw, 96px); }
.hoja-h { color: var(--tinta-950); font-family: var(--ff-display); font-weight: 700; font-size: clamp(56px, 8vw, 150px); line-height: 0.9; text-transform: uppercase; margin: 0 0 var(--s-4); }
.hoja-p { font-family: var(--ff-sans); font-size: clamp(17px, 1.3vw, 22px); max-width: 52ch; margin: 0 0 var(--s-8); color: var(--fg-papel); }
.sel { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr auto; gap: var(--s-3); align-items: end; margin-bottom: var(--s-6); }
.sel-campo label { display: block; font-family: var(--ff-lectura); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-2); color: var(--fg-papel-2); }
.sel select { width: 100%; height: 52px; padding: 0 var(--s-3); font-family: var(--ff-sans); font-size: 15px; color: var(--tinta-950); background: var(--blanco); border: 1px solid var(--papel-300); border-radius: var(--r-0); }
.sel-btn { height: 52px; padding: 0 var(--s-6); font-family: var(--ff-lectura); font-weight: 700; font-size: 15px; color: var(--tinta-950); background: var(--accent); border: 0; border-radius: var(--r-0); cursor: pointer; }
.sel-btn:hover { background: var(--llama-300); }
html.js .sel-btn { display: none; }        /* con JS el selector redibuja solo al cambiar */
.hoja-para, .hoja-aviso { font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--s-5); color: var(--fg-papel-2); }
.hoja-aviso { text-transform: none; letter-spacing: 0; font-family: var(--ff-sans); font-size: 15px; padding: var(--s-3) var(--s-4); border: 1px solid var(--papel-300); max-width: 70ch; color: var(--tinta-950); }
.hoja-dibujos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.hoja-fig { margin: 0; }
.hoja-fig figcaption { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); margin-top: var(--s-3); }
.hoja-cotas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: clamp(24px, 3vw, 48px) 0 0; padding: 0; }
.hoja-cotas > div { border-top: 1px solid var(--papel-300); padding-top: var(--s-3); }
.hoja-cotas dt { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hoja-cotas dd { margin: var(--s-2) 0 0; font-family: var(--ff-lectura); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.hoja-aire { margin: var(--s-6) 0 0; font-family: var(--ff-sans); font-size: 15px; max-width: 70ch; color: var(--tinta-950); padding: var(--s-3) var(--s-4); border: 1px solid var(--papel-300); }

/* Ficha del mueble */
.ficha-mueble { background: var(--bg); color: var(--fg); padding: clamp(56px, 7vw, 120px) 0; }
.ficha-mueble-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.fm-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 5vw, 96px); line-height: 0.9; text-transform: uppercase; margin: 0 0 var(--s-4); }
.fm-h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: 0.95; text-transform: uppercase; margin: var(--s-8) 0 var(--s-4); }
.fm-p { font-family: var(--ff-sans); font-size: 15px; color: var(--fg-2); max-width: 52ch; margin: 0 0 var(--s-5); }
.fm-tabla { width: 100%; border-collapse: collapse; font-family: var(--ff-sans); font-size: 14px; }
.fm-tabla th, .fm-tabla td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-top: 1px solid var(--border); }
.fm-tabla thead th { font-family: var(--ff-lectura); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); border-top: 0; }
.fm-tabla tbody th { font-family: var(--ff-lectura); font-weight: 700; }
.fm-tabla td:nth-child(3) { font-family: var(--ff-cifra); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-ferr { list-style: none; margin: 0; padding: 0; font-family: var(--ff-sans); font-size: 14px; }
.fm-ferr li { padding: var(--s-2) 0; border-top: 1px solid var(--border); }
.fm-ferr strong { font-family: var(--ff-cifra); font-weight: 800; margin-right: var(--s-2); }
.fm-ferr span { display: block; color: var(--fg-muted); font-size: 13px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.paso { display: grid; grid-template-columns: 52px 52px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.paso-pic { display: grid; place-items: center; width: 52px; height: 52px; color: var(--papel-100); }
.paso-pic svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }   /* línea gruesa: el trazo del alzado */
.paso-pic .pic-corte { stroke: var(--accent); stroke-dasharray: 2.5 2; }
.paso-pic .pic-oculto { stroke-dasharray: 2 2; stroke-width: 1.8; }
.paso-n { display: grid; place-items: center; width: 52px; height: 52px; background: var(--papel-100); color: var(--tinta-950); border: 1px solid var(--tinta-950); font-family: var(--ff-lectura); font-weight: 700; font-size: 18px; }
.paso-t { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; padding-top: var(--s-2); }
.fm-notas { margin: 0; padding: 0 0 0 var(--s-4); font-family: var(--ff-sans); font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.fm-notas li { margin-bottom: var(--s-2); }

/* Plantilla (bloque) */
.plantilla { background: var(--bg-papel); color: var(--tinta-950); padding: clamp(56px, 7vw, 120px) 0; }
.plantilla-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.plantilla-h { color: var(--tinta-950); font-family: var(--ff-display); font-weight: 700; font-size: clamp(44px, 5.5vw, 104px); line-height: 0.9; text-transform: uppercase; margin: 0 0 var(--s-4); }
.plantilla-p { font-family: var(--ff-sans); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; max-width: 46ch; margin: 0 0 var(--s-4); color: var(--fg-papel); }
.plantilla-hojas { font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); margin: 0; }
.plantilla-ver { font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); text-decoration: underline; text-underline-offset: 3px; }
.plantilla .lead-ok a { color: var(--tinta-950); }

/* Modo «mi hueco» */
.hueco-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s-4); align-items: end; margin-top: var(--s-6); max-width: 980px; }
.hueco-campo label { display: block; font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; margin-bottom: var(--s-2); }
.hueco-input { display: flex; align-items: center; border: 1px solid var(--papel-300); background: var(--papel-100); height: 56px; }
.hueco-input input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 var(--s-3); font-family: var(--ff-cifra); font-weight: 800; font-size: 22px; color: var(--tinta-950); }
.hueco-input span { padding: 0 var(--s-3); font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; color: var(--fg-papel-2); }
.hueco-btn { height: 56px; padding: 0 var(--s-6); font-family: var(--ff-lectura); font-weight: 700; font-size: 15px; color: var(--papel-100); background: var(--tinta-950); border: 0; border-radius: var(--r-0); cursor: pointer; }
.hueco-btn:hover { background: var(--accent); color: var(--tinta-950); }
.hueco-aire { margin: var(--s-5) 0 0; font-family: var(--ff-sans); font-size: 15px; max-width: 70ch; padding: var(--s-3) var(--s-4); border: 1px solid var(--papel-300); }
.hueco-res { margin-top: var(--s-8); max-width: 820px; }
.hueco-res-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: 0.95; text-transform: uppercase; margin: var(--s-7) 0 var(--s-3); color: var(--tinta-950); }
.hueco-mejor { background: var(--papel-100); padding: var(--s-6); display: grid; gap: var(--s-2); }
.hueco-mejor-nombre { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 4vw, 72px); line-height: 0.95; text-transform: uppercase; }
.hueco-mejor-datos { margin: 0; font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); }
.hueco-mejor-precio { margin: 0; font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(28px, 2.6vw, 44px); font-variant-numeric: tabular-nums; }
.hueco-mejor-ctas { margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hueco-cta { display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s-5); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); background: var(--accent); text-decoration: none; border-radius: var(--r-0); }
.hueco-cta:hover { background: var(--llama-300); }
.hueco-cta--ghost { background: transparent; border: 1px solid var(--papel-300); }
.hueco-cta--ghost:hover { background: var(--tinta-950); color: var(--papel-100); }
.hueco-lista { list-style: none; margin: 0; padding: 0; font-family: var(--ff-sans); font-size: 15px; }
.hueco-lista li { padding: var(--s-2) 0; border-top: 1px solid var(--tinta-950); }
.hueco-lista a { font-family: var(--ff-lectura); font-weight: 700; color: var(--tinta-950); }
.hueco-lista--no { opacity: 0.7; }
.hueco-nada { font-family: var(--ff-sans); font-size: 17px; max-width: 48ch; padding: var(--s-4); border: 2px dashed var(--tinta-950); margin: 0; }

/* /plantilla (página aparte, sin header) */
.plantilla-pagina { background: var(--bg-papel); color: var(--tinta-950); min-height: 100vh; }
.plantilla-cab { padding: var(--s-6) var(--gutter); border-bottom: 2px solid var(--tinta-950); display: grid; gap: var(--s-2); }
.plantilla-cab-t { margin: 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 15px; }
.plantilla-cab-p { margin: 0; font-family: var(--ff-sans); font-size: 14px; color: var(--fg-papel-2); }
.plantilla-cab-acciones { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.plantilla-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s-5); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); background: var(--accent); text-decoration: none; }
.plantilla-btn--ghost { background: transparent; border: 1px solid var(--papel-300); }
.plantilla-vista { padding: var(--gutter); overflow: auto; background: var(--papel-200); }
.plantilla-vista svg { display: block; background: var(--blanco); width: 100%; height: auto; max-width: 100%; }   /* previsualización escalada; el 1:1 solo en ?descarga=1 y ?print=1 */
.plantilla-hoja { page-break-after: always; break-after: page; overflow: hidden; background: var(--blanco); }
.plantilla-hoja svg { display: block; }
.plantilla-pagina--print { background: var(--blanco); }

@media (max-width: 1080px) {
  .sel { grid-template-columns: 1fr 1fr; }
  .hoja-dibujos, .ficha-mueble-grid, .plantilla-grid { grid-template-columns: 1fr; }
  .hueco-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hoja { padding-top: 88px; }
  .sel { grid-template-columns: 1fr; }
  .hoja-cotas { grid-template-columns: 1fr; gap: var(--s-4); }
  .hueco-form { grid-template-columns: 1fr; }
  .paso { grid-template-columns: 44px 44px minmax(0, 1fr); }
  .paso-n, .paso-pic { width: 44px; height: 44px; border-width: 2px; }
  .paso-pic svg { width: 38px; height: 38px; }
}

/* Hito 26: la navbar es UNA en toda la web — carbón al 92 % con blur, wordmark y enlaces en papel.
   Antes, las páginas de papel (guías, legales, /en-tu-mueble) llevaban un header crema con la tinta
   invertida: eran dos navbars distintas y la crema no leía como la marca. Lo único que cambia en
   papel es que el fondo está SIEMPRE puesto (no solo con scroll), porque debajo hay página clara. */
body.taller .header { background: rgb(var(--carbon-rgb) / .92); backdrop-filter: blur(12px); }

/* Móvil: el alzado entra en el primer viewport (contrato FIRST VIEWPORT) y las cotas se leen */
@media (max-width: 760px) {
  .hoja .container { display: flex; flex-direction: column; }
  .hoja-h { order: 1; }
  .hoja-para, .hoja-aviso { order: 2; }
  .hoja-dibujos { order: 3; }
  .hoja-p { order: 4; margin-top: var(--s-6); }
  .sel { order: 5; }
  .hoja-cotas { order: 6; }
  .hoja-aire { order: 7; }
  .dibujo .dib-cota text { font-size: 6.5px; }
}

/* Diseño en pruebas (hito 04 v2): etiqueta obligatoria mientras nadie haya montado el mueble */
.fm-pruebas { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; max-width: 60ch; margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 2px solid var(--papel-100); color: var(--papel-100); }
.plantilla-cab-pruebas { margin: 0; font-family: var(--ff-sans); font-size: 14px; max-width: 70ch; padding: var(--s-2) var(--s-3); border: 1px solid var(--papel-300); color: var(--tinta-950); }

/* ═══════════════════════════════════════════════════════════════════════════
   HITO 05 — landings, guías, puntos de venta, /marca, legal
   Landings: carbón, cabecera mínima, un CTA. Guías y legal: panel de papel de lectura (`body.taller`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* cabecera mínima (landings): wordmark + un CTA, sin nav */
.header--minimal .header-inner { justify-content: space-between; }
.header-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s-5); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--fg); background: transparent; border: 2px solid var(--fg); text-decoration: none; border-radius: var(--r-0); white-space: nowrap; }   /* fantasma: el único sólido de llama del primer viewport es el CTA del hero */
.header-cta:hover { background: var(--fg); color: var(--tinta-950); }

/* landing: hero */
.landing-hero { background: var(--bg); color: var(--fg); padding: calc(clamp(88px, 6vw, 100px) + var(--promobar-offset)) 0 clamp(64px, 7vw, 120px); }   /* ≥ 88 px: el header fijo mide 57-65 px; ≤ 108 para que el CTA entre en 900 px */
.landing-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.landing-video { max-width: 400px; }   /* 9:16 → 711 px de alto: el hero entero cabe en 900 px */
.landing-video { margin: 0; position: relative; }
.landing-video .video-sonido { top: var(--s-3); }   /* arriba a la derecha del vídeo, como en la ficha; abajo pisaba el pie */
.landing-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--bg-2); display: block; border-radius: var(--r-0); }
.landing-video figcaption { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-3); }
.landing-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(56px, 8vw, 150px); line-height: 0.88; letter-spacing: -0.005em; text-transform: uppercase; margin: 0 0 var(--s-5); max-width: 12ch; text-wrap: balance; }
.landing-h-l { display: block; }
.landing-h-l--acento { color: var(--tinta-950); }
.landing-h--una { max-width: 14ch; }
.landing-p { font-family: var(--ff-sans); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; max-width: 36ch; margin: 0 0 var(--s-6); }
.landing-p--ancha { max-width: 52ch; }
.landing-lecturas { color: var(--fg); margin-bottom: var(--s-4); }
.landing-lecturas dt { font-size: clamp(34px, 3.2vw, 56px); white-space: nowrap; }
.landing-cta-p { margin: var(--s-6) 0 0; }
/* acto de la mano: titular a la izquierda, pictograma grande a la derecha (la banda a sangre no se queda medio vacía) */
.landing-mano .acto-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 120px); align-items: center; }
.landing-mano .acto-picto { grid-column: 2; grid-row: 1 / span 2; width: clamp(160px, 24vw, 340px); margin: 0; }
.landing-mano .acto-h { grid-column: 1; max-width: 14ch; }
.landing-mano .acto-p { grid-column: 1; }
.landing-cta { display: inline-flex; align-items: center; height: 56px; padding: 0 var(--s-7); font-family: var(--ff-lectura); font-weight: 700; font-size: 15px; color: var(--tinta-950); background: var(--accent); text-decoration: none; border-radius: var(--r-0); }
.landing-cta:hover { background: var(--llama-300); }
.landing-confianza .landing-cta-p { margin-top: clamp(32px, 4vw, 64px); }

/* /reveal: apagada (el plano) / encendida (el salón). Contenedor .revela: .reveal es la utilidad legada de scroll (opacity 0) */
.revela { display: grid; gap: var(--s-4); margin: var(--s-8) 0 var(--s-4); }
.revela-capa { margin: 0; }
.revela-capa figcaption { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-3); }
.revela-plano { background: var(--bg-papel); padding: clamp(16px, 3vw, 48px); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.revela-plano .dibujo { width: 100%; max-height: 100%; }
.revela-capa--encendida img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-2); }
.revela-controles { display: flex; gap: var(--s-2); }
.revela-btn { height: 48px; padding: 0 var(--s-5); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--fg); background: transparent; border: 2px solid var(--fg); border-radius: var(--r-0); cursor: pointer; }
.revela-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--tinta-950); color: var(--tinta-950); }
.revela-nota { font-family: var(--ff-sans); font-size: 14px; color: var(--fg-2); max-width: 60ch; margin: var(--s-4) 0 0; }
html.js .revela { grid-template-columns: 1fr; grid-template-rows: auto auto; }
html.js .revela-capa { grid-column: 1; grid-row: 1; transition: opacity var(--dur-3) var(--ease-out); }
html.js .revela-capa--encendida { opacity: 0; }
html.js .revela.is-encendida .revela-capa--encendida { opacity: 1; }
html.js .revela.is-encendida .revela-capa--apagada { opacity: 0; }
html.js .revela-controles { grid-column: 1; grid-row: 2; }
html.js .revela-controles { display: flex; }
.revela-controles { display: none; }   /* sin JS no hay nada que conmutar: las dos capas se ven una tras otra */

/* /empieza: tres bloques, tres CTAs */
.empieza-lista { list-style: none; margin: clamp(32px, 4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: none; }
.empieza-card { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: var(--s-3); min-height: 100%; padding: var(--s-5); background: var(--bg-2); color: var(--fg); text-decoration: none; border: 2px solid var(--bg-2); transition: border-color var(--dur-2) var(--ease-out); }
.empieza-card:hover { border-color: var(--tinta-950); }
.empieza-n { font-family: var(--ff-cifra); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; color: var(--fg-2); }
.empieza-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg); }
.empieza-picto { width: 100%; aspect-ratio: 4 / 5; padding: 18%; box-sizing: border-box; color: var(--tinta-950); background: var(--bg); }
.empieza-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 2.8vw, 48px); line-height: 0.95; text-transform: uppercase; }
.empieza-p { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.empieza-cta { font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); }
.empieza-pie { font-family: var(--ff-sans); font-size: 15px; color: var(--fg-2); margin: var(--s-8) 0 0; }
.empieza-pie a { color: var(--fg); }

/* guías y legal: hoja de lectura sobre papel */
.guia, .legal { background: var(--bg-papel); color: var(--tinta-950); padding: calc(104px + var(--promobar-offset)) 0 clamp(56px, 7vw, 120px); }   /* 104 = header fijo (65) + aire */
.guia-miga { display: flex; gap: var(--s-2); font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-6); color: var(--fg-papel-2); }
.guia-miga a { color: var(--fg-papel-2); text-decoration: none; }
.guia-miga a:hover { color: var(--tinta-950); }
.guia-h { color: var(--tinta-950); font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 5.5vw, 104px); line-height: 0.92; text-transform: uppercase; margin: 0 0 var(--s-5); max-width: 18ch; text-wrap: balance; }
.guia-lead { font-family: var(--ff-sans); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; max-width: 56ch; margin: 0 0 var(--s-4); }
.guia-fecha { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); margin: 0 0 clamp(32px, 4vw, 64px); }
/* hito 34: la portada abre la entrada. A dos columnas desde 1080 (título y lead a la izquierda, foto 16:9 a la
   derecha, centrados entre sí): llena el hueco que dejaba el H1 de 18ch y la foto entra en la primera pantalla.
   Por debajo, el H1 encima y la foto debajo. */
.guia-cab--portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); align-items: center; }
.guia-cab--portada .guia-fecha { margin-bottom: 0; }
.guia-portada, .guia-fig picture, .blog-tarjeta-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-papel-3); }
.guia-portada img, .guia-fig img, .blog-tarjeta-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guia-fig { margin: var(--s-6) 0 0; }
.guia-fig figcaption { margin-top: var(--s-3); max-width: 62ch; font-family: var(--ff-sans); font-size: 14px; line-height: 1.45; color: var(--fg-papel-2); }
.guia-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 96px); align-items: start; margin-top: clamp(32px, 4vw, 64px); }   /* el margen de la fecha lo anula el reset del último <p> */
.guia-sec { margin: 0 0 clamp(28px, 3vw, 44px); }
.guia-picto { margin: var(--s-6) 0 0; }   /* a todo el ancho de la columna: pictograma que se lee a un metro */
.dibujo--seccion .dib-oculto { stroke-width: 1.4; stroke-dasharray: 3 2; }
.dibujo--seccion .dib-llama-linea { stroke-width: 1.8; }
.dibujo--seccion .dib-cota line { stroke-width: 0.9; }
.dibujo--seccion .dib-cota text { font-size: 7px; font-weight: 700; }
.guia-picto .dibujo { width: 100%; height: auto; display: block; }
.guia-picto figcaption { margin-top: var(--s-3); font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.dibujo .dib-flecha path { fill: none; stroke: var(--tinta-950); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dibujo .dib-flecha text { fill: var(--tinta-950); font-size: 7px; font-weight: 700; }
.guia-h2 { color: var(--tinta-950); font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 44px); line-height: 0.95; text-transform: uppercase; margin: 0 0 var(--s-3); }
.guia-p { font-family: var(--ff-sans); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; max-width: 62ch; margin: 0; }
.guia-aside { position: sticky; top: calc(80px + var(--promobar-offset)); border-top: 1px solid var(--papel-300); padding-top: var(--s-4); }
.guia-aside-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: 0.95; text-transform: uppercase; margin: 0 0 var(--s-4); color: var(--tinta-950); }
.guia-cifras { margin: 0; display: grid; gap: var(--s-4); }
.guia-cifras div { border-top: 1px solid var(--papel-300); padding-top: var(--s-3); }
.guia-cifras dt { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; letter-spacing: -0.01em; }
.guia-cifras dd { margin: var(--s-2) 0 0; font-family: var(--ff-lectura); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-papel-2); }
.guia-faq { margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--papel-300); }
.guia-faq-lista { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.guia-faq-lista dt { font-family: var(--ff-headline); font-weight: 700; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.1; margin: 0 0 var(--s-2); }
.guia-faq-lista dd { margin: 0; font-family: var(--ff-sans); font-size: 15px; line-height: 1.5; }
.guia-cta { margin-top: clamp(48px, 6vw, 96px); padding: clamp(48px, 6vw, 96px) 0; }
.guia-cta .acto-h { font-size: clamp(48px, 7vw, 132px); }
.guia-cta-p { margin: var(--s-6) 0 0; }
.guia-cta .hueco-cta { background: var(--tinta-950); color: var(--papel-100); }
.guia-cta .hueco-cta:hover { background: var(--accent); color: var(--tinta-950); }
.guia-mas { margin-top: clamp(40px, 5vw, 80px); }
.guia-mas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.guia-mas-lista a { display: block; padding: var(--s-4) 0; border-top: 1px solid var(--papel-300); font-family: var(--ff-headline); font-weight: 700; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.15; color: var(--tinta-950); text-decoration: none; }
.guia-mas-lista a:hover { color: var(--fg-papel-2); }
/* ─────────────────────────────────────────
   BLOG · hub /guia/ (hito 26)
   El índice numerado a lo largo se sustituye por buscador + tarjetas: con siete entradas y las que
   vengan, la pregunta es «¿dónde está la mía?», no «¿cuántas hay?». La búsqueda ocurre en el
   navegador (firecool.js); sin JS el campo no filtra y debajo siguen las siete enteras.
───────────────────────────────────────── */
/* hito 34: blog que crece. Cabecera a dos columnas desde 1080 (título y lead · buscador), chips de categoría
   sobre la rejilla y tarjetas con portada 16:9 a dos columnas con 40 px de calle. */
.blog-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem); gap: clamp(32px, 4vw, 80px); align-items: end; }
.blog-cab .guia-h { max-width: 10ch; }   /* «El fuego, / explicado.» en dos líneas con la condensada Y con la de reserva: si no, el H1 salta de dos a una al cargar la fuente y mueve todo el hub (CLS 0,058 medido) */
.blog-cab .guia-lead { margin-bottom: 0; }
.blog-cab .blog-buscar { margin: 0; }
.blog-buscar { margin: clamp(24px, 3vw, 44px) 0 0; }
.blog-buscar-label { display: block; font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-papel-2); margin-bottom: var(--s-2); }
.blog-buscar-row { display: flex; align-items: center; gap: var(--s-3); max-width: 46rem; height: clamp(58px, 4.6vw, 76px); padding: 0 var(--s-4); border: 1px solid var(--papel-300); background: var(--papel-100); border-radius: var(--r-0); }
.blog-buscar-row:focus-within { outline: 3px solid var(--llama-papel); outline-offset: 2px; }
.blog-buscar-lupa { flex: none; color: var(--tinta-950); }
.blog-q { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: none; background: transparent; color: var(--tinta-950); font-family: var(--ff-sans); font-size: clamp(18px, 1.6vw, 26px); }
.blog-q::placeholder { color: var(--fg-papel-2); opacity: 1; }
.blog-q:focus { outline: none; }
.blog-q::-webkit-search-cancel-button, .blog-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.blog-buscar-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--fg-papel-2); cursor: pointer; }
.blog-buscar-x:hover { color: var(--tinta-950); }
.blog-buscar-noscript { margin: var(--s-3) 0 0; font-family: var(--ff-sans); font-size: 14px; color: var(--fg-papel-2); }

.blog-cats { margin: clamp(32px, 3.6vw, 56px) 0 clamp(24px, 2.6vw, 40px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--papel-300); }
.blog-cats-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.blog-cat { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border: 1px solid var(--papel-300); border-radius: var(--r-0); font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-950); text-decoration: none; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.blog-cat:hover { background: var(--bg-papel-2); }
.blog-cat[aria-current="true"] { background: var(--tinta-950); color: var(--papel-100); }
.blog-cat:focus-visible { outline: 3px solid var(--llama-papel); outline-offset: 2px; }
.blog-res { margin-top: 0; }
.blog-res-eti { margin: 0 0 var(--s-5); font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); }
.blog-res-eti:empty { display: none; }

.blog-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 4.4vw, 72px) 40px; }
.blog-tarjeta-a { display: flex; flex-direction: column; height: 100%; color: var(--tinta-950); text-decoration: none; }
.blog-tarjeta-img img { transition: transform var(--dur-3) var(--ease-out); }
.blog-tarjeta-a:hover .blog-tarjeta-img img { transform: scale(1.03); }
.blog-tarjeta-txt { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--s-3); padding-top: var(--s-5); }
.blog-tarjeta-cat { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-papel-2); }
.blog-tarjeta-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(26px, 2.2vw, 40px); line-height: 0.96; text-transform: uppercase; text-wrap: balance; }
.blog-tarjeta-p { max-width: 60ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.45; color: var(--fg-papel); }
.blog-tarjeta-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--papel-300); }
.blog-tarjeta-leer { font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.blog-tarjeta-fecha { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.blog-tarjeta-a:hover .blog-tarjeta-leer { color: var(--llama-papel); }
/* El mejor resultado se invierte a tinta, como la opción elegida del asistente, y ocupa la fila entera en
   horizontal: la portada a la izquierda y el texto a la derecha. */
.blog-tarjeta--mejor { grid-column: 1 / -1; }
.blog-tarjeta--mejor .blog-tarjeta-a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--tinta-950); color: var(--papel-100); }
.blog-tarjeta--mejor .blog-tarjeta-txt { justify-content: center; padding: clamp(24px, 3vw, 48px); }
.blog-tarjeta--mejor .blog-tarjeta-h { font-size: clamp(30px, 2.8vw, 52px); }
.blog-tarjeta--mejor .blog-tarjeta-p, .blog-tarjeta--mejor .blog-tarjeta-cat, .blog-tarjeta--mejor .blog-tarjeta-fecha { color: var(--bg-papel-3); }
.blog-tarjeta--mejor .blog-tarjeta-pie { margin-top: var(--s-3); border-top-color: var(--bg-papel-3); }
.blog-tarjeta--mejor .blog-tarjeta-a:hover .blog-tarjeta-leer { color: var(--tinta-950); }
@media (prefers-reduced-motion: reduce) { .blog-cat, .blog-tarjeta-img img { transition: none; } .blog-tarjeta-a:hover .blog-tarjeta-img img { transform: none; } }

.blog-nada { border-top: 1px solid var(--papel-300); padding-top: clamp(20px, 2.4vw, 36px); }
.blog-nada-h { margin: 0 0 var(--s-3); font-family: var(--ff-display); font-weight: 700; font-size: clamp(32px, 3vw, 56px); line-height: 0.96; text-transform: uppercase; color: var(--tinta-950); }
.blog-nada-p { margin: 0; max-width: 56ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg-papel); }
.blog-nada-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.blog-nada-ctas .camino-cta { margin-top: 0; }

/* ─────────────────────────────────────────
   /preguntas-frecuentes (hito 26)
   Las generales, en corto y con enlace a quien lo desarrolla. Las fichas conservan su FAQ propia.
───────────────────────────────────────── */
.faq-lista { margin: clamp(24px, 3vw, 48px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 80px); }
.faq-item { border-top: 1px solid var(--papel-300); padding: clamp(20px, 2.2vw, 34px) 0; }
.faq-q { margin: 0 0 var(--s-3); font-family: var(--ff-headline); font-weight: 700; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.08; color: var(--tinta-950); }
.faq-a { margin: 0; }
.faq-p { margin: 0; max-width: 54ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.55; color: var(--fg-papel); }
.faq-mas { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: var(--s-3); padding: var(--s-2) 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--llama-papel); }
.faq-mas-destino { font-weight: 400; font-size: 13px; color: var(--fg-papel-2); }
.faq-mas:hover { color: var(--tinta-950); }

.legal-inner { max-width: 76ch; }
.legal-h { font-size: clamp(40px, 5vw, 88px); }
.legal-sec { margin: 0 0 clamp(24px, 3vw, 40px); scroll-margin-top: 90px; }
.legal-sec .guia-p { max-width: none; }
.legal-otras { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: clamp(32px, 4vw, 56px); padding-top: var(--s-5); border-top: 1px solid var(--papel-300); font-family: var(--ff-lectura); font-size: 13px; letter-spacing: 0.04em; }
.legal-otras a { color: var(--tinta-950); }

/* /marca */
.marca { background: var(--bg); color: var(--fg); padding: calc(clamp(96px, 9vw, 150px) + var(--promobar-offset)) 0 clamp(64px, 7vw, 120px); }
.marca-spine { font-family: var(--ff-display); font-weight: 700; font-size: clamp(64px, 11vw, 220px); line-height: 0.88; letter-spacing: -0.005em; text-transform: uppercase; margin: 0 0 var(--s-6); max-width: 10ch; text-wrap: balance; }
.marca-lead { text-align: left;  font-family: var(--ff-sans); font-size: clamp(18px, 1.6vw, 26px); line-height: 1.4; max-width: 44ch; margin: 0 0 clamp(40px, 5vw, 80px); }
.marca-foto { margin: clamp(40px, 5vw, 80px) 0; }   /* el margen va en la figura: un reset global deja a 0 el último <p> del contenedor */
.marca-foto img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; }
.marca-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-bottom: clamp(40px, 5vw, 80px); }
.marca-sec { border-top: 2px solid var(--fg); padding-top: var(--s-4); }
.marca-h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 44px); line-height: 0.95; text-transform: uppercase; margin: 0 0 var(--s-3); color: var(--fg); }
.marca-p { text-align: left;  font-family: var(--ff-sans); font-size: 16px; line-height: 1.55; margin: 0; color: var(--fg); }
.marca-anafora { font-family: var(--ff-display); font-weight: 700; font-size: clamp(32px, 4vw, 72px); line-height: 0.95; text-transform: uppercase; margin: 0; color: var(--papel-300); }
.marca-legal { margin: clamp(32px, 4vw, 56px) 0 0; font-family: var(--ff-sans); font-size: 14px; color: var(--fg-2); }
.marca-legal span { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: var(--s-2); }

/* footer: enlaces legales */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-legal a { color: var(--fg-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--fg); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }

@media (max-width: 1080px) {
  .landing-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .guia-grid { grid-template-columns: 1fr; }
  .guia-aside { position: static; }
  .marca-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  /* hito 34: la cabecera de la entrada y la del hub se apilan (H1 encima, foto o buscador debajo) */
  .guia-cab--portada, .blog-cab { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .landing-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .landing-video { max-width: 320px; }
  .landing-lecturas { grid-template-columns: 1fr; }
  .landing-mano .acto-inner { display: block; }
  .landing-mano .acto-picto { width: clamp(88px, 8vw, 136px); margin: 0 0 var(--s-6); }
  .empieza-lista { grid-template-columns: 1fr; }
  .guia-faq-lista, .guia-mas-lista { grid-template-columns: 1fr; }
  .guia, .legal { padding-top: calc(84px + var(--promobar-offset)); }
  /* hito 26 · 34: una columna; el mejor resultado se apila (portada arriba, texto debajo) */
  .blog-tarjetas, .faq-lista { grid-template-columns: 1fr; }
  .blog-tarjeta--mejor .blog-tarjeta-a { grid-template-columns: 1fr; }
  .blog-cat { padding: 0 var(--s-3); font-size: 12px; }   /* cinco chips en dos líneas a 390, no en tres */
  .blog-nada-ctas .camino-cta { width: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HITO 06 — pulido: salto al contenido, aviso de cookies, 404, campaña, objetivos táctiles
   ═══════════════════════════════════════════════════════════════════════════ */
.salto { position: absolute; left: var(--s-3); top: -100px; z-index: 1000; padding: var(--s-2) var(--s-4); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--papel-100); background: var(--tinta-950); border-radius: var(--r-0); transition: top var(--dur-2) var(--ease-out); }
.salto:focus-visible { top: var(--s-3); outline: 2px solid var(--tinta-950); outline-offset: 2px; }

/* aviso de cookies: papel, dos botones, abajo; solo aparece con IDs de medición y sin decisión guardada */
.aviso-cookies { position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 900; max-width: 720px; margin: 0 auto; padding: var(--s-4) var(--s-5); background: var(--papel-100); color: var(--tinta-950); border: 1px solid var(--papel-300); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-5); align-items: center; }
.aviso-cookies-p { margin: 0; font-family: var(--ff-sans); font-size: 14px; line-height: 1.45; }
.aviso-cookies-p a { color: var(--tinta-950); }
.aviso-cookies-botones { margin: 0; display: flex; gap: var(--s-2); }
.aviso-cookies-btn { height: 44px; padding: 0 var(--s-4); font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); background: transparent; border: 1px solid var(--papel-300); border-radius: var(--r-0); cursor: pointer; }
.aviso-cookies-btn--si { background: var(--tinta-950); color: var(--papel-100); }
.aviso-cookies-btn:hover { background: var(--accent); border-color: var(--tinta-950); color: var(--tinta-950); }

/* 404 */
.e404-codigo { margin: 0 0 var(--s-4); font-family: var(--ff-cifra); font-weight: 800; font-size: 14px; letter-spacing: 0.12em; color: var(--fg-2); }
.e404-lista { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); max-width: 960px; }
.e404-lista a { display: block; padding: var(--s-4) 0; border-top: 2px solid var(--fg); font-family: var(--ff-headline); font-weight: 700; font-size: clamp(18px, 1.4vw, 24px); color: var(--fg); text-decoration: none; }
.e404-lista a:hover { color: var(--tinta-950); }

/* campaña: claim, fecha real, cuenta atrás, productos con precio de campaña y anterior legal */
.campana-estado { margin: 0 0 var(--s-4); font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(16px, 1.3vw, 20px); letter-spacing: 0.02em; color: var(--tinta-950); }
.campana-cuenta { display: flex; gap: var(--s-6); margin: 0 0 clamp(32px, 4vw, 64px); }
.campana-cuenta > div { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 2px solid var(--fg); min-width: 96px; }
.campana-cifra { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(40px, 5vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.campana-uni { font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.campana-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.campana-card { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--bg-2); color: var(--fg); text-decoration: none; border: 2px solid var(--bg-2); }
.campana-card:hover { border-color: var(--tinta-950); }
.campana-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--bg); }
.campana-nombre { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 36px); line-height: 0.95; text-transform: uppercase; }
.campana-precio { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; }
.campana-anterior { font-family: var(--ff-lectura); font-size: 13px; color: var(--fg-2); }
.campana-cta { font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; color: var(--tinta-950); }
.campana-legal { margin: var(--s-6) 0 0; font-family: var(--ff-sans); font-size: 13px; color: var(--fg-2); max-width: 60ch; }
.landing-cta--ghost { background: transparent; color: var(--fg); border: 2px solid var(--fg); margin-left: var(--s-3); }
.landing-cta--ghost:hover { background: var(--fg); color: var(--tinta-950); }

/* objetivos táctiles ≥ 44 px: el punto del mapa */

@media (max-width: 760px) {
  .aviso-cookies { grid-template-columns: 1fr; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); }
  .aviso-cookies-botones { justify-content: flex-start; }
  .campana-cuenta { gap: var(--s-3); }
  .campana-cuenta > div { min-width: 0; flex: 1; }
  .landing-cta--ghost { margin: var(--s-3) 0 0; }
}

/* objetivos táctiles/de clic ≥ 24 px de alto en enlaces de texto (WCAG 2.5.8): nav, footer, comparador, migas */
.nav-link, .nav a:not(.lang-opt) { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.footer li { padding: 0; }
.footer li a { display: inline-block; padding: var(--s-2) 0; }
.compara-ver { display: inline-block; padding: var(--s-2) var(--s-2); margin: calc(-1 * var(--s-2)); }
.guia-miga a { display: inline-block; padding: var(--s-1) 0; }

/* crítica hito 06: las anclas del nav (#modelos, #modelo…) aterrizan bajo el header fijo */
section[id], .footer[id] { scroll-margin-top: 72px; }
/* etiqueta gigante: qué es, en tres hechos, para quien entra sin pasar por la home */
.etq-que { margin: var(--s-2) 0 var(--s-4); font-family: var(--ff-lectura); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); }
/* (hito 26) el fondo de las páginas de papel lo pone el bloque «navbar única» de más arriba: carbón
   al 92 %, siempre puesto, para que el contraste del wordmark no dependa de lo que haya debajo. */


/* ═══════════════════════════════════════════════════════════════════════════
   HITO 30 — /muebles/ y la ficha del mueble
   Todo el contenido sale del API (medidas, piezas, colocación, pasos): aquí solo hay forma.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Índice ── */
.mu-tarjetas { list-style: none; margin: clamp(28px, 3.4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 44px); }
.mu-tarjeta-a { display: grid; gap: var(--s-4); padding: var(--s-5) 0 0; border-top: 1px solid var(--papel-300); color: var(--tinta-950); text-decoration: none; }
/* Con un solo mueble, media rejilla vacía se lee como un error: la tarjeta sola ocupa la fila entera
   y se pone en horizontal (dibujo a la izquierda, datos a la derecha). Cuando haya dos, vuelve al 2×N. */
.mu-tarjeta:only-child { grid-column: 1 / -1; }
.mu-tarjeta:only-child .mu-tarjeta-a { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.mu-tarjeta-media { display: block; background: var(--bg-papel-2); padding: var(--s-4); }
/* Con foto no hay marco de papel: la imagen ya viene compuesta sobre carbón (hito 33). */
.mu-tarjeta-media--foto { padding: 0; background: var(--carbon-900); }
.mu-tarjeta-media--foto img { width: 100%; height: auto; display: block; }
.mu-tarjeta-media .dibujo { width: 100%; height: auto; display: block; }
.mu-tarjeta-cuerpo { display: grid; gap: var(--s-2); }
.mu-tarjeta-id { font-family: var(--ff-cifra); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; color: var(--fg-papel-2); }
.mu-tarjeta-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.4vw, 44px); line-height: 0.98; text-transform: uppercase; text-wrap: balance; }
.mu-tarjeta-p { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; color: var(--fg-papel); }
.mu-tarjeta-leer { font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.mu-tarjeta-a:hover .mu-tarjeta-leer { color: var(--llama-papel); }
.mu-mas { margin: var(--s-5) 0 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); }
.mu-tuyo { margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--papel-300); }
/* En /en-tu-mueble el mismo bloque cae fuera de una hoja de papel, y el carbón de debajo dejaba el
   titular en tinta sobre negro (axe lo cazó): la sección pinta su propio papel. */
.mu-desde-taller { background: var(--bg-papel); color: var(--tinta-950); padding-bottom: clamp(32px, 4vw, 64px); }
.mu-desde-taller .mu-tuyo { margin-top: 0; }
.mu-tuyo-h { margin: 0 0 var(--s-2); font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 44px); line-height: 0.98; text-transform: uppercase; color: var(--tinta-950); }
.mu-tuyo-p { margin: 0 0 var(--s-5); max-width: 56ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg-papel); }

/* ── Ficha del mueble con la PIEL DE LA CASA (hito 33b) ───────────────────
   La ficha deja la plantilla de las guías y usa la gramática de las fichas de
   chimenea: carbón, `pdp-hero`, etiqueta de papel y actos de color. Aquí solo
   vive lo PROPIO de un mueble; el resto son las primitivas de siempre. */

/* La galería en el marco 4:3 de la foto del salón. Las tres vistas antiguas son 16:9 y se
   centran sobre carbón dentro de él: recortarlas a 4:3 (object-fit: cover) les comía el
   mueble por arriba y por abajo, que es justo lo que la ficha tiene que enseñar. */
/* El alto de la foto va ATADO AL VIEWPORT (hito 33c): con el marco 4:3 a ancho libre, en cuanto la
   ventana es más baja que 900 px la foto se salía de la primera pantalla — medido en producción: 30 px
   a 1920 × 900, 70 px a 1920 × 860 y a 1536 × 730, y 130 px a 1920 × 800. Se reserva lo que ocupan
   header, miga y miniaturas (226 px) y el ancho del marco sale del alto que queda, no al revés. */
.mu-hero, .mu-galeria { --mu-gal-max: max(280px, calc(100svh - var(--h-header) - 226px)); }
.mu-galeria .product-gallery-main { aspect-ratio: 4 / 3; max-height: var(--mu-gal-max); width: 100%; margin-inline: auto; background: var(--carbon-900); border-radius: var(--r-0); }
.mu-galeria .product-slide img { object-fit: contain; }
/* Miniaturas algo más pequeñas que en una ficha de producto: aquí solo hay cuatro y cada
   píxel de alto de la cabecera cuenta para que la foto grande entre en la primera pantalla. */
.mu-galeria .product-thumb { width: 72px; border-radius: var(--r-0); }
.mu-galeria .product-thumb.is-active { box-shadow: 0 0 0 2px var(--accent); transform: none; }
/* Sin esto el <picture> es el elemento flex y la foto se queda a su tamaño intrínseco (medido:
   864 px dentro de un marco de 1360). display: contents lo saca del árbol de cajas. */
.mu-galeria .product-slide picture { display: contents; }
/* «Ambiente»: una foto que ilustra cómo queda y no mide nada. Decirlo encima es
   más honesto que dejar que se lea como una medida (regla del hito 29). */
.product-slide-nota {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 2;
  padding: 4px var(--s-3);
  background: rgb(var(--carbon-rgb) / .82); color: var(--papel-100);
  font-family: var(--ff-lectura); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* La etiqueta gigante de un mueble: la misma `.etq` de la ficha de chimenea sin precio ni
   selector, así que no necesita ser pegajosa (no hay nada que recalcular al bajar). */
 /* La etiqueta de un mueble es corta (no hay precio ni selector): centrada con la galería en vez
    de colgando del borde de arriba, que dejaba medio viewport de carbón vacío a su derecha. */
.mu-etq { position: static; align-self: center; }
.mu-etq .etq-que { margin: 0; }

/* ── Dibujo técnico de la lámina (hito 31): tres grosores que no dependen del zoom ── */
.tec { width: 100%; height: auto; display: block; }
.tec rect, .tec line, .tec circle { vector-effect: non-scaling-stroke; }
.tec-contorno { fill: none; stroke: var(--tinta-950); stroke-width: 2px; }
.tec-arista { fill: none; stroke: var(--tinta-950); stroke-width: 1.2px; }
.tec-oculto { fill: none; stroke: var(--tinta-600); stroke-width: 0.8px; stroke-dasharray: 3 2; }
.tec-acento { fill: none; stroke: var(--llama-papel); stroke-width: 1.4px; }
.tec-acento--relleno { fill: rgb(var(--llama-rgb) / .10); }
.tec-eje { stroke: var(--tinta-600); stroke-width: 0.6px; stroke-dasharray: 6 2 1 2; }
.tec-cota line { stroke: var(--tinta-950); stroke-width: 0.6px; }
.tec-cota .tec-ext { stroke: var(--tinta-600); stroke-width: 0.6px; }
.tec-cota text { fill: var(--tinta-950); font-family: var(--ff-cifra); font-size: 4.2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tec-num circle { fill: var(--llama-papel); stroke: none; }
.tec-num .tec-guia { stroke: var(--llama-papel); stroke-width: 0.6px; }
.dibujo--tablero .tec-num text { font-size: 4.4px; }

/* ── El despiece en explosionado: el render de Blender con su capa de números y medidas ── */
.explo { position: relative; }
.explo picture, .explo img { display: block; width: 100%; height: auto; }
.explo-capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.explo-guia { stroke: var(--tinta-600); stroke-width: 1.1; stroke-dasharray: 5 4; opacity: 0.55; }
.explo-globo { fill: var(--llama-papel); }
.explo-n { fill: var(--papel-100); font-family: var(--ff-headline); font-size: 15px; font-weight: 700; }
.explo-medida { fill: var(--tinta-900); font-family: var(--ff-cifra); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  /* halo de papel: media medida cae sobre nogal oscuro y sin él no se lee */
  paint-order: stroke fill; stroke: var(--papel-100); stroke-width: 3.5px; stroke-linejoin: round; }
.explo-aparato { fill: var(--llama-papel); font-family: var(--ff-lectura); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  paint-order: stroke fill; stroke: var(--papel-100); stroke-width: 3.5px; stroke-linejoin: round; }
.tec-num text { fill: var(--papel-100); font-family: var(--ff-headline); font-size: 3.4px; font-weight: 700; }

/* ── Ficha: los cuatro bloques y el aire entre ellos (hito 33b) ── */
.mu-hero { padding-bottom: clamp(32px, 3.6vw, 56px); }
/* La secuencia va A SANGRE: ni contenedor ni titular. El aire lo pone ella. */
.mu-arma { margin-top: clamp(24px, 2.8vw, 48px); }
/* ── Dos detalles en oscuro (hito 33c) ──────────────────────────────────
   Sustituyen a los dos actos de campo LED: en una ficha de mueble el campo
   plano de color rompía el oscuro de la página y chirriaba al lado de la
   secuencia. Aquí manda la foto; el texto la acompaña, no al revés. */
/* La cabecera de un MUEBLE, no la de una chimenea: como el marco de la foto ahora lo manda el alto
   del viewport, con las columnas 1,25fr/1fr de la ficha de producto se abría un vacío entre la foto
   y la etiqueta en pantallas anchas (medido a 1920: 678 px de foto en una columna de 1.000). La
   columna de la galería mide lo que mide la foto —el ancho SALE del alto disponible— y el conjunto
   se centra. Solo en escritorio: en móvil manda el apilado de `.pdp-hero-grid`.
   OJO, pagado: con `auto` en vez de una medida, la columna colapsa (la foto se quedó en 318 px en
   escritorio y en 1 px en móvil, medido), porque dentro había un ancho relativo a esa misma columna. */
@media (min-width: 901px) {
  .mu-hero .pdp-hero-grid { grid-template-columns: minmax(0, calc(var(--mu-gal-max) * 4 / 3)) minmax(320px, 440px); justify-content: center; align-items: center; }
}

.mu-detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(24px, 2.6vw, 44px); }
.mu-detalles > * { min-width: 0; }
.mu-detalle { display: grid; gap: var(--s-3); }
.mu-detalle-h { margin: 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.mu-detalle-foto { margin: 0; }
/* 16:9 y no 4:3: el mueble es largo y bajo, y en 4:3 la foto nadaba sin enseñar nada más. */
.mu-detalle-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--carbon-900); }
.mu-detalle-dato { margin: 0; display: grid; gap: 2px; padding-top: var(--s-3); border-top: 2px solid var(--fg); }
.mu-detalle-v { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(24px, 2.4vw, 36px); line-height: 1; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.mu-detalle-l { font-family: var(--ff-lectura); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.mu-detalle-p { margin: 0; max-width: 46ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg-2); }

/* ── El cierre (hito 33c): la chimenea en rectángulo tumbado y el kit DEBAJO ──
   Antes iban uno al lado del otro y la columna corta dejaba el botón pegado al pie.
   Ahora la tarjeta ocupa el ancho (foto a la izquierda, datos a la derecha), el kit
   va debajo y el bloque termina con aire de verdad antes del pie. */
/* Los márgenes de esta ficha son cortos a propósito: la foto de cabecera creció 61 px al atarse al
   viewport (mejor para vender a ojo) y el cierre apilado suma otro tanto; el aire se recupera aquí
   para que la página no engorde. Medido a 1440 × 900 antes de apretarlos: 3.696 px hasta el kit. */
.mu-cierre { margin-top: clamp(20px, 2vw, 32px); padding-top: clamp(16px, 1.8vw, 28px); border-top: 2px solid var(--fg); padding-bottom: 64px; }
.mu-cierre-h { margin: 0 0 var(--s-4); font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: 0.96; text-transform: uppercase; color: var(--fg); }
/* La tarjeta tumbada, recuperada del hito 33 v1: es la que le gustaba. */
.mu-chim { display: grid; grid-template-columns: clamp(160px, 18vw, 260px) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: center; padding: clamp(16px, 1.8vw, 28px); background: var(--bg-papel); color: var(--tinta-950); text-decoration: none; }
/* La foto de la tarjeta es 3:4 (vertical, la del catálogo): a ancho de tarjeta se iba a 347 px de
   alto y dejaba la mitad derecha vacía. Recortada a una banda tumbada, la tarjeta hace honor al
   nombre y el cierre baja ~130 px. */
.mu-chim img { width: 100%; height: clamp(150px, 14vw, 200px); object-fit: cover; object-position: center 38%; display: block; background: var(--carbon-900); }
/* El cuerpo, en dos columnas: a la izquierda el nombre y la línea; a la derecha, alineados al borde,
   el precio y el enlace. Con una sola columna la tarjeta dejaba medio lado vacío a 1440. */
.mu-chim-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) clamp(24px, 3vw, 56px); align-items: center; }
.mu-chim-h { grid-column: 1; grid-row: 1; align-self: end; }
.mu-chim-p { grid-column: 1; grid-row: 2; align-self: start; }
.mu-chim-precio { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; }
.mu-chim-cta { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
.mu-chim-h { font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 36px); line-height: 0.98; text-transform: uppercase; }
.mu-chim-p { max-width: 60ch; font-family: var(--ff-sans); font-size: 15px; line-height: 1.5; color: var(--fg-papel); }
.mu-chim-precio { font-family: var(--ff-cifra); font-weight: 800; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; color: var(--tinta-950); font-variant-numeric: tabular-nums; }
.mu-chim-cta { font-family: var(--ff-lectura); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--llama-papel); }
.mu-chim:hover .mu-chim-cta { text-decoration: underline; text-underline-offset: 3px; }
/* El kit sigue siendo un panel de PAPEL sobre carbón: dentro manda la tinta. */
.mu-kit { margin-top: clamp(20px, 2.2vw, 32px); scroll-margin-top: calc(var(--h-header) + var(--s-6)); background: var(--bg-papel); color: var(--tinta-950); padding: clamp(24px, 2.6vw, 40px); }
.mu-kit .mu-kit-legal { max-width: 72ch; }
.mu-kit .lead-ok { color: var(--tinta-950); }
.mu-kit .lead-ok a { color: var(--llama-papel); text-decoration: underline; text-underline-offset: 3px; }

/* ── El popup del kit (hito 33b): el mismo formulario, en un <dialog> nativo ──
   Nativo porque Esc, la captura del foco y devolverlo al botón al cerrar salen gratis y bien.
   Sin JS el botón es un ancla a #kit, que sigue existiendo debajo. */
.kit-dlg { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100% - 2 * var(--gutter))); width: 100%; }
.kit-dlg::backdrop { background: rgb(var(--carbon-rgb) / .78); }
.kit-dlg-caja { position: relative; background: var(--bg-papel); color: var(--tinta-950); padding: clamp(28px, 3vw, 44px); }
.kit-dlg-x { position: absolute; top: var(--s-3); right: var(--s-3); width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 1px solid var(--papel-300); color: var(--tinta-950); border-radius: var(--r-0); }
.kit-dlg-x:hover { background: var(--tinta-950); color: var(--papel-100); }
.kit-dlg .lead-ok { color: var(--tinta-950); }
.kit-dlg .lead-ok a { color: var(--llama-papel); text-decoration: underline; text-underline-offset: 3px; }

/* el tablero de corte: las piezas en papel sobre la hoja, con su nombre dentro */
.dibujo--tablero .dib-tablero-nominal { fill: none; stroke: var(--tinta-600); stroke-width: 0.6; stroke-dasharray: 3 2; }
.dibujo--tablero .dib-pieza rect { fill: var(--papel-100); stroke: var(--tinta-950); stroke-width: 0.8; }
.dibujo--tablero .dib-pieza-n { font-family: var(--ff-headline); font-weight: 700; font-size: 4.6px; fill: var(--tinta-950); }
.dibujo--tablero .dib-pieza-m { font-family: var(--ff-lectura); font-size: 3.6px; fill: var(--fg-papel-2); }

/* ── Ficha: los once pasos ── */
.mu-pasos { list-style: none; margin: 0; padding: 0; counter-reset: mp; display: grid; gap: var(--s-3); }
.mu-paso { display: grid; grid-template-columns: 34px 18px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.mu-paso-pic svg { width: 34px; height: 34px; display: block; fill: none; stroke: var(--tinta-950); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mu-paso-pic svg .pic-oculto { stroke-dasharray: 2 1.6; }
.mu-paso-pic svg .pic-corte { fill: var(--papel-300); }
/* El número va en tinta, no en llama: la lámina se apoya en papel-200 y ahí el --llama-papel se queda
   en 4,3:1 (axe lo cazó en el «10»). El acento de la lámina ya lo pone el pictograma. */
.mu-paso-n { font-family: var(--ff-cifra); font-weight: 800; font-size: 14px; color: var(--tinta-950); padding-top: 4px; font-variant-numeric: tabular-nums; }
.mu-paso-t { font-family: var(--ff-sans); font-size: 15px; line-height: 1.45; color: var(--fg-papel); }

/* ── Ficha: qué necesitas, piezas y notas ── */
.mu-ferre { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-family: var(--ff-sans); font-size: 16px; color: var(--fg-papel); }
.mu-ferre-n { display: inline-block; min-width: 2.2em; font-family: var(--ff-cifra); font-weight: 800; color: var(--tinta-950); font-variant-numeric: tabular-nums; }
.mu-tabla { width: 100%; border-collapse: collapse; margin-top: clamp(16px, 2vw, 32px); font-family: var(--ff-sans); font-size: 15px; }
.mu-tabla th, .mu-tabla td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--border-papel); color: var(--fg-papel); }
.mu-tabla thead th { font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); border-bottom: 2px solid var(--tinta-950); }
.mu-tabla tbody th { font-weight: 600; color: var(--tinta-950); }

/* ── Ficha: la chimenea y el paquete ── */
.mu-kit-h { margin: 0 0 var(--s-3); font-family: var(--ff-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: 0.96; text-transform: uppercase; color: var(--tinta-950); }
.mu-kit-p { margin: 0 0 var(--s-4); max-width: 52ch; font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; color: var(--fg-papel); }
.mu-kit-legal { margin: var(--s-3) 0 0; font-family: var(--ff-sans); font-size: 13px; line-height: 1.45; color: var(--fg-papel-2); }

@media (max-width: 900px) {
  .mu-tarjetas, .mu-detalles { grid-template-columns: 1fr; }
  /* La tarjeta tumbada, de pie en móvil: a 110 px la foto no se lee. */
  .mu-chim { grid-template-columns: 1fr; }
  .mu-tarjeta:only-child .mu-tarjeta-a { grid-template-columns: 1fr; }
}

/* ── Hojas A3 para imprimir (/muebles/m03-hojas) y para el PDF del paquete ── */
.hojas-pagina { background: var(--bg-papel-3); color: var(--tinta-950); margin: 0; padding: var(--s-5); }
.hoja-a3 { width: 396mm; max-width: 100%; min-height: 273mm; margin: 0 auto var(--s-6); padding: 10mm; background: var(--papel-100); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6mm; break-after: page; page-break-after: always; }
.hoja-a3:last-child { break-after: auto; page-break-after: auto; margin-bottom: 0; }
.hoja-a3-cab, .hoja-a3-pie { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: baseline; font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-papel-2); }
.hoja-a3-cab { border-bottom: 2px solid var(--tinta-950); padding-bottom: 3mm; }
.hoja-a3-pie { border-top: 1px solid var(--border-papel); padding-top: 3mm; }
.hoja-a3-t { font-weight: 700; text-transform: uppercase; color: var(--tinta-950); }
.hoja-a3-url { font-weight: 700; color: var(--tinta-950); }
.hoja-a3-cuerpo { display: grid; align-content: center; }
.hoja-a3-cuerpo .dibujo { width: 100%; height: auto; max-height: 240mm; display: block; }
.hoja-a3-cuerpo--montaje { align-content: start; }
.hoja-a3-cuerpo--montaje .mu-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10mm; }
.hoja-a3-cuerpo--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10mm; align-content: start; }
.hoja-a3-h2 { margin: 0 0 var(--s-2); font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.hoja-a3-cuerpo--lista p { margin: 0 0 var(--s-5); font-family: var(--ff-sans); font-size: 14px; line-height: 1.5; }
@media print {
  .hojas-pagina { background: var(--blanco); padding: 0; }
  .hoja-a3 { width: auto; min-height: 0; margin: 0; padding: 0; background: none; }
}

/* ═══ LA LÁMINA DEL MUEBLE (hito 31) — un plano de taller, no una página de la tienda ═══ */
/* El <html> de la web va en carbón; en la lámina hay que pintarlo también, o el sobrante de la última
   hoja del PDF sale negro (el fondo del raíz es el que pinta el lienzo de la página). */
html.lamina, body.lamina { background: var(--papel-200); color: var(--tinta-900); }
.lam { max-width: 1180px; margin: 0 auto; padding: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 40px) 60px; background: var(--papel-100); }
.lam-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) clamp(16px, 3vw, 40px); align-items: end; padding-bottom: var(--s-5); border-bottom: 3px solid var(--tinta-950); }
.lam-cab-marca { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.lam-wordmark { font-family: var(--ff-display); font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-950); }
.lam-cab-linea { font-family: var(--ff-lectura); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--llama-papel); }
.lam-h1 { margin: 0; font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 52px); line-height: 0.98; text-transform: uppercase; color: var(--tinta-950); }
.lam-cab-datos { margin: var(--s-3) 0 0; font-family: var(--ff-sans); font-size: 15px; line-height: 1.5; color: var(--fg-papel); }
.lam-cab-meta { display: grid; gap: 2px; justify-items: end; font-family: var(--ff-lectura); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); text-align: right; }
.lam-codigo { font-family: var(--ff-cifra); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--tinta-950); }
.lam-render { margin: clamp(20px, 2.6vw, 40px) 0 0; background: var(--carbon-900); }
.lam-render img { display: block; width: 100%; height: auto; }
.lam-bloque { margin-top: clamp(28px, 3.4vw, 56px); }
.lam-h2 { margin: 0 0 var(--s-2); font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; text-transform: uppercase; color: var(--tinta-950); }
.lam-p { margin: 0 0 var(--s-5); max-width: 68ch; font-family: var(--ff-sans); font-size: 14px; line-height: 1.5; color: var(--fg-papel-2); }
/* Las columnas van en proporción al lienzo de cada vista (en centímetros): así la frontal y la lateral
   comparten escala aunque una mida 122 cm y la otra 36. La superior cae bajo la frontal, alineada. */
.lam-vistas-grid { display: grid; grid-template-columns: var(--lienzo-frontal, 174fr) var(--lienzo-lateral, 94fr);
  grid-template-areas: "frontal lateral" "superior hueco"; gap: clamp(12px, 1.6vw, 28px) clamp(16px, 2vw, 34px); align-items: start; }
.lam-vista--frontal { grid-area: frontal; }
.lam-vista--lateral { grid-area: lateral; }
.lam-vista--superior { grid-area: superior; }
.lam-vista { margin: 0; }
.lam-vista figcaption { margin-top: var(--s-2); font-family: var(--ff-lectura); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-papel-2); }
.lam-despiece-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); }
.lam-tabla { width: 100%; border-collapse: collapse; font-family: var(--ff-sans); font-size: 13px; }
.lam-tabla th { text-align: left; font-family: var(--ff-lectura); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-papel-2); border-bottom: 2px solid var(--tinta-950); padding: 0 var(--s-3) var(--s-2) 0; }
.lam-tabla td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--papel-300); color: var(--tinta-900); }
.lam-td-n { width: 2.4em; }
.lam-td-m { font-family: var(--ff-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lam-n { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--llama-papel); color: var(--papel-100); font-family: var(--ff-headline); font-size: 12px; font-weight: 700; }
.lam-lista { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-2); font-family: var(--ff-sans); font-size: 14px; color: var(--fg-papel); }
.lam-lista li { padding-bottom: var(--s-2); border-bottom: 1px solid var(--papel-300); }
.lam-ferre strong { font-family: var(--ff-cifra); font-variant-numeric: tabular-nums; }
.lam-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.lam-paso { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n picto" "t t"; gap: var(--s-2) var(--s-3); align-items: start; }
.lam-paso-n { grid-area: n; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--tinta-950); color: var(--papel-100); font-family: var(--ff-headline); font-size: 13px; font-weight: 700; }
.lam-paso-picto { grid-area: picto; }
/* Sin fill:none los rect del pictograma salen macizos: en el PDF eran diez manchas negras. */
.lam-paso-picto svg { width: 34px; height: 34px; display: block; fill: none; stroke: var(--tinta-950); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lam-paso-picto svg .pic-oculto { stroke-dasharray: 2 1.6; }
.lam-paso-picto svg .pic-corte { fill: var(--papel-300); }
.lam-paso-t { grid-area: t; font-family: var(--ff-sans); font-size: 13px; line-height: 1.45; color: var(--fg-papel); }
.lam-pie { margin-top: clamp(28px, 3.4vw, 52px); padding-top: var(--s-4); border-top: 1px solid var(--papel-300); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-family: var(--ff-lectura); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-papel-2); }
.lam-pie-nota { margin: var(--s-3) 0 0; font-family: var(--ff-sans); font-size: 13px; color: var(--fg-papel-2); }
.lam-salto { height: 0; }

@media (max-width: 900px) {
  .lam-vistas-grid { grid-template-columns: 1fr; grid-template-areas: "frontal" "lateral" "superior"; }
  .lam-despiece-grid { grid-template-columns: 1fr; }
  .lam-cab { grid-template-columns: 1fr; }
  .lam-cab-meta { justify-items: start; text-align: left; }
}

@media print {
  /* Dos hojas A3, ni una más: el plano se lleva a la tienda del tablero doblado, no en un cuadernillo.
     Lo que manda el número de hojas es la altura del render y la del explosionado. */
  @page { size: A3 portrait; margin: 11mm; }
  html.lamina, body.lamina { background: var(--papel-100); }
  .lam { max-width: none; padding: 0; }
  .lam-salto { break-before: page; height: 0; }
  /* solo lo pequeño evita partirse: con los bloques enteros, cada uno se iba a su hoja */
  /* solo lo pequeño evita partirse: con los bloques enteros, cada uno se iba a su hoja.
     El render y el explosionado sí, enteros: si se parten, su fondo se arrastra a la hoja siguiente. */
  .lam-paso, .lam-vista, .lam-tabla tr, .lam-render, .explo { break-inside: avoid; }
  .lam-vistas-grid { gap: 5mm 7mm; }
  .lam-bloque { margin-top: 7mm; }
  .lam-h1 { font-size: 30pt; }
  .lam-h2 { font-size: 15pt; margin-bottom: 1mm; }
  .lam-p { font-size: 8.5pt; margin-bottom: 3mm; }
  .lam-render { margin-top: 6mm; text-align: center; }
  .lam-render img { max-height: 88mm; width: auto; margin: 0 auto; }
  .explo picture, .explo img { max-height: 68mm; width: auto; margin: 0 auto; }
  /* en un SVG, max-height no recorta: hay que darle la altura y dejar el ancho automático */
  .lam-tablero .dibujo--tablero { height: 88mm; width: auto; margin: 0 auto; display: block; }
  .lam-montaje .lam-pasos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3mm; }
  .lam-bloque { margin-top: 4mm; }
  .explo { display: grid; place-items: center; }
  .explo-capa { position: absolute; inset: 0; }
  .lam-tabla { font-size: 8pt; }
  .lam-tabla td, .lam-tabla th { padding: 1mm 2mm 1mm 0; }
  .lam-lista { font-size: 8.5pt; gap: 1mm; margin-bottom: 4mm; }
  .lam-lista li { padding-bottom: 1mm; }
  .lam-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; }
  .lam-paso-t { font-size: 8pt; }
  .lam-pie { font-size: 7.5pt; margin-top: 6mm; }
  .lam-cab-datos { font-size: 9.5pt; }
}


/* ═══ Secuencia por scroll · «Se monta al bajar» (hitos 32 y 33) ══════════
   La pista es alta a propósito: su altura MENOS la del lienzo pegado es el
   recorrido de scroll que se reparte entre los fotogramas. Con 250svh y un
   sticky de ~100svh quedan ~1,5 pantallas de recorrido, que es lo que pide el
   hito. El lienzo se dibuja en <canvas> y no cambiando el src de un <img>:
   así no hay reflow por fotograma ni parpadeo mientras el siguiente decodifica.
   Con prefers-reduced-motion o ahorro de datos no se carga nada de esto: se ve
   la imagen estática, que ya viene en el HTML.

   CENTRADO (hito 33): el mueble caía pegado a la navbar y con todo el aire
   abajo. El sticky se pega a `header + aire` y mide `100svh − header − 2·aire`,
   así que le queda el MISMO aire arriba (bajo la navbar) que abajo (hasta el
   borde de la pantalla). El lienzo se CONTIENE dentro (max-width y max-height
   con la proporción nativa del canvas): ni se recorta ni se estira, y en una
   pantalla baja se hace más pequeño en vez de desbordar. */
/* 150svh: el mínimo que fijó la revisión del 33. Con 160 la ficha se pasaba del tope de alto, y
   la regla es apretar la cabecera y la fila antes que la secuencia — pero 150 sigue siendo una
   pantalla larga de recorrido y es lo que dice el contrato. */
.mu-arma-pista { position: relative; height: 150svh; }
.mu-arma-sticky {
  position: sticky;
  top: calc(var(--h-header) + var(--mu-arma-aire));
  height: calc(100svh - var(--h-header) - 2 * var(--mu-arma-aire));
}
.mu-arma-sticky picture { display: contents; }   /* el <picture> no puede ser el elemento colocado */
/* `inset: 0` + `margin: auto` con las dos medidas en auto: el centrado de toda la vida para un
   elemento reemplazado, y el único que centra de verdad cuando la caja es MUCHO más alta que la
   imagen (en una rejilla con place-items la fila se dimensiona por el contenido y el lienzo se
   quedaba a un cuarto de la altura — medido: 132 px de 529 en móvil). */
.mu-arma-lienzo,
.mu-arma-estatica {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: var(--carbon-900);
}
/* Mientras no arranque el JS manda la estática; en cuanto hay secuencia, el lienzo. */
.mu-arma-lienzo { opacity: 0; transition: opacity .3s ease; }
[data-secuencia="listo"] .mu-arma-lienzo { opacity: 1; }
[data-secuencia="listo"] .mu-arma-estatica { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  /* Sin recorrido: la sección ocupa lo que ocupa la imagen y se acabó. */
  .mu-arma-pista { height: auto; }
  .mu-arma-sticky { position: relative; height: auto; }
  .mu-arma-estatica { position: static; margin: 0 auto; max-height: none; }
  .mu-arma-lienzo { display: none; }
}
@media (max-width: 759px) {
  .mu-arma-pista { height: 160svh; }
  /* Desde el hito 33b la sección ya no vive dentro de un `.container`: va a sangre en todas las
     anchuras, así que aquí no hay margen negativo que compensar (con él, la pista medía 430 px
     en una ventana de 390 y sacaba 20 px de scroll horizontal). */
  /* Y el carbón detrás: un 16:9 centrado en una pantalla de móvil deja 290 px de papel arriba y
     otros tantos abajo, y la banda flotaba como un error. Con el fondo oscuro, lo que se pega es
     una PANTALLA con el mueble en medio. En escritorio no hace falta: el lienzo llena la caja. */
  .mu-arma-sticky { background: var(--carbon-900); }
  /* El borde de abajo cortaba en seco el brillo del suelo contra el carbón. Un 7 % de degradado
     arriba y abajo lo funde con el fondo del sticky, que aquí ES el carbón. En escritorio no se
     pone: allí el fondo de la sección es papel y la máscara dejaría ver el papel por el borde. */
  .mu-arma-lienzo, .mu-arma-estatica {
    mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}


/* ═══ Refundación, bloque 2 (docs/UX-propuesta-refundacion.md §4, puntos 6 y 7; 2026-09-15) ═══
   El naranja es la llama y se gasta solo en comprar: el CTA del hero y «Añadir a la cesta».
   Los demás botones hablan en tinta sobre papel y en papel sobre carbón. */
.lead-btn, .camino-cta, .asis-salida-cta { background: var(--tinta-950); color: var(--papel-100); border-color: var(--tinta-950); }
.lead-btn:hover, .camino-cta:hover, .asis-salida-cta:hover,
.lead-btn:focus-visible, .camino-cta:focus-visible, .asis-salida-cta:focus-visible { background: var(--tinta-600); border-color: var(--tinta-600); color: var(--papel-100); }
.footer .lead-btn { background: var(--papel-100); color: var(--tinta-950); border-color: var(--papel-300); }
.footer .lead-btn:hover, .footer .lead-btn:focus-visible { background: var(--papel-200); border-color: var(--papel-200); color: var(--tinta-950); }
.asis-card-flag { background: var(--tinta-950); color: var(--papel-100); }


/* ═══ Refundación, bloque 1.5 (docs/UX-propuesta-refundacion.md §4; 2026-09-15): dos actos por ficha.
   «Parece fuego» y «Temperatura ambiente, la tele encima» siguen siendo actos a pantalla; encastre,
   autonomía, consumo y mando pasan a una franja compacta de cifras en papel, cuatro columnas. ═══ */
.actos-compactos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--papel-100); color: var(--tinta-950);
  border-top: 1px solid var(--papel-300); border-bottom: 1px solid var(--papel-300);
}
.actos-compactos .acto { background: var(--papel-100); color: var(--tinta-950); padding: clamp(28px, 3vw, 48px) 0; }
.actos-compactos .acto + .acto { border-left: 1px solid var(--papel-300); }
.actos-compactos .acto-inner { width: auto; margin: 0; padding: 0 clamp(20px, 2vw, 36px); display: block; }
.actos-compactos .acto-picto { width: 28px; margin: 0 0 var(--s-4); }
.actos-compactos .acto-h { font-size: clamp(20px, 1.5vw, 26px); line-height: 1; margin: 0 0 var(--s-3); max-width: none; }
.actos-compactos .acto-p { font-size: 15px; line-height: 1.45; max-width: none; }
.actos-compactos .acto-lecturas { margin: var(--s-5) 0 0; gap: var(--s-4); grid-template-columns: 1fr; }
.actos-compactos .acto-lecturas > div { border-top: 1px solid var(--papel-300); padding-top: var(--s-3); }
.actos-compactos .acto-lecturas dt { font-size: clamp(26px, 2.2vw, 36px); letter-spacing: -0.02em; }
.actos-compactos .acto-lecturas dd { font-size: 12px; }
@media (max-width: 1024px) {
  .actos-compactos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actos-compactos .acto:nth-child(3) { border-left: 0; }
  .actos-compactos .acto:nth-child(n + 3) { border-top: 1px solid var(--papel-300); }
}
@media (max-width: 560px) {
  .actos-compactos { grid-template-columns: 1fr; }
  .actos-compactos .acto + .acto { border-left: 0; border-top: 1px solid var(--papel-300); }
}

/* Comparador plegado: la familia de la ficha a la vista, el resto del catálogo tras un <details>. */
.compara-mas { margin-top: var(--s-6); border-top: 1px solid var(--border); }
.compara-mas summary { cursor: pointer; list-style: none; padding: var(--s-4) 0; font-family: var(--ff-lectura); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: var(--fg); }
.compara-mas summary::-webkit-details-marker { display: none; }
.compara-mas summary::after { content: "+"; margin-left: var(--s-3); font-weight: 400; }
.compara-mas[open] summary::after { content: "−"; }
.compara-mas summary:hover, .compara-mas summary:focus-visible { color: var(--tinta-950); }
.cross-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); max-width: 640px; }
.cross-item { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.cross-item:last-child { border-bottom: 0; }
.cross-nombre { font-weight: 700; }
.cross-linea { color: var(--fg-2); font-size: 14px; flex: 1; }
.cross-precio { font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
  .cross-item { flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
  .cross-linea { flex-basis: 100%; order: 3; }
}
.pdp-svg-tele { width: 100%; height: auto; display: block; stroke: var(--papel-100); stroke-width: 3; fill: none; font-family: var(--ff-cifra); }


/* ═══════════════════════════════════════════════════════════════
   PIEL v4 «Fuego y agua» (2026-09-22) — capa que retira el carácter viejo (mayúsculas condensadas, carbón,
   rectángulos) y pone el nuevo (pastillas con borde y canto, tarjetas con canto, bandas de agua). Lo que un
   selector viejo pinte distinto, se corrige aquí primero y se limpia arriba página a página.
   ═══════════════════════════════════════════════════════════════ */
html { background: var(--bg); color: var(--fg); }
body { font-family: var(--ff-sans); font-weight: 500; font-size: var(--fs-body); line-height: 1.55; }
h1, h2, h3, h4, .h1, .h2, .h3, .acto-h, .guia-h, .guia-h2, .landing-h, .lam-h2, .hoja-a3-h2, .portada-h, .pdp-h, .section-h, .footer-h, .wm, .wm-name {
  font-family: var(--ff-display); text-transform: none !important; letter-spacing: -0.02em; font-weight: 800; }
h2, .h2, .acto-h, .guia-h2, .lam-h2, .section-h { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
h3, .h3, .footer-h { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h1, .h1, .landing-h, .portada-h, .pdp-h { font-size: var(--fs-h1); line-height: 1; }
[class*="eyebrow"], .eyebrow, .kicker { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--ff-sans); font-weight: 700; font-size: var(--fs-eyebrow); color: var(--fg-2); }
.cifra, [class*="cifra"], .precio, [class*="precio"], .pdp-price, .dato-v, [class*="dato-v"] { font-family: var(--ff-cifra); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Botones: pastilla, borde 2 px de tinta, canto en agua; la brasa solo en el principal */
.btn, .camino-cta, .lead-btn, .hueco-cta, .landing-cta, .asis-salida-cta, .buybar-btn, .pdp-add, .cart-checkout, button.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 52px; padding: 0 28px;
  border-radius: var(--r-pill) !important; border: 2px solid var(--fg) !important; font-family: var(--ff-sans) !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none;
  background: var(--accent) !important; color: var(--accent-fg) !important; box-shadow: var(--canto);
  transition: background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out), box-shadow var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-in-out); }
.btn:hover, .camino-cta:hover, .lead-btn:hover, .hueco-cta:hover, .landing-cta:hover, .asis-salida-cta:hover, .buybar-btn:hover, .pdp-add:hover, .cart-checkout:hover, .btn-primary:hover {
  background: var(--accent-hover) !important; color: var(--accent-fg) !important; box-shadow: var(--canto-sm); transform: translate(2px, 2px); }
.btn--ghost, .camino-cta--ghost, .btn-secondary, .lead-btn--ghost, [class*="--ghost"], .pdp-secondary, .btn-outline {
  background: transparent !important; color: var(--fg) !important; box-shadow: none; }
.btn--ghost:hover, .camino-cta--ghost:hover, .btn-secondary:hover, [class*="--ghost"]:hover, .pdp-secondary:hover, .btn-outline:hover { background: var(--fg) !important; color: var(--bg) !important; transform: none; }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px; }

/* Tarjetas y paneles: borde de tinta, radio 12, canto en agua */
.product-card, .familia-card, .card, .modelo-card, .guia-card, .empieza-card, .pv-card, .mueble-card, .comp-card, .recomendacion, .alt-card, [class*="-card"]:not(.card-img):not([class*="card-body"]):not([class*="card-h"]):not([class*="card-p"]) {
  background: var(--bg) !important; color: var(--fg) !important; border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); overflow: hidden;
  transition: box-shadow var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-in-out); }
.product-card:hover, .familia-card:hover, .guia-card:hover, .empieza-card:hover, [class*="-card"]:hover { box-shadow: var(--canto-sm); transform: translate(3px, 3px); }
.panel, .hoja, .papel, [class*="papel"], .pdp-cifras, .franja-cifras, .faq, .acordeon { background: var(--bg-papel); color: var(--fg-papel); border-radius: var(--r-2); }
details { border-top: 2px solid var(--fg); }
details:last-of-type { border-bottom: 2px solid var(--fg); }
summary { font-family: var(--ff-display); font-weight: 700; }

/* Cabecera y pie */
.site-header, header.site-header, .header { background: var(--bg) !important; color: var(--fg) !important; border-bottom: 2px solid var(--fg); }
.nav a, .nav-link, .nav-mobile-link { color: var(--fg) !important; font-family: var(--ff-sans); font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; }
.nav a:not(.lang-opt)::after { background: var(--accent) !important; height: 2px !important; }
.wm, .wm-name, .wordmark { font-family: var(--ff-display) !important; font-weight: 800; text-transform: none !important; letter-spacing: -0.02em; }
.footer, footer.footer { background: var(--bg-agua) !important; color: var(--fg-agua) !important; }
.footer a, .footer li, .footer li a, .footer h5, .footer .footer-h, .footer p { color: var(--fg-agua) !important; opacity: 1; }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--fg-agua) !important; }
.footer .lead-btn { background: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--fg-agua) !important; box-shadow: 4px 4px 0 0 var(--agua-900); }
.footer input, .lead-row input, input[type="email"], input[type="text"], input[type="search"] { background: var(--bg) !important; color: var(--fg) !important; border: 2px solid var(--fg) !important; border-radius: var(--r-pill) !important; height: 52px; padding: 0 24px; font-family: var(--ff-sans); }
input:focus-visible { border-color: var(--focus) !important; }
.promobar { background: var(--bg-agua) !important; color: var(--fg-agua) !important; font-family: var(--ff-sans); font-weight: 700; text-transform: none !important; }

/* Actos y secciones: nada a sangre negro; texto según el fondo */
.acto { padding-block: var(--s-section); }
.acto--f2, .acto--f4, [style*="--acto-2"], [style*="--acto-4"] { color: var(--fg-agua); }
.acto--f2 .acto-h, .acto--f4 .acto-h { color: var(--fg-agua); }
.acto--f1, .acto--f3, .acto--f5, .acto--f6 { color: var(--fg-papel); }
img.acto-media, .acto-media img, .acto-media video, .guia img, .pdp-gallery img, .galeria img { border-radius: var(--r-2); }
.section-head, .cabecera { text-transform: none !important; }
.tabs-tab, .sel-opcion, .chip, .pill, [class*="chip"]:not(.h4-chips):not(.h4-chip) { border-radius: var(--r-pill) !important; border: 2px solid var(--fg) !important; text-transform: none !important; font-family: var(--ff-sans) !important; font-weight: 700 !important; background: transparent; color: var(--fg); }
.tabs-tab[aria-selected="true"], .tabs-tab.is-active, .sel-opcion.is-active, .chip.is-active, .sel-opcion[aria-checked="true"] { background: var(--fg) !important; color: var(--bg) !important; }
hr, .separador { border: 0; border-top: 2px solid var(--fg); }
::selection { background: var(--brasa-200); color: var(--fg); }

/* ═══ HOME v4 (2026-09-22): componentes de la portada nueva. Prefijo h4- para no chocar con la piel vieja. ═══ */
.h4-display { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin: 0; max-width: 12ch; }
.h4-muted { color: var(--fg-2); }
.h4-label { font-family: var(--ff-sans); font-size: 15px; font-weight: 700; line-height: 1; }
.h4-cifra { font-family: var(--ff-cifra); font-size: var(--fs-cifra); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.h4-bloque { padding-block: var(--s-section); }
.h4-bloque p, .h4-acto p { max-width: 68ch; }
.h4-banda { background: var(--bg-agua); color: var(--fg-agua); }
.h4-banda .h4-muted { color: var(--vapor-200); }
.h4-vapor { background: var(--vapor-200); }
.h4-oo { width: 40px; height: 24px; color: currentColor; display: inline-block; vertical-align: middle; }
.h4-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-10); }
.h4-cabecera h2, .h4-cabecera p { margin: 0; }
.h4-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); }
.h4-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; }
.h4-mt { margin-top: var(--s-8); }
/* hero partido */
.h4-hero { padding-block: var(--s-12) var(--s-16); }
.h4-hero-cont { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--s-16); align-items: center; }
.h4-sub { font-size: var(--fs-lead); font-family: var(--ff-sans); font-weight: 500; margin: var(--s-6) 0 var(--s-8); max-width: 40ch; }
.h4-ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.h4-hero-foto { position: relative; padding-bottom: var(--s-12); padding-right: var(--s-6); }
.h4-hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; border-radius: var(--r-2); border: 2px solid var(--fg); box-shadow: var(--canto-lg); }
.h4-etiqueta { background: var(--accent-soft); color: var(--fg); border: 2px solid var(--fg); border-radius: var(--r-1); box-shadow: var(--canto); }
.h4-tarjeta { position: absolute; right: 0; bottom: 0; max-width: 24rem; padding: var(--s-6); display: grid; gap: var(--s-3); }
.h4-tarjeta ul { margin: 0; padding: 0; display: grid; gap: var(--s-3); list-style: none; }
.h4-tarjeta li { display: flex; gap: var(--s-3); align-items: center; font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; text-transform: none; }
.h4-tarjeta li svg { width: 32px; height: 32px; flex: none; stroke: var(--fg); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h4-firma { color: var(--agua-700); font-family: var(--ff-display); font-weight: 700; margin: 0; padding-top: var(--s-3); border-top: 2px solid var(--fg); }
/* marquee */
.h4-marquee { overflow: hidden; padding-block: var(--s-4); }
.h4-pista { display: flex; gap: var(--s-10); align-items: center; width: max-content; }
.h4-pista .h4-cifra { white-space: nowrap; font-size: 15px; }
.h4-pista .h4-oo { width: 32px; height: 16px; color: var(--vapor-200); }
@media (prefers-reduced-motion: no-preference) { .h4-pista { animation: h4-desliza 40s linear infinite; } @keyframes h4-desliza { to { transform: translateX(-50%); } } }
/* tarjetas de familia */
.h4-card { position: relative; background: var(--bg); color: var(--fg); border: 2px solid var(--fg); border-radius: var(--r-2); box-shadow: var(--canto-lg); padding: 0 0 20px; display: grid; gap: var(--s-3); overflow: hidden; text-decoration: none; transition: box-shadow var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-in-out); }
.h4-card:hover { box-shadow: var(--canto-sm); transform: translate(3px, 3px); }
.h4-card img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-bottom: 2px solid var(--fg); border-radius: 0; }
.h4-card > div { padding-inline: var(--s-4); display: grid; gap: var(--s-1); }
.h4-card h3 { font-size: var(--fs-h3); }
.h4-precio { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-2); }
.h4-etiqueta-mini { position: absolute; top: var(--s-3); left: var(--s-3); padding: var(--s-2) var(--s-3); font-size: 15px; line-height: 1; font-family: var(--ff-sans); font-weight: 700; }
.h4-chip { background: var(--vapor-200); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-family: var(--ff-sans); font-size: 15px; font-weight: 700; white-space: nowrap; }
/* acto */
.h4-acto { padding-block: var(--s-section); }
.h4-acto-cont { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-16); align-items: center; }
.h4-acto img, .h4-mueble img { border-radius: var(--r-2); border: 2px solid var(--fg); box-shadow: var(--canto-lg); width: 100%; }
.h4-acto h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
/* cifras */
.h4-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); }
.h4-cifras > div { border-left: 2px solid var(--vapor-200); padding-left: var(--s-4); }
.h4-cifras .h4-cifra { font-size: var(--fs-h2); display: block; margin-bottom: var(--s-2); }
/* prueba */
.h4-prueba-media { position: relative; }
.h4-prueba video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); border: 2px solid var(--fg); box-shadow: var(--canto-lg); }
.h4-datos { display: flex; gap: var(--s-8); margin-top: var(--s-6); }
.h4-sello { position: absolute; top: -24px; right: -16px; z-index: 1; width: 96px; height: 96px; border-radius: var(--r-pill); background: var(--bg-agua); color: var(--fg-agua); border: 2px solid var(--fg); box-shadow: var(--canto); display: grid; place-content: center; text-align: center; font-family: var(--ff-display); font-weight: 700; font-size: 15px; line-height: 1.2; transform: rotate(-8deg); }
.h4-sello .h4-oo { width: 32px; height: 16px; margin: 0 auto 4px; color: var(--accent-soft); }
/* chips */
.h4-chips { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-6) 0; }
.h4-chip, a.h4-chip { text-decoration: none; }
.h4-chips .h4-chip { background: transparent; border: 2px solid var(--fg); padding: var(--s-3) var(--s-5); transition: background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out); }
.h4-chips .h4-chip:hover { background: var(--fg); color: var(--bg); }
/* FAQ */
.h4-faq summary { cursor: pointer; padding: var(--s-4) 0; font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; }
.h4-faq summary::-webkit-details-marker { display: none; }
.h4-mas { width: 32px; height: 32px; border-radius: var(--r-pill); border: 2px solid var(--fg); display: grid; place-content: center; flex: none; font-family: var(--ff-display); transition: transform var(--dur-2) var(--ease-in-out), background-color var(--dur-1) var(--ease-in-out); }
.h4-faq[open] .h4-mas { transform: rotate(45deg); background: var(--fg); color: var(--bg); }
.h4-faq p { padding-bottom: var(--s-4); }
/* entrada del hero */
@media (prefers-reduced-motion: no-preference) {
  .h4-display, .h4-sub, .h4-ctas, .h4-tarjeta { animation: h4-entra var(--dur-3) var(--ease-out) both; }
  .h4-sub { animation-delay: 80ms; } .h4-ctas { animation-delay: 160ms; } .h4-tarjeta { animation-delay: 240ms; }
  @keyframes h4-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1023px) { .h4-hero-cont, .h4-acto-cont { grid-template-columns: 1fr; } .h4-grid4, .h4-cifras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .h4-hero-foto { padding: 0; } .h4-tarjeta { position: static; max-width: none; margin-top: var(--s-6); }
  .h4-grid2, .h4-cifras { grid-template-columns: 1fr; } .h4-grid4 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .h4-card > div { padding-inline: var(--s-3); } .h4-precio { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .h4-cabecera { flex-direction: column; align-items: flex-start; } .h4-datos { flex-direction: column; gap: var(--s-4); }
  .h4-prueba video { aspect-ratio: 1 / 1; } .h4-bloque, .h4-acto { padding-block: var(--s-12); }
  .h4-card, .h4-etiqueta, .h4-acto img, .h4-prueba video, .h4-mueble img, .btn { box-shadow: 3px 3px 0 0 var(--agua-700); }
}

/* la línea de progreso de scroll no es «comprar»: va en agua, no en brasa */
.scroll-progress-fill { background: var(--agua-700) !important; }