/* ATV In Progress - style.css */

/* ---------- GLOBAL ---------- */
body{
    line-height:1.6;
    overflow-x:hidden;
    background:var(--color-light);
}
section{
    padding:90px 0;
}
h1,h2,h3,h4{
    color:var(--color-secondary);
    margin:0 0 20px;
    font-weight:800;
}
h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.1}
h2{font-size:clamp(2rem,4vw,3rem);text-align:center}
p{color:var(--color-text);font-size:1.05rem}

/* ---------- NAVBAR ---------- */
.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--navbar-height);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 6%;
    background:rgba(22,43,84,.78);
    backdrop-filter:blur(14px);
    z-index:var(--z-menu);
    box-shadow:var(--shadow-sm);
}
.logo{
    color:#fff;
    font-weight:800;
    font-size:1.7rem;
}
.logo span{color:var(--color-primary)}
.navbar ul{
    display:flex;
    gap:2rem;
}
.navbar li a{
    color:#fff;
    transition:var(--transition);
    font-weight:600;
}
.navbar li a:hover{
    color:var(--color-primary);
}

/* ---------- BUTTONS ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:var(--radius-pill);
    background:var(--gradient-primary);
    color:#fff;
    font-weight:700;
    transition:.35s;
    box-shadow:var(--shadow-md);
}
.btn:hover{
    transform:translateY(-4px);
}
.secondary{
    background:#fff;
    color:var(--color-secondary);
}

/* ---------- HERO ---------- */
.hero{
    background:var(--gradient-hero);
    min-height:100vh;
    display:flex;
    align-items:center;
}
.hero-content{
    width:min(92%,1280px);
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}
.hero-text h1{
    color:#fff;
}
.hero-text h1 span{
    color:#8ff6ef;
}
.hero-text p{
    color:#eaf7f7;
    font-size:1.2rem;
    margin-bottom:35px;
}
.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:50px;
}
.hero-image img{
    border-radius:30px;
    box-shadow:var(--shadow-lg);
}

/* ---------- STATS ---------- */
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.stats div{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border-radius:20px;
    padding:25px;
    color:#fff;
    text-align:center;
}
.stats strong{
    display:block;
    font-size:2rem;
}
.stats span{
    font-size:.9rem;
}

/* ---------- COURSES ---------- */
#cursos{
    background:#fff;
}
.cards{
    width:min(92%,1280px);
    margin:50px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.card{
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}
.card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}
.card h3{
    margin-bottom:15px;
}
.card ul{
    margin:20px 0;
}
.card li{
    margin-bottom:8px;
    color:var(--color-text);
}
.featured{
    background:var(--gradient-primary);
    color:#fff;
}
.featured h3,
.featured p,
.featured li{
    color:#fff;
}
.card a{
    display:inline-block;
    margin-top:20px;
    color:var(--color-primary-dark);
    font-weight:700;
}

/* ---------- CAMPUS ---------- */
#campus{
    text-align:center;
    background:linear-gradient(#f6fbfc,#fff);
}

/* ---------- CONTACT ---------- */
#contacto{
    background:var(--color-secondary);
}
#contacto h2{
    color:#fff;
}
form{
    width:min(760px,90%);
    margin:40px auto;
    display:grid;
    gap:18px;
}
input,textarea,select{
    padding:16px 18px;
    border:none;
    border-radius:16px;
    font-family:inherit;
}
textarea{
    min-height:180px;
    resize:vertical;
}
button{
    cursor:pointer;
    border:none;
    padding:18px;
    border-radius:50px;
    background:var(--gradient-primary);
    color:#fff;
    font-weight:700;
    font-size:1rem;
    transition:.3s;
}
button:hover{
    transform:translateY(-3px);
}

/* ---------- FOOTER ---------- */
footer{
    background:#101d38;
    color:#fff;
    text-align:center;
    padding:35px;
}

/* utility */
.text-center{text-align:center;}