/* Hero de la landing: texto mínimo + escena WebGL (assets/js/gcg-hero-3d.bundle.js).
   Se carga DESPUÉS de presentacion.css y lo sobrescribe solo en la sección .portada.
   Paleta: carbón #070A0D / #11171C, naranja #F4A62A, gris #AAB2BA. Sin glow ni gradientes de color. */

.portada { min-height: clamp(640px, 100svh, 920px); }

/* ---- canvas WebGL: aparece con fundido sobre el <img> estático ---- */
.portada__canvas { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.portada--3d-listo .portada__canvas { opacity: 1; }
.portada--3d-listo .portada__galeria-fondo .portada__slide { visibility: hidden; }

/* ---- legibilidad: velo horizontal + viñeta inferior (solo con el canvas) ---- */
.portada__velo { display: none; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(0deg, #070A0D 0%, rgba(7,10,13,0) 25%),
    linear-gradient(90deg, rgba(7,10,13,.92) 0%, rgba(7,10,13,.92) 40%, rgba(7,10,13,.55) 70%, rgba(7,10,13,.25) 100%); }
/* con partículas el texto tiene su propia zona casi vacía: no hace falta velo */
.portada--3d .portada__velo { display: none; }
.portada--3d .portada__galeria-fondo::after { display: none; }

/* ---- composición: texto 5 / trofeo 7 ---- */
.portada__interior { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); min-height: clamp(560px, 82svh, 800px); padding-block: 96px 96px; }
.portada .portada__texto { max-width: 600px; }
.portada__marca { display: flex; align-items: center; gap: 12px; font-family: var(--fuente-mono); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #AAB2BA; }
.portada__marca::before { content: ''; width: 24px; height: 2px; background: #F4A62A; }
.portada .portada__texto h1 { max-width: none; margin-top: 20px; font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: -.05em; }
.portada .portada__texto h1 span, .portada .portada__texto h1 em { display: block; }
.portada .portada__texto h1 em { color: #F4A62A; }
.portada .portada__acciones { margin-top: 36px; }

/* ---- ancla del trofeo: el JS coloca la escena 3D sobre esta caja ---- */
.portada__trofeo-ancla { position: relative; justify-self: center; align-self: center; height: clamp(300px, 58vh, 560px); aspect-ratio: 1 / 1.05; pointer-events: none; }

/* ---- indicador de juego (solo con el canvas) ---- */
.portada__juego { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 2; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.portada--3d-listo .portada__juego { opacity: 1; }
.portada__juego-fila { display: flex; align-items: center; gap: 14px; font-family: var(--fuente-mono); font-size: var(--gcg-text-label, 11px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #AAB2BA; }
.portada__juego-fila b { color: #F4A62A; font-weight: 700; }
.portada__juego-barra { width: 96px; height: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
.portada__juego-barra i { display: block; width: 100%; height: 100%; background: #F4A62A; transform: scaleX(0); transform-origin: left center; }

/* ---- tablet: el trofeo va detrás/al lado sin tocar el texto ---- */
@media (max-width: 1279px) {
  .portada__interior { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .portada__trofeo-ancla { height: clamp(240px, 34vw, 400px); max-width: 86%; }
}

/* ---- móvil: trofeo arriba, centrado; texto abajo ---- */
@media (max-width: 767px) {
  .portada { min-height: auto; }
  .portada__interior { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding-block: 84px 56px; }
  .portada__trofeo-ancla { order: -1; justify-self: center; width: 42vw; max-width: 170px; height: auto; aspect-ratio: 1 / 1.1; }
  .portada .portada__texto h1 { font-size: clamp(44px, 12.5vw, 60px); }
  .portada .portada__acciones { display: grid; margin-top: 28px; }
  .portada .portada__acciones .boton { width: 100%; }
  .portada__marca { font-size: 12px; }
  .portada__velo { background:
    linear-gradient(0deg, #070A0D 0%, rgba(7,10,13,0) 25%),
    linear-gradient(0deg, rgba(7,10,13,.70) 0%, rgba(7,10,13,.70) 55%, rgba(7,10,13,.40) 100%); }
  .portada__juego { bottom: 56px; }
}

/* ---- sin movimiento: sin giro ni brasas (el JS no carga el canvas) ---- */
@media (prefers-reduced-motion: reduce) { .portada__canvas { transition: none; } }