*{
    margin: 0%;
    box-sizing: border-box;
}
body {
    background: url(./imagenes/fondo.webp) no-repeat center/cover fixed;
    position: relative;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(1px);
    z-index: -1; 
}
/*overlay*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999; /* encima de todo */
}
.overlay__img{
    max-width: 50%;
    display: block;
    margin: auto;
    filter: drop-shadow(0px 0px 15px rgb(201, 63, 171));
}
#overlay div{
    width: 25vw;
    height: auto;
    background-image: url(./imagenes/fondo.webp);
    border-radius: 15px;
    padding: 1%;
    box-shadow: 0px 0px 20px #d63fdb;
}
#overlay h2 {
    margin-bottom: 20px;
    font-family:"Bitcount Prop Double", system-ui, sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 2vw;
    text-shadow: 0px 0px 15px white;
}
#overlay p{
    font-size: 1vw ;
    text-align: center;
}
#overlay button {
    display: block;
    padding: 2%;
    border: none;
    clip-path: polygon( 15% 0%, 100% 0%, 100% 70%, 85% 100%, 0% 100%, 0% 30%, 15% 0%);
    background-image: linear-gradient(to right, #5b1197, #1d0bc2);
    color: white;
    font-size: 1.3vw;
    cursor: pointer;
    transition: transform 0.2s;
    margin: auto;
    margin-top: 5%;
    animation: zoom 1.5s infinite;
}
#overlay button:hover {
    transform: scale(1.05);
}
@keyframes zoom{
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* se agranda */
    }
}
.titulo__logo{
    display: block;
    margin: auto;
    width: 14%;
    filter: drop-shadow( 0px 0px 15px #da7ef1);
}
/* Barra de navegacion */
.menu{
    background-image: linear-gradient(to left, #09079e, #740483);
    border-top: 1px solid #e6e2e2;
    border-bottom: 1px solid #e6e2e2;
}
.menu .menu__barra{
    display: flex;
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    justify-content: space-evenly;
    align-items: center;

}
.menu__barra > .menu__boton > a {
    border: 1px solid rgb(233, 226, 236);
}
.menu__boton, a{
    display: block;
    color: antiquewhite;
    text-decoration: none;
    padding: 5px 2vw;
    font-family:"Bitcount Prop Double", system-ui, sans-serif;
    font-size: clamp(10px, 1.2vw, 1.3vw);
    text-shadow: 0px 0px 20px #ffffff;
    transition: transform 0.4s ease;
    text-align: center;
}
.menu__boton--modificador{
    text-transform: uppercase;
    font-size: clamp(10px, 1.2vw, 1.3vw);
    font-weight: 600;
    background-color: #9d2ae0b0;
    border-radius: 5px;
    padding-top: 5px;
    transition: transform 0.4s ease;
}
.submenu__barra {
    display: none; 
    position: absolute;
    top: 100%;   /* 🔥 Justo debajo de Categorías */
    left: 50%;        /* lo llevamos al centro del padre */
    transform: translateX(-50%);
    background-color: #410275d2;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 88%;
    z-index: 1000; /* que quede por encima */
    text-align: center;
}
.submenu__boton a {
    display: block;
    padding: 10px 15px;
    color: antiquewhite;
    font-size: clamp(10px, 1vw, 1.2vw);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.726);
}
.menu__buscador{
    width: 12vw;
    background: url(./imagenes/lupa.webp) no-repeat 3px center;
    background-size: 23px;
    padding: 0px 0px 0px 25px;
    border-style: none;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    font-size: clamp(10px, 1.2vw, 1.3vw);
    max-height: 5vh;
    min-height: 3vh;
    outline: none;
    color: #ffffff;
}
.redes {
    display: flex;
    flex-direction: row; /* Ahora van en fila */ 
    align-items: center; 
    width: 35%; 
    margin: auto;
    margin-top: 1vw;
    color: #ffffff8c;
    font-size: 2vw;
}
.redes img {
    width: 125%;
    display: block;
    padding: 0%;
    opacity: 0.8;
    transition: transform 0.4s ease;
}
/* hover */
.submenu__boton a:hover {
    background: #740483;
}
.menu__boton:hover .submenu__barra {
    display: block;
}
.menu__boton a:hover{
    background-color: #9d2ae073;
    border-radius: 5px;
    transform: scale(1.3);
}
.menu__boton--modificador:hover{
    background-color: #74048300;
    transform: scale(1.3);
}
.menu__barra .menu__boton a:hover{
    border-style: none;
}
.redes img:hover{
    transform: scale(1.2);
    filter: drop-shadow( 0px 0px 3px white) ;
}
/* Seccion contenedor */
.contenedor {
    width: 85%;
    display: grid;
    place-items: center;    
    margin: auto;
    margin-top: 0.5%;       
}
.contenedor__texto {
    width: 60%;
    font-family: "Bitcount Prop Double", system-ui, sans-serif; 
    color: antiquewhite;
    background-color: #00000018;
    font-size: 3vw;
    text-align: center;
    padding: 5%;
    text-shadow: 0px 0px 15px #fff;
    border-radius: 10px;
    margin-top: 8vh;
    margin-bottom: 7vh;
    position: static; 
    transform: none;  
    left: auto;
    top: auto; 
    font-weight: 400;
}
.contenedor__texto-marco{
    position: absolute;
    width: 60%;
    z-index: -1;
    margin-top: 5%;
}
.contenedor__texto--modificador {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
}
.contenedor__input{
    width: 40vw;
    height: 3vw;
    border-radius: 30px;
    font-size: 40%;
    border-style: hidden;
    outline: none;
    padding-left: 1vw;
}
.galeria__contenedor{
    display: flex;
    justify-content: space-around; 
    align-items: center; 
    width: 100%; 
}
.galeria__elemento{
    margin: 0; 
    margin-top: 5%;
    text-align: center;
    transition: transform 0.4s ease;
}
.galeria__elemento img{
    max-width: 100%; 
    height: auto; 
    display: block;  
    margin-bottom: 10px; 
    filter: drop-shadow( 0px 0px 10px #da7ef1);
}
figcaption {
    font-size: 1vw;
    color: #fffefead;
    font-family: Arial, Helvetica, sans-serif;
}
.galeria__elemento :hover{
    transform: scale(1.1);
}
/* seccion carrusel */
.carrusel__slider {
    width: 90%;
    margin: 13vh auto 0;
    overflow: hidden;
}
.carrusel__lista {
    width: 400%;
    animation: slide 10s infinite alternate ease-in-out;
    display: flex;
    padding: 0;
}
.carrusel__item {
    width: 100%;
    list-style: none;
    position: relative;
}
.carrusel__imagen {
    width: 100%;
}
.carrusel__texto {
    position: absolute;
    text-align: center;
    top: 32%;
    color: white;
    padding: 0 15%;
    font-family: "Bitcount Prop Double", system-ui, sans-serif;
    text-shadow: 0px 0px 10px white;
}
.carrusel__titulo {
    font-size: 4.5vw;
    font-weight: 400;
    margin-bottom: 2vh;
}
.carrusel__descripcion {
    font-size: 2.5vw;
    font-family: Arial, Helvetica, sans-serif;
}
/*seccion cards*/
.beneficios{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 tarjetas por fila */
    gap: 2%; /* espacio igual entre tarjetas */
    padding: 20px; /* espacio dentro de la sección */
    width: 90%;
    margin: auto;
    margin-top: 6vw;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}
.card{
    padding: 20px;
    border-radius: 12px;
    background-color: #1d1c1c79;
    box-shadow: 0px 0px 5px #da7ef1;
}
.card__imagen{
    width: 30%;
    filter: drop-shadow( 0px 0px 5px #da7ef1);
}
.card__titulo{
    font-size: 1.5vw ;
    margin:  1vw 0px 1vw 0px;
}
.card__parrafo{
    font-size: 1vw;
    margin: 1vw 0px 1vw 0px ;
}
.beneficios :hover{
    background-color: #da7ef160;
}
.card > * {
    pointer-events: none;
}
/*seccion preferencias*/
.preferencias{
    width: 90%;
    margin: auto;
    display: flex;
    margin-top: 6vw;
    color: #e6e2e2;
}
.preferencias .preferencias__texto{
    width: 70%;
    padding: 2vw;
    margin-right: 3vw;
}
.preferencias h2{
    margin-bottom: 2vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3.5vw;
}
.preferencias .preferencias__texto strong{
    display: block;
    margin-bottom: 2vw;
    text-transform: uppercase;
}
.preferencias .preferencias__texto p, strong {
    font-size: 2vw;
    font-family: Arial, Helvetica, sans-serif;
}
.preferencias__carrusel {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.preferencias__carrusel-galeria {
    display: inline-flex;
    will-change: transform; /* mejora rendimiento */
}
.preferencias__carrusel-galeria img {
    height: 10vw;
    margin: 2vw 4vw 0 0;
    border-radius: 10px;
    box-shadow: 0px 0px 15px white;
    }

/* section best */
.best{
    width: 90%;
    margin: auto;
    margin-top: 6vw;
    display: flex;
    justify-content: space-between;
}
.best__card1, .best__card2, .best__card3{
    width: 30%;
    background-color: #ffffffe5;
    margin: 1vw;
    border-radius: 15px;  
}
.best h3{
    margin: 1vw 0 0 2vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    display: block;
}
.best__card1-p{
    width: 90%;
    display: block;
    margin: 1vw 1.5vw;
    border-radius: 15px;
    box-shadow: 0px 0px 10px black;
}
.best .best__card1-s{
    display: flex;
    justify-content: space-around;
    box-shadow: unset;
}
.best__card1-s img{
    box-shadow: 0px 0px 5px black;
    width: 25%;
    margin: auto;
    border-radius: 15px;
}
.best__card2-p, .best__card3-p{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 73%;
    background-color: #e6e2e2;
    border-radius: 15px;
    justify-items: center;
    align-items: center;
}
.best__card2-p img, .best__card3-p img{
    width: 80%;
    box-shadow: 0px 0px 5px black;
    border-radius: 15px;
}
.best__card2, .best__card3{
    background-color: unset;
}
.best__card2-s, .best__card3-s{
    width: 100%;
    height: 24%;
    background-color: #e6e2e2;
    margin-top: 1vw;
    border-radius: 15px;
    display: flex;
}
.best__card2-s img, .best__card3-s img{
    box-shadow: 0px 0px 5px black;
    width: 27%;
    margin: auto;
    border-radius: 15px;
}
.best__card3-s{
    margin: unset;
}
.best__card3-s h3{
    font-size: 1.5vw;
    width: 15vw;
}
.best__card3-p{
    margin-top: 1vw;
    display: block;
}
.best__card3-p img{
    width: 90%;
    display: block;
    margin: auto;
}
/*eventos*/
.eventos{
    margin-top: 6vw;
    width: 100%;
    display: flex;
    color: #e6e2e2;
}
.eventos img{
    width: 100%;
    position: absolute;
    z-index: -1;
}
.eventos .eventos__texto{
    width: 70%;
    padding: 17% 5%;
}
.eventos__texto h3{
    font-size: 4vw;
    font-family: "Bitcount Prop Double", system-ui, sans-serif;
    font-weight: 400;
    text-shadow: 0px 0px 10px white;
}
.eventos__texto p{
    font-size: 2vw;
    font-family: Arial, Helvetica, sans-serif;
}
.eventos__boton{
    width: 18vw;
    height: 18vw;
    margin-top: 18%;
}
.eventos__boton button{
    width: 100%;               
    height: 100%;
    border-radius: 50%;         
    border: 20px solid #000;    
    background: #fff;           
    display: flex;             
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;  
    box-shadow: 0 0px 10px #000000; 
    padding: 0;
}
.eventos__boton button .eventos__boton-logo {
    width: 17%;   
    height: auto;
    display: block;
    z-index: 1;
    filter: drop-shadow(0px 0px 1px white);
}
.eventos__boton button .eventos__boton-logo:hover {
    transform: scale(1.05);
}
.eventos__boton button .eventos__boton-logo:active {
    transform: scale(1); 
}
/*footer*/
.footer {
    background: #000;
    color: #fff;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}
.footer__contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}
.footer__logo h2 {
    font-size: 24px;
    margin: 0 0 10px;
    color: #0f9d58; /* verde estilo tech */
}
.footer__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer__nav li {
    margin-bottom: 8px;
}
.footer__social div{
    margin-top: 1vw;
}
.footer__nav a, 
.footer__contacto a,
.footer__social a {
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    text-align: left;
    font-size: unset;
    text-shadow: unset;
}
.footer__nav a:hover,
.footer__contacto a:hover,
.footer__social a:hover {
  color: #0f9d58; /* cambia a verde en hover */
}
.footer__copy {
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 20px;
    padding-top: 15px;
    font-size: 14px;
    color: #aaa;
}
/*contacto whasapp*/
.contactos {
    position: fixed;
    top: 90%;       /* centro vertical */
    right: 0;       /* pegado al extremo derecho */
    transform: translateY(-50%); /* lo centra exactamente */
    z-index: 9998;
    cursor: pointer;
    opacity: 0.9;
}
.contactos__boton {
    display: block;
    min-width: 80px;
    max-width: 120px;       
}
.contactos__texto {
    position: absolute;
    right: 90%;  /* se coloca a la izquierda del botón */
    bottom: 3vh;
    background: #1fbd59;
    color: white;
    padding: 0.5vw;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    font-size: 1vw;
    border: 5px solid white;
    transform: translateX(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.contactos__boton:hover{
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 5px white);
}
.contactos:hover .contactos__texto{
    opacity: 1;
    transform: translateX(0);
}
@keyframes slide {
    0%   { margin-left: 0; }
    20%  { margin-left: 0; }

    25%  { margin-left: -100%; }
    45%  { margin-left: -100%; }

    50%  { margin-left: -200%; }
    70%  { margin-left: -200%; }

    75%  { margin-left: -300%; }
    95%  { margin-left: -300%; }

    100% { margin-left: 0; }
}

@media (max-width: 500px) {
.titulo__logo{
    width: 40%;
}
.menu .menu__barra {
    flex-direction: column;
    align-items: center;
}
.menu__boton, .menu__boton--modificador {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #ffffff4a;
}
.menu__boton a, .menu__boton--modificador a {
    font-size: 16px;
    padding: 10px;
}
/*portada**/
.contenedor__texto {
    width: 90%;
    font-size: 4vw;
    padding: 10%;
    margin-top: 11vh;
}
.contenedor__texto-marco{
    top: 46%;
    width: 95%;
}
.contenedor__texto--modificador {
    font-size: 3vw;
}
.contenedor__input {
    width: 50vw;
    height: 5vw;
    font-size: 11px;
}
.galeria__contenedor {
    flex-direction: column;
    gap: 20px;
}
.galeria__elemento-imagen{
    width: 80%;
    margin: auto;
}
figcaption {
    font-size: 3.5vw;
}
.carrusel__slider{
    width: 340px;
    margin-top: 10vh;
}
}
@media (max-width: 1024px){
    #overlay div{
        width: 40%;
    }
    .overlay__img{
        width: 40%;
    }
    #overlay h2{
        font-size: 3vw;
    }
    #overlay p{
        font-size: 1.5vw;
    }
    #overlay button{
        width: 40%;
        font-size: 1.5vw;
    }
    .contenedor__texto-marco{
        top: 5%;
    }
    .beneficios {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 10vh;
    }
    .carrusel__slider{
        margin-top: 10vh;
    }
    .contenedor__texto-marco{
        margin-top: 29%;
    }
}