/* ============================================================
   esponja-moderno.css — SOLO para esponja-moderno.html.
   Lo compartido (tokens, header, botones, fondo de espuma,
   títulos, CTA final, footer, reveal) vive en css/moderno.css.
   ============================================================ */

:root{
  --foam:#FFC72C;
  --foam-top:#FFDF7E;
  --foam-side:#E3A70E;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ============================================================
   HERO
   ============================================================ */
.hero .grid > *{min-width:0;}

@media (prefers-reduced-motion:no-preference){
  .block-stage{opacity:0;animation:pgFade .8s var(--ease) .2s forwards;}
}

/* ---------- Bloque de producción en 3D ----------
   Medidas reales a escala: ancho 240, largo 200, alto 120 (cm),
   multiplicadas por --u. */
.block-stage{
  position:relative;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-height:360px;perspective:1700px;
}
@media (min-width:1024px){.block-stage{min-height:470px;}}

.block-tilt{
  position:relative;transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);
  --u:.98px;
  /* el dibujo en 3D sobresale de su caja: se reserva ese espacio arriba y abajo */
  margin:calc(72 * var(--u)) 0 calc(118 * var(--u));
}
@media (min-width:640px){.block-tilt{--u:1.2px;}}
@media (min-width:1280px){.block-tilt{--u:1.45px;}}

.cuboid{
  --W:calc(240 * var(--u));
  --D:calc(200 * var(--u));
  --H:calc(120 * var(--u));
  position:relative;width:var(--W);height:var(--H);
  transform-style:preserve-3d;
  transform:rotateX(-26deg) rotateY(-40deg);
}
.face{
  position:absolute;left:0;top:0;overflow:hidden;
  background-color:var(--foam);
  box-shadow:inset 0 0 0 1px rgba(7,28,52,.12);
}
.face-front{width:var(--W);height:var(--H);transform:translateZ(calc(var(--D) / 2));}
.face-side{
  width:var(--D);height:var(--H);left:calc((var(--W) - var(--D)) / 2);
  background-color:var(--foam-side);
  transform:rotateY(90deg) translateZ(calc(var(--W) / 2));
}
.face-top{
  width:var(--W);height:var(--D);top:calc((var(--H) - var(--D)) / 2);
  background-color:var(--foam-top);
  transform:rotateX(90deg) translateZ(calc(var(--H) / 2));
}
.block-shadow{
  position:absolute;left:50%;top:50%;
  width:calc(240 * var(--u) * 1.25);height:calc(200 * var(--u) * 1.25);
  margin-left:calc(240 * var(--u) * -.625);margin-top:calc(200 * var(--u) * -.625);
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);
  filter:blur(14px);
  transform:rotateX(-26deg) rotateY(-40deg) translateY(calc(60 * var(--u) + 2px)) rotateX(90deg);
  pointer-events:none;
}

/* Líneas de corte: el bloque se rebana en láminas */
.cut{
  position:absolute;left:0;right:0;height:2px;
  background:rgba(7,28,52,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.35);
}
.cut-1{top:33.33%;}
.cut-2{top:66.66%;}
@media (prefers-reduced-motion:no-preference){
  .cut{transform:scaleX(0);transform-origin:0 50%;animation:cutIn .9s var(--ease-in-out,cubic-bezier(.77,0,.175,1)) forwards;}
  .face-front .cut-1{animation-delay:1.05s;}
  .face-front .cut-2{animation-delay:1.25s;}
  .face-side .cut-1{animation-delay:1.55s;}
  .face-side .cut-2{animation-delay:1.75s;}
  @keyframes cutIn{to{transform:scaleX(1);}}
}

/* Medidas impresas sobre el bloque */
.dim{
  position:absolute;font-size:12.5px;font-weight:var(--fw-x,800);letter-spacing:.01em;
  color:rgba(7,28,52,.78);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dim-w{left:50%;bottom:6px;transform:translateX(-50%);}
.dim-d{left:50%;bottom:6px;transform:translateX(-50%);}
.dim-h{left:15px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);}

.block-caption{
  display:inline-flex;align-items:center;gap:.5rem;
  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);
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.block-caption .material-symbols-outlined{color:var(--yellow);}

/* ============================================================
   FORMATOS
   ============================================================ */
.formats{display:grid;grid-template-columns:1fr;gap:3rem;}
@media (min-width:1024px){.formats{grid-template-columns:1.05fr 1fr;gap:4rem;align-items:start;}}

.fmt-feature{
  background:var(--white);border-radius:var(--r-card,28px);overflow:hidden;
  border:1px solid var(--line-soft);
  box-shadow:0 30px 60px -44px rgba(7,28,52,.55);
}
.fmt-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper);}
/* Aviso visible mientras no haya fotos reales de Guma */
.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;
}
.fmt-photo img{width:100%;height:100%;object-fit:cover;}
@media (hover:hover) and (pointer:fine){
  .fmt-photo img{transition:transform .7s var(--ease-out);}
  .fmt-feature:hover .fmt-photo img{transform:scale(1.04);}
}
.fmt-feature-body{padding:2rem;display:flex;flex-direction:column;align-items:flex-start;}
@media (min-width:768px){.fmt-feature-body{padding:2.25rem 2.5rem 2.5rem;}}
.fmt-feature-title{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:var(--fw-x,800);letter-spacing:-.035em;line-height:1.1;color:var(--ink);}
.fmt-feature-text{margin-top:.75rem;max-width:44ch;font-size:15px;line-height:1.65;color:rgba(7,28,52,.64);}

.fmt-list{list-style:none;margin:0;padding:0;}
.fmt-row{
  display:grid;grid-template-columns:48px 1fr;gap:1.1rem;align-items:start;
  padding:1.6rem 0;border-top:1px solid var(--line);
}
.fmt-row:last-child{border-bottom:1px solid var(--line);}
@media (min-width:1024px){.fmt-row:first-child{padding-top:0;border-top:0;}}
.fmt-icon{
  width:48px;height:48px;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:23px;
}
.fmt-name{font-size:18px;font-weight:var(--fw-x,800);letter-spacing:-.025em;color:var(--ink);line-height:1.25;padding-top:.2rem;}
.fmt-text{margin-top:.3rem;max-width:44ch;font-size:14.5px;line-height:1.6;color:rgba(7,28,52,.62);}

/* ============================================================
   DENSIDADES (instrumento)
   ============================================================ */
.density-band{background:var(--ink);color:#fff;}
.density-tool{margin-top:3rem;}

.d-rail{
  display:flex;gap:.55rem;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.5rem;margin-inline:-1.25rem;padding-inline:1.25rem;
  scroll-padding-inline:1.25rem;scrollbar-width:none;
}
.d-rail::-webkit-scrollbar{display:none;}
@media (min-width:1024px){.d-rail{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;}}
.d-group{
  display:flex;gap:.35rem;padding:.3rem;border-radius:var(--r-card,20px);flex:none;
  background:rgba(255,199,44,.07);border:1px solid rgba(255,199,44,.26);
}
.d-opt{
  flex:none;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;
  min-width:6.1rem;padding:.75rem 1rem;border-radius:var(--r-inner,16px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;text-align:left;
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out);
}
.d-group .d-opt{border-radius:var(--r-inner,14px);}
.d-group-label{
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  padding:.45rem .7rem .45rem .6rem;color:#fff;
}
.d-group-label .d-opt-yr{color:rgba(255,255,255,.62);}
.d-var{min-width:0;font-size:14.5px;font-weight:var(--fw-x,800);letter-spacing:-.02em;white-space:nowrap;}
.d-opt-kg{font-size:19px;font-weight:var(--fw-x,800);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.d-opt-yr{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.62);white-space:nowrap;transition:color .2s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .d-opt:not(.is-on):hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
}
.d-opt:active{transform:scale(.97);}
.d-opt.is-on{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}
.d-opt.is-on .d-opt-yr{color:rgba(7,28,52,.72);}

.d-panel{
  margin-top:1.75rem;display:grid;grid-template-columns:1fr;gap:2.5rem;
  padding:2rem;border-radius:var(--r-card,28px);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
}
@media (min-width:768px){.d-panel{padding:2.75rem;}}
@media (min-width:1024px){.d-panel{grid-template-columns:1.15fr .85fr;gap:3.5rem;padding:3.25rem;align-items:center;}}

.d-readout{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.d-big{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:clamp(4.25rem,8.5vw,6rem);font-weight:var(--fw-x,800);line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:#fff;
}
.d-big small{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.55);}
.d-name{margin-top:.9rem;font-size:18px;font-weight:700;letter-spacing:-.02em;color:rgba(255,255,255,.86);}

.d-facts{
  display:grid;grid-template-columns:1fr;gap:1.25rem 2rem;
  width:100%;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);
}
@media (min-width:640px){.d-facts{grid-template-columns:auto 1fr;}}
.d-facts dt{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.58);}
.d-facts dd{margin:.3rem 0 0;font-size:19px;font-weight:var(--fw-x,800);letter-spacing:-.025em;color:#fff;}
.d-note{margin-top:1.1rem;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.5);}

/* Corte transversal: la porosidad cambia con la densidad */
.d-xsec{position:relative;margin:0;}
.d-xsec-frame{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-card,24px);overflow:hidden;
  background:var(--foam);
  box-shadow:inset 0 0 0 1px rgba(7,28,52,.14),0 40px 70px -40px rgba(0,0,0,.7);
}
@media (max-width:1023px){
  .d-xsec{order:-1;}
  .d-xsec-frame{aspect-ratio:16/5;border-radius:var(--r-card,18px);}
}
/* Respaldo sin JS: patrón simple. Con JS, dos lienzos dibujan poros
   irregulares y se cruzan con un leve desenfoque al cambiar de densidad. */
.d-xsec-frame{
  background-image:radial-gradient(circle,rgba(7,28,52,.22) 0 3px,transparent 3.7px);
  background-size:13px 13px;
}
.pores{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;filter:blur(3px);
  transition:opacity .32s var(--ease-out),filter .32s var(--ease-out);
}
.pores.is-front{opacity:1;filter:none;}
.d-xsec-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 45%,rgba(7,28,52,.14));
}
.d-xsec-cap{margin-top:.8rem;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);}

/* ============================================================
   COLORES Y USOS
   ============================================================ */
.swatches{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;margin-top:2.25rem;list-style:none;padding:0;}
.swatch{display:flex;flex-direction:column;align-items:center;gap:.55rem;}
.swatch::before{
  content:"";width:64px;height:64px;border-radius:var(--r-card,18px);
  background-color:var(--c);
  box-shadow:inset 0 0 0 1px rgba(7,28,52,.1);
}
.swatch span{font-size:12.5px;font-weight:700;color:rgba(7,28,52,.7);}

.uses{list-style:none;margin:2.25rem 0 0;padding:0;}
.uses li{
  display:flex;flex-direction:column;gap:.2rem;
  padding:1.15rem 0;border-top:1px solid var(--line);
}
@media (min-width:640px){
  .uses li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1.5rem;}
}
.uses li:last-child{border-bottom:1px solid var(--line);}
.use-name{font-size:clamp(1.35rem,2.3vw,1.9rem);font-weight:var(--fw-x,800);letter-spacing:-.035em;color:var(--ink);line-height:1.15;}

/* ============================================================
   ENTREGA
   ============================================================ */
.delivery{
  background:var(--white);border-radius:var(--r-card,28px);border:1px solid var(--line-soft);
  padding:2rem;box-shadow:0 30px 60px -48px rgba(7,28,52,.5);
}
@media (min-width:768px){.delivery{padding:3rem;}}
@media (min-width:1024px){.delivery{padding:3.5rem 4rem;}}
.delivery-title{
  max-width:22ch;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:var(--fw-x,800);letter-spacing:-.04em;line-height:1.08;color:var(--ink);text-wrap:balance;
}
.flow{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1.75rem;}
@media (min-width:768px){.flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;}}
.flow-step{
  display:flex;flex-direction:column;gap:.35rem;
  padding-top:1.25rem;border-top:2px solid var(--ink);
}
.flow-step:first-child{border-top-color:var(--yellow);}
.flow-step .material-symbols-outlined{font-size:24px;color:var(--blue);margin-bottom:.35rem;}
.flow-step strong{font-size:18px;font-weight:var(--fw-x,800);letter-spacing:-.025em;color:var(--ink);}
.flow-step span:last-child{font-size:14px;color:rgba(7,28,52,.6);}

.states{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line-soft);}
.states-lead{font-size:13px;font-weight:700;color:rgba(7,28,52,.55);}
.states ul{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.states li{
  padding:.5rem 1rem;border-radius:var(--r-pill,99px);background:var(--paper);border:1px solid var(--line-soft);
  font-size:14px;font-weight:700;color:var(--ink);
}
.states-note{margin-top:1rem;max-width:60ch;font-size:13.5px;line-height:1.6;color:rgba(7,28,52,.6);}