/* ====== Variables ====== */
:root{
  --text: #0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#1f5cff;
  --btn-light-bg: #ffffff;
  --btn-light-text: #111827;
  --teal:#66c2c9;
  --footer-bg: #78cfd4;
  --footer-bottom: #66c2c9;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background:#fff}
.wrap{width:min(1120px, 92%); margin-inline:auto}
a{color:inherit; text-decoration:none}

/* ===== Header ===== */
.fa-header{position:sticky; top:0; background:#f7f8fb; border-bottom:1px solid var(--border); z-index:10}
.fa-header .wrap{display:grid; grid-template-columns:1fr minmax(280px,520px) 1fr; align-items:center; gap:1rem; padding:.6rem 0}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:inherit; padding:.2rem 0}
.brand .logo{display:block; height:44px; max-width:220px; width:auto; object-fit:contain}
.search{display:flex; align-items:center; gap:.4rem; padding:.35rem; border:1px solid #dfe3ea; border-radius:999px; background:#fff}
.search input{flex:1; border:0; outline:0; padding:.4rem .6rem; border-radius:999px}
.search .icon{border:0; background:transparent; padding:.3rem .6rem; cursor:pointer}
.right{display:flex; justify-content:flex-end; align-items:center; gap:1rem; color:#374151}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid #dfe3ea; background:#fff; padding:.7rem 1rem; border-radius:10px; cursor:pointer; font-weight:600}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(31,92,255,.25)}
.menu-btn{display:none}

@media (max-width:920px){
  .fa-header .wrap{grid-template-columns: 1fr 1fr auto}
  .search{display:none}
  .menu-btn{display:inline-flex; border:1px solid #dfe3ea; background:#fff; padding:.5rem .7rem; border-radius:10px}
  .right{display:none}
}

/* ===== Hero ===== */
.hero{position:relative; min-height:480px; display:flex; align-items:center}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.hero-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(10%)}
.hero-bg .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35))}
.hero-content{position:relative; z-index:1; padding:4rem 0; color:#fff; text-align:center}
.hero h1{font-size: clamp(2rem, 4.5vw, 3rem); margin:0 0 .6rem}
.hero .teals{color:var(--teal)}
.hero .lead{max-width:760px; margin-inline:auto; color:#fff}
.actions{margin-top:1rem}
.btn.light{background:var(--btn-light-bg); color:var(--btn-light-text); border-color:transparent; border-radius:8px; padding:.8rem 1.2rem; font-weight:700}
.btn.light:hover{filter:brightness(.98)}
.sponsor{display:flex; gap:.6rem; align-items:center; justify-content:center; margin-top:1.4rem; opacity:.95}
.ms-logo{height:20px}

/* ===== Sección 1.1: Cursos ===== */
.courses{padding:2.2rem 0 0}
.courses h2{font-size:2.2rem; margin:0 0 1rem; color:#4b5563}
.courses-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem}
.course{background:#fff; border:2px solid #a7e2e6; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.10); overflow:hidden; display:flex; flex-direction:column}
.course .thumb{padding:1rem 1rem 0}
.course .thumb img{width:100%; height:230px; object-fit:cover; border-radius:12px}
.thumb[data-pdf]{cursor:pointer; outline:none}
.thumb[data-pdf]:focus-visible{box-shadow:0 0 0 3px rgba(86,196,204,.45); border-radius:14px}
.course-body{padding:1rem 1.2rem 1.2rem}
.course-body h3{margin:.3rem 0 .5rem}
.course-body p{color:#6b7280; margin:0 0 .8rem}
.meta{display:flex; align-items:center; gap:.4rem; color:#6b7280; font-size:.95rem}
.meta .i{opacity:.9}
.courses-cta{display:flex; justify-content:flex-end; margin:1.2rem 0 0}
.btn.lg{padding:1rem 1.4rem; border-radius:12px; font-weight:800}

@media (max-width: 1100px){
  .courses-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .courses-grid{grid-template-columns:1fr}
  .course .thumb img{height:200px}
}

/* ===== Sección 2: Video + Actividades ===== */
.video-section{position:relative; padding:2.5rem 0 1rem; min-height:560px}
.video-section .more-cta{position:absolute; right:0; top:0}
.blob{position:absolute; border-radius:50%; opacity:.8; filter:blur(.2px); z-index:0}
.blob-yellow{width:160px;height:160px;background:#F6E58D; left:3%; top:140px}
.blob-coral{width:320px;height:320px;background:#FF8C8C; left:12%; top:260px}
.blob-teal{width:260px;height:260px;background:#AEE8E6; right:8%; top:120px}
.blob-blue{width:160px;height:160px;background:#7DA0FF; right:14%; top:380px}

.video-card{position:relative; width:min(760px, 100%); margin:0 auto; border-radius:14px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18); background:#000; z-index:1}
.video-card video{display:block; width:100%; height:auto}
.video-card .play{display:none}
.video-caption{max-width:860px; margin:1rem auto 0; color:#444; text-align:center; position:relative; z-index:1}

.video-cta{display:flex; justify-content:center; margin:1rem 0 0}
.btn.yt{display:inline-flex; align-items:center; gap:.6rem; border:2px solid #ef4444; color:#ef4444; background:#fff; padding:.7rem 1.1rem; border-radius:10px; font-weight:700}
.btn.yt:hover{background:#fff5f5}
.yt-icon{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:3px}

.activities{padding:2.2rem 0 3rem}
.activities h2{font-size:1.8rem; color:#555; margin:0 0 1rem}
.acts-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.act-card{background:#fff; border:2px solid #a7e2e6; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.08); display:flex; justify-content:space-between; align-items:stretch; padding:1rem}
.act-body h3{margin:.2rem 0 .4rem}
.act-body p{color:#6b7280; margin:0}
.act-date{display:grid; place-items:center; width:140px; min-width:140px; border:2px solid #dbeafe; border-radius:12px; background:#fff}
.act-date b{font-size:2.6rem; color:#0f766e}
.act-date span{color:#6b7280}

/* ===== Sección 3: Banda calendario + Contacto ===== */
.band-cal{background:#efefef; padding:1.6rem 0}
.band-grid{display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:1rem}
.mini-cal{width:180px; background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.12); border:1px solid #dfe3ea; padding:.6rem}
.mini-head{background:#1f5cff; color:#fff; font-weight:800; text-align:center; padding:.35rem .5rem; border-radius:10px; letter-spacing:.08em}
.mini-dows{color:#6b7280; font-size:.9rem; text-align:center; margin:.4rem 0}
.mini-points{display:flex; gap:.6rem; align-items:center; justify-content:center; padding:.2rem 0 .4rem}
.p{display:inline-block; width:10px; height:10px; border-radius:50%}
.p.red{background:#ef4444}
.p.yellow{background:#f6e58d}
.p.teal{background:var(--teal)}
.band-copy h2{margin:0; color:#616161; font-size:1.6rem}

.contacto{background:#e7f3f5; padding:3rem 0}
.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; align-items:center}
.contact-copy h2{font-size:2rem; color:#5a5a5a; margin:0 0 .6rem}
.contact-copy p{color:#5a6775; max-width:56ch}
.btn.aqua{background:var(--teal); color:#fff; border-color:transparent}
.contact-figure{display:flex; justify-content:center}
.circle{position:relative; width:min(460px, 90%); aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.18); border:10px solid var(--teal)}
.circle img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ===== Sección 4: Galería ===== */
.galeria{padding:3rem 0}
.galeria h2{font-size:2rem; margin:0 0 1.4rem; color:#444}
.galeria .teals{color:var(--teal)}
.gal-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.2rem}
.gal-grid img{display:block; width:100%; height:230px; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.08); object-fit:cover}
.galeria-sub{margin:2rem 0 1rem; font-size:1.6rem; color:#4b5563}
.gal-grid.videos video{display:block; width:100%; height:230px; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.08); object-fit:cover; background:#000}

/* ===== Footer ===== */
.fa-footer{background:var(--footer-bg); color:#fff; border-top:1px solid rgba(255,255,255,.4); margin-top:2rem}
.fa-footer .foot-top{display:grid; grid-template-columns: 1fr 2fr; gap:1rem; padding:2rem 0}
.foot-brand{display:flex; align-items:center; gap:.6rem}
.foot-brand .logo{display:block; height:40px; width:auto}
.foot-links{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem}
.foot-links a{color:#fff; opacity:.95}
.fa-footer .foot-bottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.35); padding:.6rem 0; background:var(--footer-bottom)}
.fa-footer .legal{display:flex; gap:1rem}
.fa-footer .legal a{color:#fff; opacity:.95; text-decoration:none}

.pdf-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:120}
.pdf-modal[aria-hidden="false"]{display:flex}
.pdf-modal__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.55)}
.pdf-modal__dialog{position:relative; z-index:1; width:min(900px, 92%); height:min(90vh, 720px); background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(15,23,42,.35); overflow:hidden; display:flex; flex-direction:column}
.pdf-modal__close{position:absolute; top:.6rem; right:.6rem; border:0; background:rgba(15,23,42,.75); color:#fff; width:36px; height:36px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:grid; place-items:center}
.pdf-modal__close:hover{background:rgba(15,23,42,.9)}
.pdf-modal iframe{flex:1; border:0; width:100%; height:100%; background:#f3f4f6}
body.no-scroll{overflow:hidden}

/* ===== Responsive ===== */
@media (max-width: 1020px){
  .acts-grid{grid-template-columns:1fr 1fr}
  .video-section .more-cta{position:static; display:inline-flex; margin-left:auto; margin-bottom:.6rem}
}
@media (max-width: 920px){
  .contact-grid{grid-template-columns:1fr; gap:2rem}
  .foot-links{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .acts-grid{grid-template-columns:1fr}
  .foot-links{grid-template-columns:1fr}
}