/* ===== Hero: chasis 3D entintado (layout full-bleed tipo anime.js) ===== */
.hero3d { position: relative; height: 320vh; }
.hero3d.is-static { height: calc(100vh - var(--header-h)); }   /* reduced-motion: sin riel de scroll */
.hero3d__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* capa de texto sobre el modelo */
.hero3d__overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.hero3d__overlay .container { width: 100%; }
.hero3d__copy { max-width: 33rem; }
.hero3d__copy .btn { pointer-events: auto; }

.hero__eyebrow {
  font-family: var(--font-mono); color: var(--race-red);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  margin-bottom: var(--space-2);
}
.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 0.94;
  letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--blueprint); margin-bottom: var(--space-3);
}
.hero__title .accent { color: var(--race-red); }
.hero3d .lead { color: var(--ink); font-size: 1.12rem; max-width: 32rem; }
.hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* cotas flotantes que aparecen durante la explosión */
.hero3d__cotas { position: absolute; inset: 0; pointer-events: none; }
/* la posición (left/top) la fija hero3d.js proyectando la pieza anclada a pantalla */
.cota3d {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.25s ease;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--blueprint); background: rgba(240, 237, 228, 0.72);
  border: 1px solid var(--line); padding: 2px 7px; white-space: nowrap;
}

/* hint de scroll */
.hero3d__hint {
  position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--dim); text-align: center; text-transform: uppercase;
}
.hero3d__hint .bar {
  display: block; width: 1px; height: 30px; margin: 8px auto 0;
  background: var(--dim); opacity: 0.6; transform-origin: top;
  animation: hintBob3d 1.8s ease-in-out infinite;
}
@keyframes hintBob3d {
  0%, 100% { transform: scaleY(0.5); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 0.8; }
}
.hero3d.is-static .hero3d__hint { display: none; }

/* loader */
.hero3d__loader {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: var(--paper); transition: opacity 0.5s ease;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--dim); letter-spacing: 0.08em;
}

/* ===== Franja de contadores ===== */
.strip {
  border-top: 1.5px solid var(--blueprint); border-bottom: 1.5px solid var(--blueprint);
  padding: var(--space-4) 0; background: var(--paper-2);
}
.strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); text-align: center; }
.strip__stat .value {
  font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; line-height: 1;
  color: var(--blueprint); font-variant-numeric: tabular-nums;
}
.strip__stat .label {
  color: var(--dim); font-size: 0.82rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px;
}
.strip__note { margin: var(--space-3) auto 0; text-align: center; color: var(--ink); font-size: 0.92rem; max-width: 760px; }

/* ===== Explora en 3D (visor texturizado interactivo) ===== */
.explore { padding: var(--space-6) 0; }
.explore__viewer {
  position: relative; margin: var(--space-3) 0 0;
  height: min(68vh, 600px);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(0deg, transparent, transparent calc(var(--grid-step) - 1px), rgba(15,42,67,0.045) calc(var(--grid-step) - 1px), rgba(15,42,67,0.045) var(--grid-step)),
    repeating-linear-gradient(90deg, transparent, transparent calc(var(--grid-step) - 1px), rgba(15,42,67,0.045) calc(var(--grid-step) - 1px), rgba(15,42,67,0.045) var(--grid-step)),
    var(--paper);
  box-shadow: 8px 8px 0 -1px var(--paper-3), 8px 8px 0 0 var(--line-strong);
  overflow: hidden;
}
.explore__viewer model-viewer {
  width: 100%; height: 100%; background: transparent;
  --poster-color: transparent;
}
.panel-cap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px var(--space-2);
  border-bottom: 1.5px solid var(--blueprint);
  background: rgba(240, 237, 228, 0.82);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blueprint);
}
.panel-cap .cota { font-family: var(--font-mono); letter-spacing: 0.06em; font-weight: 500; }

/* ===== Temario ===== */
.sessions { padding: var(--space-6) 0; }
.section-head { margin-bottom: var(--space-4); }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 6px; }
.section-head__sub { font-family: var(--font-mono); color: var(--dim); font-size: 0.82rem; letter-spacing: 0.02em; }
.sessions__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.session-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.session-card .num {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--blueprint);
}
.session-card--bonus .num { color: var(--race-red); }
.session-card h3 { font-size: 1.12rem; margin: 4px 0; color: var(--blueprint); }
.session-card .sub { color: var(--dim); font-size: 0.86rem; margin-bottom: 6px; }
.session-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero3d { height: 260vh; }
  .hero3d__copy {
    max-width: none; padding: var(--space-2) var(--space-2) var(--space-3);
    background: rgba(240, 237, 228, 0.86); border-left: 2px solid var(--race-red);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 0 0 1px var(--line);
  }
  .cota3d { font-size: 0.66rem; }
}
@media (max-width: 640px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}