:root {
    --color-rojo-chido: #d50d00; /* Rojo */ /* --color-rojo-chido: #d90429; */
    --color-rojo-chido--shade-20: #aa0a00;
    --color-naranja-zanahorioso: #f69d0b; /* Naranja (botones) */ /* --color-naranja-zanahorioso: #f4a261; */
    --color-naranja-zanahorioso--shade-20: #c57e09;
    --color-verde-oscuro: #044332; /* Verde */ /* --color-verde-oscuro: #2a4e47; */
    --color-verde-oscuro--rgb: 4, 67, 50;
    --color-verde-oscuro--shade-20: #033628;
    --color-verde-mentoso-oscuro: #33C68E; /* Verde (H1) */ /* --color-verde-mentoso-oscuro: #a7e9af; */
    --color-verde-mentoso-claro: #edfcf5; /* Verde claro (fondos) */ /* --color-verde-mentoso-claro: #eaf2f0; */
    --color-beige-claro: #f6f3ee; /* Beige (fondos) */ /* --color-beige-claro: #F9F6F0; */
    --color-amarillo-yema-de-huevo: #fbbf23; /* Amarillo */

    --color-azul-medio: #005b96;

    --cta-orange: #fbbf23; /* Amarillo */ /* --cta-orange: #fca311; */
    --dark-text: #343a40;
    --subtitle-gray: #6c757d;
    --light-text: #f8f9fa;
}


/* Generales */
.fw-100 {
    font-weight: 100;
}
.fw-300 {
    font-weight: 300;
}
.fw-900 {
    font-weight: 900;
}
.py-4rem {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-5rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.h-1em {
    height: 1em;
}
.h-2em {
    height: 2em;
}
.w-1em {
    width: 1em;
}
.w-2em {
    width: 2em;
}
.w-max-360px {
    max-width: 360px;
}
.top-1 {
    top: .25rem;
}
.top-2 {
    top: .5rem;
}
.top-3 {
    top: 1rem;
}
.top-4 {
    top: 1.5rem;
}
.top-5 {
    top: 3rem;
}
.bottom-1 {
    bottom: .25rem;
}
.bottom-2 {
    bottom: .5rem;
}
.bottom-3 {
    bottom: 1rem;
}
.bottom-4 {
    bottom: 1.5rem;
}
.bottom-5 {
    bottom: 3rem;
}

/* Tema */
html, body {
    font-size: 16px;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
}


/* Navbar */
.navbar {
    padding: 0.75rem 0;
    background-color: #fff !important;
    transition: box-shadow 0.3s ease-in-out;
}
.navbar-brand img {
    height: 45px;
}
.link-navbar,
.navbar-nav .nav-link {
    color: var(--dark-text) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    transition: color 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}
.link-navbar::after,
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-rojo-chido);
    transition: width 0.3s ease;
}
.link-navbar:hover::after,
.link-navbar.active::after,
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: calc(100% - 2rem);
}


/* Banner */
.main-banner {
    position: relative;
    background-size: cover;
    color: white;
    text-align: center;
    overflow: hidden;
}
.main-banner .container { position: relative; z-index: 2; }
.main-banner h1 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.main-banner img.banner-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); 
    z-index: 0;
}
.main-banner video.banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); 
    z-index: 0;
}



/* Generales Tema */
.color-amarillo-yema-de-huevo {
    color: var(--color-amarillo-yema-de-huevo);
}
.color-naranja-zanahorioso {
    color: var(--color-naranja-zanahorioso);
}
.color-rojo-chido {
    color: var(--color-rojo-chido);
}
.color-verde-mentoso-claro {
    color: var(--color-verde-mentoso-claro);
}
.color-verde-mentoso-oscuro {
    color: var(--color-verde-mentoso-oscuro);
}
.color-verde-oscuro {
    color: var(--color-verde-oscuro);
}
.bg-beige-claro {
    background-color: var(--color-beige-claro);
}
.bg-verde-mentoso-claro {
    background-color: var(--color-verde-mentoso-claro);
}
.bg-verde-mentoso-oscuro {
    background-color: var(--color-verde-mentoso-oscuro);
}
.bg-verde-oscuro {
    background-color: var(--color-verde-oscuro);
}
.border-verde-oscuro {
    border-color: var(--color-verde-oscuro);
}

.btn-rojo-chido {
    background-color: var(--color-rojo-chido);
    border-color: var(--color-rojo-chido);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-rojo-chido:hover {
    background-color: var(--color-rojo-chido--shade-20);
    border-color: var(--color-rojo-chido--shade-20);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-naranja-zanahorioso {
    background-color: var(--color-naranja-zanahorioso);
    border-color: var(--color-naranja-zanahorioso);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-naranja-zanahorioso:hover {
    background-color: var(--color-naranja-zanahorioso--shade-20);
    border-color: var(--color-naranja-zanahorioso--shade-20);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-verde-oscuro {
    background-color: var(--color-verde-oscuro);
    border-color: var(--color-verde-oscuro);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.btn-verde-oscuro:hover {
    background-color: var(--color-verde-oscuro--shade-20);
    border-color: var(--color-verde-oscuro--shade-20);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.lista {
    list-style: none;
    padding-left: 0;
}
.lista li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}
.lista .icon {
    color: var(--color-amarillo-yema-de-huevo);
    margin-right: .5rem;
    position: relative;
}

.bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contenedor-foto img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.carrusel-testimonios .slick-next, .carrusel-testimonios .slick-prev {
    z-index: 1;
    width: unset!important;
    height: unset!important;
    top: 50%!important;
    font-size: 1em!important;
}
.carrusel-testimonios .slick-next:before, .carrusel-testimonios .slick-prev:before {
    content: '';
}
.carrusel-testimonios .slick-prev {
    left: 0!important;
    transform: translate(-50%, -50%);
}
.carrusel-testimonios .slick-next {
    right: 0!important;
    transform: translate(50%, -50%);
}

.mascara-opaca {
    position: relative;
    --mascara-opaca--color: black;
    --mascara-opaca--opacity: .65;
}
.mascara-opaca:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--mascara-opaca--color);
    opacity: var(--mascara-opaca--opacity);
}

@media (min-width: 992px) { /* lg */
    .navbar-brand img {
        height: 65px;
    }

    .main-banner {
        padding: 8rem 0;
    }
    .main-banner h1 {
        font-size: 3.5rem;
    }

    .lista li {
        justify-content: unset;
        text-align: unset;
    }
}
