/*==================================================
RESET Y VARIABLES
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}

:root{
    --primary:#233773;
    --primary-dark:#172650;
    --primary-soft:#EEF1FA;

    --secondary:#FFED00;
    --secondary-soft:#FFFBD1;

    --red:#E11B14;
    --red-dark:#A91511;
    --red-soft:#FFF0EF;

    --green:#2EAE5E;
    --green-soft:#EAF8EF;

    --cyan:#0AFFF3;
    --cyan-soft:#DFFFFD;

    --white:#FFFFFF;
    --surface:#F7F9FD;
    --surface-2:#EEF2F8;

    --text:#243047;
    --muted:#697386;
    --border:#DFE5EF;

    --gradient:linear-gradient(
        135deg,
        #233773 0%,
        #3156A3 100%
    );

    --gradient-red:linear-gradient(
        135deg,
        #E11B14 0%,
        #F04C46 100%
    );

    --gradient-mixed:linear-gradient(
        135deg,
        #233773 0%,
        #3156A3 52%,
        #E11B14 100%
    );

    --shadow:0 16px 40px rgba(35,55,115,.10);
    --shadow-hover:0 24px 60px rgba(35,55,115,.18);

    --radius:26px;
    --transition:.35s ease;
}

body{
    font-family:'Inter',sans-serif;
    background:linear-gradient(180deg,#F8FBFF 0%,#EFF5FB 50%,#F8FBFF 100%);
    color:var(--text);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 10% 20%,rgba(10,103,190,.08),transparent 24%),
        radial-gradient(circle at 90% 15%,rgba(215,38,56,.07),transparent 22%),
        radial-gradient(circle at 80% 80%,rgba(255,213,74,.10),transparent 20%);
}

section{
    position:relative;
}

img{
    display:block;
    max-width:100%;
}

h1,h2,h3,h4,h5{
    font-family:'Poppins',sans-serif;
}

a,
button,
input,
textarea{
    font:inherit;
}

.section-title{
    width:min(780px,92%);
    margin:0 auto 64px;
    text-align:center;
}

.section-title h4{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 16px;
    border-radius:999px;
    letter-spacing:1.8px;
    font-size:.82rem;
    margin-bottom:18px;
}

.section-title h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
    margin-bottom:18px;
}

.section-title p{
    color:var(--muted);
    line-height:1.8;
}

/*==================================================
NAVBAR
==================================================*/

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(255,255,255,.93);
    border-bottom:1px solid rgba(10,103,190,.08);
    backdrop-filter:blur(16px);
    transition:var(--transition);
}

.navbar{
    width:min(1280px,92%);
    min-height:88px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:var(--text);
}

.logo img{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:14px;
    background:var(--white);
}

.logo h2{
    color:var(--primary);
    font-size:1.55rem;
    line-height:1;
}

.logo span{
    display:block;
    margin-top:5px;
    color:#6C7C8F;
    font-size:.85rem;
}

.menu{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
}

.menu a{
    position:relative;
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:.94rem;
    transition:var(--transition);
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:3px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--secondary),var(--red));
    transition:var(--transition);
}

.menu a:hover{
    color:var(--primary);
}

.menu a:hover::after{
    width:100%;
}

.btn-nav{
    background:var(--gradient-red);
    color:var(--white);
    text-decoration:none;
    padding:13px 24px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 12px 28px rgba(215,38,56,.24);
    transition:var(--transition);
}

.btn-nav:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 34px rgba(215,38,56,.32);
}

/*==================================================
BOTONES
==================================================*/

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:15px 30px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    transition:var(--transition);
}

.btn-primary{
    background:var(--secondary);
    color:#1E293B;
    box-shadow:0 12px 28px rgba(255,213,74,.28);
}

.btn-primary:hover{
    transform:translateY(-4px);
    background:#FFE16D;
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.95);
    color:var(--white);
    background:rgba(255,255,255,.05);
}

.btn-secondary:hover{
    background:var(--white);
    color:var(--primary);
    transform:translateY(-4px);
}

.btn-secondary.dark{
    color:var(--red);
    border-color:var(--red);
    background:var(--white);
}

.btn-secondary.dark:hover{
    background:var(--red);
    color:var(--white);
}

/*==================================================
HERO
==================================================*/

.hero{
    position:relative;
    min-height:930px;
    padding:0;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#042449;
}

/* =========================
   CARRUSEL HERO
========================= */

.hero-slides{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.hero-slide{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;

    padding:210px 8% 230px;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    opacity:0;
    visibility:hidden;

    transform:scale(1.02);

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform 1.2s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;

    transform:scale(1);
}

.hero-slide:nth-child(1){
    background:
        linear-gradient(
            90deg,
            rgba(4,36,73,.94) 0%,
            rgba(4,36,73,.78) 50%,
            rgba(90,17,34,.52) 100%
        ),
        url("img/hero.jpg") center/cover no-repeat;
}

.hero-slide:nth-child(2){
    background:
        linear-gradient(
            90deg,
            rgba(4,36,73,.94) 0%,
            rgba(4,36,73,.76) 50%,
            rgba(90,17,34,.48) 100%
        ),
        url("img/experiencias.jpg") center/cover no-repeat;
}

.hero-slide:nth-child(3){
    background:
        linear-gradient(
            90deg,
            rgba(4,36,73,.94) 0%,
            rgba(4,36,73,.76) 50%,
            rgba(90,17,34,.48) 100%
        ),
        url("img/innovacion.png") center/cover no-repeat;
}

.hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    right:-130px;
    top:120px;
    background:rgba(255,213,74,.16);
    filter:blur(2px);
}

.hero::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    right:18%;
    bottom:-110px;
    background:rgba(215,38,56,.18);
}

.overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(4,36,73,.10),rgba(4,36,73,.28)),
        radial-gradient(circle at 70% 45%,rgba(255,255,255,.05),transparent 40%);
}

.hero-content{
    position:relative;
    z-index:5;
    width:min(690px,100%);
    color:var(--white);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:11px;
    padding:11px 19px;
    margin-bottom:26px;
    border-radius:999px;
    color:var(--white);
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(12px);
}

.badge-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 7px rgba(46,174,94,.15);
    animation:pulse 1.7s infinite;
}

.hero h1{
    max-width:720px;
    margin-bottom:24px;
    font-size:clamp(3.2rem,5vw,5.4rem);
    line-height:.98;
    font-weight:800;
    letter-spacing:-2px;
    text-transform:uppercase;
    color:var(--white);
}

.hero-content > p{
    max-width:690px;
    margin-bottom:30px;
    font-size:1.08rem;
    line-height:1.75;
    color:rgba(255,255,255,.92);
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.hero-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:35px;
    max-width:720px;
}

.hero-highlights div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 15px;
    border-radius:999px;
    color:var(--white);
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    transition:var(--transition);
}

.hero-highlights div:nth-child(2){
    border-color:rgba(255,213,74,.45);
}

.hero-highlights div:nth-child(3){
    border-color:rgba(215,38,56,.45);
}

.hero-highlights div:hover{
    background:var(--white);
    color:var(--primary-dark);
    transform:translateY(-4px);
}

.hero-highlights i{
    color:var(--secondary);
    font-size:1.15rem;
}

.hero-highlights div:nth-child(3) i{
    color:#FF6B7A;
}

.hero-card{
    position:absolute;
    z-index:6;
    right:6%;
    top:52%;
    transform:translateY(-50%);
    width:min(340px,28vw);
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:0 28px 70px rgba(2,23,48,.30);
    animation:float 5s ease-in-out infinite;

    overflow:hidden;
}

.hero-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--red)
    );
}

.hero-card-top{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:18px;
    color:var(--red);
    font-weight:700;
}

.hero-card-top i{
    font-size:1.5rem;
}

.hero-card h2{
    color:var(--text);
    font-size:1.65rem;
    line-height:1.25;
    margin-bottom:13px;
}

.hero-card > p{
    color:var(--muted);
    line-height:1.65;
    margin-bottom:22px;
}

.hero-card-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    text-align:center;
}

.hero-card-stats div{
    padding:12px 6px;
    border-radius:16px;
    background:var(--surface);
}

.hero-card-stats div:nth-child(2){
    background:var(--secondary-soft);
}

.hero-card-stats div:nth-child(3){
    background:var(--red-soft);
}

.hero-card-stats h3{
    color:var(--primary);
    font-size:1.4rem;
}

.hero-card-stats div:nth-child(3) h3{
    color:var(--red);
}

.hero-card-stats p{
    margin-top:4px;
    color:var(--muted);
    font-size:.78rem;
}

.scroll-indicator{
    position:absolute;
    z-index:8;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--white);
    font-size:.85rem;
    animation:bounce 2s infinite;
}

/* =========================
   CONTROLES HERO
========================= */

.hero-arrow{
    position:absolute;
    z-index:15;

    top:50%;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border:none;
    border-radius:50%;

    color:#fff;

    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);

    backdrop-filter:blur(10px);

    cursor:pointer;

    transform:translateY(-50%);

    transition:
        background .3s ease,
        transform .3s ease;
}

.hero-arrow:hover{
    background:rgba(255,255,255,.26);

    transform:
        translateY(-50%)
        scale(1.08);
}

.hero-arrow i{
    font-size:1.35rem;
}

.hero-prev{
    left:24px;
}

.hero-next{
    right:24px;
}


.hero-dots{
    position:absolute;
    z-index:16;

    left:50%;
    bottom:72px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:10px;
}

.hero-dot{
    width:10px;
    height:10px;

    padding:0;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.45);

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease,
        border-radius .3s ease;
}

.hero-dot.active{
    width:30px;

    border-radius:999px;

    background:var(--secondary);
}

/*==================================================
ESTADÍSTICAS
==================================================*/

.hero-info{
    width:min(1240px,92%);
    margin:-35px auto 0;
    position:relative;
    z-index:20;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.info-card{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:34px 25px;
    text-align:center;
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.info-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:var(--gradient);
}

.info-card:nth-child(2)::before{
    background:linear-gradient(90deg,var(--secondary),#FF9F1C);
}

.info-card:nth-child(3)::before{
    background:linear-gradient(90deg,var(--red),#F35B6C);
}

.info-card:nth-child(4)::before{
    background:linear-gradient(90deg,var(--green),#65D68A);
}

.info-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.info-card i{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    font-size:2rem;
    color:var(--white);
    background:var(--gradient);
}

.info-card-image {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
    margin: 0 auto 18px;

}

.info-card:nth-child(2) i{
    color:#2E2E2E;
    background:linear-gradient(135deg,var(--secondary),#FFB833);
}

.info-card:nth-child(3) i{
    background:var(--gradient-red);
}

.info-card:nth-child(4) i{
    background:linear-gradient(135deg,var(--green),#62D388);
}

.info-card h2{
    color:var(--primary);
    font-size:2rem;
    margin-bottom:5px;
}

.info-card:nth-child(3) h2{
    color:var(--red);
}

.info-card h3{
    margin-bottom:12px;
    font-size:1rem;
}

.info-card p{
    color:var(--muted);
    line-height:1.65;
    font-size:.92rem;
}

/*==================================================
ABOUT
==================================================*/

.about{
    padding:140px 8%;
    background:
        radial-gradient(circle at 15% 20%,rgba(255,213,74,.12),transparent 20%),
        var(--white);
}

.about-container{
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:78px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image::before{
    content:"";
    position:absolute;
    left:-20px;
    top:-20px;
    width:130px;
    height:130px;
    border-radius:32px;
    background:var(--secondary);
    opacity:.35;
}

.about-image img{
    position:relative;
    z-index:2;
    width:100%;
    min-height:520px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow-hover);
}

.experience-card{
    position:absolute;
    z-index:3;
    right:-18px;
    bottom:28px;
    padding:24px 26px;
    border-radius:22px;
    color:var(--white);
    background:var(--gradient-red);
    box-shadow:0 20px 45px rgba(215,38,56,.28);
}

.experience-card h2{
    font-size:2.5rem;
}

.about-content h5{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 15px;
    border-radius:999px;
    letter-spacing:1.7px;
    margin-bottom:18px;
}

.about-content h2{
    font-size:clamp(2.1rem,4vw,3rem);
    line-height:1.2;
    margin-bottom:22px;
}

.about-content > p{
    color:var(--muted);
    line-height:1.85;
    margin-bottom:30px;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:32px;
}

.about-grid div{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:74px;
    padding:15px;
    border-radius:17px;
    background:var(--surface);
    border:1px solid var(--border);
    transition:var(--transition);
}

.about-grid div:nth-child(2n){
    background:var(--secondary-soft);
}

.about-grid div:nth-child(3n){
    background:var(--red-soft);
}

.about-grid div:hover{
    transform:translateX(6px);
    box-shadow:var(--shadow);
}

.about-grid i{
    color:var(--green);
    font-size:1.2rem;
}

.about-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

/*==================================================
FEATURES
==================================================*/

.features{
    padding:135px 8%;
    background:linear-gradient(180deg,#F7FAFE 0%,#EEF5FB 100%);
}

.features-grid{
    max-width:1260px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.feature-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.feature-card img{
    width:100%;
    height:270px;
    object-fit:cover;
    background:linear-gradient(135deg,var(--primary-soft),var(--secondary-soft));
    transition:.65s;
}

.feature-card:hover img{
    transform:scale(1.06);
}

.feature-content{
    padding:30px;
    border-top:5px solid var(--primary);
}

.feature-card:nth-child(2) .feature-content{
    border-color:var(--red);
}

.feature-card:nth-child(3) .feature-content{
    border-color:var(--secondary);
}

.feature-card:nth-child(4) .feature-content{
    border-color:var(--green);
}

.feature-content > i{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:var(--white);
    background:var(--gradient);
    font-size:1.35rem;
    margin-bottom:16px;
}

.feature-card:nth-child(2) .feature-content > i{
    background:var(--gradient-red);
}

.feature-card:nth-child(3) .feature-content > i{
    color:#222;
    background:linear-gradient(135deg,var(--secondary),#FFB833);
}

.feature-card:nth-child(4) .feature-content > i{
    background:linear-gradient(135deg,var(--green),#65D68A);
}

.feature-content h3{
    font-size:1.45rem;
    margin-bottom:12px;
}

.feature-content p{
    color:var(--muted);
    line-height:1.75;
    margin-bottom:20px;
}

.feature-content a{
    color:var(--red);
    font-weight:700;
    text-decoration:none;
}

/*==================================================
NIVELES
==================================================*/

.levels{
    padding:135px 8%;
    background:var(--white);
}

.levels-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.level-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.level-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.level-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    background:var(--primary-soft);
    transition:.65s;
}

.level-card:hover img{
    transform:scale(1.07);
}

.level-info{
    padding:26px;
    border-top:6px solid var(--primary);
}

.level-card:nth-child(2) .level-info{
    border-color:var(--secondary);
}

.level-card:nth-child(3) .level-info{
    border-color:var(--red);
}

.level-card:nth-child(4) .level-info{
    border-color:var(--green);
}

.level-info span{
    display:inline-block;
    color:var(--primary);
    background:var(--primary-soft);
    border-radius:999px;
    padding:7px 11px;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:12px;
}

.level-card:nth-child(3) .level-info span{
    color:var(--red);
    background:var(--red-soft);
}

.level-info h3{
    font-size:1.4rem;
    margin-bottom:11px;
}

.level-info p{
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.level-info a{
    color:var(--red);
    text-decoration:none;
    font-weight:700;
}

/*==================================================
VIDA ESCOLAR
==================================================*/

.life{
    padding:140px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:
        radial-gradient(circle at 85% 15%,rgba(215,38,56,.10),transparent 20%),
        linear-gradient(135deg,#F2F8FF 0%,#FFF8E5 100%);
}

.life-left h2{
    font-size:clamp(2.1rem,4vw,3rem);
    line-height:1.2;
    margin:18px 0 22px;
}

.section-tag{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 15px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:1.6px;
}

.life-left > p{
    color:var(--muted);
    line-height:1.85;
    margin-bottom:28px;
}

.life-list{
    display:grid;
    gap:14px;
    margin-bottom:30px;
}

.life-list div{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 17px;
    border-radius:16px;
    background:rgba(255,255,255,.80);
    border:1px solid rgba(10,103,190,.08);
}

/* Colores individuales de las actividades */

.life-list div:nth-child(1){
    border-left:5px solid #1677FF;
}

.life-list div:nth-child(2){
    border-left:5px solid var(--secondary);
}

.life-list div:nth-child(3){
    border-left:5px solid var(--red);
}

.life-list div:nth-child(4){
    border-left:5px solid var(--green);
}

.life-list div:nth-child(5){
    border-left:5px solid #7C4DFF;
}

.life-list div:nth-child(6){
    border-left:5px solid #FF7A1A;
}

.life-list div:nth-child(7){
    border-left:5px solid #00A7C7;
}

.life-list div:nth-child(8){
    border-left:5px solid #E83E8C;
}

.life-list i{
    color:var(--primary);
    font-size:1.25rem;
}

.life-list p{
    margin:0;
    color:var(--text);
}

.life-right{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-bottom:0;
}

.life-right img{
    width:100%;
    min-height:520px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow-hover);
}

.floating-box{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;

    width:100%;
    padding:30px 32px;

    border-radius:24px;
    color:var(--white);

    background:linear-gradient(
        120deg,
        #E11B14 0%,
        #D72638 45%,
        #8B1E6B 78%,
        #233773 100%
    );

    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 22px 50px rgba(120,20,40,.22);
    overflow:hidden;
}

.floating-box::before{
    content:"";
    position:absolute;
    left:32px;
    top:0;
    width:120px;
    height:5px;

    border-radius:0 0 999px 999px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #FF8A00
    );
}

.floating-box i{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:var(--white);
    background:rgba(255,255,255,.16);
    font-size:1.45rem;
    margin-bottom:16px;
}

.floating-box h3{
    margin:0 0 8px;
    color:var(--white);
    font-size:1.45rem;
}

.floating-box p{
    margin:0;
    line-height:1.7;
    color:rgba(255,255,255,.92);
}

/*==================================================
GALERÍA
==================================================*/

.gallery{
    padding:135px 8%;
    background:var(--white);
}

.gallery-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:18px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background:var(--primary-soft);
    cursor:pointer;
}

.gallery-item:first-child{
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.65s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:24px;
    background:linear-gradient(transparent 35%,rgba(3,25,50,.85));
    opacity:.9;
}

.gallery-overlay h3{
    color:var(--white);
    font-size:1.35rem;
}

/*==================================================
NOTICIAS
==================================================*/

.news{
    padding:135px 8%;
    background:linear-gradient(180deg,#F8FBFF 0%,#FFF4F5 100%);
}

.news-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.news-card{
    overflow:hidden;
    border-radius:28px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.news-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.news-card img{
    width:100%;
    height:235px;
    object-fit:cover;
    background:var(--red-soft);
}

.news-content{
    padding:27px;
    border-top:5px solid var(--red);
}

.news-card:nth-child(2) .news-content{
    border-color:var(--secondary);
}

.news-card:nth-child(3) .news-content{
    border-color:var(--primary);
}

.news-content span{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:7px 11px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:14px;
}

.news-content h3{
    font-size:1.35rem;
    line-height:1.35;
    margin-bottom:12px;
}

.news-content p{
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.news-content a{
    color:var(--red);
    font-weight:700;
    text-decoration:none;
}

/*==================================================
TESTIMONIOS
==================================================*/

.testimonials{
    padding:135px 8%;
    background:var(--white);
}

.testimonial-container{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.testimonial-card{
    position:relative;
    padding:34px;
    border-radius:26px;
    background:var(--surface);
    border:1px solid var(--border);
    transition:var(--transition);
}

.testimonial-card:nth-child(2){
    background:var(--secondary-soft);
}

.testimonial-card:nth-child(3){
    background:var(--red-soft);
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}

.testimonial-card > i{
    font-size:2.4rem;
    color:var(--primary);
}

.testimonial-card:nth-child(3) > i{
    color:var(--red);
}

.testimonial-card p{
    color:var(--muted);
    line-height:1.8;
    margin:14px 0 20px;
}

.testimonial-card h3{
    margin-bottom:5px;
}

.testimonial-card span{
    color:var(--muted);
    font-size:.9rem;
}

/*==================================================
CONTACTO
==================================================*/

.contact{
    padding:135px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    background:
        linear-gradient(135deg,rgba(10,103,190,.98),rgba(7,63,120,.98)),
        url("img/colegio.jpg") center/cover;
    color:var(--white);
}

.contact-info h4{
    color:var(--secondary);
    letter-spacing:1.6px;
    margin-bottom:14px;
}

.contact-info h2{
    font-size:clamp(2.1rem,4vw,3rem);
    margin-bottom:18px;
}

.contact-info > p{
    color:#E7F2FF;
    line-height:1.8;
    margin-bottom:28px;
}

.contact-data{
    display:grid;
    gap:12px;
}

.contact-data p{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
}

.contact-data i{
    color:var(--secondary);
    font-size:1.2rem;
}

.contact-form{
    padding:34px;
    border-radius:28px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(15px);
}

.contact-form form{
    display:grid;
    gap:15px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:15px;
    outline:none;
    color:var(--text);
    background:rgba(255,255,255,.95);
}

.contact-form textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form button{
    border:none;
    cursor:pointer;
}

.contact-info a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-info a:visited {
    color: #ffffff;
}

.contact-info a:hover {
    color: #ffd43b;
}

/*==================================================
FOOTER
==================================================*/

footer{
    padding:70px 8% 26px;
    color:var(--white);
    background:linear-gradient(135deg,#052F5B 0%,#073F78 60%,#6C1222 100%);
}

.footer-content{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

.footer-content img{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:15px;
}

.footer-content h3{
    margin-bottom:16px;
}

.footer-content a{
    display:block;
    color:#DCEBFA;
    text-decoration:none;
    margin-bottom:10px;
    transition:var(--transition);
}

.footer-content a:hover{
    color:var(--secondary);
    transform:translateX(4px);
}

.footer-copy{
    max-width:1200px;
    margin:40px auto 0;
    padding-top:22px;
    text-align:center;
    color:#C9DCEF;
    border-top:1px solid rgba(255,255,255,.14);
}

/*==================================================
ANIMACIONES
==================================================*/

.show{
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{
    0%,100%{transform:translateY(-50%);}
    50%{transform:translateY(calc(-50% - 12px));}
}

@keyframes pulse{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.45);opacity:.55;}
}

@keyframes bounce{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,9px);}
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1180px){
    .menu{
        gap:20px;
    }

    .hero{
        padding-left:6%;
        padding-right:6%;
    }

    .hero-content{
        width:58%;
    }

    .hero-card{
        right:4%;
        width:320px;
    }

    .levels-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:950px){
    .menu,
    .btn-nav{
        display:none;
    }

    .hero{
        padding-top:135px;
        padding-bottom:120px;
        text-align:center;
        justify-content:center;
    }

    .hero-content{
        width:min(760px,100%);
    }

    .hero-buttons,
    .hero-highlights{
        justify-content:center;
    }

    .hero-card{
        display:none;
    }

    .hero-info{
        margin-top:-55px;
        grid-template-columns:repeat(2,1fr);
    }

    .about-container,
    .life,
    .contact{
        grid-template-columns:1fr;
    }

    .about-image img,
    .life-right img{
        min-height:420px;
    }

    .features-grid,
    .news-grid,
    .testimonial-container{
        grid-template-columns:1fr 1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:280px 280px 280px;
    }

    .gallery-item:first-child{
        grid-row:span 1;
    }

    .footer-content{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:650px){
    .navbar{
        min-height:78px;
    }

    .logo img{
        width:48px;
        height:48px;
    }

    .logo span{
        display:none;
    }

    .hero{
        min-height:auto;
        padding:125px 6% 110px;
    }

    .hero h1{
        font-size:2.7rem;
    }

    .hero-content > p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-highlights{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .hero-highlights div{
        justify-content:center;
        text-align:center;
        border-radius:18px;
    }

    .scroll-indicator{
        display:none;
    }

    .hero-info,
    .about-grid,
    .features-grid,
    .levels-grid,
    .news-grid,
    .testimonial-container,
    .gallery-grid,
    .footer-content{
        grid-template-columns:1fr;
    }

    .hero-info{
        margin-top:-35px;
    }

    .about,
    .features,
    .levels,
    .life,
    .gallery,
    .news,
    .testimonials,
    .contact{
        padding:100px 6%;
    }

    .about-image img,
    .life-right img{
        min-height:320px;
    }

    .experience-card{
        right:12px;
        bottom:12px;
    }

    .floating-box{
        left:12px;
        bottom:12px;
        width:calc(100% - 24px);
    }

    .gallery-grid{
        grid-template-rows:repeat(5,240px);
    }

    .contact-form{
        padding:24px;
    }
}
/*==================================================
LPB V3.1 — AJUSTES FINALES
==================================================*/

/* Menú móvil */
.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--primary-dark);
    background:var(--white);
    cursor:pointer;
    font-size:1.35rem;
    box-shadow:0 8px 22px rgba(17,58,96,.08);
    transition:var(--transition);
}

.menu-toggle:hover{
    color:var(--white);
    background:var(--primary);
    transform:translateY(-2px);
}

/* Colores para las ocho tarjetas de programas */
.feature-card:nth-child(5) .feature-content{border-color:#7C3AED;}
.feature-card:nth-child(6) .feature-content{border-color:#F97316;}
.feature-card:nth-child(7) .feature-content{border-color:#0891B2;}
.feature-card:nth-child(8) .feature-content{border-color:#DB2777;}

.feature-card:nth-child(5) .feature-content > i{background:linear-gradient(135deg,#7C3AED,#A78BFA);}
.feature-card:nth-child(6) .feature-content > i{background:linear-gradient(135deg,#F97316,#FDBA74);}
.feature-card:nth-child(7) .feature-content > i{background:linear-gradient(135deg,#0891B2,#67E8F9);}
.feature-card:nth-child(8) .feature-content > i{background:linear-gradient(135deg,#DB2777,#F9A8D4);}

/* Colores para las ocho actividades de Vida Escolar */
.life-list div{border-left:5px solid var(--primary); transition:var(--transition);}
.life-list div:nth-child(2){border-left-color:var(--secondary);}
.life-list div:nth-child(3){border-left-color:var(--red);}
.life-list div:nth-child(4){border-left-color:var(--green);}
.life-list div:nth-child(5){border-left-color:#7C3AED;}
.life-list div:nth-child(6){border-left-color:#F97316;}
.life-list div:nth-child(7){border-left-color:#0891B2;}
.life-list div:nth-child(8){border-left-color:#DB2777;}

.life-list div:hover{
    transform:translateX(7px);
    box-shadow:0 12px 28px rgba(17,58,96,.10);
    background:var(--white);
}

/* Admisiones */
.admissions-cta{
    width:min(1280px,92%);
    margin:105px auto 70px;
    padding:58px;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:48px;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    border-radius:34px;
    color:var(--white);
    background:linear-gradient(125deg,#073F78 0%,#0A67BE 52%,#D72638 130%);
    box-shadow:0 30px 75px rgba(7,63,120,.24);
}

.admissions-cta::before,
.admissions-cta::after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
}

.admissions-cta::before{
    width:330px;
    height:330px;
    top:-160px;
    right:24%;
    background:rgba(255,213,74,.18);
}

.admissions-cta::after{
    width:260px;
    height:260px;
    left:-95px;
    bottom:-155px;
    background:rgba(255,255,255,.10);
}

.admissions-content,
.admissions-panel{position:relative; z-index:2;}

.admissions-tag{
    display:inline-flex;
    padding:9px 16px;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:var(--secondary);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:1.7px;
    backdrop-filter:blur(10px);
}

.admissions-content h2{
    max-width:720px;
    margin-bottom:17px;
    font-size:clamp(2.25rem,4.3vw,4rem);
    line-height:1.08;
}

.admissions-content h2 strong{color:var(--secondary);}

.admissions-content > p{
    max-width:720px;
    color:#EAF3FD;
    line-height:1.8;
    font-size:1.02rem;
}

.admissions-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.admissions-benefits div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(8px);
}

.admissions-benefits i{color:var(--secondary); font-size:1.05rem;}

.admissions-panel{
    padding:34px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:27px;
    color:var(--text);
    background:rgba(255,255,255,.96);
    box-shadow:0 24px 55px rgba(2,23,48,.22);
}

.admissions-panel-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:19px;
    color:var(--white);
    background:var(--gradient-red);
    font-size:1.65rem;
}

.admissions-panel h3{font-size:1.55rem; margin-bottom:10px;}
.admissions-panel p{color:var(--muted); line-height:1.7; margin-bottom:22px;}

.cta-button{
    width:100%;
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 20px;
    border-radius:999px;
    color:var(--white);
    background:var(--gradient-red);
    text-decoration:none;
    font-weight:800;
    box-shadow:0 13px 28px rgba(215,38,56,.24);
    transition:var(--transition);
}

.cta-button:hover{transform:translateY(-4px); box-shadow:0 19px 36px rgba(215,38,56,.34);}
.cta-button i{transition:transform .3s ease;}
.cta-button:hover i{transform:translateX(5px);}

/* Menos espacio entre Admisiones y Contacto */
.contact{padding-top:90px;}

/* WhatsApp flotante */
.whatsapp-float{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:1100;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 18px 8px 8px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:999px;
    color:var(--white);
    background:linear-gradient(135deg,#16A34A,#25D366);
    text-decoration:none;
    box-shadow:0 18px 42px rgba(22,163,74,.30);
    transition:transform .3s ease, box-shadow .3s ease;
    animation:whatsappAttention 5.5s ease-in-out infinite;
}

.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 24px 48px rgba(22,163,74,.40);
}

.whatsapp-icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    font-size:1.55rem;
}

.whatsapp-text{display:flex; flex-direction:column; line-height:1.15;}
.whatsapp-text strong{font-size:.92rem;}
.whatsapp-text small{margin-top:4px; color:#ECFFF2; font-size:.74rem;}

@keyframes whatsappAttention{
    0%,84%,100%{transform:translateY(0);}
    88%{transform:translateY(-7px);}
    92%{transform:translateY(0);}
    96%{transform:translateY(-3px);}
}

/* Volver arriba */
.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1100;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    color:var(--white);
    background:var(--gradient);
    cursor:pointer;
    font-size:1.25rem;
    box-shadow:0 16px 36px rgba(10,103,190,.30);
    opacity:0;
    visibility:hidden;
    transform:translateY(18px) scale(.88);
    transition:opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .3s ease;
}

.back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.back-to-top:hover{
    transform:translateY(-5px) scale(1.06);
    box-shadow:0 22px 42px rgba(10,103,190,.40);
}

.back-to-top i{transition:transform .35s ease;}
.back-to-top:hover i{transform:translateY(-3px) rotate(360deg);}

/* Footer profesional */
footer{
    position:relative;
    overflow:hidden;
    padding:76px 8% 0;
    color:#DCEAFF;
    background:linear-gradient(135deg,#041E38 0%,#073F78 62%,#082D52 100%);
}

footer::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-260px;
    right:-120px;
    border-radius:50%;
    background:rgba(255,213,74,.10);
}

.footer-content{
    position:relative;
    z-index:2;
    width:min(1280px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:1.5fr .8fr 1fr 1.15fr;
    gap:54px;
    align-items:start;
}

.footer-brand > p{
    max-width:390px;
    margin:22px 0;
    color:#BFD3EA;
    line-height:1.8;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--white);
    text-decoration:none;
}

.footer-logo img{
    width:68px;
    height:68px;
    padding:5px;
    object-fit:contain;
    border-radius:18px;
    background:var(--white);
}

.footer-logo h2{font-size:1.8rem; color:var(--secondary); line-height:1;}
.footer-logo span{display:block; margin-top:6px; color:#D8E8FA; font-size:.84rem;}

/*==================================================
ESTRUCTURA PRINCIPAL DEL FOOTER
==================================================*/

.footer-container{
    width:100%;
    max-width:1250px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1fr;
    align-items:start;
    gap:55px;
}

.footer-column{display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.footer-column h3{position:relative; margin-bottom:13px; color:var(--white); font-size:1.05rem;}
.footer-column h3::after{content:""; display:block; width:38px; height:3px; margin-top:9px; border-radius:10px; background:linear-gradient(90deg,var(--secondary),var(--red));}

.footer-column > a{
    color:#BFD3EA;
    text-decoration:none;
    transition:var(--transition);
}

.footer-column > a:hover{color:var(--secondary); transform:translateX(5px);}

.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:#BFD3EA;
    line-height:1.55;
}

.footer-contact p i{color:var(--secondary); margin-top:2px;}
.footer-contact-link{margin-top:6px; font-weight:700; color:var(--secondary)!important;}

.footer-socials{display:flex; flex-wrap:wrap; gap:10px;}
.footer-socials a{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    line-height:1;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    color:var(--white);
    background:rgba(255,255,255,.08);
    text-decoration:none;
    font-size:1.12rem;
    transition:var(--transition);
}

.footer-socials a:hover{transform:translateY(-5px); border-color:transparent;}
.footer-socials .facebook:hover{background:#1877F2;}
.footer-socials .instagram:hover{background:linear-gradient(135deg,#833AB4,#E1306C,#FCAF45);}
.footer-socials .youtube:hover{background:#FF0000;}
.footer-socials .whatsapp:hover{background:#25D366;}

.footer-copy{
    position:relative;
    z-index:2;
    width:min(1280px,100%);
    min-height:78px;
    margin:58px auto 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#9FB8D3;
    font-size:.88rem;
}

.footer-copy a{color:var(--secondary); text-decoration:none; font-weight:700;}

/* Responsive V3.1 */
@media(max-width:950px){
    .menu-toggle{display:flex;}

    .menu{
        position:absolute;
        top:calc(100% + 10px);
        left:4%;
        right:4%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:12px;
        border:1px solid var(--border);
        border-radius:20px;
        background:rgba(255,255,255,.98);
        box-shadow:0 24px 55px rgba(17,58,96,.16);
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        transition:var(--transition);
    }

    .menu.open{opacity:1; visibility:visible; transform:translateY(0);}
    .menu li{width:100%;}
    .menu a{display:block; padding:13px 15px; border-radius:12px;}
    .menu a:hover{background:var(--primary-soft);}
    .menu a::after{display:none;}

    .admissions-cta{grid-template-columns:1fr; padding:48px;}
    .footer-content{grid-template-columns:1fr 1fr;}
}

@media screen and (max-width:1000px){

    .footer-container{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:45px 50px;
    }

}

@media(max-width:650px){
    .admissions-cta{
        width:88%;
        margin:75px auto 45px;
        padding:34px 24px;
        border-radius:26px;
    }

    .admissions-benefits{flex-direction:column; align-items:stretch;}
    .admissions-benefits div{border-radius:16px;}
    .admissions-panel{padding:26px 22px;}
    .contact{padding-top:72px;}

    .whatsapp-float{left:16px; bottom:16px; width:58px; min-height:58px; padding:6px; justify-content:center;}
    .whatsapp-icon{width:46px; height:46px; flex-basis:46px;}
    .whatsapp-text{display:none;}
    .back-to-top{right:16px; bottom:16px; width:50px; height:50px;}

    footer{padding:64px 6% 0;}
    .footer-content{grid-template-columns:1fr; gap:38px;}
    .footer-copy{min-height:105px; margin-top:42px; flex-direction:column; justify-content:center; text-align:center;}
}

@media(prefers-reduced-motion:reduce){
    .whatsapp-float{animation:none;}
    .back-to-top i{transition:none;}
}

/*=====================================
HERO INTERNO
======================================*/

.internal-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:68vh;
    padding:170px 8% 110px;
    overflow:hidden;
    text-align:center;
    color:var(--white);

    background:
        url("img/colegio.jpg") center/cover no-repeat;
}

.history-hero{
    background:
        url("img/colegio.jpg") center/cover no-repeat;
}

.internal-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(17,37,82,.92),
            rgba(35,55,115,.82)
        ),
        radial-gradient(
            circle at top right,
            rgba(255,237,0,.18),
            transparent 35%
        );
}

.internal-hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
}

.internal-hero-content .section-tag{
    margin-bottom:22px;
}

.internal-hero-content h1{
    font-size:clamp(2.8rem,5vw,4.5rem);
    line-height:1.1;
    margin-bottom:26px;
    color:var(--white);
}

.internal-hero-content p{
    max-width:760px;
    margin:0 auto;
    color:rgba(255,255,255,.92);
    font-size:1.08rem;
    line-height:1.9;
}

.internal-breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:38px;
    font-size:.95rem;
}

.internal-breadcrumb a{
    color:var(--secondary);
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
}

.internal-breadcrumb a:hover{
    color:var(--white);
}

.internal-breadcrumb i{
    color:rgba(255,255,255,.65);
    font-size:.8rem;
}

.internal-breadcrumb span{
    color:rgba(255,255,255,.85);
}

/*=====================================
INTRODUCCIÓN HISTORIA
======================================*/

.history-intro {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 110px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 75px;
}

/*=====================================
IMAGEN DE INTRODUCCIÓN
======================================*/

.history-intro-image {
    position: relative;
    min-height: 520px;
}

.history-intro-image img {
    width: 100%;
    height: 520px;
    display: block;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(35, 55, 115, 0.18);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.history-intro-image:hover img {
    transform: translateY(-6px);
    box-shadow: 0 28px 65px rgba(35, 55, 115, 0.24);
}

/*=====================================
TARJETA DEL AÑO
======================================*/

.history-year-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    width: 220px;
    padding: 24px;
    border-radius: 18px;
    background: #233773;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(35, 55, 115, 0.3);
}

.history-year-card span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffed00;
}

.history-year-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 800;
}

.history-year-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/*=====================================
CONTENIDO DE INTRODUCCIÓN
======================================*/

.history-intro-content {
    max-width: 590px;
}

.history-intro-content .section-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(35, 55, 115, 0.1);
    color: #233773;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.history-intro-content h2 {
    margin: 0 0 24px;
    color: #233773;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.12;
    font-weight: 800;
}

.history-intro-content > p {
    margin: 0 0 18px;
    color: #525866;
    font-size: 1rem;
    line-height: 1.8;
}

/*=====================================
DESTACADO DE HISTORIA
======================================*/

.history-highlight {
    position: relative;
    margin-top: 32px;
    padding: 28px 30px 28px 72px;
    border-left: 5px solid #e11b14;
    border-radius: 0 18px 18px 0;
    background: #f4f6fb;
}

.history-highlight i {
    position: absolute;
    top: 24px;
    left: 25px;
    color: #e11b14;
    font-size: 2rem;
}

.history-highlight p {
    margin: 0;
    color: #233773;
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 600;
    font-style: italic;
}

/*=====================================
RESPONSIVE INTRODUCCIÓN HISTORIA
======================================*/

@media (max-width: 992px) {
    .history-intro {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 85px 0;
    }

    .history-intro-image {
        width: min(720px, 100%);
        margin: 0 auto;
    }

    .history-intro-content {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .history-intro {
        width: min(92%, 650px);
        padding: 70px 0;
    }

    .history-intro-image {
        min-height: auto;
        padding-bottom: 65px;
    }

    .history-intro-image img {
        height: 420px;
        border-radius: 20px;
    }

    .history-year-card {
        left: 50%;
        bottom: 0;
        width: min(88%, 320px);
        transform: translateX(-50%);
        text-align: center;
    }

    .history-year-card strong {
        font-size: 2.7rem;
    }

    .history-intro-content {
        text-align: center;
    }

    .history-highlight {
        padding: 65px 24px 26px;
        border-left: none;
        border-top: 5px solid #e11b14;
        border-radius: 18px;
    }

    .history-highlight i {
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .history-intro {
        padding: 55px 0;
        gap: 45px;
    }

    .history-intro-image img {
        height: 340px;
    }

    .history-year-card {
        padding: 20px;
    }

    .history-intro-content h2 {
        font-size: 2rem;
    }

    .history-intro-content > p {
        font-size: 0.96rem;
    }
}

/*=====================================
SECCIÓN LÍNEA DEL TIEMPO
======================================*/

.timeline-section {
    padding: 110px 0;
    background: #f6f8fc;
}

/*=====================================
TÍTULO DE LA SECCIÓN
======================================*/

.timeline-section .section-title {
    width: min(760px, 90%);
    margin: 0 auto 75px;
    text-align: center;
}

.timeline-section .section-title h4 {
    margin: 0 0 14px;
    color: #e11b14;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.timeline-section .section-title h2 {
    margin: 0 0 20px;
    color: #233773;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.15;
    font-weight: 800;
}

.timeline-section .section-title p {
    margin: 0 auto;
    max-width: 650px;
    color: #5d6472;
    font-size: 1rem;
    line-height: 1.75;
}

/*=====================================
CONTENEDOR DE LA LÍNEA DEL TIEMPO
======================================*/

.timeline {
    position: relative;
    width: min(1100px, 90%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        #233773,
        #e11b14,
        #ffed00
    );
    transform: translateX(-50%);
}

/*=====================================
ELEMENTOS DE LA LÍNEA DEL TIEMPO
======================================*/

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    min-height: 210px;
}

.timeline-item:nth-child(odd) .timeline-card {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}

.timeline-item:nth-child(even) .timeline-card {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
}

.timeline-year {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 6px solid #f6f8fc;
    border-radius: 50%;
    background: #233773;
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(35, 55, 115, 0.25);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/*=====================================
TARJETAS DE LA LÍNEA DEL TIEMPO
======================================*/

.timeline-card {
    position: relative;
    width: min(420px, 100%);
    padding: 34px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(35, 55, 115, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.timeline-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 55px rgba(35, 55, 115, 0.17);
}

.timeline-item:nth-child(odd) .timeline-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.timeline-item:nth-child(even) .timeline-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.timeline-card i {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 16px;
    background: rgba(35, 55, 115, 0.1);
    color: #233773;
    font-size: 1.55rem;
}

.timeline-card h3 {
    margin: 0 0 14px;
    color: #233773;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 800;
}

.timeline-card p {
    margin: 0;
    color: #5d6472;
    font-size: 0.98rem;
    line-height: 1.7;
}

/*=====================================
ÚLTIMO ELEMENTO DE LA LÍNEA DEL TIEMPO
======================================*/

.timeline-item:last-child .timeline-year {
    background: #e11b14;
}

.timeline-item:last-child .timeline-card {
    border: 2px solid rgba(225, 27, 20, 0.15);
}

.timeline-item:last-child .timeline-card i {
    background: rgba(225, 27, 20, 0.1);
    color: #e11b14;
}

/*=====================================
RESPONSIVE LÍNEA DEL TIEMPO
======================================*/

@media (max-width: 900px) {
    .timeline-section {
        padding: 85px 0;
    }

    .timeline {
        width: min(720px, 90%);
        gap: 42px;
    }

    .timeline::before {
        left: 40px;
        transform: none;
    }

    .timeline-item {
        grid-template-columns: 80px 1fr;
        min-height: auto;
        align-items: flex-start;
    }

    .timeline-year {
        grid-column: 1;
        grid-row: 1;
        width: 72px;
        height: 72px;
        margin: 0;
        font-size: 0.9rem;
    }

    .timeline-item:nth-child(odd) .timeline-card,
    .timeline-item:nth-child(even) .timeline-card {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        width: 100%;
        margin-left: 20px;
    }

    .timeline-item:nth-child(odd) .timeline-card::after,
    .timeline-item:nth-child(even) .timeline-card::after {
        top: 28px;
        left: -13px;
        right: auto;
        transform: rotate(45deg);
    }
}

@media (max-width: 600px) {
    .timeline-section {
        padding: 70px 0;
    }

    .timeline-section .section-title {
        margin-bottom: 55px;
    }

    .timeline {
        width: 92%;
    }

    .timeline::before {
        left: 30px;
        width: 3px;
    }

    .timeline-item {
        grid-template-columns: 60px 1fr;
    }

    .timeline-year {
        width: 58px;
        height: 58px;
        border-width: 5px;
        font-size: 0.75rem;
    }

    .timeline-item:nth-child(odd) .timeline-card,
    .timeline-item:nth-child(even) .timeline-card {
        margin-left: 14px;
    }

    .timeline-card {
        padding: 26px 22px;
        border-radius: 18px;
    }

    .timeline-card i {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }

    .timeline-card h3 {
        font-size: 1.18rem;
    }

    .timeline-card p {
        font-size: 0.94rem;
    }
}

/*=====================================
MISIÓN Y VISIÓN
======================================*/

.mission-vision {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 110px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

/*=====================================
TARJETAS DE MISIÓN Y VISIÓN
======================================*/

.mission-card,
.vision-card {
    position: relative;
    overflow: hidden;
    padding: 48px 42px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(35, 55, 115, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(35, 55, 115, 0.18);
}

.mission-card::before,
.vision-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
}

.mission-card::before {
    background: #233773;
}

.vision-card::before {
    background: #e11b14;
}

/*=====================================
ICONOS DE MISIÓN Y VISIÓN
======================================*/

.mission-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 20px;
    background: rgba(35, 55, 115, 0.1);
    color: #233773;
    font-size: 2rem;
}

.vision-card .mission-icon {
    background: rgba(225, 27, 20, 0.1);
    color: #e11b14;
}

/*=====================================
CONTENIDO DE MISIÓN Y VISIÓN
======================================*/

.mission-card span,
.vision-card span {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.mission-card span {
    color: #233773;
}

.vision-card span {
    color: #e11b14;
}

.mission-card h2,
.vision-card h2 {
    margin: 0 0 20px;
    color: #233773;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.2;
    font-weight: 800;
}

.mission-card p,
.vision-card p {
    margin: 0;
    color: #5d6472;
    font-size: 1rem;
    line-height: 1.8;
}

/*=====================================
DECORACIÓN DE TARJETAS
======================================*/

.mission-card::after,
.vision-card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0.08;
}

.mission-card::after {
    background: #233773;
}

.vision-card::after {
    background: #e11b14;
}

/*=====================================
RESPONSIVE MISIÓN Y VISIÓN
======================================*/

@media (max-width: 850px) {
    .mission-vision {
        grid-template-columns: 1fr;
        padding: 85px 0;
    }

    .mission-card,
    .vision-card {
        padding: 42px 36px;
    }
}

@media (max-width: 520px) {
    .mission-vision {
        width: 92%;
        padding: 70px 0;
        gap: 25px;
    }

    .mission-card,
    .vision-card {
        padding: 34px 26px;
        border-radius: 20px;
    }

    .mission-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 22px;
        font-size: 1.7rem;
    }

    .mission-card h2,
    .vision-card h2 {
        font-size: 1.8rem;
    }

    .mission-card p,
    .vision-card p {
        font-size: 0.95rem;
    }
}

/*=====================================
PRINCIPIOS
======================================*/

.principles-section {
    padding: 110px 0;
    background: #f8f9fc;
}

.principles-section .section-title {
    width: min(760px, 90%);
    margin: 0 auto 70px;
    text-align: center;
}

.principles-section .section-title h4 {
    margin-bottom: 14px;
    color: #E11B14;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.principles-section .section-title h2 {
    margin-bottom: 18px;
    color: #233773;
    font-size: clamp(2rem,4vw,3rem);
    font-weight: 800;
}

.principles-section .section-title p {
    color: #5d6472;
    line-height: 1.8;
}

/*=====================================
GRID
======================================*/

.principles-grid{
    width:min(1180px,90%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/*=====================================
CARDS
======================================*/

.principle-card{

    background:#fff;

    padding:40px;

    border-radius:22px;

    box-shadow:0 18px 45px rgba(35,55,115,.10);

    transition:.35s;
}

.principle-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(35,55,115,.18);

}

.principle-card i{

    width:70px;
    height:70px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:rgba(35,55,115,.10);

    color:#233773;

    font-size:2rem;

    margin-bottom:25px;

}

.principle-card h3{

    color:#233773;

    margin-bottom:15px;

    font-size:1.45rem;

    font-weight:800;

}

.principle-card p{

    color:#5d6472;

    line-height:1.8;

}

/*=====================================
RESPONSIVE PRINCIPIOS
======================================*/

@media(max-width:850px){

.principles-grid{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.principles-section{

padding:75px 0;

}

.principle-card{

padding:32px 26px;

}

.principle-card i{

width:60px;
height:60px;

font-size:1.7rem;

}

}

/*=====================================
VALORES
======================================*/

.values-section {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 110px 0;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

/*=====================================
CONTENIDO DE VALORES
======================================*/

.values-content {
    max-width: 520px;
}

.values-content .section-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(225, 27, 20, 0.1);
    color: #e11b14;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.values-content h2 {
    margin: 0 0 22px;
    color: #233773;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.15;
    font-weight: 800;
}

.values-content p {
    margin: 0 0 30px;
    color: #5d6472;
    font-size: 1rem;
    line-height: 1.8;
}

/*=====================================
BOTÓN DE VALORES
======================================*/

.values-content .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 12px;
    background: #233773;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.3s ease, background 0.3s ease,
        box-shadow 0.3s ease;
}

.values-content .btn-primary:hover {
    background: #e11b14;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(225, 27, 20, 0.25);
}

.values-content .btn-primary i {
    transition: transform 0.3s ease;
}

.values-content .btn-primary:hover i {
    transform: translateX(5px);
}

/*=====================================
GRID DE VALORES
======================================*/

.values-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/*=====================================
TARJETAS DE VALORES
======================================*/

.value-card {
    position: relative;
    overflow: hidden;
    padding: 30px 32px 30px 105px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(35, 55, 115, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.value-card:hover {
    transform: translateX(8px);
    box-shadow: 0 22px 50px rgba(35, 55, 115, 0.17);
}

.value-card i {
    position: absolute;
    top: 50%;
    left: 30px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(35, 55, 115, 0.1);
    color: #233773;
    font-size: 1.55rem;
    transform: translateY(-50%);
}

.value-card h3 {
    margin: 0 0 9px;
    color: #233773;
    font-size: 1.3rem;
    font-weight: 800;
}

.value-card p {
    margin: 0;
    color: #5d6472;
    font-size: 0.96rem;
    line-height: 1.7;
}

/*=====================================
VARIACIONES DE COLOR
======================================*/

.value-card:nth-child(2) i {
    background: rgba(225, 27, 20, 0.1);
    color: #e11b14;
}

.value-card:nth-child(3) i {
    background: rgba(255, 237, 0, 0.22);
    color: #233773;
}

.value-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #233773;
}

.value-card:nth-child(2)::before {
    background: #e11b14;
}

.value-card:nth-child(3)::before {
    background: #ffed00;
}

/*=====================================
RESPONSIVE VALORES
======================================*/

@media (max-width: 900px) {
    .values-section {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 85px 0;
    }

    .values-content {
        max-width: 720px;
        text-align: center;
        margin: 0 auto;
    }

    .values-grid {
        width: min(720px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .values-section {
        width: 92%;
        padding: 70px 0;
    }

    .value-card {
        padding: 92px 24px 26px;
        text-align: center;
    }

    .value-card i {
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
    }

    .value-card:hover {
        transform: translateY(-6px);
    }

    .values-content .btn-primary {
        width: 100%;
    }
}

/*=====================================
CTA HISTORIA
======================================*/

.history-cta {
    position: relative;
    overflow: hidden;
    width: min(1180px, 90%);
    margin: 0 auto 110px;
    padding: 58px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(35, 55, 115, 0.98),
            rgba(25, 39, 88, 0.98)
        );
    box-shadow: 0 24px 60px rgba(35, 55, 115, 0.28);
}

/*=====================================
DECORACIÓN CTA
======================================*/

.history-cta::before,
.history-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.history-cta::before {
    top: -110px;
    right: -70px;
    width: 260px;
    height: 260px;
    background: rgba(255, 237, 0, 0.12);
}

.history-cta::after {
    bottom: -130px;
    left: 35%;
    width: 280px;
    height: 280px;
    background: rgba(225, 27, 20, 0.12);
}

.history-cta > div,
.history-cta > a {
    position: relative;
    z-index: 2;
}

/*=====================================
CONTENIDO CTA
======================================*/

.history-cta > div {
    max-width: 720px;
}

.history-cta span {
    display: inline-block;
    margin-bottom: 13px;
    color: #ffed00;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.history-cta h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.12;
    font-weight: 800;
}

.history-cta p {
    margin: 0;
    max-width: 650px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.75;
}

/*=====================================
BOTÓN CTA
======================================*/

.history-cta .btn-primary {
    flex-shrink: 0;
    min-width: 210px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 13px;
    background: #ffed00;
    color: #233773;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(255, 237, 0, 0.2);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.history-cta .btn-primary:hover {
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(255, 255, 255, 0.18);
}

.history-cta .btn-primary i {
    transition: transform 0.3s ease;
}

.history-cta .btn-primary:hover i {
    transform: translateX(5px);
}

/*=====================================
RESPONSIVE CTA HISTORIA
======================================*/

@media (max-width: 900px) {
    .history-cta {
        padding: 50px 42px;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 85px;
    }
}

@media (max-width: 600px) {
    .history-cta {
        width: 92%;
        padding: 40px 26px;
        border-radius: 22px;
        text-align: center;
        align-items: center;
        margin-bottom: 70px;
    }

    .history-cta > div {
        max-width: 100%;
    }

    .history-cta .btn-primary {
        width: 100%;
        min-width: 0;
    }
}

/* =================================
   DECLARACIÓN DEL PEI
================================= */

.pei-declaration {
    position: relative;
    overflow: hidden;
    padding: 130px 20px;
    background: #ffffff;
}

.pei-declaration::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(35, 55, 115, 0.12);
    border-radius: 50%;
}

.pei-declaration::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(225, 27, 20, 0.1);
    border-radius: 50%;
}

/*==================================
     AJUSTES DE TEXTO - DECLARACIÓN
==================================*/

.pei-declaration h2 {
    font-weight: 800;
    letter-spacing: -1.5px;
}

.pei-main-phrase {
    font-weight: 500;
    line-height: 1.45;
}

.pei-concept {
    font-weight: 800;
    letter-spacing: 1px;
}

.pei-declaration-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.pei-declaration .section-label {
    display: inline-block;
    margin-bottom: 24px;
    color: #e11b14;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pei-declaration h2 {
    margin-bottom: 30px;
    color: #233773;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
}

.pei-main-phrase {
    max-width: 850px;
    margin: 0 auto;
    color: #333333;
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    line-height: 1.6;
}

.pei-concepts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 45px;
    margin-top: 70px;
}

.pei-concept {
    position: relative;
    padding-bottom: 10px;
    color: #233773;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: default;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.pei-concept::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #ffed00;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.pei-concept:hover {
    color: #e11b14;
    transform: translateY(-5px);
}

.pei-concept:hover::after {
    width: 100%;
}

/* =================================
   RESPONSIVE DECLARACIÓN PEI
================================= */

@media (max-width: 768px) {

    .pei-declaration {
        padding: 90px 20px;
    }

    .pei-main-phrase {
        line-height: 1.5;
    }

    .pei-concepts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
        margin-top: 55px;
    }

    .pei-concept {
        padding: 16px 10px;
    }
}

@media (max-width: 480px) {

    .pei-declaration {
        padding: 75px 18px;
    }

    .pei-concepts {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* =================================
   CORAZÓN DEL PEI
================================= */

.pei-core{
    padding:120px 20px;
    background:#f8faff;
}

.pei-core .section-heading{
    text-align:center;
    max-width:800px;
    margin:0 auto 90px;
}

/*==================================
      TEXTO DEL CORAZÓN DEL PEI
==================================*/

.pei-core .section-heading h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

.pei-core .section-heading p {
    font-size: 1.05rem;
    line-height: 1.7;
    font-weight: 400;
}

.diagram-center h3 {
    font-weight: 800;
    letter-spacing: -0.4px;
}

.diagram-item h4 {
    font-weight: 800;
    letter-spacing: -0.2px;
}

.diagram-item p {
    font-weight: 400;
    line-height: 1.6;
}

.pei-diagram{

    position:relative;

    width:700px;
    height:700px;

    margin:0 auto;

}

.diagram-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #233773;
    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    box-shadow: 0 15px 40px rgba(35, 55, 115, 0.25);
    border: 8px solid white;

    z-index: 10;

    transition: all .35s ease;
}



.diagram-center i{

    font-size:3rem;

    color:#FFED00;

    margin-bottom:15px;

}

.diagram-center h3{

font-size:1.35rem;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;

}

.diagram-item{

    position:absolute;

    width:180px;

    text-align:center;

    transition:.35s;

}

.diagram-item i{

    width:80px;
    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 20px;

    border-radius:50%;

    background:#fff;

    color:#233773;

    font-size:2rem;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.diagram-item h4{

    color:#233773;

    margin-bottom:10px;

}

.diagram-item p{

    color:#666;

    font-size:.95rem;

    line-height:1.6;

}

.diagram-item.top i{
    color:#233773;
}

.diagram-item.left i{
    color:#2E8B57;
}

.diagram-item.right i{
    color:#D8A500;
}

.diagram-item.bottom i{
    color:#E11B14;
}

/*==================================
      POSICIONES DEL DIAGRAMA
==================================*/

.diagram-item.top {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.diagram-item.left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.diagram-item.right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.diagram-item.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/*==================================
        ANIMACIONES DEL DIAGRAMA
==================================*/

/*
La posición completa permanece quieta.
Solo se anima el círculo del icono para evitar
que las líneas y los textos se descuadren.
*/

.diagram-item i {
    transform-origin: center;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.diagram-item:hover i {
    transform: translateY(-6px) scale(1.08);

    color: #E11B14;

    box-shadow:
        0 16px 32px rgba(35, 55, 115, 0.17);
}

.diagram-item h4 {
    transition: color 0.3s ease;
}

.diagram-item:hover h4 {
    color: #E11B14;
}



/*==================================
          PILARES DEL PEI
==================================*/

.pei-pillars {
    padding: 110px 8%;
    background:
        linear-gradient(
            135deg,
            rgba(35, 55, 115, 0.035),
            rgba(255, 255, 255, 0) 45%
        ),
        #ffffff;
}

.pei-pillars .section-heading {
    max-width: 760px;
    margin-bottom: 65px;
}

.pei-pillars .section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    color: #233773;
    margin: 12px 0 18px;
}

.pei-pillars .section-heading p {
    max-width: 680px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5f6472;
}

.pillar-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pillar-item {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 35px;

    min-height: 190px;
    padding: 38px 48px;

    background: #ffffff;
    border: 1px solid rgba(35, 55, 115, 0.12);
    border-radius: 22px;

    box-shadow: 0 12px 35px rgba(35, 55, 115, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* Franja lateral de identidad */

.pillar-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 7px;
    height: 100%;

    background: #233773;

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform 0.35s ease;
}

/* Número gigante decorativo */

.pillar-item::after {
    content: attr(data-number);

    position: absolute;
    right: 30px;
    top: 50%;

    transform: translateY(-50%);

    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 800;
    line-height: 1;

    color: rgba(35, 55, 115, 0.045);

    pointer-events: none;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.pillar-number {
    position: relative;
    z-index: 2;

    font-size: clamp(3.3rem, 6vw, 5.2rem);
    font-weight: 800;
    line-height: 1;

    color: #233773;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.pillar-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.pillar-content h3 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;

    color: #111827;

    margin-bottom: 14px;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.pillar-content h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 4px;

    margin-top: 12px;

    background: #ffed00;
    border-radius: 50px;

    transition: width 0.35s ease;
}

.pillar-content p {
    max-width: 670px;

    font-size: 1.05rem;
    line-height: 1.75;

    color: #606575;
}

/* Interacción */

.pillar-item:hover {
    transform: translateY(-6px);

    border-color: rgba(35, 55, 115, 0.3);

    box-shadow:
        0 20px 45px rgba(35, 55, 115, 0.13);
}

.pillar-item:hover::before {
    transform: scaleY(1);
}

/* Integral */

.pillar-item:nth-child(1):hover::after{
    color:rgba(35,55,115,.07);
}

/* Autonomía */

.pillar-item:nth-child(2):hover::after{
    color:rgba(46,139,87,.08);
}

/* Paz */

.pillar-item:nth-child(3):hover::after{
    color:rgba(217,164,0,.08);
}

/* Felicidad */

.pillar-item:nth-child(4):hover::after{
    color:rgba(225,27,20,.08);
}

/* Integral */

.pillar-item:nth-child(1):hover .pillar-number{
    color:#233773;
}

/* Autonomía */

.pillar-item:nth-child(2):hover .pillar-number{
    color:#2E8B57;
}

/* Paz */

.pillar-item:nth-child(3):hover .pillar-number{
    color:#D9A400;
}

/* Felicidad */

.pillar-item:nth-child(4):hover .pillar-number{
    color:#E11B14;
}

.pillar-item:hover .pillar-content h3 {
    color: #233773;
    transform: translateX(6px);
}

.pillar-item:hover .pillar-content h3::after {
    width: 95px;
}

/* Variaciones de cada pilar */

.pillar-item:nth-child(2)::before {
    background: #e11b14;
}

.pillar-item:nth-child(3)::before {
    background: #ffed00;
}

.pillar-item:nth-child(4)::before {
    background: #0afff3;
}

/* Responsive */

@media (max-width: 768px) {

    .pei-pillars {
        padding: 80px 6%;
    }

    .pillar-item {
        grid-template-columns: 1fr;
        gap: 18px;

        min-height: auto;
        padding: 32px 28px;
    }

    .pillar-number {
        font-size: 3.5rem;
    }

    .pillar-item::after {
        right: 10px;
        top: 25%;

        font-size: 7rem;
    }

    .pillar-content p {
        font-size: 1rem;
    }
}

/* ==========================================================
   PÁGINA PREESCOLAR
========================================================== */


/* ==========================================================
   HERO PREESCOLAR
========================================================== */

.preschool-hero {
    min-height: 690px;
    background:
        linear-gradient(
            90deg,
            rgba(16, 31, 78, 0.94) 0%,
            rgba(25, 49, 112, 0.85) 52%,
            rgba(35, 55, 115, 0.42) 100%
        ),
        url("img/preescolar-hero.jpg") center / cover no-repeat;
}

.preschool-hero .internal-overlay {
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(255, 237, 0, 0.16),
            transparent 32%
        );
}

.preschool-hero .internal-hero-content {
    max-width: 780px;
}

.preschool-hero-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(46,125,50,.25);

    border:1px solid #78BEFF;

    margin-bottom:30px;

    font-size:.88rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#ffffff;

}

.preschool-hero-label::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#78BEFF;
    flex-shrink:0;
}

.preschool-hero-label i{

    color:#FFED00;

    font-size:1rem;

}

.preschool-hero h1 {
    max-width: 760px;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 1.08;
}

.preschool-hero p {
    max-width: 680px;
    font-size: 1.08rem;
    line-height: 1.8;
}


/* ==========================================================
   INFORMACIÓN DESTACADA
========================================================== */

.preschool-highlights {
    position: relative;
    z-index: 5;

    margin-top: -72px;
    padding: 0 0 90px;
}

.preschool-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.preschool-highlight {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    min-height: 170px;
    padding: 28px 24px;

    background: #ffffff;
    border: 1px solid rgba(35, 55, 115, 0.09);
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(35, 55, 115, 0.11);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.preschool-highlight:hover {
    transform: translateY(-8px);

    border-color: rgba(35, 55, 115, 0.2);

    box-shadow:
        0 25px 55px rgba(35, 55, 115, 0.16);
}

.preschool-highlight-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 52px;
    height: 52px;

    color: #233773;
    background: rgba(255, 237, 0, 0.28);

    border-radius: 16px;

    font-size: 1.45rem;
}

.preschool-highlight:nth-child(2)
.preschool-highlight-icon {
    color: #ffffff;
    background: #233773;
}

.preschool-highlight:nth-child(3)
.preschool-highlight-icon {
    color: #ffffff;
    background: #e11b14;
}

.preschool-highlight:nth-child(4)
.preschool-highlight-icon {
    color: #233773;
    background: #ffed00;
}

.preschool-highlight h3 {
    margin-bottom: 8px;

    color: #17265a;

    font-size: 1rem;
    line-height: 1.35;

    font-weight:600;
}

.preschool-highlight p {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: #4f5d73;

}


/* ==========================================================
   BIENVENIDA AL PREESCOLAR
========================================================== */

.preschool-welcome {
    padding: 110px 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}

.preschool-welcome .section-label {
    font-weight: 700;
}

.preschool-welcome-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;
}

.preschool-welcome-image {
    position: relative;

    min-height: 530px;
}

.preschool-welcome-image::before {
    content: "";

    position: absolute;
    top: -28px;
    left: -28px;
    z-index: 0;

    width: 160px;
    height: 160px;

    background:
        radial-gradient(
            circle,
            rgba(255, 237, 0, 0.75) 3px,
            transparent 4px
        );

    background-size: 18px 18px;

    opacity: 0.55;
}

.preschool-welcome-image::after {
    content: "";

    position: absolute;
    right: -50px;
    bottom: -50px;
    z-index: 0;

    width: 190px;
    height: 190px;

    background: rgba(35, 55, 115, 0.08);
    border-radius: 50%;
}

.preschool-welcome-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 530px;

    object-fit: cover;

    border-radius: 35px 90px 35px 35px;

    box-shadow:
        0 25px 60px rgba(35, 55, 115, 0.18);
}

.preschool-image-badge {
    position: absolute;
    right: -35px;
    bottom: 35px;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 13px;

    max-width: 270px;
    padding: 18px 22px;

    color: #ffffff;
    background: #233773;

    border: 5px solid #ffffff;
    border-radius: 18px;

    box-shadow:
        0 16px 35px rgba(35, 55, 115, 0.22);
}

.preschool-image-badge i {
    color: #ffed00;
    font-size: 1.8rem;
}

.preschool-image-badge span {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.preschool-welcome-content h2 {
    margin: 14px 0 24px;

    color: #17265a;

    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.2;
}

.preschool-welcome-content > p {

    margin-bottom: 17px;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: #4f5d73;

}

.preschool-welcome-points {
    display: grid;
    gap: 15px;

    margin-top: 30px;
}

.preschool-welcome-point {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 16px;

    background: #ffffff;
    border: 1px solid rgba(35, 55, 115, 0.08);
    border-radius: 13px;

    box-shadow:
        0 8px 24px rgba(35, 55, 115, 0.06);
}

.preschool-welcome-point i {
    flex-shrink: 0;

    color: #233773;

    font-size: 1.15rem;
}

.preschool-welcome-point span {
    color: #344054;

    font-size: 0.94rem;
    font-weight: 500;
}


/* ==========================================================
   FORMACIÓN INTEGRAL
========================================================== */

.preschool-development {
    position: relative;

    padding: 110px 0;

    background: #eef3ff;
    overflow: hidden;
}

.preschool-development::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -90px;

    width: 330px;
    height: 330px;

    background: rgba(255, 237, 0, 0.18);
    border-radius: 50%;
}

.preschool-development::after {
    content: "";

    position: absolute;
    bottom: -160px;
    left: -120px;

    width: 360px;
    height: 360px;

    border: 60px solid rgba(35, 55, 115, 0.05);
    border-radius: 50%;
}

.preschool-development .container {
    position: relative;
    z-index: 1;
}

.preschool-development .section-heading {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.preschool-development .section-label {
    font-weight: 700;
}

.preschool-development-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    margin-top: 55px;
}

.preschool-development-card {
    position: relative;

    padding: 35px 28px;

    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 25px;

    box-shadow:
        0 12px 35px rgba(35, 55, 115, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.preschool-development-card:hover {
    transform: translateY(-10px);

    border-color: rgba(35, 55, 115, 0.14);

    box-shadow:
        0 22px 45px rgba(35, 55, 115, 0.14);
}

.preschool-card-icon {
    display: grid;
    place-items: center;

    width: 66px;
    height: 66px;
    margin-bottom: 25px;

    color: #233773;
    background: rgba(255, 237, 0, 0.35);

    border-radius: 21px;

    font-size: 1.75rem;

    transition:
        transform 0.3s ease,
        border-radius 0.3s ease;
}

.preschool-development-card:hover
.preschool-card-icon {
    transform: rotate(-5deg) scale(1.08);
    border-radius: 50%;
}

.preschool-development-card:nth-child(2)
.preschool-card-icon {
    color: #ffffff;
    background: #233773;
}

.preschool-development-card:nth-child(3)
.preschool-card-icon {
    color: #ffffff;
    background: #e11b14;
}

.preschool-development-card:nth-child(4)
.preschool-card-icon {
    color: #233773;
    background: #ffed00;
}

.preschool-development-card h3 {
    margin-bottom: 13px;

    color: #17265a;

    font-size: 1.15rem;

    font-weight:600;
}

.preschool-development-card p {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: #4f5d73;

}


/* ==========================================================
   PRIMEROS APRENDIZAJES
========================================================== */

.preschool-learning {
    padding: 120px 0;

    background: #ffffff;
}

.preschool-learning .section-label {
    font-weight: 700;
}

.preschool-learning-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: center;
    gap: 95px;
}

.preschool-learning-content h2 {
    margin: 14px 0 24px;

    color: #17265a;

    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.2;
}

.preschool-learning-content > p {

    margin-bottom: 35px;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: #4f5d73;

}

.preschool-learning-list {
    display: grid;
    gap: 18px;
}

.preschool-learning-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    padding: 23px;

    background: #f8faff;
    border: 1px solid rgba(35, 55, 115, 0.08);
    border-radius: 18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.preschool-learning-item:hover {
    transform: translateX(8px);

    background: #ffffff;
    border-color: rgba(35, 55, 115, 0.18);
}

.preschool-learning-number {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    color: #233773;
    background: #ffed00;

    border-radius: 14px;

    font-family: "Poppins", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
}

.preschool-learning-item:nth-child(2)
.preschool-learning-number {
    color: #ffffff;
    background: #233773;
}

.preschool-learning-item:nth-child(3)
.preschool-learning-number {
    color: #ffffff;
    background: #e11b14;
}

.preschool-learning-item h3 {
    margin-bottom: 6px;

    color: #17265a;

    font-size: 1.05rem;

    font-weight:600;
}

.preschool-learning-item p {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: .97rem;

    font-weight: 500;

    line-height: 1.8;

    color: #4f5d73;

}


/* ==========================================================
   VISUAL DE APRENDIZAJE
========================================================== */

.preschool-learning-visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 520px;
}

.preschool-learning-visual::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    background: rgba(35, 55, 115, 0.07);
    border-radius: 50%;
}

.preschool-learning-visual::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border: 2px dashed rgba(35, 55, 115, 0.2);
    border-radius: 50%;

    animation: preschool-rotate 25s linear infinite;
}

.preschool-visual-main {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 280px;
    height: 280px;
    padding: 40px;

    color: #ffffff;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #2f4a98,
            #182b6b
        );

    border:none;
    border-radius: 50%;

    box-shadow:
        0 25px 60px rgba(35, 55, 115,.28);
}

.preschool-visual-main i {
    margin-bottom: 18px;

    color: #ffed00;

    font-size: 4rem;
}

.preschool-visual-main h3 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 1.35rem;
}

.preschool-visual-main p {
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.88rem;
    line-height: 1.65;
}

.preschool-visual-decoration {
    position: absolute;
    z-index: 3;

    display: grid;
    place-items: center;

    border: 7px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 12px 30px rgba(35, 55, 115, 0.18);

    animation: preschool-float 4s ease-in-out infinite;
}

.preschool-visual-decoration i {
    font-size: 1.4rem;
}

.decoration-one {
    top: 55px;
    right: 35px;

    width: 78px;
    height: 78px;

    color: #233773;
    background: #ffed00;
}

.decoration-two {
    bottom: 70px;
    left: 20px;

    width: 88px;
    height: 88px;

    color: #ffffff;
    background: #e11b14;

    animation-delay: 0.8s;
}

.decoration-three {
    top: 110px;
    left: 35px;

    width: 62px;
    height: 62px;

    color: #ffffff;
    background: #233773;

    animation-delay: 1.5s;
}


/* ==========================================================
   AMBIENTE SEGURO
========================================================== */

.preschool-environment {
    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            #16285f 0%,
            #233773 60%,
            #304b99 100%
        );
}

.preschool-environment .section-label {
    color: #ffed00;
    font-weight: 700;
}

.preschool-environment .section-heading h2 {
    color: #ffffff;
}

.preschool-environment .section-heading p {
    color: rgba(255, 255, 255, 0.75);
}

.preschool-environment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    margin-top: 55px;
}

.preschool-environment-card {
    padding: 38px 30px;

    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;

    backdrop-filter: blur(10px);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.preschool-environment-card:hover {
    transform: translateY(-9px);

    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 237, 0, 0.45);
}

.preschool-environment-card > i {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;
    margin-bottom: 25px;

    color: #233773;
    background: #ffed00;

    border-radius: 20px;

    font-size: 1.75rem;
}

.preschool-environment-card h3 {
    margin-bottom: 13px;

    color: #ffffff;

    font-size: 1.2rem;

    font-weight:600;
}

.preschool-environment-card p {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: rgba(255,255,255,.84);

}


/* ==========================================================
   CTA PREESCOLAR
========================================================== */

.preschool-cta {
    padding: 95px 0;

    background:#eef3ff;

    position:relative;

    overflow:hidden;
}

.preschool-cta::before{

content:"";

position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:rgba(35,55,115,.06);

top:-180px;
left:-130px;

}

.preschool-cta::after{

content:"";

position:absolute;

width:340px;
height:340px;

border-radius:50%;

background:rgba(225,27,20,.06);

bottom:-150px;
right:-90px;

}

.preschool-cta-content {
    
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;

    padding: 10px 0;

}
    
.preschool-cta-content::before{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    background:rgba(255,237,0,.20);

    border-radius:50%;

    top:-20px;
    right:180px;

}

.preschool-cta-content::after{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    background:#E11B14;

    border-radius:50%;

    left:40px;
    bottom:-15px;

    opacity:.35;

}    

.preschool-cta-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #233773;

    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.preschool-cta-content h2 {
    max-width: 750px;
    margin-bottom: 16px;

    color: #17265a;

    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.2;
}

.preschool-cta-content p {

    max-width: 700px;

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.9;

    color: #4f5d73;

}

.preschool-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 12px;

    min-width: 235px;
    padding: 17px 25px;

    color: #ffffff;
    background: #233773;
    border: 2px solid #233773;
}

.preschool-cta-button:hover {
    color: #233773;
    background: transparent;
}

.preschool-cta-button i {
    transition: transform 0.3s ease;
}

.preschool-cta-button:hover i {
    transform: translateX(6px);
}


/* ==========================================================
   ANIMACIONES PREESCOLAR
========================================================== */

@keyframes preschool-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }

}

@keyframes preschool-rotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   RESPONSIVE PREESCOLAR
========================================================== */

@media (max-width: 1100px) {

    .preschool-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .preschool-development-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .preschool-welcome-grid,
    .preschool-learning-grid {
        gap: 55px;
    }

}


@media (max-width: 900px) {

    .preschool-hero {
        min-height: 620px;

        background-position: 62% center;
    }

    .preschool-highlights {
        margin-top: -45px;
    }

    .preschool-welcome-grid,
    .preschool-learning-grid {
        grid-template-columns: 1fr;
    }

    .preschool-welcome-image {
        max-width: 680px;
        margin: 0 auto;
    }

    .preschool-welcome-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .preschool-learning-visual {
        min-height: 500px;
    }

    .preschool-environment-grid {
        grid-template-columns: 1fr;
    }

    .preschool-cta-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

}


@media (max-width: 650px) {

    .preschool-hero {
        min-height: 600px;

        background-position: 68% center;
    }

    .preschool-hero .internal-hero-content {
        padding-top: 40px;
    }

    .preschool-hero-label {
        font-size: 0.7rem;
    }

    .preschool-hero h1 {
        font-size: 2.35rem;
    }

    .preschool-highlights {
        margin-top: 0;
        padding-top: 35px;
    }

    .preschool-highlight-grid,
    .preschool-development-grid {
        grid-template-columns: 1fr;
    }

    .preschool-highlight {
        min-height: auto;
    }

    .preschool-welcome,
    .preschool-development,
    .preschool-learning,
    .preschool-environment {
        padding: 80px 0;
    }

    .preschool-welcome-image,
    .preschool-welcome-image img {
        min-height: 390px;
        height: 390px;
    }

    .preschool-welcome-image img {
        border-radius: 25px 60px 25px 25px;
    }

    .preschool-image-badge {
        right: 15px;
        bottom: 18px;

        max-width: 240px;
    }

    .preschool-learning-visual {
        min-height: 410px;
    }

    .preschool-learning-visual::before {
        width: 330px;
        height: 330px;
    }

    .preschool-learning-visual::after {
        width: 285px;
        height: 285px;
    }

    .preschool-visual-main {
        width: 235px;
        height: 235px;
        padding: 30px;

        border-width: 9px;
    }

    .preschool-visual-main i {
        font-size: 3.1rem;
    }

    .decoration-one {
        top: 35px;
        right: 5px;

        width: 65px;
        height: 65px;
    }

    .decoration-two {
        bottom: 35px;
        left: 0;

        width: 72px;
        height: 72px;
    }

    .decoration-three {
        top: 80px;
        left: 0;

        width: 53px;
        height: 53px;
    }

    .preschool-cta {
        padding: 75px 0;
    }

    .preschool-cta-button {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .preschool-learning-visual::before {
        width: 290px;
        height: 290px;
    }

    .preschool-learning-visual::after {
        width: 250px;
        height: 250px;
    }

    .preschool-visual-main {
        width: 215px;
        height: 215px;
    }

    .preschool-visual-main p {
        display: none;
    }


}

/*==================================================
PÁGINA PRIMARIA
==================================================*/

/*==================================================
HERO PRIMARIA
==================================================*/

.primary-hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:130px 7% 90px;
    background:
        linear-gradient(
            120deg,
            rgba(24,43,101,.97) 0%,
            rgba(35,55,115,.94) 55%,
            rgba(42,67,139,.90) 100%
        );
}

.primary-hero-overlay{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(255,237,0,.18),
            transparent 32%
        ),
        linear-gradient(
            90deg,
            rgba(10,24,68,.20),
            transparent
        );
    pointer-events:none;
}

/* Formas decorativas del fondo */

.primary-hero-decoration{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.primary-hero-decoration-one{
    width:430px;
    height:430px;
    top:-180px;
    right:-90px;
    border:80px solid rgba(255,237,0,.07);
}

.primary-hero-decoration-two{
    width:260px;
    height:260px;
    bottom:-130px;
    left:38%;
    background:rgba(255,255,255,.035);
}

/* Contenedor principal */

.primary-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1250px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(370px,.85fr);
    align-items:center;
    gap:90px;
}

/* Contenido de texto */

.primary-hero-text{
    max-width:710px;
}

.primary-hero-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    padding:9px 17px;
    border:1px solid rgba(255,237,0,.42);
    border-radius:50px;
    background:rgba(255,237,0,.11);
    color:#FFED00;
    font-family:"Poppins",sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.primary-hero-label::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FFED00;
    box-shadow:0 0 0 5px rgba(255,237,0,.13);
}

.primary-hero-text h1{
    max-width:760px;
    margin:0 0 24px;
    color:#ffffff;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.8rem,5vw,4.6rem);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-2.5px;
}

.primary-hero-text > p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.84);
    font-family:"Poppins",sans-serif;
    font-size:1.05rem;
    font-weight:500;
    line-height:1.9;
}

/* Botones */

.primary-hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:34px;
}

.primary-main-button,
.primary-secondary-button{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 25px;
    border-radius:12px;
    font-family:"Poppins",sans-serif;
    font-size:.92rem;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.primary-main-button{
    border:1px solid #FFED00;
    background:#FFED00;
    color:#233773;
    box-shadow:0 12px 28px rgba(255,237,0,.20);
}

.primary-main-button:hover{
    transform:translateY(-4px);
    background:#ffffff;
    border-color:#ffffff;
    box-shadow:0 16px 34px rgba(0,0,0,.20);
}

.primary-main-button i{
    font-size:1rem;
}

.primary-secondary-button{
    border:1px solid rgba(255,255,255,.44);
    background:rgba(255,255,255,.07);
    color:#ffffff;
    backdrop-filter:blur(8px);
}

.primary-secondary-button:hover{
    transform:translateY(-4px);
    border-color:#ffffff;
    background:#ffffff;
    color:#233773;
}

/* Breadcrumb */

.primary-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:35px;
    color:rgba(255,255,255,.65);
    font-family:"Poppins",sans-serif;
    font-size:.82rem;
    font-weight:500;
}

.primary-breadcrumb a{
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:color .25s ease;
}

.primary-breadcrumb a:hover{
    color:#FFED00;
}

.primary-breadcrumb i{
    color:#FFED00;
    font-size:.7rem;
}

.primary-breadcrumb span{
    color:#ffffff;
    font-weight:600;
}

/*==================================================
ELEMENTO VISUAL DEL HERO
==================================================*/

.primary-hero-visual{
    position:relative;
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.primary-hero-circle{
    position:relative;
    z-index:2;
    width:340px;
    min-height:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:45px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.07)
        );
    box-shadow:
        0 30px 70px rgba(4,14,49,.32),
        inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter:blur(14px);
    text-align:center;
}

.primary-hero-circle::before{
    content:"";
    position:absolute;
    inset:-18px;
    z-index:-1;
    border:1px dashed rgba(255,237,0,.38);
    border-radius:50%;
    animation:primaryCircleRotation 24s linear infinite;
}

.primary-hero-circle::after{
    content:"";
    position:absolute;
    width:70px;
    height:70px;
    top:-12px;
    right:20px;
    z-index:-1;
    border-radius:50%;
    background:#FFED00;
    opacity:.12;
    filter:blur(2px);
}

@keyframes primaryCircleRotation{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.primary-hero-icon{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    border-radius:24px;
    background:#FFED00;
    color:#233773;
    box-shadow:0 16px 28px rgba(255,237,0,.18);
    transform:rotate(-4deg);
}

.primary-hero-icon i{
    font-size:2.15rem;
}

.primary-hero-circle h2{
    margin:0 0 12px;
    color:#ffffff;
    font-family:"Poppins",sans-serif;
    font-size:1.55rem;
    font-weight:700;
    line-height:1.3;
}

.primary-hero-circle p{
    margin:0;
    color:rgba(255,255,255,.75);
    font-family:"Poppins",sans-serif;
    font-size:.9rem;
    font-weight:500;
    line-height:1.75;
}

/* Tarjetas flotantes */

.primary-floating-card{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 17px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:13px;
    background:rgba(255,255,255,.93);
    color:#233773;
    box-shadow:0 15px 35px rgba(4,14,49,.22);
    font-family:"Poppins",sans-serif;
    font-size:.82rem;
    font-weight:700;
    animation:primaryFloating 4.5s ease-in-out infinite;
}

.primary-floating-card i{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,237,0,.25);
    color:#233773;
    font-size:1rem;
}

.primary-floating-card-one{
    top:28px;
    left:-18px;
}

.primary-floating-card-two{
    top:48%;
    right:-35px;
    animation-delay:1.2s;
}

.primary-floating-card-three{
    bottom:15px;
    left:5px;
    animation-delay:2.2s;
}

@keyframes primaryFloating{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

/*==================================================
ASPECTOS DESTACADOS
==================================================*/

.primary-highlights{
    position:relative;
    z-index:5;
    padding:0 7%;
    background:#f7f9fd;
}

.primary-highlights-container{
    width:100%;
    max-width:1250px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin:-42px auto 0;
}

.primary-highlight-card{
    min-height:150px;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:27px 23px;
    border:1px solid #e6ebf5;
    border-radius:17px;
    background:#ffffff;
    box-shadow:0 15px 35px rgba(25,44,96,.09);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.primary-highlight-card:hover{
    transform:translateY(-7px);
    border-color:rgba(255,237,0,.75);
    box-shadow:0 20px 43px rgba(25,44,96,.14);
}

.primary-highlight-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:rgba(255,237,0,.20);
    color:#233773;
}

.primary-highlight-icon i{
    font-size:1.35rem;
}

.primary-highlight-card h3{
    margin:2px 0 8px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:.96rem;
    font-weight:700;
    line-height:1.35;
}

.primary-highlight-card p{
    margin:0;
    color:#647086;
    font-family:"Poppins",sans-serif;
    font-size:.79rem;
    font-weight:500;
    line-height:1.7;
}

/*==================================================
RESPONSIVE HERO PRIMARIA
==================================================*/

@media screen and (max-width:1100px){

    .primary-hero{
        min-height:auto;
        padding-top:140px;
    }

    .primary-hero-content{
        grid-template-columns:1fr 380px;
        gap:50px;
    }

    .primary-hero-circle{
        width:310px;
        min-height:310px;
        padding:38px;
    }

    .primary-highlights-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media screen and (max-width:900px){

    .primary-hero{
        padding:125px 6% 110px;
    }

    .primary-hero-content{
        grid-template-columns:1fr;
        gap:65px;
    }

    .primary-hero-text{
        max-width:760px;
    }

    .primary-hero-visual{
        width:100%;
        max-width:500px;
        min-height:420px;
        margin:0 auto;
    }

    .primary-highlights{
        padding:0 6%;
    }

    .primary-highlights-container{
        margin-top:-55px;
    }

}

@media screen and (max-width:600px){

    .primary-hero{
        padding:110px 5% 95px;
    }

    .primary-hero-text h1{
        font-size:2.45rem;
        letter-spacing:-1.5px;
    }

    .primary-hero-text > p{
        font-size:.95rem;
        line-height:1.8;
    }

    .primary-hero-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .primary-main-button,
    .primary-secondary-button{
        width:100%;
    }

    .primary-breadcrumb{
        font-size:.75rem;
    }

    .primary-hero-visual{
        min-height:390px;
    }

    .primary-hero-circle{
        width:270px;
        min-height:270px;
        padding:30px;
    }

    .primary-hero-circle::before{
        inset:-12px;
    }

    .primary-hero-icon{
        width:65px;
        height:65px;
        border-radius:20px;
    }

    .primary-hero-icon i{
        font-size:1.8rem;
    }

    .primary-hero-circle h2{
        font-size:1.28rem;
    }

    .primary-hero-circle p{
        font-size:.79rem;
    }

    .primary-floating-card{
        padding:9px 12px;
        font-size:.7rem;
    }

    .primary-floating-card i{
        width:29px;
        height:29px;
        font-size:.85rem;
    }

    .primary-floating-card-one{
        top:20px;
        left:-3px;
    }

    .primary-floating-card-two{
        right:-3px;
    }

    .primary-floating-card-three{
        bottom:20px;
        left:4px;
    }

    .primary-highlights{
        padding:0 5%;
    }

    .primary-highlights-container{
        grid-template-columns:1fr;
        gap:14px;
    }

    .primary-highlight-card{
        min-height:auto;
    }

}

@media screen and (max-width:390px){

    .primary-hero-circle{
        width:245px;
        min-height:245px;
        padding:27px;
    }

    .primary-floating-card{
        position:relative;
        inset:auto;
        animation:none;
    }

    .primary-hero-visual{
        min-height:auto;
        display:grid;
        grid-template-columns:1fr;
        justify-items:center;
        gap:12px;
    }

    .primary-floating-card-one,
    .primary-floating-card-two,
    .primary-floating-card-three{
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
    }

}

/*==================================================
BASES DEL APRENDIZAJE
==================================================*/

.primary-foundations{
    position:relative;
    padding:120px 7%;
    background:#f7f9fd;
    overflow:hidden;
}

.primary-foundations::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    top:-150px;
    right:-130px;
    border-radius:50%;
    background:rgba(255,237,0,.08);
}

.primary-foundations-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1250px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    align-items:center;
    gap:85px;
}

/* Imagen */

.primary-foundations-image{
    position:relative;
}

.primary-image-frame{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    box-shadow:0 28px 60px rgba(27,48,105,.16);
}

.primary-image-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            to top,
            rgba(18,35,88,.34),
            transparent 45%
        );
    pointer-events:none;
}

.primary-image-frame::after{
    content:"";
    position:absolute;
    width:115px;
    height:115px;
    top:-40px;
    left:-35px;
    z-index:2;
    border:18px solid rgba(255,237,0,.75);
    border-radius:50%;
}

.primary-image-frame img{
    width:100%;
    min-height:560px;
    display:block;
    object-fit:cover;
    transition:transform .7s ease;
}

.primary-image-frame:hover img{
    transform:scale(1.045);
}

/* Tarjeta sobre la imagen */

.primary-image-detail{
    position:absolute;
    right:-30px;
    bottom:38px;
    z-index:4;
    width:min(300px,78%);
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:18px;
    background:rgba(255,255,255,.94);
    box-shadow:0 20px 45px rgba(25,44,96,.18);
    backdrop-filter:blur(10px);
}

.primary-image-detail > i{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#FFED00;
    color:#233773;
    font-size:1.35rem;
}

.primary-image-detail div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.primary-image-detail strong{
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:.92rem;
    font-weight:700;
}

.primary-image-detail span{
    color:#6d788c;
    font-family:"Poppins",sans-serif;
    font-size:.76rem;
    font-weight:500;
    line-height:1.55;
}

/* Contenido */

.primary-foundations-content .section-label{
    display:inline-block;
    margin-bottom:14px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.primary-foundations-content .section-label::after{
    content:"";
    width:48px;
    height:3px;
    display:block;
    margin-top:8px;
    border-radius:20px;
    background:#FFED00;
}

.primary-foundations-content h2{
    max-width:620px;
    margin:0 0 24px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2rem,3.5vw,3rem);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-1.3px;
}

.primary-foundations-content > p{
    max-width:650px;
    margin:0 0 18px;
    color:#4f5d73;
    font-family:"Poppins",sans-serif;
    font-size:1rem;
    font-weight:500;
    line-height:1.9;
}

/* Lista */

.primary-foundations-list{
    display:grid;
    gap:16px;
    margin-top:31px;
}

.primary-foundation-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:17px 18px;
    border:1px solid #e5eaf3;
    border-radius:15px;
    background:#ffffff;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.primary-foundation-item:hover{
    transform:translateX(7px);
    border-color:rgba(255,237,0,.85);
    box-shadow:0 12px 25px rgba(35,55,115,.08);
}

.primary-foundation-item > span{
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:1px;
    border-radius:9px;
    background:rgba(255,237,0,.24);
    color:#233773;
}

.primary-foundation-item > span i{
    font-size:.9rem;
    font-weight:700;
}

.primary-foundation-item p{
    margin:0;
    color:#526078;
    font-family:"Poppins",sans-serif;
    font-size:.88rem;
    font-weight:500;
    line-height:1.7;
}

/*==================================================
RESPONSIVE BASES DEL APRENDIZAJE
==================================================*/

@media screen and (max-width:1000px){

    .primary-foundations-container{
        grid-template-columns:1fr;
        gap:65px;
    }

    .primary-foundations-image{
        width:100%;
        max-width:750px;
        margin:0 auto;
    }

    .primary-image-frame img{
        min-height:500px;
    }

    .primary-foundations-content{
        max-width:760px;
        margin:0 auto;
    }

}

@media screen and (max-width:700px){

    .primary-foundations{
        padding:95px 5%;
    }

    .primary-image-frame{
        border-radius:20px;
    }

    .primary-image-frame img{
        min-height:420px;
    }

    .primary-image-detail{
        right:14px;
        bottom:15px;
        width:calc(100% - 28px);
    }

    .primary-foundations-content h2{
        font-size:2.1rem;
    }

}

@media screen and (max-width:460px){

    .primary-foundations{
        padding-top:80px;
    }

    .primary-image-frame img{
        min-height:350px;
    }

    .primary-image-detail{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        margin-top:15px;
    }

    .primary-foundation-item{
        padding:15px;
    }

}

/*==================================================
APRENDER EXPLORANDO
==================================================*/

.primary-exploration{
    position:relative;
    padding:120px 7%;
    background:#ffffff;
    overflow:hidden;
}

.primary-exploration::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-260px;
    top:-180px;
    border-radius:50%;
    background:rgba(35,55,115,.035);
}

.primary-section-heading{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.primary-section-heading .section-label{
    display:inline-block;
    margin-bottom:15px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.primary-section-heading .section-label::after{
    content:"";
    display:block;
    width:55px;
    height:3px;
    margin:10px auto 0;
    border-radius:20px;
    background:#FFED00;
}

.primary-section-heading h2{
    margin:0 0 22px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.2rem,4vw,3.2rem);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-1.5px;
}

.primary-section-heading p{
    margin:0;
    color:#56647b;
    font-family:"Poppins",sans-serif;
    font-size:1rem;
    font-weight:500;
    line-height:1.9;
}

/* GRID */

.primary-exploration-grid{

    position:relative;
    z-index:2;

    width:100%;
    max-width:1250px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:28px;

}

/* CARD */

.primary-exploration-card{

    position:relative;

    overflow:hidden;

    padding:38px;

    border:1px solid #e7ebf4;

    border-radius:22px;

    background:#ffffff;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.primary-exploration-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,237,0,.8);

    box-shadow:0 24px 55px rgba(31,50,108,.12);

}

.primary-exploration-number{

    position:absolute;

    top:20px;

    right:25px;

    font-family:"Poppins",sans-serif;

    font-size:4rem;

    font-weight:800;

    color:rgba(35,55,115,.05);

    user-select:none;

}

.primary-exploration-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:20px;

    background:rgba(255,237,0,.18);

    color:#233773;

    transition:
        transform .35s ease,
        background .35s ease;

}

.primary-exploration-card:hover .primary-exploration-icon{

    transform:rotate(-8deg) scale(1.05);

    background:#FFED00;

}

.primary-exploration-icon i{

    font-size:1.8rem;

}

.primary-exploration-card h3{

    margin:0 0 15px;

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:1.45rem;

    font-weight:700;

}

.primary-exploration-card p{

    margin:0;

    color:#59677d;

    font-family:"Poppins",sans-serif;

    font-size:.96rem;

    font-weight:500;

    line-height:1.85;

}

.primary-card-line{

    display:block;

    width:55px;

    height:4px;

    margin-top:28px;

    border-radius:30px;

    background:#FFED00;

    transition:width .35s ease;

}

.primary-exploration-card:hover .primary-card-line{

    width:120px;

}

/* Decoración */

.primary-exploration-card::before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    top:-70px;

    right:-70px;

    background:rgba(255,237,0,.08);

    transition:transform .4s ease;

}

.primary-exploration-card:hover::before{

    transform:scale(1.25);

}

/* RESPONSIVE */

@media screen and (max-width:900px){

    .primary-exploration{

        padding:100px 6%;

    }

    .primary-exploration-grid{

        grid-template-columns:1fr;

    }

}

@media screen and (max-width:600px){

    .primary-exploration{

        padding:90px 5%;

    }

    .primary-exploration-card{

        padding:30px;

    }

    .primary-exploration-number{

        font-size:3rem;

    }

    .primary-section-heading{

        margin-bottom:50px;

    }

}

/*==================================================
EXPERIENCIAS INSTITUCIONALES
==================================================*/

.primary-experiences{

    position:relative;

    padding:120px 7%;

    background:#f7f9fd;

    overflow:hidden;

}

.primary-experiences::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(255,237,0,.08);

}

.primary-experiences-container{

    position:relative;

    z-index:2;

    width:100%;
    max-width:1250px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 430px;

    gap:80px;

    align-items:center;

}

/* CONTENIDO */

.primary-experiences-content .section-label{

    display:inline-block;

    margin-bottom:15px;

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.primary-experiences-content .section-label::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin-top:8px;

    border-radius:20px;

    background:#FFED00;

}

.primary-experiences-content h2{

    margin:0 0 22px;

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:clamp(2rem,3vw,3rem);

    font-weight:800;

    line-height:1.2;

}

.primary-experiences-content>p{

    margin:0 0 25px;

    color:#556379;

    font-family:"Poppins",sans-serif;

    font-size:1rem;

    font-weight:500;

    line-height:1.9;

}

/* TAGS */

.primary-experience-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin:35px 0;

}

.primary-experience-tag{

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 18px;

    border-radius:50px;

    background:#ffffff;

    border:1px solid #e5eaf3;

    transition:.3s;

}

.primary-experience-tag:hover{

    transform:translateY(-5px);

    border-color:#FFED00;

    box-shadow:0 12px 28px rgba(35,55,115,.10);

}

.primary-experience-tag i{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,237,0,.20);

    color:#233773;

}

.primary-experience-tag span{

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:.86rem;

    font-weight:600;

}

.primary-experiences-note{

    padding:20px 24px;

    border-left:5px solid #FFED00;

    border-radius:0 14px 14px 0;

    background:#ffffff;

    color:#5d6a80;

    font-family:"Poppins",sans-serif;

    font-size:.92rem;

    line-height:1.8;

}

/* TARJETA DERECHA */

.primary-experiences-visual{

    position:relative;

    display:flex;

    justify-content:center;

}

.primary-experience-main-card{

    position:relative;

    z-index:2;

    padding:45px;

    border-radius:28px;

    background:
    linear-gradient(
    140deg,
    #233773,
    #304da3
    );

    color:#ffffff;

    box-shadow:0 35px 70px rgba(27,47,108,.22);

}

.primary-experience-main-card::before{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;

}

.primary-experience-main-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:22px;

    background:#FFED00;

    color:#233773;

}

.primary-experience-main-icon i{

    font-size:2rem;

}

.primary-experience-main-card span{

    display:block;

    margin-bottom:12px;

    color:#FFED00;

    font-family:"Poppins",sans-serif;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.primary-experience-main-card h3{

    margin:0 0 18px;

    font-family:"Poppins",sans-serif;

    font-size:2rem;

    line-height:1.25;

}

.primary-experience-main-card p{

    margin:0;

    color:rgba(255,255,255,.82);

    font-family:"Poppins",sans-serif;

    line-height:1.85;

}

.primary-experience-shape{

    position:absolute;

    width:220px;

    height:220px;

    right:-60px;

    bottom:-40px;

    border-radius:50%;

    background:rgba(255,237,0,.22);

    filter:blur(25px);

}

/* RESPONSIVE */

@media(max-width:980px){

.primary-experiences{

padding:100px 6%;

}

.primary-experiences-container{

grid-template-columns:1fr;

gap:60px;

}

.primary-experiences-visual{

max-width:500px;

margin:auto;

}

}

@media(max-width:600px){

.primary-experiences{

padding:90px 5%;

}

.primary-experience-main-card{

padding:35px;

}

.primary-experience-main-card h3{

font-size:1.6rem;

}

.primary-experience-tags{

gap:12px;

}

}

/*==================================================
DESARROLLO INTEGRAL
==================================================*/

.primary-development{

    position:relative;

    padding:120px 7%;

    background:#ffffff;

    overflow:hidden;

}

.primary-development::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-250px;

    bottom:-250px;

    border-radius:50%;

    background:rgba(35,55,115,.04);

}

.primary-development-container{

    position:relative;

    z-index:2;

    width:100%;
    max-width:1250px;

    margin:auto;

}

.primary-development-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.primary-development-header .section-label{

    display:inline-block;

    margin-bottom:14px;

    color:#233773;

    font-size:.8rem;

    font-family:"Poppins",sans-serif;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.primary-development-header .section-label::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:10px auto 0;

    border-radius:30px;

    background:#FFED00;

}

.primary-development-header h2{

    margin:0 0 22px;

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:clamp(2.2rem,4vw,3.2rem);

    font-weight:800;

    line-height:1.2;

}

.primary-development-header p{

    margin:0;

    color:#59677d;

    font-family:"Poppins",sans-serif;

    line-height:1.9;

}

/* GRID */

.primary-development-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/* TARJETAS */

.primary-development-card{

    position:relative;

    overflow:hidden;

    padding:40px 30px;

    border-radius:22px;

    border:1px solid #e8edf5;

    background:#ffffff;

    text-align:center;

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.primary-development-card:hover{

    transform:translateY(-10px);

    border-color:#FFED00;

    box-shadow:0 24px 50px rgba(35,55,115,.12);

}

.primary-development-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:5px;

    background:#FFED00;

    transition:.35s;

}

.primary-development-card:hover::after{

    width:100%;

}

.primary-development-icon{

    width:78px;

    height:78px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,237,0,.18);

    color:#233773;

    transition:.35s;

}

.primary-development-card:hover
.primary-development-icon{

    transform:rotate(-10deg) scale(1.08);

    background:#FFED00;

}

.primary-development-icon i{

    font-size:2rem;

}

.primary-development-card h3{

    margin:0 0 15px;

    color:#233773;

    font-family:"Poppins",sans-serif;

    font-size:1.25rem;

    font-weight:700;

}

.primary-development-card p{

    margin:0;

    color:#5f6d83;

    font-family:"Poppins",sans-serif;

    font-size:.92rem;

    line-height:1.8;

}

/* RESPONSIVE */

@media(max-width:1050px){

.primary-development-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.primary-development{

padding:90px 5%;

}

.primary-development-grid{

grid-template-columns:1fr;

}

.primary-development-header{

margin-bottom:55px;

}

}

/*==================================================
FRASE FINAL PRIMARIA
==================================================*/

.primary-message{
    position:relative;
    padding:85px 7%;
    overflow:hidden;
    background:
linear-gradient(
135deg,
#fbfcff 0%,
#f3f7fd 55%,
#ffffff 100%
);
}

.primary-message::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    left:-80px;
    bottom:-110px;
    border-radius:50%;
    border:40px solid rgba(225,27,20,.06);

}

.primary-message-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:950px;
    margin:0 auto;
    text-align:center;
}

.primary-message-container::before{
    content:"";
    display:block;
    width:85px;
    height:4px;
    margin:0 auto 30px;
    border-radius:20px;
    background:
    linear-gradient(
        90deg,
        #233773,
        #E11B14,
        #FFED00
    );

}

.primary-message-icon{
    position:relative;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px;
    border-radius:17px;
    background:rgba(225,27,20,.10);
    color:#E11B14;

}

.primary-message-icon::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    top:-3px;
    right:-3px;
    border-radius:50%;
    background:#FFED00;

}

.primary-message-icon i{
    font-size:1.65rem;
}

.primary-message-container p{
    max-width:850px;
    margin:0 auto 18px;
    color:#233773;
    font-family:"Poppins",sans-serif;
    font-size:clamp(1.25rem,2.3vw,1.75rem);
    font-weight:600;
    line-height:1.65;
}

.primary-message-container > span{
    display:inline-block;
    color:#69758b;
    font-family:"Poppins",sans-serif;
    font-size:.88rem;
    font-weight:600;
}

@media screen and (max-width:600px){

    .primary-message{
        padding:70px 5%;
    }

    .primary-message-container p{
        font-size:1.15rem;
    }

}

/*==================================================
CTA FINAL PRIMARIA
==================================================*/

.primary-cta{
    position:relative;
    padding:120px 7%;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #162e68 0%,
            #233773 52%,
            #3455ac 100%
        );
}

.primary-cta-decoration{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.primary-cta-decoration-one{
    width:420px;
    height:420px;
    top:-250px;
    right:-120px;
    border:72px solid rgba(255,237,0,.08);
}

.primary-cta-decoration-two{
    width:330px;
    height:330px;
    bottom:-220px;
    left:-130px;
    background:rgba(255,255,255,.045);
}

.primary-cta-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:920px;
    margin:0 auto;
    text-align:center;
}

.primary-cta-label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    padding:9px 17px;
    border:1px solid rgba(255,237,0,.42);
    border-radius:50px;
    background:rgba(255,237,0,.10);
    color:#FFED00;
    font-family:"Poppins",sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.primary-cta-label::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FFED00;
}

.primary-cta-content h2{
    max-width:850px;
    margin:0 auto 24px;
    color:#ffffff;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.25rem,4vw,3.45rem);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-1.3px;
}

.primary-cta-content > p{
    max-width:690px;
    margin:0 auto;
    color:rgba(255,255,255,.82);
    font-family:"Poppins",sans-serif;
    font-size:1rem;
    font-weight:500;
    line-height:1.9;
}

.primary-cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:17px;
    margin-top:37px;
}

.primary-cta-main-button,
.primary-cta-secondary-button{
    min-height:55px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 28px;
    border-radius:13px;
    font-family:"Poppins",sans-serif;
    font-size:.93rem;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .3s ease,
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.primary-cta-main-button{
    border:1px solid #FFED00;
    background:#FFED00;
    color:#233773;
    box-shadow:0 14px 32px rgba(255,237,0,.18);
}

.primary-cta-main-button:hover{
    transform:translateY(-5px);
    border-color:#ffffff;
    background:#ffffff;
    box-shadow:0 20px 38px rgba(5,15,48,.25);
}

.primary-cta-secondary-button{
    border:1px solid rgba(255,255,255,.40);
    background:rgba(255,255,255,.07);
    color:#ffffff;
    backdrop-filter:blur(8px);
}

.primary-cta-secondary-button:hover{
    transform:translateY(-5px);
    border-color:#ffffff;
    background:#ffffff;
    color:#233773;
}

@media screen and (max-width:700px){

    .primary-cta{
        padding:90px 5%;
    }

    .primary-cta-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .primary-cta-main-button,
    .primary-cta-secondary-button{
        width:100%;
    }

}

@media screen and (max-width:450px){

    .primary-cta-content h2{
        font-size:2rem;
    }

}

/*==================================================
RESET Y VARIABLES
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}

:root{
    --primary:#0A67BE;
    --primary-dark:#073F78;
    --primary-soft:#EAF4FF;

    --secondary:#FFD54A;
    --secondary-soft:#FFF7D6;

    --red:#D72638;
    --red-dark:#A31524;
    --red-soft:#FFF0F2;

    --green:#2EAE5E;
    --green-soft:#EAF8EF;

    --white:#FFFFFF;
    --surface:#F7FAFE;
    --surface-2:#EEF5FB;

    --text:#24364B;
    --muted:#697888;
    --border:#E3EBF4;

    --gradient:linear-gradient(135deg,#0A67BE 0%,#168CFF 100%);
    --gradient-red:linear-gradient(135deg,#D72638 0%,#F35B6C 100%);
    --gradient-mixed:linear-gradient(135deg,#0A67BE 0%,#5B67E8 52%,#D72638 100%);

    --shadow:0 16px 40px rgba(17,58,96,.10);
    --shadow-hover:0 24px 60px rgba(17,58,96,.18);

    --radius:26px;
    --transition:.35s ease;
}

body{
    font-family:'Inter',sans-serif;
    background:linear-gradient(180deg,#F8FBFF 0%,#EFF5FB 50%,#F8FBFF 100%);
    color:var(--text);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 10% 20%,rgba(10,103,190,.08),transparent 24%),
        radial-gradient(circle at 90% 15%,rgba(215,38,56,.07),transparent 22%),
        radial-gradient(circle at 80% 80%,rgba(255,213,74,.10),transparent 20%);
}

section{
    position:relative;
}

img{
    display:block;
    max-width:100%;
}

h1,h2,h3,h4,h5{
    font-family:'Poppins',sans-serif;
}

a,
button,
input,
textarea{
    font:inherit;
}

.section-title{
    width:min(780px,92%);
    margin:0 auto 64px;
    text-align:center;
}

.section-title h4{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 16px;
    border-radius:999px;
    letter-spacing:1.8px;
    font-size:.82rem;
    margin-bottom:18px;
}

.section-title h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
    margin-bottom:18px;
}

.section-title p{
    color:var(--muted);
    line-height:1.8;
}

/*==================================================
NAVBAR
==================================================*/

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(255,255,255,.93);
    border-bottom:1px solid rgba(10,103,190,.08);
    backdrop-filter:blur(16px);
    transition:var(--transition);
}

.navbar{
    width:min(1280px,92%);
    min-height:88px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:var(--text);
}

.logo img{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:14px;
    background:var(--white);
}

.logo h2{
    color:var(--primary);
    font-size:1.55rem;
    line-height:1;
}

.logo span{
    display:block;
    margin-top:5px;
    color:#6C7C8F;
    font-size:.85rem;
}

.menu{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
}

.menu a{
    position:relative;
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:.94rem;
    transition:var(--transition);
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:3px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--secondary),var(--red));
    transition:var(--transition);
}

.menu a:hover{
    color:var(--primary);
}

.menu a:hover::after{
    width:100%;
}

.btn-nav{
    background:var(--gradient-red);
    color:var(--white);
    text-decoration:none;
    padding:13px 24px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 12px 28px rgba(215,38,56,.24);
    transition:var(--transition);
}

.btn-nav:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 34px rgba(215,38,56,.32);
}

/*==================================================
BOTONES
==================================================*/

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:15px 30px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    transition:var(--transition);
}

.btn-primary{
    background:var(--secondary);
    color:#1E293B;
    box-shadow:0 12px 28px rgba(255,213,74,.28);
}

.btn-primary:hover{
    transform:translateY(-4px);
    background:#FFE16D;
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.95);
    color:var(--white);
    background:rgba(255,255,255,.05);
}

.btn-secondary:hover{
    background:var(--white);
    color:var(--primary);
    transform:translateY(-4px);
}

.btn-secondary.dark{
    color:var(--red);
    border-color:var(--red);
    background:var(--white);
}

.btn-secondary.dark:hover{
    background:var(--red);
    color:var(--white);
}

/*==================================================
HERO
==================================================*/

.hero{
    min-height:calc(100vh - 0px);
    padding:150px 8% 160px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(90deg,rgba(4,36,73,.94) 0%,rgba(4,36,73,.78) 50%,rgba(90,17,34,.52) 100%),
        url("img/hero.jpg") center/cover no-repeat;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    right:-130px;
    top:120px;
    background:rgba(255,213,74,.16);
    filter:blur(2px);
}

.hero::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    right:18%;
    bottom:-110px;
    background:rgba(215,38,56,.18);
}

.overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(4,36,73,.10),rgba(4,36,73,.28)),
        radial-gradient(circle at 70% 45%,rgba(255,255,255,.05),transparent 40%);
}

.hero-content{
    position:relative;
    z-index:5;
    width:min(690px,100%);
    color:var(--white);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:11px;
    padding:11px 19px;
    margin-bottom:26px;
    border-radius:999px;
    color:var(--white);
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(12px);
}

.badge-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 7px rgba(46,174,94,.15);
    animation:pulse 1.7s infinite;
}

.hero h1{
    font-size:clamp(3rem,6vw,5.35rem);
    line-height:1.03;
    margin-bottom:25px;
    text-wrap:balance;
}

.hero-content > p{
    max-width:650px;
    color:#EAF3FD;
    font-size:1.08rem;
    line-height:1.85;
    margin-bottom:34px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.hero-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:35px;
    max-width:720px;
}

.hero-highlights div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 15px;
    border-radius:999px;
    color:var(--white);
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    transition:var(--transition);
}

.hero-highlights div:nth-child(2){
    border-color:rgba(255,213,74,.45);
}

.hero-highlights div:nth-child(3){
    border-color:rgba(215,38,56,.45);
}

.hero-highlights div:hover{
    background:var(--white);
    color:var(--primary-dark);
    transform:translateY(-4px);
}

.hero-highlights i{
    color:var(--secondary);
    font-size:1.15rem;
}

.hero-highlights div:nth-child(3) i{
    color:#FF6B7A;
}

.hero-card{
    position:absolute;
    z-index:6;
    right:6%;
    top:52%;
    transform:translateY(-50%);
    width:min(340px,28vw);
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:0 28px 70px rgba(2,23,48,.30);
    animation:float 5s ease-in-out infinite;
}

.hero-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:7px;
    border-radius:28px 28px 0 0;
    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--red));
}

.hero-card-top{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:18px;
    color:var(--red);
    font-weight:700;
}

.hero-card-top i{
    font-size:1.5rem;
}

.hero-card h2{
    color:var(--text);
    font-size:1.65rem;
    line-height:1.25;
    margin-bottom:13px;
}

.hero-card > p{
    color:var(--muted);
    line-height:1.65;
    margin-bottom:22px;
}

.hero-card-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    text-align:center;
}

.hero-card-stats div{
    padding:12px 6px;
    border-radius:16px;
    background:var(--surface);
}

.hero-card-stats div:nth-child(2){
    background:var(--secondary-soft);
}

.hero-card-stats div:nth-child(3){
    background:var(--red-soft);
}

.hero-card-stats h3{
    color:var(--primary);
    font-size:1.4rem;
}

.hero-card-stats div:nth-child(3) h3{
    color:var(--red);
}

.hero-card-stats p{
    margin-top:4px;
    color:var(--muted);
    font-size:.78rem;
}

.scroll-indicator{
    position:absolute;
    z-index:8;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--white);
    font-size:.85rem;
    animation:bounce 2s infinite;
}

/*==================================================
ESTADÍSTICAS
==================================================*/

.hero-info{
    width:min(1240px,92%);
    margin:-78px auto 0;
    position:relative;
    z-index:20;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.info-card{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:34px 25px;
    text-align:center;
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.info-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:var(--gradient);
}

.info-card:nth-child(2)::before{
    background:linear-gradient(90deg,var(--secondary),#FF9F1C);
}

.info-card:nth-child(3)::before{
    background:linear-gradient(90deg,var(--red),#F35B6C);
}

.info-card:nth-child(4)::before{
    background:linear-gradient(90deg,var(--green),#65D68A);
}

.info-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.info-card i{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    font-size:2rem;
    color:var(--white);
    background:var(--gradient);
}

.info-card:nth-child(2) i{
    color:#2E2E2E;
    background:linear-gradient(135deg,var(--secondary),#FFB833);
}

.info-card:nth-child(3) i{
    background:var(--gradient-red);
}

.info-card:nth-child(4) i{
    background:linear-gradient(135deg,var(--green),#62D388);
}

.info-card h2{
    color:var(--primary);
    font-size:2rem;
    margin-bottom:5px;
}

.info-card:nth-child(3) h2{
    color:var(--red);
}

.info-card h3{
    margin-bottom:12px;
    font-size:1rem;
}

.info-card p{
    color:var(--muted);
    line-height:1.65;
    font-size:.92rem;
}

/*==================================================
ABOUT
==================================================*/

.about{
    padding:140px 8%;
    background:
        radial-gradient(circle at 15% 20%,rgba(255,213,74,.12),transparent 20%),
        var(--white);
}

.about-container{
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:78px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image::before{
    content:"";
    position:absolute;
    left:-20px;
    top:-20px;
    width:130px;
    height:130px;
    border-radius:32px;
    background:var(--secondary);
    opacity:.35;
}

.about-image img{
    position:relative;
    z-index:2;
    width:100%;
    min-height:520px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow-hover);
}

.experience-card{
    position:absolute;
    z-index:3;
    right:-18px;
    bottom:28px;
    padding:24px 26px;
    border-radius:22px;
    color:var(--white);
    background:var(--gradient-red);
    box-shadow:0 20px 45px rgba(215,38,56,.28);
}

.experience-card h2{
    font-size:2.5rem;
}

.about-content h5{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 15px;
    border-radius:999px;
    letter-spacing:1.7px;
    margin-bottom:18px;
}

.about-content h2{
    font-size:clamp(2.1rem,4vw,3rem);
    line-height:1.2;
    margin-bottom:22px;
}

.about-content > p{
    color:var(--muted);
    line-height:1.85;
    margin-bottom:30px;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:32px;
}

.about-grid div{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:74px;
    padding:15px;
    border-radius:17px;
    background:var(--surface);
    border:1px solid var(--border);
    transition:var(--transition);
}

.about-grid div:nth-child(2n){
    background:var(--secondary-soft);
}

.about-grid div:nth-child(3n){
    background:var(--red-soft);
}

.about-grid div:hover{
    transform:translateX(6px);
    box-shadow:var(--shadow);
}

.about-grid i{
    color:var(--green);
    font-size:1.2rem;
}

.about-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

/*==================================================
FEATURES
==================================================*/

.features{
    padding:135px 8%;
    background:linear-gradient(180deg,#F7FAFE 0%,#EEF5FB 100%);
}

.features-grid{
    max-width:1260px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.feature-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.feature-card img{
    width:100%;
    height:270px;
    object-fit:cover;
    background:linear-gradient(135deg,var(--primary-soft),var(--secondary-soft));
    transition:.65s;
}

.feature-card:hover img{
    transform:scale(1.06);
}

.feature-content{
    padding:30px;
    border-top:5px solid var(--primary);
}

.feature-card:nth-child(2) .feature-content{
    border-color:var(--red);
}

.feature-card:nth-child(3) .feature-content{
    border-color:var(--secondary);
}

.feature-card:nth-child(4) .feature-content{
    border-color:var(--green);
}

.feature-content > i{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:var(--white);
    background:var(--gradient);
    font-size:1.35rem;
    margin-bottom:16px;
}

.feature-card:nth-child(2) .feature-content > i{
    background:var(--gradient-red);
}

.feature-card:nth-child(3) .feature-content > i{
    color:#222;
    background:linear-gradient(135deg,var(--secondary),#FFB833);
}

.feature-card:nth-child(4) .feature-content > i{
    background:linear-gradient(135deg,var(--green),#65D68A);
}

.feature-content h3{
    font-size:1.45rem;
    margin-bottom:12px;
}

.feature-content p{
    color:var(--muted);
    line-height:1.75;
    margin-bottom:20px;
}

.feature-content a{
    color:var(--red);
    font-weight:700;
    text-decoration:none;
}

/*==================================================
NIVELES
==================================================*/

.levels{
    padding:135px 8%;
    background:var(--white);
}

.levels-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.level-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.level-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.level-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    background:var(--primary-soft);
    transition:.65s;
}

.level-card:hover img{
    transform:scale(1.07);
}

.level-info{
    padding:26px;
    border-top:6px solid var(--primary);
}

.level-card:nth-child(2) .level-info{
    border-color:var(--secondary);
}

.level-card:nth-child(3) .level-info{
    border-color:var(--red);
}

.level-card:nth-child(4) .level-info{
    border-color:var(--green);
}

.level-info span{
    display:inline-block;
    color:var(--primary);
    background:var(--primary-soft);
    border-radius:999px;
    padding:7px 11px;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:12px;
}

.level-card:nth-child(3) .level-info span{
    color:var(--red);
    background:var(--red-soft);
}

.level-info h3{
    font-size:1.4rem;
    margin-bottom:11px;
}

.level-info p{
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.level-info a{
    color:var(--red);
    text-decoration:none;
    font-weight:700;
}

/*==================================================
VIDA ESCOLAR
==================================================*/

.life{
    padding:140px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:
        radial-gradient(circle at 85% 15%,rgba(215,38,56,.10),transparent 20%),
        linear-gradient(135deg,#F2F8FF 0%,#FFF8E5 100%);
}

.life-left h2{
    font-size:clamp(2.1rem,4vw,3rem);
    line-height:1.2;
    margin:18px 0 22px;
}

.section-tag{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:9px 15px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:1.6px;
}

.life-left > p{
    color:var(--muted);
    line-height:1.85;
    margin-bottom:28px;
}

.life-list{
    display:grid;
    gap:14px;
    margin-bottom:30px;
}

.life-list div{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 17px;
    border-radius:16px;
    background:rgba(255,255,255,.80);
    border:1px solid rgba(10,103,190,.08);
}

.life-list div:nth-child(2){
    border-left:5px solid var(--secondary);
}

.life-list div:nth-child(3){
    border-left:5px solid var(--red);
}

.life-list div:nth-child(4){
    border-left:5px solid var(--green);
}

.life-list i{
    color:var(--primary);
    font-size:1.25rem;
}

.life-list p{
    margin:0;
    color:var(--text);
}

.life-right{
    position:relative;
}

.life-right img{
    width:100%;
    min-height:520px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow-hover);
}

.floating-box{
    position:absolute;
    left:-28px;
    bottom:30px;
    width:min(320px,80%);
    padding:24px;
    border-radius:22px;
    color:var(--white);
    background:var(--gradient-mixed);
    box-shadow:0 20px 45px rgba(48,59,140,.28);
}

.floating-box i{
    font-size:1.8rem;
    color:var(--secondary);
}

.floating-box h3{
    margin:10px 0;
}

.floating-box p{
    line-height:1.6;
    color:#F1F6FF;
}

/*==================================================
GALERÍA
==================================================*/

.gallery{
    padding:135px 8%;
    background:var(--white);
}

.gallery-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:18px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background:var(--primary-soft);
    cursor:pointer;
}

.gallery-item:first-child{
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.65s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:24px;
    background:linear-gradient(transparent 35%,rgba(3,25,50,.85));
    opacity:.9;
}

.gallery-overlay h3{
    color:var(--white);
    font-size:1.35rem;
}

/*==================================================
NOTICIAS
==================================================*/

.news{
    padding:135px 8%;
    background:linear-gradient(180deg,#F8FBFF 0%,#FFF4F5 100%);
}

.news-grid{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.news-card{
    overflow:hidden;
    border-radius:28px;
    background:var(--white);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.news-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.news-card img{
    width:100%;
    height:235px;
    object-fit:cover;
    background:var(--red-soft);
}

.news-content{
    padding:27px;
    border-top:5px solid var(--red);
}

.news-card:nth-child(2) .news-content{
    border-color:var(--secondary);
}

.news-card:nth-child(3) .news-content{
    border-color:var(--primary);
}

.news-content span{
    display:inline-block;
    color:var(--red);
    background:var(--red-soft);
    padding:7px 11px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:14px;
}

.news-content h3{
    font-size:1.35rem;
    line-height:1.35;
    margin-bottom:12px;
}

.news-content p{
    color:var(--muted);
    line-height:1.7;
    margin-bottom:18px;
}

.news-content a{
    color:var(--red);
    font-weight:700;
    text-decoration:none;
}

/*==================================================
TESTIMONIOS
==================================================*/

.testimonials{
    padding:135px 8%;
    background:var(--white);
}

.testimonial-container{
    max-width:1180px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.testimonial-card{
    position:relative;
    padding:34px;
    border-radius:26px;
    background:var(--surface);
    border:1px solid var(--border);
    transition:var(--transition);
}

.testimonial-card:nth-child(2){
    background:var(--secondary-soft);
}

.testimonial-card:nth-child(3){
    background:var(--red-soft);
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}

.testimonial-card > i{
    font-size:2.4rem;
    color:var(--primary);
}

.testimonial-card:nth-child(3) > i{
    color:var(--red);
}

.testimonial-card p{
    color:var(--muted);
    line-height:1.8;
    margin:14px 0 20px;
}

.testimonial-card h3{
    margin-bottom:5px;
}

.testimonial-card span{
    color:var(--muted);
    font-size:.9rem;
}

/*==================================================
CONTACTO
==================================================*/

.contact{
    padding:135px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    background:
        linear-gradient(135deg,rgba(10,103,190,.98),rgba(7,63,120,.98)),
        url("img/colegio.jpg") center/cover;
    color:var(--white);
}

.contact-info h4{
    color:var(--secondary);
    letter-spacing:1.6px;
    margin-bottom:14px;
}

.contact-info h2{
    font-size:clamp(2.1rem,4vw,3rem);
    margin-bottom:18px;
}

.contact-info > p{
    color:#E7F2FF;
    line-height:1.8;
    margin-bottom:28px;
}

.contact-data{
    display:grid;
    gap:12px;
}

.contact-data p{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
}

.contact-data i{
    color:var(--secondary);
    font-size:1.2rem;
}

.contact-form{
    padding:34px;
    border-radius:28px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(15px);
}

.contact-form form{
    display:grid;
    gap:15px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:15px;
    outline:none;
    color:var(--text);
    background:rgba(255,255,255,.95);
}

.contact-form textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form button{
    border:none;
    cursor:pointer;
}

/*==================================================
FOOTER
==================================================*/

footer{
    padding:70px 8% 26px;
    color:var(--white);
    background:linear-gradient(135deg,#052F5B 0%,#073F78 60%,#6C1222 100%);
}

.footer-content{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

.footer-content img{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:15px;
}

.footer-content h3{
    margin-bottom:16px;
}

.footer-content a{
    display:block;
    color:#DCEBFA;
    text-decoration:none;
    margin-bottom:10px;
    transition:var(--transition);
}

.footer-content a:hover{
    color:var(--secondary);
    transform:translateX(4px);
}

.footer-copy{
    max-width:1200px;
    margin:40px auto 0;
    padding-top:22px;
    text-align:center;
    color:#C9DCEF;
    border-top:1px solid rgba(255,255,255,.14);
}

/*==================================================
ANIMACIONES
==================================================*/

.show{
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{
    0%,100%{transform:translateY(-50%);}
    50%{transform:translateY(calc(-50% - 12px));}
}

@keyframes pulse{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.45);opacity:.55;}
}

@keyframes bounce{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,9px);}
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1180px){
    .menu{
        gap:20px;
    }

    .hero{
        padding-left:6%;
        padding-right:6%;
    }

    .hero-content{
        width:58%;
    }

    .hero-card{
        right:4%;
        width:320px;
    }

    .levels-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:950px){
    .menu,
    .btn-nav{
        display:none;
    }

    .hero{
        padding-top:135px;
        padding-bottom:120px;
        text-align:center;
        justify-content:center;
    }

    .hero-content{
        width:min(760px,100%);
    }

    .hero-buttons,
    .hero-highlights{
        justify-content:center;
    }

    .hero-card{
        display:none;
    }

    .hero-info{
        margin-top:-55px;
        grid-template-columns:repeat(2,1fr);
    }

    .about-container,
    .life,
    .contact{
        grid-template-columns:1fr;
    }

    .about-image img,
    .life-right img{
        min-height:420px;
    }

    .features-grid,
    .news-grid,
    .testimonial-container{
        grid-template-columns:1fr 1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:280px 280px 280px;
    }

    .gallery-item:first-child{
        grid-row:span 1;
    }

    .footer-content{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:650px){
    .navbar{
        min-height:78px;
    }

    .logo img{
        width:48px;
        height:48px;
    }

    .logo span{
        display:none;
    }

    .hero{
        min-height:auto;
        padding:125px 6% 110px;
    }

    .hero h1{
        font-size:2.7rem;
    }

    .hero-content > p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-highlights{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .hero-highlights div{
        justify-content:center;
        text-align:center;
        border-radius:18px;
    }

    .scroll-indicator{
        display:none;
    }

    .hero-info,
    .about-grid,
    .features-grid,
    .levels-grid,
    .news-grid,
    .testimonial-container,
    .gallery-grid,
    .footer-content{
        grid-template-columns:1fr;
    }

    .hero-info{
        margin-top:-35px;
    }

    .about,
    .features,
    .levels,
    .life,
    .gallery,
    .news,
    .testimonials,
    .contact{
        padding:100px 6%;
    }

    .about-image img,
    .life-right img{
        min-height:320px;
    }

    .experience-card{
        right:12px;
        bottom:12px;
    }

    .floating-box{
        left:12px;
        bottom:12px;
        width:calc(100% - 24px);
    }

    .gallery-grid{
        grid-template-rows:repeat(5,240px);
    }

    .contact-form{
        padding:24px;
    }
}

/*==================================================
MEJORAS 2.0: NAVEGACIÓN, CTA Y CONTROLES
==================================================*/
.menu-toggle{
    display:none;
    width:48px;
    height:48px;
    border:0;
    border-radius:15px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.7rem;
    cursor:pointer;
}

.admissions-cta{
    width:min(1240px,92%);
    margin:110px auto;
    padding:54px 60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    overflow:hidden;
    border-radius:34px;
    color:var(--white);
    background:
      radial-gradient(circle at 90% 20%,rgba(255,213,74,.26),transparent 24%),
      linear-gradient(135deg,#073F78 0%,#0A67BE 55%,#5B67E8 100%);
    box-shadow:0 30px 70px rgba(7,63,120,.25);
}
.admissions-cta span{font-weight:800;letter-spacing:1.8px;color:var(--secondary)}
.admissions-cta h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.14;margin:12px 0}
.admissions-cta p{max-width:720px;color:#EAF4FF;line-height:1.75}
.cta-button{
    flex:none;display:inline-flex;align-items:center;gap:10px;padding:17px 25px;
    border-radius:999px;background:var(--secondary);color:#1E293B;text-decoration:none;
    font-weight:800;box-shadow:0 14px 30px rgba(255,213,74,.25);transition:var(--transition)
}
.cta-button:hover{transform:translateY(-4px);background:#FFE16D}

.whatsapp-float,.back-to-top{
    position:fixed;right:24px;width:54px;height:54px;border-radius:50%;z-index:1000;
    display:flex;align-items:center;justify-content:center;box-shadow:0 16px 35px rgba(0,0,0,.18);
    transition:var(--transition)
}
.whatsapp-float{bottom:24px;background:#25D366;color:white;text-decoration:none;font-size:1.65rem}
.back-to-top{bottom:88px;border:0;background:var(--primary);color:white;font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.whatsapp-float:hover,.back-to-top:hover{transform:translateY(-4px) scale(1.04)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}

@media(max-width:1050px){
    .menu-toggle{display:flex;align-items:center;justify-content:center;order:3}
    .btn-nav{display:none}
    .menu{
        position:absolute;top:78px;left:4%;right:4%;padding:18px;display:grid;gap:4px;
        border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.98);
        box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;visibility:hidden;
        transition:var(--transition)
    }
    .menu.open{transform:none;opacity:1;visibility:visible}
    .menu a{display:block;padding:13px 14px;border-radius:12px}
    .menu a:hover{background:var(--primary-soft)}
    .admissions-cta{align-items:flex-start;flex-direction:column;padding:44px}
}
@media(max-width:650px){
    .admissions-cta{margin:80px auto;padding:34px 24px;border-radius:26px}
    .cta-button{width:100%;justify-content:center}
    .whatsapp-float,.back-to-top{right:16px;width:50px;height:50px}
    .whatsapp-float{bottom:16px}.back-to-top{bottom:76px}
}

/*==================================================
PÁGINA EXPERIENCIAS LPB
==================================================*/

.activities-hero{
    min-height:760px;
    padding:180px 8% 110px;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    background:
        linear-gradient(90deg,rgba(3,34,68,.94) 0%,rgba(7,63,120,.82) 46%,rgba(7,63,120,.28) 100%),
        url("img/experiencias.jpg") center/cover no-repeat;
}

.activities-hero::before,
.activities-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
}

.activities-hero::before{
    width:440px;
    height:440px;
    right:-150px;
    top:-130px;
    border:74px solid rgba(255,213,74,.16);
}

.activities-hero::after{
    width:300px;
    height:300px;
    left:-110px;
    bottom:-150px;
    background:rgba(215,38,56,.18);
    filter:blur(2px);
}

.activities-hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 75% 25%,rgba(255,213,74,.18),transparent 24%),
        linear-gradient(180deg,transparent 70%,rgba(3,25,50,.3));
}

.activities-hero-content{
    width:min(730px,100%);
    color:var(--white);
}

.activities-hero .section-tag{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:22px;
    padding:10px 17px;
    color:#1E293B;
    background:var(--secondary);
    border-radius:999px;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:1.7px;
    box-shadow:0 12px 28px rgba(255,213,74,.22);
}

.activities-hero .section-tag::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--red);
}

.activities-hero h1{
    max-width:720px;
    margin-bottom:22px;
    font-size:clamp(2.7rem,6vw,5rem);
    line-height:1.06;
    letter-spacing:-2px;
    text-wrap:balance;
}

.activities-hero p{
    max-width:650px;
    margin-bottom:34px;
    color:#E8F3FF;
    font-size:1.08rem;
    line-height:1.85;
}

.activities-hero .hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.activities-hero .btn-secondary{
    color:var(--white);
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(10px);
}

.activities-hero .btn-secondary:hover{
    color:var(--primary-dark);
    background:var(--white);
    border-color:var(--white);
}

.activities-intro{
    padding:130px 8%;
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:center;
    gap:70px;
    background:var(--white);
}

.activities-intro-content{
    max-width:600px;
}

.activities-intro-content .section-tag{
    display:inline-block;
    margin-bottom:20px;
    padding:9px 15px;
    color:var(--primary);
    background:var(--primary-soft);
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:1.6px;
}

.activities-intro-content h2{
    margin-bottom:22px;
    color:var(--primary-dark);
    font-size:clamp(2.15rem,4vw,3.35rem);
    line-height:1.15;
}

.activities-intro-content p{
    color:var(--muted);
    line-height:1.85;
}

.activities-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.activity-benefit-card{
    min-height:300px;
    padding:30px 25px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    border:1px solid var(--border);
    border-radius:26px;
    background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFE 100%);
    box-shadow:0 14px 34px rgba(17,58,96,.08);
    transition:var(--transition);
}

.activity-benefit-card:nth-child(2){
    transform:translateY(24px);
    background:linear-gradient(180deg,#FFFDF4 0%,var(--secondary-soft) 100%);
}

.activity-benefit-card:nth-child(3){
    background:linear-gradient(180deg,#FFF9FA 0%,var(--red-soft) 100%);
}

.activity-benefit-card:hover{
    transform:translateY(-9px);
    box-shadow:var(--shadow-hover);
}

.activity-benefit-card:nth-child(2):hover{
    transform:translateY(15px);
}

.activity-benefit-card i{
    width:58px;
    height:58px;
    margin-bottom:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    border-radius:18px;
    background:var(--gradient);
    font-size:1.55rem;
    box-shadow:0 12px 25px rgba(10,103,190,.22);
}

.activity-benefit-card:nth-child(2) i{
    color:#3A3100;
    background:var(--secondary);
    box-shadow:0 12px 25px rgba(255,213,74,.28);
}

.activity-benefit-card:nth-child(3) i{
    background:var(--gradient-red);
    box-shadow:0 12px 25px rgba(215,38,56,.22);
}

.activity-benefit-card h3{
    margin-bottom:12px;
    color:var(--primary-dark);
    font-size:1.22rem;
}

.activity-benefit-card p{
    color:var(--muted);
    line-height:1.7;
}

.activities-directory{
    padding:130px 8% 55px;
    background:
        radial-gradient(circle at 10% 15%,rgba(10,103,190,.08),transparent 22%),
        linear-gradient(180deg,#F6FAFE 0%,#EEF5FB 100%);
}

.activity-tools{
    width:min(1180px,100%);
    margin:auto;
    padding:28px;
    display:grid;
    gap:22px;
    border:1px solid rgba(10,103,190,.1);
    border-radius:28px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
}

.activity-search{
    height:58px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 19px;
    border:1px solid var(--border);
    border-radius:17px;
    background:var(--surface);
    transition:var(--transition);
}

.activity-search:focus-within{
    border-color:rgba(10,103,190,.45);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(10,103,190,.09);
}

.activity-search i{
    color:var(--primary);
    font-size:1.2rem;
}

.activity-search input{
    width:100%;
    border:0;
    outline:0;
    color:var(--text);
    background:transparent;
}

.activity-search input::placeholder{
    color:#8C9AA8;
}

.activity-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.activity-filter{
    padding:11px 17px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text);
    background:var(--white);
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
}

.activity-filter:hover{
    color:var(--primary);
    border-color:rgba(10,103,190,.3);
    background:var(--primary-soft);
    transform:translateY(-2px);
}

.activity-filter.active{
    color:var(--white);
    border-color:var(--primary);
    background:var(--gradient);
    box-shadow:0 10px 22px rgba(10,103,190,.22);
}

.featured-activities{
    padding:85px 8% 130px;
    background:linear-gradient(180deg,#EEF5FB 0%,#FFFFFF 100%);
}

.featured-activities-grid{
    width:min(1280px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.featured-activity-card{
    position:relative;
    min-height:520px;
    overflow:hidden;
    border-radius:30px;
    background:var(--primary-dark);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.featured-activity-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
}

.featured-activity-card img{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
    transition:transform .7s ease;
}

.featured-activity-card:hover img{
    transform:scale(1.07);
}

.featured-activity-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 22%,rgba(3,25,50,.2) 45%,rgba(3,25,50,.96) 100%);
}

.featured-activity-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:34px;
    color:var(--white);
}

.featured-activity-content span,
.activity-card-content span{
    display:inline-block;
    margin-bottom:13px;
    padding:7px 11px;
    border-radius:999px;
    font-size:.74rem;
    font-weight:800;
    letter-spacing:1px;
}

.featured-activity-content span{
    color:#302900;
    background:var(--secondary);
}

.featured-activity-content h3{
    margin-bottom:11px;
    font-size:1.55rem;
    line-height:1.25;
}

.featured-activity-content p{
    margin-bottom:14px;
    color:#EAF4FF;
    line-height:1.65;
}

.featured-activity-content small{
    color:#CFE3F7;
    line-height:1.55;
}

.all-activities{
    padding:130px 8%;
    background:var(--white);
}

.activities-grid{
    width:min(1280px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.activities-grid .activity-card{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:27px;
    background:var(--white);
    box-shadow:0 12px 32px rgba(17,58,96,.08);
    transition:var(--transition);
}

.activities-grid .activity-card:hover{
    transform:translateY(-9px);
    border-color:rgba(10,103,190,.18);
    box-shadow:var(--shadow-hover);
}

.activities-grid .activity-card img{
    width:100%;
    height:225px;
    object-fit:cover;
    background:var(--primary-soft);
    transition:transform .6s ease;
}

.activities-grid .activity-card:hover img{
    transform:scale(1.055);
}

.activity-card-content{
    position:relative;
    padding:27px;
}

.activity-card-content::before{
    content:"";
    position:absolute;
    left:27px;
    right:27px;
    top:0;
    height:4px;
    border-radius:0 0 999px 999px;
    background:var(--gradient-mixed);
}

.activity-card-content span{
    color:var(--primary);
    background:var(--primary-soft);
}

.activity-card-content h3{
    margin-bottom:11px;
    color:var(--primary-dark);
    font-size:1.25rem;
    line-height:1.35;
}

.activity-card-content p{
    margin-bottom:16px;
    color:var(--muted);
    line-height:1.72;
}

.activity-card-content small{
    display:block;
    padding-top:15px;
    color:#637486;
    line-height:1.55;
    border-top:1px solid var(--border);
}

.activity-card[hidden]{
    display:none !important;
}

.activity-empty-message{
    width:min(700px,100%);
    margin:50px auto 0;
    padding:24px;
    text-align:center;
    color:var(--muted);
    border:1px dashed rgba(10,103,190,.3);
    border-radius:20px;
    background:var(--primary-soft);
    font-weight:600;
}

.activities-gallery{
    background:
        radial-gradient(circle at 85% 12%,rgba(255,213,74,.13),transparent 18%),
        linear-gradient(180deg,#F7FAFE 0%,#FFFFFF 100%);
}

.activities-gallery .gallery-item{
    box-shadow:0 14px 36px rgba(17,58,96,.1);
}

.activities-gallery .gallery-overlay{
    background:linear-gradient(transparent 28%,rgba(3,25,50,.9));
}

.activities-gallery .gallery-overlay h3{
    transform:translateY(8px);
    transition:var(--transition);
}

.activities-gallery .gallery-item:hover .gallery-overlay h3{
    transform:none;
}

/* Ajustes del CTA en la página de experiencias */
.activities-gallery + .admissions-cta{
    position:relative;
}

.admissions-benefits{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.admissions-benefits div{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.09);
    color:#EEF7FF;
    font-size:.9rem;
}

.admissions-benefits i{
    color:var(--secondary);
}

.admissions-panel{
    width:min(355px,100%);
    flex:none;
    padding:30px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:25px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(14px);
}

.admissions-panel-icon{
    width:58px;
    height:58px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    color:#342C00;
    background:var(--secondary);
    font-size:1.5rem;
}

.admissions-panel h3{
    margin-bottom:10px;
    font-size:1.35rem;
}

.admissions-panel p{
    margin-bottom:22px;
    color:#EAF4FF;
    line-height:1.65;
}

/*==================================================
RESPONSIVE — EXPERIENCIAS LPB
==================================================*/

@media(max-width:1100px){
    .activities-intro{
        grid-template-columns:1fr;
        gap:50px;
    }

    .activities-intro-content{
        max-width:760px;
    }

    .featured-activities-grid,
    .activities-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-activity-card:last-child{
        grid-column:1 / -1;
        min-height:460px;
    }

    .featured-activity-card:last-child img{
        min-height:460px;
    }
}

@media(max-width:820px){
    .activities-hero{
        min-height:680px;
        padding:160px 6% 90px;
        background-position:62% center;
    }

    .activities-hero h1{
        letter-spacing:-1.2px;
    }

    .activities-intro,
    .activities-directory,
    .featured-activities,
    .all-activities{
        padding-left:6%;
        padding-right:6%;
    }

    .activities-benefits{
        grid-template-columns:1fr;
    }

    .activity-benefit-card,
    .activity-benefit-card:nth-child(2){
        min-height:auto;
        transform:none;
    }

    .activity-benefit-card:nth-child(2):hover{
        transform:translateY(-9px);
    }

    .admissions-benefits{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:650px){
    .activities-hero{
        min-height:650px;
        padding-top:145px;
        background-position:68% center;
    }

    .activities-hero h1{
        font-size:clamp(2.35rem,12vw,3.35rem);
    }

    .activities-hero p{
        font-size:1rem;
    }

    .activities-hero .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .activities-hero .btn-primary,
    .activities-hero .btn-secondary{
        justify-content:center;
        text-align:center;
    }

    .activities-intro{
        padding-top:95px;
        padding-bottom:95px;
    }

    .activities-directory{
        padding-top:95px;
    }

    .activity-tools{
        padding:18px;
        border-radius:22px;
    }

    .activity-filters{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding:2px 2px 8px;
        scrollbar-width:thin;
    }

    .activity-filter{
        flex:none;
        white-space:nowrap;
    }

    .featured-activities{
        padding-top:70px;
        padding-bottom:95px;
    }

    .featured-activities-grid,
    .activities-grid{
        grid-template-columns:1fr;
    }

    .featured-activity-card,
    .featured-activity-card:last-child,
    .featured-activity-card img,
    .featured-activity-card:last-child img{
        min-height:470px;
    }

    .featured-activity-card:last-child{
        grid-column:auto;
    }

    .featured-activity-content{
        padding:27px;
    }

    .all-activities{
        padding-top:95px;
        padding-bottom:95px;
    }

    .activities-grid .activity-card img{
        height:215px;
    }

    .activity-card-content{
        padding:24px;
    }

    .activity-card-content::before{
        left:24px;
        right:24px;
    }

    .admissions-panel{
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .activity-benefit-card,
    .activity-filter,
    .featured-activity-card,
    .featured-activity-card img,
    .activities-grid .activity-card,
    .activities-grid .activity-card img,
    .activities-gallery .gallery-overlay h3{
        transition:none;
    }
}


/*==================================================
AJUSTES FINALES — EXPERIENCIAS LPB
==================================================*/

/* Tarjetas destacadas: imagen y contenido con más aire */
.featured-activities-grid{
    width:min(1380px,100%);
    gap:30px;
}

.featured-activity-card{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:var(--text);
    background:var(--white);
    border:1px solid rgba(10,103,190,.1);
    box-shadow:0 18px 44px rgba(17,58,96,.1);
}

.featured-activity-card::after{
    display:none;
}

.featured-activity-card img{
    width:100%;
    height:285px;
    min-height:0;
    object-fit:cover;
}

.featured-activity-content{
    position:relative;
    inset:auto;
    flex:1;
    display:flex;
    flex-direction:column;
    padding:30px 32px 34px;
    color:var(--text);
    background:var(--white);
}

.featured-activity-content span{
    align-self:flex-start;
    color:var(--primary-dark);
    background:var(--secondary-soft);
}

.featured-activity-content h3{
    margin-bottom:12px;
    color:var(--primary-dark);
    font-size:1.48rem;
    line-height:1.28;
}

.featured-activity-content p{
    margin-bottom:16px;
    color:var(--muted);
    line-height:1.72;
}

.featured-activity-content small{
    margin-top:auto;
    padding-top:16px;
    color:var(--text);
    line-height:1.6;
    border-top:1px solid var(--border);
}

/* WhatsApp: botón tipo píldora, completo y sin recortes */
.whatsapp-float{
    left:24px;
    right:auto;
    bottom:24px;
    width:auto;
    min-width:230px;
    max-width:260px;
    height:58px;
    padding:7px 18px 7px 8px;
    gap:11px;
    border-radius:999px;
    overflow:visible;
    background:#25D366;
    color:#fff;
    font-size:1rem;
    text-decoration:none;
    box-shadow:0 16px 35px rgba(0,0,0,.18);
}

.whatsapp-icon{
    width:44px;
    height:44px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    font-size:1.45rem;
}

.whatsapp-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.15;
}

.whatsapp-text strong{
    font-size:.9rem;
}

.whatsapp-text small{
    margin-top:4px;
    color:#fff;
    font-size:.75rem;
    opacity:.92;
}

@media(max-width:1100px){
    .featured-activity-card:last-child{
        grid-column:1 / -1;
        min-height:0;
    }

    .featured-activity-card:last-child img{
        min-height:0;
    }
}

@media(max-width:650px){
    .featured-activity-card,
    .featured-activity-card:last-child,
    .featured-activity-card img,
    .featured-activity-card:last-child img{
        min-height:0;
    }

    .featured-activity-card img{
        height:235px;
    }

    .featured-activity-content{
        padding:25px;
    }

    .whatsapp-float{
        left:16px;
        right:auto;
        bottom:16px;
        width:54px;
        min-width:54px;
        height:54px;
        padding:5px;
    }

    .whatsapp-icon{
        width:44px;
        height:44px;
    }

    .whatsapp-text{
        display:none;
    }
}

/* CORRECCIÓN DEFINITIVA: ICONOS SOCIALES DEL FOOTER */

.footer-content .footer-socials{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.footer-content .footer-socials a{
    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    min-width:44px;
    max-width:44px;

    height:44px;
    min-height:44px;
    max-height:44px;

    margin:0;
    padding:0;

    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;

    color:var(--white);
    background:rgba(255,255,255,.08);

    font-size:1.12rem;
    line-height:1;
    text-decoration:none;

    transform:none;
}

.footer-content .footer-socials a i{
    display:block;
    margin:0;
    padding:0;
    line-height:1;
}

.footer-content .footer-socials a:hover{
    transform:translateY(-5px);
    border-color:transparent;
}

.footer-content .footer-socials .facebook:hover{
    background:#1877F2;
}

.footer-content .footer-socials .instagram:hover{
    background:linear-gradient(135deg,#833AB4,#E1306C,#FCAF45);
}

.footer-content .footer-socials .youtube:hover{
    background:#FF0000;
}

.footer-content .footer-socials .whatsapp:hover{
    background:#25D366;
}

/* VIDA ESCOLAR — FOTO ARRIBA Y TARJETA DEBAJO */

.life-right{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-bottom:0;
}

.life-right img{
    width:100%;
    min-height:520px;
    object-fit:cover;
    border-radius:32px;
    box-shadow:var(--shadow-hover);
}

.life-right .floating-box{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;

    transform:none;

    width:100%;
    max-width:none;

    margin:0;
    padding:30px 32px;

    border-radius:24px;
    overflow:hidden;

    color:var(--white);

    background:linear-gradient(
        110deg,
        #E11B14 0%,
        #D72638 48%,
        #A51F4C 74%,
        #6F2C70 100%
    );

    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 22px 50px rgba(150,25,45,.24);
    backdrop-filter:none;
}

.life-right .floating-box::before{
    content:"";
    position:absolute;
    top:0;
    left:32px;

    width:110px;
    height:5px;

    border-radius:0 0 999px 999px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #FF9F1C
    );
}

.life-right .floating-box i{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:16px;

    border-radius:16px;

    color:var(--white);
    background:rgba(255,255,255,.16);

    font-size:1.45rem;
}

.life-right .floating-box h3{
    margin:0 0 10px;

    color:var(--white);
    font-size:1.45rem;
    line-height:1.3;
}

.life-right .floating-box p{
    margin:0;

    color:rgba(255,255,255,.94);
    line-height:1.7;
}

/* RESPONSIVE */

@media(max-width:950px){

    .life-right{
        gap:18px;
    }

    .life-right img{
        min-height:420px;
    }
}

@media(max-width:650px){

    .life-right{
        gap:16px;
        padding-bottom:0;
    }

    .life-right img{
        min-height:320px;
    }

    .life-right .floating-box{
        width:100%;
        margin:0;
        padding:24px;

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        transform:none;
    }
}

/* =====================================================
   PÁGINA SECUNDARIA
===================================================== */


/* =========================
   HERO
========================= */

.secondary-hero{
    position:relative;

    min-height:620px;

    display:flex;
    align-items:center;

    padding:110px 8% 90px;

    background:
        linear-gradient(
            90deg,
            rgba(10,39,82,.97) 0%,
            rgba(10,39,82,.90) 35%,
            rgba(10,39,82,.62) 58%,
            rgba(10,39,82,.18) 100%
        ),
        url("img/secundaria.jpg") center 40% / cover no-repeat;

    overflow:hidden;
}


.secondary-hero-content{
    position:relative;
    z-index:2;

    max-width:760px;
}


.secondary-tag{
    display:inline-flex;

    margin-bottom:24px;
    padding:9px 16px;

    border-radius:999px;

    background:rgba(159, 29, 45, .85);
    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.4px;

    backdrop-filter:blur(8px);
    gap:12px;

}

.secondary-tag::before{
    content:"";

    width:8px;
    height:8px;
    border-radius:50%;

    background:#ff5264;

    box-shadow:
        0 0 0 4px rgba(255,82,100,.15),
        0 0 10px rgba(255,82,100,.65);

    flex-shrink:0;

    position:relative;
    top:3px;
}

.secondary-hero h1{
    margin:0 0 24px;

    max-width:720px;

    color:#fff;

    font-size:clamp(2.7rem,4.4vw,4.5rem);
    line-height:1.04;
    letter-spacing:-2px;
}


.secondary-hero p{
    max-width:650px;

    margin-bottom:34px;

    color:rgba(255,255,255,.9);

    font-size:1.08rem;
    line-height:1.8;
}


.secondary-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}


.secondary-hero .btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 24px;

    border:1px solid rgba(255,255,255,.65);
    border-radius:12px;

    color:#fff;
    text-decoration:none;
    font-weight:700;

    transition:.25s ease;
}


.secondary-hero .btn-secondary:hover{
    background:#fff;
    color:#173f7a;
}


/* =========================
   INTRO
========================= */

.secondary-intro{
    max-width:1250px;

    margin:auto;
    padding:110px 6%;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;

    gap:80px;
}


.secondary-intro-text h2{
    margin:14px 0 24px;

    font-size:clamp(2rem,3.4vw,3.3rem);
    line-height:1.12;
}


.secondary-intro-text p{
    margin-bottom:18px;

    color:#5e6673;
    line-height:1.85;
}


.secondary-intro-image{
    position:relative;
}


.secondary-intro-image img{
    width:100%;
    height:540px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(26,44,78,.15);
}


.secondary-image-detail{
    position:absolute;

    left:30px;
    right:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.92);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    backdrop-filter:blur(10px);
}


.secondary-image-detail i{
    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    flex:0 0 48px;

    border-radius:14px;

    background:#f1c40f;
    color:#173f7a;

    font-size:1.25rem;
}


.secondary-image-detail strong,
.secondary-image-detail span{
    display:block;
}


.secondary-image-detail strong{
    color:#173f7a;
    margin-bottom:3px;
}


.secondary-image-detail span{
    color:#6c7480;
    font-size:.9rem;
}


/* =========================
   PROPUESTA
========================= */

.secondary-proposal{
    padding:110px 6%;

    background:#f7f8fb;
}


.secondary-section-heading{
    max-width:760px;

    margin:0 auto 60px;

    text-align:center;
}


.secondary-section-heading h2{
    margin:14px 0 20px;

    font-size:clamp(2rem,3.4vw,3.2rem);
    line-height:1.15;
}


.secondary-section-heading p{
    color:#67707c;
    line-height:1.8;
}


.secondary-proposal-grid{
    max-width:1250px;

    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:24px;
}


.secondary-card{
    padding:34px;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(26,55,94,.07);

    box-shadow:0 15px 38px rgba(32,47,78,.06);

    transition:.28s ease;
}


.secondary-card:hover{
    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(32,47,78,.11);
}


.secondary-card-icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:24px;

    border-radius:17px;

    background:#edf3ff;
    color:#174b91;

    font-size:1.45rem;
}


.secondary-card h3{
    margin-bottom:12px;

    color:#173f7a;

    font-size:1.25rem;
}


.secondary-card p{
    margin:0;

    color:#68717d;
    line-height:1.75;
}


/* =========================
   EXPERIENCIAS
========================= */

.secondary-experiences{
    max-width:1300px;

    margin:auto;
    padding:110px 6%;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;

    gap:80px;
}


.secondary-experiences-image img{
    width:100%;
    height:620px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(26,44,78,.14);
}


.secondary-experiences-content h2{
    margin:14px 0 22px;

    font-size:clamp(2rem,3.3vw,3.2rem);
    line-height:1.12;
}


.secondary-experiences-content > p{
    color:#626c78;
    line-height:1.8;

    margin-bottom:28px;
}


.secondary-experience-list{
    display:grid;
    gap:13px;

    margin-bottom:32px;
}


.secondary-experience-list div{
    display:flex;
    align-items:center;

    gap:13px;
}


.secondary-experience-list i{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    flex:0 0 38px;

    border-radius:11px;

    background:#edf3ff;
    color:#174b91;
}


.secondary-experience-list span{
    color:#3f4854;
    font-weight:600;
}


/* =========================
   ACOMPAÑAMIENTO
========================= */

.secondary-support{
    padding:110px 6%;

    background:#f7f8fb;
}


.secondary-support-grid{
    max-width:1100px;

    margin:auto;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:22px;
}


.secondary-support-item{
    display:flex;

    gap:24px;

    padding:30px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(26,55,94,.07);
}


.secondary-support-item > span{
    font-size:2rem;
    font-weight:900;

    color:rgba(23,75,145,.18);
}


.secondary-support-item h3{
    margin:3px 0 8px;

    color:#173f7a;
}


.secondary-support-item p{
    margin:0;

    color:#68717d;
    line-height:1.7;
}


/* =========================
   CAMINO A EDUCACIÓN MEDIA
========================= */

.secondary-next-stage{
    position:relative;

    min-height:510px;

    padding:90px 9%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:70px;

    overflow:hidden;

    background:
        linear-gradient(
            120deg,
            #123b73 0%,
            #185392 55%,
            #2375ae 100%
        );
}


.secondary-next-content{
    max-width:720px;
}


.secondary-tag-light{
    display:inline-block;

    margin-bottom:20px;

    color:#ffd447;

    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.4px;
}


.secondary-next-content h2{
    margin:0 0 22px;

    color:#fff;

    font-size:clamp(2.1rem,3.7vw,3.6rem);
    line-height:1.1;
}


.secondary-next-content > p{
    color:rgba(255,255,255,.82);

    line-height:1.8;

    margin-bottom:28px;
}


.secondary-next-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:15px 25px;
}


.secondary-next-points div{
    display:flex;
    align-items:center;

    gap:10px;

    color:#fff;
}


.secondary-next-points i{
    color:#ffd447;
}


.secondary-next-number{
    min-width:280px;

    display:flex;
    align-items:center;
    gap:22px;
}


.secondary-next-number span{
    color:#fff;

    font-size:4.5rem;
    font-weight:900;
}


.secondary-next-number div{
    width:100px;
    height:4px;

    border-radius:999px;

    background:#ffd447;
}


/* =====================================================
   SECUNDARIA - CTA FINAL
===================================================== */

.secondary-cta{
    max-width:1250px;

    margin:0 auto;
    padding:75px 6%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;
}


/* TEXTO */

.secondary-cta > div:first-child{
    max-width:720px;
}

.secondary-cta h2{
    margin:14px 0 16px;

    font-size:clamp(2rem,3vw,3rem);
    line-height:1.12;

    color:#243047;
}

.secondary-cta p{
    max-width:650px;

    color:#68717d;
    line-height:1.75;
}


/* ETIQUETA CON ACENTO DE SECUNDARIA */

.secondary-cta .section-tag{
    color:#9F1D2D;
    background:#FFF0F2;

    border:1px solid rgba(159,29,45,.10);
}


/* BOTONES */

.secondary-cta-buttons{
    display:flex;
    flex-direction:column;

    min-width:225px;

    gap:12px;
}


/* Botón volver al inicio */

.secondary-home-button{
    display:flex;
    justify-content:center;
    align-items:center;

    min-height:50px;
    padding:12px 20px;

    border-radius:999px;

    border:1px solid #d6dce5;

    color:#233773;
    background:#fff;

    text-decoration:none;
    font-weight:700;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.secondary-home-button:hover{
    transform:translateY(-3px);

    background:#EEF1FA;
    border-color:rgba(35,55,115,.18);

    box-shadow:0 10px 25px rgba(35,55,115,.08);
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .secondary-intro,
    .secondary-experiences{
        grid-template-columns:1fr;
    }


    .secondary-proposal-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .secondary-next-stage{
        flex-direction:column;
        align-items:flex-start;
    }


    .secondary-next-number{
        width:100%;
        max-width:400px;
    }

}


@media(max-width:700px){

    .secondary-hero{
        min-height:620px;

        padding:120px 6% 70px;
    }


    .secondary-hero h1{
        letter-spacing:-1px;
    }


    .secondary-intro,
    .secondary-experiences,
    .secondary-proposal,
    .secondary-support{
        padding-top:75px;
        padding-bottom:75px;
    }


    .secondary-intro-image img,
    .secondary-experiences-image img{
        height:400px;
    }


    .secondary-proposal-grid,
    .secondary-support-grid,
    .secondary-next-points{
        grid-template-columns:1fr;
    }


    .secondary-image-detail{
        position:relative;

        left:auto;
        right:auto;
        bottom:auto;

        margin-top:15px;
    }


    .secondary-next-stage{
        padding:75px 7%;
    }


    .secondary-next-number span{
        font-size:3.3rem;
    }


    .secondary-cta{
        flex-direction:column;
        align-items:flex-start;

        padding:75px 7%;
    }


    .secondary-cta-buttons{
        width:100%;
    }

}

/* =====================================================
   SECUNDARIA - RETOQUE TARJETAS "NUESTRA PROPUESTA"
===================================================== */

.secondary-card{
    position:relative;
    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Línea decorativa superior */
.secondary-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#156fc1;

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .35s ease;
}


/* Hover general */
.secondary-card:hover{
    transform:translateY(-8px);

    border-color:rgba(20,91,160,.12);

    box-shadow:
        0 22px 50px rgba(25,55,95,.12);
}


.secondary-card:hover::before{
    transform:scaleX(1);
}


/* Iconos */
.secondary-card-icon{
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.secondary-card:hover .secondary-card-icon{
    transform:translateY(-3px) scale(1.07);
}


/* =====================================
   COLORES INDIVIDUALES
===================================== */

/* 1 - Formación académica */
.secondary-card:nth-child(1) .secondary-card-icon{
    background:#eaf2ff;
    color:#145ba0;
}

.secondary-card:nth-child(1)::before{
    background:#145ba0;
}


/* 2 - Inglés */
.secondary-card:nth-child(2) .secondary-card-icon{
    background:#fff0f1;
    color:#e63946;
}

.secondary-card:nth-child(2)::before{
    background:#e63946;
}


/* 3 - Tecnología */
.secondary-card:nth-child(3) .secondary-card-icon{
    background:#fff6d8;
    color:#d69b00;
}

.secondary-card:nth-child(3)::before{
    background:#f3b800;
}


/* 4 - Ciencia */
.secondary-card:nth-child(4) .secondary-card-icon{
    background:#e8f8f0;
    color:#1c9b63;
}

.secondary-card:nth-child(4)::before{
    background:#1c9b63;
}


/* 5 - Arte */
.secondary-card:nth-child(5) .secondary-card-icon{
    background:#f2ebff;
    color:#7952c7;
}

.secondary-card:nth-child(5)::before{
    background:#7952c7;
}


/* 6 - Convivencia */
.secondary-card:nth-child(6) .secondary-card-icon{
    background:#fff0e8;
    color:#e76f35;
}

.secondary-card:nth-child(6)::before{
    background:#e76f35;
}

/* =====================================================
   SECUNDARIA - EXPERIENCIAS
   Rojo como acento, no como único color
===================================================== */

.secondary-experiences-image{
    position:relative;
}

.secondary-experiences-image::before{
    content:"";
    position:absolute;

    width:72%;
    height:72%;

    left:-18px;
    bottom:-18px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #9F1D2D,
        #233773
    );

    opacity:.10;

    z-index:-1;
}


/* FOTO */

.secondary-experiences-image img{
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.secondary-experiences-image:hover img{
    transform:translateY(-5px);

    box-shadow:
        0 30px 65px rgba(35,55,115,.15);
}


/* ELEMENTOS DE LA LISTA */

.secondary-experience-list div{
    padding:7px 10px;
    margin-left:-10px;

    border-radius:13px;

    transition:
        transform .25s ease,
        background .25s ease;
}

.secondary-experience-list div:hover{
    transform:translateX(7px);

    background:#F5F7FB;
}


/* ICONOS */

.secondary-experience-list i{
    background:#EEF1FA;
    color:#233773;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


/* Algunos llevan el rojo de Secundaria */

.secondary-experience-list div:nth-child(2) i,
.secondary-experience-list div:nth-child(5) i{
    background:#FFF0F2;
    color:#9F1D2D;
}


/* HOVER */

.secondary-experience-list div:hover i{
    transform:scale(1.08);
}


/* Los azules pasan a azul sólido */

.secondary-experience-list div:not(:nth-child(2)):not(:nth-child(5)):hover i{
    background:#233773;
    color:#fff;
}


/* Los rojos pasan a rojo sólido */

.secondary-experience-list div:nth-child(2):hover i,
.secondary-experience-list div:nth-child(5):hover i{
    background:#9F1D2D;
    color:#fff;
}

/* =====================================================
   SECUNDARIA - ACOMPAÑAMIENTO
   Animación + identidad azul / rojo oscuro
===================================================== */

.secondary-support-item{
    position:relative;
    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* Barra lateral decorativa */
.secondary-support-item::before{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:4px;
    height:100%;

    background:#233773;

    transform:scaleY(0);
    transform-origin:top;

    transition:transform .3s ease;
}


/* Hover general */
.secondary-support-item:hover{
    transform:translateY(-7px);

    border-color:rgba(35,55,115,.14);

    box-shadow:
        0 22px 48px rgba(35,55,115,.12);

    background:#fff;
}


.secondary-support-item:hover::before{
    transform:scaleY(1);
}


/* Número */
.secondary-support-item > span{
    min-width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:#EEF1FA;
    color:#233773;

    font-size:1.35rem;
    font-weight:900;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


/* El número también reacciona */
.secondary-support-item:hover > span{
    transform:scale(1.08) rotate(-2deg);

    background:#233773;
    color:#fff;
}


/* Título */
.secondary-support-item h3{
    transition:
        color .3s ease,
        transform .3s ease;
}


.secondary-support-item:hover h3{
    transform:translateX(3px);
}


/* =====================================================
   ACENTOS ROJOS EN 01 Y 04
===================================================== */

.secondary-support-item:nth-child(1)::before,
.secondary-support-item:nth-child(4)::before{
    background:#9F1D2D;
}


.secondary-support-item:nth-child(1) > span,
.secondary-support-item:nth-child(4) > span{
    background:#FFF0F2;
    color:#9F1D2D;
}


.secondary-support-item:nth-child(1):hover,
.secondary-support-item:nth-child(4):hover{
    border-color:rgba(159,29,45,.16);

    box-shadow:
        0 22px 48px rgba(120,21,34,.11);
}


.secondary-support-item:nth-child(1):hover > span,
.secondary-support-item:nth-child(4):hover > span{
    background:#9F1D2D;
    color:#fff;
}


/* =====================================================
   ACENTOS AZULES EN 02 Y 03
===================================================== */

.secondary-support-item:nth-child(2)::before,
.secondary-support-item:nth-child(3)::before{
    background:#233773;
}


.secondary-support-item:nth-child(2) > span,
.secondary-support-item:nth-child(3) > span{
    background:#EEF1FA;
    color:#233773;
}

/* =====================================================
   SECUNDARIA - PROGRESIÓN 6° A 9°
===================================================== */

.secondary-next-number{
    min-width:320px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;
}

.secondary-next-number span{
    position:relative;
    z-index:2;

    min-width:92px;
    height:92px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    color:#fff;

    font-size:3.8rem;
    font-weight:900;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


/* Línea de progreso */

.secondary-next-number div{
    position:relative;

    width:120px;
    height:4px;

    border-radius:999px;

    background:rgba(255,255,255,.28);
}


/* Línea amarilla encima */

.secondary-next-number div::before{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #FFED00,
        #FFB700
    );
}


/* Puntos intermedios */

.secondary-next-number div::after{
    content:"";

    position:absolute;
    top:50%;
    left:50%;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#fff;

    border:3px solid #FFED00;

    transform:translate(-50%,-50%);

    box-shadow:
        -38px 0 0 -2px #fff,
        38px 0 0 -2px #fff;
}


/* Hover */

.secondary-next-number span:hover{
    transform:translateY(-5px) scale(1.04);

    background:rgba(255,255,255,.16);

    border-color:rgba(255,237,0,.55);
}

/* =====================================================
   SECUNDARIA - ACABADO GENERAL DE SECCIONES
===================================================== */

/* Introducción */
.secondary-intro{
    background:
        radial-gradient(
            circle at 95% 15%,
            rgba(159,29,45,.045),
            transparent 28%
        );
}


/* Nuestra propuesta */
.secondary-proposal{
    background:
        linear-gradient(
            180deg,
            #F7F8FB 0%,
            #F3F6FA 50%,
            #F7F8FB 100%
        );
}


/* Experiencias */
.secondary-experiences{
    position:relative;
}

.secondary-experiences::after{
    content:"";

    position:absolute;
    right:-120px;
    top:12%;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(35,55,115,.035);

    pointer-events:none;
    z-index:-1;
}


/* Acompañamiento */
.secondary-support{
    background:
        linear-gradient(
            180deg,
            #F7F8FB 0%,
            #F1F4F8 100%
        );
}


/* CTA final */
.secondary-cta{
    position:relative;
}

.secondary-cta::before{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:70px;
    height:4px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #9F1D2D,
        #233773,
        #FFED00
    );
}

/* =====================================================
   EDUCACIÓN MEDIA
   Color principal: verde oscuro
===================================================== */

:root{
    --media-green:#237A4B;
    --media-green-dark:#165C38;
    --media-green-soft:#EAF6EF;
}


/* =========================
   HERO
========================= */

.media-hero{
    position:relative;
    min-height:620px;

    display:flex;
    align-items:center;

    padding:110px 8% 90px;

    background:
        linear-gradient(
            90deg,
            rgba(20,38,82,.97) 0%,
            rgba(35,55,115,.90) 38%,
            rgba(35,55,115,.62) 67%,
            rgba(22,92,56,.10) 100%
        ),
        url("img/educacion-media.jpeg") center 42% / cover no-repeat;

    overflow:hidden;
}

.media-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.media-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-bottom:24px;
    padding:10px 18px;

    border-radius:999px;

    color:#fff;
    background:rgba(35,55,115,.78);
    border:1px solid rgba(255,255,255,.25);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.4px;

    backdrop-filter:blur(8px);
}

.media-tag::before{
    content:"";

    width:8px;
    height:8px;

    flex-shrink:0;

    position:relative;
    top:0px;

    border-radius:50%;

    background:#4DB978;

    box-shadow:
        0 0 0 4px rgba(77,185,120,.14),
        0 0 10px rgba(77,185,120,.55);
}

.media-hero h1{
    max-width:740px;

    margin:0 0 24px;

    color:#fff;

    font-size:clamp(2.7rem,4.4vw,4.5rem);
    line-height:1.04;
    letter-spacing:-2px;
}

.media-hero p{
    max-width:650px;
    margin-bottom:34px;

    color:rgba(255,255,255,.9);

    font-size:1.08rem;
    line-height:1.8;
}

.media-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}


/* =========================
   INTRO
========================= */

.media-intro{
    max-width:1250px;
    margin:auto;
    padding:110px 6%;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;

    background:
        radial-gradient(
            circle at 95% 15%,
            rgba(35,122,75,.05),
            transparent 28%
        );
}

.media-intro-text h2{
    margin:14px 0 24px;

    font-size:clamp(2rem,3.4vw,3.3rem);
    line-height:1.12;
}

.media-intro-text p{
    margin-bottom:18px;

    color:#5e6673;
    line-height:1.85;
}

.media-intro-image{
    position:relative;
}

.media-intro-image img{
    width:100%;
    height:540px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(26,44,78,.15);
}

.media-image-detail{
    position:absolute;

    left:30px;
    right:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:20px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.93);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    backdrop-filter:blur(10px);
}

.media-image-detail i{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    flex:0 0 48px;

    border-radius:14px;

    color:#fff;
    background:var(--media-green);

    font-size:1.25rem;
}

.media-image-detail strong,
.media-image-detail span{
    display:block;
}

.media-image-detail strong{
    margin-bottom:3px;
    color:var(--media-green-dark);
}

.media-image-detail span{
    color:#6c7480;
    font-size:.9rem;
}


/* =========================
   ENCABEZADOS
========================= */

.media-section-heading{
    max-width:780px;
    margin:0 auto 60px;
    text-align:center;
}

.media-section-heading h2{
    margin:14px 0 20px;

    font-size:clamp(2rem,3.4vw,3.2rem);
    line-height:1.15;
}

.media-section-heading p{
    color:#67707c;
    line-height:1.8;
}


/* =========================
   PROPUESTA
========================= */

.media-proposal{
    padding:85px 6%;

    background:
        linear-gradient(
            180deg,
            #F7F9FB 0%,
            #F2F6F4 50%,
            #F7F9FB 100%
        );
}

.media-proposal-grid{
    max-width:1250px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.media-card{
    position:relative;
    overflow:hidden;

    padding:34px;

    border-radius:24px;

    background:#fff;
    border:1px solid rgba(26,55,94,.07);

    box-shadow:0 15px 38px rgba(32,47,78,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.media-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:var(--media-green);

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .35s ease;
}

.media-card:hover{
    transform:translateY(-8px);

    border-color:rgba(35,122,75,.15);

    box-shadow:0 22px 50px rgba(35,80,60,.12);
}

.media-card:hover::before{
    transform:scaleX(1);
}

.media-card-icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:24px;

    border-radius:17px;

    background:var(--media-green-soft);
    color:var(--media-green);

    font-size:1.45rem;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.media-card:hover .media-card-icon{
    transform:translateY(-3px) scale(1.07);
}

/* Algunos acentos secundarios para no saturar de verde */

/* Colores individuales para cada tarjeta */

/* 1 - Fortalecimiento académico | Verde Media */
.media-card:nth-child(1) .media-card-icon{
    background:#EAF6EF;
    color:#237A4B;
}

.media-card:nth-child(1)::before{
    background:#237A4B;
}


/* 2 - Pensamiento crítico | Azul LPB */
.media-card:nth-child(2) .media-card-icon{
    background:#EEF1FA;
    color:#233773;
}

.media-card:nth-child(2)::before{
    background:#233773;
}


/* 3 - Inglés | Amarillo LPB */
.media-card:nth-child(3) .media-card-icon{
    background:#FFF9D6;
    color:#B78700;
}

.media-card:nth-child(3)::before{
    background:#FFCB20;
}


/* 4 - Tecnología | Rojo institucional */
.media-card:nth-child(4) .media-card-icon{
    background:#FBEAEC;
    color:#9F1D2D;
}

.media-card:nth-child(4)::before{
    background:#9F1D2D;
}

/* 5 - Investigación | Azul claro */
.media-card:nth-child(5) .media-card-icon{
    background:#E8F4FA;
    color:#24749A;
}

.media-card:nth-child(5)::before{
    background:#24749A;
}


/* 6 - Autonomía y liderazgo | Naranja */
.media-card:nth-child(6) .media-card-icon{
    background:#FFF0E3;
    color:#C56722;
}

.media-card:nth-child(6)::before{
    background:#C56722;
}

.media-card h3{
    margin-bottom:12px;

    color:#243047;
    font-size:1.25rem;
}

.media-card p{
    margin:0;

    color:#68717d;
    line-height:1.75;
}


/* =========================
   SABER 11
========================= */

.media-saber{
    max-width:1250px;
    margin:auto;
    padding:110px 6%;

    display:grid;
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:70px;
}

.media-section-label{
    display:inline-block;

    margin-bottom:18px;

    color:var(--media-green);

    font-size:.8rem;
    font-weight:800;
    letter-spacing:1.6px;
}

.media-saber-content h2{
    margin-bottom:22px;

    font-size:clamp(2rem,3.4vw,3.25rem);
    line-height:1.12;
}

.media-saber-content > p{
    margin-bottom:26px;

    color:#626c78;
    line-height:1.85;
}

.media-saber-list{
    display:grid;
    gap:13px;
}

.media-saber-list div{
    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:10px 12px;
    margin-left:-12px;

    border-radius:13px;

    transition:
        transform .25s ease,
        background .25s ease;
}

.media-saber-list div:hover{
    transform:translateX(6px);
    background:#F2F7F4;
}

.media-saber-list i{
    margin-top:2px;

    color:var(--media-green);

    font-size:1.1rem;
}

.media-saber-card{
    position:relative;
    overflow:hidden;

    padding:38px;

    border-radius:30px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #172650,
            #233773 65%,
            #3156A3
        );

    box-shadow:0 28px 65px rgba(35,55,115,.20);
}

.media-saber-card::after{
    content:"";

    position:absolute;
    right:-70px;
    bottom:-90px;

    width:210px;
    height:210px;

    border-radius:50%;

    background:rgba(255,237,0,.12);
}

.media-saber-icon{
    width:62px;
    height:62px;

    display:grid;
    place-items:center;

    margin-bottom:24px;

    border-radius:18px;

    color:#233773;
    background:#FFED00;

    font-size:1.6rem;
}

.media-saber-card > span{
    display:block;

    margin-bottom:10px;

    color:#CFEAD9;

    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.4px;
}

.media-saber-card h3{
    position:relative;
    z-index:2;

    margin-bottom:14px;

    font-size:1.6rem;
    line-height:1.3;
}

.media-saber-card p{
    position:relative;
    z-index:2;

    margin:0;

    color:rgba(255,255,255,.84);
    line-height:1.75;
}


/* =========================
   VOCACIÓN Y PROYECTO DE VIDA
========================= */

.media-vocation{
    padding:110px 6%;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:80px;

    background:#F5F8F6;
}

.media-vocation-image img{
    width:100%;
    height:650px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(26,44,78,.13);
}

.media-vocation-content h2{
    margin:14px 0 22px;

    font-size:clamp(2rem,3.3vw,3.2rem);
    line-height:1.12;
}

.media-vocation-content > p{
    margin-bottom:28px;

    color:#626c78;
    line-height:1.8;
}

.media-vocation-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.media-experiences-grid article:nth-child(4) i{
    background:#FBEAEC;
    color:#9F1D2D;
}

.media-vocation-grid > div{
    padding:20px;

    border-radius:18px;

    background:#fff;
    border:1px solid #E3E9E5;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.media-vocation-grid > div:hover{
    transform:translateY(-5px);

    border-color:rgba(35,122,75,.18);

    box-shadow:0 16px 35px rgba(35,80,60,.09);
}

.media-vocation-grid i{
    display:inline-grid;
    place-items:center;

    width:42px;
    height:42px;

    margin-bottom:12px;

    border-radius:12px;

    color:var(--media-green);
    background:var(--media-green-soft);
}

.media-vocation-grid > div:nth-child(2) i,
.media-vocation-grid > div:nth-child(4) i{
    color:#233773;
    background:#EEF1FA;
}

.media-vocation-grid h3{
    margin-bottom:7px;

    font-size:1rem;
    color:#243047;
}

.media-vocation-grid p{
    margin:0;

    color:#68717d;
    line-height:1.6;
    font-size:.9rem;
}


/* =========================
   EXPERIENCIAS
========================= */

.media-experiences{
    padding:110px 6%;
}

.media-experiences-grid{
    max-width:1150px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.media-experiences-grid article{
    padding:30px 25px;

    border-radius:22px;

    background:#fff;
    border:1px solid #E4E9EF;

    box-shadow:0 12px 30px rgba(32,47,78,.05);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.media-experiences-grid article:hover{
    transform:translateY(-7px);

    box-shadow:0 22px 45px rgba(32,47,78,.1);
}

.media-experiences-grid i{
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    margin-bottom:20px;

    border-radius:15px;

    color:var(--media-green);
    background:var(--media-green-soft);

    font-size:1.3rem;
}

.media-experiences-grid article:nth-child(2) i{
    color:#233773;
    background:#EEF1FA;
}

.media-experiences-grid article:nth-child(3) i{
    color:#B78700;
    background:#FFFBD1;
}

.media-experiences-grid h3{
    margin-bottom:9px;

    font-size:1.08rem;
    color:#243047;
}

.media-experiences-grid p{
    margin:0;

    color:#68717d;
    line-height:1.65;
    font-size:.92rem;
}

.media-experiences-action{
    margin-top:34px;
    text-align:center;
}


/* =========================
   TU PRÓXIMO PASO
========================= */

.media-next{
    padding:85px 6%;

    background:
        linear-gradient(
            180deg,
            #F7F9FC 0%,
            #F1F4F8 100%
        );
}

.media-next-grid{
    max-width:1150px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:start;
    gap:24px;
}

.media-next-card{
    position:relative;

    min-height:390px;

    padding:30px;

    border-radius:26px;

    background:#fff;
    border:1px solid #E0E7E2;

    box-shadow:0 18px 42px rgba(33,72,52,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.media-next-card:hover{
    transform:translateY(-8px);

    box-shadow:0 28px 55px rgba(33,72,52,.13);
}

/* Escalonado, distinto a Secundaria */

.media-next-11{
    margin-top:28px;
}

.media-next-future{
    margin-top:56px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #172650,
            #233773
        );

    border-color:transparent;
}

.media-next-grade{
    display:inline-block;

    margin-bottom:22px;

    color:var(--media-green);

    font-size:.82rem;
    font-weight:900;
    letter-spacing:1.3px;
}

.media-next-future .media-next-grade{
    color:#CDE9D7;
}

.media-next-icon{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:22px;

    border-radius:17px;

    color:#fff;
    background:var(--media-green);

    font-size:1.4rem;
}

.media-next-11 .media-next-icon{
    color:#233773;
    background:#FFED00;
}

.media-next-future .media-next-icon{
    color:#233773;
    background:#FFED00;
}

.media-next-step{
    display:block;

    margin-bottom:10px;

    color:#7E8995;

    font-size:.74rem;
    font-weight:900;
    letter-spacing:1.5px;
}

.media-next-future .media-next-step{
    color:#BFE0CB;
}

.media-next-card h3{
    margin-bottom:14px;

    color:#243047;

    font-size:1.35rem;
    line-height:1.35;
}

.media-next-card p{
    margin:0;

    color:#68717d;
    line-height:1.7;
}

.media-next-future h3{
    color:#fff;
}

.media-next-future p{
    color:rgba(255,255,255,.82);
}


/* =========================
   CTA FINAL
========================= */

.media-cta{
    max-width:1250px;
    margin:0 auto;

    padding:65px 6%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;
}

.media-cta > div:first-child{
    max-width:720px;
}

.media-cta .section-tag{
    color:var(--media-green);
    background:var(--media-green-soft);

    border:1px solid rgba(35,122,75,.1);
}

.media-cta h2{
    margin:14px 0 16px;

    color:#243047;

    font-size:clamp(2rem,3vw,3rem);
    line-height:1.12;
}

.media-cta p{
    max-width:650px;

    color:#68717d;
    line-height:1.75;
}

.media-cta-buttons{
    display:flex;
    flex-direction:column;

    min-width:225px;
    gap:12px;
}

.media-home-button{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    padding:12px 20px;

    border-radius:999px;

    color:#233773;
    background:#fff;
    border:1px solid #d6dce5;

    text-decoration:none;
    font-weight:700;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.media-home-button:hover{
    transform:translateY(-3px);

    background:#EEF1FA;
    border-color:rgba(35,55,115,.18);

    box-shadow:0 10px 25px rgba(35,55,115,.08);
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .media-intro,
    .media-saber,
    .media-vocation{
        grid-template-columns:1fr;
    }

    .media-proposal-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .media-experiences-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .media-next-grid{
        grid-template-columns:1fr;
    }

    .media-next-11,
    .media-next-future{
        margin-top:0;
    }
}

@media(max-width:700px){

    .media-hero{
        min-height:620px;
        padding:120px 6% 70px;
    }

    .media-hero h1{
        letter-spacing:-1px;
    }

    .media-intro,
    .media-proposal,
    .media-saber,
    .media-vocation,
    .media-experiences,
    .media-next{
        padding-top:75px;
        padding-bottom:75px;
    }

    .media-intro-image img,
    .media-vocation-image img{
        height:400px;
    }

    .media-image-detail{
        position:relative;

        left:auto;
        right:auto;
        bottom:auto;

        margin-top:15px;
    }

    .media-proposal-grid,
    .media-experiences-grid,
    .media-vocation-grid{
        grid-template-columns:1fr;
    }

    .media-cta{
        flex-direction:column;
        align-items:flex-start;

        padding:75px 7%;
    }

    .media-cta-buttons{
        width:100%;
    }
}

/* =====================================================
   AJUSTE FINAL HERO / CARRUSEL LPB
   Override aislado para no modificar el resto del sitio
===================================================== */

@media (min-width:951px){

    .hero{
        position:relative;
        min-height:820px;
        margin-top:88px;
        padding:0;
        display:block;
        overflow:hidden;
        background:#042449;
    }

    .hero-slides{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .hero-slide{
        position:absolute;
        inset:0;
        display:flex;
        align-items:flex-start;
        padding:105px 8% 120px;
        opacity:0;
        visibility:hidden;
        transform:scale(1.015);
        transition:
            opacity .8s ease,
            visibility .8s ease,
            transform 1.2s ease;
    }

    .hero-slide.active{
        opacity:1;
        visibility:visible;
        transform:scale(1);
    }

    /* Encuadre más bajo y con más aire arriba */
    .hero-slide:nth-child(1){
        background:
            linear-gradient(
                90deg,
                rgba(4,36,73,.94) 0%,
                rgba(4,36,73,.78) 50%,
                rgba(90,17,34,.52) 100%
            ),
            url("img/hero.jpg") center 35% / cover no-repeat;
    }

    .hero-slide:nth-child(2){
        background:
            linear-gradient(
                90deg,
                rgba(4,36,73,.94) 0%,
                rgba(4,36,73,.76) 50%,
                rgba(90,17,34,.48) 100%
            ),
            url("img/experiencias.jpg") center 42% / cover no-repeat;
    }

    .hero-slide:nth-child(3){
        background:
            linear-gradient(
                90deg,
                rgba(4,36,73,.94) 0%,
                rgba(4,36,73,.76) 50%,
                rgba(90,17,34,.48) 100%
            ),
            url("img/innovacion.png") center 42% / cover no-repeat;
    }

    .hero-content{
        position:relative;
        z-index:5;
        width:min(760px,58vw);
        margin:0;
        color:var(--white);
    }

    .hero h1{
        max-width:780px;
        margin:0 0 26px;
        font-size:clamp(3.15rem,4.55vw,4.55rem);
        line-height:1.04;
        font-weight:800;
        letter-spacing:-1.4px;
        text-transform:uppercase;
        text-wrap:balance;
        color:var(--white);
    }

    .hero-content > p{
        max-width:690px;
        margin-bottom:30px;
        font-size:1.05rem;
        line-height:1.72;
        color:rgba(255,255,255,.92);
    }

    .hero-card{
        top:49%;
        right:6%;
        width:min(340px,26vw);
        transform:translateY(-50%);
    }

    .hero-arrow{
        top:50%;
    }

    .hero-dots{
        bottom:42px;
    }

    .scroll-indicator{
        bottom:12px;
    }

    /* Las cuatro tarjetas ya no se montan encima del hero */
    .hero-info{
        width:min(1240px,92%);
        margin:48px auto 0;
    }
}

/* Tablet: mantener separación sin tocar el resto de la página */
@media (min-width:701px) and (max-width:950px){
    .hero{
        margin-top:88px;
    }

    .hero-slide{
        padding-top:105px;
        padding-bottom:130px;
    }

    .hero-info{
        margin:34px auto 0;
    }
}

/* Móvil: evitar solapamiento con el header y separar estadísticas */
@media (max-width:700px){
    .hero{
        margin-top:76px;
    }

    .hero-info{
        margin:26px auto 0;
    }
}

/* =========================================
   WHATSAPP FLOTANTE - CORRECCIÓN FINAL
========================================= */

a.whatsapp-float{
    position:fixed;

    left:24px !important;
    right:auto !important;
    bottom:24px !important;

    width:auto !important;
    min-width:230px !important;
    max-width:260px !important;
    height:62px !important;

    padding:8px 18px 8px 8px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;

    border-radius:999px !important;

    background:linear-gradient(135deg,#16A34A,#25D366) !important;
    color:#fff !important;
    text-decoration:none !important;

    z-index:1100;

    box-shadow:0 18px 42px rgba(22,163,74,.30);
}

a.whatsapp-float .whatsapp-icon{
    flex:0 0 46px !important;
    width:46px !important;
    height:46px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:rgba(255,255,255,.18);

    font-size:1.55rem;
}

a.whatsapp-float .whatsapp-text{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;

    width:auto !important;

    color:#fff;
    line-height:1.15;
}

a.whatsapp-float .whatsapp-text strong{
    font-size:.92rem;
    white-space:nowrap;
}

a.whatsapp-float .whatsapp-text small{
    margin-top:4px;
    font-size:.74rem;
    color:#ECFFF2;
    white-space:nowrap;
}

a.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.02);
}

/* En celular se convierte en círculo */
@media(max-width:650px){

    a.whatsapp-float{
        left:16px !important;
        right:auto !important;
        bottom:16px !important;

        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
        height:58px !important;

        padding:6px !important;

        justify-content:center !important;
    }

    a.whatsapp-float .whatsapp-text{
        display:none !important;
    }
}

/* FORZAR TEXTO DEL WHATSAPP EN ESCRITORIO */
@media(min-width:651px){
    body a.whatsapp-float .whatsapp-text{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        visibility:visible !important;
        opacity:1 !important;
        width:auto !important;
        height:auto !important;
        overflow:visible !important;
    }

    body a.whatsapp-float .whatsapp-text strong,
    body a.whatsapp-float .whatsapp-text small{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}

/* ==========================================================
   REDISEÑO VISUAL — PÁGINA PEI
   Solo modifica el contenido del PEI. No afecta el footer.
========================================================== */

/* Introducción más compacta */

.pei-declaration {
    padding: 90px 20px;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 237, 0, 0.12), transparent 22%),
        radial-gradient(circle at 8% 90%, rgba(225, 27, 20, 0.07), transparent 24%),
        #ffffff;
}

.pei-declaration-content {
    max-width: 1000px;
}

.pei-declaration .section-label {
    margin-bottom: 16px;
}

.pei-declaration h2 {
    margin-bottom: 22px;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
}

.pei-main-phrase {
    max-width: 760px;
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
}

.pei-concepts {
    gap: 16px;
    margin-top: 42px;
}

.pei-concept {
    padding: 13px 24px;
    border: 1px solid rgba(35, 55, 115, 0.14);
    border-radius: 999px;
    background: #f8faff;
    font-size: 1rem;
    box-shadow: 0 8px 22px rgba(35, 55, 115, 0.06);
}

.pei-concept::after {
    display: none;
}

.pei-concept:hover {
    color: #233773;
    background: #ffed00;
    border-color: #ffed00;
    transform: translateY(-4px);
}


/* Pilares en cuadrícula 2 × 2 */

.pei-pillars {
    padding: 90px 8%;
    background: #f7f9fd;
}

.pei-pillars .section-heading {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}

.pei-pillars .section-heading h2 {
    margin: 12px 0 16px;
}

.pei-pillars .section-heading p {
    margin: 0 auto;
}

.pillar-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.pillar-item {
    display: block;
    min-height: 290px;
    padding: 38px;
    border: 1px solid rgba(35, 55, 115, 0.12);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(35, 55, 115, 0.08);
}

.pillar-item::before {
    width: 100%;
    height: 6px;
    transform: scaleX(1);
    transform-origin: left;
}

.pillar-item::after {
    display: none;
}

.pillar-number {
    display: inline-flex;
    width: 66px;
    height: 66px;
    margin-bottom: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(35, 55, 115, 0.08);
    font-size: 1.7rem;
}

.pillar-content {
    max-width: none;
}

.pillar-content h3 {
    margin-bottom: 14px;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.pillar-content h3::after {
    width: 42px;
    height: 3px;
    margin-top: 12px;
}

.pillar-content p {
    max-width: none;
    font-size: 1rem;
    line-height: 1.7;
}

.pillar-item:hover {
    transform: translateY(-8px);
}

.pillar-item:hover .pillar-content h3 {
    transform: none;
}

.pillar-item:nth-child(1)::before {
    background: #233773;
}

.pillar-item:nth-child(2)::before {
    background: #2e8b57;
}

.pillar-item:nth-child(3)::before {
    background: #d9a400;
}

.pillar-item:nth-child(4)::before {
    background: #e11b14;
}

.pillar-item:nth-child(2) .pillar-number {
    color: #2e8b57;
    background: rgba(46, 139, 87, 0.1);
}

.pillar-item:nth-child(3) .pillar-number {
    color: #b88900;
    background: rgba(217, 164, 0, 0.12);
}

.pillar-item:nth-child(4) .pillar-number {
    color: #e11b14;
    background: rgba(225, 27, 20, 0.09);
}


/* Corazón del PEI más visible y compacto */

.pei-core {
    padding: 90px 20px;
    background:
        linear-gradient(135deg, rgba(35, 55, 115, 0.04), transparent 50%),
        #ffffff;
}

.pei-core .section-heading {
    max-width: 760px;
    margin: 0 auto 45px;
}

.pei-core .section-heading h2 {
    color: #233773;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.pei-diagram {
    width: min(100%, 900px);
    height: 540px;
    margin: 0 auto;
    border: 1px solid rgba(35, 55, 115, 0.1);
    border-radius: 32px;
    background:
        radial-gradient(circle at center, rgba(255, 237, 0, 0.13), transparent 28%),
        #f8faff;
    box-shadow: 0 18px 45px rgba(35, 55, 115, 0.08);
}

.diagram-center {
    width: 190px;
    height: 190px;
}

.diagram-item {
    width: 210px;
}

.diagram-item.top {
    top: 28px;
}

.diagram-item.left {
    left: 45px;
}

.diagram-item.right {
    right: 45px;
}

.diagram-item.bottom {
    bottom: 22px;
}

.diagram-item i {
    width: 70px;
    height: 70px;
    margin-bottom: 12px;
    background: #ffffff;
}


/* Adaptación para tablet y celular */

@media (max-width: 850px) {
    .pillar-list {
        grid-template-columns: 1fr;
    }

    .pillar-item {
        min-height: auto;
    }

    .pei-diagram {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        height: auto;
        padding: 28px;
    }

    .diagram-center,
    .diagram-item,
    .diagram-item.top,
    .diagram-item.left,
    .diagram-item.right,
    .diagram-item.bottom {
        position: static;
        width: auto;
        transform: none;
    }

    .diagram-center {
        grid-column: 1 / -1;
        width: 160px;
        height: 160px;
        margin: 0 auto 10px;
    }

    .diagram-item {
        padding: 22px 14px;
        border-radius: 20px;
        background: #ffffff;
    }
}

@media (max-width: 560px) {
    .pei-declaration,
    .pei-pillars,
    .pei-core {
        padding: 70px 18px;
    }

    .pei-concepts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pei-concept {
        padding: 12px 10px;
        text-align: center;
    }

    .pillar-item {
        padding: 30px 25px;
    }

    .pei-diagram {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .diagram-center {
        grid-column: auto;
    }
}