/* Capa visual Experiencia Manada. Se carga después del CSS base. */
.hero {
    min-height: 740px;
    background:
        radial-gradient(circle at 82% 18%, rgba(154,223,9,.2), transparent 22%),
        radial-gradient(circle at 48% 100%, rgba(255,103,11,.17), transparent 25%),
        linear-gradient(135deg, #06145f 0%, #0f2ba8 62%, #1739c6 100%);
}

.hero-copy { max-width: 720px; }
.hero h1 { max-width: 760px; }

.hero-visual { position: relative; }
.experience-card {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border-radius: 36px;
    background: #fff;
    box-shadow: 0 40px 90px rgba(0,0,0,.3);
    transform: rotate(1.5deg);
}
.experience-card > img {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 28px;
}
.experience-card:after {
    content: "";
    position: absolute;
    inset: 10px 10px 72px;
    border-radius: 28px;
    background: linear-gradient(180deg, transparent 45%, rgba(5,13,64,.66));
    pointer-events: none;
}
.play-button {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 47%;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding-left: 5px;
    border-radius: 50%;
    color: #081972;
    background: #9adf09;
    box-shadow: 0 14px 35px rgba(0,0,0,.24);
    transform: translate(-50%,-50%);
    transition: transform .2s;
}
.play-button:hover { transform: translate(-50%,-50%) scale(1.08); }
.experience-card .video-label { position: relative; z-index: 4; }
.enrollment-badge {
    position: absolute;
    z-index: 6;
    top: -27px;
    right: -18px;
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    border-radius: 18px;
    color: #081972;
    background: #9adf09;
    box-shadow: 0 15px 35px rgba(0,0,0,.22);
    transform: rotate(3deg);
}
.enrollment-badge b { font-size: 14px; }
.enrollment-badge span { font-size: 12px; }

.level {
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.level:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -50px;
    bottom: -55px;
    border-radius: 50%;
    background: currentColor;
    opacity: .05;
}
.level:hover { transform: translateY(-8px); box-shadow: 0 24px 55px rgba(8,25,114,.14); }

.school-day { background: #fff; }
.day-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 14px;
}
.day-track:before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 34px;
    height: 3px;
    background: linear-gradient(90deg,#9adf09,#ffb000,#ff670b,#22b3d5,#081972);
}
.day-track article { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.day-track span {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border: 8px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #081972;
    box-shadow: 0 8px 24px rgba(8,25,114,.2);
    font-weight: 900;
}
.day-track article:nth-child(1) span { background:#74ad00; }
.day-track article:nth-child(2) span { background:#d79200; }
.day-track article:nth-child(3) span { background:#e95700; }
.day-track article:nth-child(4) span { background:#1592b0; }
.day-track b { display:block; margin-bottom:8px; color:#081972; font-size:17px; }
.day-track p { color:#5f6685; font-size:14px; line-height:1.55; }

.family-voice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
    align-items: center;
    background: #f6f8ff;
}
.family-copy h2 { font-family:Atma,Nunito,sans-serif; font-size:clamp(38px,4.3vw,62px); line-height:1.05; color:#081972; }
.family-copy > p { color:#5f6685; font-size:18px; line-height:1.75; }
.family-button { color:#fff; background:#081972; }
.testimonial {
    position: relative;
    padding: 45px;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(145deg,#081972,#1637bd);
    box-shadow: 0 28px 70px rgba(8,25,114,.22);
}
.testimonial .quote-mark { position:absolute; top:18px; right:28px; color:#9adf09; font:80px/1 Georgia,serif; opacity:.8; }
.testimonial p { position:relative; font:700 24px/1.5 Atma,Nunito,sans-serif; }
.testimonial b { display:block; color:#9adf09; }
.testimonial small { display:block; margin-top:8px; color:rgba(255,255,255,.55); }
.folio { display:inline-block; margin:0 0 15px; padding:10px 18px; border-radius:12px; color:#081972; background:#effbd8; letter-spacing:1px; }
.mobile-actions { display:none; }

@media (max-width: 1050px) {
    .hero { min-height:auto; }
    .experience-card { transform:none; }
    .day-track { grid-template-columns:repeat(3,1fr); gap:28px 12px; }
    .day-track:before { display:none; }
}

@media (max-width: 700px) {
    body { padding-bottom:68px; }
    .hero { padding-top:48px; }
    .hero h1 { font-size:48px; }
    .experience-card > img { height:280px; }
    .enrollment-badge { top:-22px; right:6px; }
    .day-track { grid-template-columns:1fr; }
    .day-track article { display:grid; grid-template-columns:58px 1fr; text-align:left; column-gap:15px; }
    .day-track span { grid-row:1/3; width:58px; height:58px; margin:0; border-width:5px; }
    .day-track b { align-self:end; }
    .family-voice { grid-template-columns:1fr; }
    .testimonial { padding:34px 25px; }
    .testimonial p { font-size:21px; }
    .whatsapp { display:none; }
    .mobile-actions {
        position:fixed;
        z-index:40;
        left:0;
        right:0;
        bottom:0;
        display:grid;
        grid-template-columns:.8fr 1.1fr 1.1fr;
        padding:8px;
        gap:6px;
        background:#fff;
        box-shadow:0 -10px 30px rgba(8,25,114,.14);
    }
    .mobile-actions a { display:grid; place-items:center; min-height:48px; padding:5px; border-radius:12px; color:#081972; background:#edf0ff; font-size:12px; font-weight:900; text-align:center; }
    .mobile-actions a:first-child { color:#fff; background:#25d366; }
    .mobile-actions a:last-child { color:#fff; background:#ff670b; }
}