:root {
    /* Blue Shades */
    --blue-1: #11325b; /* Más oscuro */
    --blue-2: #1a4a83; /* Color principal */
    --blue-2-opacity: #1a4983cf;
    --red-2-opacity: #911c2ac6;
    --blue-3: #246498;
    --blue-4: #3b7bb0;
    --blue-5: #64abe4;
    --blue-6: #8abde7;
    --blue-7: #a0cbed;
    --blue-8: #e7e7e7; /* Muy claro */
    --blue-9: #eaf4ff; /* Aún más claro */
    --blue-10: #fffbf4; /* Casi blanco */    

    --gold-1: #a47c4d; /* Darker Gold */
    --gold-2: #1d2b4f; /* Primary Gold */
    --gold-3: #e8b882; /* Light Gold */
    --gold-4: #f2c795; /* Very Light Gold */
    --gold-5: #f7d7ad; /* Comfortable Gold */
    --gold-6: #fbe7c6; /* Hover Gold */
    --gold-7: #fdf4e2; /* Hover Light Gold */
    --gold-8: #fff9f0; /* Subtle Gold */

    --red-1: #6e0a15; /* Más oscuro */
    --red-2: #911c2a; /* Color principal */
    --red-3: #bb0d0d; 
    --red-4: #e77d7d;
    --red-5: #f7b7b7;
    --red-6: #ffd7d7;
    --red-7: #fff1f1;
    --red-8: #fff7f7; /* Muy claro */
    --red-9: #fffbfb; /* Casi blanco */
    --red-10: #fffcfc; /* Lo más claro posible */


    /* 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; }
.blue-9 { color: var(--blue-9) !important; }
.blue-10 { color: var(--blue-10) !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; }
.bg-blue-9 { background-color: var(--blue-9) !important; }
.bg-blue-10 { background-color: var(--blue-10) !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; }
.red-7 { color: var(--red-7) !important; }
.red-8 { color: var(--red-8) !important; }
.red-9 { color: var(--red-9) !important; }
.red-10 { color: var(--red-10) !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; }
.bg-red-7 { background-color: var(--red-7) !important; }
.bg-red-8 { background-color: var(--red-8) !important; }
.bg-red-9 { background-color: var(--red-9) !important; }
.bg-red-10 { background-color: var(--red-10) !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;
}

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


.noto-sans-1 {
    font-family: "Noto Sans", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }
  
/* General styles from your code */
* {
    box-sizing: border-box !important;
    font-family: "Noto Sans", serif;
}
.contents, html {
    display: contents !important;
    margin: 0;
}
html{
    overflow: hidden !important;
}
body {
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    background-color: var(--gray-4);
    width: 100vw;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
main{
    height: 100vh;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%;
    /* background-color: var(--blue-2); */
    padding: 0.7rem 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}
.silo{
    transition: 0.6s;
    z-index: 800;
    position: sticky;
    top: 0;
}
.header a h1 {
    font-family: 'EB Garamond', serif !important;
    font-size: 3.8rem;
    user-select: none;
    line-height: 3.9rem;
    font-weight: 400 !important;
    color: white;
    text-decoration: none;
}
.header ul {
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
}
.header ul:first-child a {
    margin: 0 1rem !important;
}
.header ul a{
    border-radius: 0.4rem;
    transition: 0.5s;
}
.header ul a.active li{
    background-color: var(--blue-2);
    color: white !important;
    border-radius: 0.4rem;
}
.header ul a:hover li{
    background-color: var(--blue-7);
    transition: 0.5s;
    /* color: white; */
    transform: scale(1.01);
}
.header ul li {
    color: var(--blue-2);
    border-radius: 0.4rem;
    transition: 0.4s;
    padding: 0.5rem 1rem !important;
    font-size: 1.2rem;
}
.header .switch-container span {
    font-size: 2rem;
    margin-left: 0.3rem;
}
.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    width: 100%;
    /* background-color: var(--blue-2); */
    padding: 0.7rem 0;
    transition: all 0.3s ease;
}
h1, h2, h3{
    font-weight: 300;
}
a{
    text-decoration: none;
    color: white;
}
ul{
    margin: 0;
    padding: 0;
}
footer{
    display: none !important;
}
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.4rem; /* Segundo nivel de título */
    color: var(--black-2);
    line-height: 1.3;
    font-weight: 300 !important;
}
h3 {
    font-size: 1.3rem; /* Tercer nivel de título */
    color: var(--black-2);
    line-height: 1.4;
}
h4 {
    font-size: 1.2rem; /* Cuarto nivel de título */
    color: var(--black-2);
    line-height: 1.4;
}
h5 {
    font-size: 1.1rem; /* Quinto nivel de título */
    color: var(--black-2);
    line-height: 1.5;
}
h6 {
    font-size: 1.1rem; /* Sexto nivel de título */
    color: var(--black-2);
    line-height: 1.5;
}
p {
    font-size: 1.09rem; /* 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: 1rem 2rem;
    /* height: 47px !important; */
    text-decoration: none;
    border-radius: 2rem;
    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-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-31 {
    min-width: 31% !important;
    width: 31% !important;
}
.w-32 {
    min-width: 32% !important;
    width: 32% !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-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-90{
    min-width: 90% !important;
    width: 90% !important;
}
.w-95{
    min-width: 95% !important;
    width: 95% !important;
}
.w-100{
    min-width: 100% !important;
    width: 100% !important;
}

/* Margenes */
.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-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;
}


/* 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-04{
    border-radius: 0.4rem;
}
.border-rad-1{
    border-radius: 1rem;
}
.border-rad-2{
    border-radius: 2rem;
}
.border-rad-3{
    border-radius: 3rem;
}
.border-rad-4{
    border-radius: 4rem;
}
.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-0{
    padding: 0 !important;
}
.padding-1{
    padding: 1rem !important;
}
/* hr */
hr{
    height: 0.05rem !important;
    border: none;
    margin: 0 auto;
    background-color: var(--gray-2);
}
.left-hr{
    margin: 0 auto 0 0 ;
}
.right-hr{
    margin: 0 0 0 auto ;
}
/* divs flex */
.flex{
    display: flex;
}
.flex-center{
    display: flex;
    align-items: center;
}
.flex-start{
    display: flex;
    align-items: flex-start;
}
.flex-start-between{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-center-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center-end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-center-between{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.flex-center-start{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flex-stretch-between{
    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{
    display: flex;
    flex-flow: column nowrap;
}
.flexc-start{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.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-center-start{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
}
.flexc-start-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
}
.flexc-start-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
}
.flexc-center-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}
.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: 1.5rem;
    border-radius: 1rem;
    transition: 0.3s;
    /* box-shadow: 0 0 0.1rem var(--black-4); */
}
.modal {
    display: none;
    position: fixed;
    z-index: 999; 
    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;
    height: 100% !important;
    max-width: 95vw;
}
.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;
}
.modal-body p{
    font-size: 1.1rem !important;
}
.modal-footer{
    width: 100% !important;
    display: flex;
    justify-content: flex-end;
    margin: 1% 0 0 0;   
}
.modal-footer .btn{
    margin-left: 1% !important;
}
.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: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0rem 0.1rem;
    margin: 0.5rem 0;
    background-color: transparent;
}
table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.2rem;
    table-layout: auto;
    margin: 0.1% 0 0.1% 0 !important;
}
table tr:first-child{
    color: white;
    background-color: var(--blue-2) !important;
    /* position: sticky; */
    z-index: 2;
    top: 0;
    box-shadow: none !important;
}
/* table tr:nth-child(odd){
    background-color: var(--gray-8);
} */
table tr:first-child th{
    padding: 1rem;
    font-weight: 500;
    font-size: 1.2rem;
}
table tr td{
    padding: 1rem ;
    font-size: 1.2rem;
    vertical-align: top ;
    color: var(--black-2);
    /* user-select: all; */
}
table tr:hover{
    background-color: var(--blue-8);
    transform: scale(1.01);
}

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{
    /* background-color: var(--gray-5); */
    background-color: white;
    width: 100%;
    transition: 0.3s;
    border-radius: 0.4rem !important;
    /* box-shadow: 0 0 0.1rem var(--black-2); */
    /* height: 5rem; */
}
/* tr:hover{
    background-color: var(--blue-7) !important;
    box-shadow: 0 0 0.1rem var(--black-4);
    transition: 0.2s;
} */
.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-2);
    font-size: 1.2rem !important;
    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-1) !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: none;
    height: 10rem;
    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: white;
    box-shadow: 0 0 0.1rem var(--black-2);
    padding: 0.6rem 1rem;
    margin: 0 0.4rem 0.1rem 0;
    border-radius: 0.4rem;
    /* 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;
}

.hover-this:hover{
    opacity: 0.8;
    transition: 0.3s;
    transform: scale(1.07) !important;
}
.hover-this{
    transition: 0.3s;
    cursor: pointer !important;
}
.hover-div{
    transition: 0.5s !important;
    /* cursor: pointer !important; */
}
.hover-div:hover{
    transition: 0.5s;
    transform: scale(1.02) !important;
}

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

.switch-container label {
    cursor: pointer;
    font-size: 1.2rem !important;
    color: white;
    transition: background-color 0.3s;
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin: 0;
    font-weight: 200 !important;
    transition: 0.4s;
    justify-content: center;
    line-height: 1.2rem;
}
.switch-container label.active{
    border-radius: 0.4rem 0 0 0.4rem !important;
}
.switch-container label:hover{
    opacity: 0.7;
    color: white;
    transition: 0.4s;
}
.general-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
}
.banner-container{
    display: flex;
    flex-flow: column nowrap;
    width: 95%;
    border-radius: 2rem !important;
}

.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;
    justify-content: center;
    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;
}

.position-front{
    position: relative;
}
.position-front .item{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1580px){
    .switch-container{
        width: 27% !important;
        min-width: 0 !important;
    }
}
@media (max-width: 1480px){
    .switch-container{
        width: 30% !important;
        min-width: 0 !important;
    }
    header .w-90{
        width: 98% !important;
    }
    header ul:first-child a{
        margin: 0 0.5rem !important;
    }
}

@media (max-width: 1260px){
    .switch-container .disappear-responsive{
        display: none !important;
    }
    .switch-container{
        width: 12% !important;
    }
    .switch-container div{
        margin: 0 !important;
    }
}
@media (max-width: 1000px){
}

@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.7s 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: 49% ;
    margin-bottom: 1rem;
}
.accordion-header {
    background-color: white;
    color: var(--blue-2);
    padding: 15px;
    border-radius: 1rem !important;
    width: 100%;
    text-align: left;
    font-size: 1.2rem;
    border: solid 0.1rem var(--gray-2);
    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.1rem !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);
}
.dashboard{
    width: 95%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.bar-chart {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}
.bar {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: right;
}

/* Loader */
#loader-container {
    display: none; 
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid #ffffff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade-in para la tabla */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.show {
    opacity: 1;
}

p.article-title{
    font-size: 2rem;
    font-weight: bold;
    color: darkblue;
    margin: 15px 0;
}
.title {
    font-size: 2rem;
    font-weight: bold;
    color: darkblue;
    margin: 15px 0;
}

.paragraph {
    font-size: 1.5rem;
    line-height: 1.9;
    color: black;
    margin: 10px 0;
}


.carousel {
    position: relative;
    overflow: hidden;
    display: flex;
    /* flex-flow: column; */
    width: 100%;
    /* height: 100px; */
}
.carousel-track {
    display: flex;
    gap: 20px;
    animation: scroll 40s linear infinite;
}
.carousel-track img {
    height: 12rem; /* Ajusta según tus necesidades */
    object-fit: contain;
}
@keyframes scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}


.animated-element {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Cuando el elemento es visible */
.animated-element.visible {
    opacity: 1;
    transform: translateX(0);
}
.bg-image-1{
    background-image: url('images/1.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-image-2{
    background-image: url('images/2.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-image-3{
    background-image: url('images/3.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-image-4{
    background-image: url('images/5.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.bg-image-5{
    background-image: url('images/6.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.1s;
    will-change: transform;
}
.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;
}


.noscroll{
    overflow: hidden !important;
}