/* Generales */

/* Actualización en el body */
body {
    font-family: var(--font-lato);
    /* Usa Lato como fuente principal */
    font-size: 16px;
    color: var(--color-texto-principal);
}

/* No es necesario redefinir las etiquetas semánticas en Bootstrap 5 */
table {
    border-spacing: 0;
    border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-lato);
    font-weight: 700;
}


h3.titulo-ecoems {
    font-family: var(--font-roboto-condensed);
    font-weight: 900;

    font-size: clamp(12px, 6vw, 30px);

    color: var(--color-texto-principal);
    letter-spacing: -0.03em;
}

h4.titulo-ecoems {
    font-family: var(--font-roboto-condensed);
    font-weight: 900;

    font-size: clamp(12px, 8vw, 26px);

    color: var(--color-texto-principal);
    letter-spacing: -0.03em;
}

/**/

.container-titulo {
    display: flex;
    align-items: center;
    /* Centra verticalmente los elementos */
    justify-content: space-between;
    /* Distribuye el espacio entre los elementos */
    width: 100%;
    /* O un ancho específico si lo prefieres */
    position: relative;
    /* Importante para el posicionamiento absoluto de los logos si es necesario */

}

.logo {
    width: 40px;
    /* Ajusta el tamaño de los logos */
    height: auto;

    margin: 0 20px;
    /* Espaciado horizontal entre los logos */
}

.logo-container {
    display: flex;
    justify-content: left;
    /* Centra horizontalmente los logos */

    overflow: hidden;
    /* Evita que el contenido se desborde */

    margin-bottom: 10px;
    /* Agrega un margen inferior de 5px */
}



/* Aplicamos el filtro azul al logo izquierdo */
.logo-izquierdo {
    filter: url(#color-vino);
}

/* Aplicamos el filtro vino al logo derecho */
.logo-derecho {
    filter: url(#color-azul);
}


h3.titulo-ecoems {
    flex-grow: 1;
    margin: 0 15px;

    text-align: center;
}

/**/

p {
    font-size: 16px;
}

.pmenor {
    font-size: 0.875rem !important;
    /* 14px */
}

.pmayor {
    font-size: 1.125rem !important;
    /* 18px */
}

/* Enlaces */
a {
    color: #1c3d6c;
    text-decoration: none;
    /* Añadido para simplificar hover/visited */
}

a:hover {
    color: #145099;
    /* Añadido un hover general */
}

a.link-barra,
a.link-barra:hover,
a.link-barra:visited {
    color: #fff !important;
}

a img:focus,
a img:hover {
    cursor: pointer;
    opacity: 0.7 !important;
    /* Ajustado para hover más sutil */
}

/* Post Previews */
.post-preview>a {
    color: var(--color-texto-principal);
}

.post-preview>a:hover {
    text-decoration: none;
}

.post-preview>a>.post-title {
    font-size: 1.875rem;
    /* 30px */
    margin-top: 2rem;
    /* Espaciado mayor en unidades relativas */
    margin-bottom: 0.625rem;
    /* 10px */
}

.post-title {
    font-size: 1.875rem;
    /* 30px */
    margin-top: 7.5rem;
    /* 120px */
    margin-bottom: 0.625rem;
    /* 10px */
}

.post-preview>a>.post-subtitle {
    font-weight: 300;
    margin: 0;
    margin-bottom: 0.625rem;
    /* 10px */
}

h4.post-subtitle {
    font-family: var(--font-lato);
    font-size: 1rem;
    /* 16px */
    font-weight: 500;
    letter-spacing: 0.05em;
    /* Equivalente a .5pt */
}

h5.post-subtitle {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    letter-spacing: 0.05em;
    /* Equivalente a .5pt */
}

.post-preview>.post-meta a {
    font-weight: 600;
    color: #000;
}

.post-preview>.post-meta li {
    display: inline-block;
    /* Inline con capacidad de padding/margin */
}

.post-preview>.post-meta a:hover {
    color: #0085a1;
}


h2.post-titulo {
    font-size: 2.2rem;
    /* Usar rem para mayor accesibilidad */
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
    position: relative;
    /* Agregar contexto para los pseudo-elementos */
}

h2.post-titulo:after,
h2.post-titulo:before {
    position: absolute;
    top: 50%;
    /* Centrado vertical */
    display: block;
    width: 50%;
    height: 5px;
    content: '';
    background-color: #c5911f;
}

h2.post-titulo:before {
    left: 0;
    margin-left: -50%;
    /* Centrado absoluto */
}

h2.post-titulo:after {
    right: 0;
    margin-right: -50%;
    /* Centrado absoluto */
}

.contenedor-tarjetas {
    padding-top: 6rem;
    /* Usar rem para valores de espacio */
}

h2.eventos {
    font-size: 1.5rem;
    overflow: hidden;
    padding: 5px 0;
    text-align: left;
}

/* Logos */
@media (max-width: 800px) {
    .logo_grande {
        display: none !important;
        /* !important para garantizar comportamiento esperado */
    }
}

@media (min-width: 800px) {
    .logo_chico {
        display: none !important;
    }
}

.logo_izq {
    margin-top: 1.25rem;
}

.logo_der {
    margin-top: 0.3125rem;
}

a.info {
    font-family: var(--font-lato);
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 0.625rem;
    padding: 0.3125rem 0.625rem;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0.125rem;
    background: #36537c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

a.info:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.post-preview ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    /* Mejor opción que list-style-type */
}

.post-preview h3,
.post-preview h4,
.post-preview h5,
.post-preview h6 {
    margin: 0 1.25rem;
}

.post-preview h3 {
    font-size: 1.5625rem;
    /* Conversión precisa a rem */
}

a:hover span.iconito {
    color: #c5911f;
}

.justificado {
    text-align: justify;
}

.centrado {
    text-align: center;
}

/* Botones */
a.boton {
    font-weight: 600;
    text-decoration: none;
    color: #000;
}

a.boton:hover {
    text-decoration: none;
}





/* Cards */
.card-1,
.card-2,
.card-3 {
    padding: 0.625rem;
    /* Padding en rem */
}

.card-2 {
    background-color: #ffb74d;
}

.card-3 {
    color: #fff;
    background-color: #009688;
}

.card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* Centered Text */
.text-center {
    text-align: center !important;
    /* Bootstrap 5 incluye esta clase */
}

/* Labels */
label {
    color: #555;
}




/* Botones y Cards */
.btn,
.btn-floating,
.card,
.dropdown-menu {
    margin-bottom: .5rem;
    /* Usando rem para mejor escalabilidad */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    /* Sombra sutil con menor opacidad */
}



/* Estilo de las Cards */
.card-body h3 {
    font-weight: 600;
    font-size: 1.25rem;
    /* Ajuste de tamaño de fuente en rem */
}

/* Tabla */
table {
    font-size: 1rem;
    /* Asegurando consistencia con rem */
    width: 100%;
    /* Asegura que la tabla ocupe el 100% de su contenedor */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
    /* Cambio a un color más claro y más accesible */
}

/* Estilo de la Card */
.card-title {
    font-size: 1rem;
    /* Usando rem para escalabilidad */
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
}

.card {
    border: 1px solid #ccc;
    /* Ajuste a border en lugar de border-color solo */
}

.card-header {
    color: #000;
    background-color: #f1f1f1;
    /* Ajuste a un color más suave */
    border-bottom: 1px solid #ccc;
    /* Agregado border-bottom para un diseño más coherente */
}

.card-header+.collapse>.card-body {
    border-top: 1px solid #ccc;
}

.card-header .badge {
    color: #6c757d;
    /* Color más sutil */
    background-color: #fff;
    border: 1px solid #ccc;
    /* Añadido borde para más definición */
}

/* Estilo de lista personalizada */
.tabla_colores li {
    width: 50%;
    list-style: none;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    /* Permite que las listas se alineen en línea */
}


/* Estilo para preformato */
pre {
    padding: 0;
    border: none;
    background-color: transparent;
    white-space: pre-wrap;
    /* Asegura que el texto largo se ajuste correctamente */
}






/* Estilos para el enlace de acceso rápido */
#skiptocontent a {
    position: absolute;
    z-index: 100;
    top: -40px;
    left: 0;
    padding: 6px;
    transition: top 1s ease-out, background 1s linear;
    color: white;
    background: transparent;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
}

/* Estado de foco para el enlace de acceso rápido */
#skiptocontent a:focus {
    top: 0;
    background: #bf1722;
    outline: 0;
    transition: top .1s ease-in, background .5s linear;
}

/* Clearfix para flotantes */
.clearfix:after {
    content: "";
    clear: both;
}

.clearfix {
    display: block;
    visibility: hidden;
}









/* Botón personalizado */
button.boton {
    font-weight: 600;
    text-decoration: none;
    color: #000;
}

button.boton:hover {
    text-decoration: none;
}

/* Dropdown */
.dropdown-menu {
    margin-left: 0.5rem;
    /* Uso de rem para mejor escalabilidad */
}

/* Tabla striped */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #fcf8e3;
}

.table-striped>tbody>tr:nth-of-type(odd):hover {
    background-color: #faebcc;
}

/* Columnas (Utilizando clases responsivas y de espaciado estándar) */
.col {
    padding-right: 15px;
    padding-left: 15px;
}

/* Estilos de colores para encabezados */
.cabeza-color1,
.cabeza-color2,
.cabeza-color3,
.cabeza-color3-5,
.cabeza-color4 {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
}

.cabeza-color1 {
    background-color: #000;
}

.cabeza-color2 {
    background-color: #8a6d40;
}

.cabeza-color3 {
    background-color: #1c3d6c;
}

.cabeza-color3-5 {
    background-color: #5b7797;
}

.cabeza-color4 {
    background-color: #2b303b;
}

/* Títulos en los encabezados */
.cabeza-color1 h4,
.cabeza-color2 h4,
.cabeza-color3 h4,
.cabeza-color3-5 h4,
.cabeza-color4 h4 {
    font-size: 14px;
    font-weight: 600;
}

/* Posicionamiento absoluto */
.abajo {
    position: absolute;
    bottom: 15px;
}

.abajo a {
    color: #000;
    text-decoration: none;
    /* Evita subrayado por defecto */
}

.abajo a:hover {
    text-decoration: none;
}

/* Estilo para el botón en la media query */
@media all and (max-width: 1200px) and (min-width: 991px) {
    .abajo a.btn {
        font-size: 10px;
    }
}

/* Centrado Vertical */
.centra-vertical td,
.centra-vertical th {
    vertical-align: middle;
    /* Mejor flexibilidad y consistencia */
}

/* Ajuste de espaciado de letras */
.comprime {
    letter-spacing: .5px;
}






/* Altura de las tarjetas */
.card-m1,
.card-m1-2 {
    height: 280px;
}

.card-m2,
.card-m2-2 {
    height: 390px;
}

.card-m3,
.card-m3-2 {
    height: 400px;
}

.card-m4,
.card-m4-2 {
    height: 410px;
}

/* Media query para dispositivos más pequeños */
@media all and (max-width: 991px) {

    .card-m1-2,
    .card-m2-2,
    .card-m3-2,
    .card-m4-2 {
        height: 280px;
    }
}

/* Estilos de hover en enlaces */
h5 a:hover {
    text-decoration: underline;
}

/* Estilo para formularios con botones */
form.para-botones {
    display: inline-flex;
    /* Usamos inline-flex para mayor control de alineación */
}

/* Estilos para el título del panel */
.panel-title a {
    color: #2b303b;
}

.panel-title a:hover {
    color: #2b303b;
}

/* Estilo para el título normal */
.titulonormal {
    font-weight: bold;
    color: #1c3d6c;
}

/* Chevron en el encabezado de panel */
.panel-heading h4 a .chevron::after {
    content: '\f078';
}

.panel-heading h4 a.collapsed .chevron::after {
    content: '\f054';
}

/* Estilo para las celdas del pie de tabla */
tfoot tr td {
    font-weight: bold;
}

/* Estilo para formularios con margen inferior */
.estilo-forma {
    margin-bottom: 1rem;
    padding-top: 10px;
    background-color: transparent;
}

/* Estilo para el panel-link */
.panel-link {
    background-color: #fff;
}

.panel-link:hover {
    background-color: #eee;
}

/* Eliminado filtro de opacidad innecesario en Bootstrap 5 */



/* Tablas con espacio mínimo */
.table-min td,
.table-min th {
    padding: 0 !important;
}

.table-min {
    border-color: transparent !important;
}

/* Elementos de formulario */
.form-element {
    width: 100%;
}


/* Etiquetas personalizadas */
.forlabel {
    font-weight: 600;
}



/* Placeholder estilizado para compatibilidad */
.datepicker::placeholder {
    font-weight: 600;
    padding-left: 10px;
    color: #999;
}

/* Estilo de resaltar */
.resaltar {
    padding: 5px !important;
    background-color: #eee !important;
}

/* Estilo de sugerencias */
.hints {
    font-weight: bold;
    color: #4285f4;
}

/* Botones personalizados */
.cch {
    color: #fff !important;
    background-color: #6fb048 !important;
}

.cch:hover {
    color: #000 !important;
}

.enp {
    color: #fff !important;
    background-color: #ffad3d !important;
}

.enp:hover {
    color: #000 !important;
}

.bd {
    color: #fff !important;
    background-color: #2b336e !important;
}

.bd:hover {
    color: #fff !important;
}

/* Estilo de enlaces alternativos */
.alterno {
    text-decoration: underline;
    color: #fff !important;
}

/* Estilo para iframes */
iframe.ytb-embed {
    display: block;
    max-width: 100% !important;
    margin: auto;
}

/* Estilo de tarjetas de información */
.card-info {
    font-family: var(--font-lato);
    font-size: 0.9375rem;
    /* Usamos rem para mejor escalabilidad */
    line-height: 1.1;
    margin-right: 20px;
    margin-left: 20px;
    letter-spacing: 1pt;
}


/* Centrados y alineación responsiva */
.centrado_responsivo {
    text-align: center;
}

@media (max-width: 568px) {
    .centrado_responsivo {
        padding: 2px !important;
        text-align: left;
    }
}

/* Estilo ligero */
.ligero {
    font-weight: 100;
}




/****************/

/* Estilos de filas con colores personalizados */
.tr_color1 td {
    background-color: #ffcfd4;
}

.tr_color2 td {
    background-color: #d1cdfa;
}

.tr_color3 td {
    background-color: #efddb9;
}

/* Ajuste de tablas extendidas */
#table-extend {
    width: 95%;
    margin: 0 auto;
    table-layout: fixed;
    /* Agregar control para la tabla */
}

#table-extend th {
    font-weight: 300;
    padding: 5px 20px 5px 15px;
    color: #fff;
    background-color: var(--color-texto-principal);
}

/* Botón transparente */
button.btransparente {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.5;
    display: inline-block;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
    color: #4285f4;
    background-color: transparent;
    border: none;
}

button.btransparente:hover {
    text-decoration: none;
    color: #999;
}

/* Campo select estilizado */
.select-text {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background-color: transparent;
}

/* Etiquetas flotantes para select */
.select-label {
    position: absolute;
    top: 55px;
    transition: 0.2s ease all;
    pointer-events: none;
}

.select-text:focus~.select-label,
.select-text:valid~.select-label {
    font-size: 0.875rem;
    top: -20px;
    color: #2f80ed;
}

/* BOTTOM BARS */
.select-bar {
    position: relative;
    display: block;
    width: 100%;
    max-width: 350px;
    /* Responsividad */
}

.select-bar:before,
.select-bar:after {
    position: absolute;
    bottom: 1px;
    width: 0;
    height: 2px;
    content: '';
    transition: 0.2s ease all;
    background: #2f80ed;
}

.select-bar:before {
    left: 50%;
}

.select-bar:after {
    right: 50%;
}

.select-text:focus~.select-bar:after,
.select-text:focus~.select-bar:before {
    width: 50%;
}

/* HIGHLIGHTER */
.select-highlight {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100px;
    height: 60%;
    pointer-events: none;
    opacity: 0.5;
}


.filter-option:hover {
    color: #9e9e9e !important;
}

/* Loader */
.loader {
    position: fixed;
    z-index: 1055;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background: url('../images/pageLoader.gif') center center no-repeat rgb(249, 249, 249);
}


/* Rotate */
.rotate {
    transition: transform 0.3s linear;
}

.rotate.down {
    transform: rotate(90deg);
}

/* Margin Adjustments */
.margin-boton {
    margin: 25px;
}

/* Link Styling */
a#rotate-boton:link {
    text-decoration: none;
}

/* Addon Adjustments */
.inner-addon {
    position: relative;
}

.inner-addon .icon {
    position: absolute;
    padding: 20px;
}

/* Ajustes para iconos a la izquierda o derecha */
.left-addon .icon {
    top: 0;
    left: 0;
}

.right-addon .icon {
    top: 0;
    right: 0;
}

/* Inline Element Adjustments */
.salto-deshabilitado {
    display: inline-block;
    /* 'inline-block' se usa en lugar de 'inline' para permitir la gestión de márgenes y padding */
    white-space: nowrap;
}

/* Section Titles */
.seccion-titulo h2 {
    font-size: 2.2rem;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.seccion-titulo h2::after,
.seccion-titulo h2::before {
    position: relative;
    display: inline-block;
    width: 20%;
    height: 3px;
    content: '';
    vertical-align: middle;
    border-radius: 64px;
    background-color: #c5911f;
}

.seccion-titulo h2::before {
    right: 0.5em;
    margin-left: -50%;
}

.seccion-titulo h2::after {
    left: 0.5em;
    margin-right: -50%;
}

/* Section Legends */
legend.seccion-titulo {
    position: relative;
    width: 100%;
    padding: 0 50px;
    border-bottom: none;
    font-size: 1.3rem;
    line-height: inherit;
    margin-bottom: 20px;
}

@media (max-width: 480px) {

    .seccion-titulo h2::after,
    .seccion-titulo h2::before {
        display: none;
        /* Oculta los pseudoelementos en pantallas muy pequeñas */
    }
}

/* Cards */
.card {
    background-color: #fff;
    /* Usa las variables de Bootstrap 5 si es necesario para el fondo */
}




/* EVENTOS ================================= */

/* Column Items */
.col-item {
    border: 1px solid #e1e1e1;
    border-radius: 0.3125rem;
    /* Usando rem para una mayor flexibilidad */
    background-color: #fff;
    /* Usar clases de borde de Bootstrap si aplica */
}

/* Imagen de la columna */
.col-item .photo img {
    width: 100%;
    /* Imagen completamente responsiva */
    display: block;
    /* Elimina el espaciado debajo de las imágenes */
    margin: 0 auto;
}

/* Información */
.col-item .info {
    margin-top: 1px;
    padding: 0.625rem;
    /* Equivalente a 10px */
    border-radius: 0 0 0.3125rem 0.3125rem;
}

.col-item:hover .info {
    background-color: #f5f5dc;
    /* Usa una variable personalizada si necesitas flexibilidad */
}

/* Rating */
.col-item .info .rating,
.col-item .rating {
    color: #777;
    font-size: 1.0625rem;
    /* Equivalente a 17px */
    line-height: 3.25rem;
    /* Asegura alineamiento */
    height: 3.25rem;
    text-align: right;
    margin-bottom: 0.625rem;
    /* Puedes usar clases como `text-secondary` de Bootstrap */
}

/* Separator */
.col-item .separator {
    border-top: 1px solid #e1e1e1;
    margin-top: 0.625rem;
    /* Espaciado entre elementos */
}

/* Clear Fix */
.clear-left {
    clear: left;
    /* Usa la clase `.clearfix` de Bootstrap 5 si es necesario para limpiar flotantes */
}

/* Separator Text */
.col-item .separator p {
    line-height: 1.25rem;
    /* Equivalente a 20px */
    margin-top: 0.625rem;
    /* Equivalente a 10px */
    margin-bottom: 0;
    text-align: center;
}

.col-item .separator p i {
    margin-right: 0.3125rem;
    /* Equivalente a 5px */
}





/* Controls */
.controls {
    margin-top: 0.625rem;
    /* Espaciado entre el contenedor y otros elementos */
}

/* CONTROLES DE SLIDE */
[data-slide='prev'] {
    margin-right: 0.625rem;
    /* Equivalente a 10px */
}

/* NOTICIAS */
.noticias,
.noticias-linea {
    padding: 0.125rem;
    /* Equivalente a 2px */
    margin-left: 0.125rem;
    /* Equivalente a 2px */
    margin-right: 0.125rem;
    /* Equivalente a 2px */
}

/* SEPARADOR */
hr.separador {
    height: 1px;
    border: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* TEXTO RESALTADO */
.resaltado {
    font-family: var(--font-merriweather-sans);
    color: #4285f4;
    /* Usar variables de color si es posible */
}


/* Variables CSS */
:root {
    --slide-distance: -25rem;
    /* Equivalente a -400px */
    --border-radius-small: 0.3125rem;
    /* 5px */
    --spacing-small: 0.125rem;
    /* 2px */
    --spacing-medium: 1.25rem;
    /* 20px */
    --spacing-large: 2.5rem;
    /* 40px */
    --transition-speed: 0.25s;
    --box-shadow-color: lightgray;
}

/* ANIMACIONES */
@keyframes slidein {
    0% {
        top: var(--slide-distance);
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

@keyframes slideout {
    0% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: var(--slide-distance);
        opacity: 0;
    }
}

/* EVENTOS PASADOS */
#eventos-pasados {
    background: var(--bs-light);
    /* Utilizando la clase de Bootstrap para fondo claro */
}

/* TARJETAS */
.vgr-cards .card {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-large);
}

.vgr-cards .card:nth-child(even) .card-img-body {
    order: 2;
}

.vgr-cards .card-img-body {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.vgr-cards .card-body {
    padding: 0 0 0 var(--spacing-medium);
    flex: 2;
}

.vgr-cards .card-img {
    position: absolute;
    width: 100%;
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Media queries */
@media (max-width: 62rem) {
    .vgr-cards .card {
        display: block;
    }

    .vgr-cards .card-img-body {
        width: 100%;
        height: 12.5rem;
        /* 200px */
        margin-bottom: var(--spacing-medium);
    }

    .vgr-cards .card-body {
        padding: 0;
    }
}

@media (max-width: 71.25rem) {
    .vgr-cards .card-img {
        margin: 0;
        transform: none;
    }
}

/* IMÁGENES DE TARJETA */
.vgr-cards .card-img-body {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.vgr-cards .card-img {
    position: absolute;
    width: 100%;
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* MENSAJES */
.info-mensaje {
    text-align: center;
    /* Bootstrap alternativa: `text-center` */
    color: var(--color-texto-principal);
}

.info-mensaje a {
    font-family: var(--font-merriweather-sans);
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 600;
    display: inline-block;
    width: 100%;
    /* Alternativa: `w-100` */
    padding: 1rem var(--spacing-small);
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
    text-align: center;
    /* Bootstrap alternativa: `text-center` */
    background: var(--bs-white);
    /* Bootstrap alternativa: `bg-white` */
    color: var(--color-texto-principal);
    border-radius: var(--border-radius-small);
}

.info-mensaje a:hover {
    transform: translateY(-0.1875rem);
    /* -3px */
}

/* BOTONES DE FLECHA */
.btn-arrow {
    font-size: 2.5rem;
    /* 40px */
}

.arrow {
    position: absolute;
    top: 50%;
    width: 3vmin;
    height: 3vmin;
    background: transparent;
    border-top: 1vmin solid #fff;
    border-right: 1vmin solid #fff;
    box-shadow: 0 0 0 var(--box-shadow-color);
    transition: all 0.2s ease;
}

.arrow.left {
    left: 1rem;
    /* 15px */
    transform: translate3d(0, -50%, 0) rotate(-135deg);
}

.arrow.right {
    right: 1rem;
    /* 15px */
    transform: translate3d(0, -50%, 0) rotate(45deg);
}

.arrow:hover {
    border-color: orange;
    box-shadow: 0.5vmin -0.5vmin 0 #fff;
}


/* CONTENEDORES */
div.cardf>* {
    width: auto;
    margin: 0 0.625rem;
    /* Bootstrap: `mx-2` para márgenes horizontales */
}

div.cardf:last-child {
    margin-bottom: 1.5rem;
    /* Bootstrap: `mb-4` para margen inferior */
}

.simulation {
    position: relative;
    bottom: 3.125rem;
    /* Bootstrap: `mb-5` para margen inferior */
}

/* VIDEOS RESPONSIVOS */
.video-responsive {
    position: relative;
    padding-top: 1.875rem;
    /* Bootstrap: `pt-4` */
    height: 0;
    overflow: hidden;
    /* Responsivo mediante porcentaje de padding-bottom, estándar para mantener la relación de aspecto */
    padding-bottom: 59.25%;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video {
    width: 100%;
    /* Bootstrap: `w-100` */
}

/* MEDIA QUERIES */
@media (max-width: 62rem) {

    /* Equivalente a 989px */
    .video-responsive {
        padding-bottom: 65.25%;
        /* Ajuste según la resolución */
    }
}

@media (max-width: 41.25rem) {

    /* Equivalente a 660px */
    .video-responsive {
        padding-bottom: 53.25%;
    }
}

@media (max-width: 38.1875rem) {

    /* Equivalente a 611px */
    .video-responsive {
        padding-bottom: 53.25%;
    }
}

@media (max-width: 31.875rem) {

    /* Equivalente a 510px */
    .video-responsive {
        padding-bottom: 50.25%;
    }
}

@media (max-width: 28.625rem) {

    /* Equivalente a 458px */
    .video-responsive {
        padding-bottom: 45.25%;
    }
}

/* Nuevos */

.bg-leve {
    background-color: #f0f0f0;
}

.card-title {
    font-family: var(--font-roboto-condensed);
    font-size: 25px !important;
    font-weight: 700;

}

.card-subtitle {
    font-family: var(--font-lato);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5pt;
}

.btn-primary {
    /* background-color: #691a32;
    border-color: #691a32; */
    background-color: #003fa3;
    /* Azul, por ejemplo */
    border-color: #003fa3;
}

.btn-primary:hover {
    /* background-color: #9b2247;
    border-color: #9b2247; */
    background-color: #0056d0;
    /* Un azul más oscuro al hacer hover */
    border-color: #0056d0;
}

.btn-primary.btn-lg {
    background-color: #003fa3;
    /* Azul, por ejemplo */
    border-color: #003fa3;
}

.btn-primary.btn-lg:hover {
    background-color: #0056d0;
    /* Un azul más oscuro al hacer hover */
    border-color: #0056d0;
}

/* .btn-secondary {
    background-color: #ffffff;
    border-color: #1E66AF;
    border: solid 1px;
    color: #1E66AF;
    box-shadow: inset 0 0 0 2px #1E66AF;
}

.btn-secondary:hover {
    background-color: #3581D8;
    border-color: #3581D8;
} */

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-secondary {
    background-color: #cccccc;
    border-color: #cccccc;
    color: #000000;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}

.deshabilitado {
    background-color: #D3D3D3;
    border-color: #D3D3D3;
    color: #9d9d9d;
    cursor: not-allowed;
}

.deshabilitado:hover {
    background-color: #D3D3D3;
    border-color: #D3D3D3;
    color: #9d9d9d;
    cursor: not-allowed;
}


.btn-outline-primary {
    --bs-btn-color: #3581D8;
    --bs-btn-border-color: #3581D8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3581D8;
    --bs-btn-hover-border-color: #3581D8;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3581D8;
    --bs-btn-active-border-color: #3581D8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #3581D8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3581D8;
    --bs-gradient: none;
}

.btn-outline-success {
    --bs-btn-color: #218838;
    --bs-btn-border-color: #218838;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #218838;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #218838;
    --bs-btn-active-border-color: #218838;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #218838;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #218838;
    --bs-gradient: none;
}

.btn-outline-info {
    --bs-btn-color: #138496;
    --bs-btn-border-color: #138496;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #138496;
    --bs-btn-hover-border-color: #138496;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #138496;
    --bs-btn-active-border-color: #138496;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #138496;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #138496;
    --bs-gradient: none;
}



.form-control {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.49;

    appearance: none;
    background-clip: padding-box;
}

.form-text {
    font-size: 0.8rem;
    font-weight: 600;
    /* color: #3581d8; */
    padding-left: 0.5rem;
    line-height: 1.2;
    margin-top: 0.3;
}

.valid-feedback {
    font-size: 0.8rem;
    font-weight: 600;
    padding-left: 0.5rem;
    line-height: 1.2;
    margin-top: 0.3;
    color: #198754;
}

.invalid-feedback {
    font-size: 0.8rem;
    font-weight: 600;
    padding-left: 0.5rem;
    line-height: 1.2;
    margin-top: 0.3;
    color: #dc3545;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    padding-left: 0.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 0;

}

text-primary {
    color: #3581d8;
}

/* Estilos generales para los fieldsets */

/* Fieldset */
fieldset {
    position: relative;
    display: block;
    width: 100%;
    margin: 2rem 0;
    /* Aumentar el margen superior e inferior */
    border: 1px solid #D8B4BE;
    /* Color de borde más destacado */
    padding: 1rem;
    padding-top: 2rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
    background-color: #FAFBFC;
    /* Color de fondo suave */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

fieldset>* {
    width: auto;
    margin-right: 1rem;
    margin-left: 1rem;
}

fieldset:last-child {
    margin-bottom: 1.5rem;
}

fieldset legend {
    line-height: 1.5;
    /* Mejora la legibilidad */
    font-weight: bold;
    margin: 0;
    padding: 0.5rem 1rem;
    /* Padding adicional para mayor espacio */
    box-sizing: border-box;
    color: #1F2937;
    /* Color del texto */
    background-color: #E0E7EE;
    /* Color de fondo del legend */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    border: 1px solid #D8B4BE;
    position: absolute;
    /* Posicionamiento absoluto */
    top: -1rem;
    /* Elevar el legend */
    left: 1rem;
    /* Alinear a la izquierda */
    text-align: center;
    /* Centrar el texto */
    text-transform: uppercase;
    /* Texto en mayúsculas */
    font-size: 1rem;
    /* Tamaño de fuente */
    margin-bottom: 1rem;
    /* Añadir margen inferior para separación */
}



/* Contenedor general del rango */
.range-container {
    position: relative;
    width: 100%;
}

/* Tooltip que muestra el valor actual */
.range-value {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4285f4;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    margin-top: -5px;
    margin-left: 10px;
    /* Ajusta este valor según sea necesario */
}

/* Contenedor para valores mínimo y máximo */
.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3;
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.2;
    font-weight: 600;

}



.input-group .btn {
    margin-bottom: 0rem;
}

.tooltip-inner {
    padding: 0.5rem;
}




:root {
    --navbar-height: 110px;
}

/* Estilos base */
.navbar {
    min-height: var(--navbar-height);
    padding: 0;
    /* Reset padding, overwrite any browser default */
}

.central-image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    /* Asegura que se expanda */
}

/* Estilos para móvil (por defecto) */
.desktop-container {
    display: none;
}

.mobile-logo {
    display: none;
    /* Oculto por defecto */
}

.mobile-logo img {
    width: 100%;
    max-width: 300px;
    height: auto;
    padding: 0;
    /* Eliminar padding innecesario */
}

/* Media Query para móvil (<= 901px) */
@media (max-width: 901px) {
    .desktop-container {
        display: none !important;
        /* Fuerza la ocultación */
    }

    .mobile-logo {
        display: block;
        max-width: 310px;
        margin: 0 auto;
        /* Centrar horizontalmente */
    }

    .navbar {
        justify-content: center !important;
        /* Fuerza el centrado horizontal */
    }
}

/* Media Query para escritorio (> 901px) */
@media (min-width: 901px) {
    .desktop-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--navbar-height);
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .logos-container {
        display: flex;
        gap: 5px;
        width: 200px;
    }

    .logos-container img {
        height: 80px;
        width: auto;
        object-fit: contain;
    }

    .central-image img {
        height: 90px;
        max-width: 400px;
        width: auto;
    }

    .right-wrapper img {
        height: 50px;
        width: auto;
    }

    .mobile-logo {
        display: none;
    }
}