.elementor-6687 .elementor-element.elementor-element-6a6610f6{--display:flex;--min-height:30vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--overlay-opacity:0.97;border-style:double;--border-style:double;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-radius:0px 0px 0px 0px;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--padding-top:0vw;--padding-bottom:0vw;--padding-left:6vw;--padding-right:6vw;}.elementor-6687 .elementor-element.elementor-element-6a6610f6:not(.elementor-motion-effects-element-type-background), .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAFAFC;}.elementor-6687 .elementor-element.elementor-element-6a6610f6::before, .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .elementor-background-video-container::before, .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .e-con-inner > .elementor-background-video-container::before, .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .elementor-background-slideshow::before, .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6687 .elementor-element.elementor-element-6a6610f6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-6687 .elementor-element.elementor-element-6a6610f6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6687 .elementor-element.elementor-element-38248d20{--display:flex;--justify-content:flex-start;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0vw;--padding-bottom:0vw;--padding-left:5vw;--padding-right:5vw;}.elementor-6687 .elementor-element.elementor-element-38248d20.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-6687 .elementor-element.elementor-element-2e2e89ef{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + -3rem) 0rem;padding:0px 0px 0px 0px;font-family:"Poppins", Sans-serif;font-size:30px;font-weight:700;color:var( --e-global-color-astglobalcolor0 );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6687 .elementor-element.elementor-element-65145cc6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6687 .elementor-element.elementor-element-65145cc6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:50px;font-weight:600;color:var( --e-global-color-accent );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-6687 .elementor-element.elementor-element-1e5820b2{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:3px;}.elementor-6687 .elementor-element.elementor-element-1e5820b2 .elementor-divider-separator{width:8%;}.elementor-6687 .elementor-element.elementor-element-1e5820b2 .elementor-divider{padding-block-start:10px;padding-block-end:10px;}.elementor-6687 .elementor-element.elementor-element-6f98815f{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0vw;--padding-bottom:0vw;--padding-left:5vw;--padding-right:5vw;}.elementor-6687 .elementor-element.elementor-element-6f98815f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6687 .elementor-element.elementor-element-6dd0b962 img{width:100%;height:280px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-6687 .elementor-element.elementor-element-6a6610f6{--min-height:30vh;--justify-content:flex-start;--padding-top:0vw;--padding-bottom:0vw;--padding-left:5vw;--padding-right:5vw;}.elementor-6687 .elementor-element.elementor-element-38248d20{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-6687 .elementor-element.elementor-element-2e2e89ef{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:15px;}.elementor-6687 .elementor-element.elementor-element-65145cc6{margin:-2rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-6687 .elementor-element.elementor-element-65145cc6 .elementor-heading-title{font-size:30px;}.elementor-6687 .elementor-element.elementor-element-6f98815f{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-6687 .elementor-element.elementor-element-6dd0b962 img{width:100%;height:180px;}}@media(max-width:767px){.elementor-6687 .elementor-element.elementor-element-6a6610f6{--min-height:32vh;--gap:1px 1px;--row-gap:1px;--column-gap:1px;}.elementor-6687 .elementor-element.elementor-element-38248d20{--width:100%;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:1px 1px;--row-gap:1px;--column-gap:1px;}.elementor-6687 .elementor-element.elementor-element-38248d20.e-con{--align-self:center;}.elementor-6687 .elementor-element.elementor-element-2e2e89ef{text-align:start;font-size:12px;}.elementor-6687 .elementor-element.elementor-element-65145cc6{margin:-1rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-6687 .elementor-element.elementor-element-65145cc6 .elementor-heading-title{font-size:25px;}.elementor-6687 .elementor-element.elementor-element-1e5820b2 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-6687 .elementor-element.elementor-element-1e5820b2 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-6687 .elementor-element.elementor-element-6f98815f{--width:100%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:1px 1px;--row-gap:1px;--column-gap:1px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-6687 .elementor-element.elementor-element-6dd0b962 img{height:200px;}}@media(min-width:768px){.elementor-6687 .elementor-element.elementor-element-6a6610f6{--width:100%;}.elementor-6687 .elementor-element.elementor-element-38248d20{--width:55%;}.elementor-6687 .elementor-element.elementor-element-6f98815f{--width:40%;}}@media(max-width:1024px) and (min-width:768px){.elementor-6687 .elementor-element.elementor-element-38248d20{--width:56%;}.elementor-6687 .elementor-element.elementor-element-6f98815f{--width:56%;}}/* Start custom CSS for html, class: .elementor-element-9e6c29a *//* ==========================================
   GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --warning:#f59e0b;
    --warning-dark:#d97706;

    --purple:#7c3aed;
    --purple-dark:#6d28d9;

    --success:#10b981;

    --dark:#0f172a;
    --text:#475569;
    --muted:#64748b;

    --border:#e2e8f0;

    --bg:#f8fafc;

}

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

.matricula-page{

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

    background:var(--bg);

    color:var(--dark);

    padding:0;

    margin:0;

}

.matricula-page *{

    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

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

.hero-matricula{

    max-width:1200px;

    margin:auto;

    padding:35px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

.hero-content{

    flex:1;
}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:6px 14px;

    background:#dbeafe;

    color:var(--primary);

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;
}

.hero-content h1{

    font-size:clamp(1.9rem,3vw,3rem);

    line-height:1.1;

    margin:15px 0;

    font-weight:800;
}

.hero-content p{

    color:var(--muted);

    font-size:15px;

    line-height:1.8;

    max-width:550px;
}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:12px 24px;

    text-decoration:none;

    border-radius:12px;

    color:white;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

    font-size:14px;

    font-weight:600;

    transition:.3s ease;
}

.hero-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 20px rgba(37,99,235,.20);
}

.hero-image{

    width:95px;

    height:95px;

    min-width:95px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:34px;

    box-shadow:
    0 12px 25px rgba(37,99,235,.20);
}

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

.matriculas-container{

    max-width:1200px;

    margin:auto;

    padding:10px 20px 40px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:20px;
}
/* ==========================================
   TARJETAS DE MATRÍCULA
========================================== */

.matricula-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    box-shadow:
    0 10px 25px rgba(15,23,42,.05);

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

    position:relative;
}

.matricula-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:
    0 20px 40px rgba(15,23,42,.10);
}

/* ==========================================
   EFECTO SUPERIOR
========================================== */

.matricula-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    #60a5fa);
}

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

.card-header{

    position:relative;

    padding:22px 20px;

    color:#fff;
}

.card-header i{

    font-size:28px;

    margin-bottom:10px;

    display:block;
}

.card-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;
}

.card-header small{

    display:block;

    margin-top:8px;

    opacity:.9;

    font-size:12px;
}

/* ==========================================
   BADGE
========================================== */

.card-badge{

    position:absolute;

    top:15px;
    right:15px;

    padding:6px 12px;

    border-radius:50px;

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

    backdrop-filter:blur(8px);

    font-size:10px;

    font-weight:700;

    letter-spacing:.5px;
}

/* ==========================================
   COLORES
========================================== */

.regular{

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));
}

.extemporanea{

    background:
    linear-gradient(
    135deg,
    var(--warning),
    var(--warning-dark));
}

.repitencia{

    background:
    linear-gradient(
    135deg,
    var(--purple),
    var(--purple-dark));
}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    padding:20px;
}

.step{

    display:flex;

    gap:14px;

    position:relative;

    margin-bottom:16px;
}

.step:last-child{

    margin-bottom:0;
}

/* ==========================================
   LINEA CONECTORA
========================================== */

.step:not(:last-child)::after{

    content:"";

    position:absolute;

    left:13px;

    top:30px;

    width:2px;

    height:calc(100% + 8px);

    background:#e2e8f0;
}

/* ==========================================
   NUMEROS
========================================== */

.step-number{

    width:28px;

    height:28px;

    min-width:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:13px;

    font-weight:700;

    z-index:2;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));
}

.success{

    background:
    linear-gradient(
    135deg,
    #10b981,
    #059669);
}

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

.content{

    color:var(--text);

    font-size:14px;

    line-height:1.7;
}

/* ==========================================
   EFECTO HOVER PASOS
========================================== */

.step:hover .step-number{

    transform:scale(1.08);

    transition:.25s ease;
}

.step:hover .content{

    color:var(--dark);
}
/* ==========================================
   INFO GRID
========================================== */

.info-grid{

    max-width:1200px;

    margin:auto;

    padding:0 20px 50px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

/* ==========================================
   INFO CARD
========================================== */

.info-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

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

    box-shadow:
    0 10px 25px rgba(15,23,42,.05);

    transition:.3s ease;

    position:relative;

    overflow:hidden;
}

.info-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 35px rgba(15,23,42,.10);
}

/* ==========================================
   LINEAS SUPERIORES
========================================== */

.info-card:nth-child(1){

    border-top:4px solid #2563eb;
}

.info-card:nth-child(2){

    border-top:4px solid #10b981;
}

.info-card:nth-child(3){

    border-top:4px solid #f59e0b;
}

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

.info-card i{

    font-size:32px;

    margin-bottom:15px;

    display:block;
}

.info-card:nth-child(1) i{

    color:#2563eb;
}

.info-card:nth-child(2) i{

    color:#10b981;
}

.info-card:nth-child(3) i{

    color:#f59e0b;
}

/* ==========================================
   TITULOS
========================================== */

.info-card h3{

    margin:0 0 15px;

    font-size:20px;

    font-weight:700;

    color:var(--dark);
}

/* ==========================================
   LISTAS
========================================== */

.info-card ul{

    list-style:none;

    margin:0;
    padding:0;
}

.info-card li{

    position:relative;

    padding-left:22px;

    margin-bottom:10px;

    color:var(--muted);

    font-size:14px;

    line-height:1.7;
}

.info-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#10b981;

    font-weight:700;
}

/* ==========================================
   TEXTO
========================================== */

.info-card p{

    color:var(--muted);

    font-size:14px;

    line-height:1.8;
}

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

.info-card a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:18px;

    padding:10px 18px;

    border-radius:10px;

    text-decoration:none;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

    font-size:13px;

    font-weight:600;

    transition:.3s;
}

.info-card a:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 20px rgba(37,99,235,.20);
}

/* ==========================================
   ESTADISTICAS
========================================== */

.stats-section{

    max-width:1000px;

    margin:auto;

    padding:0 20px 60px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;
}

.stat-card{

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

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

    border-radius:20px;

    padding:25px;

    text-align:center;

    transition:.3s ease;

    box-shadow:
    0 10px 25px rgba(15,23,42,.04);
}

.stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 35px rgba(15,23,42,.08);
}

.stat-card h2{

    margin:0;

    font-size:36px;

    font-weight:800;

    color:var(--primary);
}

.stat-card span{

    display:block;

    margin-top:8px;

    color:var(--muted);

    font-size:14px;

    font-weight:600;
}

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

.hero-final{

    max-width:1200px;

    margin:0 auto 60px;

    padding:45px 30px;

    border-radius:28px;

    text-align:center;

    color:white;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #1e3a8a,
    #2563eb);
}

/* ==========================================
   EFECTOS FONDO
========================================== */

.hero-final::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

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

    top:-100px;
    right:-100px;
}

.hero-final::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

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

    bottom:-80px;
    left:-80px;
}

/* ==========================================
   ICONO HERO FINAL
========================================== */

.hero-final-icon{

    width:75px;
    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;
}

/* ==========================================
   TITULO
========================================== */

.hero-final h2{

    margin-bottom:15px;

    font-size:clamp(
    1.6rem,
    3vw,
    2.5rem);

    font-weight:800;
}

/* ==========================================
   TEXTO
========================================== */

.hero-final p{

    max-width:750px;

    margin:auto;

    line-height:1.8;

    font-size:15px;

    opacity:.95;
}

/* ==========================================
   BOTON
========================================== */

.hero-final a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:25px;

    padding:12px 24px;

    border-radius:12px;

    background:white;

    color:var(--primary);

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s ease;
}

.hero-final a:hover{

    transform:translateY(-3px);

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

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

@media(max-width:992px){

    .hero-matricula{

        flex-direction:column;

        text-align:center;
    }

    .hero-content p{

        margin:auto;
    }

    .hero-image{

        width:85px;
        height:85px;

        font-size:30px;
    }
}

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

@media(max-width:768px){

    .hero-matricula{

        padding:25px 15px;
    }

    .matriculas-container,
    .info-grid,
    .stats-section{

        padding-left:15px;
        padding-right:15px;
    }

    .hero-final{

        margin:0 15px 40px;

        padding:35px 20px;
    }

    .card-header h3{

        font-size:18px;
    }

    .hero-content h1{

        font-size:2rem;
    }

    .stat-card h2{

        font-size:30px;
    }
}

/* ==========================================
   ANIMACION SUAVE
========================================== */

.matricula-card,
.info-card,
.stat-card{

    animation:fadeUp .5s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(20px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}/* End custom CSS */