/* ========================================
   KAWSAY ÑAN 2027
   ======================================== */

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

:root {
    --marron: #5A321E;
    --marron-oscuro: #3B2416;

    --naranja: #F58220;
    --naranja-claro: #FF9A32;

    --dorado: #D99A2B;

    --crema: #FFF8EE;
    --blanco: #FFFFFF;

    --texto: #302A26;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--texto);
    background: var(--blanco);
}

a {
    text-decoration: none;
}


/* CONTENEDOR */

.container {
    width: min(1180px, 92%);
    margin: auto;
}


/* BARRA SUPERIOR */

.top-bar {
    background: var(--marron-oscuro);
    color: white;
    font-size: 14px;
}

.top-bar-content {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-contact {
    display: flex;
    gap: 22px;
}

.top-bar a {
    color: white;
}


/* MENÚ */

.header {
    top: 0;
    z-index: 9999;
    width: 100%;
}

.navbar {
    background: rgba(255, 255, 255, 0.97);

    box-shadow: 0 4px 18px rgba(59, 36, 22, 0.10);

    position: relative;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-container {
    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* MARCA */

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-text strong {
    color: var(--marron);
    font-size: 21px;
}

.brand-text span {
    color: var(--naranja);
    margin-top: 4px;
    font-size: 13px;
}


/* LINKS */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 23px;

    list-style: none;
}

.nav-menu a {
    color: var(--marron);
    font-size: 15px;
    font-weight: 600;

    transition: .25s;
}

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


/* BOTÓN ADMISIÓN */

.nav-menu .btn-admision {
    display: inline-block;

    padding: 13px 18px;

    color: white;
    background: var(--naranja);

    border-radius: 25px;

    box-shadow: 0 5px 15px rgba(244,123,32,.25);
}

.nav-menu .btn-admision:hover {
    background: var(--marron);
    color: white;
}


/* BOTÓN MÓVIL */

.menu-toggle {
    display: none;

    border: none;
    background: none;

    color: var(--marron);

    font-size: 30px;
    cursor: pointer;
}


/* PRUEBA DE PORTADA */

.prueba {
    min-height: 520px;

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

    text-align: center;

    padding: 60px 20px;

    background:
        linear-gradient(
            135deg,
            #fff7eb,
            #ffffff
        );
}

.prueba h1 {
    color: var(--marron);

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.05;

    margin-bottom: 20px;
}

.prueba p {
    color: var(--naranja);

    font-size: 22px;

    margin-bottom: 30px;
}

.prueba a {
    padding: 15px 28px;

    color: white;
    background: var(--naranja);

    border-radius: 30px;

    font-weight: bold;
}


/* ========================================
   CELULAR
   ======================================== */

@media (max-width: 900px) {

    .top-bar-content {
        justify-content: center;
    }

    .top-bar-content > span {
        display: none;
    }


    .brand-logo {
        width: 60px;
        height: 60px;
    }

    .brand-text strong {
        font-size: 16px;
    }

    .brand-text span {
        font-size: 11px;
    }


    .menu-toggle {
        display: block;
    }


    .nav-menu {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        padding: 25px;

        background: white;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        box-shadow: 0 12px 25px rgba(0,0,0,.12);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        border-bottom: 1px solid #eee;
    }

    .nav-menu li:last-child {
        border-bottom: none;
        margin-top: 15px;
    }

    .nav-menu a {
        display: block;
        padding: 15px 5px;
    }

    .nav-menu .btn-admision {
        text-align: center;
    }

}

.top-bar {
    display: none;
}

.nav-container {
    min-height: 72px;
}

.brand-logo {
    width: 52px;
    height: 52px;
}

.brand-text strong {
    font-size: 16px;
}

.brand-text span {
    font-size: 11px;
}

.menu-toggle {
    display: block;
}

.nav-menu {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;

    padding: 15px 25px 25px;

    background: white;

    flex-direction: column;
    align-items: stretch;

    gap: 0;

    box-shadow: 0 15px 30px rgba(0,0,0,.12);
}

.nav-menu.active {
    display: flex;
}

.nav-menu li {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.nav-menu li:last-child {
    border-bottom: 0;
    margin-top: 12px;
}

.nav-menu a {
    display: block;
    padding: 14px 5px;
}

.nav-menu .btn-admision {
    padding: 14px 20px;
    text-align: center;
}

/* ========================================
   HERO - ADMISIÓN 2027
======================================== */

.hero {
    min-height: 650px;
    position: relative;

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(46, 27, 16, .93) 0%,
            rgba(59, 36, 22, .80) 42%,
            rgba(59, 36, 22, .20) 72%,
            rgba(59, 36, 22, .05) 100%
        ),
        url("../img/portada/portada-admision.jpg");

    background-size: cover;
    background-position: center;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-text {
    width: min(620px, 100%);
    color: white;
}


/* ETIQUETA */

.hero-badge {
    display: inline-block;

    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);

    padding: 9px 17px;
    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 20px;
}


/* ADMISIÓN */

.hero h1 {
    font-size: clamp(65px, 8vw, 105px);
    line-height: .9;

    text-transform: uppercase;

    margin-bottom: 18px;

    letter-spacing: -3px;
}

.hero h1 span {
    color: var(--naranja);
}


/* SUBTÍTULO */

.hero h2 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;

    margin-bottom: 20px;
}


/* TEXTO */

.hero p {
    max-width: 560px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255,255,255,.90);

    margin-bottom: 28px;
}


/* BOTONES */

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

    margin-bottom: 28px;
}

.btn-primary,
.btn-whatsapp {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 700;

    transition: .25s ease;
}

.btn-primary {
    color: white;
    background: var(--naranja);
}

.btn-primary:hover {
    background: var(--naranja-claro);
    transform: translateY(-2px);
}

.btn-whatsapp {
    color: white;
    background: #25D366;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
}


/* DATOS */

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    font-size: 14px;
    font-weight: 600;
}


/* CELULAR */

@media (max-width: 700px) {

    .hero {
        min-height: 690px;

        align-items: flex-end;

        background-position: 62% center;

        background-image:
            linear-gradient(
                0deg,
                rgba(46,27,16,.98) 0%,
                rgba(46,27,16,.88) 48%,
                rgba(46,27,16,.25) 100%
            ),
            url("../img/portada/portada-admision.jpg");
    }

    .hero-content {
        padding-top: 180px;
        padding-bottom: 45px;
    }

    .hero h1 {
        font-size: 58px;
        letter-spacing: -2px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-whatsapp {
        width: 100%;
    }

}

/* ========================================
   ¿POR QUÉ KAWSAY ÑAN?
======================================== */

.why-kawsay {
    padding: 90px 0;
    background: #ffffff;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-tag {
    display: inline-block;
    margin-bottom: 12px;

    color: var(--naranja);

    font-size: 14px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-heading h2 {
    margin-bottom: 18px;

    color: var(--marron);

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
}

.section-heading h2 span {
    color: var(--naranja);
}

.section-heading p {
    color: #666;
    font-size: 17px;
    line-height: 1.7;
}


/* TARJETAS */

.benefits-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}

.benefit-card {
    position: relative;

    min-height: 270px;

    padding: 30px 25px;

    background: #fff;

    border: 1px solid #eee5dc;
    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(62,36,22,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.benefit-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(62,36,22,.13);
}


/* ICONOS */

.benefit-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 22px;

    background: var(--crema);

    border-radius: 16px;

    font-size: 29px;
}


/* TEXTOS */

.benefit-card h3 {
    margin-bottom: 12px;

    color: var(--marron);

    font-size: 20px;
}

.benefit-card p {
    color: #6a625d;

    font-size: 14px;
    line-height: 1.7;
}


/* TARJETA ADMISIÓN */

.special-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--marron),
            var(--marron-oscuro)
        );

    border: none;
}

.special-card > span {
    margin-bottom: 14px;

    color: var(--naranja-claro);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
}

.special-card h3 {
    color: white;

    font-size: 24px;
    line-height: 1.2;
}

.special-card p {
    color: rgba(255,255,255,.8);
}

.special-card a {
    margin-top: 20px;

    color: var(--naranja-claro);

    font-weight: 700;
}


/* TABLET */

@media (max-width: 1050px) {

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

}


/* CELULAR */

@media (max-width: 600px) {

    .why-kawsay {
        padding: 65px 0;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        min-height: auto;
    }

}

.top-bar {
    display: none;
}

.nav-container {
    min-height: 72px;
}

/* =========================================
   EXPERIENCIAS KAWSAY ÑAN
========================================= */

.experiencias {
    padding: 90px 0;
    background: var(--crema);
}

.experiencias-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 18px;
}


/* TARJETAS */

.experiencia-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: var(--marron);

    box-shadow:
        0 10px 30px rgba(59,36,22,.12);
}

.experiencia-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

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


/* TAMAÑOS */

.experiencia-grande {
    grid-row: span 2;
}

.experiencia-ancha {
    grid-column: 1 / -1;
}


/* OSCURECIDO */

.experiencia-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(40,22,13,.90) 0%,
            rgba(40,22,13,.25) 60%,
            transparent 100%
        );
}


/* INFORMACIÓN */

.experiencia-info {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 24px;

    z-index: 2;

    color: white;
}

.experiencia-info span {
    display: block;

    margin-bottom: 5px;

    color: #ffad55;

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.experiencia-info h3 {
    margin: 0;

    color: white;

    font-size: 29px;
}

.experiencia-info p {
    max-width: 380px;

    margin-top: 8px;

    color: rgba(255,255,255,.85);

    font-size: 14px;
    line-height: 1.5;
}


/* BOTÓN */

.experiencias-action {
    margin-top: 35px;

    text-align: center;
}

.experiencias-action a {
    display: inline-block;

    padding: 14px 25px;

    color: white;
    background: var(--marron);

    border-radius: 30px;

    font-weight: 700;

    transition: .25s;
}

.experiencias-action a:hover {
    background: var(--naranja);

    transform: translateY(-2px);
}


/* TABLET */

@media (max-width: 900px) {

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

    .experiencia-ancha {
        grid-column: span 1;
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .experiencias {
        padding: 65px 0;
    }

    .experiencias-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }

    .experiencia-grande {
        grid-row: span 1;
    }

    .experiencia-ancha {
        grid-column: span 1;
    }

}

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

/* =========================================
   ADMISIÓN 2027 - PASOS
========================================= */

.admision-pasos {
    padding: 95px 0;

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


/* CABECERA */

.admision-pasos-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    margin-bottom: 50px;
}

.admision-pasos-header > div:first-child {
    max-width: 720px;
}

.admision-pasos-header h2 {
    margin: 5px 0 18px;

    color: var(--marron);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.08;
}

.admision-pasos-header h2 span {
    color: var(--naranja);
}

.admision-pasos-header p {
    color: #68605b;

    font-size: 17px;
    line-height: 1.7;
}


/* NIVEL */

.admision-nivel {
    min-width: 180px;

    padding: 20px 25px;

    text-align: center;

    background: var(--marron);

    border-radius: 20px;

    color: white;

    box-shadow:
        0 12px 30px rgba(59,36,22,.15);
}

.admision-nivel span {
    display: block;

    margin-bottom: 4px;

    color: var(--naranja-claro);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.admision-nivel strong {
    display: block;

    font-size: 21px;
}

.admision-nivel small {
    display: block;

    margin-top: 5px;

    color: rgba(255,255,255,.75);
}


/* PASOS */

.pasos-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    margin-bottom: 40px;
}


/* TARJETA */

.paso-card {
    position: relative;

    min-height: 290px;

    padding: 34px;

    overflow: hidden;

    background: white;

    border:
        1px solid #eee1d4;

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(59,36,22,.07);

    transition: .3s ease;
}

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

    box-shadow:
        0 18px 40px rgba(59,36,22,.13);
}


/* NÚMERO */

.paso-numero {
    position: absolute;

    right: 20px;
    top: 10px;

    color: rgba(245,130,32,.10);

    font-size: 82px;
    font-weight: 900;
}


/* ICONO */

.paso-icono {
    width: 62px;
    height: 62px;

    display: flex;

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

    margin-bottom: 25px;

    background: var(--crema);

    border-radius: 18px;

    font-size: 28px;
}


/* TEXTO */

.paso-card h3 {
    position: relative;

    margin-bottom: 14px;

    color: var(--marron);

    font-size: 22px;
}

.paso-card p {
    position: relative;

    color: #6b625d;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   CAJA DE CONTACTO
========================================= */

.admision-contacto {
    display: flex;

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

    gap: 40px;

    padding: 38px 42px;

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            120deg,
            var(--marron-oscuro),
            var(--marron)
        );

    border-radius: 25px;

    box-shadow:
        0 18px 40px rgba(59,36,22,.18);
}


/* IZQUIERDA */

.admision-contacto-texto {
    max-width: 480px;
}

.admision-contacto-texto > span {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--naranja-claro);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.admision-contacto-texto h3 {
    margin-bottom: 8px;

    font-size: 29px;
}

.admision-contacto-texto p {
    color: rgba(255,255,255,.75);

    line-height: 1.6;
}


/* DERECHA */

.admision-contacto-datos {
    display: flex;

    align-items: center;

    gap: 28px;
}


/* TELÉFONO */

.telefono-admision {
    display: flex;

    align-items: center;

    gap: 12px;
}

.telefono-icono {
    width: 48px;
    height: 48px;

    display: flex;

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

    flex-shrink: 0;

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

    border-radius: 50%;

    font-size: 21px;
}

.telefono-admision small {
    display: block;

    margin-bottom: 2px;

    color: rgba(255,255,255,.65);
}

.telefono-admision strong {
    white-space: nowrap;

    font-size: 18px;
}


/* BOTONES */

.admision-contacto-botones {
    display: flex;

    gap: 10px;
}

.admision-whatsapp,
.admision-info {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 20px;

    border-radius: 25px;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    transition: .25s;
}

.admision-whatsapp {
    color: white;

    background: #25D366;
}

.admision-info {
    color: var(--marron);

    background: white;
}

.admision-whatsapp:hover,
.admision-info:hover {
    transform: translateY(-2px);
}


/* TABLET */

@media (max-width: 1000px) {

    .admision-contacto {
        flex-direction: column;
        align-items: flex-start;
    }

    .admision-contacto-datos {
        width: 100%;

        justify-content: space-between;
    }

}


/* CELULAR */

@media (max-width: 750px) {

    .admision-pasos {
    padding: 120px 0 95px;
    }

    .admision-pasos-header {
        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 35px;
    }

    .admision-nivel {
        width: 100%;
    }


    .pasos-grid {
        grid-template-columns: 1fr;
    }


    .paso-card {
        min-height: auto;
    }


    .admision-contacto {
        padding: 30px 25px;
    }


    .admision-contacto-datos {
        flex-direction: column;

        align-items: flex-start;
    }


    .admision-contacto-botones {
        width: 100%;

        flex-direction: column;
    }


    .admision-whatsapp,
    .admision-info {
        width: 100%;
    }

}

/* =========================================
   CONOCE KAWSAY ÑAN
========================================= */

.conoce-kawsay {
    padding: 100px 0;
    background: #ffffff;
}

.conoce-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 75px;
    align-items: center;
}


/* IMAGEN */

.conoce-imagen {
    position: relative;

    min-height: 550px;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 20px 50px rgba(59,36,22,.15);
}

.conoce-imagen img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* SELLO */

.conoce-sello {
    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;
    flex-direction: column;

    padding: 18px 25px;

    color: white;

    background:
        rgba(59,36,22,.92);

    border-radius: 16px;

    backdrop-filter: blur(8px);
}

.conoce-sello strong {
    font-size: 20px;
}

.conoce-sello span {
    margin-top: 3px;

    color: #ffb05c;

    font-size: 13px;
}


/* CONTENIDO */

.conoce-contenido h2 {
    margin: 8px 0 22px;

    color: var(--marron);

    font-size:
        clamp(37px, 4vw, 52px);

    line-height: 1.08;
}

.conoce-contenido h2 span {
    color: var(--naranja);
}

.conoce-intro {
    margin-bottom: 30px;

    color: #675f5a;

    font-size: 17px;
    line-height: 1.8;
}


/* PUNTOS */

.conoce-puntos {
    display: flex;

    flex-direction: column;

    gap: 22px;
}

.conoce-punto {
    display: flex;

    gap: 16px;
}

.punto-icono {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

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

    color: white;

    background: var(--naranja);

    border-radius: 50%;

    font-weight: bold;
}

.conoce-punto h3 {
    margin-bottom: 5px;

    color: var(--marron);

    font-size: 18px;
}

.conoce-punto p {
    color: #746c67;

    font-size: 14px;
    line-height: 1.6;
}


/* LEMA */

.conoce-lema {
    margin: 30px 0;

    padding: 20px 25px;

    border-left:
        4px solid var(--naranja);

    background: var(--crema);

    border-radius: 0 14px 14px 0;
}

.conoce-lema span {
    display: block;

    margin-bottom: 5px;

    color: var(--naranja);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}

.conoce-lema strong {
    color: var(--marron);

    font-size: 19px;
}


/* BOTÓN */

.btn-conocenos {
    display: inline-flex;

    padding: 14px 24px;

    color: white;

    background: var(--marron);

    border-radius: 28px;

    font-weight: 700;

    transition: .25s;
}

.btn-conocenos:hover {
    background: var(--naranja);

    transform: translateY(-2px);
}


/* TABLET */

@media (max-width: 900px) {

    .conoce-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .conoce-imagen {
        min-height: 450px;
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .conoce-kawsay {
        padding: 65px 0;
    }

    .conoce-imagen {
        min-height: 350px;

        border-radius: 20px;
    }

    .conoce-contenido h2 {
        font-size: 36px;
    }

}

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

.contacto-home {
    padding: 100px 0;
    background: var(--crema);
}

.contacto-home-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 30px;

    margin-top: 50px;
}


/* PANEL */

.contacto-panel {
    padding: 45px;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--marron),
            var(--marron-oscuro)
        );

    border-radius: 26px;

    box-shadow:
        0 20px 45px rgba(59,36,22,.16);
}


.contacto-mini {
    display: block;

    margin-bottom: 10px;

    color: var(--naranja-claro);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contacto-panel h3 {
    margin-bottom: 15px;

    font-size: 32px;
}


.contacto-intro {
    margin-bottom: 35px;

    color: rgba(255,255,255,.78);

    line-height: 1.7;
}


/* DATOS */

.contacto-lista {
    display: flex;
    flex-direction: column;

    gap: 25px;
}


.contacto-item {
    display: flex;

    align-items: center;

    gap: 16px;
}


.contacto-icono {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

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

    color: white;

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

    border-radius: 50%;

    font-size: 21px;
}


.contacto-item small {
    display: block;

    margin-bottom: 3px;

    color: var(--naranja-claro);
}


.contacto-item strong {
    display: block;

    margin-bottom: 3px;

    font-size: 17px;
}


.contacto-item span {
    color: rgba(255,255,255,.68);

    font-size: 13px;
}


/* BOTONES */

.contacto-botones {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;
}


.contacto-btn-whatsapp,
.contacto-btn-secundario {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 22px;

    border-radius: 25px;

    font-weight: 800;

    transition: .25s;
}


.contacto-btn-whatsapp {
    color: white;

    background: #25D366;
}


.contacto-btn-secundario {
    color: var(--marron);

    background: white;
}


.contacto-btn-whatsapp:hover,
.contacto-btn-secundario:hover {
    transform: translateY(-2px);
}


/* MAPA */

.mapa-home {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    background: #ddd;

    border-radius: 26px;

    box-shadow:
        0 20px 45px rgba(59,36,22,.12);
}


.mapa-home iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* ETIQUETA MAPA */

.mapa-etiqueta {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;

    padding: 14px 20px;

    color: white;

    background:
        rgba(59,36,22,.92);

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);
}


.mapa-etiqueta span {
    margin-top: 3px;

    color: #ffc17c;

    font-size: 12px;
}


/* =========================================
   CTA FINAL
========================================= */

.cta-final {
    padding: 65px 0;

    color: white;

    background:
        linear-gradient(
            120deg,
            #3b2416,
            #63351e
        );
}


.cta-final-contenido {
    display: flex;

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

    gap: 50px;
}


.cta-final-contenido > div:first-child {
    max-width: 700px;
}


.cta-final span {
    color: var(--naranja-claro);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.cta-final h2 {
    margin: 8px 0 12px;

    font-size: clamp(29px, 3vw, 42px);

    line-height: 1.15;
}


.cta-final p {
    color: rgba(255,255,255,.75);

    line-height: 1.6;
}


.cta-final-botones {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.cta-whatsapp,
.cta-admision {
    display: inline-flex;

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

    min-height: 50px;

    padding: 0 23px;

    border-radius: 28px;

    font-weight: 800;

    white-space: nowrap;

    transition: .25s;
}


.cta-whatsapp {
    color: white;

    background: #25D366;
}


.cta-admision {
    color: white;

    background: var(--naranja);
}


.cta-whatsapp:hover,
.cta-admision:hover {
    transform: translateY(-2px);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .contacto-home-grid {
        grid-template-columns: 1fr;
    }

    .mapa-home {
        min-height: 430px;
    }

    .cta-final-contenido {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .contacto-home {
        padding: 65px 0;
    }

    .contacto-panel {
        padding: 30px 24px;
    }

    .mapa-home {
        min-height: 380px;
    }

    .contacto-botones,
    .cta-final-botones {
        width: 100%;

        flex-direction: column;
    }

    .contacto-btn-whatsapp,
    .contacto-btn-secundario,
    .cta-whatsapp,
    .cta-admision {
        width: 100%;
    }

}

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

.footer {
    color: white;

    background: #2c1a10;
}


.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.2fr;

    gap: 50px;

    padding-top: 70px;
    padding-bottom: 60px;
}


.footer-brand img {
    width: 75px;

    margin-bottom: 15px;
}


.footer-brand h3 {
    margin-bottom: 5px;

    font-size: 20px;
}


.footer-lema {
    margin-bottom: 18px;

    color: var(--naranja-claro) !important;

    font-weight: 700;
}


.footer-brand p {
    max-width: 300px;

    color: rgba(255,255,255,.65);

    line-height: 1.6;
}


.footer-col {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.footer-col h4 {
    margin-bottom: 8px;

    color: var(--naranja-claro);

    font-size: 16px;
}


.footer-col a,
.footer-col p {
    color: rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 1.6;

    transition: .2s;
}


.footer-col a:hover {
    color: white;

    transform: translateX(3px);
}


.footer-bottom {
    padding: 20px 0;

    text-align: center;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.footer-bottom p {
    color: rgba(255,255,255,.50);

    font-size: 13px;
}


/* WHATSAPP FLOTANTE */

.whatsapp-flotante {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9998;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 10px 9px 18px;

    color: white;

    background: #25D366;

    border-radius: 35px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);

    font-size: 14px;
    font-weight: 800;

    transition: .25s;
}


.whatsapp-flotante strong {
    width: 40px;
    height: 40px;

    display: flex;

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

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

    border-radius: 50%;

    font-size: 20px;
}


.whatsapp-flotante:hover {
    transform: translateY(-4px);
}


/* FOOTER RESPONSIVE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

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

        gap: 35px;

        padding-top: 50px;
        padding-bottom: 45px;
    }


    .whatsapp-flotante {
        right: 16px;
        bottom: 16px;

        padding-left: 10px;
    }


    .whatsapp-flotante span {
        display: none;
    }

}

/* =========================================
   CORRECCIÓN MENÚ MÓVIL
========================================= */

@media (max-width: 900px) {

    .header {
        position: sticky;
        top: 0;
        z-index: 99999;
    }

    .navbar {
        position: relative;
    }

    .nav-container {
        min-height: 72px;
    }

    .menu-toggle {
        display: block;

        position: relative;
        z-index: 100002;

        border: 0;
        background: transparent;

        color: var(--marron);

        font-size: 30px;
        line-height: 1;

        cursor: pointer;
    }

    .nav-menu {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;
        padding: 10px 24px 18px;

        background: #ffffff;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        box-shadow:
            0 15px 30px rgba(0,0,0,.15);

        z-index: 100001;
    }


    .nav-menu.active {
        display: flex !important;
    }


    .nav-menu li {
        width: 100%;

        margin: 0;

        border-bottom: 1px solid #eee5dc;
    }


    .nav-menu li:last-child {
        margin-top: 12px;

        border-bottom: 0;
    }


    .nav-menu a {
        display: block;
        width: 100%;
        padding: 11px 4px;
        color: var(--marron);
        font-size: 14px;
    }


    .nav-menu .btn-admision {
        padding: 14px 20px;

        color: white;

        text-align: center;

        background: var(--naranja);

        border-radius: 25px;
    }

}

/* =========================================
   CONTROL DEFINITIVO NAVBAR RESPONSIVE
========================================= */

/* PC */
@media (min-width: 901px) {

    .menu-toggle {
        display: none !important;
    }

    .nav-menu {
        display: flex !important;
        position: static !important;

        width: auto !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;

        flex-direction: row !important;
        align-items: center !important;

        gap: 28px;

        box-shadow: none !important;
    }

    .nav-menu li {
        width: auto !important;

        margin: 0 !important;

        border: 0 !important;
    }

    .nav-menu a {
        width: auto !important;

        padding: 8px 0 !important;

        font-size: 14px;

        white-space: nowrap;
    }

    .nav-menu .btn-admision {
        padding: 13px 22px !important;

        color: white !important;

        background: var(--naranja);

        border-radius: 28px;
    }

}


/* TABLET Y CELULAR */
@media (max-width: 900px) {

    .menu-toggle {
        display: block !important;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-menu.active {
        display: flex !important;
    }

}

/* =========================================
   AJUSTES ACTIVIDADES EN CELULAR
========================================= */

@media (max-width: 600px) {

    .actividades-home {
        padding-bottom: 55px !important;
    }

    .actividades-grid {
        gap: 16px;
    }

    .actividad-card {
        min-height: 240px;
    }

}

.whatsapp-flotante {
    right: 14px;
    bottom: 14px;

    width: 54px;
    height: 54px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;
}

.whatsapp-flotante strong {
    width: auto;
    height: auto;

    background: transparent;

    font-size: 22px;
}

.whatsapp-flotante span {
    display: none;
}

/* =========================================
   ADMISIÓN - CELULAR
========================================= */

@media (max-width: 600px) {

    .admision-pasos {
        padding: 65px 0;
    }

    .admision-pasos h2 {
        font-size: 36px;
        line-height: 1.08;
    }

    .admision-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .admision-card {
        padding: 28px 24px;
        min-height: auto;
    }

    .admision-card h3 {
        font-size: 20px;
    }

    .admision-card p {
        font-size: 14px;
        line-height: 1.65;
    }
}

@media (max-width: 600px) {

    .admision-pasos {
        padding-bottom: 55px !important;
    }

    .conoce-kawsay {
        padding-top: 65px !important;
    }

}

/* =========================================
   FOOTER MÁS COMPACTO EN CELULAR
========================================= */

@media (max-width: 600px) {

    .footer-grid {
        gap: 26px !important;
        padding: 45px 20px 35px !important;
    }

    .footer-brand img {
        width: 65px;
        margin-bottom: 10px;
    }

    .footer-brand h3 {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .footer-brand p {
        margin-bottom: 8px;
    }

    .footer-col {
        gap: 7px;
    }

    .footer-col h4 {
        margin-bottom: 5px;
    }

    .footer-col a {
        padding: 3px 0;
    }

    .footer-bottom {
        padding: 16px 20px;
    }

}

.footer-insignia {
    width: 90px !important;
    height: auto;
    object-fit: contain;
    margin-bottom: 18px;
}

@media (max-width: 600px) {

    .footer-insignia {
        width: 75px !important;
    }

}

/* =========================================
   INSIGNIA EN NAVBAR
========================================= */

.navbar-insignia {
    width: 58px;
    height: 58px;

    object-fit: contain;

    flex-shrink: 0;
}

@media (max-width: 600px) {

    .navbar-insignia {
        width: 50px;
        height: 50px;
    }

}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 600px) {

    .brand {
        gap: 9px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text span {
        font-size: 10px;
    }

}

/* NAVBAR AL INICIO */

.nav-container {
    min-height: 105px;

    transition: min-height .35s ease;
}


.navbar-insignia {
    width: 82px;
    height: 82px;

    object-fit: contain;

    transition:
        width .35s ease,
        height .35s ease,
        transform .35s ease;
}


/* CUANDO HACEMOS SCROLL */

.header.scrolled {
    background: rgba(255,255,255,.97);

    box-shadow:
        0 5px 25px rgba(59,36,22,.10);

    backdrop-filter: blur(10px);
}


.header.scrolled .nav-container {
    min-height: 72px;
}


.header.scrolled .navbar-insignia {
    width: 52px;
    height: 52px;
}


/* TRANSICIÓN DEL TEXTO */

.brand-text strong,
.brand-text span,
.nav-menu a {
    transition:
        color .3s ease,
        font-size .3s ease;
}

body {
    padding-top: 0 !important;
}

@media (max-width: 900px) {

    .header,
    .header.scrolled {
        background: white;
    }

    .nav-container,
    .header.scrolled .nav-container {
        min-height: 72px;
    }

    .navbar-insignia,
    .header.scrolled .navbar-insignia {
        width: 50px;
        height: 50px;
    }

}


/* =========================================
   CUANDO BAJAMOS
========================================= */

.header.scrolled {
    background: rgba(255, 255, 255, .97) !important;

    box-shadow:
        0 5px 25px rgba(59, 36, 22, .12) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header.scrolled .nav-container {
    background: transparent !important;
    min-height: 72px;
}

/* Insignia más pequeña */
.header.scrolled .navbar-insignia {
    width: 54px;
    height: 54px;
}

/* ================================================
   AL HACER SCROLL
================================================ */

#main-header.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 5px 25px rgba(59, 36, 22, .12) !important;
    backdrop-filter: blur(10px);
}

#main-header.scrolled .navbar,
#main-header.scrolled .nav-container {
    background: transparent !important;
}

#main-header.scrolled .nav-container {
    min-height: 72px;
}

#main-header.scrolled .navbar-insignia {
    width: 54px !important;
    height: 54px !important;
}

/* El Hero comienza desde arriba */
.hero {
    margin-top: 0 !important;
    padding-top: 105px;
}

/* =====================================================
   NAVBAR DEFINITIVO KAWSAY ÑAN
===================================================== */

/* PC */
@media (min-width: 901px) {

    #header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;

        background: transparent !important;
        box-shadow: none !important;

        transition:
            background .35s ease,
            box-shadow .35s ease;
    }

    /* Barra superior transparente */
    #header .top-bar {
        background: rgba(59, 36, 22, .35) !important;
        transition: all .35s ease;
    }

    /* Navbar transparente */
    #header .navbar {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #header .nav-container {
        min-height: 105px !important;
        background: transparent !important;

        transition: min-height .35s ease;
    }

    /* Insignia grande */
    #header .navbar-insignia {
        width: 82px !important;
        height: 82px !important;

        object-fit: contain;

        transition:
            width .35s ease,
            height .35s ease;
    }


    /* TEXTO SOBRE EL HERO */

    #header .brand-text strong {
        color: #ffffff;
        text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    #header .brand-text span {
        color: #ffd09a;
        text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    #header .nav-menu a:not(.btn-admision) {
        color: #ffffff;
        text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }


    /* =============================================
       CUANDO BAJAMOS
    ============================================= */

    #header.scrolled {
        background: rgba(255,255,255,.97) !important;

        box-shadow:
            0 5px 25px rgba(59,36,22,.13) !important;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Ocultamos barra superior al bajar */
    #header.scrolled .top-bar {
        max-height: 0;
        min-height: 0;

        overflow: hidden;

        opacity: 0;

        padding: 0;
    }

    #header.scrolled .navbar {
        background: transparent !important;
    }

    #header.scrolled .nav-container {
        min-height: 72px !important;
    }

    /* Insignia pequeña */
    #header.scrolled .navbar-insignia {
        width: 54px !important;
        height: 54px !important;
    }

    /* Colores normales al bajar */

    #header.scrolled .brand-text strong {
        color: var(--marron);
        text-shadow: none;
    }

    #header.scrolled .brand-text span {
        color: var(--naranja);
        text-shadow: none;
    }

    #header.scrolled .nav-menu a:not(.btn-admision) {
        color: var(--marron);
        text-shadow: none;
    }

    #header.scrolled .nav-menu a:not(.btn-admision):hover {
        color: var(--naranja);
    }
}


/* =====================================================
   TABLET Y CELULAR
===================================================== */

@media (max-width: 900px) {

    #header {
        background: #ffffff !important;
    }

    #header .navbar {
        background: #ffffff !important;
    }

    #header .nav-container {
        min-height: 72px !important;
    }

    #header .navbar-insignia {
        width: 50px !important;
        height: 50px !important;
    }
}

    /* ==============================
       AL HACER SCROLL
    ============================== */

    #main-header.scrolled {
        background: rgba(255, 255, 255, .97) !important;

        box-shadow:
            0 5px 25px rgba(59, 36, 22, .12) !important;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #main-header.scrolled .navbar,
    #main-header.scrolled .nav-container {
        background: transparent !important;
    }

    /* NAVBAR MÁS PEQUEÑO */
    #main-header.scrolled .nav-container {
        min-height: 72px !important;
    }

    /* INSIGNIA MÁS PEQUEÑA */
    #main-header.scrolled .navbar-insignia {
        width: 54px !important;
        height: 54px !important;
    }


/* =====================================================
   CELULAR Y TABLET
===================================================== */

@media (max-width: 900px) {

    #main-header {
        background: #ffffff !important;
        box-shadow: 0 4px 18px rgba(59,36,22,.10);
    }

    #main-header .navbar {
        background: #ffffff !important;
    }

    #main-header .nav-container {
        min-height: 72px !important;
    }

    #main-header .navbar-insignia {
        width: 50px !important;
        height: 50px !important;
    }
}

/* =========================================================
   PÁGINA NOSOTROS - KAWSAY ÑAN
========================================================= */

/* HERO */

.nosotros-hero {
    min-height: 430px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(55, 26, 13, 0.94) 0%,
            rgba(92, 45, 20, 0.86) 50%,
            rgba(92, 45, 20, 0.55) 100%
        ),
        url("../img/colegio-kawsay.jpg");

    background-size: cover;
    background-position: center;
    color: white;
}

.nosotros-hero-content {
    max-width: 650px;
    padding-top: 70px;
    padding-bottom: 110px;
    margin-left: 55px;
}

.nosotros-hero .section-label {
    display: block;
    color: #ff7a18;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.nosotros-hero h1 {
    max-width: 780px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    margin: 0 0 22px;
    color: #ffffff;
}

.nosotros-hero h1 span {
    color: #ff7a18;
}

.nosotros-hero p {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,.92);
}


/* =========================================================
   QUIÉNES SOMOS
========================================================= */

.nosotros-presentacion {
    padding: 100px 0;
    background: #ffffff;
}

.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}

.nosotros-imagen {
    position: relative;
}

.nosotros-imagen img {
    display: block;
    width: 100%;
    height: 540px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 25px 55px rgba(69, 36, 20, .15);
}

.nosotros-imagen-etiqueta {
    position: absolute;
    left: 28px;
    bottom: 28px;

    background: #5a2d18;
    color: #ffffff;

    padding: 18px 26px;
    border-radius: 16px;

    display: flex;
    flex-direction: column;

    box-shadow: 0 12px 30px rgba(0,0,0,.20);
}

.nosotros-imagen-etiqueta strong {
    font-size: 21px;
}

.nosotros-imagen-etiqueta span {
    margin-top: 4px;
    color: #ff9b45;
    font-size: 13px;
}

.nosotros-texto .section-label,
.section-heading .section-label,
.nosotros-cierre .section-label {
    display: block;
    color: #ff7417;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.nosotros-texto h2 {
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.08;
    color: #5a2d18;
    margin: 0 0 25px;
}

.nosotros-texto h2 span {
    color: #ff7417;
}

.nosotros-texto p {
    font-size: 17px;
    line-height: 1.8;
    color: #654c40;
    margin-bottom: 18px;
}

.nosotros-lema {
    margin-top: 30px;
    padding: 22px 25px;

    background: #fff6ec;
    border-left: 4px solid #ff7417;
    border-radius: 0 15px 15px 0;
}

.nosotros-lema span {
    display: block;
    color: #ff7417;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}

.nosotros-lema strong {
    color: #5a2d18;
    font-size: 21px;
}


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

.mision-vision {
    padding: 100px 0;
    background: #fff8ef;
}

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

.section-heading h2 {
    margin: 0;
    color: #5a2d18;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
}

.section-heading h2 span {
    color: #ff7417;
}

.section-heading > p {
    max-width: 700px;
    margin: 20px auto 0;
    font-size: 17px;
    line-height: 1.7;
    color: #72594d;
}

.mision-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.identidad-card {
    position: relative;
    overflow: hidden;

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

    padding: 45px;

    box-shadow: 0 15px 40px rgba(83, 45, 25, .06);

    transition: transform .3s ease,
                box-shadow .3s ease;
}

.identidad-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(83,45,25,.12);
}

.identidad-icon {
    width: 68px;
    height: 68px;

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

    background: #fff5e9;
    border-radius: 18px;

    font-size: 30px;

    margin-bottom: 28px;
}

.identidad-numero {
    position: absolute;
    top: 22px;
    right: 32px;

    font-size: 76px;
    font-weight: 800;

    color: #fff0e3;
}

.identidad-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 15px;

    color: #5a2d18;
    font-size: 28px;
}

.identidad-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #6b5144;
    font-size: 16px;
    line-height: 1.8;
}


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

.valores-section {
    padding: 100px 0;
    background: #ffffff;
}

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

.valor-card {
    padding: 32px;

    border: 1px solid #f0dfd3;
    border-radius: 22px;

    background: #ffffff;

    transition: .3s ease;
}

.valor-card:hover {
    transform: translateY(-5px);
    border-color: #ffb477;
    box-shadow: 0 18px 40px rgba(80,40,20,.08);
}

.valor-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 20px;

    background: #fff5e9;
    border-radius: 16px;

    color: #5a2d18;
    font-size: 25px;
    font-weight: 700;
}

.valor-card h3 {
    margin: 0 0 12px;

    color: #5a2d18;
    font-size: 21px;
}

.valor-card p {
    margin: 0;

    color: #70584b;
    line-height: 1.7;
}


/* =========================================================
   CIERRE NOSOTROS
========================================================= */

.nosotros-cierre {
    padding: 30px 0 100px;
    background: #ffffff;
}

.nosotros-cierre-box {
    padding: 50px 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    background: #5a2d18;
    border-radius: 26px;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(76,38,19,.18);
}

.nosotros-cierre-box > div {
    max-width: 720px;
}

.nosotros-cierre-box h2 {
    margin: 8px 0 14px;

    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;

    color: #ffffff;
}

.nosotros-cierre-box p {
    margin: 0;

    color: rgba(255,255,255,.82);
    line-height: 1.7;
    font-size: 16px;
}

.btn-nosotros-contacto {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 25px;

    border-radius: 30px;

    background: #ff7a18;
    color: #ffffff;

    font-weight: 700;
    text-decoration: none;

    transition: .3s ease;
}

.btn-nosotros-contacto:hover {
    transform: translateY(-2px);
    background: #ff8d35;
}


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

@media (max-width: 900px) {

    .nosotros-hero {
        min-height: 380px;
    }

    .nosotros-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .nosotros-imagen img {
        height: 480px;
    }

    .mision-vision-grid {
        grid-template-columns: 1fr;
    }

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

    .nosotros-cierre-box {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .nosotros-hero {
        min-height: 520px;
        align-items: flex-end;

        background-position: center;
    }
    .nosotros-hero-content {
    max-width: 100%;
    margin-left: 0;

    padding:
        280px 24px
        100px 24px;
}

    .nosotros-hero-content {
        padding: 100px 22px 55px;
    }

    .nosotros-hero h1 {
        font-size: 43px;
    }

    .nosotros-hero p {
        font-size: 16px;
        line-height: 1.65;
    }


    .nosotros-presentacion,
    .mision-vision,
    .valores-section {
        padding: 70px 0;
    }

    .nosotros-grid,
    .mision-vision .container,
    .valores-section .container,
    .nosotros-cierre .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nosotros-imagen img {
        height: 420px;
        border-radius: 22px;
    }

    .nosotros-imagen-etiqueta {
        left: 18px;
        bottom: 18px;
        right: 18px;
    }

    .nosotros-texto h2 {
        font-size: 38px;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .section-heading h2 {
        font-size: 37px;
    }

    .identidad-card {
        padding: 32px 28px;
    }

    .identidad-numero {
        font-size: 62px;
        right: 22px;
    }

    .valores-grid {
        grid-template-columns: 1fr;
    }

    .valor-card {
        padding: 28px;
    }

    .nosotros-cierre {
        padding: 10px 0 70px;
    }

    .nosotros-cierre-box {
        padding: 36px 28px;
        border-radius: 22px;
    }

    .btn-nosotros-contacto {
        width: 100%;
    }

}

.nosotros-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 28px;
}

/* =====================================================
   HERO - NOSOTROS KAWSAY ÑAN
===================================================== */

.nosotros-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #3b1d10;
}


/* IMAGEN DE FONDO */

.nosotros-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        url('/kawsay2027/assets/img/nosotros/nosotros-kawsay.jpg');

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

    z-index: 1;
}


/* DEGRADADO MARRÓN */

.nosotros-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(48, 20, 9, 0.98) 0%,
            rgba(64, 28, 12, 0.94) 25%,
            rgba(72, 31, 13, 0.78) 45%,
            rgba(55, 22, 8, 0.28) 68%,
            rgba(30, 10, 3, 0.08) 100%
        );

    z-index: 2;
}


/* CONTENIDO */

.nosotros-hero-container {
    position: relative;
    z-index: 4;

    width: 100%;
}


.nosotros-hero-content {
    max-width: 650px;
    padding-top: 70px;
    padding-bottom: 110px;
}


/* ETIQUETA CONÓCENOS */

.nosotros-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    color: #ff7b19;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 4px;

    margin-bottom: 20px;
}


.nosotros-etiqueta::after {
    content: "";
    width: 150px;
    height: 1px;

    background: rgba(255, 123, 25, 0.65);
}


/* TÍTULO */

.nosotros-hero h1 {
    color: white;

    font-size: clamp(48px, 5vw, 78px);
    line-height: 0.98;

    font-weight: 800;

    margin: 0 0 28px;
}


.nosotros-hero h1 span {
    color: #ff7b19;
}


/* TEXTO */

.nosotros-hero p {
    max-width: 620px;

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

    font-size: 19px;
    line-height: 1.8;

    margin: 0;
}


/* PALOMA DECORATIVA */

.nosotros-paloma {
    position: absolute;

    left: 25%;
    top: 80px;

    z-index: 3;

    font-size: 220px;

    opacity: 0.06;

    filter: grayscale(1);

    pointer-events: none;
}


/* CURVA INFERIOR */

.nosotros-wave {
    position: absolute;

    left: -5%;
    bottom: -80px;

    width: 110%;
    height: 170px;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            rgba(255,122,20,0.95),
            rgba(183,73,9,0.85),
            rgba(77,30,10,0.25)
        );

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    transform: rotate(2deg);

    opacity: 0.90;

    pointer-events: none;
}

/* =====================================================
   HERO NOSOTROS - CELULAR
===================================================== */

@media (max-width: 768px) {

    .nosotros-hero {
        min-height: 680px;
        align-items: flex-end;
    }


    .nosotros-hero-bg {
        background-position: 64% center;
    }


    .nosotros-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(48,20,9,0.98) 0%,
                rgba(48,20,9,0.92) 38%,
                rgba(48,20,9,0.40) 70%,
                rgba(48,20,9,0.18) 100%
            );
    }


    .nosotros-hero-content {
        max-width: 100%;

        padding:
            280px 20px
            100px 20px;
    }


    .nosotros-etiqueta {
        font-size: 12px;
        letter-spacing: 3px;
    }


    .nosotros-etiqueta::after {
        width: 70px;
    }


    .nosotros-hero h1 {
        font-size: 43px;
        line-height: 1.03;

        margin-bottom: 20px;
    }


    .nosotros-hero p {
        font-size: 16px;
        line-height: 1.65;
    }


    .nosotros-paloma {
        font-size: 140px;

        left: 5%;
        top: 120px;
    }


    .nosotros-wave {
        height: 110px;
        bottom: -60px;
    }

}

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

.valor-card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.valor-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 35px rgba(91, 46, 24, 0.12);
    border-color: rgba(255, 122, 24, 0.65);
}

.valor-card .valor-icon {
    transition: transform 0.3s ease;
}

.valor-card:hover .valor-icon {
    transform: scale(1.10);
}

/* =========================================
   CIERRE PÁGINA NOSOTROS
========================================= */

.nosotros-cierre {
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(255, 126, 25, 0.20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #2b160d 0%,
            #542b18 55%,
            #69371f 100%
        );

    padding: 90px 0;
    overflow: hidden;
}

.cierre-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: center;
    gap: 80px;
}


/* TEXTO */

.cierre-contenido {
    max-width: 760px;
}

.cierre-contenido .section-label {
    display: block;
    color: #ff7a18;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.cierre-contenido h2 {
    color: white;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    margin: 0 0 24px;
}

.cierre-contenido h2 span {
    color: #ff7a18;
}

.cierre-contenido p {
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 1.8;
    max-width: 680px;
}


/* BENEFICIOS */

.cierre-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 25px;
    margin: 30px 0;
}

.cierre-beneficios span {
    color: white;
    font-size: 15px;
    font-weight: 600;
}


/* BOTONES */

.cierre-botones {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-cierre-principal,
.btn-cierre-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 25px;
    border-radius: 50px;

    font-weight: 700;
    text-decoration: none;

    transition: .3s ease;
}

.btn-cierre-principal {
    background: #ff7a18;
    color: white;
}

.btn-cierre-principal:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255,122,24,.30);
}

.btn-cierre-secundario {
    color: white;
    border: 1px solid rgba(255,255,255,.45);
}

.btn-cierre-secundario:hover {
    background: white;
    color: #542b18;
}


/* INSIGNIA */

.cierre-decoracion {
    text-align: center;
    color: white;
}

.cierre-decoracion img {
    width: 170px;
    max-width: 100%;
    filter: drop-shadow(0 20px 25px rgba(0,0,0,.25));
    margin-bottom: 18px;
}

.cierre-decoracion strong {
    display: block;
    font-size: 21px;
    margin-bottom: 6px;
}

.cierre-decoracion span {
    color: #ff9a4c;
    font-size: 14px;
}


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

@media (max-width: 768px) {

    .propuesta-hero-texto {
        padding-left: 0;
    }

    .nosotros-cierre {
        padding: 65px 24px;
    }

    .cierre-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .cierre-contenido {
        text-align: center;
    }

    .cierre-contenido h2 {
        font-size: 36px;
    }

    .cierre-contenido p {
        font-size: 16px;
    }

    .cierre-beneficios {
        justify-content: center;
    }

    .cierre-botones {
        flex-direction: column;
    }

    .btn-cierre-principal,
    .btn-cierre-secundario {
        width: 100%;
    }

    .cierre-decoracion img {
        width: 125px;
    }
}

/* =========================================
   PROPUESTA EDUCATIVA - HERO
========================================= */

.propuesta-hero {
    position: relative;
    min-height: 650px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(52, 23, 12, 0.96) 0%,
            rgba(84, 39, 18, 0.88) 38%,
            rgba(84, 39, 18, 0.45) 65%,
            rgba(84, 39, 18, 0.12) 100%
        ),
        url("../img/propuesta/propuesta-hero.jpg");

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

    overflow: hidden;
}


/* CONTENIDO */

.propuesta-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    padding-top: 100px;
    padding-bottom: 80px;
}


.propuesta-hero-texto {
    max-width: 650px;
    color: #ffffff;
}


/* ETIQUETA */

.propuesta-label {
    display: inline-block;

    margin-bottom: 22px;

    color: #ff7a16;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 3px;
}


/* TÍTULO */

.propuesta-hero h1 {
    margin: 0 0 25px;

    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.02;

    font-weight: 800;

    color: #ffffff;
}


.propuesta-hero h1 span {
    color: #ff7417;
}


/* TEXTO */

.propuesta-hero p {
    max-width: 610px;

    margin-bottom: 30px;

    font-size: 18px;
    line-height: 1.8;

    color: rgba(255,255,255,.94);
}


/* DATOS */

.propuesta-hero-datos {
    display: flex;
    flex-wrap: wrap;

    gap: 15px 28px;

    font-size: 15px;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================
   CURVA INFERIOR
========================================= */

.propuesta-curva {
    position: absolute;

    left: -5%;
    bottom: -85px;

    width: 110%;
    height: 150px;

    background: #fff7ee;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    z-index: 1;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 768px) {

    .propuesta-hero {
        min-height: 720px;

        align-items: flex-end;

        background:
            linear-gradient(
                180deg,
                rgba(50, 22, 10, 0.18) 0%,
                rgba(50, 22, 10, 0.48) 35%,
                rgba(50, 22, 10, 0.95) 78%,
                rgba(50, 22, 10, 1) 100%
            ),
            url("../img/propuesta/propuesta-hero.jpg");

        background-size: cover;
        background-position: center;
    }


    .propuesta-hero-content {
        padding: 70px 25px 90px;
    }
    .propuesta-hero-texto {
        max-width: 100%;
        padding-left: 0;
    }

    .propuesta-hero-texto {
        max-width: 100%;
    }


    .propuesta-label {
        font-size: 13px;
        letter-spacing: 2.5px;

        margin-bottom: 15px;
    }


    .propuesta-hero h1 {
        font-size: 43px;
        line-height: 1.05;

        margin-bottom: 22px;
    }


    .propuesta-hero p {
        font-size: 16px;
        line-height: 1.7;
    }


    .propuesta-hero-datos {
        flex-direction: column;
        gap: 10px;

        font-size: 14px;
    }


    .propuesta-curva {
        bottom: -60px;
        height: 100px;
    }

}

/* =========================================
   AJUSTE TEXTO HERO PROPUESTA
========================================= */

.propuesta-hero-texto {
    padding-left: 35px;
}

/* =========================================
   PROPUESTA EDUCATIVA - AJUSTE MÓVIL FINAL
========================================= */

@media (max-width: 768px) {

    .propuesta-hero {
        min-height: 720px;
    }

    .propuesta-hero-texto {
        position: relative;
        top: 55px !important;
    }

}

/* =========================================
   PROPUESTA FORMATIVA
========================================= */

.formativa-section {
    padding: 110px 0;
    background: #fffaf4;
}

.formativa-header {
    max-width: 780px;
    margin: 0 auto 65px;
    text-align: center;
}

.formativa-header .section-label {
    display: block;
    margin-bottom: 14px;

    color: #ff6b0b;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
}

.formativa-header h2 {
    margin: 0 0 20px;

    color: #5a2c16;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.formativa-header h2 span {
    color: #ff6b0b;
}

.formativa-header p {
    max-width: 680px;
    margin: auto;

    color: #6f5142;
    font-size: 17px;
    line-height: 1.8;
}


/* GRID */

.formativa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}


/* TARJETAS */

.formativa-card {
    position: relative;

    min-height: 260px;
    padding: 38px;

    background: #ffffff;

    border: 1px solid #ecd8ca;
    border-radius: 24px;

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

.formativa-card:hover {
    transform: translateY(-7px);

    border-color: #ff7417;

    box-shadow:
        0 20px 45px rgba(90, 44, 22, 0.12);
}


/* ICONO */

.formativa-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 26px;

    background: #fff3e8;
    border-radius: 17px;

    font-size: 28px;
}


/* NÚMERO */

.formativa-number {
    position: absolute;
    top: 27px;
    right: 32px;

    color: #fff0e5;

    font-size: 64px;
    line-height: 1;
    font-weight: 800;
}


/* TEXTO */

.formativa-card h3 {
    position: relative;
    z-index: 2;

    margin-bottom: 14px;

    color: #54260f;

    font-size: 23px;
    font-weight: 800;
}

.formativa-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #704b39;

    font-size: 16px;
    line-height: 1.75;
}


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

@media (max-width: 768px) {

    .formativa-section {
        padding: 140px 0 110px;
        background: #fffaf4;
    }

    .formativa-header {
        margin-bottom: 45px;
    }

    .formativa-header h2 {
        font-size: 38px;
    }

    .formativa-header p {
        font-size: 16px;
    }

    .formativa-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .formativa-card {
        min-height: auto;
        padding: 30px;
    }

    .formativa-number {
        font-size: 55px;
    }

}

/* =========================================
   CÓMO APRENDEMOS
========================================= */

.aprendemos-section {
    padding: 110px 0;
    background: #ffffff;
}

.aprendemos-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}


/* =========================================
   IMAGEN
========================================= */

.aprendemos-imagen {
    position: relative;
    min-height: 610px;
}

.aprendemos-imagen img {
    width: 100%;
    height: 610px;

    display: block;
    object-fit: cover;

    border-radius: 30px;

    box-shadow:
        0 25px 60px rgba(74, 37, 19, 0.15);
}


/* CUADRO SOBRE LA FOTO */

.aprendemos-badge {
    position: absolute;
    left: 30px;
    bottom: 30px;

    padding: 22px 28px;

    background: #632f17;
    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);
}

.aprendemos-badge strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;
    font-size: 19px;
}

.aprendemos-badge span {
    color: #ff8a25;
    font-size: 14px;
}


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

.aprendemos-label {
    display: block;

    margin-bottom: 14px;

    color: #ff6b0b;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
}

.aprendemos-contenido h2 {
    margin: 0 0 22px;

    color: #572a15;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.aprendemos-contenido h2 span {
    display: block;
    color: #ff6b0b;
}

.aprendemos-intro {
    margin-bottom: 38px;

    color: #705143;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   LISTA
========================================= */

.aprendemos-lista {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aprendemos-item {
    position: relative;

    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 20px;

    padding: 23px;

    background: #fffaf5;

    border: 1px solid #f0ded2;
    border-radius: 20px;

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

.aprendemos-item:hover {
    transform: translateX(7px);

    border-color: #ff7417;

    box-shadow:
        0 12px 30px rgba(91, 43, 20, 0.08);
}


/* ICONOS */

.aprendemos-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    background: #fff0e4;
    border-radius: 16px;

    font-size: 26px;
}


/* NÚMERO */

.aprendemos-numero {
    display: block;

    margin-bottom: 4px;

    color: #ff7417;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* TÍTULOS */

.aprendemos-item h3 {
    margin: 0 0 7px;

    color: #572a15;

    font-size: 20px;
    font-weight: 800;
}

.aprendemos-item p {
    margin: 0;

    color: #765443;

    font-size: 15px;
    line-height: 1.65;
}


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

@media (max-width: 768px) {

    .aprendemos-section {
        padding: 75px 20px;
    }

    .aprendemos-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }


    /* IMAGEN */

    .aprendemos-imagen {
        min-height: auto;
    }

    .aprendemos-imagen img {
        height: 450px;
        border-radius: 24px;
    }

    .aprendemos-badge {
        left: 20px;
        right: 20px;
        bottom: 20px;

        padding: 18px 22px;
    }


    /* TEXTO */

    .aprendemos-contenido h2 {
        font-size: 38px;
    }

    .aprendemos-intro {
        font-size: 16px;
    }


    /* ITEMS */

    .aprendemos-item {
        grid-template-columns: 55px 1fr;
        gap: 15px;

        padding: 20px;
    }

    .aprendemos-item-icon {
        width: 52px;
        height: 52px;

        font-size: 23px;
    }

}

/* =========================================
   ÁREAS DE FORMACIÓN
========================================= */

.areas-section {
    padding: 110px 0;
    background: #fff8f1;
}


/* ENCABEZADO */

.areas-header {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.areas-label {
    display: block;
    margin-bottom: 14px;

    color: #ff6b0b;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
}

.areas-header h2 {
    margin: 0 0 20px;

    color: #572a15;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.areas-header h2 span {
    color: #ff6b0b;
}

.areas-header p {
    max-width: 700px;
    margin: auto;

    color: #705143;

    font-size: 17px;
    line-height: 1.8;
}


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

.areas-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}


/* =========================================
   ÁREA
========================================= */

.area-item {
    position: relative;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #ecd9cb;
    border-radius: 20px;

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

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

    border-color: #ff7417;

    box-shadow:
        0 18px 35px rgba(88, 43, 20, 0.10);
}


/* ICONO */

.area-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    background: #fff0e4;

    border-radius: 16px;

    font-size: 26px;
}


/* TEXTO */

.area-item h3 {
    margin: 0 0 10px;

    color: #572a15;

    font-size: 19px;
    font-weight: 800;
}

.area-item p {
    margin: 0;

    color: #765443;

    font-size: 14px;
    line-height: 1.7;
}


/* PEQUEÑO DETALLE NARANJA */

.area-item::after {
    content: "";

    position: absolute;

    left: 25px;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #ff7417;

    border-radius: 5px;

    transition: width .3s ease;
}

.area-item:hover::after {
    width: 55px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

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

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .areas-section {
        padding: 75px 20px;
    }

    .areas-header {
        margin-bottom: 45px;
    }

    .areas-header h2 {
        font-size: 38px;
    }

    .areas-header p {
        font-size: 16px;
    }

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

    .area-item {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 18px;

        padding: 23px;
    }

    .area-icon {
        margin-bottom: 0;
    }

}

/* ==========================================
   ÁREAS DE FORMACIÓN
========================================== */

.areas-formacion {
    padding: 90px 0;
    background: #fff9f3;
}

.areas-header {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.areas-label {
    display: block;
    color: #ff6b00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.areas-header h2 {
    color: #5a2a13;
    font-size: 52px;
    line-height: 1.05;
    margin-bottom: 22px;
}

.areas-header h2 span {
    color: #ff6b00;
}

.areas-header p {
    color: #75462f;
    font-size: 17px;
    line-height: 1.8;
}

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

.area-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #efd7c8;
    border-radius: 22px;
    padding: 30px 26px;
    min-height: 250px;
    transition: all .3s ease;
}

.area-card:hover {
    transform: translateY(-8px);
    border-color: #ff7417;
    box-shadow: 0 18px 40px rgba(90, 42, 19, .10);
}

.area-icon {
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: #fff2e6;

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

    font-size: 27px;
    margin-bottom: 25px;
}

.area-card h3 {
    color: #57230d;
    font-size: 21px;
    margin-bottom: 14px;
}

.area-card p {
    color: #75462f;
    font-size: 15px;
    line-height: 1.7;
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 600px) {

    .areas-formacion {
        padding: 65px 20px;
    }

    .areas-header {
        margin-bottom: 40px;
    }

    .areas-header h2 {
        font-size: 38px;
    }

    .areas-header p {
        font-size: 16px;
    }

    .areas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .area-card {
        min-height: auto;
        padding: 28px 25px;
    }

}

/* ==========================================
   TALLERES Y EXPERIENCIAS
========================================== */

.talleres-propuesta {
    padding: 100px 0;
    background: #ffffff;
}

.talleres-header {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
}

.talleres-label {
    display: block;
    color: #ff6b00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.talleres-header h2 {
    color: #57270f;
    font-size: 52px;
    line-height: 1.08;
    margin-bottom: 22px;
}

.talleres-header h2 span {
    color: #ff6b00;
}

.talleres-header p {
    color: #75462f;
    font-size: 17px;
    line-height: 1.8;
}


/* GRID */

.talleres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: 22px;
}


/* TARJETAS */

.taller-card {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background: #4b210f;
}

.taller-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform .6s ease;
}


/* DEGRADADO */

.taller-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(55, 20, 5, .95) 0%,
            rgba(55, 20, 5, .50) 45%,
            rgba(55, 20, 5, .05) 100%
        );

    transition: background .35s ease;
}


/* TEXTO */

.taller-contenido {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;

    color: #ffffff;

    transform: translateY(15px);
    transition: transform .35s ease;
}

.taller-contenido span {
    color: #ff7a18;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.taller-contenido h3 {
    font-size: 28px;
    margin: 7px 0 8px;
}

.taller-contenido p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;

    opacity: .90;
}


/* EFECTO */

.taller-card:hover img {
    transform: scale(1.08);
}

.taller-card:hover .taller-contenido {
    transform: translateY(0);
}

.taller-card:hover .taller-overlay {
    background:
        linear-gradient(
            to top,
            rgba(55, 20, 5, .98) 0%,
            rgba(92, 38, 12, .62) 55%,
            rgba(55, 20, 5, .10) 100%
        );
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

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

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 600px) {

    .talleres-propuesta {
        padding: 70px 20px;
    }

    .talleres-header {
        margin-bottom: 40px;
    }

    .talleres-header h2 {
        font-size: 38px;
    }

    .talleres-header p {
        font-size: 16px;
    }

    .talleres-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 330px;
        gap: 18px;
    }

    .taller-contenido {
        left: 24px;
        right: 24px;
        bottom: 25px;
        transform: none;
    }

    .taller-contenido h3 {
        font-size: 27px;
    }

}

/* ==========================================
   CIERRE PROPUESTA EDUCATIVA
========================================== */

.cierre-propuesta {
    position: relative;
    overflow: hidden;

    padding: 95px 0;

    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(255, 112, 15, .22),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #35170b 0%,
            #57260f 55%,
            #733516 100%
        );

    color: #ffffff;
}

.cierre-propuesta-grid {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
    gap: 80px;
}


/* TEXTO */

.cierre-label {
    display: block;

    color: #ff7a18;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;

    margin-bottom: 20px;
}

.cierre-propuesta-texto h2 {
    max-width: 720px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1.08;

    margin: 0 0 25px;
}

.cierre-propuesta-texto h2 span {
    color: #ff7417;
}

.cierre-propuesta-texto > p {
    max-width: 720px;

    font-size: 17px;
    line-height: 1.8;

    color: rgba(255,255,255,.88);

    margin-bottom: 30px;
}


/* BENEFICIOS */

.cierre-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    margin-bottom: 35px;
}

.cierre-beneficios span {
    font-size: 15px;
    font-weight: 700;
}


/* BOTONES */

.cierre-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.btn-cierre {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 27px;

    border-radius: 50px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.btn-cierre-principal {
    background: #ff7417;
    color: #ffffff;
}

.btn-cierre-principal:hover {
    background: #ff8a38;
    transform: translateY(-3px);
}

.btn-cierre-secundario {
    border: 1px solid rgba(255,255,255,.55);
    color: #ffffff;
}

.btn-cierre-secundario:hover {
    background: #ffffff;
    color: #57260f;
    transform: translateY(-3px);
}


/* LOGO */

.cierre-propuesta-logo {
    text-align: center;
}

.cierre-propuesta-logo img {
    width: 190px;
    max-width: 100%;
    height: auto;

    filter: drop-shadow(0 15px 25px rgba(0,0,0,.25));

    transition: transform .4s ease;
}

.cierre-propuesta-logo img:hover {
    transform: scale(1.05);
}

.cierre-propuesta-logo h3 {
    color: #ffffff;

    font-size: 21px;

    margin: 20px 0 5px;
}

.cierre-propuesta-logo p {
    color: #ff8a38;
    margin: 0;
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 768px) {

    .cierre-propuesta {
        padding: 70px 25px;
    }

    .cierre-propuesta-grid {
        grid-template-columns: 1fr;
        gap: 55px;
        text-align: center;
    }

    .cierre-label {
        text-align: center;
    }

    .cierre-propuesta-texto h2 {
        font-size: 38px;
    }

    .cierre-propuesta-texto > p {
        font-size: 16px;
    }

    .cierre-beneficios {
        justify-content: center;
        gap: 12px 20px;
    }

    .cierre-botones {
        flex-direction: column;
    }

    .btn-cierre {
        width: 100%;
    }

    .cierre-propuesta-logo img {
        width: 150px;
    }

}

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

.actividades-hero {
    position: relative;
    min-height: 650px;

    background:
        linear-gradient(
            90deg,
            rgba(55, 22, 8, 0.96) 0%,
            rgba(85, 35, 12, 0.88) 38%,
            rgba(85, 35, 12, 0.35) 68%,
            rgba(55, 22, 8, 0.12) 100%
        ),
        url("../img/actividades/hero-actividades.jpg");

    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.actividades-hero-content {
    position: relative;
    z-index: 2;

    min-height: 650px;

    display: flex;
    align-items: center;

    padding-top: 100px;
    padding-bottom: 100px;
}

.actividades-hero-texto {
    width: 52%;
    max-width: 720px;
}

.actividades-label {
    display: block;

    color: #ff7417;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 4px;

    margin-bottom: 25px;
}

.actividades-hero h1 {
    color: #ffffff;

    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.05;
    font-weight: 800;

    margin: 0 0 28px;
}

.actividades-hero h1 span {
    display: block;
    color: #ff7417;
}

.actividades-hero p {
    max-width: 650px;

    color: #ffffff;
    font-size: 18px;
    line-height: 1.8;

    margin-bottom: 30px;
}

.actividades-destacados {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
}

.actividades-destacados span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}


/* CURVA INFERIOR */

.actividades-hero-wave {
    position: absolute;

    left: -5%;
    bottom: -70px;

    width: 110%;
    height: 130px;

    background: #ffffff;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}


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

@media (max-width: 768px) {

    .actividades-hero {
        min-height: 720px;

        background-position: 65% center;
    }

    .actividades-hero::before {
        content: "";
        position: absolute;
        inset: 0;

        background: rgba(55, 22, 8, 0.30);
    }

    .actividades-hero-content {
        min-height: 720px;

        align-items: flex-end;

        padding: 130px 25px 120px;
    }

    .actividades-hero-texto {
        width: 100%;
        max-width: 100%;
    }

    .actividades-label {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: 18px;
    }

    .actividades-hero h1 {
        font-size: 43px;
        line-height: 1.05;
    }

    .actividades-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .actividades-destacados {
        flex-direction: column;
        gap: 10px;
    }
}

/* =====================================================
   ACTIVIDADES - EXPERIENCIAS
===================================================== */

.actividades-experiencias {
    padding: 110px 0;
    background: #ffffff;
}

.actividades-section-header {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.actividades-section-header .section-label {
    display: block;
    margin-bottom: 16px;

    color: #ff6500;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
}

.actividades-section-header h2 {
    margin: 0 0 22px;

    color: #55250f;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 800;
}

.actividades-section-header h2 span {
    color: #ff6500;
}

.actividades-section-header p {
    max-width: 760px;
    margin: auto;

    color: #75432c;

    font-size: 17px;
    line-height: 1.8;
}


/* GRID */

.actividades-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;
}


/* TARJETA */

.actividad-card {
    position: relative;

    min-height: 330px;

    border-radius: 24px;

    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 15px 35px rgba(70, 30, 10, .10);
}


/* IMAGEN */

.actividad-card img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}


/* OSCURECIDO */

.actividad-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(45, 17, 6, .92) 0%,
            rgba(65, 25, 8, .35) 58%,
            rgba(0, 0, 0, .05) 100%
        );

    transition:
        background .4s ease;
}


/* CONTENIDO */

.actividad-card-content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 2;

    color: white;

    transition:
        transform .4s ease;
}

.actividad-card-content > span {
    display: block;

    margin-bottom: 8px;

    color: #ff7217;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.actividad-card-content h3 {
    margin: 0 0 8px;

    color: white;

    font-size: 29px;
    font-weight: 800;
}

.actividad-card-content p {
    margin: 0;

    color: rgba(255,255,255,.92);

    font-size: 15px;
    line-height: 1.6;
}


/* EFECTO HOVER */

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

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

.actividad-card:hover .actividad-card-overlay {
    background:
        linear-gradient(
            to top,
            rgba(69, 26, 6, .96),
            rgba(111, 44, 9, .28)
        );
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

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

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .actividades-experiencias {
        padding: 75px 0;
    }

    .actividades-section-header {
        margin-bottom: 45px;
        padding: 0 20px;
    }

    .actividades-section-header h2 {
        font-size: 38px;
    }

    .actividades-section-header p {
        font-size: 16px;
    }

    .actividades-grid {
        grid-template-columns: 1fr;

        padding: 0 22px;

        gap: 18px;
    }

    .actividad-card {
        min-height: 360px;
    }

    .actividad-card-content {
        left: 24px;
        right: 24px;
        bottom: 25px;
    }

}

/* =====================================================
   MOMENTOS QUE DEJAN HUELLA
===================================================== */

.momentos-section {
    padding: 110px 0;
    background: #fff8f1;
}

.momentos-header {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.momentos-label {
    display: block;
    margin-bottom: 15px;

    color: #ff6500;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
}

.momentos-header h2 {
    margin: 0 0 20px;

    color: #55250f;

    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.05;
}

.momentos-header h2 span {
    color: #ff6500;
}

.momentos-header p {
    margin: auto;
    max-width: 700px;

    color: #75432c;

    font-size: 17px;
    line-height: 1.8;
}


/* GALERÍA */

.momentos-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows: 280px;

    gap: 20px;
}


/* TARJETAS */

.momento-card {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 15px 35px rgba(70, 30, 10, .10);
}

.momento-grande {
    grid-column: span 2;
    grid-row: span 2;
}


/* IMAGEN */

.momento-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


/* OSCURECIDO */

.momento-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(45, 16, 5, .90),
            rgba(45, 16, 5, .05) 65%
        );
}


/* TEXTO */

.momento-overlay {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 25px;

    z-index: 2;

    color: #fff;
}

.momento-overlay span {
    color: #ff7a19;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.momento-overlay h3 {
    margin: 8px 0 0;

    color: #fff;

    font-size: 23px;
    line-height: 1.2;
}


/* HOVER */

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


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

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

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .momentos-section {
        padding: 75px 0;
    }

    .momentos-header {
        padding: 0 25px;
        margin-bottom: 40px;
    }

    .momentos-header h2 {
        font-size: 38px;
    }

    .momentos-grid {
        display: flex;
        flex-direction: column;

        padding: 0 25px;

        gap: 18px;
    }

    .momento-card,
    .momento-grande {
        width: 100%;
        height: 330px;
    }

    .momento-overlay {
        left: 22px;
        bottom: 22px;
    }

    .momento-overlay h3 {
        font-size: 21px;
    }

}

/* =========================================
   ACTIVIDADES - FORMACIÓN PARA LA VIDA
========================================= */

.formacion-vida {
    padding: 110px 20px;
    background: #fff8f1;
}

.formacion-vida .container {
    max-width: 1180px;
    margin: 0 auto;
}

.formacion-vida-header {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.formacion-vida-label {
    display: block;
    margin-bottom: 15px;

    color: #ff6600;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.formacion-vida-header h2 {
    margin: 0 0 20px;

    color: #5a260e;

    font-size: 48px;
    line-height: 1.08;
    font-weight: 800;
}

.formacion-vida-header h2 span {
    color: #ff6600;
}

.formacion-vida-header p {
    margin: 0 auto;

    color: #713c25;

    font-size: 17px;
    line-height: 1.8;
}


/* TARJETAS */

.formacion-vida-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.formacion-vida-card {
    position: relative;

    min-height: 290px;
    padding: 38px 34px;

    background: #ffffff;

    border: 1px solid #ecd2c0;
    border-radius: 24px;

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

.formacion-vida-card:hover {
    transform: translateY(-8px);

    border-color: #ff7a1a;

    box-shadow:
        0 18px 40px rgba(89, 38, 14, .12);
}


/* ICONO */

.formacion-vida-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 30px;

    background: #fff2e6;
    border-radius: 18px;

    font-size: 29px;
}


/* NÚMERO */

.formacion-numero {
    position: absolute;
    top: 30px;
    right: 30px;

    color: #fff0e5;

    font-size: 58px;
    line-height: 1;
    font-weight: 900;
}


/* TEXTO */

.formacion-vida-card h3 {
    position: relative;

    margin: 0 0 15px;

    color: #572208;

    font-size: 25px;
    font-weight: 800;
}

.formacion-vida-card p {
    position: relative;

    margin: 0;

    color: #75432c;

    font-size: 16px;
    line-height: 1.75;
}


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

@media (max-width: 900px) {

    .formacion-vida {
        padding: 80px 20px;
    }

    .formacion-vida-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .formacion-vida-header h2 {
        font-size: 40px;
    }

    .formacion-vida-card {
        min-height: auto;
    }
}


@media (max-width: 600px) {

    .formacion-vida {
        padding: 80px 20px 100px;
        background: #fff8f1;
    }

    .formacion-vida-header {
        margin-bottom: 45px;
    }

    .formacion-vida-label {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .formacion-vida-header h2 {
        font-size: 37px;
        line-height: 1.08;
    }

    .formacion-vida-header p {
        font-size: 16px;
        line-height: 1.75;
    }

    .formacion-vida-card {
        padding: 30px 28px;
        border-radius: 22px;
    }

    .formacion-vida-card h3 {
        font-size: 23px;
    }

    .formacion-numero {
        font-size: 50px;
        top: 28px;
        right: 27px;
    }
}

/* =========================================
   CTA FINAL - ACTIVIDADES
========================================= */

.actividades-cta {
    position: relative;
    overflow: hidden;

    padding: 100px 20px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(255, 112, 15, .25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #35170b 0%,
            #59240e 55%,
            #783313 100%
        );

    color: #fff;
}

.actividades-cta-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.actividades-cta-label {
    display: block;
    margin-bottom: 18px;

    color: #ff7a17;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.actividades-cta h2 {
    max-width: 780px;
    margin: 0 auto 24px;

    color: #fff;

    font-size: 50px;
    line-height: 1.08;
    font-weight: 800;
}

.actividades-cta h2 span {
    color: #ff7417;
}

.actividades-cta p {
    max-width: 700px;
    margin: 0 auto 28px;

    color: rgba(255,255,255,.9);

    font-size: 17px;
    line-height: 1.8;
}

.actividades-cta-valores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 28px;

    margin-bottom: 38px;

    font-weight: 700;
}

.actividades-cta-valores span {
    color: #fff;
}


/* BOTONES */

.actividades-cta-botones {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-actividades-principal,
.btn-actividades-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 205px;
    padding: 15px 28px;

    border-radius: 50px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}

.btn-actividades-principal {
    background: #ff7417;
    color: #fff;
}

.btn-actividades-principal:hover {
    background: #ff8a33;
    transform: translateY(-3px);
}

.btn-actividades-secundario {
    color: #fff;

    background: transparent;
    border: 1px solid rgba(255,255,255,.55);
}

.btn-actividades-secundario:hover {
    background: #fff;
    color: #572208;

    transform: translateY(-3px);
}


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

@media (max-width: 600px) {

    .actividades-cta {
        padding: 75px 22px;
    }

    .actividades-cta-label {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .actividades-cta h2 {
        font-size: 38px;
    }

    .actividades-cta p {
        font-size: 16px;
        line-height: 1.75;
    }

    .actividades-cta-valores {
        gap: 12px 22px;
        margin-bottom: 32px;
    }

    .actividades-cta-botones {
        flex-direction: column;
    }

    .btn-actividades-principal,
    .btn-actividades-secundario {
        width: 100%;
    }
}

/* INSIGNIA CTA ACTIVIDADES */

.actividades-cta-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.actividades-cta-logo img {
    width: 82px;
    height: auto;
    display: block;

    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25));

    transition: transform .3s ease;
}

.actividades-cta-logo img:hover {
    transform: scale(1.06);
}

@media (max-width: 600px) {

    .actividades-cta-logo img {
        width: 68px;
    }

}

@media (max-width: 600px) {

    .actividades-cta {
        padding: 55px 22px 65px;
        min-height: auto;
    }

    .actividades-cta-content {
        width: 100%;
        max-width: 100%;
    }

    .actividades-cta-logo {
        margin-bottom: 16px;
    }

    .actividades-cta-logo img {
        width: 65px;
    }

    .actividades-cta-label {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .actividades-cta h2 {
        font-size: 34px;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .actividades-cta p {
        font-size: 16px;
        line-height: 1.7;
    }

    .actividades-cta-valores {
        gap: 12px 18px;
        margin-bottom: 30px;
    }

    .actividades-cta-botones {
        flex-direction: column;
        gap: 12px;
    }

    .btn-actividades-principal,
    .btn-actividades-secundario {
        width: 100%;
    }
}

/* =========================================
   HERO - GALERÍA
========================================= */

.galeria-hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(55, 20, 7, .96) 0%,
            rgba(78, 29, 9, .88) 38%,
            rgba(73, 26, 7, .45) 68%,
            rgba(40, 15, 5, .18) 100%
        ),
        url("/kawsay2027/assets/img/galeria/galeria-hero.jpg");

    background-size: cover;
    background-position: center;
}

.galeria-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
    padding: 120px 20px 130px;
}

.galeria-hero-texto {
    max-width: 650px;
}

.galeria-label {
    display: block;

    margin-bottom: 24px;

    color: #ff7417;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.galeria-hero h1 {
    margin: 0 0 26px;

    color: #fff;

    font-size: 68px;
    line-height: 1.03;
    font-weight: 800;
}

.galeria-hero h1 span {
    display: block;
    color: #ff6b0b;
}

.galeria-hero p {
    max-width: 620px;

    margin: 0 0 30px;

    color: #fff;

    font-size: 18px;
    line-height: 1.8;
}

.galeria-destacados {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;

    color: #fff;

    font-weight: 700;
}


/* CURVA INFERIOR */

.galeria-hero-wave {
    position: absolute;

    left: -5%;
    bottom: -1px;

    width: 110%;
    height: 65px;

    background: #fff;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    z-index: 3;
}


/* =========================================
   GALERÍA HERO - RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .galeria-hero {
        min-height: 680px;

        background-position: 60% center;
    }

    .galeria-hero-content {
        padding: 120px 25px 110px;
    }

    .galeria-hero-texto {
        max-width: 100%;
    }

    .galeria-label {
        font-size: 12px;
        letter-spacing: 4px;
    }

    .galeria-hero h1 {
        font-size: 48px;
        line-height: 1.05;
    }

    .galeria-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .galeria-destacados {
        gap: 12px 20px;
        font-size: 14px;
    }

    .galeria-hero-wave {
        height: 45px;
    }
}


@media (max-width: 480px) {

    .galeria-hero {
        min-height: 650px;
    }

    .galeria-hero h1 {
        font-size: 42px;
    }

}
/* =====================================================
   NAVBAR GALERÍA - MISMO COMPORTAMIENTO QUE ACTIVIDADES
===================================================== */

/* HEADER encima del hero */
body:has(.galeria-hero) #header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: transparent !important;
    box-shadow:
        0 4px 18px rgba(59, 36, 22, 0.10) !important;
}

/* NAVBAR transparente */
body:has(.galeria-hero) #header .navbar {
    background: transparent !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Texto del logo */
body:has(.galeria-hero) #header .brand-text strong {
    color: #ffffff !important;
}

body:has(.galeria-hero) #header .brand-text span {
    color: #ff7417 !important;
}

/* Enlaces */
body:has(.galeria-hero) #header .nav-menu a {
    color: #ffffff !important;
}

/* Botón Admisión conserva naranja */
body:has(.galeria-hero) #header .nav-menu .btn-admision {
    color: #ffffff !important;
}


/* ============================
   CUANDO HACEMOS SCROLL
============================ */

body:has(.galeria-hero) #header.scrolled {
    position: fixed !important;

    background: #ffffff !important;

    box-shadow:
        0 4px 18px rgba(59, 36, 22, 0.10) !important;
}

body:has(.galeria-hero) #header.scrolled .navbar {
    background: #ffffff !important;
}

/* Colores normales al bajar */

body:has(.galeria-hero) #header.scrolled .brand-text strong {
    color: #55250f !important;
}

body:has(.galeria-hero) #header.scrolled .brand-text span {
    color: #ff6500 !important;
}

body:has(.galeria-hero) #header.scrolled .nav-menu a {
    color: #55250f !important;
}

/* Admisión */
body:has(.galeria-hero) #header.scrolled .nav-menu .btn-admision {
    color: #ffffff !important;
}


/* ============================
   CELULAR
============================ */

@media (max-width: 900px) {

    body:has(.galeria-hero) #header .menu-toggle {
        color: #ffffff !important;
    }

    body:has(.galeria-hero) #header.scrolled .menu-toggle {
        color: #55250f !important;
    }

}

/* =====================================================
   GALERÍA - NAVBAR AL HACER SCROLL
   DEJAR AL FINAL DEL CSS
===================================================== */

body:has(.galeria-hero) #header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;

    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(59, 36, 22, 0.12) !important;
}

body:has(.galeria-hero) #header.scrolled .navbar {
    background: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Nombre del colegio */
body:has(.galeria-hero) #header.scrolled .brand-text strong {
    color: #55250f !important;
}

/* Lema */
body:has(.galeria-hero) #header.scrolled .brand-text span {
    color: #ff6500 !important;
}

/* Enlaces */
body:has(.galeria-hero) #header.scrolled .nav-menu a {
    color: #55250f !important;
}

/* Botón Admisión permanece blanco sobre naranja */
body:has(.galeria-hero) #header.scrolled .nav-menu .btn-admision {
    color: #ffffff !important;
}

/* =====================================================
   GALERÍA - NUESTROS RECUERDOS
===================================================== */

.galeria-momentos {
    padding: 100px 20px 120px;
    background: #fffaf6;
}

.galeria-section-header {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.galeria-section-label {
    display: block;
    margin-bottom: 14px;

    color: #ff6500;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
}

.galeria-section-header h2 {
    margin: 0 0 20px;

    color: #55250f;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    font-weight: 800;
}

.galeria-section-header h2 span {
    color: #ff6500;
}

.galeria-section-header p {
    max-width: 720px;
    margin: 0 auto;

    color: #75432c;
    font-size: 17px;
    line-height: 1.8;
}


/* =========================
   FILTROS
========================= */

.galeria-filtros {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 45px;
}

.galeria-filtro {
    border: 1px solid #ead2c4;
    background: #ffffff;

    color: #65321c;

    padding: 11px 20px;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: .3s ease;
}

.galeria-filtro:hover,
.galeria-filtro.active {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   MOSAICO
========================= */

.galeria-grid {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows: 280px;

    gap: 20px;
}


/* TARJETAS */

.galeria-item {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    box-shadow:
        0 15px 35px rgba(74, 31, 10, .12);

    cursor: pointer;
}

.galeria-item-grande {
    grid-column: span 2;
    grid-row: span 2;
}


/* IMÁGENES */

.galeria-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


/* OSCURECIDO */

.galeria-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(50, 18, 5, .90) 0%,
            rgba(50, 18, 5, .20) 55%,
            transparent 100%
        );
}


/* TEXTO */

.galeria-item-overlay {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 24px;

    z-index: 2;

    color: #ffffff;
}

.galeria-item-overlay span {
    display: block;

    margin-bottom: 7px;

    color: #ff7a18;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}

.galeria-item-overlay h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
}


/* HOVER */

.galeria-item:hover img {
    transform: scale(1.07);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

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

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .galeria-momentos {
        padding: 75px 20px 90px;
    }

    .galeria-section-header {
        margin-bottom: 35px;
    }

    .galeria-section-header h2 {
        font-size: 36px;
    }

    .galeria-section-header p {
        font-size: 16px;
    }

    .galeria-filtros {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

        margin-bottom: 30px;
    }

    .galeria-filtro {
        flex: 0 0 auto;
    }

    .galeria-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 300px;

        gap: 16px;
    }

    .galeria-item-grande {
        grid-column: span 1;
        grid-row: span 1;
    }

    .galeria-item-overlay {
        left: 22px;
        bottom: 22px;
    }

    .galeria-item-overlay h3 {
        font-size: 22px;
    }
}

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

.galeria-item {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.galeria-item.oculto {
    display: none;
}

/* =====================================================
   LIGHTBOX - GALERÍA
===================================================== */

.galeria-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 40px 80px;

    background: rgba(25, 10, 4, .94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* LIGHTBOX ABIERTO */

.galeria-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* CONTENIDO */

.lightbox-contenido {
    position: relative;

    width: 100%;
    max-width: 1100px;
    max-height: 88vh;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGEN */

.lightbox-contenido img {
    display: block;

    max-width: 100%;
    max-height: 82vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .45);
}


/* INFORMACIÓN */

.lightbox-info {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 20px;

    padding: 40px 20px 15px;

    border-radius: 0 0 16px 16px;

    background:
        linear-gradient(
            to top,
            rgba(35, 12, 4, .90),
            transparent
        );

    color: #ffffff;
}

.lightbox-info span {
    display: block;

    margin-bottom: 6px;

    color: #ff7417;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.lightbox-info h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
}


/* CERRAR */

.lightbox-cerrar {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    z-index: 3;

    border: none;
    border-radius: 50%;

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

    color: #ffffff;

    font-size: 35px;
    line-height: 1;

    cursor: pointer;

    transition: .3s ease;
}

.lightbox-cerrar:hover {
    background: #ff6500;
    transform: rotate(90deg);
}


/* FLECHAS */

.lightbox-anterior,
.lightbox-siguiente {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    z-index: 3;

    border: none;
    border-radius: 50%;

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

    color: #ffffff;

    font-size: 30px;

    cursor: pointer;

    transition: .3s ease;
}

.lightbox-anterior {
    left: 25px;
}

.lightbox-siguiente {
    right: 25px;
}

.lightbox-anterior:hover,
.lightbox-siguiente:hover {
    background: #ff6500;
}


/* EVITA SCROLL AL ABRIR FOTO */

body.lightbox-abierto {
    overflow: hidden;
}


/* =====================================================
   LIGHTBOX CELULAR
===================================================== */

@media (max-width: 600px) {

    .galeria-lightbox {
        padding: 70px 15px 30px;
    }

    .lightbox-contenido img {
        max-height: 75vh;
        border-radius: 14px;
    }

    .lightbox-cerrar {
        top: 15px;
        right: 15px;

        width: 44px;
        height: 44px;
    }

    .lightbox-anterior,
    .lightbox-siguiente {
        width: 44px;
        height: 44px;

        font-size: 22px;

        background: rgba(0, 0, 0, .45);
    }

    .lightbox-anterior {
        left: 10px;
    }

    .lightbox-siguiente {
        right: 10px;
    }

    .lightbox-info {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .lightbox-info h3 {
        font-size: 19px;
    }
}

/* =====================================================
   HERO - ADMISIÓN 2027
===================================================== */

.admision-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(55, 20, 7, .96) 0%,
            rgba(83, 31, 8, .90) 40%,
            rgba(84, 31, 7, .45) 70%,
            rgba(40, 14, 4, .18) 100%
        ),
        url("../img/admision/admision-hero.jpg");

    background-size: cover;
    background-position: center;
}


/* CONTENIDO */

.admision-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    align-items: center;

    gap: 70px;

    padding-top: 130px;
    padding-bottom: 140px;
}


/* TEXTO */

.admision-hero-texto {
    max-width: 720px;
}

.admision-label {
    display: block;

    margin-bottom: 22px;

    color: #ff7417;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 5px;
}

.admision-hero h1 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(52px, 5vw, 78px);
    line-height: 1.03;

    font-weight: 800;
}

.admision-hero h1 span {
    display: block;

    color: #ff7417;
}

.admision-hero-texto > p {
    max-width: 650px;

    margin: 0 0 28px;

    color: rgba(255,255,255,.94);

    font-size: 18px;
    line-height: 1.8;
}


/* BENEFICIOS */

.admision-beneficios {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 25px;

    margin-bottom: 35px;
}

.admision-beneficios span {
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
}


/* BOTONES */

.admision-hero-botones {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}

.btn-admision-principal,
.btn-admision-secundario {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 27px;

    border-radius: 50px;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    transition: .3s ease;
}

.btn-admision-principal {
    background: #ff6b00;

    color: #ffffff;
}

.btn-admision-principal:hover {
    background: #ff8533;

    transform: translateY(-3px);
}

.btn-admision-secundario {
    border: 1px solid rgba(255,255,255,.65);

    color: #ffffff;

    background: rgba(255,255,255,.06);
}

.btn-admision-secundario:hover {
    background: #ffffff;

    color: #5a260e;

    transform: translateY(-3px);
}


/* =========================
   TARJETA 2027
========================= */

.admision-hero-card {
    justify-self: end;

    width: 100%;
    max-width: 310px;

    padding: 42px 35px;

    text-align: center;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.06)
        );

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 30px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 25px 60px rgba(30, 10, 2, .30);
}

.admision-card-label {
    display: block;

    margin-bottom: 5px;

    color: #ffb27d;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 5px;
}

.admision-hero-card strong {
    display: block;

    color: #ffffff;

    font-size: 76px;
    line-height: 1;

    font-weight: 800;
}

.admision-hero-card p {
    margin: 12px 0;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
}

.admision-card-line {
    width: 55px;
    height: 3px;

    margin: 20px auto;

    border-radius: 10px;

    background: #ff7417;
}

.admision-hero-card small {
    color: rgba(255,255,255,.85);

    font-size: 14px;
}


/* CURVA */

.admision-hero-wave {
    position: absolute;

    left: -5%;
    bottom: -70px;

    width: 110%;
    height: 130px;

    background: #fffaf6;

    border-radius:
        50% 50% 0 0 /
        100% 100% 0 0;
}


/* =====================================================
   ADMISIÓN - TABLET Y CELULAR
===================================================== */

@media (max-width: 900px) {

    .admision-hero {
        min-height: auto;

        background-position: 62% center;
    }

    .admision-hero-content {
        grid-template-columns: 1fr;

        gap: 45px;

        padding:
            130px 25px
            140px;
    }

    .admision-hero-texto {
        max-width: 650px;
    }

    .admision-hero-card {
        justify-self: start;

        max-width: 280px;
    }
}


@media (max-width: 600px) {

    .admision-hero {
        background-position: 60% center;
    }

    .admision-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        background:
            rgba(55, 20, 7, .25);
    }

    .admision-hero-content {
        padding:
            120px 22px
            120px;

        gap: 35px;
    }

    .admision-label {
        font-size: 12px;

        letter-spacing: 3px;
    }

    .admision-hero h1 {
        font-size: 43px;
    }

    .admision-hero-texto > p {
        font-size: 16px;
        line-height: 1.7;
    }

    .admision-beneficios {
        flex-direction: column;

        gap: 9px;
    }

    .admision-hero-botones {
        flex-direction: column;
    }

    .btn-admision-principal,
    .btn-admision-secundario {
        width: 100%;
    }

    .admision-hero-card {
        justify-self: center;

        max-width: 260px;

        padding: 32px 25px;
    }

    .admision-hero-card strong {
        font-size: 62px;
    }
}

.admision-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    /* SEPARACIÓN DE LOS BORDES */
    padding-left: 70px;
    padding-right: 70px;
}

@media (max-width: 768px) {

    .admision-hero-content {
        padding-left: 24px;
        padding-right: 24px;
    }

}

/* =====================================================
   ADMISION 2027 - RESPONSIVE CELULAR
===================================================== */

@media (max-width: 768px) {

    /* HERO */
    .admision-hero {
        min-height: auto;
        height: auto;

        padding-bottom: 120px;

        background-position: 60% center;

        overflow: visible;
    }
    @media (max-width: 768px) {

        .admision-hero {
            background-position: 58% center;
        }

    }
    @media (max-width: 768px) {

        .admision-card {
            margin-top: 50px;
        }

    }

    /* Oscurecemos más la imagen para leer mejor */
    .admision-hero::before {
        content: "";
        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                180deg,
                rgba(55, 20, 7, .45) 0%,
                rgba(55, 20, 7, .72) 45%,
                rgba(55, 20, 7, .96) 100%
            );

        z-index: 1;
    }

    /* CONTENIDO */
    .admision-hero-content {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: auto;
        height: auto;

        padding: 125px 24px 90px;
    }

    /* TEXTO */
    .admision-hero-texto {
        width: 100%;
        max-width: 100%;
    }

    .admision-label {
        font-size: 12px;
        letter-spacing: 4px;
        margin-bottom: 18px;
    }

    .admision-hero h1 {
        font-size: 43px;
        line-height: 1.03;

        margin-bottom: 24px;
    }

    .admision-hero h1 span {
        display: block;
    }

    .admision-hero p {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;

        margin-bottom: 25px;
    }

    /* BENEFICIOS */
    .admision-destacados {
        display: flex;
        flex-direction: column;

        gap: 9px;

        margin-bottom: 28px;
    }

    .admision-destacados span {
        font-size: 15px;
    }

    /* BOTONES */
    .admision-botones {
        display: flex;
        flex-direction: column;

        gap: 12px;

        width: 100%;
    }

    .admision-botones a {
        width: 100%;

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

        text-align: center;
    }

    /* TARJETA ADMISION 2027 */
    .admision-card {
        position: relative;

        top: auto;
        right: auto;

        width: calc(100% - 40px);
        max-width: 330px;

        margin: 38px auto 0;

        padding: 30px 20px 34px;

        text-align: center;
    }

    .admision-card .anio,
    .admision-card h2 {
        font-size: 56px;
    }

    /* CURVA */
    .admision-hero-wave {
        height: 70px;
        bottom: -35px;
    }

}

/* =====================================================
   PROCESO DE ADMISIÓN 2027
===================================================== */

.proceso-admision {
    position: relative;
    padding: 110px 20px 120px;

    background: #fffaf6;
    overflow: hidden;
}


/* CABECERA */

.proceso-header {
    max-width: 850px;
    margin: 0 auto 85px;

    text-align: center;
}

.proceso-label {
    display: block;

    margin-bottom: 18px;

    color: #ff6500;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.proceso-header h2 {
    margin: 0 0 25px;

    color: #57230d;

    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
    font-weight: 800;
}

.proceso-header h2 span {
    display: block;
    color: #ff6500;
}

.proceso-header p {
    max-width: 720px;
    margin: 0 auto;

    color: #75432c;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================
   LÍNEA DEL PROCESO
========================================= */

.proceso-linea {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 35px;

    max-width: 1200px;
    margin: 0 auto;
}


/* LÍNEA HORIZONTAL */

.proceso-linea::before {
    content: "";

    position: absolute;

    top: 92px;
    left: 8%;
    right: 8%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff6500,
            #ff9b55
        );
}


/* =========================================
   PASOS
========================================= */

.proceso-paso {
    position: relative;
    z-index: 2;

    text-align: center;
}


/* NÚMERO */

.proceso-numero {
    margin-bottom: 18px;

    color: rgba(255, 101, 0, .12);

    font-size: 64px;
    line-height: 1;
    font-weight: 900;

    transition: .3s ease;
}


/* PUNTO */

.proceso-punto {
    position: relative;

    width: 20px;
    height: 20px;

    margin: 0 auto 32px;

    background: #ff6500;

    border: 5px solid #fffaf6;
    border-radius: 50%;

    box-shadow:
        0 0 0 2px #ff6500;
}


/* INFORMACIÓN */

.proceso-info {
    padding: 28px 20px;

    background: #ffffff;

    border: 1px solid rgba(255, 101, 0, .18);
    border-radius: 22px;

    box-shadow:
        0 14px 35px rgba(86, 35, 13, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.proceso-info > span {
    display: block;

    margin-bottom: 10px;

    color: #ff6500;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}


.proceso-info h3 {
    margin: 0 0 15px;

    color: #57230d;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}


.proceso-info p {
    margin: 0;

    color: #75432c;

    font-size: 15px;
    line-height: 1.7;
}


/* HOVER */

.proceso-paso:hover .proceso-numero {
    color: #ff6500;
    transform: translateY(-5px);
}

.proceso-paso:hover .proceso-info {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(86, 35, 13, .13);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .proceso-linea {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
    }

    .proceso-linea::before {
        display: none;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .proceso-admision {
        padding: 80px 22px 90px;
    }

    .proceso-header {
        margin-bottom: 55px;
    }

    .proceso-label {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .proceso-header h2 {
        font-size: 36px;
        line-height: 1.1;
    }

    .proceso-header p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* UNA COLUMNA */

    .proceso-linea {
        display: block;
    }


    /* LÍNEA VERTICAL */

    .proceso-linea::before {
        display: block;

        top: 35px;
        bottom: 35px;

        left: 25px;
        right: auto;

        width: 2px;
        height: auto;

        background:
            linear-gradient(
                180deg,
                #ff6500,
                rgba(255, 101, 0, .15)
            );
    }


    .proceso-paso {
        display: grid;

        grid-template-columns: 52px 1fr;

        text-align: left;

        margin-bottom: 32px;
    }


    .proceso-numero {
        grid-column: 1 / 3;

        margin: 0 0 5px 68px;

        font-size: 48px;
    }


    .proceso-punto {
        grid-column: 1;
        grid-row: 2;

        width: 17px;
        height: 17px;

        margin: 35px auto 0;
    }


    .proceso-info {
        grid-column: 2;
        grid-row: 2;

        padding: 24px 20px;

        border-radius: 18px;
    }


    .proceso-info h3 {
        font-size: 21px;
    }


    .proceso-info p {
        font-size: 15px;
    }

}

/* =====================================================
   REQUISITOS - ADMISIÓN 2027
===================================================== */

.admision-requisitos {
    padding: 110px 20px;
    background: #ffffff;
}


/* ENCABEZADO */

.admision-requisitos-header {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.admision-requisitos-label {
    display: block;
    margin-bottom: 18px;

    color: #ff6500;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.admision-requisitos-header h2 {
    margin: 0 0 22px;

    color: #55250f;

    font-size: clamp(40px, 4.5vw, 60px);
    line-height: 1.08;
    font-weight: 800;
}

.admision-requisitos-header h2 span {
    display: block;
    color: #ff6500;
}

.admision-requisitos-header p {
    max-width: 720px;
    margin: 0 auto;

    color: #75432c;

    font-size: 17px;
    line-height: 1.8;
}


/* DOS BLOQUES */

.requisitos-grid {
    max-width: 1120px;
    margin: 0 auto 45px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 28px;
}


/* TARJETAS */

.requisito-bloque {
    position: relative;
    overflow: hidden;

    padding: 48px 48px 45px;

    border: 1px solid #f0cdb9;
    border-radius: 26px;

    background: #fffaf6;

    box-shadow:
        0 15px 40px rgba(80, 35, 15, 0.06);
}


/* NÚMERO DECORATIVO */

.requisito-numero {
    position: absolute;

    top: 22px;
    right: 30px;

    color: rgba(255, 101, 0, 0.10);

    font-size: 85px;
    line-height: 1;
    font-weight: 800;
}


/* ETIQUETA */

.requisito-tipo {
    display: block;

    margin-bottom: 16px;

    color: #ff6500;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}


/* TÍTULO */

.requisito-bloque h3 {
    position: relative;

    max-width: 370px;

    margin: 0 0 32px;

    color: #55250f;

    font-size: 29px;
    line-height: 1.2;
    font-weight: 800;
}


/* LISTA */

.requisitos-lista {
    margin: 0;
    padding: 0;

    list-style: none;
}

.requisitos-lista li {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 14px 0;

    border-bottom: 1px solid #f3dfd3;

    color: #70402b;

    font-size: 16px;
    line-height: 1.55;
}

.requisitos-lista li:last-child {
    border-bottom: none;
}

.requisitos-lista li span {
    flex-shrink: 0;

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

    width: 25px;
    height: 25px;

    margin-top: 1px;

    border-radius: 50%;

    background: #ff6500;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
}


/* AVISO FINAL */

.requisitos-aviso {
    max-width: 1120px;

    margin: 0 auto;

    padding: 30px 34px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #55250f 0%,
            #783313 100%
        );

    box-shadow:
        0 18px 45px rgba(75, 30, 10, 0.15);
}


/* ICONO */

.requisitos-aviso-icono {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #ff7417;
    color: #ffffff;

    font-size: 30px;
    font-weight: 800;
}


/* TEXTO */

.requisitos-aviso-texto span {
    display: block;

    margin-bottom: 5px;

    color: #ff9a58;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.requisitos-aviso-texto h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
}

.requisitos-aviso-texto p {
    margin: 0;

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

    font-size: 14px;
    line-height: 1.6;
}


/* BOTÓN */

.btn-requisitos {
    display: inline-flex;

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

    min-width: 205px;

    padding: 16px 25px;

    border-radius: 50px;

    background: #ff7417;
    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 800;

    transition: .3s ease;
}

.btn-requisitos:hover {
    background: #ff8a33;
    transform: translateY(-3px);
}


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

@media (max-width: 800px) {

    .admision-requisitos {
        padding: 80px 22px;
    }

    .admision-requisitos-header {
        margin-bottom: 45px;
    }

    .admision-requisitos-header h2 {
        font-size: 38px;
    }

    .requisitos-grid {
        grid-template-columns: 1fr;
    }

    .requisito-bloque {
        padding: 38px 28px 32px;
    }

    .requisito-bloque h3 {
        font-size: 25px;
    }

    .requisitos-aviso {
        grid-template-columns: 1fr;

        padding: 30px 25px;

        text-align: center;
    }

    .requisitos-aviso-icono {
        margin: 0 auto;
    }

    .btn-requisitos {
        width: 100%;
    }
}

/* =====================================================
   POR QUÉ ELEGIR KAWSAY ÑAN
===================================================== */

.porque-kawsay {
    padding: 120px 20px;

    background:
        linear-gradient(
            135deg,
            #fffaf6 0%,
            #fff5ed 100%
        );
}


.porque-kawsay-grid {
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 75px;
}


/* =====================================================
   IMAGEN
===================================================== */

.porque-kawsay-imagen {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 25px 60px rgba(73, 29, 10, .15);
}


.porque-kawsay-imagen img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* SOMBRA SOBRE LA IMAGEN */

.porque-kawsay-imagen::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(65, 24, 7, .48) 0%,
            transparent 48%
        );
}


/* SELLO */

.porque-kawsay-sello {
    position: absolute;

    left: 30px;
    bottom: 30px;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 20px;

    border: 1px solid rgba(255,255,255,.40);

    border-radius: 18px;

    background: rgba(74, 27, 8, .75);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #ffffff;
}


.porque-kawsay-sello strong {
    display: flex;

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

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #ff7417;

    font-size: 18px;
}


.porque-kawsay-sello span {
    font-size: 13px;
    line-height: 1.35;

    font-weight: 700;
}


/* =====================================================
   TEXTO
===================================================== */

.porque-kawsay-label {
    display: block;

    margin-bottom: 18px;

    color: #ff6500;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 5px;
}


.porque-kawsay-contenido h2 {
    margin: 0 0 25px;

    color: #55250f;

    font-size: clamp(42px, 4.2vw, 61px);

    line-height: 1.05;

    font-weight: 800;
}


.porque-kawsay-contenido h2 span {
    display: block;

    color: #ff6500;
}


.porque-kawsay-intro {
    max-width: 620px;

    margin: 0 0 42px;

    color: #75432c;

    font-size: 17px;

    line-height: 1.8;
}


/* =====================================================
   FORTALEZAS
===================================================== */

.porque-kawsay-fortalezas {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.fortaleza-kawsay {
    padding: 23px;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    border: 1px solid #f0d1be;

    border-radius: 20px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.fortaleza-kawsay:hover {
    transform: translateY(-5px);

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(75, 30, 10, .09);
}


/* ICONOS */

.fortaleza-icono {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 15px;

    background: #fff0e5;

    color: #ff6500;

    font-size: 23px;

    font-weight: 800;
}


.fortaleza-kawsay h3 {
    margin: 1px 0 8px;

    color: #55250f;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;
}


.fortaleza-kawsay p {
    margin: 0;

    color: #80503a;

    font-size: 14px;

    line-height: 1.6;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .porque-kawsay-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .porque-kawsay-imagen {
        min-height: 520px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .porque-kawsay {
        padding: 75px 22px;
    }


    .porque-kawsay-grid {
        gap: 42px;
    }


    .porque-kawsay-imagen {
        min-height: 430px;

        border-radius: 24px;
    }


    .porque-kawsay-sello {
        left: 18px;
        bottom: 18px;

        padding: 12px 15px;
    }


    .porque-kawsay-sello strong {
        width: 43px;
        height: 43px;

        font-size: 15px;
    }


    .porque-kawsay-label {
        font-size: 11px;

        letter-spacing: 4px;
    }


    .porque-kawsay-contenido h2 {
        font-size: 38px;
    }


    .porque-kawsay-intro {
        font-size: 16px;

        line-height: 1.75;

        margin-bottom: 32px;
    }


    .porque-kawsay-fortalezas {
        grid-template-columns: 1fr;
    }


    .fortaleza-kawsay {
        padding: 20px;
    }

}

/* =====================================================
   ADMISION 2027 - LOGROS
===================================================== */

.admision-logros {
    padding: 100px 20px;
    background: #fffaf6;
}

.admision-logros-header {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.admision-logros-header .admision-section-label {
    display: block;
    margin-bottom: 15px;

    color: #ff6500;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}

.admision-logros-header h2 {
    max-width: 1000px;
    margin: 0 auto 22px;

    color: #55250f;
    font-size: clamp(38px, 3.5vw, 54px);
    line-height: 1.08;
    font-weight: 800;
}

.admision-logros-header h2 span {
    display: block;
    color: #ff6500;
}

.admision-logros-header p {
    max-width: 750px;
    margin: 0 auto;

    color: #75432c;
    font-size: 17px;
    line-height: 1.8;
}


/* CONTENEDOR DE LOGROS */

.admision-logros-grid {
    max-width: 1180px;
    margin: 0 auto;

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


/* TARJETA */

.admision-logro-card {
    position: relative;

    height: 440px;

    border-radius: 28px;
    overflow: hidden;

    box-shadow: 0 18px 45px rgba(80, 35, 15, 0.16);
}


/* FOTO */

.admision-logro-card img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
    object-position: center;

    transition: transform .5s ease;
}


/* DEGRADADO */

.admision-logro-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(50, 18, 5, .90) 0%,
        rgba(65, 25, 8, .35) 48%,
        rgba(0, 0, 0, 0) 75%
    );
}


/* TEXTO */

.admision-logro-content {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 32px;

    z-index: 2;

    color: #ffffff;
}

.admision-logro-content > span {
    display: block;
    margin-bottom: 9px;

    color: #ff7417;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
}

.admision-logro-content h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
}

.admision-logro-content p {
    margin: 0;

    color: rgba(255,255,255,.92);

    font-size: 15px;
    line-height: 1.6;
}


/* EFECTO */

.admision-logro-card:hover img {
    transform: scale(1.05);
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 768px) {

    .admision-logros {
        padding: 75px 20px;
    }

    .admision-logros-header {
        margin-bottom: 40px;
    }

    .admision-logros-header h2 {
        font-size: 38px;
    }

    .admision-logros-header p {
        font-size: 16px;
    }

    .admision-logros-grid {
        grid-template-columns: 1fr;
    }

    .admision-logro-card {
        height: 390px;
    }

    .admision-logro-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .admision-logro-content h3 {
        font-size: 26px;
    }
}

/* =========================================
   ORGULLO KAWSAY ÑAN - TARJETAS
========================================= */

.orgullo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 25px;
}

.orgullo-card {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(74, 34, 15, 0.12);
}

.orgullo-card img,
.orgullo-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ajedrez ocupa las dos columnas */
.orgullo-ajedrez {
    grid-column: 1 / -1;
    aspect-ratio: auto;
}

.orgullo-ajedrez img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* MÓVIL */
@media (max-width: 768px) {

    .orgullo-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 18px;
    }

    .orgullo-ajedrez {
        grid-column: auto;
        aspect-ratio: auto;
    }

    .orgullo-ajedrez img {
        height: auto;
    }
}

/* =====================================================
   CTA FINAL - ADMISIÓN 2027
===================================================== */

.admision-cta {
    position: relative;
    padding: 95px 30px;
    background:
        radial-gradient(circle at 80% 20%,
        rgba(255, 107, 0, 0.18),
        transparent 32%),
        linear-gradient(135deg, #2d140a 0%, #4b210d 55%, #30150b 100%);
    overflow: hidden;
}

.admision-cta::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    right: -180px;
    bottom: -260px;
    border: 1px solid rgba(255,255,255,0.08);
}

.admision-cta-container {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.6fr 0.75fr;
    gap: 70px;
    align-items: center;

    position: relative;
    z-index: 2;
}


/* TEXTO */

.admision-cta-label {
    display: block;
    color: #ff7417;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

.admision-cta-info h2 {
    color: #ffffff;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.05;
    margin: 0 0 25px;
    max-width: 760px;
}

.admision-cta-info h2 span {
    display: block;
    color: #ff7417;
}

.admision-cta-texto {
    color: rgba(255,255,255,0.82);
    font-size: 17px;
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 35px;
}


/* DATOS */

.admision-cta-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 38px;
}

.admision-dato {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 18px;

    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
}

.admision-dato-icono {
    width: 42px;
    height: 42px;
    border-radius: 50%;

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

    background: #ff6b00;
    color: white;
    font-size: 19px;
    font-weight: bold;
}

.admision-dato small {
    display: block;
    color: #ff9b58;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
}

.admision-dato strong {
    display: block;
    color: white;
    font-size: 14px;
}


/* BOTONES */

.admision-cta-botones {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-admision-contacto,
.btn-admision-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    padding: 16px 27px;

    border-radius: 50px;

    text-decoration: none;
    font-weight: 800;

    transition: 0.3s ease;
}

.btn-admision-contacto {
    background: #ff6b00;
    color: white;
}

.btn-admision-contacto:hover {
    background: #ff812e;
    transform: translateY(-3px);
}

.btn-admision-whatsapp {
    border: 1px solid rgba(255,255,255,0.6);
    color: white;
    background: transparent;
}

.btn-admision-whatsapp:hover {
    background: white;
    color: #54240f;
    transform: translateY(-3px);
}


/* TARJETA 2027 */

.admision-cta-destacado {
    min-height: 370px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.16),
            rgba(255,255,255,0.04)
        );

    border: 1px solid rgba(255,255,255,0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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

    text-align: center;

    padding: 40px 25px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.20);
}

.admision-cta-destacado span {
    color: #ff9a55;
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 800;
}

.admision-cta-destacado strong {
    display: block;

    color: white;

    font-size: 85px;
    line-height: 1;

    margin: 15px 0;
}

.admision-cta-destacado p {
    color: white;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}

.admision-cta-linea {
    width: 55px;
    height: 3px;
    background: #ff6b00;
    margin: 20px 0;
}

.admision-cta-destacado small {
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    letter-spacing: 3px;
}


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

@media (max-width: 900px) {

    .admision-cta {
        padding: 70px 24px;
    }

    .admision-cta-container {
        grid-template-columns: 1.8fr 0.7fr;
        gap: 45px;
    }

    .admision-cta-info h2 {
        color: #ffffff;
        font-size: clamp(38px, 3.5vw, 56px);
        line-height: 1.08;
        margin: 0 0 25px;
        max-width: 820px;
    }

    .admision-cta-destacado {
        min-height: 300px;
    }

}


@media (max-width: 600px) {

    .admision-cta {
        padding: 60px 22px;
    }

    .admision-cta-label {
        font-size: 11px;
        letter-spacing: 4px;
    }

    .admision-cta-info h2 {
        font-size: 35px;
    }

    .admision-cta-texto {
        font-size: 15px;
    }

    .admision-cta-datos {
        flex-direction: column;
    }

    .admision-dato {
        width: 100%;
    }

    .admision-cta-botones {
        flex-direction: column;
    }

    .btn-admision-contacto,
    .btn-admision-whatsapp {
        width: 100%;
    }

    .admision-cta-destacado strong {
        font-size: 68px;
    }

}

/* =========================================
   BLOQUE FINAL ADMISION - VERSION MOVIL
========================================= */

@media (max-width: 768px) {

    .admision-cta {
        padding: 65px 28px 55px;
        min-height: auto;
    }

    .admision-cta-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 40px;
    }

    .admision-cta-content {
        width: 100%;
        max-width: 100%;
    }

    .admision-cta h2 {
        font-size: 42px;
        line-height: 1.05;
        max-width: 100%;
        margin-bottom: 25px;
    }

    .admision-cta p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Tarjetas teléfono / ubicación / vacantes */
    .admision-cta-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 14px;
        margin-top: 30px;
    }

    .admision-cta-info > * {
        width: 100%;
        max-width: 100%;
    }

    /* Botones */
    .admision-cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        margin-top: 25px;
    }

    .admision-cta-buttons a {
        width: 100%;
        text-align: center;
    }

    /* Tarjeta 2027 */
    .admision-cta-card {
        position: relative;
        width: 100%;
        max-width: 330px;
        margin: 10px auto 0;
        right: auto;
        left: auto;
        top: auto;
        transform: none;
    }
}

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

.contact-page {
    background: #fffaf6;
    color: #54210d;
}


/* HERO */

.contact-hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 100px 7%;
    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(255, 106, 0, .20),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #351307 0%,
            #572008 48%,
            #7a300d 100%
        );
}

.contact-hero-content {
    width: 100%;
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 80px;
    align-items: center;
}


/* TEXTO */

.contact-eyebrow {
    display: block;
    color: #ff6a00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 24px;
}

.contact-hero-text h1 {
    color: white;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .98;
    margin: 0 0 30px;
    font-weight: 800;
}

.contact-hero-text h1 span {
    display: block;
    color: #ff6a00;
}

.contact-hero-text p {
    max-width: 620px;
    color: rgba(255,255,255,.88);
    font-size: 18px;
    line-height: 1.8;
}


/* BOTONES */

.contact-hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 38px;
}

.btn-contact-primary,
.btn-contact-secondary {
    padding: 16px 27px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.btn-contact-primary {
    background: #ff6a00;
    color: white;
}

.btn-contact-primary:hover {
    transform: translateY(-3px);
}

.btn-contact-secondary {
    color: white;
    border: 1px solid rgba(255,255,255,.65);
}

.btn-contact-secondary:hover {
    background: white;
    color: #54210d;
}


/* TARJETA HERO */

.contact-hero-card {
    padding: 55px 45px;
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.06)
        );

    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(12px);
    color: white;
}

.contact-hero-card > span {
    color: #ffad75;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.contact-hero-card h2 {
    font-size: 42px;
    margin: 18px 0;
}

.contact-hero-card p {
    line-height: 1.7;
    color: rgba(255,255,255,.85);
}

.contact-card-line {
    width: 50px;
    height: 3px;
    background: #ff6a00;
    margin: 28px 0;
}


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

.contact-info {
    padding: 110px 7%;
}

.contact-section-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.contact-section-heading > span {
    color: #ff5f00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
}

.contact-section-heading h2 {
    font-size: 52px;
    line-height: 1.05;
    margin: 18px 0;
    color: #54210d;
}

.contact-section-heading h2 strong {
    display: block;
    color: #ff5f00;
}

.contact-section-heading p {
    font-size: 17px;
    line-height: 1.8;
}


/* CARDS */

.contact-info-grid {
    max-width: 1200px;
    margin: auto;

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

.contact-info-card {
    background: white;
    border: 1px solid #f1d0bc;
    border-radius: 25px;
    padding: 38px;
    transition: .3s ease;
}

.contact-info-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 50px rgba(75, 28, 9, .10);
}

.contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #fff0e6;

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

    color: #ff6500;
    font-size: 27px;
    margin-bottom: 25px;
}

.contact-info-card > span {
    color: #ff6500;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.contact-info-card h3 {
    color: #54210d;
    font-size: 25px;
    margin: 12px 0;
}

.contact-info-card p {
    line-height: 1.7;
    min-height: 80px;
}

.contact-info-card a {
    display: inline-block;
    margin-top: 12px;
    color: #ff6500;
    font-weight: 700;
    text-decoration: none;
}


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

@media (max-width: 768px) {

    .contact-hero {
        min-height: auto;
        padding: 75px 32px 65px;
    }

    .contact-hero-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .contact-hero-text h1 {
        font-size: 43px;
        line-height: 1.05;
    }

    .contact-hero-text p {
        font-size: 16px;
    }

    .contact-hero-buttons {
        flex-direction: column;
    }

    .btn-contact-primary,
    .btn-contact-secondary {
        width: 100%;
        text-align: center;
    }

    .contact-hero-card {
        padding: 38px 28px;
    }

    .contact-hero-card h2 {
        font-size: 35px;
    }


    /* INFORMACIÓN */

    .contact-info {
        padding: 75px 32px;
    }

    .contact-section-heading {
        margin-bottom: 40px;
    }

    .contact-section-heading h2 {
        font-size: 39px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        padding: 30px;
    }

    .contact-info-card p {
        min-height: auto;
    }
}

/* =========================================================
   CONTACTO - UBICACIÓN
========================================================= */

.contact-location {
    padding: 110px 7%;
    background: #fffaf6;
}

.contact-location-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-location-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.contact-location-heading > span {
    display: block;
    color: #ff6500;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 18px;
}

.contact-location-heading h2 {
    margin: 0;
    color: #54200d;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    font-weight: 800;
}

.contact-location-heading h2 strong {
    display: block;
    color: #ff6500;
}

.contact-location-heading p {
    color: #74351d;
    font-size: 17px;
    line-height: 1.8;
    margin-top: 25px;
}

.contact-location-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    min-height: 500px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(83, 32, 13, 0.12);
}

.contact-map {
    min-height: 500px;
    background: #eee;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.contact-location-card {
    background: linear-gradient(
        145deg,
        #4b1908,
        #7a2c0d
    );
    padding: 65px 50px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-small {
    color: #ff9b58;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.contact-location-card h3 {
    margin: 0;
    font-size: 38px;
    line-height: 1.15;
}

.contact-location-card h3 strong {
    color: #ff7517;
}

.contact-location-card > p {
    margin: 25px 0 0;
    line-height: 1.8;
    color: rgba(255,255,255,.85);
}

.location-divider {
    width: 55px;
    height: 3px;
    background: #ff6b00;
    margin: 30px 0;
}

.location-data {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.location-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: #ff6b00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.location-item span {
    display: block;
    color: #ffb17c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.location-item strong {
    color: #fff;
    font-size: 16px;
}

.location-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    padding: 16px 28px;
    border-radius: 30px;
    background: #ff6b00;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: .3s ease;
}

.location-button:hover {
    transform: translateY(-3px);
    background: #ff812e;
}


/* =========================================================
   CONTACTO - RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .contact-location {
        padding: 75px 22px;
    }

    .contact-location-heading {
        margin-bottom: 35px;
    }

    .contact-location-heading h2 {
        font-size: 39px;
    }

    .contact-location-heading p {
        font-size: 16px;
    }

    .contact-location-grid {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .contact-map {
        min-height: 350px;
    }

    .contact-map iframe {
        min-height: 350px;
    }

    .contact-location-card {
        padding: 45px 30px;
    }

    .contact-location-card h3 {
        font-size: 32px;
    }

}

/* =====================================================
   PRE-MATRÍCULA 2027
===================================================== */

.prematricula-page {
    background: #fffaf6;
    color: #5a210d;
}


/* HERO */

.prematricula-hero {
    background:
        linear-gradient(
            135deg,
            #401505 0%,
            #682509 55%,
            #8a3510 100%
        );

    padding: 110px 20px 100px;
}

.prematricula-hero-content {
    width: min(1180px, 100%);
    margin: auto;
}

.prematricula-eyebrow {
    display: block;
    color: #ff7612;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 25px;
}

.prematricula-hero h1 {
    max-width: 850px;
    margin: 0;

    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.02;
    font-weight: 800;
}

.prematricula-hero h1 span {
    display: block;
    color: #ff6500;
}

.prematricula-hero > .prematricula-hero-content > p {
    max-width: 720px;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    margin-top: 30px;
}


/* PEQUEÑA TARJETA HERO */

.prematricula-hero-note {
    display: flex;
    align-items: center;
    gap: 15px;

    width: fit-content;

    margin-top: 35px;
    padding: 15px 22px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;

    background: rgba(255,255,255,.08);
}

.prematricula-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;
    background: #ff6500;
    color: #fff;

    font-weight: 800;
    font-size: 20px;
}

.prematricula-hero-note strong,
.prematricula-hero-note span {
    display: block;
}

.prematricula-hero-note strong {
    color: #fff;
    font-size: 16px;
}

.prematricula-hero-note span {
    color: #ffd6bd;
    margin-top: 4px;
    font-size: 13px;
}


/* CONTENEDOR FORMULARIO */

.prematricula-section {
    padding: 90px 20px 110px;
}

.prematricula-container {
    width: min(1050px, 100%);
    margin: auto;
}

.prematricula-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.prematricula-heading > span {
    color: #ff5d00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
}

.prematricula-heading h2 {
    color: #57200c;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;
    margin: 15px 0 20px;
}

.prematricula-heading h2 strong {
    display: block;
    color: #ff5d00;
}

.prematricula-heading p {
    color: #74351e;
    font-size: 17px;
    line-height: 1.7;
}


/* FORMULARIO */

.prematricula-form {
    background: #fff;

    border: 1px solid #f3cbb7;
    border-radius: 30px;

    padding: 55px;

    box-shadow: 0 25px 70px rgba(83, 30, 8, .08);
}


/* SECCIONES */

.form-section {
    padding-bottom: 50px;
    margin-bottom: 50px;

    border-bottom: 1px solid #f4d7c8;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 35px;
}

.form-number {
    width: 62px;
    height: 62px;

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

    flex-shrink: 0;

    border-radius: 18px;

    background: #fff0e6;
    color: #ff6500;

    font-size: 21px;
    font-weight: 800;
}

.form-section-title span {
    color: #ff6500;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.form-section-title h3 {
    margin: 4px 0 0;
    color: #55200d;
    font-size: 26px;
}


/* GRID */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    color: #64240d;
    font-size: 14px;
    font-weight: 700;
}


/* CAMPOS */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 16px 18px;

    border: 1px solid #edc7b4;
    border-radius: 12px;

    background: #fffdfa;

    color: #55200d;

    font-family: inherit;
    font-size: 15px;

    outline: none;

    transition: .25s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #ff6500;

    box-shadow:
        0 0 0 3px rgba(255, 101, 0, .10);

    background: #fff;
}


/* PRIVACIDAD */

.prematricula-privacy {
    padding: 22px;

    background: #fff6f0;

    border: 1px solid #f5d2c0;
    border-radius: 15px;
}

.prematricula-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: #71321a;

    font-size: 14px;
    line-height: 1.6;

    cursor: pointer;
}

.prematricula-privacy input {
    margin-top: 5px;
    accent-color: #ff6500;
}


/* ENVIAR */

.prematricula-submit {
    text-align: center;
    margin-top: 35px;
}

.prematricula-submit button {
    border: 0;

    padding: 18px 35px;

    border-radius: 50px;

    background: #ff6500;
    color: #fff;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 25px rgba(255, 101, 0, .22);

    transition: .25s ease;
}

.prematricula-submit button:hover {
    transform: translateY(-2px);
    background: #e95600;
}

.prematricula-submit p {
    max-width: 650px;
    margin: 18px auto 0;

    color: #8a5a45;

    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   PRE-MATRÍCULA - CELULAR
===================================================== */

@media (max-width: 768px) {

    .prematricula-hero {
        padding: 85px 28px 70px;
    }

    .prematricula-eyebrow {
        font-size: 11px;
        letter-spacing: 4px;
    }

    .prematricula-hero h1 {
        font-size: 39px;
        line-height: 1.07;
    }

    .prematricula-hero > .prematricula-hero-content > p {
        font-size: 16px;
        line-height: 1.75;
    }

    .prematricula-hero-note {
        width: 100%;
    }


    .prematricula-section {
        padding: 65px 22px 80px;
    }

    .prematricula-heading {
        margin-bottom: 35px;
    }

    .prematricula-heading > span {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .prematricula-heading h2 {
        font-size: 37px;
    }

    .prematricula-heading p {
        font-size: 15px;
    }


    .prematricula-form {
        padding: 30px 22px;
        border-radius: 22px;
    }


    .form-section {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .form-section-title {
        align-items: flex-start;
    }

    .form-number {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 18px;
    }

    .form-section-title h3 {
        font-size: 21px;
    }


    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .form-group-full {
        grid-column: auto;
    }


    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }


    .prematricula-submit button {
        width: 100%;
    }

}

/* =====================================================
   PRE-MATRÍCULA - SOLICITUD RECIBIDA
===================================================== */

.prematricula-success-page {
    background: #fffaf6;
}

.prematricula-success {
    min-height: 760px;

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

    padding: 90px 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 101, 0, .08),
            transparent 35%
        ),
        #fffaf6;
}

.success-card {
    width: min(720px, 100%);

    text-align: center;

    background: #ffffff;

    border: 1px solid #f2cbb8;
    border-radius: 32px;

    padding: 60px 65px;

    box-shadow:
        0 30px 80px rgba(85, 31, 8, .10);
}


/* CHECK */

.success-icon {
    width: 85px;
    height: 85px;

    margin: 0 auto 28px;

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

    border-radius: 50%;

    background: #ff6500;
    color: #fff;

    font-size: 42px;
    font-weight: 800;

    box-shadow:
        0 15px 35px rgba(255, 101, 0, .25);
}


.success-eyebrow {
    display: block;

    color: #ff6500;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;

    margin-bottom: 15px;
}


.success-card h1 {
    margin: 0;

    color: #57200c;

    font-size: clamp(44px, 6vw, 65px);
    line-height: 1;

    font-weight: 800;
}

.success-card h1 span {
    display: block;
    color: #ff6500;
}


.success-description {
    max-width: 520px;

    margin: 25px auto 35px;

    color: #71321a;

    font-size: 17px;
    line-height: 1.7;
}


/* MENSAJE */

.success-message {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    text-align: left;

    padding: 22px;

    background: #fff6ef;

    border: 1px solid #f5d2bf;
    border-radius: 18px;
}

.success-message-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    background: #ff6500;
    color: #fff;

    border-radius: 50%;

    font-weight: 800;
}


.success-message strong {
    display: block;

    color: #57200c;

    font-size: 16px;

    margin-bottom: 5px;
}

.success-message p {
    margin: 0;

    color: #7a3b22;

    font-size: 14px;
    line-height: 1.6;
}


/* COLEGIO */

.success-school {
    margin: 35px 0;

    padding: 25px 20px;

    border-top: 1px solid #f3d3c4;
    border-bottom: 1px solid #f3d3c4;
}

.success-school span,
.success-school strong,
.success-school small {
    display: block;
}

.success-school span {
    color: #ff6500;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.success-school strong {
    color: #57200c;

    font-size: 20px;

    margin: 9px 0 5px;
}

.success-school small {
    color: #95624c;
}


/* BOTONES */

.success-buttons {
    display: flex;
    justify-content: center;

    gap: 15px;

    margin-top: 30px;
}

.success-buttons a {
    display: inline-flex;

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

    min-height: 54px;

    padding: 0 27px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 800;

    transition: .25s ease;
}


.success-btn-primary {
    background: #ff6500;
    color: #fff;

    box-shadow:
        0 10px 25px rgba(255, 101, 0, .20);
}

.success-btn-primary:hover {
    background: #e95700;
    transform: translateY(-2px);
}


.success-btn-whatsapp {
    color: #57200c;

    border: 1px solid #b88a74;
    background: #fff;
}

.success-btn-whatsapp:hover {
    background: #fff6ef;
    transform: translateY(-2px);
}


.success-notice {
    margin: 25px auto 0;

    color: #93634d;

    font-size: 12px;
    line-height: 1.6;

    max-width: 500px;
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 768px) {

    .prematricula-success {
        min-height: auto;

        padding:
            65px 20px
            80px;
    }

    .success-card {
        padding: 40px 24px;

        border-radius: 25px;
    }

    .success-icon {
        width: 70px;
        height: 70px;

        font-size: 34px;
    }

    .success-card h1 {
        font-size: 43px;
    }

    .success-description {
        font-size: 15px;
    }

    .success-message {
        padding: 18px;
    }

    .success-buttons {
        flex-direction: column;
    }

    .success-buttons a {
        width: 100%;
    }

}

/* ==========================================
   BANNER PREMATRÍCULA EXITOSA
   NAVBAR SUPERPUESTO
========================================== */

.prematricula-success-page {
    padding-top: 0;
}

/* Banner */
.prematricula-success-page .prematricula-banner {
    width: 100%;
    max-width: 1200px;
    height: 330px;
    margin: 0 auto 35px;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    position: relative;
}

/* Recortamos la imagen SIN deformarla */
.prematricula-success-page .prematricula-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    /* mostramos principalmente la parte superior */
    object-position: center top;
}

/* CELULAR */
@media (max-width: 768px) {

    .prematricula-success-page .prematricula-banner {
        width: 100%;
        height: 230px;
        margin: 0 auto 25px;
        border-radius: 0 0 18px 18px;
    }

    .prematricula-success-page .prematricula-banner img {
        object-fit: cover;
        object-position: center top;
    }
}

/* =========================================
   AJUSTE FINAL - PREMATRÍCULA EXITOSA
========================================= */

.prematricula-success-page .prematricula-banner {
    margin-bottom: 0;
}

.prematricula-success-page .prematricula-success {
    padding-top: 65px;
}

/* CELULAR */
@media (max-width: 768px) {

    .prematricula-success-page .prematricula-success {
        padding-top: 35px;
    }

}


/* BOTÓN PRE-MATRÍCULA 2027 */

.nav-menu a.btn-prematricula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #ffffff !important;
    color: #5a2e12 !important;

    padding: 12px 16px;
    border: 2px solid #ffffff;
    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    transition: all 0.3s ease;
}

.nav-menu a.btn-prematricula:hover {
    background: #f58220 !important;
    border-color: #f58220;
    color: #ffffff !important;
}

/* =========================================
   ACTIVIDADES PUBLICADAS - KAWSAY ÑAN
========================================= */

.actividades-publicadas {
    padding: 85px 0;
    background: #fff8f3;
}

.publicadas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.publicada-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #f1d4c4;
    box-shadow: 0 10px 25px rgba(75, 29, 11, 0.08);
    transition: transform 0.3s ease;
}

.publicada-card:hover {
    transform: translateY(-5px);
}

.publicada-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.publicada-contenido {
    padding: 25px;
}

.publicada-fecha {
    color: #ff6500;
    font-size: 13px;
    font-weight: bold;
}

.publicada-contenido h3 {
    color: #4b1d0b;
    font-size: 21px;
    margin: 14px 0;
}

.publicada-contenido p {
    color: #6f5145;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .publicadas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .publicadas-grid {
        grid-template-columns: 1fr;
    }

    .actividades-publicadas {
        padding: 55px 0;
    }
}

/* ==========================================
   GALERÍA RESPONSIVE - CELULARES
========================================== */

@media (max-width: 600px) {

    .galeria-filtros {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        overflow: visible;
        padding: 10px 0;
    }

    .galeria-filtro {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        font-size: 12px;
        padding: 10px 14px;
    }

    .galeria-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        width: 100%;
    }

    .galeria-item,
    .galeria-item-grande {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-width: 0;
    }

    .galeria-momentos .container {
        width: 92%;
        max-width: 100%;
    }

}