:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-27a436e *//* ==========================================
   GOOGLE FONT
========================================== */

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

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

:root{

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

    --orange:#f59e0b;
    --success:#10b981;

    --dark:#0f172a;
    --text:#475569;
    --border:#e2e8f0;

    --bg:#f8fafc;
}

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

.titulacion-page{

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

    background:var(--bg);

    color:var(--dark);

    padding:0;
}

.titulacion-page *{

    box-sizing:border-box;
}

section{

    position:relative;
}

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

.hero-titulacion{

    max-width:1100px;

    margin:auto;

    padding:45px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    background:#dbeafe;

    color:var(--primary);

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;
}

.hero-content{

    flex:1;
}

.hero-content h1{

    margin:15px 0;

    font-size:clamp(2rem,4vw,3.2rem);

    font-weight:800;

    line-height:1.1;
}

.hero-content p{

    color:#64748b;

    max-width:600px;

    line-height:1.8;

    font-size:15px;
}

.hero-btn{

    display:inline-block;

    margin-top:20px;

    padding:12px 24px;

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

    color:white;

    text-decoration:none;

    border-radius:12px;

    font-weight:600;

    transition:.3s;
}

.hero-btn:hover{

    transform:translateY(-3px);

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

.hero-icon{

    width:110px;

    height:110px;

    min-width:110px;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:white;

    font-size:42px;

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

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

.section-title{

    text-align:center;

    margin-bottom:35px;
}

.section-title span{

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;
}

.section-title h2{

    margin-top:10px;

    font-size:2rem;

    font-weight:800;
}

/* ==========================================
   MODALIDADES
========================================== */

.modalidades-section{

    max-width:1100px;

    margin:auto;

    padding:20px;
}

.modalidades-grid{

    display:grid;

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

    gap:20px;
}

.modalidad-card{

    background:white;

    padding:28px;

    border-radius:20px;

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

    transition:.3s;

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

.modalidad-card:hover{

    transform:translateY(-5px);

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

.modalidad-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:white;

    font-size:24px;

    margin-bottom:18px;
}

.modalidad-icon.orange{

    background:
    linear-gradient(
    135deg,
    #f59e0b,
    #ea580c);
}

.modalidad-card h3{

    margin-bottom:12px;

    font-size:20px;
}

.modalidad-card p{

    color:#64748b;

    line-height:1.8;
}

/* ==========================================
   REQUISITOS
========================================== */

.requisitos-section{

    max-width:1100px;

    margin:auto;

    padding:50px 20px;
}

.requisitos-grid{

    display:grid;

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

    gap:20px;
}

.requisito-card{

    background:white;

    border-radius:20px;

    padding:25px;

    text-align:center;

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

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

    transition:.3s;

    position:relative;
}

.requisito-card:hover{

    transform:translateY(-5px);
}

.num{

    position:absolute;

    top:15px;
    right:15px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;
}

.requisito-card i{

    font-size:36px;

    color:var(--primary);

    margin-bottom:15px;
}

.requisito-card h3{

    margin-bottom:10px;

    font-size:18px;
}

.requisito-card p{

    color:#64748b;

    font-size:14px;

    line-height:1.7;
}

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

.proceso-section{

    max-width:900px;

    margin:auto;

    padding:30px 20px 60px;
}

.timeline{

    background:white;

    padding:30px;

    border-radius:24px;

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

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

.step{

    display:flex;

    gap:18px;

    position:relative;

    padding-bottom:20px;
}

.step:last-child{

    padding-bottom:0;
}

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

    content:"";

    position:absolute;

    left:17px;

    top:38px;

    width:2px;

    height:100%;

    background:#dbeafe;
}

.step-number{

    width:36px;

    height:36px;

    min-width:36px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    z-index:2;
}

.step-number.success{

    background:var(--success);
}

.step-content h4{

    margin:0 0 5px;
}

.step-content p{

    margin:0;

    color:#64748b;

    font-size:14px;
}

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

.hero-final{

    max-width:1100px;

    margin:0 auto 60px;

    padding:50px 30px;

    border-radius:30px;

    text-align:center;

    color:white;

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

.hero-final-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:20px;
}

.hero-final h2{

    font-size:2rem;

    margin-bottom:15px;
}

.hero-final p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    opacity:.95;
}

.hero-final a{

    display:inline-block;

    margin-top:22px;

    padding:12px 24px;

    background:white;

    color:var(--primary);

    text-decoration:none;

    border-radius:12px;

    font-weight:700;
}

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

@media(max-width:768px){

    .hero-titulacion{

        flex-direction:column;

        text-align:center;

        padding:35px 20px;
    }

    .hero-content p{

        margin:auto;
    }

    .hero-icon{

        width:90px;
        height:90px;

        font-size:34px;
    }

    .section-title h2{

        font-size:1.7rem;
    }

    .hero-final{

        margin:0 15px 40px;

        padding:35px 20px;
    }

    .timeline{

        padding:20px;
    }
}/* End custom CSS */