/* ============================================================
   colchones-tienda-moderno.css — para colchon-premium-moderno.html y
   colchon-esencial-moderno.html (una página por modelo desde el 10-oct-2026).
   Lo compartido (tokens, header, botones, fondo de espuma,
   títulos, CTA final, footer, reveal) vive en css/moderno.css.
   ============================================================ */

:root{--ease-out:cubic-bezier(.23,1,.32,1);}

/* ---------- Hero: saltos a cada modelo ---------- */
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.jump-link{
  display:inline-flex;align-items:center;height:2.6rem;padding:0 1.1rem;border-radius:var(--r-pill,99px);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  font-size:14px;font-weight:700;color:#fff;
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.jump-link:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
@media (prefers-reduced-motion:no-preference){
  .jump{opacity:0;animation:pgFade .8s var(--ease) .52s forwards;}
}

/* ============================================================
   PRODUCTOS
   ============================================================ */
.prods{display:flex;flex-direction:column;gap:5rem;}
@media (min-width:1024px){.prods{gap:7rem;}}
.prod{scroll-margin-top:120px;display:grid;grid-template-columns:1fr;gap:2.25rem;}
@media (min-width:1024px){
  .prod{grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start;}
  .prod-rev{grid-template-columns:.9fr 1.1fr;}
  .prod-rev .gallery{order:2;}
}

/* Galería */
.gallery{min-width:0;}
@media (min-width:1024px){.gallery{position:sticky;top:6rem;}}
.g-main{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-card,28px);overflow:hidden;background:var(--paper);
  box-shadow:0 30px 60px -44px rgba(7,28,52,.55);
}
.g-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:no-preference){
  .g-img.is-swap{animation:gSwap .45s var(--ease-out);}
  @keyframes gSwap{from{opacity:.35;filter:blur(4px);transform:scale(1.015);}to{opacity:1;filter:none;transform:none;}}
}
.ref-tag{
  position:absolute;left:1rem;bottom:1rem;
  padding:.35rem .7rem;border-radius:var(--r-pill,99px);
  background:rgba(7,28,52,.78);color:#fff;
  font-size:11.5px;font-weight:700;
}

/* ---------- Imagen del modelo: cambia con la medida ----------
   Colchón dibujado en CSS 3D (mismo dibujo que el hero de Colchones).
   --mw, --md y --mh (ancho, largo y alto) los pone el JS según la medida. */
:root{
  --mat-top:#F2F5FA;
  --mat-quilt:rgba(7,28,52,.09);
  --mat-band:#0A4A8A;
  --mat-band-dark:#06305C;
}
.g-stage{
  container-type:inline-size;
  display:flex;align-items:center;justify-content:center;
  perspective:1600px;
}
.g-img[hidden]{display:none;}
/* Cotas tenues sobre la foto: línea junto al borde del colchón y la medida al lado. */
.g-eco{position:absolute;inset:0;z-index:1;pointer-events:none;}
.g-eco svg{position:absolute;inset:0;width:100%;height:100%;}
.g-eco path{fill:none;stroke:rgba(7,28,52,.24);stroke-width:1;vector-effect:non-scaling-stroke;}
.g-eco span{
  position:absolute;white-space:nowrap;transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:rgba(7,28,52,.4);
}
.g-eco[hidden]{display:none;}
.mat-wrap{position:relative;transform-style:preserve-3d;--u:.27cqw;}
.mattress{
  --W:calc(var(--mw) * var(--u));
  --D:calc(var(--md) * var(--u));
  --H:calc(var(--mh) * var(--u));
  position:relative;width:var(--W);height:var(--H);
  transform-style:preserve-3d;
  transform:rotateX(-30deg) rotateY(-38deg);
}
.mface{position:absolute;left:0;top:0;overflow:hidden;}
.mface-top{
  width:var(--W);height:var(--D);top:calc((var(--H) - var(--D)) / 2);
  border-radius:calc(9 * var(--u));
  background-color:var(--mat-top);
  background-image:
    radial-gradient(circle,rgba(7,28,52,.2) 0 1.4px,transparent 2.2px),
    repeating-linear-gradient(45deg,var(--mat-quilt) 0 1px,transparent 1px calc(19 * var(--u))),
    repeating-linear-gradient(-45deg,var(--mat-quilt) 0 1px,transparent 1px calc(19 * var(--u)));
  background-size:calc(26.87 * var(--u)) calc(26.87 * var(--u)),auto,auto;
  background-position:calc(13.4 * var(--u)) calc(13.4 * var(--u)),0 0,0 0;
  box-shadow:inset 0 0 0 calc(3 * var(--u)) var(--mat-top),inset 0 0 0 calc(3.6 * var(--u)) rgba(7,28,52,.16);
  transform:rotateX(90deg) translateZ(calc(var(--H) / 2));
}
.mface-front,.mface-side{
  height:var(--H);
  background-color:var(--mat-band);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 5px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(255,255,255,.55);
}
.mface-front{
  width:var(--W);transform:translateZ(calc(var(--D) / 2));
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:0 calc(8 * var(--u));
}
.mface-side{
  width:var(--D);left:calc((var(--W) - var(--D)) / 2);
  background-color:var(--mat-band-dark);
  transform:rotateY(90deg) translateZ(calc(var(--W) / 2));
}
.mat-dim{
  font-size:clamp(9px,calc(7.5 * var(--u)),12.5px);font-weight:700;color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mat-label{
  padding:.12rem .4rem;border-radius:2px;background:var(--yellow);
  font-size:clamp(7.5px,calc(6 * var(--u)),9.5px);font-weight:700;letter-spacing:.06em;color:var(--ink);
}
.mat-shadow{
  position:absolute;left:50%;top:50%;
  width:calc(var(--mw) * var(--u) * 1.3);height:calc(var(--md) * var(--u) * 1.3);
  margin-left:calc(var(--mw) * var(--u) * -.65);margin-top:calc(var(--md) * var(--u) * -.65);
  background:radial-gradient(closest-side,rgba(7,28,52,.3),transparent);
  filter:blur(12px);
  transform:rotateX(-30deg) rotateY(-38deg) translateY(calc(var(--mh) * var(--u) / 2 + 2px)) rotateX(90deg);
  pointer-events:none;
}
/* Al cambiar de medida el colchón se asienta, como la espuma. Solo transform:
   la opacidad aplanaría el 3D durante la animación. */
@media (prefers-reduced-motion:no-preference){
  .mat-wrap.is-swap .mattress{animation:matSwap .3s var(--ease-out);}
  @keyframes matSwap{
    from{transform:translateY(-12px) rotateX(-30deg) rotateY(-38deg) scale3d(1,.9,1);}
    to{transform:rotateX(-30deg) rotateY(-38deg);}
  }
}
.g-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;margin-top:.9rem;}
.g-cap strong{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.g-cap span{font-size:13.5px;color:var(--ink-soft,rgba(7,28,52,.6));}

/* Nota: más firme o más suave = colchón modular */
.firm-note{
  display:flex;align-items:flex-start;gap:.75rem;width:100%;
  margin-top:1.5rem;padding:1rem 1.15rem;border-radius:var(--r-card,22px);
  background:var(--yellow-tint,#FFF6D6);border:1px solid rgba(255,199,44,.55);
  font-size:14.5px;line-height:1.55;color:var(--ink);
}
.firm-note .material-symbols-outlined{font-size:22px;flex:none;}
.firm-note a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}

/* Compra */
.buy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.buy-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1.5rem;width:100%;}
.buy-name{font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:var(--fw-x,800);letter-spacing:-.04em;line-height:1.04;color:var(--ink);}
.buy-warranty{display:flex;align-items:baseline;gap:.45rem;}
.buy-warranty strong{font-size:19px;font-weight:var(--fw-x,800);letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap;}
.buy-warranty span{font-size:12.5px;font-weight:600;color:rgba(7,28,52,.6);}
.buy-text{margin-top:1rem;max-width:52ch;font-size:15.5px;line-height:1.65;color:rgba(7,28,52,.68);}
.buy-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.buy-chips li{
  padding:.45rem .9rem;border-radius:var(--r-pill,99px);background:var(--white);border:1px solid var(--line-soft);
  font-size:13px;font-weight:700;color:var(--ink);
}

.buy-opts{display:flex;flex-direction:column;gap:1.4rem;width:100%;margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--line);}
.opt-group{border:0;margin:0;padding:0;min-width:0;}
.opt-label{display:block;margin-bottom:.6rem;font-size:13px;font-weight:700;color:var(--ink);}
.opt-rail{display:flex;flex-wrap:wrap;gap:.45rem;}
.opt-sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:640px){.opt-sizes{display:flex;}}
.o-pill{
  display:inline-flex;align-items:center;justify-content:center;height:2.9rem;padding:0 1.1rem;border-radius:var(--r-pill,99px);
  background:var(--white);border:1px solid var(--line);
  font-size:14px;font-weight:700;color:rgba(7,28,52,.78);white-space:nowrap;
  transition:background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out),transform .14s var(--ease-out);
}
.o-num{font-variant-numeric:tabular-nums;}
@media (hover:hover) and (pointer:fine){.o-pill:not(.is-on):hover{border-color:rgba(7,28,52,.35);color:var(--ink);}}
.o-pill:active{transform:scale(.97);}
.o-pill.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}

/* Precio */
.price{
  width:100%;margin-top:1.5rem;padding:1.5rem 1.6rem;border-radius:var(--r-card,22px);background:var(--ink);color:#fff;
}
.price-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.62);}
.price-num{
  margin-top:.35rem;font-size:clamp(2.2rem,4vw,3rem);font-weight:var(--fw-x,800);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);font-variant-numeric:tabular-nums;
}
.price-num.is-empty{font-size:20px;letter-spacing:-.02em;line-height:1.3;color:#fff;}
.price-spec{margin-top:.55rem;font-size:14px;font-weight:700;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:no-preference){
  .price-num.is-new{animation:pIn .4s var(--ease-out);}
  @keyframes pIn{from{opacity:.3;transform:translateY(5px);}to{opacity:1;transform:none;}}
}

.buy-actions{display:flex;flex-wrap:wrap;gap:.75rem;width:100%;margin-top:1rem;}
.buy-actions > *{flex:1 1 14rem;}

.buy-facts{display:grid;grid-template-columns:1fr;gap:1rem;width:100%;margin-top:1.75rem;}
@media (min-width:640px){.buy-facts{grid-template-columns:1fr 1fr;}}
.buy-facts dt{font-size:12.5px;font-weight:600;color:rgba(7,28,52,.6);}
.buy-facts dd{margin:.25rem 0 0;font-size:15px;font-weight:var(--fw-x,800);letter-spacing:-.015em;color:var(--ink);}
.buy-actions .is-soon{pointer-events:none;}