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

body{
    background:#000;
    color:white;
    font-family:'Inter', sans-serif;

    /* CLAVE: evitar cortes */
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;
}

/* CONTENEDOR GENERAL */
.container{
    width:100%;
    max-width:1000px;

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

    gap:20px; /* reemplaza margins grandes */
    text-align:center;
}

/* ================= LOGO ================= */

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.logo-img{
    width:100%;
    max-width:clamp(180px, 35vw, 420px); /* escala automático */
    height:auto;
    object-fit:contain;
}

/* ================= SERVICES ================= */

.services{
    color:#8b6b5c;
    letter-spacing:2px;
    font-size:clamp(12px, 1.5vw, 16px);
}

/* ================= TEXTO PRINCIPAL ================= */

.main-text{
    font-size:clamp(16px, 2.2vw, 26px);
    font-weight:900;
    line-height:1.4;
    max-width:700px;
    text-wrap:balance;
}

/* ================= CONTADOR ================= */

.countdown{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.time-box{
    border:1px solid #8b6b5c;
    border-radius:6px;

    padding:10px 14px;
    min-width:70px;
}

.time-box span{
    font-size:clamp(18px, 2vw, 26px);
    font-weight:600;
    display:block;
}

.time-box small{
    color:#8b6b5c;
    font-size:10px;
    letter-spacing:1.5px;
}

.socials{
margin-top:60px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.socials a{
color:#8b6b5c;
border:1px solid #8b6b5c;
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:18px;
transition: all 0.3s ease;
text-decoration:none;
}

.socials a:hover{
background:#8b6b5c;
color:#000;
transform:translateY(-5px);
box-shadow:0 0 10px rgba(139,107,92,0.6);
}



/* ================= FOOTER ================= */

.footer{
    color:#8b6b5c;
    font-size:clamp(12px, 1.5vw, 15px);
    line-height:1.5;
    max-width:600px;
}

/* ================= AJUSTE EXTRA PARA PANTALLAS MUY CHICAS ================= */

@media (max-height: 700px){
    .container{
        gap:15px;
    }

    .main-text{
        font-size:16px;
    }

    .time-box{
        padding:8px 10px;
    }
    .socials{
gap:15px;
margin-top:40px;
}

.socials a{
width:40px;
height:40px;
font-size:16px;
}

}