:root{
  --banner: #094006ff;
  --btn: #3AAA35;
  --ice: #F6F8FA;
  --text: #094006ff;
  --muted: #3AAA35;
  --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}
/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.two-left-big{grid-template-columns:2fr 1fr}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.two,.grid.two-left-big,.grid.three{grid-template-columns:1fr}}

/* 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}
.userbox{font-size:13px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:6px 10px;border-radius:10px}
.poolbox{font-size:13px;background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;padding:6px 10px;border-radius:10px}
.merchantbox{font-size:13px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;padding:6px 10px;border-radius: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(--text); 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(--text); transition:width .25s ease; border-radius:3px;}
.nav-links a:hover::after{width:100%}

/* HERO */
/* min-height o la altura que quieras */ /* azul oscuro del fondo */
.hero{ position: relative;width: 100%;min-height: 413px;background: #208a20ff;overflow: hidden;}
/* Franja celeste inclinada de la derecha *//* ancho de la franja */ /* azul claro *//* inclinación del borde */
.hero::after{content: "";position: absolute;top: 0;right: 0;width: 30%; height: 100%;background: #3AAA35;transform-origin: top right;transform: skewX(21deg);}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
.hero{font-family: 'Montserrat', sans-serif;font-weight: 700; /* ExtraBold */ 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(14, 64, 12, 0.95) 0%, rgba(8, 75, 9, 0.95) 60%);*/ z-index:1; mix-blend-mode:multiply}
.hero-content{position:relative; z-index:2; max-width:1500px; padding:20px}
.hero-raee{height:240px; opacity:0.95; margin-bottom:18px}
.hero-title{font-size:1.8rem; line-height:1.75; font-weight:700; letter-spacing:0.3px; 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:270px;height:270px; 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}

/* SOLICITUDES*/
.Solicitudes{position:relative; min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center; color:white; overflow:hidden; background-color: var(--banner);}
.Solicitudes-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)); z-index:1}
.Solicitudes-inner{position:relative; z-index:2; padding:40px 20px; max-width:1000px}
.Solicitudes h2{font-size:1.8rem; margin-bottom:12px; letter-spacing:0.6px}
.Solicitudes .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(--text)}
.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:#3AAA35; padding:80px 20px; display:flex; justify-content:center; align-items:center;}
.curso-card{background-color:#094006ff; 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}
}
/* Helpers */
.row{display:flex}.gap{gap:8px}
.btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
/*.btn.primary{background:#3AAA35;color:#fff;border-color:#3AAA35}*/
.btn.dark{background:#111;color:#fff;border-color:#111}
.btn.outline{background:#fff;color:#111}
.card{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card.small{max-width:640px;margin:0 auto}
.note{margin-top:10px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:8px;border-radius:10px;font-size:14px}
.warn{background:#fffbeb;border-color:#fcd34d}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-top:1px solid #e5e7eb;text-align:left}
.field-end{display:flex;align-items:end}
.fields input,.fields select,.fields textarea{width:100%;padding:8px;border:1px solid #e5e7eb;border-radius:10px}
.total{margin-top:10px;text-align:right;font-weight:700}
.map{aspect-ratio:16/9;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.prose h2{margin:0 0 8px 0}.prose ul{margin:8px 0 0 20px}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tab-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
.tab-btn.active{background:#f3f4f6}
.tab{display:none}.tab.show{display:block}
.muted{color:#666}.small{font-size:12px}
.footer{border-top:1px solid #e5e7eb;padding:16px;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;color:#555}
.chip{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;margin-right:6px}
.hide{display:none}
.partner{padding:10px;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:8px}
.partner.active{background:#ecfdf5;border-color:#a7f3d0}
.balance{font-size:28px;font-weight:700;margin:6px 0 10px}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #e5e7eb}
.badge.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge.pending{background:#fff7ed;border-color:#fed7aa;color:#9a3412}