:root {
    /* Para los fondos */
    --primary-color: #ffffff;
    --secondary-color: #3d348b;
    --tertiary-color: #8600a7;

    /* Para los textos */
    --primary-color-text: #ffffff;
    --secondary-color-text: #8600a7;
    --tertiary-color-text: #000000;
    --quaternary-color-text: #8600a7;

    /* Para los links */
    --link-color-text: #1F461AF5;
    --link-hover-text: #ffffff;
    --link-hover-bg-text: #17cd94;
    --link-active-text: #031211F5;
    --opacity-link-text: 1;

    /* Para los fondos del footer */
    --footer-bg-color: #7886C7;
    --footer-primary-color: #ffffff;
    --footer-secondary-color: #3d348b;
    --footer-tertiary-color: #000000;

    /* Para los textos del footer */
    --footer-primary-color-text: #000000;
    --footer-secondary-color-text: #000000;
    --footer-tertiary-color-text: #000000;

    /* Para los links del footer */
    --link-footer-color-text: #000000;
    --link-footer-hover-text: #8600a7;
    --link-footer-hover-bg-text: #ffffff;
    --link-footer-active-text: #8600a7;

    /* Para los textos de los modales */
    --modal-primary-color-text: #8600a7;
    --modal-secondary-color-text: #3d348b;
    --modal-tertiary-color-text: #000000;

   /* Para los botones */
    --primary-color-button: rgba(6, 243, 38, 0.96);
    --secondary-color-button: #00000020;

    /* Degradado de imagenes */
    --overlay-color1: #0f766e40;
    --overlay-color2: #00000020;

    /* Para el color de los divisores */
    --primary-color-divider: #3d348b;
    --secondary-color-divider: #1d0b77;

    /* Para el menu responsivo */
    --bg-main-color: #ffffff !important;
}

body {
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bandera{
    margin: 5px;
    width: 35px;
    height: fit-content;
    object-position: center;
    object-fit: contain;
}

.titulo-congreso {
    text-align: center;       /* centrado */
    color: #FFD700;           /* amarillo dorado */
    font-weight: bold;        /* remarcado */
    font-size: 40px;          /* tamaño grande */
    line-height: 1.3;         /* separación entre líneas */
    text-shadow: 2px 2px 4px black; /* mejor visibilidad */
}

.custom-bg-primary {
    background-color: var(--primary-color);
}

.custom-link-text {
    color: var(--link-color-text);
}

.custom-link-text:active {
    color: var(--link-active-text);
    background-color: var(--link-bg-text);
}

.custom-link-text:hover {
    color: var(--link-hover-text);
    background-color: var(--link-hover-bg-text);
    opacity: var(--opacity-link-text);
}

.custom-link-text:focus {
    color: var(--link-active-text);
}

.custom-link-footer-text {
    color: var(--link-footer-color-text);
}

.custom-link-footer-text:active {
    color: var(--link-footer-active-text);
    background-color: var(--link-footer-bg-text);
}

.custom-link-footer-text:hover {
    color: var(--link-footer-hover-text);
    background-color: var(--link-footer-hover-bg-text);
    opacity: var(--opacity-link-text);
}

.custom-link-footer-text:focus {
    color: var(--link-footer-active-text);
}

.custom-text-primary {
    font-weight: 700;
    color: var(--primary-color-text);
}

.custom-text-secondary {
    font-weight: 400;
    color: var(--secondary-color-text);
}

.custom-text-tertiary {
    color: var(--tertiary-color-text);
    text-align: justify;
}

.custom-text-quaternary {
    font-weight: 400;
    color: var(--quaternary-color-text);
}

.custom-footer-text-primary {
    color: var(--footer-primary-color-text);
}

.custom-footer-text-secondary {
    color: var(--footer-secondary-color-text);
}

.custom-footer-text-tertiary {
    color: var(--footer-tertiary-color-text);
}

.custom-modal-text-primary {
    font-weight: 700;
    color: var(--modal-primary-color-text);
}

.custom-modal-text-secondary {
    font-weight: 400;
    color: var(--modal-secondary-color-text);
}

.custom-modal-text-tertiary {
    text-align: justify;
    color: var(--modal-tertiary-color-text);
}

.color-overlay {
    background-color: #000;
}

.overlay {
    background-image: 
    linear-gradient(
        var(--overlay-color1), 
        var(--overlay-color2)
    ), url('../images/fondo.jpg');
    height: 100vh;
    width: 100%;
    border-radius: 0%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.btn:hover {
    background-color: var(--primary-color);
}

#main {
    background-color: var(--bg-main-color);
}

.background-img {
    background-color: var(--primary-color);
    /* Cambiar color de fill */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%238600a7' fill-opacity='0.4'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.gradient-hr {
    border: 0px;
    height: 4px;
    margin: 0px;
    background: linear-gradient(90deg, var(--primary-color-divider), var(--secondary-color-divider));
}

.custom-btn-outline {
    border-color: var(--primary-color-button);
    color: var(--primary-color-button);
}
  
.custom-btn-outline:hover {
    background-color: var(--primary-color-button);
    color: var(--secondary-color-button);
}

.icon-bg {
    color: var(--tertiary-color);
}

.icon-bg-carrusel {
    background-color: var(--tertiary-color);
}

.custom-footer {
    background-color: var(--footer-bg-color);
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.container-fluid {
    flex: 1;
}

.text-badge {
    color: var(--primary-color-text);
    background-color: var(--tertiary-color);
}

.image-card {
    width: 100%; 
    height: 420px; 
    object-fit: contain;
    object-position: center;
}

.image-card2 {
    height: 50%;
    object-fit: contain;
    object-position: center;
}



/* Contenedor del carrusel dentro del modal */
.carrusel-modal {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Estilos de las imágenes dentro del carrusel */
.imagen-carrusel {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la imagen completa sin recortes */
    opacity: 0; /* Oculta las imágenes por defecto */
    transition: opacity 1s ease-in-out; /* Transición suave de opacidad */
    top: 0;
    left: 0;
}

/* Estilo para la imagen activa en el carrusel */
.imagen-carrusel.activa {
    opacity: 1; /* La imagen activa se muestra completamente */
    z-index: 1; /* Se coloca por encima de las demás */
}

.card-img-top {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
    height: 417px; /* Ajusta la altura según lo que necesites */
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarla */
}