/* ============================================================
   nosotros-moderno.css — SOLO para nosotros-moderno.html.
   Esta página no lleva JS propio: todo su comportamiento es el
   compartido de js/moderno.js.
   ============================================================ */

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

/* ============================================================
   HERO: el bloque de esponja con que empezó Guma
   Medidas del bloque de producción a escala: 240 × 200 × 120.
   ============================================================ */
.nb-stage{
  position:relative;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:330px;perspective:1700px;
}
@media (min-width:1024px){.nb-stage{min-height:460px;}}
.nb-tilt{
  position:relative;transform-style:preserve-3d;
  --u:.95px;
  margin:calc(72 * var(--u)) 0 calc(110 * var(--u));
}
@media (min-width:640px){.nb-tilt{--u:1.15px;}}
@media (min-width:1280px){.nb-tilt{--u:1.35px;}}
.nb-cube{
  --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);
}
.nb-face{
  position:absolute;left:0;top:0;overflow:hidden;
  background-color:var(--yellow);
  background-image:radial-gradient(circle,rgba(7,28,52,.18) 0 1.6px,transparent 2.2px);
  background-size:11px 11px;
  box-shadow:inset 0 0 0 1px rgba(7,28,52,.12);
}
.nb-front{width:var(--W);height:var(--H);transform:translateZ(calc(var(--D) / 2));display:flex;align-items:flex-end;padding:0 0 calc(10 * var(--u)) calc(14 * var(--u));}
.nb-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));}
.nb-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));}
.nb-year{
  font-size:calc(34 * var(--u));font-weight:var(--fw-x,800);line-height:1;letter-spacing:-.04em;
  color:rgba(7,28,52,.82);font-variant-numeric:tabular-nums;
}
.nb-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;
}
.nb-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);
}
.nb-caption .material-symbols-outlined{color:var(--yellow);}
@media (prefers-reduced-motion:no-preference){
  .nb-stage{opacity:0;animation:pgFade .8s var(--ease) .2s forwards;}
  /* el bloque baja y se asienta, una sola vez */
  .nb-cube{animation:nbDrop 1.1s var(--ease) .35s backwards;}
  @keyframes nbDrop{from{transform:rotateX(-26deg) rotateY(-40deg) translateY(calc(-60 * var(--u)));}}
}

/* ============================================================
   HISTORIA (línea de tiempo de dos momentos)
   ============================================================ */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;}
@media (min-width:1024px){.story{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start;}}
.tl{list-style:none;margin:0;padding:0;position:relative;}
.tl::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;background:var(--line);}
.tl-item{position:relative;padding:0 0 3rem 2.75rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:0;top:.35rem;width:16px;height:16px;border-radius:var(--r-pill,99px);
  background:var(--paper);border:2px solid var(--ink);
}
.tl-now::before{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 5px rgba(255,199,44,.25);}
.tl-when{font-size:13px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;}
.tl-title{margin-top:.4rem;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);}
.tl-text{margin-top:.7rem;max-width:52ch;font-size:15.5px;line-height:1.65;color:rgba(7,28,52,.66);}
.tl-chips{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.tl-chips a{
  display:inline-flex;align-items:center;height:2.5rem;padding:0 1rem;border-radius:var(--r-pill,99px);
  background:var(--white);border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .2s var(--ease-out),transform .16s var(--ease-out);
}
.tl-chips a:hover{border-color:var(--ink);}
.tl-chips a:active{transform:scale(.97);}

/* ============================================================
   PLANTAS (banda tinta)
   ============================================================ */
.plants-band{background:var(--ink);color:#fff;}
.plants{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;}
@media (min-width:768px){.plants{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.plants{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);}}
.plant{
  display:flex;flex-direction:column;align-items:flex-start;
  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){.plant-main{grid-row:span 2;}}
@media (min-width:1024px){.plant-main{grid-row:auto;padding:2.5rem;}}
.plant-main{background:rgba(255,199,44,.07);border-color:rgba(255,199,44,.3);}
.plant-ic{
  width:48px;height:48px;border-radius:var(--r-pill,99px);display:flex;align-items:center;justify-content:center;
  background:rgba(255,199,44,.14);color:var(--yellow);font-size:23px;
}
.plant-name{margin-top:1.5rem;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:var(--fw-x,800);line-height:1.15;letter-spacing:-.03em;}
.plant-role{margin-top:.4rem;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66);}
.plant-addr{margin-top:1rem;font-style:normal;font-size:15px;font-weight:700;color:rgba(255,255,255,.9);}

/* ============================================================
   POR QUÉ (cuatro datos en rejilla)
   ============================================================ */
.whys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;}
@media (min-width:768px){.whys{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem;}}
@media (min-width:1280px){.whys{grid-template-columns:repeat(4,minmax(0,1fr));}}
.whys li{padding-top:1.25rem;border-top:2px solid var(--ink);}
.whys li:first-child{border-top-color:var(--yellow);}
.whys .material-symbols-outlined{font-size:24px;color:var(--blue);}
.whys h3{margin-top:.75rem;font-size:18px;font-weight:var(--fw-x,800);line-height:1.25;letter-spacing:-.025em;color:var(--ink);}
.whys p{margin-top:.4rem;max-width:40ch;font-size:14.5px;line-height:1.6;color:rgba(7,28,52,.64);}