body{
    margin:0;
    min-height:100vh;

    background:
        radial-gradient(circle at top left,#312e81 0%,transparent 35%),
        radial-gradient(circle at top right,#0f766e 0%,transparent 35%),
        radial-gradient(circle at bottom center,#7c2d12 0%,transparent 40%),
        #020617;

    font-family:Arial,sans-serif;
    color:white;

    display:flex;
    flex-direction:column;
    align-items:center;

    overflow-x:hidden;
}

h2{
    margin-top:40px;
    margin-bottom:10px;
    font-size:42px;
    text-align:center;
}

.container{
    position:relative;
    width:420px;
    height:420px;
    margin-top:20px;

    animation:fadeUp .8s ease;
}

.center{
    position:absolute;
    top:50%;
    left:50%;

    width:120px;
    height:120px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #8b5cf6,
        #ec4899
    );

    border:4px solid rgba(255,255,255,.15);

    box-shadow:
        0 0 25px rgba(59,130,246,.6),
        0 0 50px rgba(139,92,246,.5),
        0 0 90px rgba(236,72,153,.35);

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

    font-size:34px;
    font-weight:800;
    letter-spacing:2px;

    z-index:10;

    animation:pulseLogo 3s infinite ease-in-out;
}

.link{
    position:absolute;
    top:50%;
    left:50%;

    width:64px;
    height:64px;

    border-radius:50%;

    background:rgba(17,24,39,.85);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.35);

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

    transform:translate(-50%,-50%);

    transition:
        transform .9s cubic-bezier(0.65,0,0.35,1),
        box-shadow .3s;

    z-index:1;
}

.link i{
    font-size:26px;
}

.link:hover{
    box-shadow:
        0 0 20px rgba(255,255,255,.15),
        0 0 40px rgba(59,130,246,.25);
}



.footer{
    margin-top:40px;
    margin-bottom:20px;
    color:#64748b;
    font-size:14px;
}

.btn-instagram i{
    color:#c13584;
    text-shadow:0 0 12px rgba(193,53,132,.7);
}

.btn-facebook i{
    color:#1877F2;
    text-shadow:0 0 12px rgba(24,119,242,.7);
}

.btn-email i{
    color:#f97316;
    text-shadow:0 0 12px rgba(249,115,22,.7);
}

.btn-google i{
    color:#4285F4;
    text-shadow:0 0 12px rgba(66,133,244,.7);
}

.btn-pix i{
    color:#059669;
    text-shadow:0 0 12px rgba(5,150,105,.7);
}

.btn-qrcode i{
    color:#7c3aed;
    text-shadow:0 0 12px rgba(124,58,237,.7);
}

.btn-localizacao i{
    color:#059669;
    text-shadow:0 0 12px rgba(5,150,105,.7);
}

.btn-telefone i,
.btn-ligar i{
    color:#16a34a;
    text-shadow:0 0 12px rgba(22,163,74,.7);
}
/* =========================
   OVERLAY
========================= */
#overlay{
    position:fixed;
    inset:0;

    background:rgba(2,6,23,.75);

    backdrop-filter:blur(12px);

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:998;
}

/* =========================
   MODAL
========================= */
.auth-modal{
    position:fixed;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    transform:translateY(25px) scale(.96);

    transition:.35s ease;

    z-index:999;
}

.auth-modal.active,
#overlay.active{
    opacity:1;
    visibility:visible;
}

.auth-modal.active{
    transform:translateY(0) scale(1);
}

/* =========================
   CARD
========================= */
.auth-card{

    width:380px;
    max-width:90vw;

    padding:32px;

    border-radius:24px;

    background:rgba(15,23,42,.85);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(59,130,246,.15);

    position:relative;

    text-align:center;

    animation:cardFloat 5s ease-in-out infinite;
}

@keyframes cardFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
}
.auth-card::before{
    content:"";

    position:absolute;

    top:-80px;
    left:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(59,130,246,.15);

    filter:blur(50px);

    pointer-events:none;
}

.auth-card::after{
    content:"";

    position:absolute;

    bottom:-80px;
    right:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(139,92,246,.15);

    filter:blur(50px);

    pointer-events:none;
}

/* =========================
   FECHAR
========================= */
.close-btn{

    position:absolute;
    top:14px;
    right:14px;

    width:40px;
    height:40px;

    border:none;
    border-radius:12px;

    background:rgba(255,255,255,.05);

    color:#fff;

    cursor:pointer;

    transition:.3s;
}

.close-btn:hover{

    background:rgba(239,68,68,.15);

    color:#ef4444;

    transform:rotate(90deg);
}

/* =========================
   CABEÇALHO
========================= */
.auth-header{
    margin-bottom:25px;
}

.logo{

    font-size:34px;
    font-weight:800;

    letter-spacing:3px;

    background:linear-gradient(
        135deg,
        #60a5fa,
        #8b5cf6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    margin-bottom:12px;
}

.auth-header h1{

    margin:0;

    font-size:28px;
    font-weight:700;

    color:#fff;
}

.auth-header p{

    margin-top:10px;

    color:#94a3b8;

    font-size:15px;
    line-height:1.5;
}

/* =========================
   GOOGLE LOGIN
========================= */
.auth-body{

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

    margin-top:10px;
    margin-bottom:20px;
}

.g_id_signin{

    display:flex;
    justify-content:center;

    transform:scale(1.05);
}

/* =========================
   RODAPÉ
========================= */
.auth-footer{

    margin-top:18px;

    color:#64748b;

    font-size:13px;

    line-height:1.5;
}
.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin-top:20px;

    padding:16px 32px;

    border:none;
    border-radius:16px;

    cursor:pointer;

    font-size:18px;
    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed,
        #ec4899
    );

    background-size:300% 300%;

    box-shadow:
        0 10px 30px rgba(37,99,235,.35),
        0 0 40px rgba(124,58,237,.25);

    transition:.3s;

    animation:gradientMove 6s ease infinite;
}
.btn:hover{
    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 15px 40px rgba(37,99,235,.45),
        0 0 60px rgba(236,72,153,.35);
}
.btn i{
    font-size:22px;
}
@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}
.btn span{
    transition:.3s;
}

.btn:hover span{
    transform:translateX(6px);
}