/* ═══ Piezas de apertura: hero WebGL + axonométrico por capas ═══ */

/* ── HERO 3D ── */
.hero{position:relative;height:calc(var(--vph) - var(--navh) - 54px);min-height:500px;overflow:hidden;
  background:linear-gradient(#EDF1F5,#FFFFFF)}
/* pan-y: el scroll vertical lo maneja el navegador; el horizontal queda
   para girar el modelo. Sin esto el canvas se traga el gesto entero. */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity 1.1s ease;touch-action:pan-y}
.hero canvas.in{opacity:1}
/* El velo hace legible el titular sobre el render. Con la maqueta en negro
   hay que subir bastante el blanco: donde antes bastaba un 35% de velo, el
   rótulo gris quedaba encima del volumen oscuro y desaparecía. */
.hero__veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,#FFFFFF 15%,rgba(255,255,255,.97) 33%,rgba(255,255,255,.72) 46%,transparent 68%),
    radial-gradient(120% 90% at 50% 44%,transparent 54%,rgba(255,255,255,.5) 100%)}
.hero__body{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 28px;pointer-events:none}
.hero__meta{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hero__meta i{flex:1;height:1px;background:var(--line);max-width:80px}
.hero h1{font-size:clamp(2.4rem,12.6vw,3.6rem);line-height:1.02}
.hero h1 span{color:var(--yel)}
.hero__sub{font-size:.95rem;color:var(--text-2);line-height:1.6;max-width:33ch;margin-top:14px}
.hero__hint{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.hero__hint b{width:5px;height:5px;border-radius:50%;background:var(--yel);animation:bl 1.8s ease-in-out infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.hero__load{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:opacity .5s}
.hero__load.out{opacity:0;pointer-events:none}
.hero__load i{display:block;width:38px;height:2px;background:var(--yel);margin:10px auto 0;transform-origin:left;
  animation:ld 1.3s ease-in-out infinite}
@keyframes ld{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}
.hero__fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.hero__fb.in{opacity:.6}

/* ── AXONOMÉTRICO ── */
.axo{height:calc(var(--vph) * 5.4);position:relative;background:var(--bg-2)}
.axo__stick{position:sticky;top:var(--navh);height:calc(var(--vph) - var(--navh) - 54px);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(to right,var(--line-2) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(to bottom,var(--line-2) 1px,transparent 1px) 0 0/36px 36px,var(--bg)}
.axo__head{padding:14px var(--gut) 0}
.axo__head h2{font-size:1.45rem;margin-top:7px}
.axo__stage{flex:1;position:relative;min-height:0}
/* El SVG va en absoluto con width/height en % explícitos.
   Dos trampas juntas: con `place-items:center` la altura del hueco queda
   indefinida y `height:100%` no resuelve; y como el SVG es un elemento
   reemplazado, con `height:auto` ignora el `bottom` y adopta su alto
   intrínseco. En ambos casos el dibujo se desbordaba por abajo.
   El descuento de la derecha reserva el carril del medidor 01–06. */
.axo__stage svg{position:absolute;top:0;left:0;width:calc(100% - 36px);height:100%;overflow:visible}
.lyr{opacity:0}
.axo__meter{position:absolute;top:50%;right:calc(var(--gut) - 6px);translate:0 -50%;display:grid;gap:1px}
.axo__meter button{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:10px;
  font-weight:600;color:var(--muted);height:22px;padding-right:2px;transition:.28s}
.axo__meter button::after{content:"";width:11px;height:1px;background:currentColor;transition:.28s}
.axo__meter button.on{color:var(--text)}
.axo__meter button.on::after{width:23px;height:2px;background:var(--yel)}
.axo__leg{position:absolute;left:var(--gut);bottom:6px;display:flex;gap:12px;font-size:10px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);opacity:0;transition:.35s;pointer-events:none}
.axo__leg.on{opacity:1}
.axo__leg span{display:flex;align-items:center;gap:5px}
.axo__leg i{width:12px;height:3px;display:block;border-radius:2px}
.axo__bar{height:3px;background:var(--line-2);position:relative}
.axo__bar i{position:absolute;inset:0 auto 0 0;background:var(--yel);width:0}
.axo__cap{padding:0 var(--gut) 18px;min-height:110px;background:var(--bg-2);border-top:1px solid var(--line-2)}
.axo__cap .n{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;padding-top:12px}
.axo__cap h3{font-size:1.22rem;margin:6px 0}
.axo__cap p{font-size:.86rem;max-width:44ch}

/* ── grilla de renders ── */
.rend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px}
/* los renders son 16/9 nativos: cualquier otra proporción los recorta */
.rend img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rend a,.rend button{position:relative;display:block;background:var(--bg-3)}
.rend a.wide,.rend button.wide{grid-column:span 2}
.rend figcaption{position:absolute;left:8px;bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;background:rgba(255,255,255,.92);padding:5px 9px;border-radius:4px;color:var(--text)}

/* ── escritorio ── */
@media (min-width:900px){
  .hero{height:calc(var(--vph) - var(--navh));min-height:620px}
  .hero__body{padding:0 48px 56px;max-width:1180px;left:50%;translate:-50% 0;right:auto;width:100%}
  .hero h1{font-size:clamp(3.2rem,5.8vw,5rem)}
  .hero__sub{font-size:1.05rem;max-width:42ch}
  /* en escritorio el texto vive abajo a la izquierda: además del velo
     inferior, un lavado lateral deja limpia esa columna sin tapar la
     maqueta, que ocupa el centro y la derecha */
  .hero__veil{background:
    linear-gradient(to right,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 24%,transparent 46%),
    linear-gradient(to top,#FFFFFF 10%,rgba(255,255,255,.94) 28%,rgba(255,255,255,.45) 46%,transparent 66%),
    radial-gradient(120% 90% at 50% 46%,transparent 58%,rgba(255,255,255,.45) 100%)}
  /* Dos columnas: el dibujo es alto y estrecho, así que apilado dejaba
     1000 px de ancho vacíos. Aquí ocupa la altura completa a la izquierda
     y el texto de la etapa lo acompaña a la derecha. */
  .axo__stick{height:calc(var(--vph) - var(--navh));
    display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:1fr auto auto;
    column-gap:56px;padding:0 48px 30px;max-width:1276px;margin-inline:auto;width:100%}
  .axo__head{grid-column:2;grid-row:1;align-self:end;padding:0 0 20px}
  .axo__head h2{font-size:2.1rem}
  .axo__stage{grid-column:1;grid-row:1/-1;min-height:0}
  .axo__stage svg{width:calc(100% - 74px)}
  .axo__meter{right:6px}
  .axo__bar{grid-column:2;grid-row:2}
  .axo__cap{grid-column:2;grid-row:3;background:transparent;padding:0;min-height:150px;border-top:0}
  .axo__cap h3{font-size:1.7rem}
  .axo__cap p{font-size:.96rem}
  .axo__leg{left:0;bottom:14px}
  .rend{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin-inline:auto}
  .rend a.wide,.rend button.wide{grid-column:span 3}
}