/* ========================================
   PORTADA DE LANZAMIENTO - RAÍZ DEL DOMINIO (index.php)
   Logo y cuenta regresiva hasta la inauguración.
   Hoja propia: la portada no carga style.css (estilos globales de /site/).
   ======================================== */

/* Variables: colores tomados del logo (amarillo, naranja y rojo sobre negro) */
.portada-body {
    --portada-fondo: #000;
    --portada-texto: #fff6d6;
    --portada-tenue: #b9ab84;
    --portada-amarillo: #ffd21f;
    --portada-naranja: #ff8a00;
    --portada-tarjeta: #141109;
    --portada-borde: #3a2c0c;

    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background: var(--portada-fondo);
    color: var(--portada-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

.portada-main {
    width: 100%;
    max-width: 640px;
}

/* Logo: el JPG tiene fondo negro puro; "lighten" lo funde con la página */
.portada-hero {
    position: relative;
    width: min(78vw, 420px);
    margin: 0 auto;
}

/* Resplandor circular detrás del logo (una sombra sobre el JPG saldría cuadrada) */
.portada-hero::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 138, 0, .30) 0%, rgba(255, 138, 0, 0) 62%);
}

.portada-logo {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: lighten;
}

@media (prefers-reduced-motion: no-preference) {
    .portada-hero::before {
        animation: portada-brillo 4s ease-in-out infinite;
    }

    @keyframes portada-brillo {
        50% { opacity: .55; transform: scale(1.06); }
    }
}

.portada-fecha {
    margin: 20px 0 24px;
    font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    font-weight: 600;
}

.portada-fecha strong {
    color: var(--portada-amarillo);
}

/* Cuenta regresiva: 4 tarjetas que caben en 390px de ancho */
.portada-cuenta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 2.5vw, 16px);
    max-width: 520px;
    margin: 0 auto;
}

.portada-unidad {
    background: var(--portada-tarjeta);
    border: 1px solid var(--portada-borde);
    border-radius: 14px;
    padding: clamp(10px, 3vw, 18px) 4px;
}

.portada-numero {
    display: block;
    font-size: clamp(1.9rem, 9vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--portada-amarillo) 0%, var(--portada-naranja) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.portada-etiqueta {
    display: block;
    margin-top: 8px;
    font-size: clamp(.68rem, 2.4vw, .85rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--portada-tenue);
}