/* ============================================================
 *  Space Paintball — Portada
 *  assets/css/portada.css
 * ------------------------------------------------------------
 *  Carga DESPUÉS de estilos.css —de donde toma las tipografías de
 *  marca y las variables— y ANTES de personalizado.css.
 *
 *  DOS REGLAS QUE ATRAVIESAN TODO EL ARCHIVO:
 *
 *  1) Ninguna animación es obligatoria. Todas viven dentro de un
 *     @media (prefers-reduced-motion: no-preference). Quien tenga
 *     el movimiento desactivado en su sistema ve la página quieta y
 *     completa, no vacía. Por eso los bloques que se revelan al
 *     bajar arrancan VISIBLES y el JavaScript los esconde: si el
 *     script no carga, se ve todo.
 *
 *  2) El estrobo del hero es lento a propósito: cuatro segundos por
 *     ciclo y sin apagones. Un parpadeo rápido sobre texto grande
 *     marea y, en el peor de los casos, es un riesgo real para
 *     personas fotosensibles.
 * ============================================================ */

/* ============================================================
   1 · HERO
   ============================================================ */
.hero {
    position: relative;
    /* 100svh usa la altura real del visor en celular, sin contar la
       barra del navegador que aparece y desaparece al desplazar.
       El min() evita que en una pantalla muy alta el hero empuje
       todo lo demás fuera de vista. */
    min-height: min(100svh, 900px);
    margin: -28px var(--sp-sangria) 0;
    padding: 80px var(--sp-sangria-pad) 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background: #04122a;
}

.hero__fondo {
    position: absolute;
    inset: 0;
}
.hero__fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dos capas: un degradado que oscurece de arriba abajo para que el
   encabezado del sitio se lea, y un tinte azul de marca encima. */
.hero__velo {
    position: absolute;
    inset: 0;
    /* Más liviano que antes: la foto tiene que verse. El texto no
       depende de este velo para leerse —el panel del centro tiene su
       propio fondo—, así que acá alcanza con bajar el brillo lo
       justo para que el encabezado blanco del sitio no se pierda. */
    /* Tres capas. El radial del centro es el que reemplaza al panel:
       oscurece justo donde va el texto y se desvanece sin borde, así
       que da contraste sin dibujar una caja que se pueda "ver". */
    background:
        radial-gradient(ellipse 70% 55% at 50% 48%, rgba(3,14,33,.72) 0%, rgba(3,14,33,.35) 55%, rgba(3,14,33,0) 100%),
        linear-gradient(180deg, rgba(4,18,42,.58) 0%, rgba(4,18,42,.10) 42%, rgba(4,18,42,.68) 100%),
        linear-gradient(135deg, rgba(0,93,182,.20) 0%, rgba(0,93,182,0) 62%);
}

/* SIN CAJA, a propósito.
   Antes esto era un recuadro translúcido con borde. El problema es
   que el recuadro se ajustaba al lema más largo y, al cambiar de
   frase, el propio borde delataba cuánto se movía el texto. Sin
   borde no hay con qué comparar y el movimiento deja de existir para
   el ojo.

   La legibilidad sobre la foto la resuelve ahora el degradado radial
   del velo, que oscurece el centro sin dibujar ningún filo. */
.hero__panel {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 0 clamp(4px, 2vw, 20px);
}

/* --- Los lemas ---
   Los dos están en el HTML, apilados en la misma celda de una grilla
   de una sola casilla. Así el bloque mide lo que mide el más largo y
   no salta de alto cada vez que cambian. */
.hero__lemas {
    display: grid;
    margin: 0 0 20px;
    font-weight: 400;
}

/* Los lemas ocupan la misma celda, así que la caja mide lo que mide
   el más largo y no salta de alto al cambiar.

   OJO CON EL ESTADO INICIAL: los no activos se esconden desde el CSS,
   no desde JavaScript. Antes dependían de un atributo que ponía el
   script, y en el instante entre que se pintaba el HTML y arrancaba
   el JavaScript se veían los seis superpuestos. Ese era el pisón del
   arranque. Ahora, si el script nunca corre, se ve solo el primero. */
.hero__lema {
    grid-area: 1 / 1;
    font-family: var(--sp-display);
    /* Un par de puntos más chico que antes. En celular el bloque se
       ensanchaba porque el tamaño grande más el espaciado entre
       letras empujaba el panel. */
    font-size: clamp(1.55rem, 4.6vw, 3.5rem);
    line-height: 1.14;
    letter-spacing: clamp(1px, .35vw, 4px);
    text-transform: uppercase;
    color: #fff;
    /* Sin panel detrás, la sombra dura es lo que separa el texto de
       la foto. Va en dos capas: una cerrada para el filo y otra
       abierta para despegarlo del fondo. */
    text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 0 34px rgba(3,14,33,.85);
    visibility: hidden;
    opacity: 0;
}
.hero__lema--activo {
    visibility: visible;
    opacity: 1;
}

/* --- Decodificador ---
   Se probó darle a cada carácter una celda de ancho fijo para que el
   renglón no se moviera. Resolvía el temblor pero desarmaba las
   palabras: Space Age tiene letras muy angostas y muy anchas, y
   forzarlas todas al mismo ancho las separa de manera despareja.

   La solución es otra: el texto va suelto y centrado, sin caja
   alrededor. Si nada encierra al renglón, que se ensanche unos
   píxeles mientras las letras cambian no se nota — no hay ningún
   borde con el cual compararlo.

   Mientras una letra sigue revuelta se pinta en amarillo con brillo,
   para que se lea como una señal resolviéndose y no como un error de
   carga. Al asentarse vuelve a blanco. La transición es corta: cada
   letra se resuelve por su cuenta, y si fuera lenta el cambio de
   color se arrastraría por detrás de un texto ya legible. */
.hero__lema .cifra {
    color: var(--sp-amarillo);
    text-shadow: 0 0 18px rgba(249, 215, 13, .55);
    transition: color .12s linear, text-shadow .12s linear;
}

/* .sr-only se movió a estilos.css: la usa el pie, que sale en todas
   las páginas, no solo acá. */

/* La "A" del logotipo es amarilla: se recoge acá con una palabra
   destacada por línea. */
.hero__lema em {
    font-style: normal;
    color: var(--sp-amarillo);
}

.hero__bajada {
    max-width: 620px;
    margin: 0 auto 30px;
    color: #dce6f5;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
    font-size: clamp(.98rem, 1.6vw, 1.12rem);
    line-height: 1.7;
}

.hero__acciones {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

/* --- Botones del hero ---
   Propios y no los .btn del tema, porque van sobre fondo oscuro y
   necesitan otro contraste. */
.btn-h {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    font-family: var(--sp-texto);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn-h--cta {
    background: var(--sp-amarillo);
    color: #10203a !important;
}
.btn-h--cta:hover {
    background: #ffe14a;
    transform: translateY(-2px);
}
.btn-h--fantasma {
    border-color: rgba(255, 255, 255, .55);
    color: #fff !important;
}
.btn-h--fantasma:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}

/* --- Indicador de desplazamiento --- */
/* CENTRADO SIN TRANSFORM, a propósito.
   Antes usaba left:50% + transform:translateX(-50%). El problema es
   que este mismo elemento lleva la animación de entrada, y esa
   animación termina en transform:none con fill both — o sea que al
   terminar PISA el translateX y el bloque queda con su borde
   izquierdo en el centro, corrido media caja a la derecha.

   Una animación siempre gana sobre una declaración normal, así que
   no era cuestión de especificidad: había que dejar de centrar con
   transform. Con left/right en 0 y margen automático el centrado no
   depende de nada que la animación pueda tocar.

   En un celular con "Reducir movimiento" activado esto no se veía,
   porque la animación entera está dentro de un
   prefers-reduced-motion y nunca llegaba a correr. */
.hero__scroll {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    width: max-content;
    max-width: 90%;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9fb4d4 !important;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}
.hero__flecha {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ============================================================
   2 · DATOS
   ============================================================ */
.datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 var(--sp-sangria);
    padding: 0 var(--sp-sangria-pad);
    background: var(--sp-line);
    border-bottom: 1px solid var(--sp-line);
}
.datos__item {
    background: #fff;
    padding: 26px 18px;
    text-align: center;
}
.datos__num {
    display: block;
    font-family: var(--sp-display);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-azul);
}
.datos__pie {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--sp-muted);
}

/* ============================================================
   3 · LA HISTORIA
   ============================================================ */
.lore {
    padding: 72px 0 24px;
    scroll-margin-top: 90px;
}

.lore__cabecera {
    text-align: center;
    margin-bottom: 44px;
}

.lore__eyebrow {
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sp-azul);
}
.lore__eyebrow--claro { color: var(--sp-amarillo); }

.lore__titulo {
    margin: 0 0 18px;
    font-family: var(--sp-display);
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.lore__separador {
    display: block;
    width: 259px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: .7;
}

/* 760px da unos 78 caracteres por línea. Es el techo cómodo para
   lectura larga; más ancho y el ojo pierde el renglón al volver. */
.lore__texto {
    max-width: 760px;
    margin: 0 auto;
}

.lore__parrafo {
    margin: 0 0 22px;
    font-size: 1.06rem;
    line-height: 1.85;
    color: #2b3648;
    /* Justificado con guionado. El guionado no es opcional acá: sin
       él, el justificado en español abre huecos enormes entre
       palabras porque las nuestras son largas. */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.lore__parrafo em {
    font-style: italic;
    color: var(--sp-navy);
}

/* Capitular en el primer párrafo. Es el guiño editorial que separa
   una historia de un texto de relleno. */
.lore__parrafo--capital::first-letter {
    float: left;
    font-family: var(--sp-display);
    font-size: 3.4rem;
    line-height: .82;
    padding: 4px 12px 0 0;
    color: var(--sp-azul);
}

.lore__cierre {
    margin: 34px 0 0;
    padding: 22px 26px;
    border-left: 3px solid var(--sp-amarillo);
    background: var(--sp-bg);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--sp-navy);
}

/* ============================================================
   4 · LOS MUNDOS
   ============================================================ */
.mundos {
    padding: 64px 0 72px;
}
.mundos__cabecera {
    text-align: center;
    margin-bottom: 36px;
}
.mundos__titulo {
    margin: 0 0 12px;
    font-family: var(--sp-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}
.mundos__intro {
    max-width: 620px;
    margin: 0 auto;
    color: var(--sp-muted);
}

.mundos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.mundo {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--sp-navy);
    color: #fff;
    isolation: isolate;
}

.mundo__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* El degradado se dibuja siempre, haya foto o no: sin foto queda un
   azul con profundidad y la tarjeta no se ve rota. */
.mundo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(4,18,42,.25) 0%, rgba(4,18,42,.55) 45%, rgba(4,18,42,.94) 100%);
}

.mundo__cuerpo {
    margin-top: auto;
    padding: 22px 22px 24px;
}

.mundo__num {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sp-display);
    font-size: .95rem;
    letter-spacing: 2px;
    color: var(--sp-amarillo);
}
.mundo--humanos .mundo__num { color: #7fb4ee; }

.mundo__nombre {
    margin: 0 0 8px;
    font-family: var(--sp-display);
    font-size: 1.12rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

.mundo__desc {
    margin: 0;
    font-size: .92rem;
    line-height: 1.65;
    color: #c7d3e6;
}

/* ============================================================
   5 · LOS BANDOS — franja a sangre completa
   ============================================================ */
.bandos {
    margin: 0 var(--sp-sangria);
    padding: 64px var(--sp-sangria-pad) 68px;
    background: var(--sp-azul);
    color: #fff;
    text-align: center;
}

.bandos__cabecera { margin-bottom: 34px; }

.bandos__titulo {
    margin: 0 0 12px;
    font-family: var(--sp-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}
.bandos__intro {
    max-width: 640px;
    margin: 0 auto;
    color: #c7d3e6;
}

.bandos__par {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.bandoc__escudo {
    width: 118px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
}
.bandoc__nombre {
    margin: 0 0 8px;
    font-family: var(--sp-display);
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.bandoc--aliens .bandoc__nombre { color: var(--sp-amarillo); }
.bandoc__desc {
    margin: 0;
    font-size: .93rem;
    line-height: 1.7;
    color: #c7d3e6;
}

.bandos__vs {
    font-family: var(--sp-display);
    font-size: 2.2rem;
    letter-spacing: 2px;
    color: var(--sp-amarillo);
}

.bandos__accion { margin: 34px 0 0; }

/* ============================================================
   6 · COMUNIDAD  ·  7 · CIERRE
   ============================================================ */
.comunidad,
.cierre {
    padding: 66px 0;
    text-align: center;
}
.cierre { padding-top: 24px; }

.comunidad__titulo,
.cierre__titulo {
    margin: 0 0 12px;
    font-family: var(--sp-display);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}
.cierre__titulo { margin-top: 26px; }

.comunidad__intro,
.cierre__texto {
    max-width: 580px;
    margin: 0 auto 24px;
    color: var(--sp-muted);
    line-height: 1.7;
}

.comunidad__acciones,
.cierre__acciones {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

/* Los botones del hero sobre fondo claro necesitan borde propio. */
.comunidad .btn-h--fantasma,
.cierre .btn-h--fantasma {
    border-color: var(--sp-navy);
    color: var(--sp-navy) !important;
}
.comunidad .btn-h--fantasma:hover,
.cierre .btn-h--fantasma:hover {
    background: rgba(11, 30, 63, .07);
}

.comunidad__nota {
    margin: 18px 0 0;
    font-size: .88rem;
    color: var(--sp-muted);
}

/* ============================================================
   ANIMACIÓN
   ------------------------------------------------------------
   Todo lo que se mueve vive acá dentro. Fuera de este bloque la
   página es completamente estática y se ve igual de terminada.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* El lema ya no parpadea por opacidad. El efecto lo hace ahora el
       decodificador de assets/js/app.js, que revuelve las letras y las
       va resolviendo. Se queda solo el halo fijo, que le da presencia
       al texto sobre la foto. */
    .hero__lema--activo {
        text-shadow: 0 2px 4px rgba(0,0,0,.55),
                     0 0 34px rgba(3,14,33,.85),
                     0 0 30px rgba(249, 215, 13, .22);
    }

    /* --- Entrada del hero --- */
    @keyframes subir {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: none; }
    }
    .hero__panel  { animation: subir .8s ease both; }
    .hero__scroll { animation: subir .8s ease .35s both; }

    @keyframes flotar {
        0%, 100% { transform: rotate(45deg) translate(0, 0); }
        50%      { transform: rotate(45deg) translate(3px, 3px); }
    }
    .hero__flecha { animation: flotar 1.9s ease-in-out infinite; }

    /* --- Acercamiento lentísimo del fondo ---
       12 segundos para un 6% de escala. Se percibe como profundidad,
       no como movimiento. */
    @keyframes acercar {
        from { transform: scale(1); }
        to   { transform: scale(1.06); }
    }
    .hero__fondo img {
        animation: acercar 12s ease-out both;
    }

    /* --- Revelado al desplazar ---
       Arranca visible. app.js marca data-oculto y el navegador lo
       anima cuando el bloque entra en pantalla. Si el script no
       corre, no hay data-oculto y todo se ve desde el principio. */
    [data-revelar][data-oculto] {
        opacity: 0;
        /* translate3d y no translateY: obliga a Safari de iOS a
           componer el elemento en la GPU. Con translateY plano la
           transición se saltaba en varios celulares. */
        transform: translate3d(0, 26px, 0);
    }
    [data-revelar] {
        transform: translate3d(0, 0, 0);
        transition: opacity .7s ease, transform .7s ease;
        transition-delay: var(--retraso, 0ms);
        will-change: opacity, transform;
    }
}

/* ============================================================
   RESPONSIVE — mismos cortes que el resto del sitio
   ============================================================ */
@media (max-width: 900px) {
    .datos {
        grid-template-columns: 1fr 1fr;
    }
    .bandos__par {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .bandos__vs { font-size: 1.6rem; }
}

@media (max-width: 600px) {
    .hero {
        min-height: 100svh;
        padding: 60px var(--sp-borde) 84px;
    }
    .hero__panel {
        padding: 0 4px;
    }
    .hero__acciones .btn-h {
        width: 100%;
        text-align: center;
    }
    .lore { padding-top: 52px; }
    .lore__parrafo {
        font-size: 1rem;
        /* En una columna de 340px el justificado deja ríos de espacio
           en blanco entre palabras. Alineado a la izquierda se lee
           mejor. */
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
    .lore__parrafo--capital::first-letter { font-size: 2.9rem; }
    .mundo { min-height: 260px; }
}