:root {
    --colorUno: #E22327;
    --colorDos: #000000;
    --colorTres: #ffffff;
    --colorCuatro: #198754;
    --tipoLetra: 'Montserrat', sans-serif;
    --funteLogo: 'fuenteLogo';
}

/* Crea el tipo de letra */
@font-face {
    font-family: "fuenteLogo";
    src: url('../mainFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* :not(i) {
    font-family: var(--tipoLetra);
    overflow-x: hidden;
}

.titulo {
    font-family: var(--funteLogo);
    color: var(--colorDos);
    text-shadow:
        4px 2px 1px var(--colorTres),
        /* Sombra superior derecha */
        -4px -2px 1px var(--colorTres),
        /* Sombra inferior izquierda */
        4px -2px 1px var(--colorTres),
        /* Sombra superior izquierda */
        -4px 2px 1px var(--colorTres);
    /* Sombra inferior derecha */
}

.subtitulo {
    font-family: var(--funteLogo);
    color: var(--colorDos);
    text-shadow:
        4px 2px 1px var(--colorTres),
        /* Sombra superior derecha */
        -4px -2px 1px var(--colorTres),
        /* Sombra inferior izquierda */
        4px -2px 1px var(--colorTres),
        /* Sombra superior izquierda */
        -4px 2px 1px var(--colorTres);
    /* Sombra inferior derecha */
}

/* NAV */
nav {
    background-color: var(--colorUno) !important;
    padding: 0px !important;
}

nav a {
    margin-left: .5rem;
}

nav img {
    width: 10rem;
}

nav button {
    padding: .5rem;
    border-radius: 10px;
    border: none;
    background-color: var(--colorTres);
    box-sizing: border-box;
}

nav button:hover {
    background-color: var(--colorDos);
    color: var(--colorTres);
}

/* SPAN */
span {
    color: var(--colorUno);
    font-weight: 700;
}

#mainFoto {
    width: 100%;
}

/* BTN */
.btn {
    background-color: var(--colorUno);
    color: var(--colorTres);
}

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

.border-bottom {
    border-color: var(--colorUno) !important;
}
/* Colores verdes para ambiente */
#carouselUMS .border-bottom {
    border-color: var(--colorCuatro) !important;
}
#carouselUMS span {
    color: var(--colorCuatro) !important;
}


.border {
    border-color: var(--colorUno) !important;
}

.border-top {
    border-color: var(--colorUno) !important;
}

#featured-3 a {
    color: var(--colorUno) !important;
    text-decoration-color: var(--colorUno) !important;
}

.iconoPersonalizado {
    background-color: var(--colorUno) !important;
}

.colorPrincipal {
    color: var(--colorUno) !important;
}

.fondoSecundario {
    background-color: var(--colorDos) !important;
    color: var(--colorTres) !important;
}

li::marker {
    color: var(--colorUno) !important;
}

img {
    max-width: 100%;
}

input {
    border-color: var(--colorUno) !important;
}

textarea {
    border-color: var(--colorUno) !important;
}

label {
    color: var(--colorDos) !important;
}

.bg-personalizado {
    background: linear-gradient(to bottom, var(--colorUno), var(--colorDos));
    color: white;
}

.bg-personalizado span {
    color: var(--colorTres);
    font-style: italic;
}

.modal-header {
    background-color: var(--colorUno) !important;
    color: var(--colorTres) !important;
}

.card-modal :hover {
    cursor: pointer;
}

.card {
    background-color: var(--colorUno) !important;
}

.card h5 {
    color: var(--colorTres) !important;
}

/* Animación de entrada */
.scroll-fade-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
}

.scroll-fade-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}

.scroll-fade-up {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease;
}

.scroll-fade-down {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.8s ease;
}

.scroll-fade-center {
    opacity: 0;
    scale: 0.8;
    transition: all 0.8s ease;
}

/* Animación al aparecer */
.scroll-active {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    scale: 1 !important;
}

.hero {
    height: 30vh;
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url('../background.jpg');
    background-size: cover;
    background-position: top center;
    /* Ajusta a la parte superior de la imagen */
    background-attachment: fixed;
    color: var(--colorTres);
}

/* En dispositivos móviles */
@media (max-width: 768px) {
    .hero {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
        /* Enfoca el centro de la imagen */
    }
}