:root{
  --banner: #1D4567;
  --btn: #3984C6;
  --ice: #F6F8FA;
  --text: #222831;
  --muted: #6b7280;
  --card-bg: #f3f6f9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', sans-serif;
  background: var(--ice);
  color:var(--text);
  line-height:1.5;
}

/* CONTAINERS */
.container{max-width:1200px; margin:0 auto; padding:40px 20px}

/* HEADER */
.header-top{display:flex; justify-content:space-between; align-items:center; padding:8px 20px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.04); font-size:0.95rem;}
.header-top .socials a{margin-right:10px; color:var(--muted); text-decoration:none; font-weight:600}
.header-top .phone{margin-left:12px;color:var(--muted)}
.header-actions .btn{margin-left:10px}

/* NAV */
.nav-main{background:#fff; box-shadow:0 2px 10px rgba(2,6,23,0.04); position:sticky; top:0; z-index:50}
.nav-inner{max-width:1200px;margin:0 auto;padding:12px 20px; display:flex; justify-content:space-between; align-items:center}
.logo img{height:48px; display:block}
.nav-links{display:flex; gap:24px; list-style:none; align-items:center; margin:0; padding:0}
.nav-links a{text-decoration:none; color:var(--muted); font-weight:500; padding:8px 6px; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px; background:var(--btn); transition:width .25s ease; border-radius:3px;}
.nav-links a:hover::after{width:100%}
/* === Dropdown general === */
.nav-links .dropdown {
  position: relative;
}

.nav-links .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  display: none;
  flex-direction: column;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 6px;
  z-index: 50;
}

.nav-links .dropdown-menu a {
  padding: 10px 20px;
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.nav-links .dropdown-menu a:hover {
  background: #e6eef7;
  color: var(--btn);
}

/* Mostrar dropdown al pasar o hacer click */
.nav-links .dropdown:hover .dropdown-menu {
  display: flex;
}


/* HERO */
.hero{position:relative; height:420px; display:flex; align-items:center; justify-content:center; text-align:center; color:white; overflow:hidden; background: var(--banner);}
.hero .hero-bg{position:absolute; inset:0; background-image: url('img/hero.jpg'); background-size:cover; background-position:center; opacity:0.12; pointer-events:none; transition:transform .12s linear}
.hero::before{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(12,43,64,0.95) 0%, rgba(28,78,118,0.95) 60%); z-index:1; mix-blend-mode:multiply}
.hero-content{position:relative; z-index:2; max-width:900px; padding:20px}
.hero-logo{height:86px; opacity:0.95; margin-bottom:18px}
.hero-title{font-size:2rem; line-height:1.05; font-weight:700; letter-spacing:0.6px; margin:0 auto; color:#f8fbff}

/* COMPROMISO */
.comp-row{display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.comp-text{flex:1 1 520px; padding-right:20px}
.comp-text h2{font-size:2rem;margin-bottom:18px}
.comp-text p{font-size:1.05rem;color:var(--muted)}
.comp-image{flex:0 0 300px; display:flex; justify-content:center; align-items:center; position:relative}
.circle-img{width:220px;height:220px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center; margin:0 auto; box-shadow:0 10px 30px rgba(25,35,50,0.08); background:white;}
.circle-img img{width:100%; height:100%; object-fit:cover; display:block}
.decor-lines{position:absolute; right:-10px; top:-6px; width:120px; height:120px; background:linear-gradient(135deg, rgba(57,132,198,0.12) 0%, rgba(29,69,103,0.06) 100%); transform: rotate(12deg); border-radius:12px; pointer-events:none}

/* INSCRIPCIONES */
.inscripciones{position:relative; min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center; color:white; overflow:hidden; background-color: var(--banner);}
.inscripciones-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)); z-index:1}
.inscripciones-inner{position:relative; z-index:2; padding:40px 20px; max-width:1000px}
.inscripciones h2{font-size:1.8rem; margin-bottom:12px; letter-spacing:0.6px}
.inscripciones .lead{color:#f0f6fa; font-weight:500; margin-bottom:18px; max-width:900px; margin-left:auto; margin-right:auto}

/* CATEGORIAS */
.section-title{text-align:center; margin-bottom:28px; font-size:1.6rem; font-weight:600; color:var(--muted)}
.cat-row{display:flex; gap:28px; align-items:stretch; flex-wrap:wrap}
.cat-image{flex:1 1 480px; min-height:380px; overflow:hidden; border-radius:8px}
.cat-image img{width:100%; height:100%; object-fit:cover; display:block}
.cat-grid{flex:1 1 420px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cat-box{background:#fff; padding:28px; border-radius:6px; box-shadow:0 2px 12px rgba(6,12,24,0.04); display:flex; flex-direction:column; justify-content:center; text-align:center; transition: transform .28s ease, box-shadow .28s ease;}
.cat-box h4{margin-bottom:8px; font-size:1.05rem; font-weight:700; color:var(--text)}
.cat-box p{color:var(--muted); margin:0}
.cat-box:hover{transform: translateY(-6px); box-shadow:0 12px 30px rgba(6,12,24,0.08)}

/* BOTONES */
.btn{font-family:inherit; border:0; padding:8px 14px; border-radius:10px; cursor:pointer; background:transparent; color:var(--text); box-shadow:none}
.btn.primary{background:var(--btn); color:white; padding:10px 20px; border-radius:26px; font-weight:600; transition: transform .18s ease, box-shadow .18s ease}
.btn.primary.large{padding:14px 36px; font-size:1.02rem}
.btn.primary:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(57,132,198,0.18)}
.btn.ghost{background:transparent; color:var(--muted); border-radius:20px; padding:8px 12px;}
.btn.small{padding:8px 10px; font-size:.92rem}

/* FOOTER */
.site-footer{padding:36px 0; background:#0b1720; color:#d7e7f0; text-align:center; margin-top:40px}

/* ANIMACIONES */
.fade-slide-up{opacity:0; transform:translateY(20px); transition:all .8s cubic-bezier(.2,.9,.3,1)}
.fade-from-right{opacity:0; transform:translateX(40px); transition:all .9s cubic-bezier(.2,.9,.3,1)}
.visible{opacity:1; transform:none}

/* CURSOS CORTOS */
.cursos-cortos{background-color:#337AB7; padding:80px 20px; display:flex; justify-content:center; align-items:center;}
.curso-card{background-color:#1D4567; color:#fff; border-radius:8px; box-shadow: inset 0 0 15px rgba(0,0,0,0.3); max-width:750px; padding:40px 60px; text-align:justify; opacity:0; transform: translateY(40px); transition: all 0.8s ease;}
.curso-card.visible{opacity:1; transform:translateY(0)}
.curso-card h2{text-align:center; margin-bottom:20px; border-bottom:1px solid #cfdedc; padding-bottom:10px}
.curso-card .btn{margin-top:25px; display:block; margin-inline:auto}

/* RESPONSIVE */
@media (max-width:900px){
  .comp-row{flex-direction:column-reverse; gap:18px}
  .comp-image{order:1; margin-bottom:8px}
  .comp-text{order:2; padding:0}
  .hero{height:360px}
  .hero-logo{height:70px}
  .nav-links{display:none}
  .cat-row{flex-direction:column}
  .cat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .hero{height:300px}
  .hero-title{font-size:1.25rem}
  .cat-grid{grid-template-columns:1fr}
}
@media (max-width: 900px) {
  .nav-links .dropdown-menu {
    position: relative;
    box-shadow: none;
    background: transparent;
    padding-left: 15px;
  }

  .nav-links .dropdown-menu a {
    padding: 8px 0;
  }
}