html {
    scroll-behavior: smooth;
}

/* ----- SECCION CERO ----- */

.seccion-banner-principal {
    width: 100%;
    height: calc(100dvh - 45px);
    height: auto;
    background-color: #f0f0f0;
    padding: 0rem 5% 0rem 5%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.contenedor-banner {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedor-banner h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 5rem;
    text-align: center;
    font-weight: 900;
}

.contenedor-banner p {
    font-family: 'Poppins', sans-serif;
    font-size: large;
    text-align: center;
    font-weight: 500;
}

.contenedor-texto-boton-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ----- PRIMERA SECCION ----- */

.seccion-slider-info-descargable {
    width: 100%;
    height: calc(100dvh - 45px - 156px);
    height: auto;
    background-color: #f0f0f0;
    padding: 1rem 5% .5rem 5%;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    gap: 20px;
}

/* ---------- SLIDER ---------- */
/* ----- CONTENEDOR SLIDER ----- */

.contenedor-slider {
    width: 50%;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    /* aspect-ratio: 16/9; */

    /* border: 1px solid #3f3f3f; */
    border-radius: .75rem;
    overflow: hidden;

}

.slider {
    min-width: 100%;
    min-height: 100%;
    /* width: 100%;
    height: auto; */

    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.contenedor-slider p {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(0, 204, 255);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;

    z-index: 1;
}

.contenedor-botones-slider {
    position: absolute;
    bottom: 15px;
    gap: 10px;
    z-index: 1;

    padding: 10px;
    /* border-radius: 5px; */
    opacity: 0.8;
    backdrop-filter: blur(5px);

    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.boton {
    font-size: 1rem;
    padding: 10px;
    border-radius: 25px;
    border: none;
    background-color: rgb(189, 127, 92);
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

/* ----- BOTON SUBIR ----- */

.boton-flotante {
    position: fixed;
    /* Lo clava en la pantalla respecto al navegador */
    bottom: 1rem;
    /* Distancia desde abajo */
    right: 1rem;
    /* Distancia desde la derecha */

    /* Estilos visuales */
    background-color: #B91C1C;
    /* Tu rojo personalizado */
    color: white;
    padding: 1rem 1.4rem;
    border-radius: 50%;
    /* Forma redondeada */
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99;
    /* Asegura que esté por encima de todo */

    /* display: none; */
    /* Animación de entrada suave */
    transition: all 0.3s ease-in-out;
}

.flotante-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    padding: .6rem 1rem;
    right: 1.4rem;
}

.flotante-notificacion {
    background: radial-gradient(circle at 30% 30%, #00B2FF, #006AFF);
    padding: .3rem .6rem;
    right: 1.7rem;
    bottom: 4.3rem;
}

.flotante-subir {
    display: none;
}

.boton-flotante:hover {
    transform: scale(1.1);
    background-color: rgb(209, 37, 37);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.flotante-whatsapp:hover {
    background-color: rgb(37, 209, 46);

}

/* ---------- CONTENEDOR NOTIFICACION AVISO ---------- */

.contenedor-notificacion-aviso {
    width: 50%;
    width: auto;
    max-width: 70%;
    height: auto;
    position: fixed;
    bottom: 6.5rem;
    right: 4rem;
    border: 1px solid #131313;
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: #e0fffc;
    overflow: hidden;

    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    opacity: 0;
    /* Invisible al inicio */
    visibility: hidden;
    /* No se puede tocar mientras está oculto */
    transform: translateY(20px) scale(0.9);
    /* Empieza un poco abajo y más pequeño */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote suave */
    pointer-events: none;
    /* Evita clics accidentales cuando está oculto */
    /* gap: .5rem; */
}

.contenedor-titulo-cierre-notificacion {
    width: 100%;
    padding: .3rem .5rem;
    background-color: #53a3f3;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contenedor-titulo-cierre-notificacion h2 {
    font-family: 'Poppins', sans-serif;
    font-size: large;
    text-align: center;
    font-weight: 600;
    color: #F8F9FA;
}

.contenedor-titulo-cierre-notificacion i {
    font-size: x-large;
    text-align: center;
    font-weight: 600;
    color: #F8F9FA;
    cursor: pointer;
}

.contenedor-aviso-notificacion {
    width: 100%;
    height: 100%;
    padding: 0.2rem .5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    display: inline-block;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.contenedor-aviso-notificacion h2 {
    font-family: 'Poppins', sans-serif;
    font-size: large;
    text-align: center;
    font-weight: 600;
    color: #333;
}


.contenedor-aviso-notificacion p {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: medium;
    text-align: start;
    font-weight: 400;
    color: #333;
}

.contenedor-aviso-notificacion p a {
    /* font-size: large; */
    text-decoration: none;
    text-align: center;
    color: #000000;
    transition: color .2s ease-out;
}

.contenedor-aviso-notificacion p a:hover {
    color: #69a87e;
    color: #3bc93b;
}

.contenedor-aviso-notificacion .fecha-aviso {
    text-align: right;
}

/* ---------- INFORMACION IMPORTANTE ---------- */
/* ----- CONTENENDOR INFO ----- */
.contenedor-info {
    width: 45%;
    height: 100%;
    padding: .5rem 0;
    border-radius: 1rem;
    /* background-color: #8b1c1c; */
    display: flex;
    justify-content: center;
    align-items: center;

    transition: all .3s ease-in-out;
}

.contenedor-informacion-importante {
    width: 100%;
    height: 100%;
    /* padding: 1rem; */
    /* border-radius: 1rem; */
    /* background-color: #8b1c1c; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    gap: 3rem;
}

.contenedor-informacion-importante h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    text-align: center;
    color: #194d91;
    /* text-decoration: underline; */
}

.contenedor-informacion {
    width: 100%;
    height: 100%;
    border-left: #131313 solid;
    padding: .5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    gap: .5rem;
}

.contenedor-informacion .item-informacion {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: baseline;
    align-items: center;
}

.contenedor-informacion .item-informacion a {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    /* font-size: large; */
    text-decoration: none;
    text-align: left;
    color: #131313;
    transition: color .2s ease-out;
}

.contenedor-informacion .item-informacion a:hover {
    color: #ffbf6b;
    color: #69a87e;
}

.boton-href-mapa {
    border: 0;
    padding: .5rem 1rem;
    border-radius: 1rem;
    color: #f2f1f4;
    background-color: #B91C1C;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: transform .2s ease-in-out;
}

.boton-href-mapa:hover {
    transform: scale(1.10);
}

/* ----- CONTENEDOR CBU EMERGENTE ----- */

.contenedor-copiar-CBU-AFC {
    width: 80%;
    height: auto;
    min-height: 50%;
    padding: .5rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    /* background-color: #316497; */
    background-color: #973131;
    border: 1px solid rgba(255, 255, 255, 0.5);

    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    z-index: 10;
    transition: all .3s ease-in-out;
}

/* ----- TITULO CBU ----- */
.contenedor-titulo-cbu {
    width: 100%;
    height: auto;
    /* padding: 5px; */
    /* background-color: #316497; */
    background-color: #316497;
    background-color: #F8F9FA;
    border-radius: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-titulo-cbu h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: #F8F9FA;
    color: #316497;
}

/* ----- FIN TITULO CBU ----- */

.contenido-datos-cbu {
    width: 80%;
    height: fit-content;
    border: 1px solid rgba(29, 29, 29, 0.7);
    padding: .5rem;
    background-color: #F8F9FA;
    border-radius: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    gap: .5rem;
}

.datos-cbu {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-size: small;
    text-align: left;
    color: #131313;
}

.contenedor-cbu {
    width: auto;
    height: 20%;
    background-color: #316497;
    border-radius: 20px;
    padding: .5rem 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 1rem; */
}

.cbu {
    font-family: 'Poppins', sans-serif;
    font-size: .6rem;
    font-size: medium;
    text-align: center;
    color: #F8F9FA;
}

.copiar {
    width: auto;
    height: auto;
    background-color: #316497;
    border-radius: 20px;
    /* padding: 1rem; */

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.datos-copiados {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: center;
    color: #F8F9FA;
}

.boton-copiar {
    border: none;
    padding: .5rem .9rem;
    border-radius: 3rem;
    font-family: 'Poppins', sans-serif;
    font-size: larger;
    font-weight: 400;
    cursor: pointer;
    transition: .2s ease-in-out all;
    background-color: #004183;
    color: #F8F9FA;
}

.boton-copiar:hover {
    background-color: #177add;
    color: #3bc93b;
}

/* ----- SEGUNDA SECCION ----- */

.seccion-mapa-ubicacion {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;
    /* padding: 0.5rem; */
    /* padding: 0.5rem 1rem .5rem 1rem; */
    /* padding: 0.5rem 5% .5rem 5%; */
    padding: .5rem 5% .5rem 5%;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    gap: 20px;
}

.ubicacion-predio {
    width: 100%;
    height: 100%;
    /* border-left: #131313 solid; */
    padding: .5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.contenedor-titulo-ubicacion-predio {
    width: 90%;
    padding: 5px;
    background-color: rgb(201, 51, 51);
    border-radius: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-titulo-ubicacion-predio h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: #F8F9FA;
}

.ubicacion-predio .item-informacion {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.ubicacion-predio .item-informacion a {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    color: #131313;
    padding: .5rem;
    border-left: #131313 solid;
}

.ubicacion-predio .item-informacion a:hover {
    color: #42aa42;
    color: #69a87e;
}

.contenedor-mapa-ubicacion {
    width: 100%;
    height: 100%;
    padding: 0 1rem;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.contenedor-mapa-ubicacion iframe {
    width: 85%;
    height: 70dvh;
    border: 0 #333 solid;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, .7);
}


/* ------- SEGUNDA SECCION ------- */

.seccion-galeria-fotos {
    width: auto;
    height: auto;
    /* background-color: #f1f2f6; */
    background-color: #f7f7f7;
    background-color: #f0f0f0;
    padding: 1rem 5%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* gap: 20px; */
}

.titulo-galeria {
    width: 75%;
    background-color: #8b1c1c;
    color: #fff;
    font-family: 'Poppins', sans-serif;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-galeria {
    width: 75%;
    height: 90%;

    padding: .8rem;
    background-color: rgb(206, 48, 48);

    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tildar-equipos {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
}

input[type="radio"] {
    display: none;
}

label {
    position: relative;
    color: #e2e2e2;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #a03939;
    padding: 5px;
    border-radius: .5em;
    font-size: .7rem;
}

label::before {
    content: "";
    height: 1em;
    width: 1em;
    border: 1px solid #a03939;
    border-radius: 50%;
}

input[type="radio"]:checked+label::before {
    height: 1em;
    width: 1em;
    border: 1px solid #ffffff;
    background-color: #8b1c1c;
}

input[type="radio"]:checked+label {
    background-color: #8b1c1c;
    color: #fff;
    /* color: #fbf8f9; */
    border: 1px solid #ffffff;

}

.nombre-equipo {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 1.4rem;
    color: #333;
    /* padding: 0px 10px 0 10px; */

}

.contenedor-fotos {
    width: 75%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1111;
    cursor: pointer;
}

#lightbox-img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
}

.equipos-fotos {
    width: 85%;
    height: auto;

    display: grid;
    /* CELULAR */
    /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;

    gap: 10px;

    background-color: #ddc8a0;
    background-color: #555151;
    background-color: #424040;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 10px;

}

.equipos-fotos img {
    width: 100%;
    /* height: 130px; */
    cursor: zoom-in;

    align-content: center;
    border-radius: 10px;
    border: 2px rgb(255, 0, 0) solid;
}

.contenedor-texto-descripcion-titulo {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px 10px 10px 10px;
}

.contenedor-texto-descripcion {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 1.2rem;
    color: #131313;
    font-weight: 500;
    padding: 10px 10px 0 10px;
}

/* ----------------- RESPONSIVO ----------------- */

@media screen and (min-width:1024px) {
    .contenedor-copiar-CBU-AFC {
        width: 60%;
        height: fit-content;
        min-height: 50%;
    }
}

@media screen and (min-width:1400px) {
    /* .contenedor-mapa-ubicacion iframe {
        width: 1250px;
        height: 700px;
    } */

    .equipos-fotos img {
        height: 185px;
    }

    .contenedor-informacion-importante h2 {
        font-size: 2.1rem;
    }

    .contenedor-informacion .item-informacion a {
        font-size: large;
    }

    .contenedor-copiar-CBU-AFC {
        width: 45%;
        height: fit-content;
        min-height: 50%;
    }

    .datos-cbu,
    .cbu {
        font-size: medium;
    }

}

@media screen and (max-width:1023px) {

    .foto-principal {
        padding: 1.5rem;
    }

    .seccion-slider-info-descargable {
        flex-direction: column;
    }

    .contenedor-info {
        flex-direction: row;
        width: 100%;
    }

    .contenedor-informacion-importante {
        align-items: center;
    }

    .contenedor-informacion-importante h2 {
        font-size: xx-large;
    }

    /* ----- CONTENEDOR INFO ----- */
    .contenedor-info {
        flex-direction: column;
        width: 100%;
    }

    .contenedor-informacion-importante {
        gap: 1rem;
    }

    .contenedor-informacion-importante h2 {
        font-size: x-large;
    }

    .contenedor-informacion {
        width: fit-content;
    }

    .contenedor-informacion-importante .contenedor-informacion .item-informacion {
        justify-content: baseline;
        align-items: center;
    }

    .contenedor-informacion .item-informacion a {
        font-size: .9rem;
        font-size: large;
    }

    .contenedor-slider {
        width: 90%;
    }

    /* ----- UBICACION PREDIO ----- */
    .contenedor-titulo-ubicacion-predio {
        width: 100%;

    }

    .contenedor-titulo-ubicacion-predio h2 {
        font-size: large;
    }

    .ubicacion-predio .item-informacion {
        width: 100%;
    }

    .contenedor-mapa-ubicacion iframe {
        width: 100%;
        height: 60dvh;
    }

    /* ----- GALERIA CAMPEONES ----- */
    .titulo-galeria {
        width: 90%;
    }

    .contenedor-galeria {
        width: 90%;
    }

    .contenedor-fotos {
        width: 100%;
    }

    .equipos-fotos {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .nombre-equipo {
        font-size: 1.2rem;
    }

    .contenedor-texto-descripcion {
        font-size: .8rem;
    }
}


@media screen and (max-width:530px) {

    .contenedor-slider {
        width: 100%;
    }

    .contenedor-informacion .item-informacion a {
        font-size: .9rem;
    }

    .seccion-galeria-fotos h2 {
        font-size: larger;
    }

    .contenedor-texto-descripcion {
        font-size: larger;
    }

    .boton-href-mapa {
        padding: .3rem 1rem;
    }
}