/* ============================================
   Countdown Loja — Amarelo / Preto
   ============================================ */

:root {
    --amarelo:        #FBBF24;
    --amarelo-claro:  #FCD34D;
    --amarelo-escuro: #D97706;
    --amarelo-bg:     #FFFBEB;
    --preto:          #0F172A;
    --preto-claro:    #1E293B;
    --cinza:          #94A3B8;
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #000;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ============================================
   FUNDO UNIVERSO — Gradiente amarelo/preto + estrelas
   ============================================ */

/* Camada 1: Gradiente cósmico com "sol" e nebulosas */
.bg-pattern {
    position: fixed;
    inset: 0;
    background:
        /* Sol grande amarelo no canto superior direito */
        radial-gradient(ellipse 700px 500px at 85% 15%, rgba(251, 191, 36, 0.55) 0%, rgba(251, 191, 36, 0.2) 30%, transparent 70%),
        /* Nebulosa amarela difusa no canto inferior esquerdo */
        radial-gradient(ellipse 600px 400px at 10% 85%, rgba(217, 119, 6, 0.35) 0%, rgba(217, 119, 6, 0.1) 40%, transparent 75%),
        /* Brilho central sutil */
        radial-gradient(ellipse 800px 600px at 50% 50%, rgba(252, 211, 77, 0.08) 0%, transparent 60%),
        /* Base — gradiente diagonal preto/amarelo escuro */
        linear-gradient(135deg, #000000 0%, #0a0600 30%, #1a1100 60%, #2d1f00 100%);
    pointer-events: none;
    z-index: 0;
}

/* Camada 2: Estrelas pequenas (CSS puro com box-shadow múltiplo) */
.bg-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    box-shadow:
        /* Estrelas brancas pequenas espalhadas */
        100px 80px 0 0.5px rgba(255, 255, 255, 0.8),
        250px 150px 0 0.5px rgba(255, 255, 255, 0.6),
        400px 60px 0 0.5px rgba(255, 255, 255, 0.9),
        550px 200px 0 0.5px rgba(255, 255, 255, 0.5),
        700px 100px 0 0.5px rgba(255, 255, 255, 0.7),
        850px 250px 0 0.5px rgba(255, 255, 255, 0.6),
        1000px 50px 0 0.5px rgba(255, 255, 255, 0.8),
        1150px 180px 0 0.5px rgba(255, 255, 255, 0.5),
        1300px 90px 0 0.5px rgba(255, 255, 255, 0.7),
        150px 350px 0 0.5px rgba(255, 255, 255, 0.6),
        320px 420px 0 0.5px rgba(255, 255, 255, 0.8),
        480px 380px 0 0.5px rgba(255, 255, 255, 0.5),
        620px 480px 0 0.5px rgba(255, 255, 255, 0.7),
        780px 350px 0 0.5px rgba(255, 255, 255, 0.6),
        920px 450px 0 0.5px rgba(255, 255, 255, 0.8),
        1080px 380px 0 0.5px rgba(255, 255, 255, 0.5),
        1220px 470px 0 0.5px rgba(255, 255, 255, 0.7),
        80px 580px 0 0.5px rgba(255, 255, 255, 0.6),
        220px 650px 0 0.5px rgba(255, 255, 255, 0.8),
        380px 600px 0 0.5px rgba(255, 255, 255, 0.5),
        540px 680px 0 0.5px rgba(255, 255, 255, 0.7),
        700px 620px 0 0.5px rgba(255, 255, 255, 0.6),
        860px 700px 0 0.5px rgba(255, 255, 255, 0.8),
        1020px 640px 0 0.5px rgba(255, 255, 255, 0.5),
        1180px 720px 0 0.5px rgba(255, 255, 255, 0.7),
        50px 800px 0 0.5px rgba(255, 255, 255, 0.6),
        190px 880px 0 0.5px rgba(255, 255, 255, 0.8),
        350px 820px 0 0.5px rgba(255, 255, 255, 0.5),
        510px 900px 0 0.5px rgba(255, 255, 255, 0.7),
        670px 850px 0 0.5px rgba(255, 255, 255, 0.6),
        830px 920px 0 0.5px rgba(255, 255, 255, 0.8),
        990px 870px 0 0.5px rgba(255, 255, 255, 0.5),
        1150px 950px 0 0.5px rgba(255, 255, 255, 0.7),
        /* Estrelas amarelas (douradas) maiores */
        200px 120px 0 1px rgba(251, 191, 36, 0.9),
        600px 300px 0 1px rgba(251, 191, 36, 0.8),
        900px 180px 0 1px rgba(252, 211, 77, 0.9),
        1100px 400px 0 1px rgba(251, 191, 36, 0.8),
        300px 550px 0 1px rgba(252, 211, 77, 0.9),
        750px 500px 0 1px rgba(251, 191, 36, 0.8),
        1050px 600px 0 1px rgba(252, 211, 77, 0.9),
        450px 750px 0 1px rgba(251, 191, 36, 0.8),
        850px 800px 0 1px rgba(252, 211, 77, 0.9),
        120px 950px 0 1px rgba(251, 191, 36, 0.8);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite;
}

/* Camada 3: Estrelas grandes brilhantes (cintilando mais lento) */
.bg-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    box-shadow:
        /* Estrelas grandes amarelas brilhantes (com glow) */
        350px 200px 8px 1.5px rgba(251, 191, 36, 1),
        800px 400px 8px 1.5px rgba(252, 211, 77, 1),
        1150px 250px 8px 1.5px rgba(251, 191, 36, 1),
        500px 650px 8px 1.5px rgba(252, 211, 77, 1),
        950px 750px 8px 1.5px rgba(251, 191, 36, 1),
        250px 850px 8px 1.5px rgba(252, 211, 77, 1);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: twinkle-slow 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

@keyframes twinkle-slow {
    0%   { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.3); }
}

.container {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    text-align: center;
    overflow-x: hidden;
}

.countdown-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========== Header ========== */

.header {
    animation: fadeInDown 0.8s ease 0.1s both;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(251, 191, 36, 0.12);
    color: var(--amarelo);
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid var(--amarelo);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 3px;
    margin-bottom: 32px;
}

.badge-dot {
    width: 10px;
    height: 10px;
    background: var(--amarelo);
    border-radius: 50%;
    animation: pulse 1.5s ease infinite;
}

.titulo {
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.titulo-linha-1 {
    display: block;
    color: #fff;
    font-weight: 300;
    font-size: 0.6em;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 8px;
}

.titulo-linha-2 {
    display: block;
    color: var(--amarelo);
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.5);
}

.titulo-linha-3 {
    display: block;
    color: #fff;
    font-weight: 300;
    font-size: 0.5em;
    letter-spacing: 2px;
    margin-top: 8px;
    opacity: 0.85;
}

.subtitulo {
    color: var(--cinza);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========== Countdown ========== */

.countdown-wrap {
    width: 100%;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 18px);
    flex-wrap: wrap;
}

.bloco {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 28px);
    min-width: clamp(90px, 18vw, 160px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.bloco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--amarelo), var(--amarelo-claro));
}

.bloco:hover {
    transform: translateY(-4px);
    border-color: var(--amarelo);
    box-shadow: 0 16px 40px rgba(251, 191, 36, 0.15);
}

.numero {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    color: var(--amarelo);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    transition: transform 0.15s ease;
}

.numero.flip {
    animation: flip 0.3s ease;
}

.rotulo {
    margin-top: 8px;
    color: var(--cinza);
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.separador {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--amarelo);
    font-weight: 900;
    opacity: 0.4;
    animation: blink 1s ease infinite;
}

/* ========== Lançamento ========== */

.lancamento {
    animation: zoomIn 0.6s ease;
}

.lancamento-icone {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: bounce 1s ease infinite;
}

.lancamento h2 {
    font-size: clamp(2.5rem, 7vw, 4rem);
    color: var(--amarelo);
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: 2px;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.lancamento p {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 32px;
}

.btn-entrar {
    display: inline-block;
    background: var(--amarelo);
    color: var(--preto);
    padding: 18px 48px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}

.btn-entrar:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(251, 191, 36, 0.5);
    background: var(--amarelo-claro);
}

/* ========== Data info ========== */

.data-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--amarelo);
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 24px;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    animation: fadeInUp 0.8s ease 0.4s both;
}

/* ========== Footer ========== */

.footer {
    margin-top: auto;
    color: var(--cinza);
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ========== Animações ========== */

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes flip {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: var(--amarelo-claro); }
    100% { transform: scale(1); }
}

/* ========== Responsivo ========== */

@media (max-width: 600px) {
    .container { padding: 30px 16px; gap: 30px; width: 100%; max-width: 100%; }
    .separador { display: none; }
    .countdown {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .bloco {
        padding: 22px 12px;
        min-width: 0;
        width: 100%;
    }
    .numero { font-size: 2.6rem; }
    .rotulo { font-size: 0.7rem; letter-spacing: 1.5px; }
    .titulo { font-size: 2.5rem; }
    .badge { font-size: 0.75rem; padding: 8px 16px; letter-spacing: 2px; }
    .data-info { font-size: 0.9rem; padding: 10px 16px; }
}

@media (max-width: 380px) {
    .countdown { gap: 10px; }
    .bloco { padding: 18px 8px; }
    .numero { font-size: 2.2rem; }
    .titulo { font-size: 2.2rem; }
}

@media (min-width: 1200px) {
    .titulo { font-size: 6rem; }
    .bloco { padding: 36px 32px; min-width: 180px; }
    .numero { font-size: 5.5rem; }
}