/* ===================================
   CONFIGURACIÓN GENERAL
=================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --color-principal: #168ae8;
    --color-secundario: #0d9488;
    --color-acento: #f59e0b;

    --color-texto: #263238;
    --color-gris: #607d8b;
    --color-fondo: #f7fafb;

    --blanco: #ffffff;

    --ancho-contenedor: 1200px;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--color-texto);

    background: var(--blanco);

    line-height: 1.6;
}


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

.contenedor {

    width: min(
        92%,
        var(--ancho-contenedor)
    );

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

}


/* ===================================
   ENCABEZADO
=================================== */

.encabezado {

    background: rgb(160, 223, 244);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow:
        0 2px 12px rgba(0,0,0,.08);

}


.navbar {

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: var(--color-principal);

    font-size: 20px;

    font-weight: bold;

}


.logo img {

    width: 48px;

    height: 48px;

    object-fit: contain;

}


/* ===================================
   MENÚ
=================================== */

.menu {

    display: flex;

    align-items: center;

    gap: 22px;

}


.menu a {

    text-decoration: none;

    color: var(--color-texto);

    font-size: 15px;

    font-weight: 600;

    transition: .3s;

}


.menu a:hover,
.menu a.activo {

    color: var(--color-secundario);

}


.menu-boton {

    display: none;

    border: none;

    background: transparent;

    font-size: 30px;

    cursor: pointer;

}


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

.seccion {

    padding: 70px 0;

}


.titulo-pagina {

    text-align: center;

    font-size: 42px;

    color: var(--color-principal);

    margin-bottom: 35px;

}


.titulo-seccion {

    text-align: center;

    color: var(--color-principal);

    font-size: 30px;

    margin-top: 60px;

    margin-bottom: 30px;

}


.texto-centro {

    max-width: 800px;

    margin: 0 auto 30px;

    text-align: center;

    color: var(--color-gris);

}


/* ===================================
   INICIO 2 x 2
=================================== */

.texto-inicio {

    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;

}


.texto-inicio h1 {

    color: var(--color-principal);

    font-size: 45px;

    margin-bottom: 20px;

}


.texto-inicio p {

    color: var(--color-gris);

    font-size: 18px;

}


.galeria-inicio {

    display: grid;

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

    gap: 20px;

}


.imagen-celda {

    overflow: hidden;

    border-radius: 12px;

    aspect-ratio: 16 / 10;

}


.imagen-celda img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .4s;

}


.imagen-celda:hover img {

    transform: scale(1.04);

}


/* ===================================
   NOSOTROS / CONTACTO
=================================== */

.imagenes-verticales {

    display: flex;

    flex-direction: column;

    gap: 30px;

}


.imagen-grande {

    width: 100%;

    border-radius: 14px;

    overflow: hidden;

}


.imagen-grande img {

    width: 100%;

    height: auto;

    display: block;

}


/* ===================================
   PROGRAMAS 3 x 3
=================================== */

.galeria-programas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.programa {
    border-radius: 10px;
    background: #eee;
    border: 1px solid #ddd;

    /* Altura del cuadro */
    height: 250px;

    /* Centrar la imagen */
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;

    overflow: hidden;
}

.programa a {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.programa img {
    width: 100%;
    height: 100%;

    /* IMPORTANTE: muestra la imagen completa */
    object-fit: contain;

    display: block;

    transition: transform .3s;
}

.programa:hover img {
    transform: scale(1.03);
}


/* ===================================
   AULA VIRTUAL
=================================== */

.contenido-centrado {

    text-align: center;

    max-width: 800px;

}


.contenido-centrado h1 {

    color: var(--color-principal);

    font-size: 42px;

    margin-bottom: 20px;

}


.contenido-centrado p {

    color: var(--color-gris);

    margin-bottom: 30px;

}


/* ===================================
   BOTONES
=================================== */

.boton-principal {

    display: inline-block;

    padding: 14px 28px;

    background:
        var(--color-secundario);

    color: white;

    text-decoration: none;

    border: none;

    border-radius: 7px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;

}


.boton-principal:hover {

    background:
        var(--color-principal);

}


/* ===================================
   PDF
=================================== */

.pdf-contenedor {

    margin-bottom: 45px;

}


.pdf-contenedor h2 {

    color: var(--color-principal);

    margin-bottom: 15px;

}


.visor-pdf {

    width: 100%;

    height: 700px;

    border: 1px solid #ddd;

    border-radius: 8px;

}


/* ===================================
   DIPLOMAS
=================================== */

.diploma-intro {

    text-align: center;

    max-width: 800px;

    margin: auto;

}


.diploma-intro h1 {

    color: var(--color-principal);

    font-size: 40px;

}


.diploma-intro p {

    color: var(--color-gris);

    margin-top: 15px;

}


.formulario-diploma {

    max-width: 500px;

    margin: 40px auto;

    padding: 35px;

    background: var(--color-fondo);

    border-radius: 12px;

}


.formulario-diploma form {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.formulario-diploma label {

    font-weight: bold;

}


.formulario-diploma input {

    padding: 14px;

    border: 1px solid #ccc;

    border-radius: 6px;

    font-size: 16px;

}


.formulario-diploma button {

    margin-top: 10px;

}


/* ===================================
   PIE DE PÁGINA
=================================== */

.pie {

    background:
        var(--color-principal);

    color: white;

    margin-top: 50px;

}


.pie-contenido {

    padding: 50px 0;

    display: grid;

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

    gap: 40px;

}


.pie h3 {

    margin-bottom: 12px;

}


.pie p {

    color: #d5e2e7;

}


.copyright {

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

    text-align: center;

    padding: 20px;

}


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

@media (max-width: 900px) {

    .menu-boton {

        display: block;

    }


    .menu {

        display: none;

        position: absolute;

        top: 80px;

        left: 0;

        right: 0;

        background: white;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 15px 5%;

        box-shadow:
            0 8px 15px rgba(0,0,0,.08);

    }


    .menu.abierto {

        display: flex;

    }


    .menu a {

        padding: 13px 0;

        border-bottom:
            1px solid rgb(160, 223, 244);

    }


    .galeria-programas {

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

    }

}


/* ===================================
   TELÉFONO
=================================== */

@media (max-width: 600px) {

    .seccion {

        padding: 45px 0;

    }


    .titulo-pagina {

        font-size: 32px;

    }


    .texto-inicio h1 {

        font-size: 34px;

    }


    .galeria-inicio {

        grid-template-columns: 1fr;

    }


    .galeria-programas {

        grid-template-columns: 1fr;

    }


    .programa {

        aspect-ratio: 16 / 10;

    }


    .pie-contenido {

        grid-template-columns: 1fr;

    }


    .visor-pdf {

        height: 550px;

    }


    .contenido-centrado h1 {

        font-size: 32px;

    }

}