/*
=========================================================
PEI - COLEGIO INTEGRACIÓN MODERNA
ESTILOS GENERALES
=========================================================
*/


/*
=========================================================
VARIABLES INSTITUCIONALES
=========================================================
*/

:root {

    --azul:#123c69;

    --azul-oscuro:#082846;

    --azul-profundo:#061d33;

    --azul-claro:#edf6ff;


    --amarillo:#f6c515;

    --amarillo-suave:#fff8d8;


    --verde:#1d9d73;

    --verde-oscuro:#136d50;

    --verde-suave:#eafaf4;


    --morado:#7558c9;

    --morado-suave:#f3efff;


    --naranja:#ef8d25;

    --naranja-suave:#fff3e6;


    --rojo:#d65353;

    --rojo-suave:#fff0f0;


    --fondo:#f4f7fb;

    --blanco:#ffffff;


    --texto:#172033;

    --texto-suave:#657286;


    --borde:#e2e8f0;


    --sombra:

        0 18px 50px
        rgba(8,40,70,.10);


    --sombra-suave:

        0 12px 35px
        rgba(8,40,70,.06);

}



/*
=========================================================
RESET
=========================================================
*/

* {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    margin:0;

    padding:0;

    background:var(--fondo);

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

    color:var(--texto);

}


body.menu-open {

    overflow:hidden;

}


a {

    text-decoration:none;

    color:inherit;

}


button,
input,
select,
textarea {

    font-family:inherit;

}


img {

    max-width:100%;

    height:auto;

}



/*
=========================================================
HEADER
=========================================================
*/

.header {

    position:sticky;

    top:0;

    z-index:1000;

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

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        var(--borde);

}


.header-container {

    max-width:1400px;

    min-height:78px;

    margin:auto;

    padding:
        0
        28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}



/*
=========================================================
MARCA
=========================================================
*/

.brand {

    display:flex;

    align-items:center;

    gap:13px;

    flex-shrink:0;

}


.brand-icon {

    width:48px;

    height:48px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--azul),
            var(--azul-oscuro)
        );

    color:white;

    font-size:22px;

    box-shadow:

        0 10px 25px
        rgba(18,60,105,.22);

}


.brand-text strong {

    display:block;

    color:var(--azul-oscuro);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:17px;

}


.brand-text span {

    display:block;

    margin-top:2px;

    color:var(--texto-suave);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1.2px;

}



/*
=========================================================
NAVEGACIÓN PRINCIPAL
=========================================================
*/

.nav {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:2px;

}


.nav a {

    position:relative;

    padding:
        10px
        10px;

    border-radius:10px;

    color:#475569;

    font-size:11.5px;

    font-weight:700;

    white-space:nowrap;

    transition:
        background .2s,
        color .2s,
        transform .2s;

}


.nav a:hover {

    color:var(--azul);

    background:var(--azul-claro);

}


.nav a.active {

    color:var(--azul);

    background:var(--azul-claro);

}


.nav a.active::after {

    content:"";

    position:absolute;

    left:50%;

    bottom:3px;

    width:18px;

    height:2px;

    border-radius:999px;

    background:var(--amarillo);

    transform:translateX(-50%);

}



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

.menu-toggle {

    width:45px;

    height:45px;

    border:0;

    border-radius:13px;

    display:none;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:var(--azul-claro);

    color:var(--azul);

    font-size:20px;

    transition:.2s;

}


.menu-toggle:hover {

    background:var(--azul);

    color:white;

}



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

.mobile-menu {

    display:none;

    padding:
        12px
        18px
        20px;

    background:white;

    border-top:
        1px solid
        var(--borde);

    max-height:
        calc(100vh - 78px);

    overflow-y:auto;

}


.mobile-menu.show {

    display:grid;

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

    gap:8px;

}


.mobile-menu a {

    min-height:48px;

    padding:
        11px
        13px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:10px;

    background:#f8fafc;

    color:#475569;

    font-size:12px;

    font-weight:700;

    border:
        1px solid
        #edf1f5;

}


.mobile-menu a i {

    width:20px;

    text-align:center;

    color:var(--azul);

}


.mobile-menu a:hover,
.mobile-menu a.active {

    background:var(--azul-claro);

    color:var(--azul);

    border-color:#d6e7f6;

}



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

.hero {

    position:relative;

    overflow:hidden;

    color:white;

    background:

        radial-gradient(
            circle at 87% 10%,
            rgba(246,197,21,.28),
            transparent 27%
        ),

        radial-gradient(
            circle at 8% 95%,
            rgba(65,155,240,.18),
            transparent 31%
        ),

        linear-gradient(
            135deg,
            var(--azul-profundo),
            var(--azul)
        );

}


.hero::after {

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:
        75px solid
        rgba(255,255,255,.025);

    right:-150px;

    top:-190px;

}


.hero-container {

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;

    padding:
        75px
        28px
        82px;

}



/*
=========================================================
BREADCRUMB
=========================================================
*/

.breadcrumb {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-bottom:28px;

    color:#bed1e3;

    font-size:12px;

}


.breadcrumb a {

    color:#e3eff9;

    font-weight:700;

}


.breadcrumb a:hover {

    color:var(--amarillo);

}


.breadcrumb i {

    font-size:8px;

    opacity:.6;

}



/*
=========================================================
ETIQUETA DEL HERO
=========================================================
*/

.hero-label {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:
        7px
        12px;

    border-radius:999px;

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

    border:
        1px solid
        rgba(255,255,255,.15);

    color:#dfecf8;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.hero-label span {

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--amarillo);

}



/*
=========================================================
TÍTULO HERO
=========================================================
*/

.hero h1 {

    max-width:1050px;

    margin:
        18px
        0
        12px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:1;

    letter-spacing:-2.5px;

}


.hero h1 span {

    color:var(--amarillo);

}


.hero-description {

    max-width:880px;

    margin:0;

    color:#d4e4f1;

    font-size:16px;

    line-height:1.8;

}



/*
=========================================================
CONTENEDOR GENERAL
=========================================================
*/

.main {

    max-width:1400px;

    margin:auto;

    padding:
        70px
        28px;

}



/*
=========================================================
SECCIONES
=========================================================
*/

.section {

    margin-top:95px;

}


.section:first-child {

    margin-top:0;

}


.section-header {

    margin-bottom:36px;

}


.section-label {

    margin-bottom:8px;

    color:var(--azul);

    font-size:11px;

    font-weight:900;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.section-header h2 {

    margin:0;

    color:var(--azul-oscuro);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    letter-spacing:-1.2px;

}


.section-header p {

    max-width:850px;

    margin:
        13px
        0
        0;

    color:var(--texto-suave);

    font-size:14px;

    line-height:1.8;

}



/*
=========================================================
TARJETAS GENERALES
=========================================================
*/

.pei-card {

    padding:28px;

    border-radius:24px;

    background:white;

    border:
        1px solid
        var(--borde);

    transition:.25s;

}


.pei-card:hover {

    transform:translateY(-5px);

    box-shadow:var(--sombra);

}


.pei-card h3 {

    margin:
        20px
        0
        9px;

    color:var(--azul-oscuro);

    font-family:
        "Space Grotesk",
        sans-serif;

}


.pei-card p {

    margin:0;

    color:var(--texto-suave);

    font-size:12.5px;

    line-height:1.8;

}



/*
=========================================================
ICONOS GENERALES
=========================================================
*/

.pei-icon {

    width:60px;

    height:60px;

    border-radius:19px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--azul-claro);

    color:var(--azul);

    font-size:23px;

}



/*
=========================================================
BLOQUE DESTACADO
=========================================================
*/

.pei-highlight {

    padding:
        20px
        22px;

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

    border-radius:
        0
        15px
        15px
        0;

    background:white;

    color:var(--azul-oscuro);

    font-size:13px;

    font-weight:700;

    line-height:1.8;

}



/*
=========================================================
NAVEGACIÓN ENTRE CAPÍTULOS
=========================================================
*/

.chapter-navigation {

    margin-top:75px;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:18px;

}


.chapter-link {

    min-height:90px;

    padding:
        23px
        25px;

    border-radius:18px;

    background:white;

    border:
        1px solid
        var(--borde);

    display:flex;

    align-items:center;

    gap:15px;

    transition:.25s;

}


.chapter-link:hover {

    transform:translateY(-3px);

    box-shadow:var(--sombra);

    border-color:#d2dfeb;

}


.chapter-link.next {

    justify-content:flex-end;

    text-align:right;

}


.chapter-arrow {

    width:44px;

    height:44px;

    min-width:44px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--azul-claro);

    color:var(--azul);

    transition:.2s;

}


.chapter-link:hover
.chapter-arrow {

    background:var(--azul);

    color:white;

}


.chapter-link small {

    display:block;

    margin-bottom:5px;

    color:#94a3b8;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:9px;

    font-weight:900;

}


.chapter-link strong {

    color:var(--azul-oscuro);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:15px;

}



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

.pei-footer {

    margin-top:70px;

    background:var(--azul-profundo);

    color:#c8d7e5;

}


.footer-container {

    max-width:1400px;

    margin:auto;

    padding:
        42px
        28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


.footer-brand {

    display:flex;

    align-items:center;

    gap:14px;

}


.footer-logo {

    width:50px;

    height:50px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--amarillo);

    font-size:22px;

}


.footer-title {

    color:white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:16px;

    font-weight:700;

}


.footer-sub {

    margin-top:5px;

    color:#849bb1;

    font-size:10.5px;

}


.footer-info {

    text-align:right;

}


.footer-info strong {

    display:block;

    color:white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:14px;

}


.footer-info span {

    display:block;

    margin-top:5px;

    color:#849bb1;

    font-size:10.5px;

}



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

.footer-bottom {

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

}


.footer-bottom-container {

    max-width:1400px;

    margin:auto;

    padding:
        17px
        28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:#70899f;

    font-size:10px;

}


.footer-bottom-container a {

    display:flex;

    align-items:center;

    gap:7px;

    transition:.2s;

}


.footer-bottom-container a:hover {

    color:var(--amarillo);

}



/*
=========================================================
VOLVER ARRIBA
=========================================================
*/

.back-to-top {

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:900;

    width:48px;

    height:48px;

    border:0;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--azul);

    color:white;

    font-size:17px;

    cursor:pointer;

    box-shadow:
        0 12px 30px
        rgba(8,40,70,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:.25s;

}


.back-to-top.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.back-to-top:hover {

    background:var(--azul-oscuro);

}



/*
=========================================================
SELECCIÓN DE TEXTO
=========================================================
*/

::selection {

    background:var(--amarillo);

    color:var(--azul-profundo);

}



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

@media (max-width:1200px) {

    .nav {

        display:none;

    }


    .menu-toggle {

        display:flex;

    }

}



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

@media (max-width:700px) {


    .header-container {

        min-height:70px;

        padding:
            0
            18px;

    }


    .brand-icon {

        width:43px;

        height:43px;

        border-radius:13px;

        font-size:19px;

    }


    .brand-text strong {

        font-size:15px;

    }


    .brand-text span {

        display:none;

    }


    /*
    HERO
    */

    .hero-container {

        padding:
            55px
            20px
            60px;

    }


    .hero h1 {

        font-size:
            clamp(
                38px,
                12vw,
                52px
            );

        letter-spacing:-1.8px;

    }


    .hero-description {

        font-size:14px;

    }


    /*
    MAIN
    */

    .main {

        padding:
            52px
            18px;

    }


    /*
    MENÚ
    */

    .mobile-menu.show {

        grid-template-columns:1fr;

    }


    /*
    CAPÍTULOS
    */

    .chapter-navigation {

        grid-template-columns:1fr;

    }


    /*
    FOOTER
    */

    .footer-container {

        flex-direction:column;

        align-items:flex-start;

        padding:
            35px
            20px;

    }


    .footer-info {

        text-align:left;

    }


    .footer-bottom-container {

        padding:
            17px
            20px;

        flex-direction:column;

        align-items:flex-start;

    }


    /*
    BOTÓN ARRIBA
    */

    .back-to-top {

        right:16px;

        bottom:16px;

        width:44px;

        height:44px;

    }

}



/*
=========================================================
IMPRESIÓN
=========================================================
*/

@media print {


    .header,
    .chapter-navigation,
    .back-to-top,
    .menu-toggle,
    .mobile-menu {

        display:none !important;

    }


    body {

        background:white;

    }


    .main {

        max-width:none;

        padding:20px;

    }


    .hero {

        color:#000;

        background:white;

    }


    .hero-container {

        padding:
            20px
            0;

    }


    .hero h1,
    .hero h1 span {

        color:#082846;

    }


    .hero-description {

        color:#333;

    }


    .pei-footer {

        background:white;

        color:#333;

        border-top:
            1px solid
            #ccc;

    }

}