/* ============================================================
   BUTACA · Muebles Antonio Campos
   Hoja de estilos única. Sin dependencias, sin compilación.
   Orden: 1 tokens · 2 base · 3 utilidades · 4 media · 5 componentes
          6 secciones · 7 responsive · 8 accesibilidad
   ============================================================ */

/* ---------- 1 · TOKENS ------------------------------------- */
:root{
  /* color */
  --ink:        #0b0b0d;   /* fondo oscuro principal */
  --ink-2:      #131317;   /* fondo oscuro alterno */
  --paper:      #f2efe9;   /* fondo claro */
  --paper-2:    #e9e4db;
  --text-light: #f4f2ee;
  --text-dark:  #17171b;
  --muted-light: rgba(244,242,238,.58);
  --muted-dark:  rgba(23,23,27,.58);
  --line-light: rgba(244,242,238,.14);
  --line-dark:  rgba(23,23,27,.14);
  --accent:     #b9925f;   /* latón cálido */
  --wa:         #1fa855;   /* verde WhatsApp */
  --stripe:     #635bff;   /* violeta de marca de Stripe */

  /* tipografía */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* medidas */
  --wrap: 1280px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(88px, 12vw, 180px);
  --radius: 4px;
  /* Alto real de la cabecera fija. La escena empieza por debajo. */
  --cabecera: 90px;

  /* movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t: .8s;
}

/* ---------- 2 · BASE -------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--ink);
  color:var(--text-light);
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* grano muy sutil sobre todo el documento */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  margin:0;
  font-weight:200;
  line-height:1.06;
  letter-spacing:-.025em;
}

p{ margin:0; }

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

/* ---------- 3 · UTILIDADES -------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:var(--wrap-narrow); }
.center{ text-align:center; }

.eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.4em;
}

.h2{ font-size:clamp(2rem,5.2vw,3.9rem); }

.lead{
  margin-top:1.4rem;
  font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--muted-light);
  max-width:46ch;
}

.rule{
  width:1px; height:64px;
  margin:3rem auto 0;
  background:linear-gradient(to bottom,var(--accent),transparent);
}

.note{
  margin-top:3rem;
  font-size:.82rem;
  color:var(--muted-dark);
  letter-spacing:.02em;
}

/* marcador de dato pendiente ------------------------------- */
.ph{
  color:inherit;
  opacity:.72;
  background:linear-gradient(to bottom,transparent 82%,rgba(185,146,95,.35) 82%);
  padding-inline:.05em;
}

/* revelado al hacer scroll --------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--t) var(--ease-out),
             transform var(--t) var(--ease-out);
  transition-delay:calc(var(--d,0) * .09s);
}
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }
.reveal[data-d="5"]{ --d:5 } .reveal[data-d="6"]{ --d:6 }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 4 · MEDIA (imagen / vídeo + placeholder) ------- */
.media{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(145deg,#1b1b20,#0f0f13);
}
.media img[data-media-img],
.media video[data-media-video]{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s var(--ease-out);
}
.media.is-loaded img[data-media-img],
.media.is-loaded video[data-media-video]{ opacity:1; }
.media.is-loaded .media__ph{ opacity:0; pointer-events:none; }

/* caja provisional mientras no hay archivo */
.media__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.6rem; padding:1.5rem;
  text-align:center;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0 14px,
      transparent 14px 28px),
    linear-gradient(145deg,#1c1c22,#101014);
  border:1px dashed rgba(244,242,238,.16);
  border-radius:var(--radius);
  transition:opacity .5s var(--ease);
}
.media__ph-path{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--accent);
  word-break:break-all;
}
.media__ph-hint{
  font-size:.74rem;
  letter-spacing:.04em;
  color:rgba(244,242,238,.45);
  max-width:34ch;
}
.media__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem 1.4rem .9rem;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
}
.media--tall{ aspect-ratio:4/5; }
.media--plan{ aspect-ratio:1/1; background:transparent; }
.media--plan .media__ph{ background:rgba(255,255,255,.02); }

/* esquema SVG de medidas */
.plan{ width:min(100%,320px); height:auto; margin-bottom:.4rem; }
.plan__box{ fill:rgba(244,242,238,.04); stroke:rgba(244,242,238,.3); stroke-width:1; }
.plan__dim,.plan__tick{ stroke:var(--accent); stroke-width:1; opacity:.7; }
.plan__lbl{ fill:rgba(244,242,238,.5); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font); }

/* ---------- 5 · COMPONENTES ------------------------------- */

/* botones */
.btn{
  --bg:transparent; --fg:var(--text-light); --bd:var(--line-light);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:1.05em 2.1em;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--bg);
  color:var(--fg);
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ padding:.72em 1.3em; font-size:.72rem; }
.btn--lg{ padding:1.2em 2.6em; font-size:.88rem; }

.btn--wa{
  --bg:var(--wa); --fg:#fff; --bd:var(--wa);
  box-shadow:0 10px 30px -12px rgba(31,168,85,.7);
}
.btn--wa:hover{ --bg:#189a4b; --bd:#189a4b; box-shadow:0 16px 36px -12px rgba(31,168,85,.8); }

.btn--ghost{ --bd:rgba(244,242,238,.3); }
.btn--ghost:hover{ --bg:rgba(244,242,238,.08); --bd:rgba(244,242,238,.55); }

.ico-wa{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

/* cabecera */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:transform .5s var(--ease), background .5s var(--ease),
             backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-light);
}
.nav.is-hidden{ transform:translateY(-110%); }

.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:1rem var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.nav__brand{ display:flex; flex-direction:column; line-height:1.15; }
.nav__brand-main{ font-size:.82rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.nav__brand-sub{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }

.nav__links{ display:flex; gap:1.55rem; margin-left:auto; }
.nav__links a{
  position:relative;
  white-space:nowrap;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-light);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--text-light); }

/* ============================================================
   MENÚ · el botón y el panel de móvil
   ------------------------------------------------------------
   En escritorio no se ve el botón: los enlaces van en línea,
   como hasta ahora. Por debajo de 900 px los enlaces pasan a un
   panel que se despliega bajo la cabecera.
   ============================================================ */
/* La marca nunca se parte, ni con menús largos al lado */
.nav__brand{ flex:none; }
.nav__brand-main,
.nav__brand-sub{ white-space:nowrap; }

.nav__toggle{
  display:none;                 /* solo aparece en móvil */
  align-items:center; gap:.55rem;
  margin-left:auto;
  padding:.5rem .2rem;
  background:none; border:0; cursor:pointer;
  color:var(--text-light);
  font-family:inherit;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.nav__toggle-barras{
  display:block; position:relative;
  width:20px; height:12px; flex:none;
}
.nav__toggle-barras i{
  position:absolute; left:0; right:0; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s linear;
}
.nav__toggle-barras i:nth-child(1){ top:0; }
.nav__toggle-barras i:nth-child(2){ bottom:0; }

/* Las dos barras se cruzan al abrir */
html.menu-abierto .nav__toggle-barras i:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
html.menu-abierto .nav__toggle-barras i:nth-child(2){ transform:translateY(-5.25px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:inline-flex; }

  /* La marca no debe partirse en dos líneas por culpa del botón */
  .nav__brand-main{ white-space:nowrap; }

  /* El panel ocupa el ancho completo, bajo la cabecera */
  .nav__links{
    position:fixed;
    top:var(--cabecera); left:0; right:0;
    display:flex; flex-direction:column; gap:0;
    margin:0;
    padding:.5rem var(--gutter) 1.6rem;
    background:rgba(11,11,13,.97);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
    border-bottom:1px solid var(--line-light);

    /* Cerrado: plegado hacia arriba y fuera del paso */
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .34s var(--ease), opacity .24s var(--ease), visibility 0s linear .34s;
  }
  html.menu-abierto .nav__links{
    transform:translateY(0);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .34s var(--ease), opacity .24s var(--ease), visibility 0s;
  }

  /* Cada enlace, una fila cómoda de pulsar */
  .nav__links a{
    padding:.95rem 0;
    font-size:.86rem; letter-spacing:.1em;
    border-bottom:1px solid var(--line-light);
  }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__links a::after{ display:none; }   /* sin subrayado animado aquí */

  /* Con el panel abierto no se hace scroll detrás */
  html.menu-abierto body{ overflow:hidden; }
}

/* En pantallas estrechas basta el icono: la palabra "Menú"
   roba el sitio que necesita el nombre de la tienda. */
@media (max-width:430px){
  .nav__toggle-texto{ display:none; }
  .nav__toggle{ gap:0; padding-inline:.35rem; }
}

@media (prefers-reduced-motion:reduce){
  .nav__links,
  .nav__toggle-barras i{ transition:none; }
}
.nav__links a:hover::after{ transform:scaleX(1); }

/* botón flotante móvil */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:95;
  display:none;
  width:56px; height:56px;
  align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--wa);
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55);
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }

/* ---------- 6 · SECCIONES --------------------------------- */
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(70px,9vw,130px); }
.section--notop{ padding-top:0; }
.section--dark{ background:var(--ink); }
.section--dark + .section--dark{ background:var(--ink); }
.section--paper{
  background:var(--paper);
  color:var(--text-dark);
}
.section--paper .eyebrow{ color:#8a6a3c; }
.section--paper .lead{ color:var(--muted-dark); }
.section--paper .media{ background:linear-gradient(145deg,#ded8cd,#cfc8bb); }
.section--paper .media__ph{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 14px, transparent 14px 28px),
    linear-gradient(145deg,#e4dfd5,#d5cec2);
  border-color:rgba(23,23,27,.18);
}
.section--paper .media__ph-path{ color:#8a6a3c; }
.section--paper .media__ph-hint{ color:rgba(23,23,27,.5); }
.section--paper .ph{ background:linear-gradient(to bottom,transparent 82%,rgba(138,106,60,.3) 82%); }

/* Sobre el fondo crema, todo lo que venga en tono claro es invisible.
   Aquí se reasignan los elementos que lo usaban. */
.section--paper .specs dt{ color:var(--muted-dark); }
.section--paper .specs__row{ border-color:rgba(23,23,27,.12); }

/* Esquema de medidas: el trazo y los rótulos iban en claro */
.section--paper .plan__box{
  fill:rgba(23,23,27,.04);
  stroke:rgba(23,23,27,.28);
}
.section--paper .plan__lbl{ fill:rgba(23,23,27,.5); }

.section__head{ max-width:var(--wrap-narrow); margin-bottom:clamp(2.5rem,5vw,4.5rem); }
/* Si el encabezado va centrado, también debe estarlo su caja */
.section__head.center{ margin-inline:auto; }

/* --- HERO ------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(110px,14vh,160px) clamp(70px,10vh,110px);
  padding-inline:var(--gutter);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:-14% 0;
  border-radius:0;
  will-change:transform;
}
.hero__media .media__ph{ border:none; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.45) 42%, rgba(8,8,10,.25) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(8,8,10,.6), transparent 70%);
  transition:opacity .6s var(--ease);
}
/* mientras no hay foto real, el velo se aclara para poder leer el hueco */
.hero__media:not(.is-loaded) ~ .hero__veil,
.cta__media:not(.is-loaded) ~ .cta__veil{ opacity:.45; }
.hero__content{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
}
.hero__title{
  font-size:clamp(2.6rem,9vw,7.2rem);
  max-width:14ch;
}
.hero__claim{
  margin-top:1.6rem;
  max-width:44ch;
  font-size:clamp(1.02rem,1.9vw,1.4rem);
  color:rgba(244,242,238,.78);
  font-weight:200;
}
.hero__price{
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
  margin-top:2.4rem;
}
.hero__price-label{
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted-light);
}
.hero__price-value{
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:300; letter-spacing:-.01em;
}
/* "IVA y envío incluidos" · precio final, sin sorpresas al pagar */
.hero__price-note{
  font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:2.6rem;
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px;
  transform:translateX(-50%);
  width:1px; height:56px;
  overflow:hidden;
}
.hero__scroll-line{
  display:block; width:1px; height:100%;
  background:rgba(244,242,238,.45);
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%) } 50%{ transform:translateY(0) } 100%{ transform:translateY(100%) }
}

/* --- DECLARACIÓN ------------------------------------------ */
.statement{
  font-size:clamp(1.5rem,3.6vw,2.7rem);
  line-height:1.28;
  font-weight:200;
  letter-spacing:-.018em;
}

/* --- ZOOM SOBRE DETALLES ---------------------------------- */
.zoom{
  position:relative;
  height:340vh;
  background:var(--ink-2);
}
.zoom__stage{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
}
.zoom__media{
  position:absolute; inset:0;
  border-radius:0;
  transform-origin:58% 48%;
  will-change:transform;
}
.zoom__media.is-loaded::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(8,8,10,.9) 0%, rgba(8,8,10,.55) 42%, rgba(8,8,10,.1) 100%);
}
.zoom__ui{
  position:relative;
  height:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:0 var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.zoom__steps{ position:relative; min-height:230px; max-width:32ch; }
.zoom__step{
  position:absolute; inset:0;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events:none;
}
.zoom__step.is-active{ opacity:1; transform:none; pointer-events:auto; }
.zoom__num{
  display:block;
  font-size:.7rem; letter-spacing:.3em;
  color:var(--accent);
  margin-bottom:1rem;
}
.zoom__step h3{ font-size:clamp(1.7rem,3.6vw,2.7rem); }
.zoom__step p{ margin-top:1.1rem; color:var(--muted-light); }

.zoom__bar{
  width:min(220px,50%); height:1px;
  margin-top:2.6rem;
  background:var(--line-light);
}
.zoom__bar span{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .15s linear;
}

/* --- BLOQUES A DOS COLUMNAS ------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.split--reverse .split__text{ order:2; }
.split--measures{ align-items:start; }

.ticks{ margin-top:2.2rem; display:grid; gap:.9rem; }
.ticks li{
  position:relative;
  padding-left:1.8rem;
  font-size:.95rem;
  color:var(--muted-dark);
}
.section--dark .ticks li{ color:var(--muted-light); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:1px; background:var(--accent);
}

/* --- CARACTERÍSTICAS -------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-light);
  border:1px solid var(--line-light);
}
.card{
  background:var(--ink);
  padding:clamp(1.8rem,3.2vw,2.8rem);
  min-height:220px;
  transition:background .5s var(--ease);
}
.card:hover{ background:var(--ink-2); }
.card__num{
  display:block;
  font-size:.7rem; letter-spacing:.28em;
  color:var(--accent);
  margin-bottom:1.6rem;
}
.card h3{ font-size:1.25rem; font-weight:300; letter-spacing:-.01em; }
.card p{ margin-top:.8rem; font-size:.92rem; color:var(--muted-light); }

/* --- MEDIDAS ---------------------------------------------- */
.specs{ margin:2.6rem 0 0; }
.specs__row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--line-light);
}
.specs__row:first-child{ border-top:1px solid var(--line-light); }
.specs dt{ font-size:.92rem; color:var(--muted-light); }
.specs dd{ margin:0; font-size:1.02rem; font-weight:400; letter-spacing:.01em; }

/* Perfil recomendado. Cuelga de la tabla de medidas, con el mismo
   aire que el resto del bloque: es una consecuencia de las cotas,
   no una advertencia aparte. Discreto a proposito. */
.specs__perfil{
  margin:1.1rem 0 0;
  font-size:.86rem;
  line-height:1.65;
  letter-spacing:.01em;
  color:var(--muted-light);
}
.section--paper .specs__perfil{ color:var(--muted-dark); }

/* --- TEJIDOS ---------------------------------------------- */
.swatches{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.4vw,2rem);
}
.swatch{ margin:0; }
.swatch__chip{
  display:block;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  background:var(--sw,#ccc) var(--sw-img,none) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 14px 28px -20px rgba(0,0,0,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.swatch:hover .swatch__chip{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 22px 36px -20px rgba(0,0,0,.7);
}
.swatch figcaption{
  margin-top:.9rem;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--muted-dark);
}

/* --- CTA FINAL -------------------------------------------- */
.cta{
  position:relative;
  min-height:86svh;
  display:flex; align-items:center;
  padding-block:var(--sec-y);
  overflow:hidden;
}
.cta__media{ position:absolute; inset:-14% 0; border-radius:0; will-change:transform; }
.cta__media .media__ph{ border:none; }
.cta__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,8,10,.88), rgba(8,8,10,.72)),
    radial-gradient(90% 70% at 50% 50%, rgba(185,146,95,.12), transparent 70%);
  transition:opacity .6s var(--ease);
}
.cta__content{ position:relative; }
.cta__title{ font-size:clamp(2.2rem,6.4vw,4.6rem); }
.cta__price{
  margin-top:1.4rem;
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  color:rgba(244,242,238,.8);
  font-weight:300;
}
/* "IVA y envío incluidos" y plazo, bajo el precio del cierre */
.cta__price-note,
.cta__price-envio{
  display:block;
  margin-top:.45rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.cta__price-note{ font-weight:500; color:var(--accent); }
.cta__price-envio{ margin-top:.3rem; color:var(--muted-light); }
.cta__sub{ margin-top:1.2rem; color:var(--muted-light); }
.cta .hero__actions{ justify-content:center; }

/* --- PIE -------------------------------------------------- */
.foot{
  background:#08080a;
  border-top:1px solid var(--line-light);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between;
}
.foot__brand{
  font-size:.82rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:.9rem;
}
.foot__line{ font-size:.82rem; color:var(--muted-light); }
.foot__line--dim{ color:rgba(244,242,238,.32); }
.foot__right{ text-align:right; }

/* ============================================================
   6 bis · COMPRA, STRIPE Y VUELTA A LA TIENDA
   ============================================================ */

/* --- Botones de compra ------------------------------------ */

/* COMPRAR AHORA · botón principal, en latón */
.btn--buy{
  --bg:var(--accent); --fg:#1a1207; --bd:var(--accent);
  font-weight:600;
  box-shadow:0 10px 30px -12px rgba(185,146,95,.75);
}
.btn--buy:hover{ --bg:#c9a26c; --bd:#c9a26c; box-shadow:0 16px 36px -12px rgba(185,146,95,.85); }

/* PAGAR CON STRIPE · color de marca de Stripe */
.btn--stripe{
  --bg:var(--stripe); --fg:#fff; --bd:var(--stripe);
  box-shadow:0 10px 30px -12px rgba(99,91,255,.7);
}
.btn--stripe:hover{ --bg:#544dff; --bd:#544dff; box-shadow:0 16px 36px -12px rgba(99,91,255,.85); }

/* Estado de carga mientras se crea la sesión de Stripe */
.btn.is-loading{ pointer-events:none; opacity:.72; }
.btn.is-loading::before{
  content:"";
  width:1em; height:1em; flex:none;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg) } }

.btn[disabled]{ cursor:not-allowed; }

/* Botón de pago aún no disponible: visible, pero claramente apagado.
   Lo aplica js/stripe.js mientras stripe.activo sea false. */
.btn.is-off{
  --bg:transparent;
  --fg:rgba(244,242,238,.38);
  --bd:rgba(244,242,238,.16);
  box-shadow:none;
  cursor:not-allowed;
}
.btn.is-off:hover{ transform:none; box-shadow:none; }
.btn.is-off::after{
  content:"Próximamente";
  margin-left:.6em;
  padding:.25em .7em;
  border:1px solid rgba(185,146,95,.45);
  border-radius:999px;
  font-size:.72em; letter-spacing:.1em;
  color:var(--accent);
}

/* --- Volver a la tienda principal -------------------------- */
.btn--back{
  --bd:rgba(244,242,238,.26);
  color:var(--muted-light);
}
.btn--back:hover{ --bg:rgba(244,242,238,.07); --bd:rgba(244,242,238,.5); color:var(--text-light); }
.btn--back .ico-back{
  width:.85em; height:.85em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.btn--back:hover .ico-back{ transform:translateX(-3px); }

/* Enlace de vuelta dentro de la cabecera */
.nav__back{ margin-left:1.6rem; }

/* --- Tarjeta de compra ------------------------------------- */
.pay{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.8rem,4vw,3rem);
  border:1px solid var(--line-light);
  border-radius:calc(var(--radius) * 3);
  background:linear-gradient(180deg, rgba(244,242,238,.05), rgba(244,242,238,.015));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.pay__head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1rem 2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--line-light);
}
.pay__name{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:300; letter-spacing:-.015em;
}
.pay__price{
  font-size:clamp(2rem,5vw,3.1rem);
  font-weight:200; letter-spacing:-.03em;
  line-height:1;
}
/* "IVA y envío incluidos" bajo el precio grande */
.pay__price-iva{
  display:block;
  margin-top:.5rem;
  font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}

/* Etiqueta de envío */
.pay__envio{
  display:inline-flex; align-items:center; gap:.55em;
  margin-top:1.4rem;
  padding:.5em 1em;
  border:1px solid rgba(185,146,95,.35);
  border-radius:999px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.pay__dot{
  width:6px; height:6px; flex:none;
  border-radius:50%; background:var(--accent);
  animation:payPulse 2.4s var(--ease) infinite;
}
@keyframes payPulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%    { opacity:.35; transform:scale(.7) }
}

/* Lista de garantías */
.pay__list{
  display:grid; gap:.75rem;
  margin-top:1.8rem;
}
.pay__list li{
  position:relative;
  padding-left:1.7em;
  font-size:.88rem;
  color:var(--muted-light);
}
.pay__list li::before{
  content:""; position:absolute;
  left:0; top:.52em;
  width:.7em; height:.36em;
  border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* Botonera: los tres botones */
.pay__actions{
  display:grid; gap:.8rem;
  margin-top:2.2rem;
}
.pay__actions .btn{ width:100%; }

/* Importe exacto, justo debajo de los botones */
.pay__total{
  margin-top:1.2rem;
  text-align:center;
  font-size:.82rem; line-height:1.6;
  color:var(--muted-light);
}
.pay__total strong{
  color:var(--accent);
  font-weight:600;
  white-space:nowrap;
}

/* Mensajes del proceso de pago */
.pay__msg{
  margin-top:1.4rem;
  padding:.9em 1.1em;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  font-size:.84rem;
  line-height:1.5;
  color:var(--muted-light);
}
.pay__msg--info  { border-color:rgba(185,146,95,.4); color:var(--accent); }
.pay__msg--aviso { border-color:rgba(185,146,95,.4); color:rgba(244,242,238,.85); background:rgba(185,146,95,.07); }
.pay__msg--error { border-color:rgba(214,96,96,.5);  color:#e79a9a;  background:rgba(214,96,96,.08); }

/* Nota de seguridad */
/* ---------- Otro perfil, otra butaca ----------------------
   Debajo de la ficha de compra y dentro de la misma seccion:
   no interrumpe la compra de quien ya ha decidido, y esta a la
   vista de quien acaba de leer que este modelo no le encaja.
   En movil el boton pasa a ancho completo, como los demas. */
.otra-butaca{
  display:flex; flex-direction:column; align-items:center;
  gap:1.15rem;
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  padding:clamp(1.4rem,3.2vw,2rem);
  border:1px solid var(--line-light);
  border-radius:calc(var(--radius) * 3);
  text-align:center;
}
.otra-butaca__texto{
  max-width:54ch;
  margin:0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted-light);
}
.otra-butaca__texto strong{
  display:block;
  margin-bottom:.4rem;
  color:var(--text-light);
  font-weight:500;
}
@media (max-width:520px){
  .otra-butaca__texto{ font-size:.88rem; }
  .otra-butaca .btn{ width:100%; justify-content:center; }
}

.pay__secure{
  display:flex; align-items:flex-start; gap:.7em;
  margin-top:1.6rem;
  font-size:.76rem; line-height:1.6;
  color:rgba(244,242,238,.45);
}
.pay__secure svg{
  width:1.1em; height:1.1em; flex:none;
  margin-top:.15em;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Aviso automático cuando aún no hay backend configurado.
   Lo activa js/stripe.js añadiendo .pago-inactivo al elemento raíz. */
.pay__pending{ display:none; }
.pago-inactivo .pay__pending{
  display:block;
  margin-top:1.4rem;
  padding:.9em 1.1em;
  border:1px dashed rgba(185,146,95,.5);
  border-radius:var(--radius);
  font-size:.8rem; line-height:1.55;
  color:rgba(244,242,238,.72);
  background:rgba(185,146,95,.06);
}

/* --- Pie: redes sociales ----------------------------------- */
.redes{
  display:flex; gap:.7rem;
  margin-top:1.4rem;
}
.redes__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--line-light);
  border-radius:50%;
  color:var(--muted-light);
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), transform .3s var(--ease);
}
.redes__ico svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.redes__punto{ fill:currentColor; stroke:none; }
.redes__ico:hover{
  color:var(--ink);
  background:var(--accent);
  border-color:var(--accent);
  transform:translateY(-2px);
}

/* --- Pie: enlaces a la tienda ------------------------------ */
.foot__links{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin-top:1rem;
}
.foot__links a{
  font-size:.78rem;
  color:var(--muted-light);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot__links a:hover{ color:var(--text-light); border-bottom-color:var(--accent); }

/* Fila de enlaces legales: mismo trato, alineada con su columna */
.foot__links--legal{ margin-bottom:1.1rem; }
@media (min-width:821px){
  .foot__right .foot__links--legal{ justify-content:flex-end; }
}

/* Enlaces legales en las paginas de pago (no tienen pie) */
.status__legal{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem 1.4rem;
  margin-top:2.6rem;
}
.status__legal a{
  font-size:.78rem;
  color:var(--muted-light);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.status__legal a:hover{ color:var(--text-light); border-bottom-color:var(--accent); }

/* Aviso previo de desistimiento, junto al boton de compra */
.pay__legal{
  margin-top:1.1rem;
  font-size:.78rem;
  line-height:1.6;
  color:var(--muted-light);
  border-top:1px solid var(--line-light);
  padding-top:1.1rem;
}
.pay__legal strong{ color:var(--text-light); font-weight:500; }
.pay__legal a{
  color:var(--accent);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.pay__legal a:hover{ border-bottom-color:var(--accent); }

/* ---------- Desistimiento dentro de la ficha de datos -------
   Va en la propia lista de características, antes del botón,
   y siempre a la vista: no se pliega ni se esconde. */
.pay__link{
  color:var(--accent);
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.pay__link:hover{ border-bottom-color:var(--accent); }

.pay__sub{
  display:block;
  margin-top:.3rem;
  font-size:.82rem;      /* más pequeña, pero legible */
  line-height:1.55;
  color:var(--text-light);
  opacity:.85;           /* suficiente contraste, nada de gris lavado */
}
@media (max-width:520px){
  .pay__sub{ font-size:.8rem; }
}

/* ---------- Acabado elegido, junto al botón de compra -------
   Dos mensajes que se turnan: el acabado cuando lo hay, y el
   recordatorio de elegirlo cuando no. Nunca se ven los dos. */
.pay__elegido{
  display:none;
  margin:1.4rem 0 .9rem;
  text-align:center;
  font-size:.92rem;
  color:var(--text-light);
  font-weight:400;
}
.pay__elegido.is-visible{ display:block; }

.pay__falta{
  display:none;
  margin:1.4rem 0 .9rem;
  text-align:center;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
}
html.sin-color .pay__falta{ display:block; }

/* El botón, apagado mientras falte el acabado. Se mantiene a la
   vista para que se entienda que el paso existe. */
.btn--buy.is-espera{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.55);
}

/* La barra fija de abajo hace lo mismo, en pequeño */
html.sin-color .barra__btn{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.55);
}

@media (prefers-reduced-motion:reduce){
  .btn--buy.is-espera{ transition:none; }
}

/* ============================================================
   6 ter · PÁGINAS DE RESULTADO (success.html / cancel.html)
   ============================================================ */
.status{
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,8vw,5rem) var(--gutter);
  text-align:center;
}
.status__card{ width:100%; max-width:620px; }
.status__mark{
  width:88px; height:88px;
  margin:0 auto 2.2rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-light);
}
.status__mark svg{
  width:38px; height:38px;
  fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.status__mark--ok    { border-color:rgba(31,168,85,.5);  background:rgba(31,168,85,.09); }
.status__mark--ok svg{ stroke:#4ecb7d; }
.status__mark--ko    { border-color:rgba(185,146,95,.5); background:rgba(185,146,95,.08); }
.status__mark--ko svg{ stroke:var(--accent); }

/* Aviso de prueba local. No aparece nunca en un pago real. */
.status__sim{
  margin:0 auto 2rem;
  max-width:52ch;
  padding:.9em 1.2em;
  border:1px dashed rgba(185,146,95,.6);
  border-radius:var(--radius);
  background:rgba(185,146,95,.08);
  font-size:.82rem; line-height:1.6;
  color:rgba(244,242,238,.8);
}
.status__sim strong{ color:var(--accent); letter-spacing:.08em; }

.status__title{ font-size:clamp(1.9rem,5vw,3.2rem); margin-bottom:1.2rem; }
.status__text{ color:var(--muted-light); max-width:48ch; margin-inline:auto; }
.status__box{
  margin-top:2.2rem;
  padding:1.3rem 1.5rem;
  border:1px solid var(--line-light);
  border-radius:calc(var(--radius) * 2);
  background:rgba(244,242,238,.03);
  text-align:left;
  font-size:.86rem;
}
.status__row{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.5rem 0;
  border-bottom:1px solid var(--line-light);
}
.status__row:last-child{ border-bottom:0; }
.status__row dt{ color:var(--muted-light); }
.status__row dd{ margin:0; text-align:right; }
.status__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  justify-content:center;
  margin-top:2.6rem;
}
.status__ref{
  margin-top:2rem;
  font-size:.74rem; letter-spacing:.06em;
  color:rgba(244,242,238,.3);
  word-break:break-all;
}

/* --- Responsive de esta sección ---------------------------- */
/* Un solo botón de pago: la rejilla de dos columnas ya no aplica */
/* Cuando se ocultan los enlaces de sección, el botón de volver
   pasa a ser quien empuja hacia la derecha. */
@media (max-width:1040px){
  .nav__back{ margin-left:auto; }
}

@media (max-width:620px){
  .pay__head{ flex-direction:column; align-items:flex-start; }
  .status__actions .btn{ width:100%; }

  /* En móvil el botón se queda solo con la flecha, para que quepa.
     El texto sigue ahí para los lectores de pantalla. */
  .nav__back{ padding:.72em .95em; }
  .nav__back span{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden; white-space:nowrap;
    clip:rect(0 0 0 0); clip-path:inset(50%);
  }
}

/* ============================================================
   6 quater · SECCIONES DE LA FICHA DE PRODUCTO AMPLIADA
   ============================================================ */

/* --- Utilidades nuevas ------------------------------------- */
.lead--center{ margin-inline:auto; max-width:56ch; }
.lead + .lead{ margin-top:1.1rem; }

.note-inline{
  margin-top:1.8rem;
  padding-left:1.1rem;
  border-left:2px solid var(--accent);
  font-size:.92rem;
  line-height:1.65;
  color:var(--muted-light);
}
.section--paper .note-inline{ color:var(--muted-dark); }

.note--light{ color:var(--muted-light); }

.media--wide{ aspect-ratio:16/9; }

/* --- Etiquetas del hero ------------------------------------ */
.hero__tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.8rem;
}
.hero__tags li{
  padding:.45em 1em;
  border:1px solid rgba(244,242,238,.22);
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(244,242,238,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ============================================================
   DISEÑO COMPACTO · 75 cm
   ============================================================ */
.compacta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.compacta__num{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.8rem,4vw,3rem);
  border:1px solid rgba(185,146,95,.35);
  border-radius:calc(var(--radius) * 3);
  background:rgba(185,146,95,.06);
}
.compacta__val{
  font-size:clamp(4rem,12vw,8rem);
  font-weight:200;
  line-height:.9;
  letter-spacing:-.05em;
  color:var(--accent);
}
.compacta__unit{
  margin-top:.8rem;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-light);
  white-space:nowrap;
}
.compacta__text .lead{ max-width:52ch; }

/* ============================================================
   AVISOS HONESTOS (mide tu casa · datos que damos en persona)
   ============================================================ */
.aviso{
  display:flex; gap:1.1rem;
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.4rem,3vw,2rem);
  border:1px solid var(--line-light);
  border-radius:calc(var(--radius) * 2);
  background:rgba(244,242,238,.03);
}
.aviso svg{
  width:1.4rem; height:1.4rem; flex:none;
  margin-top:.15rem;
  fill:none; stroke:var(--accent); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.aviso p{
  font-size:.92rem; line-height:1.7;
  color:var(--muted-light);
}
.aviso p + p{ margin-top:.9rem; }
.aviso__title{
  font-size:1rem !important;
  font-weight:500;
  color:var(--text-light) !important;
  margin-bottom:.6rem;
}
.aviso strong{ color:var(--text-light); font-weight:500; }
.aviso--fuerte{
  border-color:rgba(185,146,95,.4);
  background:rgba(185,146,95,.07);
}
.section--paper .aviso p{ color:var(--muted-dark); }
.section--paper .aviso__title,
.section--paper .aviso strong{ color:var(--text-dark) !important; }

/* ============================================================
   ¿ES ESTA BUTACA ADECUADA PARA MÍ?
   ============================================================ */
.porque{
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.5rem,3vw,2.2rem);
  border-left:2px solid var(--accent);
  background:rgba(244,242,238,.025);
  text-align:left;
}
.porque > p{
  font-size:.95rem;
  color:var(--muted-light);
  margin-bottom:.4rem;
}
.porque .ticks li{ font-size:.95rem; }
.porque strong{ color:var(--text-light); font-weight:500; }

/* ============================================================
   ASESORAMIENTO PERSONALIZADO
   ============================================================ */
.asesoria{
  padding-block:clamp(4rem,9vw,7rem);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(185,146,95,.14), transparent 60%),
    var(--ink-2);
  border-block:1px solid var(--line-light);
}
.asesoria__title{
  font-size:clamp(1.6rem,4vw,2.9rem);
  font-weight:200;
  letter-spacing:-.025em;
  line-height:1.15;
  margin-bottom:1.6rem;
}
.asesoria__actions{
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  margin-top:2.6rem;
}
.asesoria__tel{
  font-size:.88rem;
  color:var(--muted-light);
}
.asesoria__link{
  color:var(--accent);
  border-bottom:1px solid rgba(185,146,95,.4);
  padding-bottom:1px;
  white-space:nowrap;
}
.asesoria__link:hover{ border-bottom-color:var(--accent); }

/* ============================================================
   PASOS DEL ENVÍO
   ============================================================ */
.pasos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
}
.paso{
  padding-top:1.4rem;
  border-top:1px solid var(--line-dark);
}
.paso__num{
  display:block;
  font-size:.7rem; letter-spacing:.24em;
  color:var(--accent);
  margin-bottom:1rem;
}
.paso h3{
  font-size:1.08rem; font-weight:400;
  letter-spacing:-.01em;
  color:var(--text-dark);
}
.paso p{
  margin-top:.6rem;
  font-size:.88rem; line-height:1.6;
  color:var(--muted-dark);
}

/* ============================================================
   PRECIO DESTACADO
   ============================================================ */
.precio__big{
  font-size:clamp(4rem,14vw,9rem);
  font-weight:200;
  line-height:.95;
  letter-spacing:-.05em;
}
.precio__nota{
  margin-top:1rem;
  font-size:.78rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent);
}
.precio__big + .precio__nota + .lead{ margin-top:2rem; }

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq{ border-top:1px solid var(--line-dark); }
.faq__item{
  border-bottom:1px solid var(--line-dark);
}
.faq__item summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.35rem 0;
  cursor:pointer;
  font-size:1.02rem;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--text-dark);
  list-style:none;
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"";
  margin-left:auto;
  flex:none;
  width:11px; height:11px;
  border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.faq__item summary:hover{ color:var(--accent); }
.faq__body{
  padding:0 0 1.5rem;
  max-width:62ch;
}
.faq__body p{
  font-size:.94rem; line-height:1.75;
  color:var(--muted-dark);
}
.faq__body a{
  color:var(--text-dark);
  border-bottom:1px solid var(--accent);
}

/* ============================================================
   OPINIONES (preparado, sin contenido inventado)
   ============================================================ */
.opiniones{
  display:grid;
  gap:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.opiniones.tiene-opiniones{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.opinion{
  margin:0;
  padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--line-light);
  border-radius:calc(var(--radius) * 2);
  background:rgba(244,242,238,.03);
  text-align:left;
}
.opinion blockquote{ margin:0; }
.opinion blockquote p{
  font-size:1.02rem; line-height:1.7;
  font-weight:300;
  color:rgba(244,242,238,.9);
}
.opinion blockquote p::before{ content:"“"; color:var(--accent); }
.opinion blockquote p::after{ content:"”"; color:var(--accent); }
.opinion figcaption{
  margin-top:1.2rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.opinion__autor{
  font-size:.82rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}
.opinion__lugar{
  font-size:.76rem;
  color:var(--muted-light);
}
.opiniones__vacio{
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,2rem);
  border:1px dashed rgba(244,242,238,.2);
  border-radius:calc(var(--radius) * 2);
  font-size:.92rem; line-height:1.7;
  color:var(--muted-light);
  max-width:56ch;
  margin-inline:auto;
}

/* ============================================================
   TEXTO DE CIERRE (SEO)
   ============================================================ */
.seo{
  padding-block:clamp(3rem,6vw,5rem);
  background:#08080a;
  border-top:1px solid var(--line-light);
}
.seo__title{
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:.02em;
  margin-bottom:1.4rem;
  color:rgba(244,242,238,.75);
}
.seo p{
  font-size:.88rem;
  line-height:1.85;
  color:rgba(244,242,238,.45);
}
.seo p + p{ margin-top:1rem; }
.seo a{
  color:rgba(244,242,238,.75);
  border-bottom:1px solid rgba(185,146,95,.5);
}

/* ============================================================
   AJUSTES DE COMPONENTES EXISTENTES
   ============================================================ */
.specs--inline dd{ font-size:.95rem; line-height:1.6; }
.specs--inline .specs__row{ align-items:flex-start; gap:1.5rem; }
.specs--big dd{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  font-weight:300;
  letter-spacing:-.02em;
}
.swatches--4{ grid-template-columns:repeat(4,1fr); }
.plan__lbl--val{
  fill:var(--accent) !important;
  font-size:13px !important;
  letter-spacing:.06em !important;
  text-transform:none !important;
}
.foot__line a{ border-bottom:1px solid rgba(185,146,95,.45); }

/* ============================================================
   RESPONSIVE DE ESTAS SECCIONES
   ============================================================ */
@media (max-width:1040px){
  .pasos{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .compacta{ grid-template-columns:1fr; justify-items:start; }
  .swatches--4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px){
  .pasos{ grid-template-columns:1fr; }
  .compacta__num{ width:100%; }
  .aviso{ flex-direction:column; gap:.8rem; }
  .asesoria__actions .btn{ width:100%; }
  .hero__tags li{ font-size:.66rem; }
}

/* ============================================================
   ACTO PRINCIPAL · la butaca como protagonista
   Portada y narrativa son una sola escena continua.
   ============================================================ */

.acto{
  position:relative;
  /* Valor de reserva: la duración real la fija js/config.js
     (escena.recorridoEscritorio y escena.recorridoMovil). */
  height:190vh;
  background:
    radial-gradient(64% 50% at 50% 38%, rgba(185,146,95,.13), transparent 72%),
    radial-gradient(90% 60% at 50% 100%, rgba(0,0,0,.6), transparent 70%),
    linear-gradient(180deg, #0d0d10 0%, #141419 46%, #0b0b0d 100%);
}

.acto__stage{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
}

/* Sombra de contacto: asienta la butaca sin necesidad de suelo */
/* El panel claro ya asienta la butaca: no hace falta sombra extra */

/* ---------- CAPA 1 · LIENZO ------------------------------- */
.acto__lienzo{
  position:absolute;
  /* Escritorio: la butaca vive en la mitad derecha. La columna
     izquierda queda libre para los textos, sin solapes. */
  /* Los fotogramas llevan canal alfa: la butaca se integra
     directamente con el fondo, sin panel ni recuadro.
     Arranca por debajo de la cabecera, con 24 px de aire. */
  inset:calc(var(--cabecera) + 24px) 2% 5% 42%;
  z-index:1;
}

/* Sombra de contacto bajo la butaca */
.acto__stage::after{
  content:"";
  position:absolute;
  left:71%; bottom:11%;
  width:min(34vw, 430px); height:9vh;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  filter:blur(28px);
  pointer-events:none;
  z-index:0;
}
.acto__lienzo canvas{
  display:block;
  width:100%; height:100%;
}

/* ---------- CAPA 2 · TEXTOS ------------------------------- */
.acto__capas{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}

.beat{
  position:absolute;
  opacity:0;
  visibility:hidden;
  will-change:opacity, transform;
  /* Columna izquierda: nunca más del 40% del ancho */
  width:calc(40% - var(--gutter));
  max-width:560px;
  /* --mov lo escribe js/escena.js; el centrado lo pone el CSS */
  transform:translate3d(0, var(--mov, 0px), 0);
}
/* Todos los bloques comparten la misma columna izquierda:
   así ninguno puede cruzarse con la butaca. */
.beat[data-pos="izq"]{ left:var(--gutter); top:50%; margin-top:-5rem; }

/* La portada necesita más sitio: lleva titular, precio y botones */
.beat--hero{
  top:50%;
  margin-top:0;
  transform:translate3d(0, calc(-50% + var(--mov, 0px)), 0);
}

.beat__h1{
  font-size:clamp(2.1rem, 3.4vw, 3.4rem);
  font-weight:200;
  line-height:.98;
  letter-spacing:-.045em;
  text-shadow:0 4px 60px rgba(0,0,0,.6);
}
/* Segunda línea del H1: completa la búsqueda sin agrandar el titular */
.beat__h1-sub{
  display:block;
  margin-top:.55em;
  font-size:.4em;
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.2;
  color:rgba(244,242,238,.86);
}
.beat__title{
  font-size:clamp(1.8rem, 3.1vw, 3rem);
  font-weight:200;
  line-height:1.04;
  letter-spacing:-.038em;
  text-shadow:0 2px 50px rgba(0,0,0,.6);
}
.beat__title--xl{ font-size:clamp(2rem, 3.8vw, 3.6rem); }
.beat__cifra{ font-style:normal; color:var(--accent); font-weight:300; }

.beat__kicker{
  font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.beat__sub{
  margin-top:1.1rem;
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  color:rgba(244,242,238,.74);
  text-shadow:0 2px 28px rgba(0,0,0,.7);
}
.beat__sub--hero{ max-width:34ch; }

.beat__lista{
  display:flex; flex-direction:column; gap:.45rem;
  font-size:clamp(1.3rem, 2.3vw, 2.2rem);
  font-weight:200; line-height:1.1;
  letter-spacing:-.032em;
  text-shadow:0 2px 50px rgba(0,0,0,.6);
}
.beat[data-pos="der"] .beat__lista{ align-items:flex-end; }
.beat__lista span:nth-child(2){ color:rgba(244,242,238,.86); }
.beat__lista span:nth-child(3){ color:rgba(244,242,238,.7); }
.beat__lista span:nth-child(4){ color:var(--accent); }

/* Elementos de portada dentro del beat */
.beat--hero .hero__price{ margin-top:2rem; }
.beat--hero .hero__actions{ margin-top:2.2rem; }
.beat--hero .hero__tags{ margin-top:1.6rem; }

/* ---------- CAPA 3 · INTERFAZ ----------------------------- */
.acto__scroll{
  position:absolute;
  left:50%; bottom:2.6rem;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  transition:opacity .6s var(--ease);
}
.acto__scroll-line{
  display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, transparent, rgba(244,242,238,.55));
  overflow:hidden;
}
.acto__scroll-txt{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(244,242,238,.35);
}
/* En cuanto arranca el scroll, el indicador sobra */
.acto.ha-empezado .acto__scroll{ opacity:0; pointer-events:none; }
/* ---------- Maqueta provisional de la butaca ---------------
   Esquema vectorial articulado que se mueve con el scroll
   exactamente igual que lo hará el render premium. Sin fondo,
   sin foto y sin nada del local: solo trazo limpio.
   Desaparece sola en cuanto existan los fotogramas buenos.     */

.maqueta{
  position:absolute;
  /* Centrada dentro del lienzo, que ya ocupa la mitad derecha */
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92%, 620px);
  display:flex; flex-direction:column;
  align-items:center; gap:2rem;
  pointer-events:none;
}
.acto.con-imagenes .maqueta{ display:none; }

.maqueta svg{
  width:100%; height:auto;
  overflow:visible;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}

/* Trazo de la butaca */
.mq{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.mq--relleno{
  fill:rgba(185,146,95,.09);
}
.mq--fino{
  stroke-width:1.6;
  opacity:.6;
}
.mq--suelo{
  stroke:rgba(244,242,238,.16);
  stroke-width:1;
  stroke-dasharray:3 9;
}

/* Las piezas articuladas necesitan un giro suave entre cuadros */
[data-maqueta-silla],
[data-maqueta-respaldo],
[data-maqueta-reposapies]{
  transition:transform .12s linear;
}
.mq-mecanismo{
  opacity:0;
  transition:opacity .3s var(--ease);
}

.maqueta__nota{
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(244,242,238,.3);
  text-align:center;
}

@media (max-width:820px){
  .maqueta{
    left:50%;
    top:50%;
    width:min(94%, 440px);
    gap:1.2rem;
  }
  .maqueta__nota{ font-size:.54rem; letter-spacing:.16em; }
}

@media (prefers-reduced-motion:reduce){
  .maqueta{ position:relative; left:auto; top:auto; transform:none; }
  [data-maqueta-silla],
  [data-maqueta-respaldo],
  [data-maqueta-reposapies]{ transition:none; }
}


.colores__cta{ margin-top:clamp(2rem,4vw,3rem); text-align:center; }

/* Opiniones: oculta hasta tener comentarios reales */
#opiniones{ display:none; }

/* ---------- Interfaz del acto: carga, aviso y progreso ----- */


.escena__cargando,
.escena__aviso{
  position:absolute;
  left:50%; transform:translateX(-50%);
  z-index:3;
  letter-spacing:.24em; text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
}
.escena__cargando{
  top:50%;
  font-size:.68rem;
  color:rgba(244,242,238,.35);
}
.escena__aviso{
  top:calc(var(--gutter) + 4.2rem);
  right:var(--gutter);
  left:auto;
  bottom:auto;
  transform:none;
  padding:.38em .85em;
  border:1px dashed rgba(185,146,95,.55);
  border-radius:999px;
  background:rgba(185,146,95,.08);
  color:var(--accent);
  font-size:.6rem;
}

.escena__bar{
  position:absolute;
  left:var(--gutter); right:var(--gutter); bottom:1.5rem;
  height:1px;
  background:rgba(244,242,238,.12);
  z-index:3;
}
.escena__bar span{
  display:block; height:100%; width:0;
  background:var(--accent);
}

/* Variantes de texto por pantalla */
.solo-movil{ display:none; }
.solo-desktop{ display:block; }

@media (max-width:820px){
  .escena__aviso{
    top:calc(var(--gutter) + 3rem);
    right:var(--gutter);
    left:auto;
    bottom:auto;
    font-size:.48rem; letter-spacing:.08em;
    white-space:nowrap;
    padding:.3em .7em;
  }
  .escena__bar{ bottom:1rem; }
  .solo-movil{ display:block; }
  .solo-desktop{ display:none; }
}

/* ============================================================
   MÓVIL · composición propia, no la de escritorio encogida
   ============================================================ */
@media (max-width:820px){
  .acto{ height:150vh; }

  /* Mitad superior para la butaca, mitad inferior para el texto.
     Ni se solapan ni dejan hueco entre medias. */
  .acto__lienzo{ inset:7% 2% 51% 2%; }

  .beat,
  .beat[data-pos="izq"],
  .beat.beat--hero{
    left:var(--gutter); right:var(--gutter);
    width:auto; max-width:none;
    top:51%; bottom:auto;
    margin-top:0;
    transform:translate3d(0, var(--mov, 0px), 0);
    text-align:center;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    max-height:44%;
  }

  .beat__h1{ font-size:clamp(2.2rem, 11vw, 3.4rem); }
  .beat__title{ font-size:clamp(1.7rem, 8vw, 2.6rem); }
  .beat__title--xl{ font-size:clamp(2rem, 9.5vw, 3rem); }
  .beat__sub{ margin-top:.8rem; font-size:.95rem; }
  .beat__sub--hero{ max-width:none; }

  .beat__lista{ font-size:clamp(1.25rem, 6.4vw, 1.9rem); align-items:center; }
  .beat[data-pos="der"] .beat__lista{ align-items:center; }

  .beat--hero .hero__actions{ flex-direction:column; }
  .beat--hero .hero__actions .btn{ width:100%; }
  .beat--hero .hero__price{ margin-top:1.4rem; }
  .beat--hero .hero__tags{ justify-content:center; }
  .beat--hero .hero__price{ align-items:center; }

  .acto__scroll{ bottom:1.4rem; }
  .acto__scroll-line{ height:34px; }
}

@media (max-height:560px) and (max-width:900px){
  .acto{ height:140vh; }
  .acto__lienzo{ inset:0 0 48% 0; }
  .beat__h1{ font-size:clamp(1.6rem, 6vw, 2.2rem); }
}

/* ============================================================
   SIN ANIMACIÓN (accesibilidad)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .acto{ height:auto; }
  .acto__stage{
    position:static; height:auto; overflow:visible;
    padding-block:var(--sec-y);
  }
  .acto__stage::after{ display:none; }
  .acto__lienzo{
    position:relative; inset:auto;
    aspect-ratio:4/3;
    margin-bottom:3.5rem;
  }
  .acto__capas{
    position:static;
    display:grid; gap:3.5rem;
    padding-inline:var(--gutter);
    pointer-events:auto;
  }
  .beat,
  .beat[data-pos="izq"],
  .beat[data-pos="der"],
  .beat[data-pos="centro"]{
    position:static;
    opacity:1 !important; visibility:visible !important;
    transform:none !important;
    text-align:left; max-width:46ch;
  }
  .beat[data-pos="der"] .beat__lista{ align-items:flex-start; }
  .acto__scroll,
  .escena__bar,
  .escena__cargando{ display:none; }
  .escena__aviso{ position:static; transform:none; display:inline-block; margin-top:2rem; }
}


/* ============================================================
   SELECTOR DE COLOR
   ============================================================ */
.colores,
.pay__colores{ margin-top:clamp(1.8rem,3.5vw,2.6rem); }
.pay__colores{ margin-bottom:.4rem; }

.colores__muestras{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1rem,2.5vw,1.8rem);
}

.muestra{
  display:flex; flex-direction:column;
  align-items:center; gap:.7rem;
  padding:0; border:0; background:none;
  font-family:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* El aro de selección va fuera del disco, para no taparlo */
.muestra__disco{
  position:relative;
  width:clamp(58px, 14vw, 76px);
  aspect-ratio:1;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
  outline:2px solid transparent;
  outline-offset:4px;
  transition:outline-color .3s var(--ease), transform .3s var(--ease);
}
.muestra:hover .muestra__disco{ transform:translateY(-3px); }
.muestra.is-elegida .muestra__disco{ outline-color:var(--accent); }

/* Marca de comprobación al elegir */
.muestra.is-elegida .muestra__disco::after{
  content:"";
  position:absolute; right:-3px; bottom:-3px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1207' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-size:14px 14px;
  background-repeat:no-repeat;
  background-position:center;
}

.muestra__nombre{
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-light);
  transition:color .3s var(--ease);
}
.muestra.is-elegida .muestra__nombre{ color:var(--accent); }
.section--paper .muestra__nombre{ color:var(--muted-dark); }

.colores__elegido{
  margin-top:1.3rem;
  text-align:center;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.colores__elegido.is-visible{ opacity:1; }

.pay__nota-color{
  margin-top:1rem;
  text-align:center;
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted-light);
}
.pay__nota-color strong{ color:var(--accent); font-weight:500; }


/* ============================================================
   VISOR DE COLOR · la butaca grande, en el color elegido
   ============================================================ */
.vista{
  margin:0 auto;
  max-width:560px;
  display:flex; flex-direction:column; align-items:center;
}

/* Las imágenes vienen sobre blanco de estudio, así que el marco
   es blanco: no se ve costura entre la foto y su caja. */
.vista__marco{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:calc(var(--radius) * 4);
  background:#fff;
  overflow:hidden;
  box-shadow:0 30px 70px -35px rgba(0,0,0,.8);
}

.vista__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.vista__img.is-visible{ opacity:1; }

.vista__botones{
  display:flex; gap:.5rem;
  margin-top:1.2rem;
}
.vista__btn{
  padding:.55em 1.2em;
  border:1px solid var(--line-light);
  border-radius:999px;
  background:none;
  color:var(--muted-light);
  font-family:inherit;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
}
.vista__btn:hover{ color:var(--text-light); border-color:rgba(244,242,238,.4); }
.vista__btn.is-activa{
  color:var(--ink);
  background:var(--accent);
  border-color:var(--accent);
}

.vista__nota{
  margin-top:1rem;
  text-align:center;
  font-size:.72rem;
  line-height:1.6;
  color:rgba(244,242,238,.42);
  max-width:44ch;
}

/* Las muestras van debajo del visor, con su propio aire */
.vista + .colores{ margin-top:clamp(2rem,4vw,3rem); }

@media (max-width:820px){
  .vista{ max-width:100%; }
  .vista__marco{ border-radius:calc(var(--radius) * 3); }
  .vista__botones{ margin-top:1rem; }
  .vista__btn{ padding:.5em 1em; font-size:.64rem; }
  .vista__nota{ font-size:.66rem; }
}

@media (prefers-reduced-motion:reduce){
  .vista__img{ transition:none; }
}

/* ============================================================
   ESCENA · AYUDAS EN MÓVIL
   ============================================================ */

/* Pastillas de posición */
.escena__pasos{
  position:absolute;
  left:0; right:0; bottom:4.6rem;
  z-index:4;
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:.5rem;
  padding-inline:var(--gutter);
}
.paso-pill{
  padding:.5em 1.1em;
  border:1px solid var(--line-light);
  border-radius:999px;
  background:rgba(11,11,13,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--muted-light);
  font-family:inherit;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
}
.paso-pill:hover{ color:var(--text-light); border-color:rgba(244,242,238,.4); }
.paso-pill.is-activa{
  color:var(--ink);
  background:var(--accent);
  border-color:var(--accent);
}

/* Indicador "desliza para verla en movimiento" */
.escena__desliza{
  position:absolute;
  left:50%; bottom:1.3rem;
  transform:translateX(-50%);
  z-index:4;
  display:flex; align-items:center; gap:.6rem;
  padding:.5em 1.1em;
  border:1px solid var(--line-light);
  border-radius:999px;
  background:rgba(11,11,13,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(244,242,238,.75);
  white-space:nowrap;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.escena__desliza.is-oculto{
  opacity:0;
  transform:translateX(-50%) translateY(10px);
  pointer-events:none;
}
.escena__mano{
  display:inline-flex;
  animation:manoDesliza 1.9s var(--ease) infinite;
}
.escena__mano svg{
  width:17px; height:17px;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
@keyframes manoDesliza{
  0%,100%{ transform:translateY(0);   opacity:.75 }
  50%    { transform:translateY(-5px); opacity:1 }
}

/* La butaca invita a pulsarla */
.acto__lienzo.es-pulsable{ cursor:pointer; }

@media (max-width:820px){
  /* Recorrido más corto: la escena no debe hacerse larga */
  .acto{ height:150vh; }

  /* Hueco bajo el lienzo para pastillas e indicador */
  .acto__lienzo{ inset:calc(var(--cabecera) + 16px) 0 52% 0; }
  .acto__stage::after{ left:50%; top:40%; bottom:auto; width:56vw; height:5vh; }
  .beat,
  .beat[data-pos="izq"],
  .beat.beat--hero{ top:51%; max-height:34%; }

  /* Por encima del botón flotante de WhatsApp, que ocupa
     la esquina inferior derecha */
  .escena__pasos{ bottom:5.2rem; gap:.38rem; padding-inline:.6rem; }
  .paso-pill{ padding:.45em .8em; font-size:.58rem; letter-spacing:.1em; }
  .escena__desliza{ bottom:.9rem; font-size:.58rem; padding:.45em .9em; }
  .acto__scroll{ display:none; }
}

/* Sin animaciones automáticas si el sistema las desaconseja */
@media (prefers-reduced-motion:reduce){
  .escena__mano{ animation:none; }
  .escena__desliza{ position:static; transform:none; display:inline-flex; margin-top:1.5rem; }
  .escena__pasos{ position:static; margin-top:1.5rem; }
}


/* ============================================================
   BARRA FIJA DE COMPRA
   Siempre a la vista, en móvil y escritorio. Se retira sola al
   llegar al pie para no taparlo.
   ============================================================ */
:root{ --barra: 72px; }

.barra{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:98;                 /* bajo la cabecera (100), sobre todo lo demás */
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem;
  padding:.75rem var(--gutter);
  min-height:var(--barra);
  background:rgba(11,11,13,.92);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--line-light);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.barra.is-oculta{
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
}

.barra__datos{
  display:flex; flex-direction:column; gap:.15rem;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.barra__nombre{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-light);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra__precio{
  display:flex; align-items:baseline; gap:.6rem;
  flex-wrap:wrap;
}
.barra__precio strong{
  font-size:1.35rem;
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--text-light);
}
.barra__nota{
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.barra__btn{ flex:none; }

/* El contenido no debe quedar debajo de la barra */
.con-barra body,
html.con-barra body{ padding-bottom:var(--barra); }

/* El botón flotante de WhatsApp sube para no chocar */
/* Por encima de la barra. En móvil, además, por encima de las
   pastillas de la escena, para no cruzarse con la última. */
html.con-barra .wa-float{ bottom:calc(var(--barra) + 18px); }
@media (max-width:820px){
  html.con-barra .wa-float{ bottom:calc(var(--barra) + 7rem); }
}

@media (max-width:820px){
  :root{ --barra: 66px; }
  .barra{
    gap:.8rem;
    padding:.6rem var(--gutter);
  }
  .barra__nombre{ font-size:.62rem; letter-spacing:.08em; }
  .barra__precio strong{ font-size:1.15rem; }
  /* El dato ya está en la portada: en móvil sobra y hace que
     la barra no quepa */
  .barra__nota{ display:none; }
  .barra__btn{ padding:.85em 1.3em; font-size:.72rem; }

  /* Las ayudas de la escena suben por encima de la barra */
  /* La barra ya ofrece precio y compra: en la portada sobran
     los botones, y así caben las pastillas sin solaparse */
  .beat--hero .hero__actions{ display:none; }
  .escena__pasos{ bottom:calc(var(--barra) + 2.6rem); }
  .escena__desliza{ bottom:calc(var(--barra) + .8rem); }
}

@media (prefers-reduced-motion:reduce){
  .barra{ transition:none; }
}

/* ---------- 7 · RESPONSIVE -------------------------------- */
@media (max-width:1040px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  /* Los enlaces no se ocultan: pasan al panel desplegable.
     Ver el bloque "MENÚ" más arriba. */
}

@media (max-width:820px){
  .split,
  .split--reverse{ grid-template-columns:1fr; }
  .split--reverse .split__text{ order:0; }
  .swatches{ grid-template-columns:repeat(3,1fr); }
  .zoom{ height:300vh; }
  .zoom__media::after{
    background:linear-gradient(to top, rgba(8,8,10,.94) 12%, rgba(8,8,10,.4) 60%, rgba(8,8,10,.1) 100%);
  }
  .zoom__ui{ justify-content:flex-end; padding-bottom:clamp(3rem,10vh,6rem); }
  .zoom__steps{ max-width:100%; min-height:210px; }
}

@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .swatches{ grid-template-columns:repeat(2,1fr); }
  .hero{ align-items:flex-end; }
  .hero__actions .btn{ width:100%; }
  .foot__inner{ flex-direction:column; }
  .foot__right{ text-align:left; }
  .nav .btn--wa{ display:none; }
  .wa-float{ display:flex; }
  .media__cap{ font-size:.66rem; }
}

/* ---------- 8 · ACCESIBILIDAD ----------------------------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .zoom{ height:auto; }
  .zoom__stage{ position:static; height:auto; padding-block:var(--sec-y); }
  .zoom__media{ position:relative; inset:auto; aspect-ratio:16/10; margin-bottom:2.5rem; }
  .zoom__steps{ position:static; min-height:0; display:grid; gap:2.5rem; max-width:none; }
  .zoom__step{ position:static; opacity:1; transform:none; }
  .hero__scroll{ display:none; }
}

@media print{
  .nav,.wa-float,.hero__scroll{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- Portada en móviles pequeños --------------------
   En pantallas cortas el bloque de portada no cabía entero y
   los botones quedaban por debajo del borde. Se aligera: las
   etiquetas informativas se repiten más abajo en la página,
   así que aquí sobran.                                        */
/* Portada en móvil: entra entera en la mitad inferior.
   Las etiquetas informativas se repiten más abajo en la página,
   así que aquí sobran. */
@media (max-width:820px){
  .beat--hero .hero__tags{ display:none; }
  .beat__h1{ font-size:clamp(1.7rem, 7.6vw, 2.3rem); }
  .beat__sub--hero{ font-size:.88rem; margin-top:.7rem; }
  .beat--hero .hero__price{ margin-top:1rem; gap:.15rem; }
  .beat--hero .hero__price-value{ font-size:1.6rem; }
  .beat--hero .hero__price-note{ font-size:.62rem; }
  .beat--hero .hero__actions{ margin-top:1.1rem; gap:.5rem; width:100%; }
  .beat--hero .btn{ padding:.85em 1.4em; font-size:.74rem; }
}

/* ---------- Botones en pantallas estrechas -----------------
   .btn lleva white-space:nowrap para que no parta en dos en
   escritorio. En móviles pequeños eso impide que encoja por
   debajo del ancho de su texto y desborda la pantalla. Aquí
   se le permite partir.                                       */
@media (max-width:480px){
  .btn{
    white-space:normal;
    padding-inline:1.25em;
    text-align:center;
    min-width:0;
  }
  .pay__actions .btn,
  .hero__actions .btn,
  .status__actions .btn{ width:100%; }
}

/* Red de seguridad: en pantallas muy estrechas una palabra larga
   ("levantapersonas") podría desbordar. Solo aquí se permite
   partirla; en escritorio nunca debe romperse. */
@media (max-width:520px){
  .beat__h1,
  .beat__title{ overflow-wrap:break-word; }
}


/* ============================================================
   AVISO DE COOKIES · js/consent.js
   Solo existe si config.js → medicion.googleAds tiene un ID.
   Por encima de la barra de compra y del botón de WhatsApp,
   pero sin tapar la página entera: se puede seguir navegando.
   ============================================================ */
.cookies{
  position:fixed;
  left:max(12px, env(safe-area-inset-left));
  right:max(12px, env(safe-area-inset-right));
  bottom:max(12px, env(safe-area-inset-bottom));
  z-index:200;
  display:flex; justify-content:center;
  pointer-events:none;
}
.cookies[hidden]{ display:none; }
.cookies__inner{
  pointer-events:auto;
  width:100%; max-width:760px;
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(18px,3vw,26px);
  background:var(--ink-2);
  border:1px solid var(--line-light);
  border-radius:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  color:var(--text-light);
  font-family:var(--font);
}
.cookies__title{
  margin:0 0 .4em;
  font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.cookies__text{
  margin:0 0 1.1em;
  font-size:.9rem; font-weight:300; line-height:1.6;
  color:rgba(244,242,238,.82);
}
.cookies__text a{ color:var(--accent); }
.cookies__panel{ display:grid; gap:.8em; margin:0 0 1.2em; }
.cookies__panel[hidden]{ display:none; }
.cookies__opt{
  display:flex; gap:.8em; align-items:flex-start;
  font-size:.85rem; font-weight:300; line-height:1.55;
  color:rgba(244,242,238,.78);
  cursor:pointer;
}
.cookies__opt b{ color:var(--text-light); font-weight:500; }
.cookies__opt input{ margin-top:.25em; accent-color:var(--accent); width:1.05em; height:1.05em; flex:none; }
.cookies__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
/* Rechazar y Aceptar: mismo tamaño, mismo peso visual */
.cookies__btn{ --bd:rgba(244,242,238,.45); min-width:9.5em; }
.cookies__btn:hover{ --bg:rgba(244,242,238,.08); --bd:rgba(244,242,238,.7); }
.cookies__btn[hidden], .cookies__link[hidden]{ display:none; }
.cookies__link{
  background:none; border:0; padding:.6em .2em;
  font:inherit; font-size:.8rem; letter-spacing:.06em;
  color:var(--muted-light); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.cookies__link:hover{ color:var(--text-light); }
.cookies :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:520px){
  .cookies__actions .cookies__btn{ flex:1 1 40%; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .cookies__btn{ transition:none; }
}

/* Enlace "Configurar cookies" de los pies de página */
[data-cookies-config]{ cursor:pointer; }
[data-cookies-config][hidden]{ display:none !important; }