:root {
    /* Paleta de colores */
    --color-negro: #000000; /* negro */
    --color-blanco: #ffffff; /* blanco */
    --color-gris: #A8A6A6A5; /* gris */
    --color-amarillo: #F2C744; /* amarillo */
    --color-rojo: #e74c3c; /* rojo */
    --color-azul: #000fff; /* azul */
    --color-variante-3: #2ecc71; /* verde */
    --color-sombra: #00000033; /* gris oscuro */
    --color-amarilloCl: rgba(246, 226, 158, 0.19); /* amarillo pastel*/
    --color-rojoCl: rgba(255, 125, 109, 0.19); /* rojo pastel*/
    --color-azulCl: rgba(132, 137, 255, 0.19); /* azul pastel*/


    --fuente-principal: 'Times New Roman'; /* Tipografía */
}
.card-body-1{
    background-color:var(--color-amarilloCl);
}
.card-body-2{
    background-color:var(--color-azulCl);
}
.card-body-3{
    background-color:var(--color-rojoCl);
}

body {
    font-family: var(--fuente-principal), sans-serif;
    color: var(--color-negro);
    background-color: var(--color-blanco);
}

h1, h2 {
    color: var(--color-negro);
    text-shadow: var(--color-negro) 1px 0 10px;
}
h3, h4, h5{

}
h5 {
    font-family: var(--fuente-principal), sans-serif;
}

p, small {
    font-family: var(--fuente-principal), sans-serif;
    font-size: 15px;
}

/* fin de contenido principal */
/*inicio de ajustes de las letras del nav*/
.navbar {
    background-color: var(--color-blanco) /* blanco */
}

.letraNav {
    font-family: "Times New Roman", sans-serif;
    font-size: 15px !important;
    color: var(--color-negro);
}

.letraNav:hover {
    color: var(--color-negro);
    border-bottom: 2px solid var(--color-amarillo);
    text-shadow: var(--color-negro) 1px 0 10px;
    padding-bottom: 5px;
}

/*final del nav*/

/*comienzo de los diseños de las cartas*/
.border-start-card-1 {
    border-left: 0.25rem solid var(--color-amarillo); /* Azul tipo Bootstrap */
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.border-start-card-2 {
    border-left: 0.25rem solid var(--color-azul); /* Azul tipo Bootstrap */
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.border-start-card-3 {
    border-left: 0.25rem solid var(--color-rojo); /* Azul tipo Bootstrap */
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.carrusel-border {
    border: 0.25rem solid var(--color-amarillo); /* Azul tipo Bootstrap */
    border-radius: 0.35rem;
}

.cards-border {
    border: var(--color-negro) 1px solid;
    box-shadow: 2px 3px 3px 2px var(--color-sombra);
    transition: transform 0.3s ease; /* animación suave */
}

.cards-border:hover {
    transform: scale(1.05); /* zoom de 5% */
}

/*finalizacion del dinseño de las cartas*/

/*inicio de un diseo de cuandro*/
.cuadro {
    background: var(--color-gris);
    width: auto;
    height: 650px;
    border: 1px solid var(--color-negro);
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 10px 10px 10px 10px var(--color-sombra); /* Sombra */
}

/*finalizacion del diseño del cuadro*/

/*inicio del ajuste del logo*/
.logo {
    width: 100px; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
}

/*finalizacion del diseño del logo*/

/*colores de titulos para las targetas*/
.titulos-targeta {
    color: var(--color-negro);
}

/*fin colores titulos targetas*/
/*inicio custom imagen*/
.custom {
    width: 100%;
    height: 350px;
    box-shadow: 0 4px 8px var(--color-sombra);
}

/*final custom imagen*/

/* Estilos para spinner de carga */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-blanco);
    /* Fondo más oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* display: none; */
}

.loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loader {
    width: 70px;
    height: 70px;
    position: relative;
}

.loader:before {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 6px solid var(--color-blanco);
    /* Spinner blanco */
    position: absolute;
    top: 0;
    left: 0;
    animation: pulse 1s ease-in-out infinite;
}

.loader:after {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: var(--color-blanco);
    /* Spinner blanco */
    position: absolute;
    top: 0;
    left: 0;
    animation: spin 2s linear infinite;
}

.loader-text {
    font-size: 24px;
    margin-top: 20px;
    color: var(--color-blanco);
    /* Texto blanco */
    font-family: var(--fuente-principal), sans-serif;
    text-align: center;
    text-transform: uppercase;
}

/* Estilos para el overlay del modelo */
.modelo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Asegura que esté por encima del canvas */
}

.modelo-loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modelo-loader {
    width: 70px;
    height: 70px;
    position: relative;
}

.modelo-loader:before {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 6px solid var(--color-negro);
    position: absolute;
    top: 0;
    left: 0;
    animation: pulse 1s ease-in-out infinite;
}

.modelo-loader:after {
    content: "";
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: var(--color-negro);
    position: absolute;
    top: 0;
    left: 0;
    animation: spin 2s linear infinite;
}

.modelo-loader-text {
    font-size: 24px;
    margin-top: 20px;
    color: var(--color-negro);
    font-family: var(--fuente-principal), sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.card {
    position: relative; /* Asegura que los elementos internos como el overlay estén posicionados dentro de la tarjeta */
}

/*animaciones para los dos spiners*/
@keyframes pulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(0.6);
        opacity: 1;
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

.content {
    display: none;
}

.loaded .loader-container {
    display: none;
}

.loaded .content {
    display: block;
}

.clock {
    font-size: 0.8rem;
}

/* Fin estilos para spinner de carga *

/* Efecto al pasar el ratón */
.navbar-toggler:hover {
    background-color: var(--color-blanco); /* Fondo ligeramente gris cuando se pasa el ratón */
    border: 2px solid var(--color-sombra); /* Borde más visible al pasar el ratón */
}

/* Efecto de sombra cuando está en foco */
.navbar-toggler:focus {
    box-shadow: 0 0 10px var(--color-sombra); /* Sombra suave cuando está en foco */
}

.btn {
    background: var(--color-negro);
    color: var(--color-blanco);
}

.btn:hover {
    box-shadow: 0 0 10px var(--color-sombra); /* Sombra suave cuando está en foco */
    background: var(--color-gris);
    color: var(--color-blanco);
}

/*estilos para los logos*/
.logos{
    height: 90px;
    width:auto;
}
/*fin de los estilos para los logos*/
/*animaciones para las letras*/
.nombre span {
    display: inline-block;
    transition: transform 0.3s;
    will-change: transform;
}

.nombre:hover span {
    animation: salto-letra 0.6s ease forwards;
    animation-fill-mode: both;
}

@keyframes salto-letra {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-10px); }
    60%  { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

/* Delays uniformes para efecto en cadena */
.nombre:hover span:nth-child(1)  { animation-delay: 0s; }
.nombre:hover span:nth-child(2)  { animation-delay: 0.05s; }
.nombre:hover span:nth-child(3)  { animation-delay: 0.1s; }
.nombre:hover span:nth-child(4)  { animation-delay: 0.15s; }
.nombre:hover span:nth-child(5)  { animation-delay: 0.2s; }
.nombre:hover span:nth-child(6)  { animation-delay: 0.25s; }
.nombre:hover span:nth-child(7)  { animation-delay: 0.3s; }
.nombre:hover span:nth-child(8)  { animation-delay: 0.35s; }
.nombre:hover span:nth-child(9)  { animation-delay: 0.4s; }
.nombre:hover span:nth-child(10) { animation-delay: 0.45s; }
.nombre:hover span:nth-child(11) { animation-delay: 0.5s; }
.nombre:hover span:nth-child(12) { animation-delay: 0.55s; }
.nombre:hover span:nth-child(13) { animation-delay: 0.6s; }
.nombre:hover span:nth-child(14) { animation-delay: 0.65s; }
.nombre:hover span:nth-child(15) { animation-delay: 0.7s; }

/* puedes continuar hasta el número de letras máximo esperado */