/* ==========================================================================
   ENHANCE — Hero 3D cinemático · hoja de estilos aislada
   Todas las clases con prefijo .eh- para no chocar con styles.css.
   No incluye reset global.
   ========================================================================== */

.eh-scope {
  --eh-black:      #0b0908;
  --eh-black-2:    #0D0608;
  --eh-wine:       #561C24;
  --eh-terra:      #A0453A;
  --eh-cream:      #C7B7A3;
  --eh-white:      #F5EDE8;
  --eh-font:       'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- Contenedor / pin ------------------------------------------------ */
.eh-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--eh-black);
  color: var(--eh-white);
  font-family: var(--eh-font);
  isolation: isolate;
}

.eh-sticky {
  position: absolute;
  inset: 0;
  display: block;
}

/* ---- Canvas de frames ------------------------------------------------ */
.eh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Viñeta + graduaciones para fundir el objeto con el fondo y dar foco al texto */
.eh-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(11,9,8,0.55) 100%),
    linear-gradient(to bottom, rgba(11,9,8,0.55) 0%, transparent 22%, transparent 62%, rgba(11,9,8,0.92) 100%);
}

/* ---- Escenario de texto ---------------------------------------------- */
.eh-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.eh-cap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 90vw);
  text-align: center;
  will-change: transform, opacity, filter;
}

/* Colocación por beat: el objeto manda en el centro; las frases narrativas
   viven en el tercio inferior para no chocar con el titular del objeto. */
.eh-cap--l1,
.eh-cap--l2 {
  top: auto;
  bottom: clamp(60px, 12vh, 130px);
  transform: translate(-50%, 0);
  width: min(920px, 90vw);
}
.eh-cap--specs {
  top: auto;
  bottom: clamp(40px, 7vh, 82px);
  transform: translate(-50%, 0);
  width: min(1040px, 93vw);
}

/* Intro: wordmark ENHANCE + sublabel */
.eh-wordmark {
  font-weight: 800;
  font-size: clamp(2.5rem, 9.2vw, 7.4rem);
  line-height: 0.92;
  color: var(--eh-white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  white-space: nowrap;
}
.eh-sub {
  margin-top: clamp(12px, 2vw, 22px);
  font-size: clamp(0.72rem, 1.4vw, 1rem);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--eh-cream);
  padding-left: 0.55em; /* compensa el tracking */
}

/* Líneas narrativas */
.eh-line {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.8rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--eh-white);
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(11,9,8,0.9), 0 1px 4px rgba(0,0,0,0.55);
}
.eh-line em {
  font-style: italic;
  font-weight: 500;
  color: var(--eh-terra);
}
.eh-cap--l2 .eh-line { color: var(--eh-cream); }
.eh-cap--l2 .eh-line b { color: var(--eh-white); font-weight: 700; }

/* Callouts de especificaciones 01/02/03 */
.eh-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 40px);
  text-align: left;
}
.eh-specs li {
  border-top: 1px solid rgba(199,183,163,0.28);
  padding-top: 16px;
  text-shadow: 0 2px 22px rgba(11,9,8,0.92), 0 1px 3px rgba(0,0,0,0.6);
}
.eh-specs span {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--eh-terra);
  font-weight: 700;
  margin-bottom: 10px;
}
.eh-specs b {
  display: block;
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  font-weight: 700;
  color: var(--eh-white);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.eh-specs i {
  font-style: normal;
  font-size: clamp(0.82rem, 1.3vw, 0.98rem);
  line-height: 1.45;
  color: var(--eh-cream);
}

/* Cierre + CTA */
.eh-close {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-weight: 700;
  font-size: clamp(2rem, 6.6vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--eh-white);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(11,9,8,0.85);
}
.eh-cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--eh-terra);
  color: var(--eh-white);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  letter-spacing: 0.01em;
  padding: 16px 30px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
  box-shadow: 0 12px 40px -12px rgba(160,69,58,0.7);
}
.eh-cta:hover {
  transform: translateY(-2px);
  background: #b45140;
  box-shadow: 0 18px 50px -12px rgba(160,69,58,0.85);
}

/* ---- Indicador de scroll --------------------------------------------- */
.eh-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--eh-cream);
  padding-left: 0.42em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
}
.eh-scrollcue::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--eh-cream), transparent);
  animation: eh-cue 2.2s ease-in-out infinite;
}
@keyframes eh-cue {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 0.9; transform-origin: top; }
}

/* ---- Loader ---------------------------------------------------------- */
.eh-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--eh-black);
  transition: opacity .6s ease;
}
.eh-loader.is-hidden { opacity: 0; pointer-events: none; }
.eh-loader__mark {
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--eh-white);
  padding-left: 0.55em;
}
.eh-loader__bar {
  width: min(220px, 52vw);
  height: 2px;
  background: rgba(199,183,163,0.18);
  overflow: hidden;
  border-radius: 2px;
}
.eh-loader__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--eh-terra), var(--eh-cream));
  transition: transform .2s ease;
}

/* ---- Fallback estático ----------------------------------------------- */
.eh-static-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 24px clamp(48px, 9vh, 90px);
  gap: 20px;
}
.eh-hero.is-static .eh-stage,
.eh-hero.is-static .eh-scrollcue { display: none; }
.eh-hero.is-static .eh-static-copy { display: flex; }
.eh-hero.is-static-nobg { background: radial-gradient(120% 100% at 50% 30%, #1a0f0d, var(--eh-black)); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
  .eh-specs { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .eh-specs li { border-top: none; border-left: 2px solid rgba(199,183,163,0.28); padding: 4px 0 4px 14px; }
  .eh-cap { width: 92vw; }
  .eh-vignette {
    background:
      radial-gradient(140% 80% at 50% 40%, transparent 30%, rgba(11,9,8,0.6) 100%),
      linear-gradient(to bottom, rgba(11,9,8,0.6) 0%, transparent 26%, transparent 58%, rgba(11,9,8,0.95) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eh-scrollcue::after { animation: none; }
}

/* ---- H1 accesible (oculto visualmente, presente para SEO/lectores) ---- */
.eh-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Nav sobre el hero oscuro (home) ---------------------------------
   Mientras el hero está activo, el body lleva .nav-on-hero (lo pone PHP y
   lo alterna hero-3d.js). Fuerza el nav a estilo claro, por encima del
   tema claro global. Al pasar el hero, el nav vuelve a su estilo normal. */
.theme-light.nav-on-hero .nav__links a { color: rgba(245, 237, 232, 0.7); }
.theme-light.nav-on-hero .nav__links a:hover,
.theme-light.nav-on-hero .nav__links a.active { color: #F5EDE8; }
.theme-light.nav-on-hero .nav__cta { color: #F5EDE8; border-bottom-color: rgba(160, 69, 58, 0.55); }
.theme-light.nav-on-hero .nav__hamburger span { background: #F5EDE8; }
.theme-light.nav-on-hero .nav.scrolled {
  background: rgba(13, 6, 8, 0.82);
  border-bottom-color: rgba(245, 237, 232, 0.08);
}

/* ---- Blindaje de color de los titulares del hero -------------------
   Los captions son <h2>; el tema claro global (.theme-light h1..h4 → var(--ink))
   los pintaría en tinta oscura e invisibles sobre el hero. Estas reglas
   (.eh-hero descendiente = mayor especificidad) mandan sobre el hero oscuro.
   Los acentos (em terracota / b crema) apuntan al elemento directo y se
   conservan. */
.eh-hero .eh-line { color: var(--eh-white); }
.eh-hero .eh-cap--l2 .eh-line { color: var(--eh-cream); }
.eh-hero .eh-close { color: var(--eh-white); }

/* ---- Alternancia hero 3D / hero clásico por ancho ------------------
   ≥768px: hero 3D animado (se oculta el clásico).
   <768px (móvil): hero clásico de siempre (se oculta el 3D).
   Solo se oculta (display:none); el que se muestra conserva su layout
   natural. hero-3d.js además no arranca en móvil (no precarga frames). */
@media (min-width: 768px) {
  .hero--legacy { display: none !important; }
}
@media (max-width: 767.98px) {
  .eh-hero { display: none !important; }
}