/* ═══════════════════════════════════════════════════════════
   BIOMAGNÉTICO · tema de sublínea
   Hereda la estructura del sistema Don Colchón (escala de
   espaciado, radios, patrones de componente) y sustituye la
   paleta por la identidad propia: negro, cian y cromo.
   ═══════════════════════════════════════════════════════════ */
:root{
  --noche:#0A0E14;
  --grafito:#11161F;
  --carbon-bm:#171D28;
  --concreto:#232B37;
  --cian:#4DC4F5;
  --cian-hot:#9BE6FF;
  --cian-deep:#1A8FC4;
  --cromo:#C8D2DA;
  --plata:#8A96A3;
  --hueso:#E8EDF1;
  --blanco:#FFFFFF;
  --verde-msi:#2BD97C;
  --ambar:#F5B800;

  /* Degradados de CTA */
  /* Opción 1: los dos azules del rediseño de Don Colchón.
     Amarra visualmente las dos propiedades. Texto en blanco. */
  --grad-cta:linear-gradient(135deg,#2B7DD4 0%,#0F3D6E 100%);
  --grad-cta-hover:linear-gradient(135deg,#3E92E8 0%,#165288 100%);
  /* El azul oscuro no se lee sobre negro cuando se usa como acento
     luminoso, así que datos y barras conservan la rampa cian. */
  --grad-luz:linear-gradient(135deg,#9BE6FF 0%,#4DC4F5 55%,#2A9FDB 100%);
  --grad-borde:linear-gradient(135deg,rgba(155,230,255,.75),rgba(26,143,196,.35));
  --grad-superficie:linear-gradient(160deg,#232B37 0%,#0A0E14 100%);

  --font-display:Montserrat,sans-serif;
  --font-body:Montserrat,sans-serif;
  --font-mono:Montserrat,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;
  --text-lg:clamp(1rem,.55rem + 1.15vw,1.4rem); --text-xl:1.2rem; --text-2xl:1.75rem;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem;
  --space-4:2rem; --space-5:3rem; --space-6:4rem;
  --container-max:1360px;
  --shadow-lg:0 16px 48px rgba(0,0,0,.55);
  --glow:0 6px 24px rgba(15,61,110,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px));font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--hueso);background:var(--noche);-webkit-font-smoothing:antialiased;padding-bottom:74px}
@media (min-width:900px){body{padding-bottom:0}}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-3)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.06;color:var(--blanco)}
.display-xl{font-size:clamp(2.25rem,4.6vw,3.5em)}
.display-lg{font-size:clamp(1.875rem,4vw,3rem)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--cian)}
.lede{font-size:var(--text-lg);color:var(--cromo);max-width:100vw; width: 80vw;}


/* ── Botones con degradado ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:.875rem 1.5rem;font-size:var(--text-base);font-weight:600;border-radius:8px;transition:background-image .2s,transform .15s,box-shadow .2s,color .15s,border-color .15s;white-space:nowrap}
.btn-primary{background-image:var(--grad-cta);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{background-image:var(--grad-cta-hover);transform:translateY(-2px);box-shadow:0 12px 34px rgba(43,125,212,.5)}
.btn-secondary{background:rgba(200,210,218,.04);color:var(--hueso);border:1px solid transparent;background-image:linear-gradient(var(--noche),var(--noche)),var(--grad-borde);background-origin:border-box;background-clip:padding-box,border-box}
.btn-secondary:hover{color:var(--cian-hot);box-shadow:0 0 22px rgba(77,196,245,.2)}
.btn-lg{padding:1.05rem 2rem;font-size:var(--text-lg)}

.announcement{background:var(--grafito);border-bottom:1px solid rgba(200,210,218,.09);padding:.5rem 0;font-size:var(--text-sm);font-weight:500}
.announcement__items{display:flex;justify-content:center;gap:var(--space-5);overflow:hidden}
.announcement__item{display:flex;align-items:center;gap:.4rem;white-space:nowrap;color:var(--plata)}
.announcement__item::before{content:"✓";color:var(--cian);font-weight:700}
@media (max-width:760px){.announcement__item:nth-child(n+3){display:none}}

.hero-wrap{position:relative}

/* ── Header sobre el hero ──
   Sin sticky y sin menú: la primera pantalla no empuja a salir.
   El velo superior le da base al logo y al botón para que no
   floten sobre el vacío. ── */
.nav{position:absolute;top:0;left:0;right:0;z-index:60}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.88) 0%,rgba(10,14,20,.55) 55%,rgba(10,14,20,0) 100%);pointer-events:none}
.nav__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:132px;padding-block:var(--space-2)}
.nav__brand{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:.09em;color:var(--blanco);line-height:1}
.nav__brand span{font-weight:300;color:var(--cromo)}
/* El botón del header pesa menos que los del hero: no compite con ellos */
.nav .btn{padding:.75rem 1.35rem;font-size:var(--text-sm);box-shadow:0 4px 18px rgba(15,61,110,.5)}
.nav .btn:hover{box-shadow:0 8px 26px rgba(43,125,212,.45)}
@media (max-width:640px){
  .nav__inner{min-height:96px;gap:var(--space-2)}
  .nav__brand{font-size:1.05rem;letter-spacing:.06em}
  .nav .btn{padding:.65rem .9rem;font-size:.8rem}
}

/* ── Barra de anclas ──────────────────────────────────────────────
   Píldora de vidrio con indicador deslizante y progreso de lectura.
   El indicador sigue al cursor y vuelve a la sección activa al salir.
   ── */
.jumpnav{position:sticky;top:0;z-index:90;padding:var(--space-2) 0;background:linear-gradient(180deg,rgba(10,14,20,.96) 58%,rgba(10,14,20,0) 100%);transition:padding .25s}
.jumpnav.is-stuck{padding:.6rem 0 var(--space-2)}
.jumpnav__progress{position:absolute;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background-image:var(--grad-luz);opacity:0;transition:opacity .3s}
.jumpnav.is-stuck .jumpnav__progress{opacity:1}
.jumpnav__inner{display:flex;justify-content:center}
.jumpnav__pill{position:relative;display:flex;align-items:center;gap:.1rem;padding:.3rem;border-radius:999px;background:rgba(23,29,40,.7);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(200,210,218,.13);box-shadow:0 8px 32px rgba(0,0,0,.45);max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;transition:border-color .3s,box-shadow .3s}
.jumpnav__pill::-webkit-scrollbar{display:none}
.jumpnav.is-stuck .jumpnav__pill{border-color:rgba(77,196,245,.28)}
/* Indicador deslizante */
.jumpnav__thumb{position:absolute;top:.3rem;left:0;height:calc(100% - .6rem);border-radius:999px;background-image:var(--grad-cta);box-shadow:0 2px 16px rgba(43,125,212,.55);opacity:0;transition:transform .4s cubic-bezier(.34,1.18,.4,1),width .4s cubic-bezier(.34,1.18,.4,1),opacity .25s;pointer-events:none}
.jumpnav__link{position:relative;z-index:1;display:flex;align-items:center;gap:.45rem;font-size:var(--text-sm);font-weight:500;color:var(--plata);white-space:nowrap;padding:.6rem 1.05rem;border-radius:999px;transition:color .22s}
.jumpnav__link:hover{color:var(--blanco)}
.jumpnav__link.is-active{color:var(--blanco);font-weight:600}
.jumpnav__link i{font-style:normal;font-size:.625rem;font-weight:700;letter-spacing:.06em;color:var(--cian);opacity:.6;transition:color .22s,opacity .22s}
.jumpnav__link:hover i{opacity:1}
.jumpnav__link.is-active i{color:rgba(255,255,255,.75);opacity:1}
@media (max-width:900px){
  .jumpnav__inner{justify-content:flex-start}
  .jumpnav__pill{border-radius:14px;width:100%}
  .jumpnav__thumb{border-radius:10px}
  .jumpnav__link{padding:.55rem .8rem;font-size:.82rem}
  .jumpnav__link i{display:none}
}
@media (prefers-reduced-motion:reduce){.jumpnav__thumb{transition:opacity .2s}}

/* ── HERO compacto, texto superpuesto arriba ── */
.hero{position:relative;height:82vh;overflow:hidden;background:var(--noche)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,14,20,.94) 0%,rgba(10,14,20,.72) 38%,rgba(10,14,20,.12) 68%,rgba(10,14,20,0) 100%),
  linear-gradient(180deg,rgba(10,14,20,.55) 0%,rgba(10,14,20,0) 40%,rgba(10,14,20,.7) 100%)}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(9.5rem,16vh,11rem)}
.hero__copy{max-width:38rem}
.hero__title{margin:.7rem 0 var(--space-2)}
.hero__lede{font-size:var(--text-base);color:var(--cromo);max-width:36ch}
.hero__ctas{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
/* Fila de CTAs genérica: spotlight, exclusividad y sucursales.
   Separada del hero para que las reglas de móvil no la afecten. */
.cta-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
@media (max-width:560px){.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%}}
@media (max-width:760px){
  /* Hero móvil: imagen vertical, copy arriba y CTAs abajo dentro
     del mismo flex. Nada absoluto salvo el contenedor completo. */
  .hero{height:auto}
  .hero picture{display:block}
  .hero__img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/4;min-height:560px;object-fit:cover;object-position:center 38%}
  .hero__scrim{background:linear-gradient(180deg,rgba(10,14,20,.94) 0%,rgba(10,14,20,.42) 26%,rgba(10,14,20,.30) 46%,rgba(10,14,20,.86) 76%,var(--noche) 100%)}
  .hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:6.5rem;padding-bottom:var(--space-4)}
  .hero__copy{max-width:none}
  .hero__title{margin:.6rem 0 var(--space-2)}
  .hero__lede{display:block;font-size:.95rem; margin-top: 15em;text-align: center;max-width:100vw}
  .hero__ctas{margin-top:4vh;flex-direction:column;align-items:stretch;gap:.7rem}
  .hero__ctas .btn{width:100%}
}
@media (max-width:420px){
  .hero__img{aspect-ratio:9/14;min-height:600px}
  .hero__ctas{display:none}
  /*Animacion primera*/
.announcement{overflow:hidden}

.announcement__items{
  --items:4;
  --seg:7s;                    /* segundos por aviso */
  display:flex;
  width:max-content;
  gap:var(--space-5);
  justify-content:flex-start;
  overflow:visible;
  animation:marquesina calc(var(--items) * var(--seg)) linear infinite;
}

.announcement:hover .announcement__items,
.announcement:focus-within .announcement__items{animation-play-state:paused}

@keyframes marquesina{
  to{transform:translateX(calc(-50% - var(--space-5) / 2))}
}

@media (prefers-reduced-motion:reduce){
  .announcement__items{animation:none;justify-content:center;flex-wrap:wrap}
}
}



.trust{background:var(--grafito);border-block:1px solid rgba(200,210,218,.1);padding:var(--space-4) 0}
.trust__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);text-align:center}
@media (min-width:700px){.trust__grid{grid-template-columns:repeat(4,1fr)}}
.trust__number{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;background-image:var(--grad-luz);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1.05;margin-bottom:.4rem;letter-spacing:-.03em}
.trust__label{font-size:var(--text-sm);color:var(--plata);font-weight:500}

.section{padding:var(--space-6) 0}

/* ── Fondo con imagen · reutilizable ───────────────────────────────
   Uso:  <section class="section section--bg"
              style="--bg:url('assets/img/fondo-x.jpg')">
   El velo garantiza contraste del texto sobre cualquier foto.
   Sin --bg definido la sección se ve igual que antes, así que se
   puede montar la maqueta y sumar las fotos después.
   Variantes: --bg-pos (default center), --velo (default .82)
   Medidas sugeridas: 2400 × 1400 px · máx 260 KB · WebP
   ────────────────────────────────────────────────────────────────── */
.section--bg{position:relative;isolation:isolate}
.section--bg::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg,none);background-size:cover;background-position:var(--bg-pos,center);background-repeat:no-repeat}
.section--bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--noche) 0%,rgba(10,14,20,var(--velo,.82)) 22%,rgba(10,14,20,var(--velo,.82)) 78%,var(--noche) 100%)}
/* Velo lateral: para fondos donde el texto va de un solo lado */
.section--bg-left::after{background:linear-gradient(90deg,rgba(10,14,20,.96) 0%,rgba(10,14,20,.86) 45%,rgba(10,14,20,.35) 100%),linear-gradient(180deg,var(--noche) 0%,transparent 18%,transparent 82%,var(--noche) 100%)}

/* Textura sin foto: resplandor tenue para secciones que se ven planas
   y donde una imagen no aporta. No necesita archivo. */
.section--glow{position:relative;isolation:isolate}
.section--glow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 0%,rgba(43,125,212,.14) 0%,transparent 60%)}
.section--alt{background:var(--grafito)}
.section__head{max-width:60ch;margin-bottom:var(--space-5)}
.section__head .display-lg{width:80vw; margin:.75rem 0 var(--space-2)}
#como-funciona p {width: 90vw;}
.definicion{background:var(--carbon-bm);border-left:3px solid transparent;border-image:var(--grad-borde) 1;border-radius:0 12px 12px 0;padding:var(--space-4);max-width:74ch}
.definicion p:first-child{font-size:var(--text-lg);color:var(--blanco);margin-bottom:var(--space-2)}
.definicion p:last-child{font-size:var(--text-sm);color:var(--plata);margin:0}

/* ── Tríptico de detalle: tela / corte / resorte ── */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
@media (max-width:760px){.showcase{grid-template-columns:1fr}}
.shot{position:relative;border-radius:12px;overflow:hidden;background:var(--grad-superficie);border:1px solid rgba(200,210,218,.12)}
.shot__ph{aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:var(--space-3);font-size:var(--text-xs);color:var(--plata);line-height:1.6}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-3);background:linear-gradient(180deg,rgba(10,14,20,0),rgba(10,14,20,.92));font-size:var(--text-sm);font-weight:600;color:var(--blanco)}
.shot__cap small{display:block;font-weight:400;font-size:var(--text-xs);color:var(--cromo);margin-top:.2rem}

/* ── Banda ambiente full-bleed ── */
.ambiente{position:relative;height:clamp(550px,42vh,750px);overflow:hidden;background:var(--grad-superficie);display:grid;place-items:center;text-align:center;border-block:1px solid rgba(200,210,218,.12)}
.ambiente__ph{font-size:var(--text-xs);color:var(--plata);max-width:40ch;padding:0 var(--space-3);line-height:1.7}

/* ── Spotlight de modelo ── */
.spotlight{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);align-items:center}
@media (max-width:900px){.spotlight{grid-template-columns:1fr}}
.spotlight__media{aspect-ratio:3/2;border-radius:12px;background:var(--grad-superficie);border:1px solid rgba(200,210,218,.12);display:grid;place-items:center;text-align:center;padding:var(--space-4);font-size:var(--text-xs);color:var(--plata);line-height:1.7}

.capas{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-5);align-items:center}
@media (max-width:900px){.capas{grid-template-columns:1fr;gap:var(--space-4)}}
.capas__svg{width:100%;background:var(--noche);border:1px solid rgba(200,210,218,.12);border-radius:12px;padding:var(--space-3)}
.capa-hit{cursor:pointer}
.capa-hit rect.slab{transition:stroke .2s,stroke-width .2s}
.capa-hit:hover rect.slab,.capa-hit[aria-selected="true"] rect.slab{stroke:var(--cian);stroke-width:1.6}
.capa-lbl{font-family:var(--font-body);font-size:11.5px;fill:var(--cromo);font-weight:500}
.capa-hit[aria-selected="true"] .capa-lbl{fill:var(--cian-hot)}
.capa-lead{stroke:rgba(200,210,218,.3);stroke-width:.75}
.capas__panel{background:var(--carbon-bm);border:1px solid rgba(200,210,218,.12);border-radius:12px;padding:var(--space-4);min-height:240px}
.capas__panel h3{font-size:var(--text-xl);font-weight:700;color:var(--blanco);margin-bottom:.5rem;letter-spacing:-.02em}
.capas__panel .eyebrow{display:block;margin-bottom:var(--space-2)}
.capas__panel p{color:var(--cromo);font-size:var(--text-sm);line-height:1.65}
.capas__hint{font-size:var(--text-xs);color:var(--plata);margin-top:var(--space-2)}


/* ── Beneficios ── */
.benes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(200,210,218,.12);border:1px solid rgba(200,210,218,.12);border-radius:12px;overflow:hidden}
@media (max-width:860px){.benes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.benes{grid-template-columns:1fr}}
.bene{background:var(--carbon-bm);padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);transition:background .25s}
.bene:hover{background:#1B2230}
.bene__ico{width:40px;height:40px;stroke:var(--cian);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bene__n{font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.14em;color:var(--plata)}
.bene h3{font-size:var(--text-base);font-weight:600;color:var(--blanco);line-height:1.35;letter-spacing:-.01em}
.benes__nota{font-size:var(--text-xs);color:var(--plata);margin-top:var(--space-3);line-height:1.7;max-width:78ch}

/* ── Qué es: definición + mineral ── */
.que-es{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-5);align-items:center}
@media (max-width:900px){.que-es{grid-template-columns:1fr;gap:var(--space-4)}}
.que-es .definicion{max-width:none}
.mineral{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.mineral__aro{position:relative;width:min(300px,100%);aspect-ratio:1}
.mineral__campo{position:absolute;inset:0;width:100%;height:100%}
.mineral__campo .orb{fill:none;stroke:#8FE0FF;stroke-width:1.1;opacity:.5;stroke-dasharray:20 400;stroke-dashoffset:420;animation:orbita 5.2s linear infinite}
@keyframes orbita{to{stroke-dashoffset:0}}
.mineral__img{position:absolute;top:14%;left:14%;width:72%;height:72%;object-fit:cover;border-radius:50%;
  border:1px solid rgba(143,224,255,.3);box-shadow:0 0 42px rgba(77,196,245,.18),inset 0 0 30px rgba(0,0,0,.6);
  background:var(--carbon-bm)}
.mineral figcaption{text-align:center;max-width:34ch}
.mineral figcaption strong{display:block;font-size:var(--text-base);font-weight:700;color:var(--blanco);margin-bottom:.35rem}
.mineral figcaption span{font-size:var(--text-xs);color:var(--plata);line-height:1.65}
@media (prefers-reduced-motion:reduce){.mineral__campo .orb{animation:none;stroke-dasharray:none;opacity:.35}}

/* ── Distribución de elementos: vista superior ──────────────────
   Tres animaciones sincronizadas:
   · onda de encendido, de pies a cabeza, con retardo por altura
   · barrido de luz que recorre el interior del colchón
   · líneas de campo que envuelven cada colchón, con un pulso
     viajando por cada arco
   ─────────────────────────────────────────────────────────────── */
.dist{margin-top:var(--space-4);background:var(--noche);border:1px solid rgba(200,210,218,.12);border-radius:12px;padding:var(--space-3);overflow:hidden}
.dist svg{width:100%;max-width:720px;margin-inline:auto}
.dist-tit{font-family:var(--font-body);font-size:10.5px;font-weight:700;fill:var(--cromo);letter-spacing:.1em}
.dist-num{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--plata)}
.dist-num tspan{font-weight:800;font-size:14px;fill:var(--blanco)}
.dist-eje{font-family:var(--font-body);font-size:8.5px;font-weight:700;fill:var(--plata);letter-spacing:.1em}

/* Líneas de campo */
.campo path{fill:none;stroke-linecap:round}
.campo-base{stroke:rgba(77,196,245,.16);stroke-width:1}
.campo-luz{stroke:#8FE0FF;stroke-width:1.6;stroke-dasharray:26 620;stroke-dashoffset:646;animation:fluir 4.4s linear infinite}
@keyframes fluir{to{stroke-dashoffset:0}}

/* Puntos */
.dist .dot{fill:#fff;opacity:.2;animation:pulso 3.4s ease-in-out infinite}
@keyframes pulso{
  0%,100%{opacity:.2;r:3.4}
  8%{opacity:1;r:4.6}
  26%{opacity:.2;r:3.4}
}
.dist .barrido{animation:barre 3.4s linear infinite}
@keyframes barre{0%{transform:translateY(450px)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .dist .dot{animation:none;opacity:.85}
  .dist .barrido{animation:none;opacity:0}
  .campo-luz{animation:none;stroke-dasharray:none;opacity:.5}
}
.dist figcaption{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid rgba(200,210,218,.12);font-size:var(--text-xs)}
.dist figcaption em{font-style:normal;color:var(--plata)}

/* ── Parrilla de modelos · lenguaje de catálogo, no de e-commerce ── */
.grid-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--space-4) var(--space-3)}
.modelo{display:flex;flex-direction:column}
.modelo__media{display:block;position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--grad-superficie);border:1px solid rgba(200,210,218,.12);transition:border-color .25s,transform .25s}
.modelo__media:hover{border-color:rgba(77,196,245,.5);transform:translateY(-3px)}
.modelo__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:var(--text-xs);color:var(--plata);line-height:1.7;padding:var(--space-2)}
.modelo__rank{position:absolute;top:var(--space-2);right:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;color:var(--cian);letter-spacing:.08em}
.modelo__body{padding-top:var(--space-3)}
.modelo__title{font-size:var(--text-xl);font-weight:700;color:var(--blanco);letter-spacing:-.02em;line-height:1.2;margin-bottom:.3rem}
.modelo__pos{font-size:var(--text-xs);color:var(--cian);margin-bottom:.7rem;line-height:1.5}
.modelo__desc{font-size:var(--text-sm);color:var(--plata);line-height:1.6;margin-bottom:var(--space-2)}
.modelo__specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(200,210,218,.14);border-bottom:1px solid rgba(200,210,218,.14);margin-bottom:var(--space-2)}
.modelo__specs>div{padding:.7rem .2rem}
.modelo__specs>div+div{border-left:1px solid rgba(200,210,218,.14);padding-left:.7rem}
.modelo__specs dt{font-size:.6875rem;color:var(--plata);margin-bottom:.15rem}
.modelo__specs dd{font-size:var(--text-sm);font-weight:700;color:var(--blanco);letter-spacing:-.01em}
.modelo__links{display:flex;flex-direction:column;gap:.45rem}
.modelo__link{font-size:var(--text-sm);font-weight:600;color:var(--cian);border-bottom:1px solid rgba(77,196,245,.35);align-self:flex-start;padding-bottom:1px;transition:color .15s,border-color .15s}
.modelo__link:hover{color:var(--cian-hot);border-color:var(--cian-hot)}
.modelo__link--quiet{color:var(--cromo);border-color:rgba(200,210,218,.25);font-weight:500}
.modelo__link--quiet:hover{color:var(--blanco);border-color:var(--cromo)}
.modelo__note{font-size:.6875rem;color:var(--plata);margin-top:.6rem;line-height:1.5}

/* ── Precio y compra ───────────────────────────────────────────────
   Añadido al abrir la compra en la landing: los siete modelos y los
   complementos muestran monto y botón.
   El monto es un marcador; en producción lo pinta el sync de Shopify
   leyendo [data-price][data-handle]. Por eso el número vive en un
   <span> propio y no mezclado con el texto de MSI: así se puede
   sustituir sin tocar el resto del bloque.
   ────────────────────────────────────────────────────────────────── */
.precio{display:flex;flex-direction:column;gap:.15rem;margin:0 0 var(--space-2)}
.precio__monto{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:var(--blanco);letter-spacing:-.03em;line-height:1}
.precio__msi{font-size:.6875rem;color:var(--verde-msi);font-weight:600}
.precio__antes{font-size:var(--text-sm);color:var(--plata);text-decoration:line-through;margin-left:.4rem;font-weight:500}

/* Botón de compra. Hereda la rampa azul de --grad-cta para que sea
   el mismo lenguaje que el CTA del header y el de las secciones. */
.btn-comprar{display:block;text-align:center;padding:.85rem 1.2rem;border-radius:8px;
  background-image:var(--grad-cta);color:var(--blanco);font-weight:600;font-size:var(--text-sm);
  box-shadow:var(--glow);transition:background-image .2s,transform .15s,box-shadow .2s}
.btn-comprar:hover{background-image:var(--grad-cta-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(43,125,212,.45)}
.btn-comprar:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
.btn-comprar--sm{padding:.7rem 1rem;font-size:.82rem}

/* Alineación de las tarjetas ──────────────────────────────────────
   Con precio y botón, las descripciones de distinto largo dejaban los
   botones a alturas distintas dentro de la misma fila. Estas tres
   reglas empujan el bloque de compra al fondo de cada tarjeta para
   que queden en línea sin importar cuánto texto tenga cada una.
   ────────────────────────────────────────────────────────────────── */
.modelo__body{display:flex;flex-direction:column;flex:1}
.modelo__links{margin-top:auto;gap:.7rem}
.modelo__link{align-self:center}

.acc-card{display:flex;flex-direction:column}
.acc-card__body{display:flex;flex-direction:column;flex:1}
.acc-card .precio{margin-top:var(--space-2);margin-bottom:.7rem}
.acc-card .btn-comprar{margin-top:auto}

/* ── Comparador por gamas ── */
.gamas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}
@media (max-width:860px){.gamas{grid-template-columns:1fr}}
.gama{background:var(--carbon-bm);border:1px solid rgba(200,210,218,.12);border-radius:12px;padding:var(--space-3);transition:border-color .2s,transform .2s}
.gama:hover{border-color:rgba(77,196,245,.45);transform:translateY(-3px)}
.gama__viz{height:104px;display:flex;align-items:flex-end;gap:6px;margin-bottom:var(--space-3);padding-bottom:2px;border-bottom:1px solid rgba(200,210,218,.18)}
.gama__slab{flex:1;border-radius:3px 3px 0 0;background-image:var(--grad-luz);opacity:.85}
.gama__slab--ghost{background:rgba(200,210,218,.1);background-image:none}
.gama__cm{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:var(--blanco);letter-spacing:-.03em;line-height:1}
.gama__cm span{font-size:var(--text-sm);font-weight:600;color:var(--plata);letter-spacing:0}
.gama__tag{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cian);margin-bottom:.5rem}
.gama h3{font-size:var(--text-lg);font-weight:700;color:var(--blanco);margin:.5rem 0 .4rem}
.gama p{font-size:var(--text-sm);color:var(--plata);line-height:1.6;margin-bottom:var(--space-2)}
.gama__modelos{display:flex;flex-wrap:wrap;gap:.4rem}
.gama__chip{font-size:var(--text-xs);color:var(--cromo);background:rgba(200,210,218,.07);border:1px solid rgba(200,210,218,.14);border-radius:999px;padding:.3rem .7rem}
.tabla-full summary{cursor:pointer;list-style:none;font-size:var(--text-sm);font-weight:600;color:var(--cian);padding:.9rem 0;border-top:1px solid rgba(200,210,218,.14);display:flex;align-items:center;gap:.5rem}
.tabla-full summary::-webkit-details-marker{display:none}
.tabla-full summary::before{content:"+";font-size:1.1rem;line-height:1}
.tabla-full[open] summary::before{content:"–"}
.tabla-full[open] summary{margin-bottom:var(--space-2)}

/* ── Sello de exclusividad ── */
.exclusivo{background:linear-gradient(120deg,rgba(42,159,219,.16) 0%,var(--noche) 55%,rgba(20,120,171,.12) 100%);border-block:1px solid rgba(77,196,245,.28);padding:var(--space-6) 0}
.exclusivo__inner{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:center}
@media (max-width:860px){.exclusivo__inner{grid-template-columns:1fr;gap:var(--space-3)}}
.sello{width:172px;height:172px;border-radius:50%;display:grid;place-content:center;text-align:center;gap:.2rem;border:1px solid rgba(155,230,255,.45);background:radial-gradient(circle at 50% 35%,rgba(77,196,245,.22),rgba(10,14,20,.9) 70%);box-shadow:0 0 40px rgba(77,196,245,.18) inset,0 0 24px rgba(77,196,245,.12)}
.sello small{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.22em;color:var(--cian)}
.sello strong{font-family:var(--font-display);font-size:1.18rem;font-weight:700;color:var(--blanco);line-height:1.15;letter-spacing:-.01em}
.sello em{font-style:normal;font-size:.625rem;color:var(--plata);letter-spacing:.06em}
@media (max-width:860px){.sello{width:132px;height:132px}}

.grid-tamanos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media (min-width:760px){.grid-tamanos{grid-template-columns:repeat(4,1fr)}}
.tamano-card{background:var(--carbon-bm);border:2px solid rgba(200,210,218,.12);border-radius:12px;padding:var(--space-4) var(--space-3);text-align:center;transition:transform .2s,border-color .2s;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.tamano-card:hover{transform:translateY(-4px);border-color:var(--cian)}
.tamano-card__visual{background:var(--noche);border-radius:8px;border:1px solid rgba(200,210,218,.15);display:flex;align-items:center;justify-content:center;padding:8px;margin-bottom:var(--space-2)}
.tamano-card__bed{background-image:var(--grad-luz);border-radius:3px;width:100%;height:100%;opacity:.7}
.tamano-card--ind .tamano-card__visual{width:60px;height:80px}
.tamano-card--mat .tamano-card__visual{width:80px;height:80px}
.tamano-card--qs .tamano-card__visual{width:92px;height:80px}
.tamano-card--ks .tamano-card__visual{width:112px;height:80px}
.tamano-card__name{font-size:var(--text-xl);font-weight:700;color:var(--blanco);line-height:1;letter-spacing:-.02em}
.tamano-card__medidas{font-family:var(--font-mono);font-size:.6875rem;color:var(--plata);font-weight:500;letter-spacing:.02em}

.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(200,210,218,.12);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:var(--text-sm)}
th,td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid rgba(200,210,218,.1)}
thead th{font-size:var(--text-xs);font-weight:700;color:var(--cian);text-transform:uppercase;letter-spacing:.08em;background:var(--noche);white-space:nowrap}
tbody th{font-weight:700;color:var(--blanco);white-space:nowrap}
tbody td{color:var(--cromo)}
tbody tr:hover{background:rgba(77,196,245,.06)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.dato{color:var(--blanco);font-weight:600}
.dato--alto{color:var(--cian)}

.mfg{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:center}
@media (max-width:900px){.mfg{grid-template-columns:1fr}}
.mfg__media{aspect-ratio:4/3;background:var(--grad-superficie);border:1px solid rgba(200,210,218,.12);border-radius:12px;display:grid;place-items:center;text-align:center;}
.mfg__media span{font-size:var(--text-xs);color:var(--plata);max-width:34ch;line-height:1.7}

.grid-acc{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,300px));
  gap:var(--space-3);
  justify-content:center;
}
@media (max-width:560px){
  .grid-acc{grid-template-columns:minmax(0,300px)}
}
.acc-card{background:var(--carbon-bm);border:1px solid rgba(200,210,218,.12);border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s}
.acc-card:hover{transform:translateY(-3px);border-color:rgba(77,196,245,.4)}
.acc-card__media{aspect-ratio:1/1;background:var(--grad-superficie);display:grid;place-items:center;font-size:var(--text-xs);color:var(--plata);text-align:center;padding:var(--space-2);line-height:1.6}
.acc-card__body{padding:var(--space-3)}
.acc-card h3{font-size:var(--text-base);font-weight:700;color:var(--blanco);margin-bottom:.4rem}
.acc-card p{font-size:var(--text-sm);color:var(--plata);line-height:1.55}

.tienda{background:linear-gradient(135deg,rgba(42,159,219,.18) 0%,var(--noche) 65%);border:1px solid rgba(77,196,245,.25);border-radius:12px;padding:var(--space-5)}

.grid-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3)}
.rev-card{background:var(--carbon-bm);border:1px solid rgba(200,210,218,.12);border-left:3px solid transparent;border-image:var(--grad-borde) 1;border-radius:0 12px 12px 0;padding:var(--space-3)}
.rev-card blockquote{font-size:var(--text-sm);color:var(--hueso);line-height:1.65;margin-bottom:var(--space-2)}
.rev-card cite{font-style:normal;font-size:var(--text-xs);color:var(--plata)}
.rev-card cite b{display:block;color:var(--blanco);font-weight:600;font-size:var(--text-sm)}

.faq{border-top:1px solid rgba(200,210,218,.12)}
.faq details{border-bottom:1px solid rgba(200,210,218,.12)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;font-size:var(--text-lg);font-weight:600;color:var(--blanco);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.7rem;top:50%;width:10px;height:10px;border-right:2px solid var(--cian);border-bottom:2px solid var(--cian);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__body{padding:0 var(--space-4) var(--space-3) 0}
.faq__body p{font-size:var(--text-sm);color:var(--cromo);line-height:1.7}

.footer{background:var(--grafito);border-top:1px solid rgba(200,210,218,.12);padding:var(--space-5) 0 var(--space-4)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-size:var(--text-xs);font-weight:700;color:var(--blanco);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-2)}
.footer__link{display:block;font-size:var(--text-sm);color:var(--plata);margin-bottom:.5rem}
.footer__link:hover{color:var(--cian)}
.footer__legal{border-top:1px solid rgba(200,210,218,.1);padding-top:var(--space-3);font-size:var(--text-xs);color:var(--plata);line-height:1.7}
.footer__legal p{max-width:none}
.sticky-bar{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:99;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  padding:.7rem .7rem calc(2.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(10,14,20,.97);
  border-top:1px solid rgba(200,210,218,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* El translateZ arregla el repintado tardío del scroll inercial en
   Safari, pero en Chrome rompe el position:fixed. Se aísla con una
   consulta que solo Safari cumple. */
@supports (-webkit-touch-callout:none){
  .sticky-bar{transform:translateZ(0);will-change:transform}
}
.sticky-bar .btn{padding:.85rem .5rem;font-size:var(--text-sm)}
@media (min-width:900px){.sticky-bar{display:none}}

/* ── Panel de compra ───────────────────────────────────────────────
   Cajón lateral que abre desde cualquier .btn-comprar.
   35% del ancho en escritorio, pantalla completa en móvil.
   Un botón por medida, cada uno con su propio precio: así el cliente
   compara sin cambiar de pantalla.
   ────────────────────────────────────────────────────────────────── */
.dw{position:fixed;inset:0;z-index:200}
.dw[hidden]{display:none}
.dw__velo{position:absolute;inset:0;background:rgba(5,8,12,.72);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease}
.dw.is-abierto .dw__velo{opacity:1}

.dw__panel{position:absolute;top:0;right:0;height:100%;width:35%;min-width:420px;max-width:520px;
  display:flex;flex-direction:column;background:var(--grafito);
  border-left:1px solid rgba(77,196,245,.22);box-shadow:-24px 0 60px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,.3,1)}
.dw.is-abierto .dw__panel{transform:translateX(0)}
@media (max-width:760px){.dw__panel{width:100%;min-width:0;max-width:none;border-left:0}}

.dw__head{position:relative;padding:var(--space-4) var(--space-4) var(--space-3);
  border-bottom:1px solid rgba(200,210,218,.12)}
.dw__marca{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;color:var(--cian);margin-bottom:.4rem}
.dw__tit{font-size:var(--text-xl);font-weight:700;color:var(--blanco);letter-spacing:-.02em}
.dw__x{position:absolute;top:var(--space-3);right:var(--space-3);width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;background:rgba(200,210,218,.06);
  border:1px solid rgba(200,210,218,.14);cursor:pointer;transition:background .18s,border-color .18s}
.dw__x:hover{background:rgba(77,196,245,.14);border-color:var(--cian)}
.dw__x svg{width:16px;height:16px;stroke:var(--cromo);stroke-width:2;fill:none;stroke-linecap:round}
.dw__x:hover svg{stroke:var(--blanco)}

.dw__body{flex:1;overflow-y:auto;padding:var(--space-4)}
.dw__prod{display:grid;grid-template-columns:110px 1fr;gap:var(--space-3);
  padding-bottom:var(--space-3);margin-bottom:var(--space-3);
  border-bottom:1px solid rgba(200,210,218,.12)}
.dw__img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  background:var(--grad-superficie);border:1px solid rgba(200,210,218,.12)}
.dw__nombre{font-size:var(--text-lg);font-weight:700;color:var(--blanco);
  letter-spacing:-.02em;line-height:1.2;margin-bottom:.6rem}
.dw__ficha{display:inline-block;font-size:var(--text-xs);color:var(--cian);
  border-bottom:1px solid rgba(77,196,245,.4)}
.dw__ficha:hover{color:var(--cian-hot);border-color:var(--cian-hot)}

.dw__info{min-width:0}
.dw__medidas[hidden]{display:none}
.dw__label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--plata);margin-bottom:var(--space-2)}

/* Un botón por medida. Columna única para que quepa el precio
   sin apretar el nombre; en pantallas anchas pasa a dos. */
.dw__opts{display:grid;gap:.6rem}
@media (min-width:1500px){.dw__opts{grid-template-columns:1fr 1fr}}
.dw__opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem var(--space-2);
  padding:.85rem 1rem;text-align:left;border-radius:10px;cursor:pointer;
  background:rgba(200,210,218,.04);border:1.5px solid rgba(200,210,218,.16);
  transition:border-color .18s,background .18s,transform .15s}
.dw__opt:hover{border-color:rgba(77,196,245,.5);background:rgba(77,196,245,.07)}
.dw__opt.is-sel{border-color:var(--cian);background:rgba(77,196,245,.12);
  box-shadow:0 0 0 1px rgba(77,196,245,.35)}
.dw__opt-t{font-size:var(--text-sm);font-weight:700;color:var(--blanco)}
.dw__opt-m{grid-column:1;font-size:.6875rem;color:var(--plata);font-family:var(--font-mono)}
.dw__opt-p{grid-column:2;grid-row:1/3;font-family:var(--font-display);font-size:var(--text-base);
  font-weight:800;color:var(--cromo);letter-spacing:-.02em}
.dw__opt.is-sel .dw__opt-p{color:var(--blanco)}

.dw__nota{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--plata);line-height:1.7}
.dw__nota a{color:var(--cian);border-bottom:1px solid rgba(77,196,245,.4)}

/* Pie fijo: la compra siempre visible aunque el cuerpo haga scroll */
.dw__pie{padding:var(--space-3) var(--space-4) var(--space-4);
  border-top:1px solid rgba(200,210,218,.12);background:var(--carbon-bm);
  display:grid;grid-template-columns:auto 1fr;gap:.7rem}
.dw__cant{display:flex;align-items:center;border-radius:8px;
  background:rgba(200,210,218,.05);border:1px solid rgba(200,210,218,.16)}
.dw__cant button{width:38px;height:100%;min-height:44px;font-size:1.1rem;color:var(--cromo);cursor:pointer;
  transition:color .15s}
.dw__cant button:hover{color:var(--cian)}
.dw__cant span{min-width:28px;text-align:center;font-weight:700;color:var(--blanco);font-size:var(--text-sm)}
.dw__pie .btn-comprar{align-self:stretch;display:grid;place-items:center}
.dw__ahora{grid-column:1/-1;text-align:center;padding:.8rem;border-radius:8px;
  font-size:var(--text-sm);font-weight:600;color:var(--hueso);
  border:1px solid rgba(200,210,218,.22);transition:border-color .18s,color .18s}
.dw__ahora:hover{border-color:var(--cian);color:var(--cian)}

@media (prefers-reduced-motion:reduce){
  .dw__velo,.dw__panel{transition:none}
  .dw__panel{transform:none}
}

/* Spotlight: precio y botón a mayor escala, y la foto ocupando
   el contenedor que antes mostraba el marcador de posición. */
.precio--lg{margin-bottom:var(--space-3)}
.precio--lg .precio__monto{font-size:clamp(2rem,3.4vw,2.75rem)}
.precio--lg .precio__msi{font-size:var(--text-xs)}
.btn-comprar--lg{display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 2rem;font-size:var(--text-lg)}
.spotlight__media{padding:0;overflow:hidden}
.spotlight__media picture{display:block;width:100%;height:100%}
.spotlight__img{width:100%;height:100%;object-fit:cover}
@media (max-width:420px){#completa .spotlight__img{aspect-ratio:1/1;}}
@media (min-width:1500px){#como-funciona p {width: 80vw;}}