/* ==================================================
FIX TOTAL RESPONSIVE - REEMPLAZA TODO TU style.css
Corrige:
✔ textos montados
✔ footer encima de iconos
✔ barras laterales móviles
✔ altura real celular
✔ spacing limpio
✔ overflow horizontal
✔ contador adaptable
✔ safari / android / ios
================================================== */

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

html{
width:100%;
overflow-x:hidden;
scroll-behavior:smooth;
}

body{
width:100%;
min-height:100vh;
min-height:100dvh;
overflow-x:hidden;
font-family:'Montserrat',sans-serif;
background:#081c24;
color:#fff;
position:relative;
}

/* ================= FONDO ================= */

.background{
position:fixed;
inset:-10%;
z-index:-10;

background:
radial-gradient(circle at 20% 20%, rgba(139,209,46,.20), transparent 18%),
radial-gradient(circle at 80% 30%, rgba(139,209,46,.16), transparent 22%),
radial-gradient(circle at 50% 80%, rgba(139,209,46,.12), transparent 18%),
linear-gradient(135deg,#0f313d,#071920,#102c35,#0f313d);

background-size:300% 300%;
animation:bgFlow 15s ease infinite;
}

.background::after{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
background-size:28px 28px;
opacity:.12;
animation:stars 25s linear infinite;
}

/* luz mouse */
.mouse-light{
position:fixed;
width:340px;
height:340px;
border-radius:50%;
pointer-events:none;
z-index:-8;
background:radial-gradient(circle,
rgba(139,209,46,.16),
rgba(139,209,46,.08),
transparent 70%);
transform:translate(-50%,-50%);
filter:blur(22px);
}

/* ================= CONTENIDO ================= */

.hero{
width:100%;
max-width:1200px;
margin:auto;
min-height:100vh;
min-height:100dvh;

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

text-align:center;
padding:40px 20px 90px;
position:relative;
z-index:5;
}

/* logo */
.logo{
width:120px;
max-width:55vw;
margin-bottom:18px;
object-fit:contain;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
animation:floatLogo 4s ease-in-out infinite;
}

/* titulo */
.title{
font-size:clamp(2rem,4vw,5.5rem);
line-height:1.05;
font-weight:900;
letter-spacing:2px;
max-width:100%;
word-break:break-word;
text-wrap:balance;
padding:0 8px;
text-shadow:0 0 24px rgba(139,209,46,.20);
}

/* subtitulo */
.subtitle{
margin-top:18px;
font-size:clamp(.95rem,1vw,1.25rem);
line-height:1.5;
max-width:760px;
color:#e6e6e6;
padding:0 10px;
}

/* contador */
.countdown{
margin-top:30px;
display:grid;
grid-template-columns:repeat(4,minmax(90px,1fr));
gap:14px;
width:min(100%,520px);
}

.box{
padding:16px 10px;
border-radius:18px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(10px);
box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.box span{
display:block;
font-size:clamp(1.4rem,4vw,2.1rem);
font-weight:800;
color:#8bd12e;
line-height:1.1;
}

.box small{
font-size:.82rem;
color:#ddd;
margin-top:4px;
display:block;
}

/* boton */
.btn-contact{
margin-top:28px;
padding:14px 34px;
min-width:220px;
max-width:100%;
border-radius:999px;
background:linear-gradient(90deg,#8bd12e,#6eac18);
color:#fff;
font-weight:700;
font-size:1rem;
text-decoration:none;
box-shadow:0 14px 26px rgba(139,209,46,.20);
transition:.25s ease;
}

.btn-contact:hover{
transform:translateY(-4px) scale(1.02);
}

/* redes */
.socials{
margin-top:28px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.socials a{
width:42px;
height:42px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
background:rgba(255,255,255,.08);
color:#fff;
transition:.25s;
}

.socials a:hover{
background:#8bd12e;
color:#102c35;
transform:translateY(-4px);
}

/* footer */
footer{
width:100%;
text-align:center;
padding:18px 16px 24px;
font-size:.70rem;
line-height:1.45;
color:#ddd;
position:absolute;
bottom:0;
left:0;
}

/* ================= TABLET ================= */

@media (max-width:900px){

.hero{
padding:40px 18px 150px;
}

.countdown{
grid-template-columns:repeat(2,1fr);
width:min(100%,360px);
}

.logo{
width:145px;
}

}

/* ================= MOVIL ================= */

@media (max-width:600px){

body{
overflow-x:hidden;
}

.hero{
justify-content:flex-start;
padding:14px 14px 14px;
min-height:auto;
}

.logo{
width:120px;
margin-bottom:16px;
}

.title{
font-size:clamp(1.8rem,8vw,2.5rem);
letter-spacing:1px;
}

.subtitle{
font-size:.75rem;
margin-top:12px;
}

.countdown{
margin-top:24px;
gap:10px;
grid-template-columns:repeat(2,1fr);
width:100%;
max-width:320px;
}

.box{
padding:14px 8px;
border-radius:14px;
}

.box small{
font-size:.72rem;
}

.btn-contact{
width:100%;
max-width:280px;
margin-top:24px;
padding:14px 20px;
font-size:.95rem;
}

.socials{
margin-top:22px;
gap:10px;
}

.socials a{
width:40px;
height:40px;
}

footer{
position:relative;
padding:24px 12px 20px;
font-size:.75rem;
margin-top:18px;
}

.mouse-light{
width:220px;
height:220px;
}

}

/* ================= EXTRA SMALL ================= */

@media (max-width:360px){

.title{
font-size:1.55rem;
}

.countdown{
max-width:100%;
}

.box span{
font-size:1.2rem;
}

.btn-contact{
min-width:auto;
}

}

/* ================= ANIMACIONES ================= */

@keyframes bgFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

@keyframes stars{
0%{transform:translateY(0);}
100%{transform:translateY(-140px);}
}

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