:root {
    --gold: #FFD700;
    --red: #C41E3A;
    --dark: #050505;
    --orange: #ff6a00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ===================================================== */
/* 🌫 BACKGROUND */
/* ===================================================== */

.bg {
    position: fixed;
    inset: 0;

    background: url('../../img/inicio.jpg') center/cover no-repeat;

    filter: brightness(1);

    z-index: -2;
}

.overlay {
    position: fixed;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.10),
        rgba(0,0,0,0.40)
    );

    z-index: -2;
}
/* ===================================================== */
/* HERO */
/* ===================================================== */

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 180px 20px 100px;
}

.hero-panel {
    max-width: 1100px;
    width: 100%;

    text-align: center;

    padding: 5rem 3rem;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(25,25,25,0.82),
            rgba(8,8,8,0.96)
        );

    border: 1px solid rgba(255,215,0,0.12);

    backdrop-filter: blur(5px);

    box-shadow:
        0 0 60px rgba(0,0,0,0.85),
        0 0 30px rgba(196,30,58,0.2);
}

/* ===================================================== */
/* STATUS */
/* ===================================================== */

.download-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;

    border-radius: 999px;

    background: rgba(34,197,94,0.12);

    border: 1px solid rgba(34,197,94,0.4);

    color: #4ade80;

    font-weight: 700;

    margin-bottom: 30px;
}

.status-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 15px #22c55e;
}

/* ===================================================== */
/* TITLES */
/* ===================================================== */

.logo {
    font-family: 'ParagonFont';

    font-size: clamp(4rem, 8vw, 7rem);

    color: #f3c46a;

    margin-bottom: 20px;

    text-shadow:
        0 0 20px rgba(255,215,0,0.35),
        0 0 50px rgba(255,140,0,0.15);
}

.subtitle {
    font-size: 1.5rem;

    color: #e5e7eb;

    margin-bottom: 25px;
    font-family: 'Morpheus', serif;
}

.desc {
    max-width: 850px;

    margin: auto;

    line-height: 1.8;

    color: #d1d5db;

    font-family: 'Arial', serif;
}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    margin-top: 40px;
}

.hero-btn {
    padding: 16px 28px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    transition: all .25s ease;

    border: 1px solid rgba(212,175,55,.5);

    cursor: pointer;
}

.hero-btn:hover {
    transform: translateY(-4px);
}

.hero-btn.primary {
    background:
        linear-gradient(
            180deg,
            #d92d4a,
            #8B0000
        );

    border: 2px solid #ffcc66;

    color: white;

    box-shadow:
        0 0 25px rgba(196,30,58,0.4);
}

.hero-btn.secondary {
    background: rgba(255,215,0,0.08);

    border: 2px solid rgba(255,215,0,0.25);

    color: var(--gold);
}

.hero-btn.discord {
    background: rgba(88,101,242,0.15);

    border: 2px solid rgba(88,101,242,0.3);

    color: #c7d2fe;
}

/* ===================================================== */
/* PANELS */
/* ===================================================== */

.ui-panel-box {
    max-width: 1200px;

    margin: 80px auto;

    padding: 70px 30px;

    border-radius: 25px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(20,20,20,0.82),
            rgba(5,5,5,0.94)
        );

    border: 1px solid rgba(255,215,0,0.08);

    backdrop-filter: blur(4px);

    box-shadow:
        0 0 40px rgba(0,0,0,0.65);
}

.ui-panel-box h2 {
    font-family: 'ParagonFont';

    font-size: clamp(3rem, 6vw, 5rem);

    color: #f3c46a;

    margin-bottom: 25px;
}

.ui-panel-box p {
    max-width: 900px;

    margin: auto;

    line-height: 1.8;

    color: #d1d5db;

    font-family: 'Morpheus', serif;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

.grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 25px;

    margin-top: 50px;
}

/* ===================================================== */
/* CARD */
/* ===================================================== */

.card {
    padding: 35px 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(25,25,25,0.95),
            rgba(10,10,10,0.98)
        );

    border: 1px solid rgba(255,215,0,0.08);

    transition: 0.35s ease;
}

.card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.75),
        0 0 25px rgba(196,30,58,0.2);
}

.card-icon {
    font-size: 3rem;

    color: var(--gold);

    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;

    font-size: 1.5rem;
}

.card p {
    margin-bottom: 25px;
}

.card-btn {
    display: inline-block;

    padding: 12px 24px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #FFD700,
            #ff9900
        );

    color: black;

    font-weight: 700;

    text-decoration: none;
}

/* ===================================================== */
/* STEPS */
/* ===================================================== */

.steps {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    margin-top: 50px;
}

.step {
    padding: 30px;

    border-radius: 16px;

    background: rgba(15,15,15,0.92);

    border: 1px solid rgba(255,215,0,0.08);

    font-weight: 700;
}

.step span {
    display: block;

    font-size: 2rem;

    color: var(--gold);

    margin-bottom: 15px;
}

/* ===================================================== */
/* CTA */
/* ===================================================== */

.final-cta {
    padding: 120px 20px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.8)
        );

    border-top: 1px solid rgba(255,215,0,0.08);
}

.final-cta h2 {
    font-family: 'ParagonFont';

    font-size: clamp(3rem, 7vw, 5rem);

    color: #f3c46a;

    margin-bottom: 20px;
}

.final-cta p {
    color: #d1d5db;

    margin-bottom: 40px;
}

.big-btn {
    display: inline-block;

    padding: 18px 40px;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #FFD700,
            #ff9900
        );

    color: black;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}

.big-btn:hover {
    transform: scale(1.05);

    box-shadow:
        0 0 30px rgba(255,215,0,0.35);
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 900px) {


    .hero-panel {
        padding: 3rem 1.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
        justify-content: center;
    }

}