/* Centro Educativo Kimú - Secuencia Gráfica */
:root{
  --bg:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --line:rgba(17,24,39,.12);
  --card:rgba(255,255,255,.86);

  --p:#ad7595;     /* morado-rosa del colibrí */
  --p2:#6ec7dc;    /* cian */
  --p3:#ffb703;    /* amarillo alegre */
  --shadow: 0 12px 30px rgba(17,24,39,.12);
  --radius: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(110,199,220,.22), transparent 55%),
              radial-gradient(900px 500px at 95% 0%, rgba(173,117,149,.18), transparent 50%),
              var(--bg);
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:#fff; border-radius:12px; box-shadow:var(--shadow); z-index:9999}

.header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; gap:14px;
  padding:10px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand__logo{
  width:44px; height:44px; border-radius:14px; object-fit:cover;
  border:1px solid var(--line);
}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__name{font-size:.84rem; color:var(--muted); font-weight:700}
.brand__kimu{font-family:"Handlee", cursive; font-size:1.35rem; letter-spacing:.2px; color:var(--p); font-weight:700}

.nav{margin-left:auto}
.nav__toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
  cursor:pointer;
}
.nav__toggle span{display:block; height:2px; margin:7px 10px; background:var(--ink); border-radius:2px}
.nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:16px; align-items:center;
}
.nav__list a{
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  font-weight:700;
}
.nav__list a:hover{background:rgba(110,199,220,.18); color:var(--ink)}
.header__cta{display:flex; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--p), #c07aa0);
  color:#fff; font-weight:800;
  border:1px solid rgba(173,117,149,.35);
  box-shadow:0 10px 22px rgba(173,117,149,.18);
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(17,24,39,.08);
}
.btn--ghost:hover{background:rgba(173,117,149,.08)}

.hero{position:relative; overflow:hidden}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 42%, rgba(255,255,255,.15) 78%),
    url("../img/hero.jpg") center/cover no-repeat;
  filter:saturate(1.05);
  transform:scale(1.02);
}
.hero__content{position:relative; padding:64px 0 54px}
.hero__card{
  width:min(560px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:26px 22px;
}
.eyebrow{
  display:inline-flex; gap:8px; align-items:center;
  font-weight:900;
  color:var(--p);
  background:rgba(173,117,149,.10);
  border:1px solid rgba(173,117,149,.18);
  padding:8px 12px;
  border-radius:999px;
  margin:0 0 12px;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem);
  line-height:1.1;
}
.hero h1 span{color:var(--p)}
.lead{margin:0 0 18px; color:var(--muted); font-size:1.05rem}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.hero__badges{display:flex; flex-wrap:wrap; gap:10px}
.badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(110,199,220,.18);
  border:1px solid rgba(110,199,220,.25);
  font-weight:800;
  color:#0b5566;
}

.hero__wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height:46px;
  background: radial-gradient(90px 30px at 10% 40%, rgba(255,183,3,.25), transparent 60%),
              radial-gradient(120px 40px at 55% 70%, rgba(173,117,149,.22), transparent 60%),
              radial-gradient(140px 50px at 90% 35%, rgba(110,199,220,.25), transparent 60%),
              linear-gradient(#fff, #fff);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,64L80,64C160,64,320,64,480,58.7C640,53,800,43,960,48C1120,53,1280,75,1360,85.3L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z" fill="black"/></svg>') center/cover no-repeat;
}

.section{padding:58px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(110,199,220,.14), rgba(173,117,149,.10));
  border-block:1px solid var(--line);
}
.section__head{margin-bottom:22px}
.section__head h2{
  margin:0 0 6px;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
}
.section__head p{margin:0; color:var(--muted)}

.grid{display:grid; gap:18px}
.grid--2{grid-template-columns: 1.15fr .85fr}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

.media{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.media img{height:100%; width:100%; object-fit:cover}
.media__caption{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
}

.checklist{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-weight:700}
.checklist li::before{
  content:"✓";
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(255,183,3,.20);
  border:1px solid rgba(255,183,3,.30);
  color:#7a5200;
  font-weight:900;
  flex:0 0 auto;
}

.social{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 18px rgba(17,24,39,.06);
  font-weight:800; color:var(--ink);
}
.pill .icon{
  width:26px; height:26px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(173,117,149,.12);
  color:var(--p);
  font-weight:900;
}

.note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(110,199,220,.16);
  border:1px solid rgba(110,199,220,.24);
  color:#0b5566;
  font-weight:700;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.program{padding:0; overflow:hidden}
.program__top img{width:100%; height:180px; object-fit:cover}
.program__body{padding:16px}
.program__body h3{margin:0 0 6px}
.program__body p{margin:0 0 12px; color:var(--muted); font-weight:700}

.cta-strip{
  margin-top:18px;
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(173,117,149,.18);
  background: linear-gradient(135deg, rgba(173,117,149,.14), rgba(255,183,3,.12), rgba(110,199,220,.14));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cta-strip h3{margin:0 0 4px}
.cta-strip p{margin:0; color:var(--muted); font-weight:700; max-width:62ch}

.embed{margin-top:26px}
.embed__head{margin-bottom:12px}
.embed__head h3{margin:0 0 6px}
.embed__head p{margin:0; color:var(--muted); font-weight:700}
.embed__grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.embed__card{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  min-height:520px;
}
.embed__card iframe{width:100%; height:520px}
.embed__card--ig{display:grid; place-items:center; padding:22px; background: radial-gradient(500px 300px at 10% 10%, rgba(173,117,149,.18), transparent 55%), #fff}
.ig-fallback{max-width:46ch; text-align:center}
.ig-fallback p{color:var(--muted); font-weight:700}

.gallery{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
}
.gallery__item{
  border:0; padding:0;
  border-radius: 20px;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 26px rgba(17,24,39,.10);
}
.gallery__item img{width:100%; height:140px; object-fit:cover; transition: transform .25s ease}
.gallery__item:hover img{transform:scale(1.04)}

.video{padding:0; overflow:hidden}
.video__frame{aspect-ratio:16/9; width:100%}
.video__frame iframe{width:100%; height:100%}

label{display:grid; gap:8px; font-weight:800; color:var(--ink); margin-bottom:12px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  outline:none;
  font:inherit;
  background:#fff;
}
input:focus, textarea:focus{border-color:rgba(110,199,220,.6); box-shadow:0 0 0 4px rgba(110,199,220,.18)}
textarea{resize:vertical}
.form-hint{margin:10px 0 0; color:var(--muted); font-weight:700; font-size:.95rem}

.contact-mini{display:grid; gap:10px; margin-top:16px}
.mini{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
}
.mini:hover{background:rgba(110,199,220,.14)}

.map{border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 24px rgba(17,24,39,.08)}
.map iframe{width:100%; height:320px; border:0}

.muted{color:var(--muted); font-weight:700}

.footer{
  padding:22px 0;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer p{margin:0; color:var(--muted); font-weight:700}
.footer a{color:var(--ink); font-weight:900}

.fab{
  position:fixed; right:18px; bottom:18px;
  width:58px; height:58px;
  border-radius:22px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border:1px solid rgba(18,140,126,.4);
  box-shadow:0 18px 28px rgba(18,140,126,.22);
  z-index:90;
}
.fab svg{width:30px; height:30px; fill:#fff}

.lightbox{
  position:fixed; inset:0;
  display:none;
  z-index:120;
}
.lightbox[aria-hidden="false"]{display:block}
.lightbox__overlay{
  position:absolute; inset:0;
  background:rgba(15,23,42,.65);
}
.lightbox__dialog{
  position:relative;
  width:min(920px, 92vw);
  margin: min(6vh, 48px) auto 0;
  background:#fff;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 70px rgba(2,6,23,.45);
}
.lightbox__close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}
.lightbox__title{
  padding:16px 18px 0;
  font-weight:900;
  color:var(--ink);
}
.lightbox__dialog img{width:100%; height:auto; max-height:72vh; object-fit:contain; background:#f8fafc}

@media (max-width: 980px){
  .cards{grid-template-columns: 1fr; }
  .program__top img{height:220px}
  .embed__grid{grid-template-columns:1fr}
  .embed__card{min-height:520px}
  .gallery{grid-template-columns: repeat(3, 1fr)}
  .grid--2{grid-template-columns:1fr}
  .header__cta{display:none}
  .brand{min-width:auto}
}

@media (max-width: 760px){
  .nav__toggle{display:inline-block}
  .nav__list{
    position:absolute;
    right:4%; left:4%;
    top:72px;
    background:#fff;
    border:1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding:10px;
    display:none;
    flex-direction:column;
    gap:0;
  }
  .nav__list a{display:block; width:100%}
  .nav__list.show{display:flex}
  .hero__content{padding:54px 0 46px}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .gallery__item img{height:150px}
}