/* ==================================================
   COMUNALITOS – Escuela de Liderazgo Infantil
   Hoja de estilos principal
   comunalitos.org
================================================== */

/* ==================================================
   1. VARIABLES
================================================== */
:root{
    --teal:     #0EB3C8;
    --teal2:    #38B8A6;
    --teal3:    #0A96A8;
    --rojo:     #E75A5A;
    --amarillo: #F4B41A;
    --amarillo-txt: #8A6100;   /* amarillo accesible sobre blanco */
    --verde:    #4CAF7D;
    --morado:   #9B5DE5;
    --naranja:  #D96A1F;       /* naranja con mejor contraste */
    --blanco:   #FFFFFF;
    --fondo:    #F0FDFB;
    --gris:     #3E4A5A;
    --gris2:    #5A6B7F;       /* subido de #94A3B8 para legibilidad */
    --card-bg:  #FFFFFF;
    --radio:    22px;
    --header-h: 72px;
}

/* ==================================================
   2. RESET
================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
body{
    font-family:'Nunito',system-ui,-apple-system,sans-serif;
    background:var(--fondo);
    color:var(--gris);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}

/* Accesibilidad: foco visible en todo elemento interactivo */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
    outline:3px solid #0A96A8;
    outline-offset:3px;
    border-radius:6px;
}

/* Enlace para saltar al contenido (lectores de pantalla / teclado) */
.skip-link{
    position:absolute;left:-9999px;top:0;z-index:2000;
    background:var(--rojo);color:#fff;
    padding:12px 22px;border-radius:0 0 12px 0;
    font-weight:800;text-decoration:none;
}
.skip-link:focus{left:0;}

/* Respeta la preferencia de menos movimiento del sistema */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
    }
}

/* ==================================================
   3. HEADER + NAVEGACIÓN
================================================== */
header{
    background:var(--blanco);
    height:var(--header-h);
    padding:0 56px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 24px rgba(14,179,200,.12);
}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-sol{
    width:40px;height:40px;
    animation:spinSol 18s linear infinite;
    flex-shrink:0;
}
@keyframes spinSol{to{transform:rotate(360deg);}}
.logo-name{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:26px;font-weight:800;
    color:var(--rojo);
    letter-spacing:-.4px;
    transition:color .3s;
    white-space:nowrap;
}
.logo:hover .logo-name{color:var(--teal);}

nav{display:flex;align-items:center;gap:30px;}
nav a{
    font-weight:700;font-size:14.5px;
    color:#54606F;text-decoration:none;
    position:relative;padding-bottom:3px;
    transition:color .25s;
    white-space:nowrap;
}
nav a::after{
    content:'';position:absolute;bottom:0;left:50%;
    transform:translateX(-50%);
    width:0;height:2.5px;
    background:var(--teal);border-radius:4px;
    transition:width .3s ease;
}
nav a:hover{color:var(--teal);}
nav a:hover::after{width:100%;}
nav a[aria-current="true"]{color:var(--teal);}
nav a[aria-current="true"]::after{width:100%;}

.nav-cta{
    background:var(--rojo);
    color:#fff!important;
    padding:10px 24px;
    border-radius:50px;
    font-weight:800;
    box-shadow:0 4px 16px rgba(231,90,90,.3);
    transition:all .3s ease;
}
.nav-cta::after{display:none!important;}
.nav-cta:hover{
    background:#CF4545;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(231,90,90,.4);
}

/* --- Botón hamburguesa (solo móvil) --- */
.nav-toggle{
    display:none;
    background:none;border:none;
    width:46px;height:46px;
    cursor:pointer;
    padding:10px;
    border-radius:12px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    transition:background .25s;
}
.nav-toggle:hover{background:rgba(14,179,200,.08);}
.nav-toggle span{
    display:block;
    height:3px;width:100%;
    background:var(--teal3);
    border-radius:3px;
    transition:transform .3s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Capa oscura detrás del menú móvil */
.nav-backdrop{
    position:fixed;inset:0;
    background:rgba(10,60,70,.45);
    backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
    z-index:998;
}
body.nav-abierto .nav-backdrop{opacity:1;visibility:visible;}
body.nav-abierto{overflow:hidden;}

@media(max-width:940px){
    header{padding:0 20px;}
    .nav-toggle{display:flex;}
    nav{
        position:fixed;
        top:var(--header-h);
        right:0;
        width:min(300px,84vw);
        height:calc(100dvh - var(--header-h));
        background:var(--blanco);
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:22px 20px 40px;
        box-shadow:-8px 0 40px rgba(0,0,0,.14);
        transform:translateX(105%);
        transition:transform .34s cubic-bezier(.4,0,.2,1);
        z-index:999;
        overflow-y:auto;
    }
    body.nav-abierto nav{transform:translateX(0);}
    nav a{
        font-size:16px;
        padding:15px 12px;
        border-bottom:1px solid #EEF4F5;
        text-align:left;
    }
    nav a::after{display:none;}
    .nav-cta{
        margin-top:18px;
        text-align:center;
        border-bottom:none;
        padding:14px 24px;
    }
    .logo-name{font-size:23px;}
    .logo-sol{width:34px;height:34px;}
}

/* ==================================================
   4. HERO
================================================== */
.hero{
    background:linear-gradient(140deg,#12C4D4 0%,#0EB3C8 35%,#0DA8BC 65%,#0A96A8 100%);
    min-height:540px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:60px 56px 0;
    position:relative;
    overflow:hidden;
    gap:20px;
}

/* Burbujas flotantes de fondo */
.hero-bubble{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    animation:bubbleFloat linear infinite;
}
@keyframes bubbleFloat{
    0%{transform:translateY(0) scale(1);opacity:.5;}
    50%{opacity:.9;}
    100%{transform:translateY(-30px) scale(1.05);opacity:.3;}
}
.hero-star{
    position:absolute;
    font-size:16px;
    color:rgba(255,255,255,.5);
    animation:twinkle 2.8s ease-in-out infinite;
    pointer-events:none;
    user-select:none;
}
@keyframes twinkle{
    0%,100%{opacity:.2;transform:scale(.8);}
    50%{opacity:1;transform:scale(1.2);}
}

.hero-left{position:relative;z-index:2;}
.hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.2);
    border:1.5px solid rgba(255,255,255,.4);
    border-radius:50px;
    padding:7px 20px;
    font-size:12.5px;font-weight:800;
    color:#fff;letter-spacing:.4px;
    margin-bottom:22px;
    backdrop-filter:blur(8px);
}
.hero h1{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(29px,4.5vw,54px);
    font-weight:800;
    color:#fff;
    line-height:1.15;
    margin-bottom:18px;
    text-shadow:0 3px 16px rgba(0,0,0,.14);
    max-width:560px;
}
.hero-desc{
    font-size:clamp(15px,1.6vw,17px);
    color:rgba(255,255,255,.94);
    font-weight:600;
    line-height:1.7;
    max-width:480px;
    margin-bottom:34px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

.btn-main{
    background:var(--amarillo);
    color:#1A1A1A;border:none;
    border-radius:50px;
    padding:16px 40px;
    font-size:17px;font-weight:900;
    font-family:'Nunito',sans-serif;
    cursor:pointer;letter-spacing:-.1px;
    text-decoration:none;
    display:inline-block;
    box-shadow:0 8px 28px rgba(244,180,26,.45);
    transition:all .35s cubic-bezier(.175,.885,.32,1.275);
}
.btn-main:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:0 16px 38px rgba(244,180,26,.6);
}
.btn-sec{
    background:rgba(255,255,255,.2);
    color:#fff;
    border:2px solid rgba(255,255,255,.55);
    border-radius:50px;
    padding:15px 30px;
    font-size:15px;font-weight:800;
    font-family:'Nunito',sans-serif;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    backdrop-filter:blur(10px);
    transition:all .3s ease;
}
.btn-sec:hover{background:rgba(255,255,255,.34);transform:translateY(-3px);}

.hero-img-side{
    position:relative;z-index:2;
    display:flex;justify-content:flex-end;align-items:flex-end;
}
.hero-lider-img{
    height:420px;
    width:auto;
    object-fit:contain;
    object-position:bottom;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.2));
    animation:liderFloat 4s ease-in-out infinite;
}
@keyframes liderFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}

.hero-wave{
    position:absolute;bottom:-1px;left:0;width:100%;
    line-height:0;z-index:3;pointer-events:none;
}
.hero-wave svg{width:100%;height:auto;display:block;}

@media(max-width:940px){
    /* En móvil: texto arriba, personaje abajo (ya no se oculta) */
    .hero{
        grid-template-columns:1fr;
        padding:44px 22px 0;
        text-align:center;
        min-height:auto;
        gap:0;
    }
    .hero-desc{margin-left:auto;margin-right:auto;}
    .hero-btns{justify-content:center;}
    .hero-img-side{justify-content:center;margin-top:30px;}
    .hero-lider-img{height:300px;}
}
@media(max-width:480px){
    .hero-lider-img{height:230px;}
    .btn-main{padding:15px 28px;font-size:15.5px;}
    .btn-sec{padding:14px 24px;font-size:14px;}
    .hero-btns{gap:10px;}
}

/* ==================================================
   5. STRIP DE INTRO (3 colores)
================================================== */
.intro-strip{
    display:grid;grid-template-columns:repeat(3,1fr);
    max-width:1160px;margin:0 auto;
    gap:0;
    transform:translateY(-28px);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 50px rgba(0,0,0,.1);
}
.istrip{
    padding:22px 26px;
    display:flex;align-items:center;gap:14px;
}
.istrip:nth-child(1){background:var(--rojo);}
.istrip:nth-child(2){background:#D89A00;}
.istrip:nth-child(3){background:var(--verde);}
.istrip-emoji{font-size:30px;line-height:1;}
.istrip-txt{color:#fff;}
.istrip-txt strong{font-family:'Baloo 2',cursive,sans-serif;font-size:16px;display:block;font-weight:800;}
.istrip-txt span{font-size:12.5px;font-weight:600;opacity:.92;}
@media(max-width:820px){
    .intro-strip{
        grid-template-columns:1fr;
        transform:translateY(-14px);
        border-radius:16px;
        margin:0 18px;
    }
}

/* ==================================================
   6. SECCIÓN GENÉRICA
================================================== */
.sec{
    max-width:1160px;margin:0 auto;
    padding:68px 24px 60px;
    text-align:center;
}
.sec-label{
    display:inline-block;
    background:rgba(14,179,200,.1);
    color:var(--teal3);
    font-size:11px;font-weight:800;
    letter-spacing:2.5px;text-transform:uppercase;
    padding:6px 18px;border-radius:50px;
    border:1.5px solid rgba(14,179,200,.22);
    margin-bottom:14px;
}
.sec-title{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(25px,3.5vw,40px);
    font-weight:800;
    color:var(--rojo);
    margin-bottom:12px;line-height:1.2;
}
.sec-sub{
    font-size:15.5px;color:var(--gris2);
    font-weight:600;line-height:1.65;
    max-width:540px;margin:0 auto 50px;
}

/* ==================================================
   7. TARJETAS DE SÚPER PODERES
================================================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:880px){.grid-3{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}

.poder-card{
    background:var(--card-bg);
    border-radius:var(--radio);
    overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.07);
    border:1.5px solid rgba(0,0,0,.05);
    transition:transform .42s cubic-bezier(.175,.885,.32,1.275), box-shadow .42s ease;
    display:flex;flex-direction:column;
}
.poder-card:hover{
    transform:translateY(-12px);
    box-shadow:0 28px 70px rgba(0,0,0,.12);
}
.poder-card-top{height:8px;}
.poder-card:nth-child(1) .poder-card-top{background:linear-gradient(90deg,#E75A5A,#FF8C8C);}
.poder-card:nth-child(2) .poder-card-top{background:linear-gradient(90deg,#38B8A6,#3B9DD4);}
.poder-card:nth-child(3) .poder-card-top{background:linear-gradient(90deg,#F4B41A,#FF8C42);}

.poder-img-wrap{
    background:linear-gradient(175deg,#13CBD9 0%,#0EB3C8 50%,#0AA0B4 100%);
    display:flex;align-items:center;justify-content:center;
    height:270px;
    overflow:hidden;
    position:relative;
}
.poder-img-wrap::after{
    content:'';
    position:absolute;
    top:-30%;left:-30%;
    width:70%;height:70%;
    background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);
    pointer-events:none;
}
.poder-img-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .5s cubic-bezier(.175,.885,.32,1.275);
}
.poder-card:nth-child(3) .poder-img-wrap img{
    object-fit:contain;
    object-position:center bottom;
    width:auto;height:260px;
    margin:0 auto;
}
.poder-card:hover .poder-img-wrap img{transform:scale(1.07) translateY(-4px);}

.poder-body{
    padding:28px 24px 30px;
    flex:1;display:flex;flex-direction:column;align-items:center;
}
.poder-card h3{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:22px;font-weight:800;
    margin-bottom:12px;
}
.poder-card:nth-child(1) h3{color:var(--rojo);}
.poder-card:nth-child(2) h3{color:#2B9A8A;}
.poder-card:nth-child(3) h3{color:var(--naranja);}
.poder-card p{
    font-size:14.5px;line-height:1.7;
    color:var(--gris2);font-weight:600;
    margin-bottom:20px;
}
.poder-tag{
    margin-top:auto;
    display:inline-block;
    font-size:12px;font-weight:800;
    padding:6px 18px;border-radius:50px;
    letter-spacing:.3px;
}
.poder-card:nth-child(1) .poder-tag{background:#FFF0F0;color:#C43F3F;}
.poder-card:nth-child(2) .poder-tag{background:#F0FEFA;color:#22867A;}
.poder-card:nth-child(3) .poder-tag{background:#FFF4E6;color:#B3541A;}

/* ==================================================
   8. SECCIÓN COMUNIDAD (imagen + texto)
================================================== */
.sec-barrio{
    background:linear-gradient(160deg,#E8F9F8 0%,#D6F5F2 100%);
    padding:72px 24px;
}
.barrio-inner{
    max-width:1160px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;
    gap:56px;align-items:center;
}
@media(max-width:860px){.barrio-inner{grid-template-columns:1fr;gap:36px;text-align:center;}}
.barrio-img{
    border-radius:24px;overflow:hidden;
    box-shadow:0 16px 60px rgba(14,179,200,.25);
    background:linear-gradient(175deg,#13CBD9,#0EB3C8);
    display:flex;align-items:center;
}
.barrio-img img{
    width:100%;height:auto;display:block;
    transition:transform .5s ease;
}
.barrio-img:hover img{transform:scale(1.04);}
.barrio-texto h2{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(25px,3.2vw,38px);
    font-weight:800;color:var(--rojo);
    margin-bottom:18px;line-height:1.2;
}
.barrio-texto p{
    font-size:15.5px;line-height:1.75;
    color:var(--gris);font-weight:600;
    margin-bottom:18px;
}
.barrio-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
@media(max-width:860px){.barrio-chips{justify-content:center;}}
.chip{
    display:inline-flex;align-items:center;gap:7px;
    background:#fff;border-radius:50px;
    padding:9px 18px;
    font-size:13.5px;font-weight:800;
    color:var(--teal3);
    border:1.5px solid rgba(14,179,200,.3);
    box-shadow:0 3px 14px rgba(14,179,200,.1);
    transition:all .3s ease;
}
.chip:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-2px);}

/* ==================================================
   9. MÓDULOS
================================================== */
.sec-modulos{padding:72px 24px;}
.grid-modulos{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:22px;margin-top:46px;
}
@media(max-width:950px){.grid-modulos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.grid-modulos{grid-template-columns:1fr;max-width:380px;margin:46px auto 0;}}

.modulo{
    background:var(--card-bg);
    border-radius:20px;
    padding:34px 22px 28px;
    box-shadow:0 5px 24px rgba(0,0,0,.06);
    border:1.5px solid rgba(14,179,200,.1);
    text-align:center;
    transition:transform .38s cubic-bezier(.175,.885,.32,1.275), box-shadow .38s ease, border-color .38s ease;
}
.modulo:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(14,179,200,.16);
    border-color:rgba(14,179,200,.3);
}
.modulo-emoji{font-size:38px;display:block;margin-bottom:14px;line-height:1;}
.modulo-num{
    width:46px;height:46px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',cursive,sans-serif;font-size:20px;font-weight:800;
    color:#fff;margin:0 auto 16px;
}
.modulo:nth-child(1) .modulo-num{background:linear-gradient(135deg,#E75A5A,#FF8C8C);}
.modulo:nth-child(2) .modulo-num{background:linear-gradient(135deg,#38B8A6,#4DD9C8);}
.modulo:nth-child(3) .modulo-num{background:linear-gradient(135deg,#F4B41A,#FFD060);}
.modulo:nth-child(4) .modulo-num{background:linear-gradient(135deg,#9B5DE5,#BB85FF);}
.modulo h3{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:16.5px;font-weight:800;
    color:#2D3748;margin-bottom:9px;
}
.modulo p{font-size:13.5px;color:var(--gris2);font-weight:600;line-height:1.6;}

/* ==================================================
   10. EL PROGRAMA EN CIFRAS (datos reales del programa)
================================================== */
.sec-datos{
    background:linear-gradient(135deg,var(--teal) 0%,var(--teal3) 100%);
    padding:70px 24px;
    position:relative;overflow:hidden;
}
.sec-datos::before{
    content:'';position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.datos-inner{
    max-width:1060px;margin:0 auto;
    position:relative;z-index:1;text-align:center;
}
.datos-inner .sec-title{color:#fff;margin-bottom:8px;}
.datos-inner .sec-sub{color:rgba(255,255,255,.88);margin-bottom:44px;}
.datos-inner .sec-label{
    background:rgba(255,255,255,.18);
    color:#fff;border-color:rgba(255,255,255,.35);
}
.datos-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:20px;
}
@media(max-width:860px){.datos-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.datos-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto;}}
.dato{
    background:rgba(255,255,255,.13);
    border:1.5px solid rgba(255,255,255,.24);
    border-radius:22px;padding:34px 20px 30px;
    backdrop-filter:blur(12px);
    transition:background .35s ease, transform .35s ease;
}
.dato:hover{background:rgba(255,255,255,.22);transform:translateY(-6px);}
.dato-icon{font-size:40px;display:block;margin-bottom:12px;line-height:1;}
.dato-num{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(32px,4.4vw,46px);
    font-weight:800;color:#fff;
    line-height:1.05;margin-bottom:8px;
    display:block;
}
.dato-lbl{font-size:14px;font-weight:700;color:rgba(255,255,255,.88);line-height:1.45;display:block;}

/* Aviso de cupos */
.datos-nota{
    margin-top:36px;
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.16);
    border:1.5px solid rgba(255,255,255,.3);
    border-radius:50px;
    padding:12px 26px;
    color:#fff;font-weight:800;font-size:14px;
    backdrop-filter:blur(8px);
    text-align:left;
}

/* ==================================================
   11. ZONA DE PADRES
================================================== */
.sec-padres{
    background:linear-gradient(160deg,#FFFBF0 0%,#FFF8E6 50%,#FFFBF0 100%);
    padding:76px 24px;
    position:relative;
    overflow:hidden;
}
.sec-padres::before{
    content:'👨‍👩‍👧‍👦';
    position:absolute;
    font-size:280px;
    opacity:.04;
    right:-40px;top:-40px;
    pointer-events:none;
    line-height:1;
}
.padres-inner{max-width:1160px;margin:0 auto;position:relative;z-index:1;}
.padres-header{text-align:center;margin-bottom:52px;}
.padres-header .sec-label{
    background:rgba(244,180,26,.14);
    color:#8A6100;
    border-color:rgba(244,180,26,.35);
}
.padres-header .sec-title{color:#B8860B;}
.padres-header .sec-sub{max-width:580px;}

.padres-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px;margin-bottom:52px;
}
@media(max-width:880px){.padres-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto;}}
.padre-card{
    background:var(--blanco);
    border-radius:22px;
    padding:36px 26px 30px;
    box-shadow:0 6px 28px rgba(244,180,26,.1);
    border:1.5px solid rgba(244,180,26,.2);
    transition:transform .38s cubic-bezier(.175,.885,.32,1.275), box-shadow .38s ease;
    text-align:center;
    position:relative;overflow:hidden;
}
.padre-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:5px;
}
.padre-card:nth-child(1)::before{background:linear-gradient(90deg,#F4B41A,#FF8C42);}
.padre-card:nth-child(2)::before{background:linear-gradient(90deg,#38B8A6,#3B9DD4);}
.padre-card:nth-child(3)::before{background:linear-gradient(90deg,#E75A5A,#FF8C8C);}
.padre-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(244,180,26,.18);}
.padre-card-ico{
    width:68px;height:68px;border-radius:20px;
    display:flex;align-items:center;justify-content:center;
    font-size:32px;margin:0 auto 18px;
}
.padre-card:nth-child(1) .padre-card-ico{background:linear-gradient(135deg,#FFF3CC,#FFE680);}
.padre-card:nth-child(2) .padre-card-ico{background:linear-gradient(135deg,#E8F9F8,#C8EEE9);}
.padre-card:nth-child(3) .padre-card-ico{background:linear-gradient(135deg,#FFE8E8,#FFCCCC);}
.padre-card h3{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:19px;font-weight:800;
    color:#2D3748;margin-bottom:14px;
}
.padre-card ul{list-style:none;text-align:left;}
.padre-card ul li{
    font-size:14px;font-weight:600;
    color:var(--gris2);
    padding:8px 0;
    border-bottom:1px solid #F3F5F7;
    display:flex;align-items:flex-start;gap:10px;
    line-height:1.5;
}
.padre-card ul li:last-child{border-bottom:none;}
.padre-card ul li::before{
    content:'✓';
    background:var(--verde);color:#fff;
    font-size:10px;font-weight:900;
    width:20px;height:20px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;margin-top:1px;
}

/* --- 2 columnas: FAQ + formulario --- */
.padres-2col{
    display:grid;grid-template-columns:1fr 1fr;
    gap:44px;align-items:start;margin-bottom:52px;
}
@media(max-width:900px){.padres-2col{grid-template-columns:1fr;gap:34px;}}

.faq-titulo{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:20px;font-weight:800;
    color:#2D3748;margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
}
.faq-item{
    background:var(--blanco);
    border-radius:16px;
    border:1.5px solid rgba(244,180,26,.2);
    margin-bottom:10px;
    overflow:hidden;
    box-shadow:0 3px 14px rgba(0,0,0,.04);
    transition:box-shadow .3s ease, border-color .3s ease;
}
.faq-item.open{
    box-shadow:0 8px 28px rgba(244,180,26,.15);
    border-color:rgba(244,180,26,.45);
}
.faq-preg{
    width:100%;
    text-align:left;
    background:none;border:none;
    padding:18px 20px;
    font-family:'Nunito',sans-serif;
    font-size:14.5px;font-weight:800;
    color:#2D3748;
    cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;
    transition:color .25s;
}
.faq-preg:hover{color:var(--teal3);}
.faq-arrow{
    font-size:20px;font-weight:900;
    color:#C08A00;
    transition:transform .3s ease;
    flex-shrink:0;line-height:1;
}
.faq-item.open .faq-arrow{transform:rotate(45deg);}
.faq-resp{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
}
.faq-item.open .faq-resp{grid-template-rows:1fr;}
.faq-resp > div{overflow:hidden;}
.faq-resp-inner{
    padding:14px 20px 18px;
    font-size:14px;font-weight:600;
    color:var(--gris2);
    line-height:1.7;
    border-top:1px solid #F3F5F7;
}

/* --- Caja de pre-inscripción --- */
.inscripcion-box{
    background:linear-gradient(135deg,var(--teal) 0%,var(--teal3) 100%);
    border-radius:24px;
    padding:38px 32px;
    color:#fff;
    box-shadow:0 16px 50px rgba(14,179,200,.25);
}
.inscripcion-box h3{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:22px;font-weight:800;
    margin-bottom:8px;color:#fff;
}
.inscripcion-box > p{
    font-size:14px;font-weight:600;
    color:rgba(255,255,255,.9);
    margin-bottom:24px;line-height:1.6;
}
.form-field{margin-bottom:14px;}
.form-field label{
    display:block;
    font-size:12.5px;font-weight:800;
    color:#fff;
    margin-bottom:6px;letter-spacing:.3px;
}
.form-field input,
.form-field select{
    width:100%;
    background:rgba(255,255,255,.17);
    border:1.5px solid rgba(255,255,255,.4);
    border-radius:12px;
    padding:13px 16px;
    font-family:'Nunito',sans-serif;
    font-size:15px;font-weight:700;
    color:#fff;
    outline:none;
    transition:border-color .25s ease, background .25s ease;
    -webkit-appearance:none;appearance:none;
}
.form-field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
}
.form-field input::placeholder{color:rgba(255,255,255,.65);}
.form-field input:focus,
.form-field select:focus{
    border-color:#fff;
    background:rgba(255,255,255,.26);
}
.form-field input:invalid:not(:placeholder-shown){border-color:#FFD2D2;}
.form-field select option{color:#2D3748;background:#fff;}

/* Casilla de autorización de datos */
.form-consent{
    display:flex;align-items:flex-start;gap:11px;
    margin:18px 0 6px;
    font-size:12.5px;font-weight:600;
    color:rgba(255,255,255,.94);
    line-height:1.55;
    text-align:left;
}
.form-consent input[type="checkbox"]{
    width:20px;height:20px;
    flex-shrink:0;margin-top:1px;
    accent-color:var(--amarillo);
    cursor:pointer;
}
.form-consent a{color:#FFE08A;font-weight:800;}

.btn-form{
    width:100%;
    background:var(--amarillo);
    color:#1A1A1A;border:none;
    border-radius:50px;
    padding:15px;
    font-family:'Nunito',sans-serif;
    font-size:16px;font-weight:900;
    cursor:pointer;margin-top:12px;
    box-shadow:0 6px 22px rgba(244,180,26,.4);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn-form:hover:not(:disabled){
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 12px 30px rgba(244,180,26,.55);
}
.btn-form:disabled{opacity:.75;cursor:progress;}
.btn-form.ok{background:var(--verde);color:#fff;}

/* Mensaje de estado del formulario */
.form-msg{
    margin-top:14px;
    padding:14px 16px;
    border-radius:14px;
    font-size:13.5px;font-weight:700;
    line-height:1.55;
    display:none;
}
.form-msg.visible{display:block;}
.form-msg.ok{background:rgba(255,255,255,.95);color:#1F7A52;}
.form-msg.error{background:#FFF0F0;color:#B33030;}
.form-msg a{color:inherit;font-weight:900;}

/* --- Contacto --- */
.padres-contacto{
    display:grid;
    /* auto-fit: se ve bien con 2 o con 3 tarjetas, según haya WhatsApp o no */
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
    max-width:760px;margin:0 auto;
}
@media(max-width:760px){.padres-contacto{grid-template-columns:1fr;max-width:400px;margin:0 auto;}}
.contacto-item{
    background:var(--blanco);
    border-radius:18px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 4px 18px rgba(0,0,0,.05);
    border:1.5px solid rgba(244,180,26,.15);
    transition:transform .3s ease, box-shadow .3s ease;
    text-decoration:none;
    display:block;
}
.contacto-item:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(244,180,26,.15);}
.contacto-ico{font-size:34px;display:block;margin-bottom:10px;line-height:1;}
.contacto-item strong{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:15px;font-weight:800;
    color:#2D3748;display:block;margin-bottom:4px;
}
.contacto-item span{font-size:13.5px;font-weight:700;color:var(--teal3);}

/* ==================================================
   12. CTA FINAL
================================================== */
.sec-cta{padding:76px 24px;text-align:center;background:var(--fondo);}
.cta-box{
    max-width:1100px;margin:0 auto;
    background:var(--card-bg);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 70px rgba(0,0,0,.1);
    display:grid;grid-template-columns:1fr 1fr;
    isolation:isolate;
}
@media(max-width:780px){.cta-box{grid-template-columns:1fr;}}
.cta-img{
    background:linear-gradient(135deg,var(--fondo) 0%,#D6F5F2 100%);
    display:flex;align-items:center;justify-content:center;
    padding:36px;
    position:relative;overflow:hidden;
}
.cta-img::before{
    content:'';position:absolute;
    top:-20%;right:-10%;width:60%;height:60%;
    background:radial-gradient(circle,rgba(14,179,200,.15) 0%,transparent 70%);
    pointer-events:none;z-index:1;
}
.cta-img img{
    position:relative;z-index:2;
    width:100%;height:auto;
    border-radius:20px;
    box-shadow:0 16px 45px rgba(14,179,200,.25);
    display:block;
    animation:ctaFloat 5s ease-in-out infinite;
}
@keyframes ctaFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}
.cta-texto{
    padding:52px 46px;
    display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start;
    text-align:left;
}
@media(max-width:780px){.cta-texto{text-align:center;align-items:center;padding:40px 28px;}}
.cta-texto h2{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(23px,3vw,36px);
    font-weight:800;color:var(--rojo);
    margin-bottom:16px;line-height:1.2;
}
.cta-texto p{
    font-size:15px;line-height:1.75;
    color:var(--gris2);font-weight:600;
    margin-bottom:30px;
}

/* ==================================================
   13. BANNER DE CIERRE
================================================== */
.banner-ninos{
    width:100%;
    background:var(--fondo);
    line-height:0;
    overflow:hidden;
}
.banner-ninos img{
    width:100%;
    height:auto;
    display:block;
    min-height:70px;
    object-fit:cover;
}

/* ==================================================
   14. FOOTER
================================================== */
footer{
    background:linear-gradient(135deg,#07798A 0%,#08848F 50%,#0A96A8 100%);
    padding:34px 48px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    position:relative;
    z-index:2;
}
.footer-logo{display:flex;align-items:center;gap:10px;}
.footer-logo-txt{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:22px;font-weight:800;
    color:#fff;letter-spacing:-.3px;
}
.footer-center{text-align:center;}
.footer-center p{
    font-size:13px;font-weight:700;
    color:rgba(255,255,255,.88);
    line-height:1.6;
}
.footer-center .footer-copy{
    font-size:12px;
    color:rgba(255,255,255,.65);
    margin-top:5px;
}
.footer-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.footer-links a{
    font-size:13px;font-weight:700;
    color:rgba(255,255,255,.88);
    text-decoration:none;
    transition:color .25s ease;
    padding:4px 0;position:relative;
}
.footer-links a::after{
    content:'';position:absolute;bottom:0;left:0;
    width:0;height:2px;background:var(--amarillo);
    border-radius:2px;transition:width .3s ease;
}
.footer-links a:hover{color:#fff;}
.footer-links a:hover::after{width:100%;}

@media(max-width:900px){
    footer{
        grid-template-columns:1fr;
        text-align:center;
        padding:30px 22px;
        justify-items:center;
        gap:18px;
    }
    .footer-links{justify-content:center;gap:16px;}
}

/* ==================================================
   15. SCROLL REVEAL
================================================== */
.reveal{
    opacity:0;transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}
.reveal.visible{opacity:1;transform:none;}
/* Si no hay JS, todo se ve igual */
.no-js .reveal{opacity:1;transform:none;}

/* ==================================================
   16. BOTÓN FLOTANTE DE WHATSAPP
================================================== */
.wa-flotante{
    position:fixed;
    right:18px;bottom:18px;
    z-index:900;
    width:58px;height:58px;
    border-radius:50%;
    background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 26px rgba(37,211,102,.45);
    transition:transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
}
.wa-flotante:hover{transform:scale(1.1);box-shadow:0 12px 34px rgba(37,211,102,.6);}
.wa-flotante svg{width:32px;height:32px;fill:#fff;}

/* ==================================================
   17. PÁGINAS INTERNAS (política de datos, 404)
================================================== */
.pagina-interna{
    max-width:820px;
    margin:0 auto;
    padding:56px 24px 72px;
}
.pagina-interna h1{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(27px,4vw,38px);
    color:var(--rojo);
    line-height:1.2;margin-bottom:10px;
}
.pagina-interna .actualizado{
    font-size:13px;font-weight:700;color:var(--gris2);
    margin-bottom:34px;display:block;
}
.pagina-interna h2{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:20px;color:var(--teal3);
    margin:34px 0 12px;line-height:1.3;
}
.pagina-interna h3{
    font-size:16px;font-weight:800;color:#2D3748;
    margin:22px 0 8px;
}
.pagina-interna p,
.pagina-interna li{
    font-size:15px;line-height:1.8;
    font-weight:600;color:var(--gris);
    margin-bottom:12px;
}
.pagina-interna ul,.pagina-interna ol{padding-left:22px;margin-bottom:16px;}
.pagina-interna li{margin-bottom:8px;}
.pagina-interna a{color:var(--teal3);font-weight:800;}
.pagina-interna .caja-destacada{
    background:#fff;
    border-left:5px solid var(--amarillo);
    border-radius:0 16px 16px 0;
    padding:22px 24px;
    margin:26px 0;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.pagina-interna .caja-destacada p:last-child{margin-bottom:0;}

.error-404{
    text-align:center;
    padding:90px 24px 100px;
    max-width:620px;margin:0 auto;
}
.error-404 .emoji{font-size:86px;display:block;margin-bottom:18px;line-height:1;}
.error-404 h1{
    font-family:'Baloo 2',cursive,sans-serif;
    font-size:clamp(28px,5vw,42px);
    color:var(--rojo);margin-bottom:14px;
}
.error-404 p{
    font-size:16px;font-weight:600;
    color:var(--gris2);line-height:1.7;
    margin-bottom:32px;
}

/* ==================================================================
   BARRA FIJA DE INSCRIPCIÓN — solo en pantallas pequeñas

   El formulario está muy abajo en la página. En celular esta barra
   mantiene la inscripción siempre alcanzable. Nace oculta (fuera de
   la pantalla y sin recibir clics); app.js le pone la clase .ver
   cuando corresponde. Así, sin JavaScript, nunca estorba.
================================================================== */
.cta-fija{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    display:none;                 /* en escritorio no existe */
    transform:translateY(120%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
}
.cta-fija.ver{
    transform:translateY(0);
    pointer-events:auto;
}
.cta-fija > a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 10px 10px;
    padding:11px 12px 11px 18px;
    background:var(--blanco);
    border:1.5px solid rgba(10,150,168,.22);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,50,60,.20);
    text-decoration:none;
    /* Respeta la franja inferior de los iPhone con gesto de inicio. */
    margin-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.cta-fija-txt{
    font-family:'Nunito',sans-serif;
    font-size:13.5px;font-weight:800;
    color:var(--gris2);
    line-height:1.25;
}
.cta-fija-btn{
    flex-shrink:0;
    background:var(--teal3);color:#fff;
    font-family:'Nunito',sans-serif;
    font-size:14px;font-weight:900;
    padding:11px 18px;border-radius:13px;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(10,150,168,.32);
}
@media(max-width:860px){
    .cta-fija{display:block;}
    /* Aire al final para que la barra no tape el pie de página. */
    body{padding-bottom:74px;}
}
/* Quien pide menos movimiento no recibe el deslizamiento. */
@media(prefers-reduced-motion:reduce){
    .cta-fija{transition:none;}
}

/* ==================================================================
   RESPALDO LEGAL — Ley 2166 de 2021
   La cita se trata como una cita de verdad: tipografía distinta,
   barra lateral y color propio, para que se lea como norma y no
   como texto de mercadeo.
================================================================== */
.tarjeta-ley{
    max-width:760px;margin:0 auto 26px;
    background:#F6FAFB;
    border:1.5px solid rgba(10,150,168,.22);
    border-left:5px solid var(--teal3);
    border-radius:16px;
    padding:26px 28px 20px;
}
.ley-cita{
    font-family:'Nunito',sans-serif;
    font-size:16.5px;line-height:1.72;
    color:var(--gris2);
    font-style:italic;
    margin:0;
}
.ley-cita strong{font-style:normal;color:var(--teal3);font-weight:800;}
.ley-fuente{
    margin-top:14px;padding-top:12px;
    border-top:1px solid rgba(10,150,168,.18);
    font-size:13px;font-weight:800;letter-spacing:.03em;
    color:var(--teal3);text-transform:uppercase;
}
.ley-explica{
    max-width:700px;margin:0 auto;
    font-size:16px;line-height:1.72;color:var(--gris2);
}
.ley-explica p + p{margin-top:14px;}
.ley-enlace{margin-top:18px;font-weight:700;}
.ley-enlace a{color:var(--teal3);}
@media(max-width:600px){
    .tarjeta-ley{padding:20px 18px 16px;border-radius:14px;}
    .ley-cita{font-size:15.5px;}
}