*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Montserrat',sans-serif;

    background:#f5f5f5;

    color:#333;

    line-height:1.6;

}

.hero{

    background:linear-gradient(rgba(247,148,29,.82),
    rgba(221,131,15,.82)),
    url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1800");;

    background-size:cover;

    background-position:center;

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

}

.overlay{

    width:90%;
    max-width:900px;

}

.logo{

    width:120px;

    margin-bottom:30px;

}

.hero h1{

    font-size:52px;

    margin-bottom:20px;

}

.hero p{

    font-size:22px;

    margin-bottom:35px;

}

.boton{

    background:#00468C;

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;

}

.boton:hover{

    background:#00366B;

}

section{

    max-width:1200px;

    margin:auto;

    padding:70px 30px;

}

section h2{

    text-align:center;

    color:#00468C;

    margin-bottom:40px;

}

.introduccion{

    text-align:center;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}

.card{

    background:white;

    border-radius:12px;

    padding:30px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.card h3{

    color:#00468C;

    margin-bottom:15px;

}

.card p{

    margin-bottom:20px;

}

.card a{

    display:inline-block;

    background:#00468C;

    color:white;

    text-decoration:none;

    padding:10px 20px;

    border-radius:6px;

}

footer{

    background:#F7941D;

    color:white;

    text-align:center;

    padding:30px;

}

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.logo{

width:120px;

}

}/* ==========================
   MODAL
========================== */

.modal{

    display:none;

    position:fixed;

    z-index:999;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);

}


.modal-contenido{

    background:white;

    width:90%;

    max-width:550px;

    margin:60px auto;

    border-radius:14px;

    padding:35px;

    animation:aparecer .3s ease;

}


@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.cerrar{

    float:right;

    font-size:34px;

    cursor:pointer;

    color:#888;

}


.cerrar:hover{

    color:#F7941D;

}


.modal h2{

    color:#00468C;

    margin-bottom:10px;

}


.subtitulo{

    margin-bottom:25px;

    color:#666;

}


.modal label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}


.modal input,

.modal textarea{

    width:100%;

    padding:14px;

    margin-bottom:20px;

    border:1px solid #d8d8d8;

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

}


.modal textarea{

    resize:vertical;

}


.botonFormulario{

    width:100%;

    padding:15px;

    background:#00468C;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    transition:.3s;

}


.botonFormulario:hover{

    background:#00366B;

}
/* ======================================
   NUEVAS TARJETAS
====================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

}


.card{

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.10);

    transition:.35s;

    min-height:250px;

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.20);

}


.contenido-card{

    position:relative;

    z-index:5;

    padding:28px;

}


.card h3{

    color:#00468C;

    margin-bottom:15px;

}


.card p{

    color:#555;

    line-height:1.5;

    margin-bottom:25px;

}


.card button{

    width:100%;

    position:relative;

    z-index:10;

}


.card::before{

    content:"";

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    transform:scale(1);

    transition:.5s;

    opacity:0;

    z-index:0;

    pointer-events:none;

}


.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(247,148,29,.45);

    opacity:0;

    transition:.45s;

    z-index:1;

    pointer-events:none;

}


.card:hover::before,

.card:hover::after{

    opacity:1;

}


.card:hover h3,

.card:hover p{

    color:white;

}

/*======================================
    IMÁGENES DE LAS TARJETAS
======================================*/

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    transform:scale(1);

    transition:.5s;

    opacity:0;

}

.card:hover::before{

    opacity:1;

    transform:scale(1.08);

}

.card:hover::after{

    opacity:1;

}

.card:hover h3,
.card:hover p{

    color:white;

}

.card:hover button{

    background:white;

    color:#00468C;

    border:none;

}

/*======================================
IMÁGENES MAESTRÍAS
======================================*/

/* 1 */
#maestrias .card:nth-child(1)::before{
background-image:url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a");
}

/* 2 */
#maestrias .card:nth-child(2)::before{
background-image:url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f");
}

/* 3 */
#maestrias .card:nth-child(3)::before{
background-image:url("https://images.unsplash.com/photo-1554224155-6726b3ff858f");
}

/* 4 */
#maestrias .card:nth-child(4)::before{
background-image:url("https://images.unsplash.com/photo-1554224154-26032ffc0d07");
}

/* 5 */
#maestrias .card:nth-child(5)::before{
background-image:url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3");
}

/* 6 */
#maestrias .card:nth-child(6)::before{
background-image:url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f");
}

/* 7 */
#maestrias .card:nth-child(7)::before{
background-image:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85");
}

/* 8 */
#maestrias .card:nth-child(8)::before{
background-image:url("https://images.unsplash.com/photo-1513258496099-48168024aec0");
}

/* 9 */
#maestrias .card:nth-child(9)::before{
background-image:url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d");
}

/* 10 */
#maestrias .card:nth-child(10)::before{
background-image:url("https://images.unsplash.com/photo-1517048676732-d65bc937f952");
}

/* 11 */
#maestrias .card:nth-child(11)::before{
background-image:url("https://images.unsplash.com/photo-1521791136064-7986c2920216");
}

/* 12 */
#maestrias .card:nth-child(12)::before{
background-image:url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f");
}

/* 13 */
#maestrias .card:nth-child(13)::before{
background-image:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85");
}

/*======================================
DOCTORADOS
======================================*/

#doctorados .card:nth-child(1)::before{
background-image:url("https://images.unsplash.com/photo-1523240795612-9a054b0db644");
}

#doctorados .card:nth-child(2)::before{
background-image:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40");
}

/* ========================================
   FRANJAS DE INFORMACIÓN
   ======================================== */

.franja-duracion,
.franja-convenio {
    width: 100%;
    box-sizing: border-box;

    background-color: #f58220;
    color: white;

    text-align: center;

    padding: 12px 20px;
    margin: 30px 0 25px;

    border-radius: 8px;

    font-weight: bold;
    font-size: 1rem;

    display: block;
}


/* Separación especial para la sección
   de maestrías con convenio */

.franja-convenio {
    margin-top: 55px;
}

/* ============================= */
/* BOTONES DE ACCESO RÁPIDO */
/* ============================= */

.botones-posgrados {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.boton-posgrado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 210px;
    min-height: 70px;

    padding: 12px 18px;

    background-color: #00549a;
    color: white;

    text-decoration: none;
    text-align: center;

    border-radius: 8px;

    font-weight: 700;
    font-size: 16px;

    transition: 0.3s ease;
}

.boton-posgrado span {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
}

.boton-posgrado:hover {
    background-color: #003f73;
    transform: translateY(-3px);
}
/* AJUSTE DE ESPACIO ENTRE LA INTRODUCCIÓN Y MAESTRÍAS */

.introduccion {
    padding-bottom: 20px;
    margin-bottom: 0;
    min-height: 0;
}

#maestrias {
    margin-top: 0;
    padding-top: 10px;
}

#maestrias > h2 {
    margin-top: 0;
    margin-bottom: 25px;
}
