/* Mancla Kids: el fondo pertenece al viewport; solo las secciones se desplazan. */
.page-mancla-kids { --mn-ink: #07374d; --mn-aqua: #b6f3ec; --mn-yellow: #ffe395; --mn-paper: #f7fcfc; --mn-wa: #25d366; background: #08455e; }
.mn-backdrop { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #08455e url('../img/mancla-kids/poster.jpg') center / cover no-repeat; }
.mn-backdrop video { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
.mn-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,30,48,.8), rgba(2,30,48,.22) 82%), linear-gradient(0deg, rgba(2,30,48,.3), transparent 58%); }
.mn-main { position: relative; color: #fff; }
.mn-main section[id] { scroll-margin-top: calc(var(--header-height) + 22px); }
.mn-hero { min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; padding: 76px 0 40px; }
.mn-breadcrumb { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: #e1f5f5; text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mn-breadcrumb span { color: var(--mn-yellow); }
.mn-hero h1 { margin: 18px 0 30px; font-family: var(--font-body); font-weight: 700; font-size: clamp(4rem, 10.5vw, 9.5rem); line-height: .9; letter-spacing: -.075em; }
.mn-hero h1 > span { color: var(--mn-aqua); }
.mn-dot { color: var(--mn-yellow); }
.mn-lead { max-width: 560px; margin: 0; color: #edf9fa; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.5; letter-spacing: -.025em; }
.mn-lead strong { color: #fff; font-weight: 600; }
.mn-hero-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: 44px; }
.mn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.mn-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 14px 24px; border-radius: 99px; background: var(--mn-yellow); color: var(--mn-ink); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s, box-shadow .2s; }
.mn-button:hover { background: #ffedb8; box-shadow: 0 6px 24px #001c3533; }
.mn-button .icon { width: 20px; height: 20px; }
.mn-whatsapp-link { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; font-size: 15px; font-weight: 600; text-decoration: none; }
.mn-whatsapp-link:hover { text-decoration: underline; }
.mn-wa-icon { width: 20px; height: 20px; flex: none; }
.mn-scroll { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #ffffff70; border-radius: 50%; text-decoration: none; font-size: 25px; transition: background .2s; }
.mn-scroll:hover { background: #ffffff20; }
.mn-programs { padding: 84px 0 0; }
.mn-section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; padding: 0 0 46px; }
.mn-kicker { color: var(--mn-aqua); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.mn-section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.3rem, 6.5vw, 6rem); line-height: .95; letter-spacing: -.045em; margin: 18px 0 0; }
.mn-section-head h2 em { color: var(--mn-aqua); font-weight: 400; }
.mn-section-head > p { max-width: 465px; margin: 0 0 6px; color: #eefbff; font-size: 18px; line-height: 1.7; }
.mn-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Tarjetas translucidas: dejan ver el video de fondo. */
.mn-program { --mn-card-accent: #096b83; display: flex; flex-direction: column; position: relative; min-width: 0; padding: 34px; border: 1px solid #ffffff6b; border-radius: 28px; background: rgba(247,252,252,.62); color: var(--mn-ink); box-shadow: 0 12px 40px #012e4024; -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
.mn-program-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; color: var(--mn-card-accent); }
.mn-program-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; }
.mn-program-icon .icon { width: 24px; height: 24px; }
.mn-program-number { font-size: 12px; letter-spacing: .1em; }
.mn-program h3 { font-family: var(--font-body); margin: 0 0 14px; max-width: 490px; font-size: clamp(1.7rem, 2.8vw, 2.35rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
.mn-program-copy > p:not(.mn-age) { color: #24455a; margin: 0; font-size: 16px; line-height: 1.7; }
.mn-program .mn-age { display: inline-block; margin: 0 0 14px; font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--mn-card-accent); }
.mn-program-1 { background: rgba(223,249,240,.62); --mn-card-accent: #146a58; }
.mn-program-2 { background: rgba(10,72,97,.6); color: #fff; --mn-card-accent: #b6f3ec; }
.mn-program-2 .mn-program-copy > p { color: #e0f3f6; }
.mn-program-3 { background: rgba(226,245,255,.62); }
.mn-program-4, .mn-program-9 { background: rgba(255,244,215,.64); --mn-card-accent: #825214; }
.mn-program-5 { background: rgba(255,233,236,.62); --mn-card-accent: #9f4962; }
.mn-program-6 { background: rgba(234,235,255,.62); --mn-card-accent: #60559d; }
.mn-program-10 { background: rgba(223,249,240,.62); --mn-card-accent: #146a58; }
.mn-program-8 { background: rgba(4,42,63,.6); color: #fff; --mn-card-accent: #b6f3ec; }
.mn-program-8 .mn-program-copy > p { max-width: 750px; color: #ddecf3; }
.mn-contact { padding: 110px 0 80px; }
.mn-contact-card { display: grid; grid-template-columns: 70px 1fr; gap: 30px; align-items: start; padding: 44px; border: 1px solid #ffffff70; border-radius: 28px; background: rgba(3,39,57,.72); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
.mn-contact-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--mn-wa); color: #04321f; }
.mn-contact-icon .mn-wa-icon { width: 32px; height: 32px; }
.mn-contact h2 { font-family: var(--font-display); font-size: clamp(3.3rem, 5vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; margin: 12px 0 12px; }
.mn-contact-note { margin: 0 0 18px; color: #bde8f2; font-size: 16px; }
.mn-whatsapp { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 15px 26px; border-radius: 99px; background: var(--mn-wa); color: #04321f; font-size: 19px; font-weight: 700; letter-spacing: .01em; text-decoration: none; transition: background .2s, box-shadow .2s; }
.mn-whatsapp .mn-wa-icon { width: 24px; height: 24px; }
.mn-whatsapp:hover { background: #4ade80; box-shadow: 0 8px 26px #001c3540; }
.page-mancla-kids :focus-visible { outline: 3px solid #efba45; outline-offset: 5px; }
@media (min-width: 1020px) { .mn-hero .container { padding-bottom: 20px; } }
@media (max-width: 699px) {
  .mn-hero { padding: 48px 0 92px; align-items: end; }
  .mn-hero h1 { font-size: clamp(3.4rem, 15vw, 6.5rem); line-height: .96; margin-top: 16px; }
  .mn-lead { max-width: 390px; font-size: 1.2rem; }
  .mn-hero-bottom { margin-top: 30px; }
  .mn-scroll { display: none; }
  .mn-actions { gap: 8px 20px; }
  .mn-button { padding-inline: 20px; font-size: 14px; }
  .mn-whatsapp-link { font-size: 14px; }
  .mn-programs { padding-top: 68px; }
  .mn-section-head { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .mn-section-head > p { font-size: 16px; }
  .mn-program-grid { grid-template-columns: 1fr; gap: 16px; }
  .mn-program { padding: 26px; border-radius: 23px; }
  .mn-program-top { margin-bottom: 32px; }
  .mn-contact { padding: 64px 0 48px; }
  .mn-contact-card { grid-template-columns: 1fr; gap: 25px; padding: 28px; border-radius: 23px; }
  .mn-whatsapp { font-size: 17px; padding: 14px 22px; }
}
@media (max-width: 380px) { .mn-actions { align-items: start; flex-direction: column; } }
@media (max-height: 500px) and (min-width: 700px) { .mn-hero { padding-top: 28px; } .mn-hero h1 { font-size: 5rem; } }
@media (prefers-reduced-motion: reduce) { .mn-main * { scroll-behavior: auto; transition: none; } }
@media print { .mn-backdrop { display: none; } .mn-main { color: #07374d; } .mn-program { break-inside: avoid; } }