/* =====================================
   ESCUELA DE INGLES ONLINE
   Modern Conversion Website
===================================== */


:root{

--ocean:#0A3D62;
--teal:#1B9AAA;
--sand:#FDF6EC;
--white:#ffffff;
--coral:#FF6B6B;
--dark:#14213D;

--shadow:
0 15px 40px rgba(0,0,0,.12);

--radius:22px;

}



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



body{

font-family:'Poppins',sans-serif;
background:var(--sand);
color:var(--dark);
line-height:1.7;

}



img{

width:100%;
display:block;

}



a{

text-decoration:none;

}







/* =====================
HEADER
===================== */


.header{

position:fixed;
top:0;
left:0;
width:100%;
height:80px;

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

padding:0 6%;

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

backdrop-filter:blur(12px);

z-index:1000;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.logo{

font-size:1.5rem;
font-weight:800;
color:var(--ocean);

}



nav{

display:flex;
gap:30px;

}



nav a{

color:var(--dark);
font-weight:500;

}



nav a:hover{

color:var(--teal);

}



.header-btn{

background:var(--coral);
color:white;

padding:12px 25px;

border-radius:50px;

font-weight:600;

}







/* =====================
HERO VIDEO
===================== */


.hero{

height:100vh;
min-height:700px;

position:relative;

display:flex;
align-items:center;

overflow:hidden;

}



.hero-video{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

}



.overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(10,61,98,.90),
rgba(10,61,98,.45)
);

}



.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:0 8%;

color:white;

}



.hero h1{

font-size:clamp(2.5rem,5vw,4.5rem);

line-height:1.15;

font-weight:800;

}



.hero p{

font-size:1.15rem;

margin:25px 0;

max-width:700px;

}



.hero-buttons{

display:flex;
gap:20px;

}



.btn-primary,
.btn-secondary{

padding:16px 32px;

border-radius:50px;

font-weight:700;

display:inline-block;

}



.btn-primary{

background:var(--coral);

color:white;

}



.btn-primary:hover{

transform:translateY(-3px);

}



.btn-secondary{

background:white;

color:var(--ocean);

}



.badges{

display:flex;

gap:20px;

margin-top:50px;

}



.badges div{

background:white;

color:var(--dark);

padding:20px;

border-radius:18px;

display:flex;

flex-direction:column;

font-size:.9rem;

box-shadow:var(--shadow);

}



.badges strong{

color:var(--ocean);

}








/* =====================
SECTIONS
===================== */


.section{

padding:100px 7%;

}



.section.light{

background:white;

}



.section h2,
.future h2{

text-align:center;

font-size:2.5rem;

color:var(--ocean);

margin-bottom:30px;

}



.intro{

text-align:center;

max-width:800px;

margin:auto;

}






/* =====================
CARDS
===================== */


.cards{

display:grid;

gap:30px;

margin-top:50px;

}



.cards.two{

grid-template-columns:repeat(2,1fr);

}



.cards.four{

grid-template-columns:repeat(4,1fr);

}



.card{

background:white;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card h3,
.card p{

padding:20px;

}



.tag{

margin:20px;

display:inline-block;

background:#d9f7f5;

color:var(--teal);

padding:6px 18px;

border-radius:30px;

font-weight:600;

}



.premium{

background:#ffe1e1;

color:var(--coral);

}



.small{

padding:20px;

}






.center-text{

text-align:center;

margin-top:50px;

}







/* =====================
STATS
===================== */


.stats{

display:flex;

justify-content:center;

gap:80px;

margin:50px 0;

text-align:center;

}



.stats strong{

display:block;

font-size:3rem;

color:var(--teal);

}



.stats span{

font-weight:600;

}






/* =====================
TIMELINE
===================== */


.timeline{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:50px;

}



.timeline div{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}



.timeline span{

display:inline-flex;

width:60px;
height:60px;

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

background:var(--teal);

color:white;

border-radius:50%;

font-size:1.5rem;

font-weight:bold;

}








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


.future{

padding:100px 10%;

text-align:center;

background:

linear-gradient(
135deg,
var(--ocean),
var(--teal)
);

color:white;

}



.future h2{

color:white;

}



.future p{

max-width:800px;

margin:20px auto;

font-size:1.1rem;

}







/* =====================
CONTACT
===================== */


.contact{

display:grid;

grid-template-columns:1fr 400px;

gap:50px;

}



form{

display:grid;

gap:15px;

margin-top:30px;

}



input,
select,
textarea{

padding:16px;

border-radius:15px;

border:1px solid #ddd;

font-family:inherit;

}



textarea{

height:120px;

}



button{

background:var(--coral);

color:white;

border:none;

padding:16px;

border-radius:50px;

font-size:1rem;

font-weight:bold;

cursor:pointer;

}



.contact-box{

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

}



.contact-box li{

list-style:none;

margin:15px 0;

}







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


footer{

background:#061f35;

color:white;

text-align:center;

padding:40px;

}








/* =====================
WHATSAPP FLOAT
===================== */


.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

z-index:2000;

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

}








/* =====================
MOBILE
===================== */


@media(max-width:900px){


.header{

height:70px;

padding:0 20px;

}


nav{

display:none;

}



.hero-content{

padding:100px 25px 0;

}



.badges{

flex-direction:column;

}



.hero-buttons{

flex-direction:column;

}



.cards.two,
.cards.four,
.timeline,
.contact{

grid-template-columns:1fr;

}



.section{

padding:70px 25px;

}



.stats{

flex-direction:column;

gap:25px;

}



.hero{

min-height:900px;

}


}