.elementor-kit-8{--e-global-color-primary:#253699;--e-global-color-secondary:#2A9C3C;--e-global-color-text:#4A4A4A;--e-global-color-accent:#FCEC1F;--e-global-color-78f257e:#F8F9FC;--e-global-color-acf7f1b:#5E5CE6;--e-global-color-4378edc:#7D58CC;--e-global-color-b2f037e:#0C1749;--e-global-color-07be8d3:#FFFFFF;--e-global-color-229cfc6:#000000;--e-global-color-eae6f68:#EF9D18;--e-global-color-ad53025:#FCEC1F;--e-global-color-00e5f0e:#2E85DB;--e-global-color-ca83baf:#166D20;--e-global-color-c222bb4:#4FCE49;--e-global-color-419d054:#3C3C3C;--e-global-color-cbd7a83:#DEDEDE;--e-global-color-161ed4d:#6F6F6F;--e-global-color-3bb879a:#FFFFFF00;--e-global-color-8cb455e:#FFFFFF80;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;letter-spacing:0.02em;}.elementor-kit-8 h2{font-size:32px;line-height:1.3em;}.elementor-kit-8 h3{font-size:22px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-header .site-navigation ul.menu li a{color:#1A237E;}.site-header .site-navigation .menu li{font-family:"Montserrat", Sans-serif;font-weight:600;text-shadow:0px 0px 10px rgba(0,0,0,0.3);}.site-footer .footer-inner{width:0px;max-width:100%;}@media(max-width:1024px){.elementor-kit-8 h1{font-size:32px;letter-spacing:0.02em;}.elementor-kit-8 h2{font-size:26px;line-height:1.3em;}.elementor-kit-8 h3{font-size:22px;line-height:22em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8 h1{font-size:32px;letter-spacing:0.02em;}.elementor-kit-8 h2{font-size:26px;line-height:1.3em;}.elementor-kit-8 h3{font-size:22px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   FELEM — DESIGN SYSTEM
   Metodología: BEM
   Namespace: felem-
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

:root {

    /* --------------------------------------------------------
       BRAND
       -------------------------------------------------------- */

    --felem-color-primary: #5e5ce6;
    --felem-color-primary-dark: #7d58cc;


    /* --------------------------------------------------------
       TEXT
       -------------------------------------------------------- */

    --felem-color-text: #202020;
    --felem-color-text-muted: #6b6b6b;
    --felem-color-text-inverse: #ffffff;


    /* --------------------------------------------------------
       GLASS
       -------------------------------------------------------- */

    --felem-glass-bg: rgba(255, 255, 255, 0.4);
    --felem-glass-border: rgba(255, 255, 255, 0.5);


    /* --------------------------------------------------------
       SHADOWS
       -------------------------------------------------------- */

    --felem-shadow-sm:
        0 8px 15px rgba(0, 0, 0, 0.05);

    --felem-shadow-md:
        0 12px 25px rgba(0, 0, 0, 0.12);

    --felem-shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.2);


    /* --------------------------------------------------------
       RADIUS
       -------------------------------------------------------- */

    --felem-radius-sm: 8px;
    --felem-radius-md: 12px;
    --felem-radius-lg: 30px;
    --felem-radius-pill: 999px;


    /* --------------------------------------------------------
       TRANSITIONS
       -------------------------------------------------------- */

    --felem-transition-fast:
        0.2s ease;

    --felem-transition-base:
        0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --felem-transition-slow:
        0.4s cubic-bezier(0.165, 0.84, 0.44, 1);


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    --felem-header-sticky-bg:
        rgba(0, 0, 0, 0.6);

    --felem-header-sticky-blur:
        12px;

    --felem-header-sticky-border:
        rgba(255, 255, 255, 0.2);


    /* --------------------------------------------------------
       INSTITUTIONAL COLORS
       -------------------------------------------------------- */

    --felem-color-parents:
        #2ac9ff;

    --felem-color-students:
        #ffb93d;

    --felem-color-teachers:
        #aa42e1;

    --felem-card-glass-bg:
        rgba(255, 255, 255, 0.05);
}


/* ============================================================
   02. UTILITIES / HELPERS
   ============================================================ */

/*
 * Estas clases no representan componentes.
 * Son comportamientos visuales reutilizables.
 *
 * Convención:
 * .u-*
 */


/* ------------------------------------------------------------
   Glass
   ------------------------------------------------------------ */

.u-glass {
    background: var(--felem-glass-bg) !important;

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

    border: 1px solid var(--felem-glass-border) !important;

    background-clip: padding-box;
}


/* ------------------------------------------------------------
   Shadow
   ------------------------------------------------------------ */

.u-shadow {
    box-shadow: var(--felem-shadow-sm) !important;
}


/* ------------------------------------------------------------
   Hover Lift
   ------------------------------------------------------------ */

.u-hover-lift {
    transition:
        transform var(--felem-transition-base),
        box-shadow var(--felem-transition-base),
        background var(--felem-transition-base),
        opacity var(--felem-transition-base) !important;

    will-change: transform;
    backface-visibility: hidden;
}

.u-hover-lift:hover {
    transform:
        translateY(-8px)
        translateZ(0) !important;

    box-shadow:
        var(--felem-shadow-md) !important;
}


/* ------------------------------------------------------------
   Border — Soft
   ------------------------------------------------------------ */

.u-border-soft {
    border-radius:
        var(--felem-radius-md) !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   Border — Pill
   ------------------------------------------------------------ */

.u-border-pill {
    border-radius:
        var(--felem-radius-pill) !important;

    overflow: hidden !important;
}


/* ============================================================
   03. EFFECT — TOP LINE
   ============================================================ */

.felem-top-line {
    position: relative;
    z-index: 1;
}

.felem-top-line::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--felem-color-primary),
            var(--felem-color-primary-dark)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform var(--felem-transition-slow);

    z-index: 10;

    pointer-events: none;
}

.felem-top-line:hover::before {
    transform: scaleX(1);
}


/* ============================================================
   04. COMPONENT — HEADER
   ============================================================ */

/*
 * Estructura BEM:
 *
 * .felem-header
 *     .felem-header__inner
 *         .felem-header__brand
 *         .felem-header__navigation
 *         .felem-header__actions
 *
 * Modificadores:
 *
 * .felem-header--home
 * .felem-header--site
 *
 * Estado:
 *
 * .elementor-sticky--effects
 */


/* ------------------------------------------------------------
   Block
   ------------------------------------------------------------ */

.felem-header {
    width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   Inner
   ------------------------------------------------------------ */

.felem-header__inner {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    transition:
        transform var(--felem-transition-base),
        box-shadow var(--felem-transition-base),
        background var(--felem-transition-base),
        opacity var(--felem-transition-base),
        margin var(--felem-transition-base),
        border-radius var(--felem-transition-base);
}


/* ------------------------------------------------------------
   Brand
   ------------------------------------------------------------ */

.felem-header__brand {
    box-sizing: border-box;
    min-width: 0;
}


/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.felem-header__navigation {
    box-sizing: border-box;
    min-width: 0;
}


/* ------------------------------------------------------------
   Actions
   ------------------------------------------------------------ */

.felem-header__actions {
    box-sizing: border-box;
    min-width: 0;
}


/* ============================================================
   05. HEADER — HOME
   ============================================================ */

/*
 * El Home tendrá posteriormente su comportamiento específico:
 *
 * transparente sobre Hero
 *        ↓
 * sticky
 *        ↓
 * floating glass pill
 *
 * Por ahora mantenemos la lógica visual existente.
 */


/* ------------------------------------------------------------
   Home — Base
   ------------------------------------------------------------ */

.felem-header--home {
    width: 100%;
}


/* ------------------------------------------------------------
   Home — Sticky
   ------------------------------------------------------------ */

.felem-header--home.elementor-sticky--effects
.felem-header__inner {

    background:
        var(--felem-header-sticky-bg) !important;

    backdrop-filter:
        blur(var(--felem-header-sticky-blur));

    -webkit-backdrop-filter:
        blur(var(--felem-header-sticky-blur));

    margin-top: 15px;

    border-radius:
        var(--felem-radius-pill);

    border:
        1px solid var(--felem-header-sticky-border);

    padding:
        10px 40px !important;

    max-width: 95%;

    margin-left: auto;
    margin-right: auto;

    box-shadow:
        var(--felem-shadow-lg);
}


/* ------------------------------------------------------------
   Home — Sticky Navigation
   ------------------------------------------------------------ */

.felem-header--home.elementor-sticky--effects
.felem-header__navigation
.sticky-menu-items
ul
li
a {

    color:
        var(--felem-color-text-inverse) !important;
}


/* ============================================================
   06. HEADER — SITE
   ============================================================ */

/*
 * Header de páginas internas.
 *
 * Se mantiene separado mediante el modificador:
 *
 * .felem-header--site
 *
 * No modificamos aquí su comportamiento actual hasta
 * verificar cómo está construido en Elementor.
 */

.felem-header--site {
    width: 100%;
}


/* ============================================================
   07. COMPONENT — BUTTON
   ============================================================ */

/*
 * Block:
 * .felem-button
 *
 * Modifiers:
 * .felem-button--gradient
 * .felem-button--ghost
 */


/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

.felem-button .elementor-button {
    transition:
        transform var(--felem-transition-base),
        box-shadow var(--felem-transition-base),
        background var(--felem-transition-base),
        opacity var(--felem-transition-base);
}


/* ------------------------------------------------------------
   Modifier — Gradient
   ------------------------------------------------------------ */

.felem-button--gradient .elementor-button {

    background:
        linear-gradient(
            90deg,
            var(--felem-color-primary),
            var(--felem-color-primary-dark)
        ) !important;

    color:
        var(--felem-color-text-inverse) !important;

    border:
        none !important;
}

.felem-button--gradient
.elementor-button:hover {

    filter:
        brightness(1.15);

    transform:
        scale(1.03);
}


/* ------------------------------------------------------------
   Modifier — Ghost
   ------------------------------------------------------------ */

.felem-button--ghost .elementor-button {

    background:
        transparent !important;

    color:
        var(--felem-color-primary) !important;

    border:
        2px solid var(--felem-color-primary) !important;
}

.felem-button--ghost
.elementor-button:hover {

    background:
        var(--felem-color-primary) !important;

    color:
        var(--felem-color-text-inverse) !important;

    transform:
        scale(1.03);

    border-color:
        var(--felem-color-primary) !important;
}


/* ============================================================
   08. COMPONENT — FORM
   ============================================================ */


/* ------------------------------------------------------------
   Fields
   ------------------------------------------------------------ */

.felem-form .elementor-field-group input,
.felem-form .elementor-field-group textarea {

    background-color:
        var(--felem-color-surface, #ffffff) !important;

    border:
        1px solid #e1e4e8 !important;

    border-radius:
        var(--felem-radius-sm) !important;

    padding:
        12px 16px !important;

    transition:
        border-color var(--felem-transition-base);
}


/* ------------------------------------------------------------
   Field — Focus
   ------------------------------------------------------------ */

.felem-form
.elementor-field-group
input:focus {

    border-color:
        var(--felem-color-primary) !important;

    outline:
        none;
}


/* ============================================================
   09. COMPONENT — CARD
   ============================================================ */

/*
 * Block:
 *
 * .felem-card
 *
 * Modifier:
 *
 * .felem-card--parents
 * .felem-card--students
 * .felem-card--teachers
 */


/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

.felem-card {

    position: relative;

    background:
        var(--felem-card-glass-bg) !important;

    backdrop-filter:
        blur(15px);

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

    border:
        1px solid rgba(255, 255, 255, 0.15) !important;

    border-radius:
        var(--felem-radius-lg) !important;

    padding:
        40px 25px !important;

    text-align:
        center;

    transition:
        transform var(--felem-transition-base),
        box-shadow var(--felem-transition-base),
        background var(--felem-transition-base),
        opacity var(--felem-transition-base);
}


/* ------------------------------------------------------------
   Glow
   ------------------------------------------------------------ */

.felem-card::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 140%;
    height: 140%;

    transform:
        translate(-50%, -50%);

    filter:
        blur(60px);

    z-index:
        -1;

    opacity:
        0;

    transition:
        opacity var(--felem-transition-slow);

    pointer-events:
        none;
}

.felem-card:hover::before {
    opacity: 1;
}


/* ------------------------------------------------------------
   Card Typography
   ------------------------------------------------------------ */

.felem-card h3 {

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

    font-weight:
        700;

    margin-bottom:
        15px !important;
}

.felem-card .elementor-icon-list-text {

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

    color:
        rgba(255, 255, 255, 0.8) !important;
}


/* ============================================================
   10. CARD MODIFIER — PARENTS
   ============================================================ */

.felem-card--parents:hover {

    border-color:
        var(--felem-color-parents) !important;
}

.felem-card--parents::before {

    background:
        radial-gradient(
            circle,
            rgba(42, 201, 255, 0.15) 0%,
            transparent 70%
        );
}

.felem-card--parents
.elementor-icon,

.felem-card--parents
h3 {

    color:
        var(--felem-color-parents) !important;
}

.felem-card--parents
.elementor-button {

    border:
        2px solid var(--felem-color-parents) !important;

    color:
        var(--felem-color-text-inverse) !important;

    background:
        transparent !important;
}

.felem-card--parents
.elementor-button:hover {

    background:
        var(--felem-color-parents) !important;
}


/* ============================================================
   11. CARD MODIFIER — STUDENTS
   ============================================================ */

.felem-card--students:hover {

    border-color:
        var(--felem-color-students) !important;
}

.felem-card--students::before {

    background:
        radial-gradient(
            circle,
            rgba(255, 185, 61, 0.15) 0%,
            transparent 70%
        );
}

.felem-card--students
.elementor-icon,

.felem-card--students
h3 {

    color:
        var(--felem-color-students) !important;
}

.felem-card--students
.elementor-button {

    border:
        2px solid var(--felem-color-students) !important;

    color:
        var(--felem-color-text-inverse) !important;

    background:
        transparent !important;
}

.felem-card--students
.elementor-button:hover {

    background:
        var(--felem-color-students) !important;
}


/* ============================================================
   12. CARD MODIFIER — TEACHERS
   ============================================================ */

.felem-card--teachers:hover {

    border-color:
        var(--felem-color-teachers) !important;
}

.felem-card--teachers::before {

    background:
        radial-gradient(
            circle,
            rgba(170, 66, 225, 0.15) 0%,
            transparent 70%
        );
}

.felem-card--teachers
.elementor-icon,

.felem-card--teachers
h3 {

    color:
        var(--felem-color-teachers) !important;
}

.felem-card--teachers
.elementor-button {

    border:
        2px solid var(--felem-color-teachers) !important;

    color:
        var(--felem-color-text-inverse) !important;

    background:
        transparent !important;
}

.felem-card--teachers
.elementor-button:hover {

    background:
        var(--felem-color-teachers) !important;
}


/* ============================================================
   13. RESPONSIVE
   ============================================================ */


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       Header Home — Sticky
       -------------------------------------------------------- */

    .felem-header--home.elementor-sticky--effects
    .felem-header__inner {

        margin-top:
            5px;

        max-width:
            98%;

        padding:
            5px 20px !important;
    }


    /* --------------------------------------------------------
       Header — Prevent accidental width expansion
       -------------------------------------------------------- */

    .felem-header,
    .felem-header__inner,
    .felem-header__brand,
    .felem-header__navigation,
    .felem-header__actions {

        box-sizing:
            border-box;

        min-width:
            0;
    }


    /* --------------------------------------------------------
       Hover Lift — Touch devices
       -------------------------------------------------------- */

    .u-hover-lift:hover {

        transform:
            none !important;
    }
}/* End custom CSS */