/* CONFIGURACIÓN GENERAL */
* {
    box-sizing: border-box;
}

body {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ENCABEZADO */
.cabecera {
    display: flex;
    justify-content: center;
    background: #2A2F63;
}

/* NAVEGACIÓN PRINCIPAL */
.navegacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    background-color: #EAF2F8;
    padding: 10px;
}

/* ENLACES PRINCIPALES: GUSTOS Y FOTOS */
.navegacion > a {
    display: block;
    padding: 10px;
    color: #12163A;
    text-decoration: none;
}

.navegacion > a:hover {
    background-color: #D5E3F0;
    border-radius: 5px;
}

/* CUERPO PRINCIPAL */
.cuerpo {
    display: flex;
    align-items: stretch;
    flex: 1;
}

/* SECCIÓN IZQUIERDA */
.seccion-izquierda {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    gap: 20px;
}

.seccion-izquierda img {
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    height: auto;
}

/* SECCIÓN DERECHA */
.seccion-derecha {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 60%;
}

article {
    background: #EAF2F8;
    width: 75%;
    padding: 10px;
}

/* TÍTULOS */
h1 {
    color: #F4F1EC;
}

.h1-cuerpo {
    color: #2A2F63;
}

/* PIE DE PÁGINA */
.pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 15%;
    background: #2A2F63;
    color: #EAF2F8;
}

.pie-contedor {
    display: flex;
    justify-content: center;
    gap: 25%;
    width: 80%;
}

.pie-izquierdo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 30%;
}

.pie-derecho {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.iconos-redes {
    width: 40px;
    height: 40px;
}

/* PÁRRAFOS */
p {
    font-size: 20px;
    line-height: 25px;
}

/* MENÚ DESPLEGABLE DE PRÁCTICAS */
.menu-desplegable {
    position: relative;
}

/* BOTÓN PRÁCTICAS */
.btn-menu {
    display: block;
    padding: 10px;
    color: #12163A;
    text-decoration: none;
    cursor: pointer;
}

.btn-menu:hover {
    background-color: #D5E3F0;
    border-radius: 5px;
}

/* CONTENEDOR DE OPCIONES */
.contenido-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background-color: #EAF2F8;
    border-top: 3px solid #2A2F63;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(42, 47, 99, 0.2);
    z-index: 1000;
}

/* ENLACES DEL MENÚ DESPLEGABLE */
.contenido-menu a {
    display: block;
    padding: 12px 16px;
    color: #12163A;
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;
}

/* EFECTO HOVER DE LAS PRÁCTICAS */
.contenido-menu a:hover {
    background-color: #2A2F63;
    color: #F4F1EC;
}

/* MOSTRAR EL MENÚ DESPLEGABLE */
.menu-desplegable:hover .contenido-menu,
.menu-desplegable:focus-within .contenido-menu {
    display: block;
}