/*--ESTILOS--*/
.page-image {
    object-position: center;
    
}

.display-image {
    border-radius: 50%;
}

.page-title {
    font-size: 18px;
    font-weight: 700;
}

.page-bioline {
    font-size: 16px;
    font-weight: 600;
}

.page-item-title {
    font-size: 16px;
    font-weight: 700;
}

.page-item-each {
    color: #1F365C;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    border-radius: 8px;
    min-height: 60px;
    padding: 8px 16px; /* Reducir padding si es necesario */
    white-space: nowrap; /* Evita que el texto se divida en dos líneas */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    text-align: center;
     /* Ajusta el ancho automáticamente */
    max-width: 100%; /* Asegúrate de que no se desborde en pantallas pequeñas */
}

.page-item-each i {
    margin-right: 10px; /* Añade espacio entre el icono y el texto */
}

@media (max-width: 480px) {
    .page-item-each {
        font-size: 12px;  /* Reduce el tamaño de fuente en móviles */
        min-height: 40px;  /* Reduce la altura del botón */
        padding: 4px 4px;  /* Reduce el padding izquierdo y derecho para ajustar el espacio */
        display: flex; /* Asegura el diseño en línea */
        align-items: center; /* Centra verticalmente ícono y texto */
        gap: 8px; /* Reduce el espacio entre el ícono y el texto */
        flex-wrap: wrap;
        max-width: 100%; /* Evita que exceda el ancho de la pantalla */
        white-space: normal; /* Permite que el texto haga un salto de línea */
    }

    .fa-2xl {
        font-size: 1.5em;  /* Ajusta el tamaño de los íconos en móviles */
    }

    .page-social i {
        font-size: 1.5em;  /* Reduce el tamaño de los íconos en pantallas pequeñas */
    }
}


.page-item-wrap {
                    margin: 16px 0;
            }

.page-item-wrap:last-child {
    margin-bottom: 0;
}

            .page-item-wrap:hover {
        transform: translate3d(0px, 0px, 0px) scale(1.015);
    }

    .page-item-wrap{
    
    }

.page-item {
    border: 0px solid #FFFFFF;
    background: #FFFFFF ;
    border-radius: 8px;
    box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1), inset 0px 0px 2px 1px rgba(24, 39, 75, 0.05);
}


.embed-wrap iframe, .embed-wrap-inside {
                    border-radius: 8px;
            }

.link-each-image, .page-item-wrap {
    border-radius: 8px;
}

.page-text-font {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    
}

.page-text-color {
    color: #1F365C;
}

.social-icon-fill path, .social-icon-fill circle, .social-icon-fill rect {
    fill: #1F365C;
}

.page-overlay-btn {
    border: 2px solid #1F365C;
}

/*--ESTILOS MODAL--*/

/* Centrar el contenido del modal */
.modal-content {
    background-color: #fceac6;
    margin: 5% auto;  /* Ajustar la posición vertical del modal */
    padding: 20px;
    border-radius: 10px;
    width: 80%; /* Aumentar el tamaño del modal en pantallas más grandes */
    max-width: 600px; /* Fijar un ancho máximo para que no se extienda demasiado en pantallas grandes */
    text-align: center;
}

/* Imagen dentro del modal centrada y ajustada */
.modal-image {
    width: 70%; /* Aumentar el tamaño de la imagen */
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .modal-content {
        width: 90%; /* Aumentar el tamaño del modal en pantallas móviles */
    }

    .modal-image {
        width: 80%; /* Aumentar el tamaño de la imagen en pantallas móviles */
    }
}

/* Estilo para el botón de cierre */
.modal-close-btn {
    background-color: #333; /* Color del botón */
    color: white;
    border: none;
    padding: 8px 16px;  /* Reducir el padding para que el botón sea más pequeño */
    font-size: 14px;  /* Reducir el tamaño del texto */
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px; /* Separar el botón de la imagen */
    width: auto; /* Elimina cualquier tamaño fijo de ancho */
}

.modal-close-btn:hover {
    background-color: #555; /* Cambiar color al pasar el cursor */
}

.no-margin-bottom {
    margin-bottom: 0; /* Elimina el margen inferior del primer párrafo */
}

/*--LANGUAGE--*/

/* Estilos para el hipervínculo en la esquina superior derecha */
.language-switch {
    position: absolute;
    right: 10px;  /* Ajusta la distancia desde la parte derecha */
    font-size: 14px;  /* Tamaño de texto */
    font-family: 'Inter', sans-serif;
}

.language-switch a {
    color: #fceac6;  /* Color del texto */
    text-decoration: none;
    display: flex;
    align-items: center;
}

.language-switch a:hover {
    text-decoration: underline;  /* Subraya el texto al pasar el cursor */
}

.flag-icon {
    width: 20px;  /* Tamaño del ícono de la bandera */
    height: 20px;
    border-radius: 50%;  /* Hace que la imagen tenga forma circular */
    margin-left: 8px;  /* Añade espacio entre el texto y la bandera */
}

@media (max-width: 480px) {
    .imagen {
        margin-top: 20px;  /* Mantén el margen inferior para el resto del contenido */
    }

    .flag-icon {
        width: 20px;  /* Tamaño del ícono de la bandera */
        height: 20px;
        border-radius: 50%;  /* Hace que la imagen tenga forma circular */
        margin-left: 8px;  /* Añade espacio entre el texto y la bandera */
    }

    .language-switch a {
        font-size: 12px;  /* Ajustar el tamaño del texto en móviles si es necesario */
    }
}

/*--FOOTER--*/

.site-footer {
    background-color: #253245;
    color: #fceac6;
    text-align: center;
    padding: 5px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.site-footer p {
    margin: 0;
    font-size: 14px;
}