:root {
    /* --- Paleta Whoville nocturno --- */
    --pine-950: #081911;   /* fondo base */
    --pine-800: #12271b;   /* tarjeta */
    --pine-700: #1a3527;   /* borde sutil / hover */
    --fur-500:  #3f9463;   /* verde Grinch, acento principal */
    --fur-300:  #86cba3;   /* verde claro para glow/hover */
    --santa-600:#a61f2b;   /* rojo profundo, uso puntual */
    --gold-400: #c9a227;   /* dorado, luces de Whoville */
    --snow-100: #f4f1e6;   /* texto principal */
    --sage-400: #93a89b;   /* texto secundario */
}

* { box-sizing: border-box; }

body {
    font-family: 'Work Sans', sans-serif;
    background-color: var(--pine-950);
    color: var(--snow-100);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 50% 0%, #163524 0%, transparent 55%),
        radial-gradient(circle at 85% 90%, rgba(166,31,43,0.10) 0%, transparent 45%);
}

/* Nevada sutil, solo CSS, sin nodos extra */
.snowfall {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 10% 20%, rgba(244,241,230,0.55) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 70% 60%, rgba(244,241,230,0.4) 50%, transparent 51%),
        radial-gradient(1.8px 1.8px at 40% 80%, rgba(244,241,230,0.35) 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 90% 30%, rgba(244,241,230,0.45) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 25% 55%, rgba(244,241,230,0.3) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 260px 260px, 320px 320px, 220px 220px, 300px 300px, 240px 240px;
    animation: snowfall 55s linear infinite;
}

@keyframes snowfall {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 180px 500px, -220px 600px, 140px 460px, -180px 520px, 200px 480px; }
}

@media (prefers-reduced-motion: reduce) {
    .snowfall { animation: none; }
}

.container {
    width: 90%;
    max-width: 500px;
    background-color: var(--pine-800);
    padding: 40px 30px;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--pine-700);
    text-align: center;
    position: relative;
    z-index: 1;
}

.container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--gold-400), var(--fur-500) 45%, var(--santa-600));
}

/* --- Barra de progreso del embudo (Paso X de 5) --- */
.progress-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 10px;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: var(--pine-700);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 22px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-400), var(--fur-500));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 14px;
}

h1, h2.page-title {
    font-family: 'Fraunces', serif;
    color: var(--snow-100);
    font-weight: 800;
    font-size: 2rem;
    margin: 0 0 12px 0;
    letter-spacing: 0.3px;
}

h1 span {
    color: var(--fur-500);
}

p.subtitle {
    color: var(--sage-400);
    font-size: 0.95rem;
    margin-bottom: 28px;
    line-height: 1.6;
}

.btn-nav {
    display: inline-block;
    background-color: var(--fur-500);
    color: #08150d;
    padding: 16px 35px;
    font-weight: 600;
    font-family: inherit;
    font-size: 1.05rem;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 18px rgba(63, 148, 99, 0.35);
    width: 80%;
}

.btn-nav:hover {
    background-color: var(--fur-300);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(134, 203, 163, 0.45);
}

.btn-nav.is-locked {
    background-color: var(--pine-700);
    color: var(--sage-400);
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.btn-nav.is-locked:hover {
    transform: none;
}

.ad-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sage-400);
    opacity: 0.7;
    margin: 22px 0 8px;
}

/* --- Tarjetas Direct Link: diseño propio, tamaño real garantizado --- */
.ad-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    background-color: var(--pine-950);
    border: 1px solid var(--pine-700);
    border-radius: 12px;
    text-decoration: none;
    text-align: left;
    transition: all 0.2s ease;
}

.ad-card:hover {
    border-color: var(--fur-500);
    background-color: #0e2016;
}

.ad-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-400), var(--santa-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ad-card__text {
    flex: 1;
    min-width: 0;
}

.ad-card__title {
    color: var(--snow-100);
    font-weight: 600;
    font-size: 0.92rem;
    margin: 0 0 2px;
}

.ad-card__subtitle {
    color: var(--sage-400);
    font-size: 0.8rem;
    margin: 0;
}

/* --- Pantallas de bloqueo (escritorio / AdBlock detectado) --- */
.gate-screen {
    display: none;
    width: 90%;
    max-width: 420px;
    background-color: var(--pine-800);
    padding: 44px 32px;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--pine-700);
    text-align: center;
    position: relative;
    z-index: 1;
}

.gate-screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--gold-400), var(--fur-500) 45%, var(--santa-600));
}

.gate-screen .gate-icon {
    font-size: 2.6rem;
    margin-bottom: 18px;
}

.gate-screen h2 {
    font-family: 'Fraunces', serif;
    color: var(--snow-100);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 12px;
}

.gate-screen p {
    color: var(--sage-400);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 22px;
}