/* ═══════════════════════════════════════════════════════════════════
   TRES AMBIENTES — Mesas a medida
   Arquetipo: Editorial Light Cream. Fondo crudo, tarjetas blancas con
   sombra suave, serif itálica en los títulos (Fraunces), Inter en el
   cuerpo. Verde de marca como acento, madera como acento cálido
   secundario. Minimalista, profesional, directo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root{
  --bg:#ffffff;                 /* blanco — fondo de página */
  --bg-2:#ece1cd;               /* arena — franjas secundarias */
  --paper:#ffffff;              /* tarjetas */
  --ink:#221d17;                /* tinta casi negra, cálida */
  --ink-soft:#41392f;
  --ink-mute:#7d7264;           /* gris cálido — metadatos */
  --accent:#7ac49f;             /* verde de marca — acento principal */
  --accent-ink:#0c2c1c;         /* texto sobre el verde */
  --wood:#a9754a;               /* acento cálido secundario — madera */
  --line:rgba(34,29,23,.12);
  --line-soft:rgba(34,29,23,.07);
  --line-strong:rgba(34,29,23,.24);
  --shadow-sm:0 10px 26px -16px rgba(56,40,18,.28);
  --shadow-md:0 24px 56px -24px rgba(56,40,18,.32);
  --radius-lg:26px;
  --radius:16px;
  --radius-sm:10px;
  --gut:clamp(20px,5vw,44px);
  --wrap:1240px;
  --ease:cubic-bezier(.22,.75,.2,1);
  --ease-soft:cubic-bezier(.16,.86,.3,1);
}

/* ── 2. RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--wood);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ── 3. TIPOGRAFÍA ─────────────────────────────────────────────── */
h1,h2,h3,.hero-t,.term-info h3{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto}
em,.hl,.it{font-style:italic}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.kick{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:9px;
}
.kick::before{content:"";width:20px;height:1px;background:var(--wood)}
h1{line-height:.98;text-wrap:balance}
h2{font-size:clamp(30px,4.6vw,50px);line-height:1.04;text-wrap:balance}
h3{font-size:clamp(21px,2.4vw,26px)}
.lede{font-size:clamp(16.5px,1.7vw,19px);max-width:52ch;color:var(--ink-soft);margin-top:16px;line-height:1.6}

/* ── 4. GRILLA ─────────────────────────────────────────────────── */
.g12{display:grid;grid-template-columns:1fr;gap:0;max-width:var(--wrap);margin:0 auto}
@media(min-width:900px){.g12{grid-template-columns:repeat(12,1fr)}}

.sec{border-top:1px solid var(--line-soft);scroll-margin-top:74px;padding:64px 0}
@media(min-width:900px){.sec{padding:92px 0}}
.sec-head{padding:0 var(--gut)}
.sh-a{margin-bottom:0}
.sh-b{max-width:760px}
@media(min-width:900px){
  .sec-head{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:0;padding:0 var(--gut)}
  .sh-a{grid-column:1/4}
  .sh-b{grid-column:4/12}
}

/* ── 5. SPLASH ─────────────────────────────────────────────────── */
.splash{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-items:center;
  animation:splashSafety .01s 4.5s forwards;
}
.splash.is-out{opacity:0;pointer-events:none;transition:opacity .6s var(--ease-soft)}
@keyframes splashSafety{to{opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0)}}
.splash-in{display:flex;align-items:center;gap:18px;padding:0 20px}
.splash-rule{height:1px;background:var(--wood);width:clamp(24px,10vw,90px)}
.splash-txt{
  font-family:"Fraunces",serif;font-style:italic;font-size:15px;
  letter-spacing:.04em;white-space:nowrap;color:var(--ink-soft);
}

/* ── 6. CURSOR — dos círculos limpios, mix-blend-mode difference ── */
.cur{
  position:fixed;top:0;left:0;z-index:250;pointer-events:none;
  opacity:0;transition:opacity .25s;
  display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cur.is-on{opacity:1}
.cur-box{width:16px;height:16px;border:1px solid #fff;border-radius:50%;display:block}
.cur-xy{font-size:9.5px;letter-spacing:.06em;color:#fff;white-space:nowrap;font-family:"Inter",sans-serif}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* ── 7. NAV ────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid var(--line-soft)}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:66px;
}
/* -- logotipo del header: isotipo (assets/img/isotipo.webp) + lockup
   de 2 líneas a la par del isologo real de la marca (ver el isologo
   adjunto) — "TRES AMBIENTES" en versalitas bien marcadas y, debajo,
   "muebles" en itálica con el verde de marca. Antes era una sola
   línea en Fraunces medium sin versalitas, bastante más floja que el
   isologo real. -- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.brand-nombre{
  font-family:"Inter",sans-serif;font-size:14px;font-weight:800;
  letter-spacing:.035em;text-transform:uppercase;color:var(--ink);font-style:normal;
}
.brand-sub{
  font-family:"Fraunces",serif;font-size:11.5px;font-weight:500;font-style:italic;
  letter-spacing:.01em;color:var(--wood);
}
.nav-links{display:none;gap:28px}
.nav-links a{font-size:12.5px;letter-spacing:.03em;color:var(--ink-mute);position:relative;padding:2px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--wood);transition:right .28s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
@media(min-width:1000px){.nav-links{display:flex}}

/* ── 8. BOTONES ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);border-radius:999px;padding:15px 28px;
  font-size:13px;letter-spacing:.02em;font-weight:600;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
  box-shadow:0 1px 0 rgba(0,0,0,0);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 17px;font-size:11.5px}
.btn-lg{padding:19px 34px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong,rgba(34,29,23,.28))}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* -- botones de WhatsApp: verde de marca (--accent, el mismo del
   isotipo), a pedido — se distinguen de "Armar mi mesa" (que sigue
   en negro) porque todos estos abren WhatsApp. -- */
.btn[data-wa]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn[data-wa]:hover{filter:brightness(.93);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost[data-wa]{border-color:var(--accent);color:var(--ink)}
.btn-ghost[data-wa] .ico-wa{color:var(--accent)}
.btn-ghost[data-wa]:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ── 9. HERO ───────────────────────────────────────────────────── */
.hero{border-top:0;padding:52px 0 0}
@media(min-width:900px){.hero{padding:76px 0 0}}
.hero-a{padding:0 var(--gut) 36px}
.hero-b{padding:0 var(--gut)}
@media(min-width:900px){
  .g12.hero-g{align-items:center}
  .hero-a{grid-column:1/7;padding:0 var(--gut) 0 var(--gut)}
  .hero-b{grid-column:7/13;padding:0 var(--gut)}
}
.hero-t{
  font-size:clamp(2.6rem,6.4vw,4.6rem);
  font-weight:400;line-height:1.02;max-width:13ch;margin:0 0 24px;
}
.hero-t .hl{color:var(--wood);font-style:italic}
.hero-p{max-width:46ch;font-size:clamp(15.5px,1.6vw,17.5px);color:var(--ink-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ── 10. FOTOS ─────────────────────────────────────────────────── */
.foto{
  position:relative;aspect-ratio:var(--ar,4/5);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2);
  box-shadow:var(--shadow-md);
}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{
  font-size:12.5px;line-height:1.6;color:var(--ink-mute);padding:12px 2px 0;
}
.foto-hero{margin-top:28px;will-change:transform}
@media(min-width:900px){.foto-hero{margin-top:0}}
.estr-foto .foto{box-shadow:var(--shadow-md)}

/* ── 11. MARQUEE ───────────────────────────────────────────────── */
.marq{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:clip;background:var(--bg-2);margin-top:44px}
@media(min-width:900px){.marq{margin-top:64px}}
.marq-track{
  display:flex;align-items:center;gap:30px;white-space:nowrap;
  padding:15px 0;font-size:12px;letter-spacing:.1em;color:var(--ink-mute);
  text-transform:uppercase;will-change:transform;
}
.marq-track i{color:var(--wood);font-style:normal}

/* ── 12. CONFIGURADOR ──────────────────────────────────────────── */
/* -- .config-visual (la foto, cuadrada — ver .mesa-foto) y
   .config-panel (las 3 elecciones + ficha + specs + CTA) SOLO pueden
   convivir con sticky cuando están en columnas separadas, lado a
   lado — un "sidebar pegajoso" clásico de escritorio. En mobile es 1
   sola columna, así que .config-visual va OCULTA ahí (display:none):
   su misma info se ve en el .config-dock, fijo abajo de la pantalla
   (ver más abajo) — eso evita el bug ya visto en este proyecto de
   una foto sticky en una sola columna tapando el panel que sigue
   bajando por debajo de ella en el mismo ancho. -- */
.config-grid{display:grid;grid-template-columns:1fr;gap:26px;padding:0 var(--gut)}
@media(min-width:900px){.config-grid{grid-template-columns:5fr 7fr;gap:56px;padding:0 var(--gut);align-items:start}}

.config-visual{display:none}
@media(min-width:900px){.config-visual{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px;z-index:5}}

/* -- 280px de padding-bottom en mobile: el alto del .config-dock fijo
   (ver más abajo, foto de 149px + padding) + margen, para que el CTA
   de WhatsApp del panel nunca quede tapado detrás del cuadro fijo. -- */
.config-panel{display:flex;flex-direction:column;gap:24px;padding-bottom:280px}
@media(min-width:900px){.config-panel{gap:28px;padding-bottom:0}}
.config-block{display:flex;flex-direction:column;gap:10px}
.config-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}

/* -- .config-dock: el cuadro de representación en mobile. Aparece fijo
   abajo de la pantalla apenas el scroll entra a #s01 y ya no se
   vuelve a ocultar — queda ahí para el resto de la visita (ver
   initConfigDock() en main.js) — arriba de .barra (bottom:12px,
   z-index:130 — ver sección 18). Vive FUERA de #s01 en el HTML a
   propósito (ver el comentario en index.html): ningún ancestro con
   [data-reveal] activo, así el position:fixed nunca queda relativo al
   ancestro equivocado. Con pointer-events:none en el estado oculto
   (antes de llegar a #s01) y solo :auto cuando está activo, así nunca
   bloquea clics mientras está afuera de escena. -- */
.config-dock{
  position:fixed;left:12px;right:12px;bottom:96px;z-index:120;
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:8px;
  transform:translateY(160%);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease-soft),opacity .3s var(--ease-soft);
}
.config-dock.is-active{transform:translateY(0);opacity:1;pointer-events:auto}
@media(min-width:900px){.config-dock{display:none}}
/* -- 76px → 99px (+30%) → 149px (+50% más, a pedido) -- */
.config-dock-foto{width:149px;height:149px;flex:none;border-radius:14px;overflow:hidden;position:relative;background:var(--bg-2)}
.config-dock-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* -- líneas apiladas: etiqueta, cantidad de personas + medida
   (data-config-dock-medida, la pinta pintarMesa() en main.js junto
   con el resto del panel), color, y la madera un renglón más abajo
   que el color (a pedido, antes iban juntos en la misma línea) -- */
.config-dock-nota{display:flex;flex-direction:column;gap:3px;min-width:0}
.config-dock-label{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.config-dock-medida{font-size:11px;font-weight:600;color:var(--ink-mute)}
.config-dock-color,.config-dock-madera{font-size:13.5px;font-weight:600;color:var(--ink)}

/* -- las 3 elecciones: siempre visibles juntas, en flujo normal,
   tanto en mobile como en escritorio -- */
.config-steps{display:flex;flex-direction:column;gap:20px}
@media(min-width:900px){.config-steps{gap:22px}}

/* -- chips: cantidad de personas. Achicados a propósito (antes eran
   más grandes) para que las 3 elecciones entren cómodas sin
   necesitar scroll interno en ningún tamaño de pantalla. -- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong,rgba(34,29,23,.24));
  font-size:12px;font-weight:600;background:var(--paper);color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.chip:hover{border-color:var(--ink);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* -- pills: madera -- */
.maderas{display:flex;flex-wrap:wrap;gap:7px}
.madera-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;
  border-radius:999px;border:1px solid var(--line-strong,rgba(34,29,23,.24));background:var(--paper);
  font-size:11.5px;font-weight:600;color:var(--ink-soft);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.madera-pill::before{
  content:"";width:15px;height:15px;border-radius:50%;background:var(--tono,#ccc);
  border:1px solid rgba(0,0,0,.12);flex:none;
}
.madera-pill:hover{transform:translateY(-2px)}
.madera-pill[aria-pressed="true"]{border-color:var(--wood);box-shadow:0 0 0 3px rgba(169,117,74,.16);color:var(--ink)}

/* -- ficha de la madera elegida: color, veta, dureza -- */
.madera-info{display:flex;gap:16px;padding:18px;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.madera-tono{
  --tono:#ccc;--vt:#999;--foto:none;flex:none;width:44px;height:44px;border-radius:10px;
  box-shadow:0 0 0 1px var(--line-strong,rgba(34,29,23,.24));
  background:
    var(--foto),
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 45%),
    repeating-linear-gradient(91deg,
      var(--tono) 0px, var(--tono) 5px, var(--vt) 5px, var(--vt) 5.8px,
      var(--tono) 5.8px, var(--tono) 11px, var(--vt) 11px, var(--vt) 12px);
  background-size:cover,auto,auto;
  background-position:center,center,center;
  background-color:var(--tono);
  transition:opacity .2s var(--ease);
}
.madera-info-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.madera-nombre{font-size:16px;transition:opacity .2s var(--ease)}
.madera-veta{font-size:12.5px;color:var(--ink-mute);transition:opacity .2s var(--ease)}
.madera-texto{font-size:13px;color:var(--ink-mute);line-height:1.5;transition:opacity .2s var(--ease)}
.dureza{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-mute);margin:2px 0}
.dureza-label{letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.dureza-bar{
  --v:3;width:56px;height:6px;border-radius:999px;background:var(--line-soft);
  position:relative;overflow:hidden;flex:none;
}
.dureza-bar::after{
  content:"";position:absolute;inset:0;width:calc(var(--v) / 5 * 100%);
  background:var(--wood);border-radius:inherit;transition:width .4s var(--ease)
}
.dureza-nivel{color:var(--ink-soft);font-weight:600}
.madera-info.is-fading .madera-tono,
.madera-info.is-fading .madera-nombre,
.madera-info.is-fading .madera-veta,
.madera-info.is-fading .madera-texto{opacity:0}

/* -- foto combinada de la mesa (estructura + tapa juntas) + swatches
   de color -- Una sola <img>: cambiar de color O de madera cambia el
   src al instante, sin crossfade ni transición (a pedido: la pata y
   la tapa tienen que quedar "puestas" ahí mismo, no aparecer con un
   fundido). Es la misma foto real del taller en las 28 combinaciones
   — solo cambia qué recorte de pixels se le pisa encima.

   Cuadrada (1:1, como un recorte de 1080×1080) en vez de vertical:
   así es bastante más baja, y por eso .config-visual (que la
   contiene, sticky solo en escritorio — ver el comentario arriba de
   .config-grid) nunca necesita scroll interno propio. -- */
.mesa-foto{--ar:1/1;overflow:hidden;width:100%;max-width:340px;margin:0 auto}
@media(min-width:900px){.mesa-foto{max-width:100%}}
.mesa-img{position:absolute;inset:0}
.term-info{display:flex;flex-direction:column;gap:10px}
.term-tag{
  display:inline-block;width:max-content;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:5px 12px;
  transition:opacity .2s var(--ease);
}
.term-nombre{font-size:20px;transition:opacity .2s var(--ease)}
.term-texto{font-size:14px;color:var(--ink-mute);line-height:1.55;max-width:40ch;transition:opacity .2s var(--ease)}
.term-info.is-fading .term-tag,
.term-info.is-fading .term-nombre,
.term-info.is-fading .term-texto{opacity:0}

/* -- vista combinada: una sola foto de la mesa entera (estructura +
   tapa juntas), en vez de la franja de tapa CSS + foto de estructura
   separadas que había antes -- */
.mesa-mock{display:flex;flex-direction:column;gap:8px}
.mesa-mock-nota{font-size:12px;color:var(--ink-mute);line-height:1.5;text-align:center}
.mesa-mock-nota b{color:var(--ink-soft);font-weight:600}
@media(min-width:900px){.mesa-mock-nota{text-align:left}}

.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{
  --sw:#ccc;width:28px;height:28px;padding:0;margin:0;border-radius:50%;
  background:var(--sw);border:2px solid var(--paper);cursor:pointer;position:relative;
  box-shadow:0 0 0 1px var(--line-strong,rgba(34,29,23,.24));
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.swatch[data-id="acero"]{background:linear-gradient(135deg,#f2f2f2,#9a9a9a 48%,#dcdcdc)}
.swatch:hover{transform:translateY(-3px) scale(1.06)}
.swatch:active{transform:translateY(-1px) scale(.96)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 1px var(--paper),0 0 0 3.5px var(--wood)}

/* -- paso 1, cantidad de personas: se muestra suelto, grande, antes
   del plano — a pedido, para que se elija primero y recién ahí se
   vea el plano ya a esa medida. -- */
.config-personas-wrap{padding:0 var(--gut);margin-bottom:8px}
.config-block-personas .config-label{font-size:13px}
.config-block-personas .chips{gap:10px;margin-top:2px}
.config-block-personas .chip{padding:12px 22px;font-size:15px}

.config-plano-head{margin-top:36px}
.config-plano-wrap{padding:0 var(--gut);margin-bottom:44px}
/* -- .config-plano-wrap-lg: a pedido, el plano se ve "bien grande" —
   achica el gutter lateral en pantallas anchas para que la figura
   gane ancho real (el svg ya escala a width:100%, así que más ancho
   de contenedor = plano más grande, sin distorsionar la escala). -- */
@media(min-width:900px){.config-plano-wrap-lg{padding:0 24px}}
@media(min-width:1300px){.config-plano-wrap-lg{padding:0 6px}}

/* -- plano técnico -- */
.plano{margin:0;border-radius:var(--radius);background:var(--paper);padding:22px 22px 12px;box-shadow:var(--shadow-sm)}
.plano svg{width:100%;height:auto;display:block}
.plano:empty{display:none}
.plano-pie{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.02em;color:var(--ink-mute);
  border-top:1px solid var(--line-soft);padding:14px 2px;margin-top:10px;
}
.plano-pie b{color:var(--ink)}

/* -- panel: medidas (sin precio — eso se consulta por WhatsApp) -- */
.panel{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;background:var(--line-soft);border-radius:var(--radius);overflow:hidden}
@media(min-width:600px){.panel{grid-template-columns:repeat(3,1fr)}}
.panel>div{padding:20px 18px;background:var(--paper)}
.panel dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px}
.panel dd{margin:0;font-size:clamp(20px,3vw,26px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.panel dd small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-mute);margin-top:9px;letter-spacing:0;line-height:1.45}

.sel-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sel-cta .btn{display:inline-flex;align-items:center;gap:8px}
.sel-cta .btn-lg{padding:13px 22px;font-size:13px}
.ico-wa{width:16px;height:16px;flex:none;fill:currentColor}
.sel-note{font-size:13px;color:var(--ink-mute);max-width:40ch}

/* ── 13. ESTRUCTURA ────────────────────────────────────────────── */
.estr{padding:0 var(--gut);gap:44px}
.estr-list{display:flex;flex-direction:column}
@media(min-width:900px){
  .estr-list{grid-column:1/8}
  .estr-foto{grid-column:8/13}
}
.row{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:620px){.row{grid-template-columns:140px 1fr;gap:22px}}
.row:first-child{padding-top:0}
.row:last-child{border-bottom:0}
.row-k{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood);
  align-self:start;font-weight:700;justify-self:start;
}
.row-v{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}

/* ── 14. PROCESO ───────────────────────────────────────────────── */
.proc{display:grid;grid-template-columns:1fr;gap:0;padding:0 var(--gut)}
@media(min-width:760px){.proc{grid-template-columns:repeat(5,1fr);gap:28px}}
.proc li{padding:24px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:760px){.proc li{border-bottom:0;padding:0}}
.proc-n{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--accent);
  margin-bottom:16px;
}
.proc li b{display:block;font-family:"Fraunces",serif;font-weight:500;font-size:19px;margin-bottom:8px}
.proc li span{font-size:14px;color:var(--ink-mute);line-height:1.55}
.proc-note{padding:26px var(--gut) 0;font-size:13.5px;color:var(--ink-mute)}

/* ── 15. ENTREGAS ──────────────────────────────────────────────── */
.entr{padding:0 var(--gut);gap:36px}
@media(min-width:900px){
  .entr-zonas{grid-column:1/7}
  .entr-foto{grid-column:7/13}
}
.zonas{display:flex;flex-wrap:wrap;gap:9px}
.zonas li{
  font-size:12.5px;letter-spacing:.01em;padding:9px 15px;border-radius:999px;
  background:var(--paper);color:var(--ink-soft);box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.zonas li:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}

/* ── 16. FAQ ───────────────────────────────────────────────────── */
.faq{padding:0 var(--gut)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:first-child{border-top:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 0;
  position:relative;padding-right:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font-family:"Fraunces",serif;font-size:18px;font-weight:500;letter-spacing:-.005em}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--ink);
  background:var(--bg-2);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;line-height:1;
  transition:background .2s var(--ease),transform .3s var(--ease);
}
.faq details[open] summary::after{content:"–";background:var(--accent)}
.faq .ans{padding:0 0 26px;font-size:15.5px;max-width:66ch;color:var(--ink-soft)}

/* ── 17. CIERRE + PIE ──────────────────────────────────────────── */
.cierre .sh-b .btn{margin-top:28px}
.pie{border-top:1px solid var(--line-soft);background:var(--bg-2);padding:0 0 96px}
@media(min-width:1000px){.pie{padding-bottom:0}}
.pie-g{padding:0 var(--gut)}
.pie-a,.pie-b,.pie-c{padding:40px 0}
@media(min-width:900px){
  .pie-a{grid-column:1/6;padding:56px 0}
  .pie-b{grid-column:6/9;padding:56px 0}
  .pie-c{grid-column:9/13;padding:56px 0}
}
.pie-a{display:flex;gap:14px;align-items:flex-start}
.pie-a p{font-family:"Fraunces",serif;font-size:14px;letter-spacing:.02em;line-height:1.7}
.pie-a span{color:var(--ink-mute);font-family:"Inter",sans-serif;font-size:13px}
.pie h3{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px;font-weight:600}
.pie-b a,.pie-c a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-soft);transition:color .2s var(--ease)}
.pie-b a:hover,.pie-c a:hover{color:var(--wood)}

/* ── 18. BARRA FIJA MÓVIL ──────────────────────────────────────── */
.barra{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:130;
  background:var(--paper);border-radius:999px;box-shadow:var(--shadow-md);
  padding:9px 9px 9px 22px;
  display:flex;gap:12px;align-items:center;
  transform:translateY(0);transition:transform .35s var(--ease-soft);
}
.barra.is-hidden{transform:translateY(160%)}
.barra .btn{flex:none}
.barra-t{font-size:10.5px;letter-spacing:.03em;color:var(--ink-mute);line-height:1.4}
.barra-t b{color:var(--ink);font-size:13px;font-weight:700}
@media(min-width:1000px){.barra{display:none}}

/* ── 19. REVEALS ───────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft)}
[data-reveal].is-revealed{opacity:1;transform:none}
html:not(.js) [data-reveal]{opacity:1;transform:none}

.reveal[data-split]{opacity:1;transform:none}

/* ── 20. REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marq-track{animation:none;transform:none}
  .term-tag,.term-nombre,.term-texto{transition:opacity .01s linear}
  .madera-tono,.madera-nombre,.madera-veta,.madera-texto{transition:opacity .01s linear}
  .dureza-bar::after{transition:none}
  .swatch,.swatch:hover,.swatch:active,
  .chip,.chip:hover,
  .madera-pill,.madera-pill:hover,
  .zonas li,.zonas li:hover,
  .btn,.btn:hover{transition:none;transform:none}
}