/* ============================================================
   productos-moderno.css — SOLO para productos-moderno.html.
   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);
  /* Tonos de material para la ilustración del hero (no son acentos) */
  --foam-top:#FFDF7E;
  --foam-side:#E3A70E;
  --mat-top:#F2F5FA;
  --mat-quilt:rgba(7,28,52,.09);
  --mat-band:#0A4A8A;
  --mat-band-dark:#06305C;
}

/* ---------- Etiqueta de foto provisional ---------- */
.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;white-space:nowrap;
}

/* ============================================================
   HERO
   ============================================================ */
.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),transform .16s var(--ease-out);
}
.jump-link:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
.jump-link:active{transform:scale(.97);}

/* ---------- Pila de las tres familias en 3D ----------
   Cada capa es un prisma (frente, lado y tapa). Unidades en --u. */
.stack-stage{
  position:relative;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:340px;perspective:1700px;
}
@media (min-width:1024px){.stack-stage{min-height:480px;}}

.stack-tilt{
  position:relative;transform-style:preserve-3d;
  --u:1px;
  --W:calc(220 * var(--u));
  --D:calc(180 * var(--u));
  margin:calc(70 * var(--u)) 0 calc(96 * var(--u));
}
@media (min-width:640px){.stack-tilt{--u:1.2px;}}
@media (min-width:1280px){.stack-tilt{--u:1.4px;}}

.stack{
  position:relative;width:var(--W);height:calc(162 * var(--u));
  transform-style:preserve-3d;
  transform:rotateX(-24deg) rotateY(-38deg);
}
.slab{
  position:absolute;left:0;top:var(--y);width:var(--W);height:var(--T);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-out);
}
.slab-colchon{--T:calc(34 * var(--u));--y:0px;}
.slab-esponja{--T:calc(46 * var(--u));--y:calc(60 * var(--u));}
.slab-aglutinado{--T:calc(30 * var(--u));--y:calc(132 * var(--u));}

.sf{position:absolute;left:0;top:0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(7,28,52,.14);}
.sf-front{
  width:var(--W);height:var(--T);transform:translateZ(calc(var(--D) / 2));
  display:flex;align-items:center;padding-left:calc(12 * var(--u));
}
.sf-side{
  width:var(--D);height:var(--T);left:calc((var(--W) - var(--D)) / 2);
  transform:rotateY(90deg) translateZ(calc(var(--W) / 2));
}
.sf-top{
  width:var(--W);height:var(--D);top:calc((var(--T) - var(--D)) / 2);
  transform:rotateX(90deg) translateZ(calc(var(--T) / 2));
}
.sf-label{
  font-size:12.5px;font-weight:var(--fw-x,800);letter-spacing:-.005em;white-space:nowrap;
  color:rgba(7,28,52,.82);
}

/* Colchón: tapa acolchada, banda azul */
.slab-colchon .sf-top{
  background-color:var(--mat-top);
  background-image:
    repeating-linear-gradient(45deg,var(--mat-quilt) 0 1px,transparent 1px calc(17 * var(--u))),
    repeating-linear-gradient(-45deg,var(--mat-quilt) 0 1px,transparent 1px calc(17 * var(--u)));
}
.slab-colchon .sf-front{background-color:var(--mat-band);}
.slab-colchon .sf-side{background-color:var(--mat-band-dark);}
.slab-colchon .sf-label{color:#fff;}

/* Esponja: amarilla con poro */
.slab-esponja .sf-front,
.slab-esponja .sf-side,
.slab-esponja .sf-top{
  background-image:radial-gradient(circle,rgba(7,28,52,.2) 0 1.6px,transparent 2.2px);
  background-size:10px 10px;
}
.slab-esponja .sf-front{background-color:var(--yellow);}
.slab-esponja .sf-side{background-color:var(--foam-side);}
.slab-esponja .sf-top{background-color:var(--foam-top);}

/* Aglutinado: trozos de espuma prensados */
.slab-aglutinado .sf{
  background-image:
    radial-gradient(ellipse 6px 4px at 18% 32%,#F2C230 70%,transparent 74%),
    radial-gradient(ellipse 4px 7px at 72% 18%,#2F6FC4 70%,transparent 74%),
    radial-gradient(ellipse 8px 5px at 44% 76%,#D9452F 70%,transparent 74%),
    radial-gradient(ellipse 7px 4px at 12% 84%,#F4F5F7 70%,transparent 74%),
    radial-gradient(ellipse 4px 6px at 58% 48%,#7A4CA8 70%,transparent 74%),
    radial-gradient(ellipse 9px 6px at 32% 12%,#8C96A6 70%,transparent 74%),
    radial-gradient(ellipse 5px 4px at 92% 38%,#EE8A2B 70%,transparent 74%);
  background-size:31px 27px,45px 37px,37px 41px,25px 29px,41px 45px,57px 51px,37px 25px;
}
.slab-aglutinado .sf-front{background-color:#A7AEBB;}
.slab-aglutinado .sf-side{background-color:#8B93A2;}
.slab-aglutinado .sf-top{background-color:#BCC2CC;}
.slab-aglutinado .sf-label{
  padding:.15rem .5rem;border-radius:var(--r-pill,99px);background:rgba(255,255,255,.82);
}

/* Capa al frente cuando se señala su familia */
.stack[data-focus="colchon"] .slab-colchon,
.stack[data-focus="esponja"] .slab-esponja,
.stack[data-focus="aglutinado"] .slab-aglutinado{
  transform:translateZ(calc(30 * var(--u)));
}

.stack-shadow{
  position:absolute;left:50%;top:50%;
  width:calc(var(--W) * 1.3);height:calc(var(--D) * 1.3);
  margin-left:calc(var(--W) * -.65);margin-top:calc(var(--D) * -.65);
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);
  filter:blur(14px);
  transform:rotateX(-24deg) rotateY(-38deg) translateY(calc(83 * var(--u))) rotateX(90deg);
  pointer-events:none;
}

.stack-caption{
  display:inline-flex;align-items:center;gap:.5rem;max-width:100%;
  padding:.5rem .95rem;border-radius:var(--r-pill,99px);
  background:rgba(7,28,52,.55);border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.stack-caption .material-symbols-outlined{color:var(--yellow);}

@media (prefers-reduced-motion:no-preference){
  .jump{opacity:0;animation:pgFade .8s var(--ease) .52s forwards;}
  .stack-stage{opacity:0;animation:pgFade .8s var(--ease) .2s forwards;}
  /* La pila se arma de abajo hacia arriba al cargar */
  .slab{animation:slabIn 1s var(--ease) backwards;}
  .slab-aglutinado{animation-delay:.35s;}
  .slab-esponja{animation-delay:.5s;}
  .slab-colchon{animation-delay:.65s;}
  @keyframes slabIn{from{transform:translateY(calc(-70 * var(--u)));}}
}

/* ============================================================
   LÍNEA INDUSTRIAL (mosaico de tres piezas)
   ============================================================ */
.ind{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;}
@media (min-width:1024px){
  .ind{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    grid-template-areas:"main formats" "main aglu";
  }
  .ind-main{grid-area:main;}
  .ind-formats{grid-area:formats;}
  .ind-aglu{grid-area:aglu;}
}

.ind-main,.ind-formats,.ind-aglu{
  scroll-margin-top:96px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-card,28px);overflow:hidden;
}
.ind-main{
  display:flex;flex-direction:column;
  box-shadow:0 30px 60px -44px rgba(7,28,52,.55);
}
.ind-photo{position:relative;aspect-ratio:16/10;background:var(--paper);overflow:hidden;}
@media (min-width:1024px){.ind-photo{aspect-ratio:auto;flex:1 1 auto;min-height:300px;}}
.ind-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ind-body{padding:2rem;}
@media (min-width:768px){.ind-body{padding:2.25rem 2.5rem 2.5rem;}}
.ind-title{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:var(--fw-x,800);line-height:1.1;letter-spacing:-.035em;color:var(--ink);}
.ind-text{margin-top:.75rem;max-width:44ch;font-size:15px;line-height:1.65;color:rgba(7,28,52,.64);}
.ind-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.ind-chips li{
  padding:.42rem .85rem;border-radius:var(--r-pill,99px);background:var(--paper);border:1px solid var(--line-soft);
  font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}
.ind-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.75rem;}

/* Formatos */
.ind-formats{padding:1.75rem 1.25rem 1rem;}
@media (min-width:768px){.ind-formats{padding:2rem 1.75rem 1.25rem;}}
.ind-sub{padding:0 .75rem;font-size:18px;font-weight:var(--fw-x,800);line-height:1.25;letter-spacing:-.025em;color:var(--ink);}
.fmts{list-style:none;margin:.9rem 0 0;padding:0;}
.fmts li + li{border-top:1px solid var(--line-soft);}
.fmt{
  display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:.9rem;
  padding:.8rem .75rem;border-radius:var(--r-inner,16px);
  transition:background-color .2s var(--ease-out);
}
.fmt:hover{background:var(--paper);}
.fmt-ic{
  width:44px;height:44px;border-radius:var(--r-pill,99px);display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line-soft);color:var(--blue);font-size:21px;
}
.fmt-copy{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.fmt-copy strong{font-size:15px;font-weight:var(--fw-x,800);letter-spacing:-.015em;color:var(--ink);}
.fmt-copy small{font-size:13px;line-height:1.45;color:rgba(7,28,52,.6);font-variant-numeric:tabular-nums;}
.fmt-go{font-size:19px;color:rgba(7,28,52,.35);transition:color .2s var(--ease-out),transform .2s var(--ease-out);}
.fmt:hover .fmt-go{color:var(--ink);transform:translateX(3px);}
.fmt:focus-visible{outline-offset:-2px;border-radius:var(--r-inner,16px);}

/* Aglutinado */
.ind-aglu{display:grid;grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.ind-aglu{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}}
.aglu-photo{position:relative;aspect-ratio:16/10;background:var(--paper);overflow:hidden;}
@media (min-width:640px){.aglu-photo{aspect-ratio:auto;min-height:240px;}}
.aglu-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.aglu-body{padding:1.75rem 2rem 2rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}

/* ============================================================
   DENSIDADES (banda tinta)
   ============================================================ */
.dens-band{background:var(--ink);color:#fff;}
.dens-head{display:flex;flex-direction:column;gap:1.75rem;}
@media (min-width:1024px){.dens-head{flex-direction:row;align-items:flex-end;justify-content:space-between;}}

.stock-toggle{
  display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;flex:none;
  height:2.9rem;padding:0 1.15rem 0 .55rem;border-radius:var(--r-pill,99px);
  background:rgba(255,255,255,.06);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),transform .16s var(--ease-out);
}
@media (min-width:1024px){.stock-toggle{align-self:auto;}}
.stock-toggle:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);}
.stock-toggle:active{transform:scale(.97);}
.stock-switch{
  position:relative;width:38px;height:22px;border-radius:var(--r-pill,99px);flex:none;
  background:rgba(255,255,255,.18);
  transition:background-color .25s var(--ease-out);
}
.stock-switch::after{
  content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:var(--r-pill,99px);background:#fff;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.5);
  transition:transform .25s var(--ease-out);
}
.stock-toggle[aria-pressed="true"]{border-color:rgba(255,199,44,.55);}
.stock-toggle[aria-pressed="true"] .stock-switch{background:var(--yellow);}
.stock-toggle[aria-pressed="true"] .stock-switch::after{transform:translateX(16px);background:var(--ink);}

/* Rejilla: lista en móvil y tableta, columnas desde 1024 px */
.dens-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;}
.dt-family{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.5rem;border-radius:var(--r-card,24px);
  background:rgba(255,199,44,.07);border:1px solid rgba(255,199,44,.26);
}
.dt{
  display:grid;grid-template-columns:6.2rem minmax(0,1fr) auto;align-items:center;column-gap:1rem;row-gap:.35rem;
  padding:1rem 1.15rem;border-radius:var(--r-card,20px);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  color:#fff;
  transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),transform .35s var(--ease-out),opacity .3s var(--ease-out);
}
.dt-family .dt{border-radius:var(--r-inner,16px);}
.dt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,199,44,.55);}
.dt-num{
  grid-row:1 / span 2;
  display:flex;align-items:baseline;gap:.3rem;
  font-size:2.4rem;font-weight:var(--fw-x,800);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.dt-num small{font-size:11.5px;font-weight:700;letter-spacing:0;color:rgba(255,255,255,.55);}
.dt-name{font-size:15px;font-weight:var(--fw-x,800);letter-spacing:-.015em;}
.dt-facts{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;margin:0;grid-column:2;}
.dt-facts div{display:flex;gap:.4rem;align-items:baseline;}
.dt-facts dt{font-size:12px;font-weight:600;color:rgba(255,255,255,.55);}
.dt-facts dd{margin:0;font-size:13.5px;font-weight:700;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;}
.dt-go{
  grid-column:3;grid-row:1 / span 2;
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:13px;font-weight:var(--fw-x,800);color:var(--yellow);
}
.dt-go .material-symbols-outlined{font-size:17px;transition:transform .2s var(--ease-out);}
.dt:hover .dt-go .material-symbols-outlined{transform:translateX(3px);}
@media (max-width:479px){
  .dt{grid-template-columns:5rem minmax(0,1fr);}
  .dt-go{display:none;}
}

@media (min-width:1024px){
  .dens-grid{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,3.3fr) minmax(0,1fr);gap:.75rem;align-items:stretch;}
  .dt-family{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dt{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    padding:1.35rem 1.2rem 1.2rem;min-height:15.5rem;
  }
  .dt:hover{transform:translateY(-4px);}
  .dt-num{font-size:clamp(2.6rem,3.6vw,3.4rem);flex-direction:column;gap:.35rem;}
  .dt-name{margin-top:1rem;font-size:14.5px;}
  .dt-facts{flex-direction:column;gap:.55rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.14);width:100%;}
  .dt-facts div{flex-direction:column;gap:.1rem;}
  .dt-go{margin-top:auto;padding-top:1.1rem;}
}

/* Filtro: las que se fabrican bajo pedido se atenúan */
.dens-grid.is-filtered .dt[data-stock="pedido"]{opacity:.3;}
.dens-grid.is-filtered .dt[data-stock="pedido"]:hover{opacity:.6;}

.dens-note{margin-top:1.5rem;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}

/* ============================================================
   LÍNEA DESCANSO (filas de comparación)
   ============================================================ */
.beds{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-card,28px);
  padding:.5rem 1.25rem;
  box-shadow:0 30px 60px -48px rgba(7,28,52,.5);
}
@media (min-width:768px){.beds{padding:.75rem 2rem;}}
.bed{
  scroll-margin-top:96px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;
  padding:1.5rem 0;
}
.bed + .bed{border-top:1px solid var(--line);}
@media (min-width:640px){
  .bed{grid-template-columns:11rem minmax(0,1fr);column-gap:1.5rem;row-gap:1rem;align-items:center;}
  .bed-media{grid-row:1 / span 4;align-self:start;aspect-ratio:4/3;}
}
@media (min-width:1024px){
  .bed{
    grid-template-columns:12rem minmax(0,1.15fr) 7rem minmax(0,1.35fr) auto;
    column-gap:2rem;padding:1.75rem 0;
  }
  .bed-media{grid-row:auto;}
  .bed-sizes{flex-wrap:nowrap;}
}

.bed-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-inner,16px);overflow:hidden;background:var(--paper);}
.bed-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bed-media .ref-tag{left:.55rem;bottom:.55rem;padding:.25rem .55rem;font-size:11px;}

/* Corte ilustrado de A tu medida */
.bed-strata{display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line-soft);}
.st{display:block;flex:1 1 0;box-shadow:inset 0 1px 0 rgba(7,28,52,.16);}
.st-memory{
  flex-grow:.9;background-color:#D7E1EE;
  background-image:radial-gradient(circle,rgba(7,28,52,.08) 0 1px,transparent 1.6px);background-size:9px 9px;
}
.st-esponja{
  flex-grow:1.4;background-color:var(--yellow);
  background-image:radial-gradient(circle,rgba(7,28,52,.2) 0 2px,transparent 2.7px);background-size:11px 11px;
}
.st-aglu{
  flex-grow:1.1;background-color:#A7AEBB;
  background-image:
    radial-gradient(ellipse 7px 5px at 18% 32%,#F2C230 70%,transparent 74%),
    radial-gradient(ellipse 5px 8px at 72% 18%,#2F6FC4 70%,transparent 74%),
    radial-gradient(ellipse 9px 6px at 44% 76%,#D9452F 70%,transparent 74%),
    radial-gradient(ellipse 8px 5px at 12% 84%,#F4F5F7 70%,transparent 74%),
    radial-gradient(ellipse 4px 7px at 58% 48%,#7A4CA8 70%,transparent 74%),
    radial-gradient(ellipse 6px 4px at 92% 38%,#EE8A2B 70%,transparent 74%);
  background-size:37px 31px,53px 43px,41px 47px,29px 33px,47px 53px,43px 29px;
}

.bed-name{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:var(--fw-x,800);line-height:1.1;letter-spacing:-.035em;color:var(--ink);}
.bed-text{margin-top:.45rem;max-width:44ch;font-size:14.5px;line-height:1.6;color:rgba(7,28,52,.64);}
.bed-warranty{display:flex;align-items:baseline;gap:.4rem;}
@media (min-width:1024px){.bed-warranty{flex-direction:column;gap:.1rem;}}
.bed-warranty strong{font-size:22px;font-weight:var(--fw-x,800);letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap;}
.bed-warranty span{font-size:12.5px;font-weight:600;color:rgba(7,28,52,.6);}
.bed-sizes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;}
.bed-sizes li{
  padding:.32rem .6rem;border-radius:7px;background:var(--paper);border:1px solid var(--line-soft);
  font-size:12.5px;font-weight:700;color:var(--ink);
}
.bed-h{margin-top:.55rem;font-size:12.5px;font-weight:600;color:rgba(7,28,52,.6);font-variant-numeric:tabular-nums;}
.bed-cta{justify-content:center;}
@media (max-width:639px){.bed-cta{width:100%;}}
@media (min-width:640px) and (max-width:1023px){.bed-cta{justify-self:start;grid-column:2;}}

.more-link{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:2rem;
  font-size:14.5px;font-weight:700;color:var(--ink);
}
.more-text{text-decoration:underline;text-decoration-color:rgba(7,28,52,.25);text-underline-offset:4px;transition:text-decoration-color .2s var(--ease-out);}
.more-link:hover .more-text{text-decoration-color:var(--yellow);}
.more-link .material-symbols-outlined{font-size:18px;transition:transform .2s var(--ease-out);}
.more-link:hover .material-symbols-outlined{transform:translateX(3px);}