:root {
    /* Blue Shades */
    --blue-1: #246498; /* Darker Blue */
    --blue-2: #0077C0; /* Primary Blue */
    --blue-3: #498cc2; /* Light Blue */
    --blue-4: #8abde7; /* Very Light Blue */
    --blue-5: #b0d0e8; /* Comfortable Blue */
    --blue-6: #e7e7e7; /* Hover Blue */
    --blue-7: #f5fbff; /* Hover Light Blue */
    --blue-8: #fffbf4;

    --gold-1: #132658; /* Azul muy oscuro */
    --gold-2: #0C1A33; /* Azul oscuro */
    --gold-3: #0C1A33; /* Azul medio */
    --gold-4: #6572a1; /* Azul desaturado */
    --gold-5: #8c98c3; /* Azul grisáceo */
    --gold-6: #b2bde0; /* Azul muy claro */
    --gold-7: #d9def4; /* Azul casi blanco */
    --gold-8: #f3f5fc; /* Blanco con un leve tinte azulado */



    /* Red Shades */
    --red-1: #bb0d0d; /* Dark Red */
    --red-2: #ff4b5c; /* Primary Red */
    --red-3: #e77d7d; /* Shadow Forter Red */
    --red-4: #f7b7b7; /* Shadow Fort Red */
    --red-5: #ffd7d7; /* Shadow Light Red */
    --red-6: #fff1f1; /* Shadow Red */

    /* Orange Shades */
    --orange-1: #ad5202; /* Tainted Orange */
    --orange-2: #e0700e; /* Primary Orange */
    --orange-3: #eec7a5; /* Light Orange */
    --orange-4: #fff6ee; /* Very Light Orange */

    /* Green Shades */
    --green-1: #186c10; /* Tainted Green */
    --green-2: #62a820; /* Primary Green */
    --green-3: #279a1ca4; /* Cake Green */
    --green-4: #96e39c; /* Shadow Green */
    --green-5: #ebffed; /* Shadow Light Green */

    /* Gray Shades */
    --gray-1: #98989872; /* Real Shadow */
    --gray-2: #afafaf; /* Shadow Gray */
    --gray-3: #dcdcdc; /* Hover Gray */
    --gray-4: #e9e9e9; /* Background Gray */
    --gray-5: #f1f1f1; /* New Gray */
    --gray-6: #efefef; /* Very Light Gray */
    --gray-7: rgb(210, 210, 210); /* Light Gray */
    --gray-8: #fafafa; /* Input Field */
    --gray-9: #f6f6f6ce; /* Input Valid */
    --gray-10: rgb(247, 247, 247); /* Text Gray */


    /* Black Shades */
    --black-1: #1f1f1f; /* Background Dark */
    --black-2: #383838; /* Opacity Black */
    --black-3: #575757; /* Light Black */
    --black-4: #929292; /* Very Light Black */

    --white: #ffffff;
    --hola: #307cbbd2;

}
/* Blue Shades */
.blue-1 { color: var(--blue-1) !important; }
.blue-2 { color: var(--blue-2) !important; }
.blue-3 { color: var(--blue-3) !important; }
.blue-4 { color: var(--blue-4) !important; }
.blue-5 { color: var(--blue-5) !important; }
.blue-6 { color: var(--blue-6) !important; }
.blue-7 { color: var(--blue-7) !important; }
.blue-8 { color: var(--blue-8) !important; }

.bg-blue-1 { background-color: var(--blue-1) !important; }
.bg-blue-2 { background-color: var(--blue-2) !important; }
.bg-blue-3 { background-color: var(--blue-3) !important; }
.bg-blue-4 { background-color: var(--blue-4) !important; }
.bg-blue-5 { background-color: var(--blue-5) !important; }
.bg-blue-6 { background-color: var(--blue-6) !important; }
.bg-blue-7 { background-color: var(--blue-7) !important; }
.bg-blue-8 { background-color: var(--blue-8) !important; }

/* Red Shades */
.red-1 { color: var(--red-1) !important; }
.red-2 { color: var(--red-2) !important; }
.red-3 { color: var(--red-3) !important; }
.red-4 { color: var(--red-4) !important; }
.red-5 { color: var(--red-5) !important; }
.red-6 { color: var(--red-6) !important; }

.bg-red-1 { background-color: var(--red-1) !important; }
.bg-red-2 { background-color: var(--red-2) !important; }
.bg-red-3 { background-color: var(--red-3) !important; }
.bg-red-4 { background-color: var(--red-4) !important; }
.bg-red-5 { background-color: var(--red-5) !important; }
.bg-red-6 { background-color: var(--red-6) !important; }

/* Orange Shades */
.orange-1 { color: var(--orange-1) !important; }
.orange-2 { color: var(--orange-2) !important; }
.orange-3 { color: var(--orange-3) !important; }
.orange-4 { color: var(--orange-4) !important; }

.bg-orange-1 { background-color: var(--orange-1) !important; }
.bg-orange-2 { background-color: var(--orange-2) !important; }
.bg-orange-3 { background-color: var(--orange-3) !important; }
.bg-orange-4 { background-color: var(--orange-4) !important; }

/* Green Shades */
.green-1 { color: var(--green-1) !important; }
.green-2 { color: var(--green-2) !important; }
.green-3 { color: var(--green-3) !important; }
.green-4 { color: var(--green-4) !important; }
.green-5 { color: var(--green-5) !important; }

.bg-green-1 { background-color: var(--green-1) !important; }
.bg-green-2 { background-color: var(--green-2) !important; }
.bg-green-3 { background-color: var(--green-3) !important; }
.bg-green-4 { background-color: var(--green-4) !important; }
.bg-green-5 { background-color: var(--green-5) !important; }

/* Gray Shades */
.gray-1 { color: var(--gray-1) !important; }
.gray-2 { color: var(--gray-2) !important; }
.gray-3 { color: var(--gray-3) !important; }
.gray-4 { color: var(--gray-4) !important; }
.gray-5 { color: var(--gray-5) !important; }
.gray-6 { color: var(--gray-6) !important; }
.gray-7 { color: var(--gray-7) !important; }
.gray-8 { color: var(--gray-8) !important; }
.gray-9 { color: var(--gray-9) !important; }
.gray-10 { color: var(--gray-10) !important; }

.bg-gray-1 { background-color: var(--gray-1) !important; }
.bg-gray-2 { background-color: var(--gray-2) !important; }
.bg-gray-3 { background-color: var(--gray-3) !important; }
.bg-gray-4 { background-color: var(--gray-4) !important; }
.bg-gray-5 { background-color: var(--gray-5) !important; }
.bg-gray-6 { background-color: var(--gray-6) !important; }
.bg-gray-7 { background-color: var(--gray-7) !important; }
.bg-gray-8 { background-color: var(--gray-8) !important; }
.bg-gray-9 { background-color: var(--gray-9) !important; }
.bg-gray-10 { background-color: var(--gray-10) !important; }

/* Gold Shades */
.gold-1 { color: var(--gold-1) !important; }
.gold-2 { color: var(--gold-2) !important; }
.gold-3 { color: var(--gold-3) !important; }
.gold-4 { color: var(--gold-4) !important; }
.gold-5 { color: var(--gold-5) !important; }
.gold-6 { color: var(--gold-6) !important; }
.gold-7 { color: var(--gold-7) !important; }
.gold-8 { color: var(--gold-8) !important; }

.bg-gold-1 { background-color: var(--gold-1) !important; }
.bg-gold-2 { background-color: var(--gold-2) !important; }
.bg-gold-3 { background-color: var(--gold-3) !important; }
.bg-gold-4 { background-color: var(--gold-4) !important; }
.bg-gold-5 { background-color: var(--gold-5) !important; }
.bg-gold-6 { background-color: var(--gold-6) !important; }
.bg-gold-7 { background-color: var(--gold-7) !important; }
.bg-gold-8 { background-color: var(--gold-8) !important; }


/* Black Shades */
.black-1 { color: var(--black-1) !important; }
.black-2 { color: var(--black-2) !important; }
.black-3 { color: var(--black-3) !important; }
.black-4 { color: var(--black-4) !important; }

.bg-black-1 { background-color: var(--black-1) !important; }
.bg-black-2 { background-color: var(--black-2) !important; }
.bg-black-3 { background-color: var(--black-3) !important; }
.bg-black-4 { background-color: var(--black-4) !important; }

.white{ color:white !important}
.bg-white{ background-color: white !important; }
.bg-transparent-black{
    background-color: #2b2b2bc7 !important;
}

.bg-img-1{
    background-image: url('https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/banners/banner1.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-img-2{
    background-image: url('https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/banners/banner2.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-img-3{
    background-image: url('https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/banners/banner3.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

.red-hat-display-1 {
    font-family: "Red Hat Display", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: rgba(53, 120, 175, 0.803);
  }
  
/* General styles from your code */
* {
    box-sizing: border-box !important;
    font-family: "Red Hat Display", serif;
}
.contents, html {
    display: contents !important;
    margin: 0;
}
html{
    overflow: hidden !important;
}
.content{
    overflow-y: auto !important;
}
body {
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    background-color: var(--gray-5);
    width: 100vw;
    overflow-y: scroll !important;
}
main{
    /* height: 100vh; */
    min-height: 100vh;
}
/* --- 📌 ESTILOS GENERALES DEL HEADER --- */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%;
    padding: 0.5rem 2.5% 0;
    transition: all 0.3s ease;
    box-shadow: 0 0 0.5rem var(--black-1);
}
.silo {
    transition: 0.6s;
    z-index: 1000;
    position: sticky;
    top: 0;
}
.header a h1 {
    /* font-family: 'EB Garamond', serif !important; */
    font-size: 1.75rem;
    user-select: none;
    text-align: start ;
    /* line-height: 3.9rem; */
    color: var(--black-3);
    font-weight: 400 !important;
    text-decoration: none;
}
.conacem-style{
    font-family: 'EB Garamond', serif !important;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0.5rem 0 0 0;
    /* justify-content: space-between; */
    color: var(--blue-2);
}
.header-2 .nav-menu{
    color: var(--gold-2) !important;
}
.header-2 .nav-menu a.active {
    border-bottom: solid 0.15rem var(--gold-2) !important;
}
.nav-menu a {
    margin: 0 1.7rem 0 0 !important;
    border-bottom: solid 0.15rem transparent;
    padding-bottom: 0.1rem;
    transition: 0.5s;
    text-decoration: none;
    user-select: none !important;
    color: inherit;
    display: flex;
    align-items: center;
}
.nav-menu a:last-child{
    margin: 0 !important;
}
.nav-menu a.active {
    border-bottom: solid 0.15rem var(--blue-2);
    font-weight: 600;
}
.nav-menu a:hover {
    border-color: var(--blue-4);
    transform: scale(1.01);
    transition: 0.5s;
}
.nav-menu li {
    font-size: 1.2rem;
}
.header img{
    width: 35% !important;
    min-width: none !important;
}
.ver-mas {
    display: none !important;
    position: relative;
    align-items: center;
}
.sub-menu {
    display: none;
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    padding: 0.2rem;
    min-width: 200px;
    top: 100%;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    list-style: none !important;
}
.special-link{
    border: none !important;
}
.underlined-link{
    text-decoration: underline !important;
}
.sub-menu li {
    padding: 8px 12px;
    white-space: nowrap;
}
.sub-menu a:last-child{
    border: none !important;
}
.sub-menu a {
    text-decoration: none;
    color: black;
    display: flex;
    user-select: none !important;
    align-items: center;
    justify-content: start;
    padding: 0.5rem;
    margin: 0 !important;
    border-bottom: solid 0.1rem var(--gray-3) !important;
}
.sub-menu a:hover{
    border-color: var(--gray-3) !important;
    background-color: var(--blue-6);
}
/* Ocultar el checkbox */
.toggle-submenu {
    display: none;
}
/* Estilo base del submenú */

.submenu-label{
    display: flex;
    margin: 0 1.2rem !important;
    border-bottom: solid 0.15rem transparent;
    transition: 0.5s;
    padding-bottom: 0.1rem;
    cursor: pointer;
    user-select: none !important;
    align-items: center;
}
.submenu-label:hover{
    transform: scale(1.01);
    transition: 0.5s;
    border-color: var(--blue-4);
}
/* Mostrar el submenú cuando el checkbox está marcado */
.toggle-submenu:checked + .submenu-label + .sub-menu {
    opacity: 1;
    max-height: 500px;
    pointer-events: auto;
}
.submenu-label span{
    transition: 0.3s;
}
.toggle-submenu:checked ~ .submenu-label span{
    transform: rotate(180deg);
    transition: 0.3s;
}
h1, h2, h3{
    font-weight: 300;
}
a{
    text-decoration: none;
    color: white;
}
ul{
    margin: 0;
    padding: 0;
}
.footer{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    /* margin-top: 2rem; */
}
h1, h2, h3{
    font-weight: 600;
    margin: 0;
    text-align: center;
    transition: 0.4s;
    color: var(--black-2);
}
h4, h5, h6{
    font-weight: 500;
    color: var(--black-2);
    transition: 0.4s;
    margin: 0;
}
h1 {
    font-size: 1.5rem; /* Principal título */
    color: var(--black-2);
    font-weight: 600 !important;
    line-height: 1.2;
}
h2 {
    font-size: 1.3rem; /* Segundo nivel de título */
    color: var(--black-2);
    line-height: 1.3;
    font-weight: 300 !important;
}
h3 {
    font-size: 1.27rem; /* Tercer nivel de título */
    color: var(--black-2);
    line-height: 1.4;
}
h4 {
    font-size: 1.25rem; /* Cuarto nivel de título */
    color: var(--black-2);
    line-height: 1.4;
}
h5 {
    font-size: 1.23rem; /* Quinto nivel de título */
    color: var(--black-2);
    line-height: 1.5;
}
h6 {
    font-size: 1.2rem; /* Sexto nivel de título */
    color: var(--black-2);
    line-height: 1.5;
}
p {
    font-size: 1.2rem ; /* Párrafo normal */
    line-height: 1.6;
    font-weight: 400;
    color: var(--black-3);
    margin: 0;
    transition: 0.4s;
    text-align: justify;
}
.link-blue{
    color: var(--blue-2);
    text-decoration: underline;
    font-size: 1.1rem;
}
.center-big div:nth-child(2){
    transform: scale(1.1);
}
.d-none{
    display: none !important;
}
/* estilos scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Ancho del scrollbar */
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--gray-4);
    border-radius: 0.4rem;
}
::-webkit-scrollbar-thumb {
    border-radius: 0.4rem;
    background: var(--gray-1); /* Color de fondo del thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-1); /* Color de fondo del thumb al hacer hover */
}
/* estilo de botones */                  
.btn{
    padding:  0.8rem;
    /* height: 47px !important; */
    text-decoration: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    background-color: var(--gray-3);
    border: none;
    outline: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--black-3);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn.disabled{
    cursor: not-allowed !important;
    transform: none !important;
}
.btn-green{
    background-color: var(--green-2);
    color: white;
}
.btn-red{
    background-color: var(--red-2);
    color: white;
}
.btn-blue{
    background-color: var(--blue-2);
    color: white;
}
.btn-white{
    background-color: white !important;
    color: var(--blue-1);
    box-shadow: 0 0 0.1rem var(--black-2);
}
.btn:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.btn span{
    margin: 0 0.2rem;
}

/* Tamaños de texto */
.font-095{
    font-size: 0.95rem !important;
}
.font-09{
    font-size: 0.9rem !important;
}
.font-1{
    font-size: 1rem !important;
}
.font-1-1{
    font-size: 1.1rem !important;
}
.font-1-2{
    font-size: 1.2rem !important;
}
.font-1-3{
    font-size: 1.3rem !important;
}
.font-1-4{
    font-size: 1.4rem !important;
}
.font-1-5{
    font-size: 1.5rem !important;
}
.font-2{
    font-size: 2rem !important;
}
.font-3{
    font-size: 3rem !important;
}
.font-4{
    font-size: 4rem !important;
}
.font-5{
    font-size: 5rem !important;
}
.font-6{
    font-size: 6rem !important;
}
.font-7{
    font-size: 7rem !important;
}
.font-8{
    font-size: 8rem !important;
}
.font-9{
    font-size: 9rem !important;
}
.opacity-1{
    opacity: 0.1;
}
.opacity-2{
    opacity: 0.2;
}
.opacity-3{
    opacity: 0.3;
}
.opacity-4{
    opacity: 0.4;
}
.opacity-5{
    opacity: 0.5;
}
.opacity-6{
    opacity: 0.6;
}
.opacity-7{
    opacity: 0.7;
}
.opacity-8{
    opacity: 0.8;
}
.opacity-9{
    opacity: 0.9;
}
.opacity-10{
    opacity: 1;
}
.fontw-100 {
    font-weight: 100 !important;
}

.fontw-200 {
    font-weight: 200 !important;
}

.fontw-300 {
    font-weight: 300 !important;
}

.fontw-400 {
    font-weight: 400 !important;
}

.fontw-500 {
    font-weight: 500 !important;
}

.fontw-600 {
    font-weight: 600 !important;
}

.fontw-700 {
    font-weight: 700 !important;
}

.fontw-800 {
    font-weight: 800 !important;
}

.fontw-900 {
    font-weight: 900 !important;
}

/* min-height classes */
.min-h-5{
    min-height: 5vh !important;
}
.min-h-10{
    min-height: 10vh !important;
}
.min-h-15{
    min-height: 15vh !important;
}
.min-h-20{
    min-height: 20vh !important;
}
.min-h-25{
    min-height: 25vh !important;
}
.min-h-30{
    min-height: 30vh !important;
}
.min-h-35{
    min-height: 35vh !important;
}
.min-h-40{
    min-height: 40vh !important;
}
.min-h-45{
    min-height: 45vh !important;
}
.min-h-50{
    min-height: 50vh !important;
}
.min-h-55{
    min-height: 55vh !important;
}
.min-h-60{
    min-height: 60vh !important;
}
.min-h-65{
    min-height: 65vh !important;
}
.min-h-70{
    min-height: 70vh !important;
}
.min-h-75{
    min-height: 75vh !important;
}
.min-h-80{
    min-height: 80vh !important;
}
.min-h-85{
    min-height: 85vh !important;
}
.min-h-90{
    min-height: 90vh !important;
}
.min-h-95{
    min-height: 95vh !important;
}
.min-h-100{
    min-height: 100vh !important;
}
/* height classes */
.h-5{
    height: 5vh !important;
}
.h-10{
    height: 10vh !important;
}
.h-15{
    height: 15vh !important;
}
.h-20{
    height: 20vh !important;
}
.h-25{
    height: 25vh !important;
}
.h-30{
    height: 30vh !important;
}
.h-35{
    height: 35vh !important;
}
.h-40{
    height: 40vh !important;
}
.h-45{
    height: 45vh !important;
}
.h-50{
    height: 50vh !important;
}
.h-55{
    height: 55vh !important;
}
.h-60{
    height: 60vh !important;
}
.h-65{
    height: 65vh !important;
}
.h-70{
    height: 70vh !important;
}
.h-75{
    height: 75vh !important;
}
.h-80{
    height: 80vh !important;
}
.h-85{
    height: 85vh !important;
}
.h-90{
    height: 90vh !important;
}
.h-95{
    height: 95vh !important;
}
.h-100{
    height: 100vh !important;
}
.h-50p{
    height: 50% !important;
}
.h-100p{
    height: 100% !important;
}
/* max-height classes */
.max-h-5{
    max-height: 5vh !important;
}
.max-h-10{
    max-height: 10vh !important;
}
.max-h-15{
    max-height: 15vh !important;
}
.max-h-20{
    max-height: 20vh !important;
}
.max-h-25{
    max-height: 25vh !important;
}
.max-h-30{
    max-height: 30vh !important;
}
.max-h-35{
    max-height: 35vh !important;
}
.max-h-40{
    max-height: 40vh !important;
}
.max-h-45{
    max-height: 45vh !important;
}
.max-h-50{
    max-height: 50vh !important;
}
.max-h-55{
    max-height: 55vh !important;
}
.max-h-60{
    max-height: 60vh !important;
}
.max-h-65{
    max-height: 65vh !important;
}
.max-h-70{
    max-height: 70vh !important;
}
.max-h-75{
    max-height: 75vh !important;
}
.max-h-80{
    max-height: 80vh !important;
}
.max-h-85{
    max-height: 85vh !important;
}
.max-h-90{
    max-height: 90vh !important;
}
.max-h-95{
    max-height: 95vh !important;
}
.max-h-100{
    max-height: 100vh !important;
}

/* Width */
.w-1 {
    min-width: 1% !important;
    width: 1% !important;
}
.w-2 {
    min-width: 2% !important;
    width: 2% !important;
}
.w-3 {
    min-width: 3% !important;
    width: 3% !important;
}
.w-4 {
    min-width: 4% !important;
    width: 4% !important;
}
.w-5 {
    min-width: 5% !important;
    width: 5% !important;
}
.w-6 {
    min-width: 6% !important;
    width: 6% !important;
}
.w-7 {
    min-width: 7% !important;
    width: 7% !important;
}
.w-8 {
    min-width: 8% !important;
    width: 8% !important;
}
.w-9 {
    min-width: 9% !important;
    width: 9% !important;
}
.w-10 {
    min-width: 10% !important;
    width: 10% !important;
}
.w-11 {
    min-width: 11% !important;
    width: 11% !important;
}
.w-12 {
    min-width: 12% !important;
    width: 12% !important;
}
.w-13 {
    min-width: 13% !important;
    width: 13% !important;
}
.w-14 {
    min-width: 14% !important;
    width: 14% !important;
}
.w-15 {
    min-width: 15% !important;
    width: 15% !important;
}
.w-16 {
    min-width: 16% !important;
    width: 16% !important;
}
.w-17 {
    min-width: 17% !important;
    width: 17% !important;
}
.w-18 {
    min-width: 18% !important;
    width: 18% !important;
}
.w-19 {
    min-width: 19% !important;
    width: 19% !important;
}
.w-20 {
    min-width: 20% !important;
    width: 20% !important;
}
.w-21 {
    min-width: 21% !important;
    width: 21% !important;
}
.w-22 {
    min-width: 22% !important;
    width: 22% !important;
}
.w-23 {
    min-width: 23% !important;
    width: 23% !important;
}
.w-24 {
    min-width: 24% !important;
    width: 24% !important;
}
.w-24_5 {
    min-width: 24.5% !important;
    width: 24.5% !important;
}
.w-25 {
    min-width: 25% !important;
    width: 25% !important;
}
.w-25rem {
    min-width: 25rem !important;
    width: 25rem !important;
}
.w-26 {
    min-width: 26% !important;
    width: 26% !important;
}
.w-27 {
    min-width: 27% !important;
    width: 27% !important;
}
.w-28 {
    min-width: 28% !important;
    width: 28% !important;
}
.w-29 {
    min-width: 29% !important;
    width: 29% !important;
}
.w-30 {
    min-width: 30% !important;
    width: 30% !important;
}
.w-30rem {
    min-width: 30rem !important;
    width: 30rem !important;
}
.w-31 {
    min-width: 31% !important;
    width: 31% !important;
}
.w-32 {
    min-width: 32% !important;
    width: 32% !important;
}
.w-32_5{
    min-width: 32.7% !important;
    width: 32.7% !important;
}
.w-33 {
    min-width: 33% !important;
    width: 33% !important;
}
.w-34 {
    min-width: 34% !important;
    width: 34% !important;
}
.w-35 {
    min-width: 35% !important;
    width: 35% !important;
}
.w-36 {
    min-width: 36% !important;
    width: 36% !important;
}
.w-37 {
    min-width: 37% !important;
    width: 37% !important;
}
.w-38 {
    min-width: 38% !important;
    width: 38% !important;
}
.w-39 {
    min-width: 39% !important;
    width: 39% !important;
}
.w-40 {
    min-width: 40% !important;
    width: 40% !important;
}
.w-40rem {
    min-width: 40rem !important;
    width: 40rem !important;
}
.w-41 {
    min-width: 41% !important;
    width: 41% !important;
}
.w-42 {
    min-width: 42% !important;
    width: 42% !important;
}
.w-43 {
    min-width: 43% !important;
    width: 43% !important;
}
.w-44 {
    min-width: 44% !important;
    width: 44% !important;
}
.w-45 {
    min-width: 45% !important;
    width: 45% !important;
}
.w-46 {
    min-width: 46% !important;
    width: 46% !important;
}
.w-47 {
    min-width: 47% !important;
    width: 47% !important;
}
.w-48 {
    min-width: 48% !important;
    width: 48% !important;
}
.w-49 {
    min-width: 49% !important;
    width: 49% !important;
}
.w-49-input {
    min-width: 49.3% !important;
    width: 49.3% !important;
}
.w-49_6{
    min-width: 49.6% !important;
    width: 49.6% !important;
}
.w-50 {
    min-width: 50% !important;
    width: 50% !important;
}

.w-51 {
    min-width: 51% !important;
    width: 51% !important;
}

.w-52 {
    min-width: 52% !important;
    width: 52% !important;
}

.w-53 {
    min-width: 53% !important;
    width: 53% !important;
}

.w-54 {
    min-width: 54% !important;
    width: 54% !important;
}

.w-55 {
    min-width: 55% !important;
    width: 55% !important;
}

.w-56 {
    min-width: 56% !important;
    width: 56% !important;
}

.w-57 {
    min-width: 57% !important;
    width: 57% !important;
}

.w-58 {
    min-width: 58% !important;
    width: 58% !important;
}

.w-59 {
    min-width: 59% !important;
    width: 59% !important;
}

.w-60 {
    min-width: 60% !important;
    width: 60% !important;
}

.w-61 {
    min-width: 61% !important;
    width: 61% !important;
}

.w-62 {
    min-width: 62% !important;
    width: 62% !important;
}

.w-63 {
    min-width: 63% !important;
    width: 63% !important;
}

.w-64 {
    min-width: 64% !important;
    width: 64% !important;
}

.w-65 {
    min-width: 65% !important;
    width: 65% !important;
}

.w-66 {
    min-width: 66% !important;
    width: 66% !important;
}

.w-67 {
    min-width: 67% !important;
    width: 67% !important;
}

.w-68 {
    min-width: 68% !important;
    width: 68% !important;
}

.w-69 {
    min-width: 69% !important;
    width: 69% !important;
}

.w-70 {
    min-width: 70% !important;
    width: 70% !important;
}

.w-75{
    min-width: 75% !important;
    width: 75% !important;
}
.w-77{
    min-width: 77% !important;
    width: 77% !important;
}
.w-78{
    min-width: 78% !important;
    width: 78% !important;
}
.w-80{
    min-width: 80% !important;
    width: 80% !important;
}
.w-85{
    min-width: 85% !important;
    width: 85% !important;
}
.w-89{
    min-width: 89% !important;
    width: 89% !important;
}
.w-90{
    min-width: 90% !important;
    width: 90% !important;
}
.w-95{
    min-width: 95% !important;
    width: 95% !important;
}
.w-98{
    min-width: 98% !important;
    width: 98% !important;
}
.w-100{
    min-width: 100% !important;
    width: 100% !important;
}

/* Margenes */
.margin-0{
    margin: 0 !important;
}
.margin-05{
    margin-top: 0.5% !important;
    margin-bottom: 0.5% !important;
}
.margin-05rem{
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.margin-1{
    margin-top: 1% !important;
    margin-bottom: 1% !important;
}
.margin-1rem{
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.margin-2rem{
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}
.margin-2{
    margin-top: 2% !important;
    margin-bottom: 2% !important;
}
.margin-3{
    margin-top: 3% !important;
    margin-bottom: 3% !important;
}
.margin-4{
    margin-top: 4% !important;
    margin-bottom: 4% !important;
}
.margin-5{
    margin-top: 5% !important;
    margin-bottom: 5% !important;
}
.margin-6{
    margin-top: 6% !important;
    margin-bottom: 6% !important;
}
.margin-7{
    margin-top: 7% !important;
    margin-bottom: 7% !important;
}
.margin-8{
    margin-top: 8% !important;
    margin-bottom: 8% !important;
}
.margin-9{
    margin-top: 9% !important;
    margin-bottom: 9% !important;
}
.margin-10{
    margin-top: 10% !important;
    margin-bottom: 10% !important;
}

/* Margenes Top */
.margin-t-05rem{
    margin-top: 0.5rem !important;
}
.margin-t-05{
    margin-top: 0.5% !important;
}
.margin-t-1{
    margin-top: 1% !important;
}
.margin-t-2{
    margin-top: 2% !important;
}
.margin-t-3{
    margin-top: 3% !important;
}
.margin-t-4{
    margin-top: 4% !important;
}
.margin-t-5{
    margin-top: 5% !important;
}
.margin-t-6{
    margin-top: 6% !important;
}
.margin-t-7{
    margin-top: 7% !important;
}
.margin-t-8{
    margin-top: 8% !important;
}
.margin-t-9{
    margin-top: 9% !important;
}
.margin-t-10{
    margin-top: 10% !important;
}

/* Margenes Bottom */
.margin-b-05{
    margin-bottom: 0.5% !important;
}
.margin-b-1{
    margin-bottom: 1% !important;
}
.margin-b-2{
    margin-bottom: 2% !important;
}
.margin-b-3{
    margin-bottom: 3% !important;
}
.margin-b-4{
    margin-bottom: 4% !important;
}
.margin-b-5{
    margin-bottom: 5% !important;
}
.margin-b-6{
    margin-bottom: 6% !important;
}
.margin-b-7{
    margin-bottom: 7% !important;
}
.margin-b-8{
    margin-bottom: 8% !important;
}
.margin-b-9{
    margin-bottom: 9% !important;
}
.margin-b-10{
    margin-bottom: 10% !important;
}
.margin-b-01rem {
    margin-bottom: 0.1rem !important;
}
.margin-b-02rem {
    margin-bottom: 0.2rem !important;
}
.margin-b-03rem {
    margin-bottom: 0.3rem !important;
}
.margin-b-04rem {
    margin-bottom: 0.4rem !important;
}
.margin-b-05rem {
    margin-bottom: 0.5rem !important;
}
.margin-b-06rem {
    margin-bottom: 0.6rem !important;
}
.margin-b-07rem {
    margin-bottom: 0.7rem !important;
}
.margin-b-08rem {
    margin-bottom: 0.8rem !important;
}
.margin-b-09rem {
    margin-bottom: 0.9rem !important;
}
.margin-b-1rem {
    margin-bottom: 1rem !important;
}
.margin-b-2rem {
    margin-bottom: 2rem !important;
}


/* Márgenes Left */
.margin-l-1{
    margin-left: 1% !important;
}
.margin-l-05rem{
    margin-left: 0.5rem !important;
}
.margin-l-1rem{
    margin-left: 1rem !important;
}
.margin-l-2{
    margin-left: 2% !important;
}
.margin-l-3{
    margin-left: 3% !important;
}
.margin-l-4{
    margin-left: 4% !important;
}
.margin-l-5{
    margin-left: 5% !important;
}
.margin-l-6{
    margin-left: 6% !important;
}
.margin-l-7{
    margin-left: 7% !important;
}
.margin-l-8{
    margin-left: 8% !important;
}
.margin-l-9{
    margin-left: 9% !important;
}
.margin-l-10{
    margin-left: 10% !important;
}

/* Márgenes Right */
.margin-r-0{
    margin-right: 0 !important;
}
.margin-r-05rem{
    margin-right: 0.5rem !important;
}
.margin-r-1{
    margin-right: 1% !important;
}
.margin-r-1rem{
    margin-right: 1rem !important;
}
.margin-r-2{
    margin-right: 2% !important;
}
.margin-r-3{
    margin-right: 3% !important;
}
.margin-r-4{
    margin-right: 4% !important;
}
.margin-r-5{
    margin-right: 5% !important;
}
.margin-r-6{
    margin-right: 6% !important;
}
.margin-r-7{
    margin-right: 7% !important;
}
.margin-r-8{
    margin-right: 8% !important;
}
.margin-r-9{
    margin-right: 9% !important;
}
.margin-r-10{
    margin-right: 10% !important;
}
.border-rad-0{
    border-radius: 0 !important;
}
.border-rad-04{
    border-radius: 0.4rem !important;
}
.border-rad-1{
    border-radius: 1rem !important;
}
.border-rad-2{
    border-radius: 2rem !important;
}
.border-rad-3{
    border-radius: 3rem !important;
}
.border-rad-4{
    border-radius: 4rem !important;
}
.border-rad-left-1{
    border-radius: 1rem 0 1rem 0;
}
.border-rad-right-1{
    border-radius: 0 1rem 0 1rem;
}
.padding-05-0{
    padding: 0.5rem 0 !important;
}
.padding-05{
    padding: 0.5rem !important;
}
.padding-0{
    padding: 0 !important;
}
.padding-08rem{
    padding: 0.8rem !important;
}
.padding-1rem{
    padding: 1rem !important;
}
/* hr */
hr{
    height: 0.05rem !important;
    border: none;
    margin: 0 auto;
    background-color: var(--gray-3);
}
.left-hr{
    margin: 0 auto 0 0 ;
}
.right-hr{
    margin: 0 0 0 auto ;
}
/* divs flex */
.flex{
    flex-flow: row wrap;
    display: flex;
}
.flex-center{
    flex-flow: row wrap;
    display: flex;
    align-items: center;
}
.flex-start{
    flex-flow: row wrap;
    display: flex;
    align-items: flex-start;
}
.flex-start-between{
    flex-flow: row wrap;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-end-between{
    flex-flow: row wrap;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.flex-start-start{
    flex-flow: row wrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.flex-center-center{
    flex-flow: row wrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center-end{
    flex-flow: row wrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-center-between{
    flex-flow: row wrap;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.flex-center-start{
    flex-flow: row wrap;
    display: flex;
    align-items: center !important;
    justify-content: flex-start;
}
.flex-stretch-between{
    flex-flow: row wrap;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.flexc-end-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: center;
}
.flexc-end-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-between;
}
.flexc{
    display: flex;
    flex-flow: column nowrap;
}
.flexc-start{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start !important;
}
.flexc-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.flexc-center-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.flexc-start-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
}
.flexc-center-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}
.flex-nowrap{
    flex-flow: row nowrap !important;
}
.text-center, .main-title{
    text-align: center !important;
}
.text-justify{
    text-align: justify !important;
}
.text-start{
    text-align: start !important;
}
.text-end{
    text-align: end ;
}
.box{
    padding: 2rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    box-shadow: 0 0 0.05rem var(--black-4);
}
.box-1{
    padding: 1rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    box-shadow: 0 0 0.05rem var(--black-4);
}
.box-05{
    padding: 0.5rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    box-shadow: 0 0 0.05rem var(--black-4);
}
.modal {
    display: none;
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 100% !important; 
    height: 100% !important;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.67); 
}
.modal-content {
    position: relative;
    background-color: #fefefe;
    padding: 1rem 1.5rem;
    border: 1px solid #888;
    width: 100% !important;
    border-radius: 0.4rem;
    max-height: 95vh;
    max-width: 95vw;
    height: 100% !important;
}
.modal-dialog{
    width: 60% !important;
}
.modal-header{
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.modal-header .modal-title{
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
    text-align: center;
}
.modal-body{
    overflow-y: auto;
    height: 80% !important;
    max-height: 75vh;
    padding: 0 1rem;
}
.modal-footer{
    width: 100% !important;
    display: flex;
    justify-content: flex-end;
    margin: 1% 0 0 0;   
}
.modal-footer .btn{
    margin-left: 1%;
    font-size: 1rem;
}
.modal-close{
    font-size: 2.5rem;
    color: var(--very-light-black);
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}
.modal-close:hover{
    color: var(--red);
    transition: 0.5s;
    transform: scale(1.1);
}

/* TABLA */
.table-section{
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    overflow-x: auto;
    padding: 0rem 0.1rem;
    margin: 0.5rem 0;
    background-color: transparent;
}
table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0 0.3rem;
    table-layout: auto;
    min-width: 60rem;
    margin: 0.1% 0 0.1% 0 !important;
}
table thead tr:first-child{
    color: var(--blue-1);
    background-color: var(--gray-5);
    /* position: sticky; */
    z-index: 2;
    top: 0;
    box-shadow: none !important;
}
table thead tr:first-child th{
    border: solid 0.3rem white;
    border-radius: 0.4rem !important;
}
/* table tr:nth-child(odd){
    background-color: var(--gray-8);
} */
table thead tr th{
    padding: 1rem;
    font-weight: 500;
    font-size: 1.2rem;
}
table tr td{
    padding: 1rem ;
    font-size: 1.2rem;
    vertical-align: top  !important;
    color: var(--black-2);
    /* user-select: all; */
}
table th, table td{
    vertical-align: middle !important;
}
/* table td table td{
    background-color: var(--gray-9) !important;
    box-shadow: 0 0 0.1rem var(--black-2);
    padding: 0.5rem !important;
    border-radius: 0.4rem !important;
} */
table td table td .table-btn span{
    font-size: 1.5rem !important;
}
table td table tr:first-child td:first-child{
    border-top-left-radius: 0.4rem;
}
table td table tr:first-child td:last-child{
    border-top-right-radius: 0.4rem;
}
table td table tr:last-child td:first-child{
    border-bottom-left-radius: 0.4rem;
}
table td table tr:last-child td:last-child{
    border-bottom-right-radius: 0.4rem;
}

th:first-child {
    border-top-left-radius: 0.4rem;
}
th:last-child {
    border-top-right-radius: 0.4rem;
}
tr:last-child td:first-child{
    border-bottom-left-radius: 0.4rem;
}
tr:last-child td:last-child{
    border-bottom-right-radius: 0.4rem;
}
tr:first-child{
    height: auto !important;
}
tr:last-child{
    border-radius: 0 0 0.4rem 0.4rem;
}
tr:not(:last-child) {
    border-bottom: 1px solid #ccc;
}
tr{
    /* background-color: var(--gray-5); */
    background-color: white;
    width: 100%;
    transition: 0.3s;
    border-radius: 0.4rem !important;
    vertical-align: top;
    /* box-shadow: 0 0 0.1rem var(--black-2); */
    /* height: 5rem; */
}

#resultados-container .paginate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: sticky;
    border-radius: 0.4rem;
    top: 10%;
    min-width: 20rem;
    z-index: 10; 
    width: auto;
    background-color: white; 
    box-shadow: 0 0 0.1rem var(--black-2);
  }

  #resultados-container .paginate .btn:disabled{
    user-select: none !important;
    cursor: not-allowed;
    background-color: var(--gray-3) !important;
    color: var(--black-1) !important;
    opacity: 0.5 !important;
  }
    

.t-width-5{
    width: 4.5% !important;
}
.t-width-10{
    width: 9.5% !important;
}
.t-width-15{
    width: 14.5% !important;
}
.t-width-18{
    width: 17.5% !important;
}
.t-width-20{
    width: 19.5% !important;
}
.t-width-25{
    width: 24.5% !important;
}
.t-width-30{
    width: 29.5% !important;
}
.t-width-35{
    width: 34.5% !important;
}
.t-width-40{
    width: 39.5% !important;
}
.t-width-45{
    width: 44.5% !important;
}
.t-width-50{
    width: 49.5% !important;
}
.t-width-55{
    width: 54.5% !important;
}
.t-width-60{
    width: 59.5% !important;
}
.t-width-70{
    width: 70% !important;
}
.t-width-74{
    width: 74% !important;
}
.t-width-75{
    width: 75% !important;
}
.t-width-80{
    width: 79.5% !important;
}
.t-width-85{
    width: 85% !important;
}
.t-width-90{
    width: 89.5% !important;
}
.t-width-100{
    width: 99.5% !important;
}

.input-container {
    position: relative;
    border-radius: 0.4rem;
    display: flex;
    flex-flow: column nowrap;
}
.input-container label{
    margin: 0 0 0.7rem 0;
    color: var(--black-3);
    font-size: 1.2rem;
    font-weight: 600 !important;
}
.input-btn{
    height: 50px !important;
}
.input-field {
    display: block;
    position: relative;
    border: none;
    padding:  0.2rem 0.5rem;
    height: 50px !important;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    font-size: 1.2rem;
    box-shadow: 0 0 0.1rem var(--black-2) !important;
    margin: 0;
    transition: 0.2s;
    color: var(--black-3);
    background-color: white;
}
.input-field-textarea {
    display: block;
    border: none;
    padding:  0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    min-height: 5rem;
    resize: vertical;
    height: 8rem;
    max-height: 30rem;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--black-2) !important;
    margin: 0;
    transition: 0.2s;
    color: var(--black-3);
    background-color: var(--gray-9);
}
.input-field:focus, select:focus{
    background-color: var(--gray-10) !important;
    transition: 0.2s;
    color: black !important;
    box-shadow: 0 0 0.15rem var(--black-4) !important;
}
.input-field::placeholder{
    text-transform: none !important;
}
.input-field:disabled{
    background-color: var(--gray-3) !important;
    cursor: not-allowed;
}
.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.2rem !important;
    min-height: 0.2rem;
    background-color: var(--blue-2);
    border-radius: 0.4rem;
    transition: all 0.5s ease-in-out;
}
.input-field:focus + .underline {
    width: 100%;
}
.list-labels{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
    text-decoration: none;
    list-style: none;
}
.list-labels li{
    background-color: var(--blue-7);
    box-shadow: 0 0 0.05rem var(--black-2);
    padding: 0.2rem 0.6rem;
    margin: 0 0.4rem 0.1rem 0;
    border-radius: 1rem;
    /* color: var(--light-black); */
    color: var(--black-2);
    transition: 0.1s;
    font-size: 0.94rem;
    font-weight: 400;
}
.list-labels li:hover{
    background-color: var(--gray-9);
    transition: 0.2s;
}
.list-labels .list-active{
    background-color: white !important;
}
.list-labels .list-active p{
    color: var(--blue-2) !important;

}

.hover-this:hover{
    opacity: 0.7;
    transition: 0.3s;
    transform: scale(1.01);
}
.hover-this{
    transition: 0.3s;
    cursor: pointer !important;
}
.hover-this-2{
    transition: 0.3s !important;
    cursor: pointer !important;
}
.hover-this-2:hover{
    transition: 0.3s;
    transform: scale(1.05) !important;
}

.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--blue-2);
    border-radius: 0.4rem;
    overflow: hidden;
    margin: 0;
    user-select: none;
    width: max-content;
}

.switch-container label {
    cursor: pointer;
    font-size: 1.1rem !important;
    color: var(--black-1);
    transition: background-color 0.3s;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem !important;
    margin: 0;
    font-weight: 200 !important;
    transition: 0.4s;
    justify-content: center;
    line-height: 1.1rem;
    /* min-width: 50%; */
}
.switch-container label.active{
    background-color: var(--blue-6);
    color: var(--blue-1) !important;
}
.switch-container label:hover{
    opacity: 0.7;
    transition: 0.4s;
}

.switch-container-1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--gold-2);
    border-radius: 0.4rem;
    overflow: hidden;
    margin: 0;
    user-select: none;
    width: max-content;
}
.switch-container-1 label {
    cursor: pointer;
    font-size: 1.1rem !important;
    color: var(--black-1);
    transition: background-color 0.3s;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem !important;
    margin: 0;
    font-weight: 200 !important;
    transition: 0.4s;
    justify-content: center;
    line-height: 1.1rem;
    /* min-width: 50%; */
}
.switch-container-1 label.active{
    border-radius: 0.4rem 0 0 0.4rem !important;
    background-color: var(--gold-7);
    color: var(--gold-1) !important;
}
.switch-container-1 label:hover{
    opacity: 0.7;
    transition: 0.4s;
}
.general-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
    min-height: 80vh;
}
.banner-container{
    display: flex;
    flex-flow: column nowrap;
    width: 95%;
    border-radius: 2rem !important;
}
.carousel {
    position: relative;
    display: flex;
    border-radius: 2rem !important;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.carousel-track > img {
    flex: 0 0 100%; 
    max-width: 100%;
    object-fit: cover;
}

.carousel-track {
    transition: 0.4s;
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
}
.carousel-track > img:hover {
    transform: scale(1.02);
    width: 100% !important;
    transition: 0.4s;
}
.carousel img {
    transition: 0.4s;
    width: 100%;

    /* height: 100%; */
    object-fit: contain;
}
.carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 5px;
    margin: 1rem 0;
}
.indicator {
    width: 80px;
    height: 10px;
    background-color: rgb(220, 220, 220);
    cursor: pointer;
    transition: background-color 0.3s;
}
.indicator.active {
    background-color: var(--blue-2);
    opacity: 1 !important;
    transform: scale(1.1) !important;
}
.carousel-arrow {
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0rem;
    width: 2.5rem;
    margin: 0 1rem;
    height: 2.5rem;
    border-radius: 100%;
    transition: color 0.3s;
}
.carousel-arrow span{
    font-size: 2.5rem !important;
}
.carousel-arrow:hover {
    color: var(--blue-1);
}

.carousel-arrow.prev {
    left: 10px;
}

.carousel-arrow.next {
    right: 10px;
}
.circle-1rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
}

.circle-1_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
}

.circle-2rem {
    border-radius: 100%;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
}

.circle-2_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
}

.circle-3rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem !important;
    min-width: 3rem !important;
    height: 3rem !important;
}

.circle-3_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    height: 3.5rem !important;
}

.circle-4rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem !important;
    min-width: 4rem !important;
    height: 4rem !important;
}

.circle-4_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    height: 4.5rem !important;
}

.circle-5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem !important;
    min-width: 5rem !important;
    height: 5rem !important;
}

.circle-5_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem !important;
    min-width: 5.5rem !important;
    height: 5.5rem !important;
}

.circle-6rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem !important;
    min-width: 6rem !important;
    height: 6rem !important;
}

.circle-6_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem !important;
    min-width: 6.5rem !important;
    height: 6.5rem !important;
}

.circle-7rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem !important;
    min-width: 7rem !important;
    height: 7rem !important;
}

.circle-7_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem !important;
    min-width: 7.5rem !important;
    height: 7.5rem !important;
}

.circle-8rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem !important;
    min-width: 8rem !important;
    height: 8rem !important;
}

.circle-9rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem !important;
    min-width: 9rem !important;
    height: 9rem !important;
}

.circle-9_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.5rem !important;
    min-width: 9.5rem !important;
    height: 9.5rem !important;
}

.circle-10rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10rem !important;
    min-width: 10rem !important;
    height: 10rem !important;
}

.circle-10_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.5rem !important;
    min-width: 10.5rem !important;
    height: 10.5rem !important;
}

.circle-11rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11rem !important;
    min-width: 11rem !important;
    height: 11rem !important;
}

.circle-11_5rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.5rem !important;
    min-width: 11.5rem !important;
    height: 11.5rem !important;
}

.circle-12rem {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem !important;
    min-width: 12rem !important;
    height: 12rem !important;
}

.square-rounded {
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem !important;
    min-width: 9rem !important;
    height: 9rem !important;
    overflow: hidden;
}

.square-rounded img {
    width: 70%;
    height: 70%;
    object-fit: cover;
}

.square-flat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem !important;
    min-width: 9rem !important;
    height: 9rem !important;
    border-radius: 0;
}

.square-flat img {
    max-width: 100%;
    height: auto;
}

.position-front{
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtitle {
    opacity: 0; /* Oculto por defecto */
    transform: translateY(10px); /* Posición inicial */
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; /* Suavidad */
}

.subtitle.visible {
    opacity: 1; /* Aparece */
    transform: translateY(0); /* Vuelve a su posición original */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Empieza invisible */
        transform: translateY(20px); /* Ligero desplazamiento hacia abajo */
    }
    to {
        opacity: 1; /* Se vuelve visible */
        transform: translateY(0); /* Vuelve a su posición original */
    }
}

.fade-in {
    opacity: 0; /* Oculto por defecto */
    transform: translateY(20px); /* Posición inicial */
    transition: opacity 0.5s ease-out, transform 1s ease-out; /* Suavidad */
}

.fade-in.visible {
    opacity: 1; /* Aparece */
    transform: translateY(0); /* Vuelve a su posición */
}

.accordion {
    width: 100%;
    margin: 20px auto;
    background-color: transparent;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.accordion-item {
    width: 100% ;
    margin-bottom: 1rem;
    border: solid 0.05rem var(--gray-2);
    border-radius: 1rem !important;
    /* box-shadow: 0 0 0.1rem var(--black-1); */
}
.accordion-item span{
    font-size: 2.5rem;
}
.accordion-header {
    background-color: white;
    color: var(--blue-2);
    padding: 15px;
    border-radius: 1rem !important;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 1.2rem;
    cursor: pointer;
    outline: none !important;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}
.accordion-header:hover {
    background-color: var(--gray-4);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: #f9f9f9;
    padding: 0 15px;
    border-radius: 0 0 1rem 1rem;
}
.accordion-content p {
    padding: 0.3rem 0;
    margin: 0;
    font-size: 1.2rem !important;
}
.accordion-header.active {
    background-color: var(--blue-2);
    border: solid var(--blue-2);
    color: white !important;
    border-radius: 1rem 1rem 0 0 !important;
}
.accordion-header .material-symbols-outlined {
    transition: transform 0.3s ease;
}
.accordion-header.active .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Accordion tema médicos (gold) */
.bg-gold-3 .accordion-header {
    color: var(--gold-2);
}

.bg-gold-3 .accordion-header:hover {
    background-color: var(--gold-7);
}

.bg-gold-3 .accordion-header.active {
    background-color: var(--gold-2);
    border: solid var(--gold-2);
    color: white !important;
}

.image-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: auto;
    border-radius: 0;
    margin: 0;
    padding: 0;
    transition: 0.2s;
}
.img-c-black {
    padding: 3rem; /* Espacio dentro del borde */
    background-color: white; /* Fondo blanco */
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.5), /* Sombra interna */
        0 10px 20px rgba(0, 0, 0, 0.3); /* Sombra externa */
    border: 2rem solid transparent; /* Borde inicial transparente */
    border-radius: 0.4rem; /* Bordes ligeramente redondeados */
    display: inline-block; /* Ajusta el tamaño al contenido */

    min-height: 30rem !important;
    /* Borde con imagen de textura */
    border-image: url('https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/images/cedro-textura2.png') 30 round;
}

.link-gold{
    color: var(--blue-2) !important;
    text-decoration: underline !important;
}
.reseña {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none;
}
.hidden {
    display: none;
}

.reseña.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.reseña.fade-out {
    opacity: 0;
    transform: translateY(20px);
}

.appear-responsive {
    display: none ;
}
.checkbtn, #check {
    display: none;
}
.list-info{
    display: flex;
    flex-flow: column nowrap;
    overflow: auto !important;

}
.list-info li{
    flex-flow: nowrap !important;
}
.list-content-junta .content{
    overflow-y: auto !important;
    max-height: 118rem !important;
}

/* Breakpoints */

.appear-1825, .appear-1780, .appear-1700, .appear-1570, .appear-1500, .appear-1480, .appear-1470, .appear-1260, .appear-1250, 
.appear-1200, .appear-1080, .appear-1000, .appear-992, .appear-880, .appear-800, .appear-768, .appear-600, .appear-480 {
    display: none !important;
}
@media (max-width: 1850px) {
    .disappear-1850{ display: none !important; }
    .appear-1850 { display: flex !important; }
    .ver-mas { display: flex !important; }
}
@media (max-width: 1825px) {
    .disappear-1825{ display: none !important; }
    .appear-1825 { display: flex !important; }
    .ver-mas { display: flex !important; }
}
@media (max-width: 1780px) {
    .disappear-1780{ display: none !important; }
    .appear-1780 { display: flex !important; }
    .ver-mas { display: flex !important; }
}
@media (max-width: 1700px) {
    .force-column-1700 { flex-direction: column !important; }
    .force-text-center-1700 { text-align: center !important; }
    .disappear-1700 { display: none !important; }
    .appear-1700 { display: flex !important; }

    .w-24-r-1700 { width: 24% !important; }
    .w-32-r-1700 { width: 32% !important; }
    .w-49-r-1700 { width: 49% !important; }
    .w-100-r-1700 { width: 100% !important; }

    .h-50-r-1700 { height: 50vh !important; }
    .h-100-r-1700 { height: 100vh !important; }
    .h-auto-r-1700 { height: auto !important; }

    .mb-1rem-r-1700 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1700 { margin-bottom: 2rem !important; }
}

@media (max-width: 1650px) {
    .force-column-1650 { flex-direction: column !important; }
    .force-text-center-1650 { text-align: center !important; }
    .disappear-1650 { display: none !important; }
    .appear-1650 { display: flex !important; }

    .w-24-r-1650 { width: 24% !important; }
    .w-32-r-1650 { width: 32% !important; }
    .w-49-r-1650 { width: 49% !important; }
    .w-100-r-1650 { width: 100% !important; }

    .h-50-r-1650 { height: 50vh !important; }
    .h-100-r-1650 { height: 100vh !important; }
    .h-auto-r-1650 { height: auto !important; }

    .mb-1rem-r-1650 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1650 { margin-bottom: 2rem !important; }
}


@media (max-width: 1570px) {
    .force-column-1570 { flex-direction: column !important; }
    .force-text-center-1570 { text-align: center !important; }
    .disappear-1570 { display: none !important; }
    .appear-1570 { display: flex !important; }

    .w-32-r-1570 { width: 32% !important; }
    .w-49-r-1570 { width: 49% !important; }
    .w-100-r-1570 { width: 100% !important; }

    .h-50-r-1570 { height: 50vh !important; }
    .h-100-r-1570 { height: 100vh !important; }
    .h-auto-r-1570 { height: auto !important; }

    .mb-1rem-r-1570 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1570 { margin-bottom: 2rem !important; }

    .header a h1{
        font-size: 1.4rem !important;
    }
    .header .w-85{
        width: 80% !important;
        min-width: 80% !important;
    }
}
@media (max-width: 1500px) {
    .force-column-1500 { flex-direction: column !important; }
    .force-text-center-1500 { text-align: center !important; }
    .disappear-1500 { display: none !important; }
    .appear-1500 { display: flex !important; }
}
@media (max-width: 1480px) {
    .force-column-1480 { flex-direction: column !important; }
    .force-text-center-1480 { text-align: center !important; }
    .disappear-1480 { display: none !important; }
    .appear-1480 { display: flex !important; }
    header ul:first-child a { margin: 0 0.5rem !important; }

    .w-32-r-1480 { width: 32% !important; }
    .w-49-r-1480 { width: 49% !important; }
    .w-100-r-1480 { width: 100% !important; }

    .h-50-r-1480 { height: 50vh !important; }
    .h-100-r-1480 { height: 100vh !important; }
    .h-auto-r-1480 { height: auto !important; }

    .mb-1rem-r-1480 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1480 { margin-bottom: 2rem !important; }

    .modal-dialog{ width: 80% !important; }
}

@media (max-width: 1470px) {
    .force-column-1470 { flex-direction: column !important; }
    .force-text-center-1470 { text-align: center !important; }
    .disappear-1470 { display: none !important; }
    .appear-1470 { display: flex !important; }

    .w-32-r-1470 { width: 32% !important; }
    .w-49-r-1470 { width: 49% !important; }
    .w-100-r-1470 { width: 100% !important; }

    .h-50-r-1470 { height: 50vh !important; }
    .h-80-r-1470 { height: 80vh !important; }
    .h-100-r-1470 { height: 100vh !important; }
    .h-auto-r-1470 { height: auto !important; }

    .mb-1rem-r-1470 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1470 { margin-bottom: 2rem !important; }
}
@media (max-width: 1300px){
    .hero-medic, .hero-medic-1{
        min-height:50vh !important;
    }
    .hero-medic .hero-this{
        background-image: url("https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/images/banner-medicos.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        width: 100%;
        min-height: 50vh !important;

    }
    .hero-medic-1 .hero-this{
        background-image: url("https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/images/1.png");
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        position: relative;
        width: 100%;
        min-height: 50vh !important;
    }
    .hero-medic .hero-this::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.774); /* Ajusta si quieres más oscuridad */
        z-index: 0;
    }

    .hero-medic-1 .hero-this::before{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.671); /* Ajusta si quieres más oscuridad */
        z-index: 0;
    }

    .hero-medic .hero-this > *, .hero-medic-1 .hero-this > * {
        position: relative;
        z-index: 1;
    }

    .disappear-1300 { 
        display: none !important; 
    }

    .appear-1300 { 
        display: flex !important; 
    }

    .w-100-r-1300 { width: 100% !important; }


}


@media (max-width: 1260px) {
    .force-column-1260 { flex-direction: column !important; }
    .force-text-center-1260 { text-align: center !important; }
    .disappear-1260 { display: none !important; }
    .appear-1260 { display: flex !important; }

    .w-32-r-1260 { width: 32% !important; }
    .w-49-r-1260 { width: 49% !important; }
    .w-100-r-1260 { width: 100% !important; }

    .h-50-r-1260 { height: 50vh !important; }
    .h-100-r-1260 { height: 100vh !important; }
    .h-auto-r-1260 { height: auto !important; }

    .mb-1rem-r-1260 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1260 { margin-bottom: 2rem !important; }

     .font-9 { font-size: 7rem !important; }  /* ↓ de 9rem a 7rem */
    .font-8 { font-size: 6rem !important; }  /* ↓ de 8rem a 6rem */
    .font-7 { font-size: 5.5rem !important; }  /* ↓ de 7rem a 5.5rem */
    .font-6 { font-size: 4.5rem !important; }  /* ↓ de 6rem a 4.5rem */
    .font-5 { font-size: 3.8rem !important; }  /* ↓ de 5rem a 3.8rem */
    .font-4 { font-size: 3rem !important; }  /* ↓ de 4rem a 3rem */
    .font-3 { font-size: 2.5rem !important; }  /* ↓ de 4rem a 3rem */

    
}

@media (max-width: 1250px) {
    .force-column-1250 { flex-direction: column !important; }
    .force-text-center-1250 { text-align: center !important; }
    .disappear-1250 { display: none !important; }
    .appear-1250 { display: flex !important; }

    .w-32-r-1250 { width: 32% !important; }
    .w-49-r-1250 { width: 49% !important; }
    .w-100-r-1250 { width: 100% !important; }

    .h-50-r-1250 { height: 50vh !important; }
    .h-100-r-1250 { height: 100vh !important; }
    .h-auto-r-1250 { height: auto !important; }

    .mb-1rem-r-1250 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1250 { margin-bottom: 2rem !important; }

    .switch-container .disappear-responsive, .switch-container-1 .disappear-responsive { display: none !important; }
    .switch-container div, .switch-container div { margin: 0 !important; }
}

@media (max-width: 1200px) {
    .force-column-1200 { flex-direction: column !important; flex-flow: wrap !important; }
    .force-text-center-1200 { text-align: center !important; }
    .disappear-1200 { display: none !important; }
    .appear-1200 { display: flex !important; }
    .force-column-1200 .w-32 { width: 100% !important; margin: 0 0 1rem 0; }

    .w-32-r-1200 { width: 32% !important; }
    .w-49-r-1200 { width: 49% !important; min-width: 49% !important;}
    .w-95-r-1200 { width: 95% !important; }
    .w-100-r-1200 { width: 100% !important; }

    .h-50-r-1200 { height: 50vh !important; }
    .h-100-r-1200 { height: 100vh !important; }
    .h-auto-r-1200 { height: auto !important; }

    .mb-1rem-r-1200 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1200 { margin-bottom: 2rem !important; }

    /* #gallery-container .image-container{
        width: 48% !important;
    } */

    .indicator {
        width: 20px; /* Más pequeño */
        height: 20px; /* Mantiene proporción */
        border-radius: 50%; /* Convertir en círculo */
        background-color: white;
        transition: 0.4s;
        opacity: 0.6;
        box-shadow: 0 0 0.1rem var(--black-1);
    }
    .indicator:hover{
        opacity: 1 !important;
        transition: 0.4s;
    }
    .carousel-indicators {
        position: absolute;
        bottom: 4%; /* Mover arriba */
        left: 50%;
        opacity: 1;
        transform: translateX(-50%);
        gap: 10px; /* Espaciado entre los círculos */
    }
    .carousel-arrow:hover{
        transition: 0.4s;
        opacity: 1 !important;
    }
    .carousel-arrow{
        /* display: none !important; */
        position: absolute;
        transition: 0.4s;
        bottom: 50%;
        opacity: 0.6;
    }
    .carousel-arrow.next{
        right: -10px !important;
    }
    .carousel-arrow.prev{
        left: -10px !important;
    }
    .bienvenidascroll{
        height: 130vh !important;
    }
}
.force-justify{
    text-align: justify !important;
    margin: 1rem 0 !important;
}
.force-start{
    text-align: start !important;
}
@media (max-width: 1080px) {
    .force-start{
        text-align: start !important;
    }
    .force-column-1080 { flex-direction: column !important; }
    .force-text-center-1080 { text-align: center !important; }
    .disappear-1080 { display: none !important; }
    .appear-1080 { display: flex !important; }

    .w-32-r-1080 { width: 32% !important; }
    .w-49-r-1080 { width: 49% !important; }
    .w-100-r-1080 { width: 100% !important; }

    .h-50-r-1080 { height: 50vh !important; }
    .h-100-r-1080 { height: 100vh !important; }
    .h-auto-r-1080 { height: auto !important; }

    .mb-1rem-r-1080 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1080 { margin-bottom: 2rem !important; }

    
    
    .lister-info {
        display: none; /* Oculta la lista en móviles */
    }
    #selectConsejos {
        display: block; /* Muestra el select */
        width: 100%;
        padding: 10px;
        font-size: 1.2rem;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .footer{
        flex-flow: column nowrap !important;
    }
    .footer p{
        margin: 0.5rem 0 !important;
    }
    .list-content-junta .content{
        max-height: 111rem !important;
    }
}

@media (max-width: 1200px) {
    .articles-certeza .w-32{
            
        padding: 1.2rem !important;
    }
    .articles-certeza .w-32 .image-container {
        width: 40% !important;
        min-width: 40% !important;
        margin:  0 !important;
        height: 100%;
    }
    .articles-certeza .w-32 .text-limit{
        width: 58% !important;
        -webkit-line-clamp: 8 !important;
    }
    .articles-certeza .w-32 .article-inter{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .articles-certeza .w-32 .article-down{
        margin: 1.5rem 0 0 0 !important;
    }
}
@media (max-width: 1000px) {
    .force-column-1000 { flex-direction: column !important; }
    .force-text-center-1000 { text-align: center !important; }
    .disappear-1000 { display: none !important; }
    .appear-1000 { display: flex !important; }

    .w-32-r-1000 { width: 32% !important; }
    .w-49-r-1000 { width: 49% !important; }
    .w-100-r-1000 { width: 100% !important; }

    .h-50-r-1000 { height: 50vh !important; }
    .h-100-r-1000 { height: 100vh !important; }
    .h-auto-r-1000 { height: auto !important; }

    .mb-1rem-r-1000 { margin-bottom: 1rem !important; }
    .mb-2rem-r-1000 { margin-bottom: 2rem !important; }
    .m-1rem-r-1000{
        margin: 1rem 0 !important;
    }
    .m-5rem-r-1000{
        margin: 5rem 0 !important;
    }
    
    .font-4{
        font-size: 3rem !important;
    }
}

@media (max-width: 992px) {
    .force-column-992 { flex-direction: column !important; }
    .force-text-center-992 { text-align: center !important; }
    .disappear-992 { display: none !important; }
    .appear-992 { display: flex !important; }

    .w-32-r-992 { width: 32% !important; }
    .w-49-r-992 { width: 49% !important; }
    .w-100-r-992 { width: 100% !important; }
    .w-25rem-r-992{
        width: 25rem !important;
    }

    .h-50-r-992 { height: 50vh !important; }
    .h-100-r-992 { height: 100vh !important; }
    .h-auto-r-992 { height: auto !important; }

    .flexc-center-r-992{
     align-items: center !important;       
    }

    .force-start{
        text-align: start !important;
    }

    .mb-1rem-r-992 { margin-bottom: 1rem !important; }
    .mb-2rem-r-992 { margin-bottom: 2rem !important; }
}
@media (max-width: 900px){
    .force-column-880 { flex-direction: column !important; }
    .force-text-center-880 { text-align: center !important; }
    .disappear-880 { display: none !important; }
    .appear-880 { display: flex !important; }

    .w-32-r-880 { width: 32% !important; }
    .w-49-r-880 { width: 49% !important; }
    .w-100-r-880 { width: 100% !important; }

    .header .w-33 { width: 50% !important; }
    .header .w-33 h1 { text-align: start !important; }

    .nav-menu { display: none !important; }
        .nav.appear-responsive {
        display: flex !important;
        flex-flow: column nowrap;
        align-items: center !important;
        justify-content: flex-start;
        position: fixed !important;
        width: 100% !important;
        height: 100%;
        background-color: #fffffff6;
        z-index: 10000 !important;
        left: -100%;
        transition: all 0.5s;
        overflow-y: auto !important;
        padding-bottom: 2rem;
    }
    .nav.appear-responsive a p{
        padding: 0.4rem 0.8rem;
        transition: 0.5s;
    }
    .nav.appear-responsive a{
        transition: 0.5s;
        margin-bottom: 0.5rem;
        border-radius: 0.4rem;
    }
    .nav.appear-responsive a:hover{
        transition: 0.5s;
        background-color: var(--blue-6);
        transform: scale(1.1);
    }
    .checkbtn {
        display: flex !important;
        cursor: pointer;
        align-items: center;
        transition: 0.5s;
        padding: 0.5rem 0;
        user-select: none;
    }
    .checkbtn span { transition: 0.4s; font-size: 2.5rem; }
    .checkbtn:hover > span { color: var(--blue-1); transition: 0.4s; }
    #check:checked ~ .nav.appear-responsive { left: 0 !important; }
    #check:checked ~ body { overflow: hidden !important; }

    .header .w-85{
        width: 100% !important;
        min-width: 100% !important;
    }
    .header a h1{
        width: 100% !important;
        margin: 0 !important;
        padding: 0.2rem !important;
    }
    .force-start{
        text-align: start !important;
    }
}

@media (max-width: 800px) {
    .force-column-800 { flex-direction: column !important; }
    .force-text-center-800 { text-align: center !important; }
    .disappear-800 { display: none !important; }
    .appear-800 { display: flex !important; }

    .w-32-r-800 { width: 32% !important; }
    .w-49-r-800 { width: 49% !important; }
    .w-100-r-800 { width: 100% !important; }

    .h-50-r-800 { height: 50vh !important; }
    .h-100-r-800 { height: 100vh !important; }
    .h-auto-r-800 { height: auto !important; }

    .mb-1rem-r-800 { margin-bottom: 1rem !important; }
    .mb-2rem-r-800 { margin-bottom: 2rem !important; }

    .increment-number{
        font-size: 5.5rem !important;
        line-height: 5.5rem !important;
    }
    .increment-menu{
        height: 139vh !important;
    }
    .increment-text{
        font-size: 1.2rem !important;
        margin-bottom: 1.3rem !important;
    }
    .force-start{
        text-align: start !important;
    }

}

.list-labels a {
    word-break: break-all;
    overflow-wrap: anywhere;
}

.articles-certeza .w-32 .bg-transparent-black.box{
    padding: 0.7rem !important;
}
.articles-certeza .w-32 .bg-transparent-black.box h2{
    font-size: 1.3rem !important;
}
@media (max-width: 780px) {
    .articles-certeza .w-32 .image-container {
        width: 50% !important;
        min-width: 50% !important;
        margin:  0 !important;
        height: 100%;
    }
    .articles-certeza .w-32 .text-limit{
        width: 48% !important;
    }
    .articles-certeza .w-32 .bg-transparent-black.box{
        padding: 0.5rem !important;
    }
    .articles-certeza .w-32 .bg-transparent-black.box h2{
        font-size: 1.2rem !important;
    }
}


@media (max-width: 768px) {
    .force-column-768 { flex-direction: column !important; }
    .force-text-center-768 { text-align: center !important; }
    .disappear-768 { display: none !important; }
    .appear-768 { display: flex !important; }

    .w-32-r-768 { width: 32% !important; }
    .w-49-r-768 { width: 49% !important; }
    .w-95-r-768 { width: 95% !important; }
    .w-100-r-768 { width: 100% !important; }

    .h-50-r-768 { height: 50vh !important; }
    .h-100-r-768 { height: 100vh !important; }
    .h-auto-r-768 { height: auto !important; }

    .m-3rem-r-768 { margin: 3rem 0 !important; }
    .mb-1rem-r-768 { margin-bottom: 1rem !important; }
    .mb-2rem-r-768 { margin-bottom: 2rem !important; }

    .font-7 { font-size: 4.5rem !important; }  /* ↓ de 5.5rem a 4.5rem */
    .font-6 { font-size: 3.8rem !important; }  /* ↓ de 4.5rem a 3.8rem */
    .font-4 { font-size: 2.5rem !important; }  /* ↓ de 3rem a 2.5rem */
    .font-2 { font-size: 1.5rem !important; }  /* ↓ de 1.8rem a 1.5rem */
     p, .paragraph-ul{
        font-size: 1.1rem !important;
     }
     .title{
        font-size: 1.5rem !important;
     }
     .sub-title{
        font-size: 1.3rem !important;
     }
    .modal-dialog{ width: 95% !important; }
    .force-start{
        text-align: start !important;
    }
}

@media (max-width: 600px) {
    .force-column-600 { flex-direction: column !important; }
    .force-text-center-600 { text-align: center !important; }
    .disappear-600 { display: none !important; }
    .appear-600 { display: flex !important; }

    .w-32-r-600 { width: 32% !important; }
    .w-49-r-600 { width: 49% !important; }
    .w-80-r-600 { width: 80% !important; }
    .w-100-r-600 { width: 100% !important; }

    .h-50-r-600 { height: 50vh !important; }
    .h-100-r-600 { height: 100vh !important; }
    .h-auto-r-600 { height: auto !important; }

    .mb-1rem-r-600 { margin-bottom: 1rem !important; }
    .mb-2rem-r-600 { margin-bottom: 2rem !important; }

    .force-start{
        text-align: start !important;
    }

}

@media (max-width: 480px) {
    .force-column-480 { flex-direction: column !important; }
    .force-text-center-480 { text-align: center !important; }
    .disappear-480 { display: none !important; }
    .appear-480, .sub-appear-480 { display: flex !important; }

    .w-32-r-480 { width: 32% !important; }
    .w-49-r-480 { width: 49% !important; }
    .w-100-r-480 { width: 100% !important; }

    .h-50-r-480 { height: 50vh !important; }
    .h-100-r-480 { height: 100vh !important; }
    .h-auto-r-480 { height: auto !important; }

    .mb-1rem-r-480 { margin-bottom: 1rem !important; }
    .mb-2rem-r-480 { margin-bottom: 2rem !important; }
    .mb-3rem-r-480 { margin-bottom: 3rem !important; }
    .margin-t-2, .margin-t-1{
        margin-top: 1rem !important;
    }
    .text-start{
        text-align: center !important;
    }
    p{
        text-align: start !important;
    }
    .header a h1{
        font-size: 1rem !important;
    }
    .btn .font-1-5{
        font-size: 1.2rem !important;
    }
    .image-container{
        height: -webkit-fill-available !important;
    }

    .articles-certeza .w-32 .article-inter{
        flex-flow: column nowrap !important;
    }
    .articles-certeza .w-32 .image-container{
        width: 100% !important;
        height: 18vh !important;
    }
    .articles-certeza .w-32 .text-limit{
        width: 100% !important;
        -webkit-line-clamp: 6 !important;
    }

    .force-start{
        text-align: start !important;
    }
}
@media (max-width: 450px) {
    .w-90-r-450{
        width: 90% !important;
    }
    .w-25rem-r-992{
        width: 100% !important;
        height: auto !important;
    }
    .img-c-black{
        padding: 1rem !important;
        min-height: 0 !important;
        border: 1rem solid transparent; /* Borde inicial transparente */
        border-image: url('https://prod-cncm-websites-bucket.s3.us-east-1.amazonaws.com/conacem.org.mx/public/images/cedro-textura2.png') 30 round;
    }
}
@media (max-width: 390px) {

    .btn{
        width: 100% !important;
    }

    .bienvenidascroll {
        height: auto !important;
        min-height: auto !important;
    }
}

/* El contenedor crece según su contenido, no está forzado */
.bienvenidascroll {
    height: auto !important;
    min-height: auto !important;
    position: relative;
    overflow: hidden; /* evita que el video sobresalga */
}

/* El video se convierte en fondo adaptado */
.bienvenidascroll video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* se adapta como background */
    z-index: 0;
}

/* El contenido ya NO debe ocupar height: 100% */
.position-front .item {
    position: relative !important;
    z-index: 1 !important;
    width: 100%;
    height: auto !important; /* clave */
    padding: 2rem 0; /* para separar visualmente */
}

.text-limit {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El contenedor se adapta al contenido */
.hero-video-flex {
    position: relative;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden;
}

/* El video se vuelve un fondo */
.hero-video-flex video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    z-index: 0;
}

/* El contenido se coloca encima del video */
.hero-video-flex .item {
    position: relative !important;
    z-index: 1 !important;
    width: 100%;
    height: auto !important;
    padding: 2rem 0;
}

/* Mobile: nada de alturas forzadas */
@media (max-width: 390px) {
    .hero-video-flex {
        height: auto !important;
        min-height: auto !important;
    }
}



    /* Estilos para la galería */
#gallery-container{
    width: 100%;
    margin: auto;
    list-style: none;
    padding: 10px 10px 20px 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Distribución flexible */
    gap: 10px; /* Espaciado uniforme */
    justify-content: center;
}

    #gallery-container .image-container {
        width: 100%;
        aspect-ratio: 4 / 3; /* Mantiene proporción 4:3 */
        overflow: hidden;
        cursor: pointer;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #gallery-container .image-container img{
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta imagen sin deformar */
        transition: transform 0.2s ease-in-out;
    }
    #gallery-container img:hover {
        transform: scale(1.1);
    }

    #fullImage {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
    }
    .no-scroll{
        overflow: hidden !important;
    }
    .no-scroll-x{
        overflow-x: hidden !important;
    }

    .alerta {
        background-color: #ffc107;
        color: #333;
        padding: 1rem;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
        margin-top: 1rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        opacity: 1;
        transition: opacity 0.5s ease, transform 0.5s ease;
        position: fixed;
        top: 15vh;
        z-index: 999999;
        right: 2.5%;
        font-size: 1.4rem;
        padding: 1rem;
    }
    
    .alerta.ocultar {
        opacity: 0;
        transform: translateY(-10px);
    }
    
    
    @keyframes aparecer {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }