/* Cargar la fuente personalizada */
@font-face {
    font-family: fuente1;
    src: url(fuentes/DancingScript-VariableFont_wght.ttf); /* Asegúrate de que la ruta sea correcta */
}

@font-face {
    font-family: fuente2;
    src: url(fuentes/Candal-Regular.ttf); /* Asegúrate de que la ruta sea correcta */
}

/* Aplicar la fuente personalizada globalmente */
body {
    margin: 0;
    font-family: fuente1; /* Usa la fuente personalizada como primera opción */
    background-color: #137ed4; /* Fondo general */
}

nav {
    font-family: fuente2;
    background-color: #2a2c2d;
}

/* Barra superior */
.barra-superior {
    background-color: #ddedfa; /* Color celeste */
    display: flex;
    align-items: center;
    padding: 10px;
    color: rgb(24, 165, 216); /* Color del texto */
}

.barra-superior img {
    height: 70px; /* Tamaño del logo */
    margin-right: 30px; /* Espacio entre el logo y el texto */
}

.barra-superior span {
    font-size: 40px; /* Tamaño del texto */
}

/* Encabezado y navegación */
header {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

nav a:hover {
    text-decoration: underline;
}

/* Contenedor principal para las imágenes laterales */
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}



.image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Imagen central en la parte inferior */
.image-center {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #137ed4; /* Fondo oscuro para resaltar la barra */
    position: relative;
    top: 20px; /* Se coloca ligeramente hacia abajo */
}

.image-center img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}