/* arisexr.lol · portada (aprobada por Arise 2026-10-17) "PORTAL HEXTECH": intro ARISE -> portal de energía detrás del emblema Challenger,
   los rangos orbitan. Paleta del emblema (oro LoL + azul hextech), títulos dorados metálicos y botones hexagonales estilo cliente.
   En CSS solo se anima transform/opacity; el portal lo dibuja portal.js (WebGL). */
/* Cinzel (SIL OFL) servida desde la propia web y precargada: el título no espera a Google Fonts */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(fuentes/cinzel.woff2) format('woff2'); }
:root { --oro: #c8aa6e; --oro2: #f0e6d2; --oro-osc: #785a28; --hex: #0ac8b9; --hex2: #cdfafa; --hex-osc: #005a82; }
#inicio.portal { position: relative; z-index: 2; height: 100svh; min-height: 660px; overflow: hidden; background: #010a13; }
.pt-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pt-sin-gl .pt-lienzo { display: none; }
.pt-sin-gl { background: radial-gradient(circle at 50% 44%, rgba(10, 200, 185, .35), transparent 40%), #010a13 !important; }

/* escena DOM: emblema + rangos en órbita (portal.js los coloca) */
.pt-escena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pt-emblema { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(200px, 26vw, 360px); opacity: 0; will-change: transform; }
.pt-emblema img { width: 100%; height: auto; display: block; }
.pt-go .pt-emblema img { animation: pt-aparece 1.4s cubic-bezier(.2, 1.3, .4, 1) .35s both, pt-flota 6s ease-in-out 2s infinite; }
@keyframes pt-aparece { from { opacity: 0; transform: scale(.4) translateY(40px); } }
@keyframes pt-flota { 50% { transform: translateY(-10px); } }
.pt-emblema.pt-golpe img { animation: pt-golpe .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pt-golpe { 40% { transform: scale(1.08); } }
.pt-orb { position: absolute; left: 0; top: 0; width: clamp(50px, 5.6vw, 88px); opacity: 0; will-change: transform, opacity; }
.pt-orb img { width: 100%; height: auto; display: block; }

/* contenido */
.pt-contenido { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
                padding: 86px 20px clamp(26px, 5vh, 54px); pointer-events: none; text-align: center; opacity: calc(1 - var(--pt-z, 0) * 2.2); }
.pt-contenido a, .pt-contenido button { pointer-events: auto; }
.pt-contenido .hero-alumnos { margin: 0; padding: 9px 18px 9px 14px; border-radius: 0; background: linear-gradient(180deg, rgba(1, 10, 19, .85), rgba(9, 20, 40, .85));
                              border: 1px solid var(--oro-osc); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .15), 0 0 24px rgba(10, 200, 185, .15); }
.pt-contenido .hero-alumnos b::after { color: var(--hex); }
.pt-contenido .hero-alumnos span:last-child { color: var(--oro); }
.pt-contenido .en-vivo { margin: 10px 0 0; }
.pt-arriba { display: flex; flex-direction: column; align-items: center; }

.pt-abajo { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1000px; }
/* estandarte rojo con bordes dorados (como las cintas de rango de LoL): dice en 1 segundo qué vendes y une con el rojo de la marca */
.pt-kicker { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 34px;
             font: 900 clamp(.7rem, 1.25vw, .86rem) 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; color: #fff;
             text-shadow: 0 1px 0 #3d0508, 0 0 12px rgba(255, 80, 80, .55);
             clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
.pt-kicker::before, .pt-kicker::after { content: ''; position: absolute; z-index: -1; clip-path: inherit; }
.pt-kicker::before { inset: 0; background: linear-gradient(180deg, #f0e6d2, #c8aa6e 45%, #785a28); }
.pt-kicker::after { inset: 2px 3px; background: linear-gradient(180deg, #d4212c 0%, #9b0f19 55%, #5c0710 100%); }
.pt-kicker b { color: #ffd9a0; font-weight: 900; }
.pt-kicker i { width: 6px; height: 6px; rotate: 45deg; background: #f0e6d2; box-shadow: 0 0 8px #fff; }
/* título: oro metálico con bisel, como los títulos del cliente de LoL */
.pt-abajo h1 { display: flex; flex-direction: column; align-items: center; margin: 0; }
.pt-tit { position: relative; display: block; font-family: 'Cinzel', 'Domine', serif; font-weight: 900; text-transform: uppercase; line-height: 1;
               letter-spacing: .02em; font-size: clamp(2rem, 5.6vw, 4.6rem);
               background: linear-gradient(180deg, #fffbef 0%, #f0e6d2 30%, #c8aa6e 52%, #8a6a32 64%, #c8aa6e 78%, #f5e7c4 100%);
               -webkit-background-clip: text; background-clip: text; color: #f0e6d2; -webkit-text-fill-color: transparent;   /* color real: Google cuenta el título (con color: transparent lo ignora) */
               filter: drop-shadow(0 2px 0 #2b1c06) drop-shadow(0 0 22px rgba(200, 170, 110, .35)) drop-shadow(0 8px 24px rgba(0, 0, 0, .9)); }
.pt-tit em { font-style: normal; color: #cdfafa; background: linear-gradient(180deg, #ffffff 0%, #cdfafa 40%, #0ac8b9 70%, #0a7b8a 100%); -webkit-background-clip: text; background-clip: text; }
.pt-tit .l { display: block; }
.pt-marco { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(520px, 86%); margin: 14px 0 10px; }
.pt-marco::before, .pt-marco::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--oro-osc), var(--oro)); }
.pt-marco::after { background: linear-gradient(90deg, var(--oro), var(--oro-osc), transparent); }
.pt-marco i { width: 10px; height: 10px; rotate: 45deg; border: 2px solid var(--oro); background: var(--hex); box-shadow: 0 0 12px var(--hex); }
.pt-sub { margin: 0; font-size: clamp(.84rem, 1.45vw, 1rem); font-weight: 700; letter-spacing: .08em; color: rgba(240, 230, 210, .85); text-shadow: 0 2px 10px #000; }

/* botones hexagonales estilo cliente de LoL */
.pt-botones { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: clamp(18px, 3vh, 28px); }
.pt-btn { --corte: 18px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 40px;
          text-decoration: none; font: 900 .95rem 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s, color .2s;
          clip-path: polygon(var(--corte) 0, calc(100% - var(--corte)) 0, 100% 50%, calc(100% - var(--corte)) 100%, var(--corte) 100%, 0 50%); }
.pt-btn::before, .pt-btn::after { content: ''; position: absolute; z-index: -1; clip-path: inherit; }
.pt-btn::before { inset: 0; }                                                 /* borde */
.pt-btn::after { inset: 2px; }                                                /* relleno */
.pt-btn.sec { color: var(--oro2); }
.pt-btn.sec::before { background: linear-gradient(180deg, #f0e6d2, #c8aa6e 40%, #785a28); }
.pt-btn.sec::after { background: linear-gradient(180deg, #1e2328, #0a1015); }
.pt-btn.sec:hover { color: #fff; }
.pt-btn.pri { min-height: 64px; padding: 0 46px; font-size: 1.02rem; color: #fff; text-shadow: 0 0 10px rgba(205, 250, 250, .9), 0 1px 0 #02303a; }
.pt-btn.pri::before { background: linear-gradient(180deg, #fff6dc, #c8aa6e 35%, #785a28 70%, #c8aa6e); }
.pt-btn.pri::after { background: radial-gradient(ellipse at 50% 120%, #2df5e4 0%, #0ac8b9 25%, #076b78 60%, #04303f 100%); }
.pt-btn.pri:hover { transform: translateY(-2px); }
.pt-brillo { position: absolute; inset: 2px; z-index: -1; clip-path: inherit; pointer-events: none; overflow: hidden; }
.pt-brillo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
                     transform: translateX(-120%); animation: pt-barrido 4.5s ease-in-out 3.5s infinite; }
@keyframes pt-barrido { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pt-pulso { position: absolute; inset: -14px -24px; z-index: -2; pointer-events: none; border-radius: 50%;
            background: radial-gradient(ellipse, rgba(10, 200, 185, .55), transparent 70%); animation: pt-pulso 2.6s ease-in-out infinite; }
@keyframes pt-pulso { 50% { opacity: .35; transform: scale(.92); } }
.pt-envoltura { position: relative; display: inline-flex; }

/* llegada: todo espera a .pt-go (cuando termina la intro ARISE) */
.pt-entra { opacity: 0; }
.pt-go .pt-entra { animation: pt-sube 1s cubic-bezier(.22, 1, .36, 1) calc(.7s + var(--k, 0) * .14s) forwards; }
@keyframes pt-sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pt-go .pt-emblema { opacity: 1; }
/* el título ya está pintado debajo de la intro ARISE (Google mide cuándo se ve el texto principal); al quitarse la intro ya está ahí */
.pt-go .pt-tit.pt-entra, .pt-tit.pt-entra { opacity: 1; animation: none; }

@media (max-width: 767px) {
  .pt-contenido { padding-top: 78px; }
  .pt-botones { width: 100%; max-width: 360px; gap: 12px; }
  .pt-btn, .pt-envoltura { width: 100%; }
  .pt-btn { padding: 0 20px; white-space: nowrap; font-size: .84rem; letter-spacing: .06em; }
  .pt-btn.pri { font-size: .9rem; padding: 0 22px; }
  .pt-emblema { width: 44vw; }
  .pt-kicker { letter-spacing: .12em; font-size: .64rem; padding: 8px 26px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .pt-entra, .pt-emblema img, .pt-brillo::before, .pt-pulso { animation: none !important; opacity: 1 !important; } }

/* resto de la página: animaciones que repintaban sin parar */
.brillo-texto, .ruta-luz, .marca-agua, .btn-epico { animation: none !important; }