/* Portada "Escenario": foco de teatro sobre el lema y suelo en 3D */
.shero {
  --x: 50%; --y: 45%;
  --azul-hondo: #1A22C9;  /* sombra del azul de marca */
  --azul-luz: #4A55FF;    /* azul de marca iluminado */
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  color: #fff;
  background: radial-gradient(circle 560px at var(--x) var(--y), var(--azul-luz) 0%, var(--ccg-azul) 45%, var(--azul-hondo) 100%);
}
.shero-floor {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; perspective: 520px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent);
}
.shero-floor div {
  position: absolute; inset: -100% 0 0; transform: rotateX(68deg); transform-origin: 50% 100%;
  background-image: linear-gradient(to right, rgba(255,255,255,.32) 1.5px, transparent 1.5px), linear-gradient(to bottom, rgba(255,255,255,.32) 1.5px, transparent 1.5px);
  background-size: 80px 80px; animation: s-run 2.4s linear infinite;
}
@keyframes s-run { to { background-position: 0 80px; } }
.shero-cone {
  position: absolute; top: -10%; left: calc(var(--x) - 270px); width: 540px; height: 120%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,0) 75%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(12px); mix-blend-mode: screen;
}
.shero-title { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); pointer-events: none; }
.shero-in { transform: translateY(-5vh); }
.shero .label { color: #fff; opacity: .85; margin-bottom: 26px; justify-content: center; }
.shero .label b { color: #fff; opacity: .6; }
.shero h1, .shero .h1 { margin: 0; font-weight: 700; letter-spacing: -.05em; line-height: .9; font-size: clamp(50px, 10.4vw, 176px); }
.sl { display: block; }
.shero-outline h1 { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.shero-lit {
  -webkit-mask-image: radial-gradient(circle 240px at var(--x) var(--y), #000 55%, transparent 72%);
          mask-image: radial-gradient(circle 240px at var(--x) var(--y), #000 55%, transparent 72%);
}
.shero-lit .h1 { color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.35); }
.shero-ring { position: absolute; left: var(--x); top: var(--y); width: 460px; height: 460px; margin: -230px 0 0 -230px; pointer-events: none; }
.shero-ring i { position: absolute; width: 40px; height: 40px; border: 0 solid rgba(255,255,255,.9); }
.shero-ring i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.shero-ring i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.shero-ring i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.shero-ring i:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.shero-coord { position: absolute; top: -22px; left: 0; font-family: var(--mono); font-size: 11px; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shero-cta { position: absolute; left: 0; right: 0; bottom: clamp(70px, 12vh, 120px); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 var(--gutter); z-index: 3; }
.shero-ghost { --bg: transparent; --fg: #fff; --bd: #fff; }
.shero-ghost:hover { --bg: #fff; --fg: var(--ccg-azul); --bd: #fff; }
.shero-down { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-family: var(--mono); font-size: 11px; opacity: .75; }
.shero-down::after { content: ""; width: 1.5px; height: 26px; background: #fff; animation: zdrop 1.6s infinite; }
@keyframes zdrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Encendido del escenario tras la intro */
.shero-floor, .shero-cone, .shero-ring, .shero-cta, .shero-down, .shero .label { opacity: 0; transition: opacity 1s cubic-bezier(.16,1,.3,1); }
.shero-cta { transform: translateY(20px); transition: opacity 1s cubic-bezier(.16,1,.3,1) .9s, transform 1s cubic-bezier(.16,1,.3,1) .9s; }
.sl > span { display: inline-block; opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s; }
.sl:nth-child(2) > span { transition-delay: .15s; }
.is-ready .shero-floor { opacity: 1; transition-delay: .2s; }
.is-ready .shero-cone, .is-ready .shero-ring { opacity: 1; transition-delay: .6s; }
.is-ready .shero .label { opacity: .85; transition-delay: .4s; }
.is-ready .shero-cta { opacity: 1; transform: none; }
.is-ready .shero-down { opacity: .75; transition-delay: 1.3s; }
.is-ready .sl > span, .no-js .sl > span { opacity: 1; transform: none; filter: none; }
.no-js .shero-floor, .no-js .shero-cta, .no-js .shero .label { opacity: 1; transform: none; }

/* Cabecera transparente mientras está sobre el escenario */
.site-header.on-stage { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.site-header.on-stage .brand { color: #fff; }
.site-header.on-stage .nav a:not(.btn) { color: #fff; }
.site-header.on-stage .nav a:not(.btn)::after { background: #fff; }
.site-header.on-stage .nav .btn { --bg: #fff; --fg: var(--ccg-azul); --bd: #fff; }
.site-header.on-stage .menu-toggle { color: #fff; }
.menu-open .site-header.on-stage { background: #fff; }
.menu-open .site-header.on-stage .brand, .menu-open .site-header.on-stage .menu-toggle { color: var(--ccg-azul); }
@media (max-width: 960px) {
  .site-header.on-stage .nav a:not(.btn) { color: var(--ccg-negro); }
  .site-header.on-stage .nav .btn { --bg: var(--ccg-azul); --fg: #fff; --bd: var(--ccg-azul); }
}

/* Banda de presentación bajo el escenario */
.hero--band { padding-top: clamp(80px, 10vw, 140px); }
.hero--band::after { display: none; }
.band-h { font-size: clamp(34px, 4.6vw, 64px); margin: 26px 0 30px; letter-spacing: -.045em; line-height: 1; }
.hero--band:not(.band-in) .label, .hero--band:not(.band-in) .band-h, .hero--band:not(.band-in) .lead,
.hero--band:not(.band-in) .hero-cta > *, .hero--band:not(.band-in) .hero-visual, .hero--band:not(.band-in) .facts > div { opacity: 0 !important; transform: translateY(30px) !important; }
.hero--band .band-h { transition: opacity .9s cubic-bezier(.16,1,.3,1) .15s, transform .9s cubic-bezier(.16,1,.3,1) .15s; }
.hero--band:not(.band-in) .frame i { opacity: 0 !important; }

@media (max-width: 640px) {
  .shero-ring { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .shero-lit { -webkit-mask-image: radial-gradient(circle 150px at var(--x) var(--y), #000 55%, transparent 72%); mask-image: radial-gradient(circle 150px at var(--x) var(--y), #000 55%, transparent 72%); }
  .shero-cta .btn { flex: 1 1 100%; justify-content: space-between; }
  .shero-cone { width: 360px; left: calc(var(--x) - 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .shero-floor div { animation: none; }
  .shero-floor, .shero-cone, .shero-ring, .shero-cta, .shero-down, .shero .label, .sl > span { opacity: 1 !important; transform: none !important; filter: none !important; }
}