body {
    background-image: url('../imagenes/fondo.jpg');
    /* cambia tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@font-face {
  font-family: "Lucida Calligraphy";
  src: url("/Content/font/LCALLIG.TTF") format("truetype");
}



.font-lucia {
    font-family: 'Lucida Calligraphy', serif;
}


.time span {
    font-family: 'Lucida Sans', 'Lucida Sans Unicode', !important;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    padding: 10px 5px 10px 5px;
    position: relative;
    display: flex;
    justify-content: center;
}

.time small {
    display: block;
    margin-top: 5px;
    font-size: clamp(1.4rem, 4vw, 2rem);
}

.date {
    font-size: clamp(1.4rem, 4vw, 2rem);
    margin-top: 10px;
}

.countdown {

    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.content-intrucciones {
    margin-bottom: 10px;
}

.ButtonGoogleMaps {
    border: 1px solid #fff;
    border-radius: 10px;
}

.ButtonGoogleMaps:hover {
    border: 1px solid #000000;
    background-color: #ffffff;
    color: #000000;
}

.btn-whastapp:hover {
    background-color: #115c2c;
    border-color: #18492a;
    color: #fff;

}


.imagen-difuminada {
    width: 300px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent),
        linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-composite: destination-in;

    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent),
        linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-composite: intersect;
}


/* 📱 Ajuste específico para móviles */
@media (max-width: 768px) {
    body {
        background-image: url('../imagenes/fondo.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50% 20%;
        background-color: #000000;
        /* relleno si sobran espacios */
    }


}

#izq, #der {
    background-image: url('../imagenes/sobre2.png');
    background-repeat: no-repeat;
    background-size: cover;
    /* color de fondo para las partes que se abren */
}


  .bounce {
      animation: bounce 1.5s infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
    }