/*----------------------------------
	General
------------------------------------*/

@font-face {
    font-family: "Titles";
    src: url(../fonts/press.ttf);
}

@font-face {
    font-family: "Titles 02";
    src: url(../fonts/elegant.ttf);
}

.fam {
    font-family: "Titles 02" !important;
}

.nombres {
    font-size: 30px !important;
}

html {
    overflow: hidden;
}

html,
html a,
body {
    -webkit-font-smoothing: antialiased;
}

html {
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

body {
    z-index: 1;
    overflow-x: hidden;
    /*background: linear-gradient(-45deg, #FDF2DD, #FDF2DD, #FDF2DD, #FDF2DD);*/
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

@media (min-width: 992px) {
    body::after {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(../img/bg-esc6b1c.png?v=01);
        background-size: cover;
        background-position: center;
        content: '';
        transition-duration: .5s;
    }
}

@media (max-width: 991px) {
    body::after {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(../img/bg-mob6b1c.png?v=01);
        background-size: cover;
        background-position: center;
        content: '';
        transition-duration: .5s;
    }
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

a:hover {
    text-decoration: none;
}

.bg-overlay {
    position: relative;
    z-index: 1;
}

.bg-overlay::after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #000;
    opacity: 0.30;
    content: ''; 
    */
}


/*----------------------------------
	Varios
------------------------------------*/

.col-center {
    float: none;
    margin: 0 auto;
}

.sinpadding [class*="col-"] {
    padding: 0;
}

@media (max-width: 991px) {
    .ocultar_mob {
        display: none;
    }
    .festejado {
        font-size: 20px;
        font-family: 'Titles';
    }
    .festejado-02 {
        font-size: 22px;
        font-family: 'Titles';
    }
    .linea2 {
        background-color: #fff;
        width: 100%;
        height: 0.5px;
        margin-top: 20px;
        margin-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .ocultar_esc {
        display: none;
    }
    .festejado {
        font-size: 20px;
        font-family: 'Titles', ¿;
    }
    .festejado-02 {
        font-size: 22px;
        font-family: 'Titles', ¿;
    }
    .linea2 {
        background-color: #fff;
        width: 100%;
        height: 1.5px;
        margin-top: 20px;
        margin-bottom: 40px;
    }
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #000;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    background-color: #000;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ffffff;
    background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)
}

.title {
    color: #ffffff;
    font-family: Titles;
    font-size: 20px;
}

.m-0 {
    margin-bottom: 0;
}

.m-10 {
    margin-bottom: 10px;
}

.m-20 {
    margin-bottom: 20px;
}

.m-40 {
    margin-bottom: 40px;
}

.linea1 {
    background-color: #fff;
    width: 100%;
    height: 0.5px;
    margin-bottom: 20px;
}

.item {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.mesa-link {
    text-transform: none;
    color: #fff;
    font-size: 18px;
    margin-bottom: 0;
}

.audio {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 0;
}

.aparecer-audio {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 1;
}

.desaparecer-audio {
    visibility: hidden;
    opacity: 0;
    transition: all 3s;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.pausa01 {
    opacity: 0;
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 20px;
}

.aparecer-pausa {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    opacity: 1;
}

.font-18 {
    font-size: 18px;
}

.sombra-texto {
    /*text-shadow: #000 0.1em 0.1em 0.2em;*/
}

.text-black {
    color: #ffffff;
    font-weight: 900;
}

.opciones {
    color: #272424;
    display: inline;
    margin: 0 20px;
}

option {
    color: #ffffff !important;
}


/*----------------------------------
	Secciones
------------------------------------*/

.cuadro-top {
    /*background-color: rgba(0,0,0,0.20);*/
    margin-top: 70px;
    padding: 40px 0;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-mapa {
    /*background-color: rgba(0,0,0,0.20);*/
    padding-top: 40px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-carousel {
    /*background-color: rgba(0,0,0,0.20);*/
    padding: 40px 0;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-body {
    /*background-color: rgba(0,0,0,0.20);*/
    padding: 40px 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-video {
    /*background-color: rgba(0,0,0,0.20);*/
    padding-top: 40px;
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
}

.cuadro-form {
    /*background: #C04B5B;*/
    padding: 40px 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-boletos {
    /*background-color: #C04B5B;*/
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-liverpool {
    background-color: #DF0096;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-sears {
    background-color: #EB0028;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-amazon {
    background-color: #232f3e;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-banco {
    background-color: #fafafa;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 20px;
}

.cuadro-footer {
    background-color: rgba(0, 0, 0, 0.40);
    padding: 20px;
    margin: 20px 0;
    overflow: hidden;
    border-radius: 20px;
}


/*----------------------------------
	Timer
------------------------------------*/

ul.tiempo {
    margin: 0;
    padding: 0;
    text-align: center;
}

.tiempo li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    color: #ffffff;
    padding: 0 10px;
    font-size: 18px;
}

.tiempo li span {
    display: block;
}


/*----------------------------------
  Selección
------------------------------------*/

::selection {
    color: #000;
    background: #000;
    text-shadow: none;
}

::-webkit-selection {
    color: #fff;
    background: #000;
    text-shadow: none;
}

:active,
:focus {
    outline: none;
}


/*----------------------------------
  Form
------------------------------------*/

.form-campo {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    border: 1px solid transparent;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    border-radius: 20px;
}

.form-campo::-webkit-input-placeholder {
    color: #fff;
}

.form-campo::-moz-placeholder {
    color: #fff;
}

.form-campo:-ms-input-placeholder {
    color: #fff;
}

.form-campo::placeholder {
    color: #fff;
}

.form-campo:focus {
    font-weight: 400;
    color: #fff;
}

.form-campo:focus::-webkit-input-placeholder {
    color: #fff;
}

.form-campo:focus::-moz-placeholder {
    color: #fff;
}

.form-campo:focus:-ms-input-placeholder {
    color: #fff;
}

.form-campo:focus::placeholder {
    color: #fff;
}

.btn-form {
    background: #ce1515;
    /* Color azul */
    padding: 6px 30px;
    border: 1px solid transparent;
    color: #fff;
    /* El texto ahora es blanco para contrastar con el azul */
    transition-duration: 0.2s;
    border-radius: 20px;
    font-size: small;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Espacio entre ícono y texto */
}

.btn-form:hover {
    border: 1px solid #b30d0d;
    /* Un azul más oscuro para el borde en hover */
    background: #b30d0d;
    /* Azul más oscuro en hover */
    color: #fff;
    /* Mantener texto blanco */
    transition-duration: 0.2s;
}

.gif-container {
    position: fixed;
    /* Posición fija para que no se mueva al hacer scroll */
    bottom: 0;
    /* Pegado a la parte inferior */
    left: 0;
    /* Pegado a la parte izquierda */
    margin: 10px;
    /* Márgenes para separar un poco del borde */
}

.gif-container img {
    width: 100px;
    /* Ajusta el tamaño del GIF */
    height: auto;
    /* Mantiene la proporción del GIF */
}


/*----------------------------------
  Video
------------------------------------*/

.hytPlayerWrap {
    position: relative;
}

.hytPlayerWrap.ended::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}

.hytPlayerWrap.paused::after {
    content: "";
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 50px;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}


/*----------------------------------

  Sobre

------------------------------------*/

#carta {
    width: 100vw;
    height: 100vh;
    background-color: #05050c;
    /* El color de fondo actual de la carta */
    z-index: 9999;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    transition: opacity 3s ease, visibility 3s ease;
    /* Asegura que la transición afecte a la visibilidad */
}

#carta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/asdc.webp');
    /* **RUTA A TU IMAGEN** */
    background-size: cover;
    background-position: center;
    z-index: -1;
    /* Asegura que esté detrás del contenido de la carta */
    opacity: 1;
    /* Comienza visible */
    transition: opacity 3s ease;
    /* Transición para que desaparezca suavemente */
}


/* Cuando la carta desaparece, la imagen también lo hará */

#carta.desaparecer::before {
    opacity: 0;
}

.sobre-superior {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.con-scroll {
    overflow-y: scroll;
}

.arriba {
    -moz-transform: translate(0px, -1500px);
    -webkit-transform: translate(0px, -1500px);
    -o-transform: translate(0px, -1500px);
    -ms-transform: translate(0px, -1500px);
    transform: translate(0px, -1500px);
    transition: all 3s;
}

.abajo {
    -moz-transform: translate(0px, 1000px);
    -webkit-transform: translate(0px, 1000px);
    -o-transform: translate(0px, 1000px);
    -ms-transform: translate(0px, 1000px);
    transform: translate(0px, 1000px);
    transition: all 3s;
}

.desaparecer {
    visibility: hidden;
    opacity: 0;
    transition: opacity 3s ease, visibility 3s ease;
}

@media (max-width: 991px) {
    .titulo-sobre {
        font-family: Titles;
        margin: 0;
        color: black;
        position: absolute;
        z-index: 11;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 20px;
        font-size: 28px;
    }
    .titulo-sobre-02 {
        font-family: Titles;
        margin: 0;
        color: #ffffff;
        position: absolute;
        z-index: 11;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 20px;
        font-size: 24px;
        width: 80%;
    }
    .boton-sobre {
        font-family: Titles;
        color: #ffffff;
        position: absolute;
        z-index: 12;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 40%;
        font-size: 25px;
        /*background-color: rgba(255,255,255,0.5);*/
        width: 200px;
        height: 200px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }
    #sobre img {
        width: 94.6%;
    }
}

@media (min-width: 992px) {
    .titulo-sobre {
        font-family: Titles;
        margin: 0;
        color: #ffffff;
        position: absolute;
        z-index: 11;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 20px;
        font-size: 40px;
    }
    .titulo-sobre-02 {
        font-family: Titles;
        margin: 0;
        color: #ffffff;
        position: absolute;
        z-index: 11;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 20px;
        font-size: 34px;
        width: 80%;
    }
    .boton-sobre {
        font-family: Titles;
        color: #ffffff;
        position: absolute;
        z-index: 12;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 42%;
        font-size: 23px;
        /*background-color: rgba(255,255,255,0.5);*/
        width: 300px;
        height: 300px;
        /*border-radius: 20px;*/
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }
    #sobre img {
        width: 97.5%;
    }
}


/*----------------------------------

  W

------------------------------------*/

#popup3 {
    position: fixed;
    visibility: hidden;
    opacity: 0;
}

#popup3:target {
    visibility: visible;
    opacity: 1;
    background-color: #DDD5CD;
    background-image: url(../img/whatsapp-bg.png);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 99999999999;
    transition: all 1s;
}

.btn-whats {
    background: #128D7F;
    padding: 10px 80px 8px 80px;
    border: 1px solid transparent;
    margin-top: 40px;
    font-size: 18px;
    color: #fff;
    transition-duration: .2s;
    border-radius: 20px;
}

.btn-whats:hover {
    background: #075F56;
    color: #fff;
    transition-duration: .2s;
}

.title-whats {
    color: #000;
    font-family: Manjari;
    font-size: 30px;
}

.font-20 {
    font-size: 20px;
}


/* Estilos para el contenedor del iframe con esquinas redondeadas */

.contenedor-iframe {
    border-radius: 15px;
    /* Ajusta este valor según el redondeo que desees */
    overflow: hidden;
    /* Asegura que el contenido se ajuste al redondeo */
}


/* Estilos para el iframe */

.contenedor-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.svg-black {
    filter: brightness(0) invert(0);
}

.svg-blue {
    filter: invert(66%) sepia(26%) saturate(652%) hue-rotate(178deg) brightness(94%) contrast(91%);
}

#seccion-oculta {
    padding: 40px;
    background-image: url('../img/so.jpg');
    /* Ruta de la imagen de fondo */
    background-size: cover;
    /* La imagen cubre todo el contenedor */
    background-position: center center;
    /* Centra la imagen */
    background-attachment: fixed;
    /* La imagen no se mueve con el scroll */
    position: relative;
    /* Asegura que los elementos hijos estén posicionados correctamente */
    height: 100vh;
    /* Asegura que la sección ocupe toda la altura de la ventana */
    display: none;
    text-align: center;
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra suave */
}


/* Capa de fondo difusa (desenfoque) */

#seccion-oculta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Fondo oscuro semitransparente */
    filter: blur(5px);
    /* Desenfoque de la imagen */
    z-index: -1;
    /* Asegura que la capa de desenfoque esté detrás del contenido */
}

.pase-invitado {
    background-color: #fff;
    background-image: url('../img/pase.png');
    background-size: cover;
    background-position: center;
    border: 1px solid #ddd;
    border-top-left-radius: 5px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 5px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    z-index: 1;
    width: 60%;
    max-width: 600px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    /* Comienza invisible */
    transform: translateY(30px);
    /* Comienza desplazado hacia abajo */
    transition: opacity 1s, transform 1s;
}

.pase-invitado-contenido {
    margin-bottom: 20px;
    /* Espacio entre el contenido y los datos */
}

.datos-pase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    gap: 15px;
    /* Espaciado entre los elementos */
}

.informacion,
.pase-cantidad {
    font-family: Titles;
    font-size: 2rem;
    /*background-color: #f9f9f9;*/
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    /* Asegura que los elementos ocupen todo el ancho disponible */
    /*box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
    color: inherit;
    /* Elimina el color explícito y usa el color heredado */
}

#informacion h4 {
    font-family: "Titles 02", sans-serif;
    font-size: 20px !important;
}


/* Eliminar borde de los elementos */

.informacion,
.pase-cantidad {
    border: none;
    /* Eliminar el borde */
}


/* Estilo para el título del pase */

#seccion-oculta h2 {
    font-family: titles;
    font-size: 3rem;
    margin-bottom: 10px;
    color: #283a45;
}


/* Responsividad: ajusta el contenido en pantallas pequeñas */

@media (max-width: 768px) {
    .pase-invitado {
        width: 80%;
        /* Asegura que el pase no se desborde en pantallas más pequeñas */
        margin-top: 50px;
        /* Reducir margen superior */
    }
    .datos-pase {
        flex-direction: column;
        align-items: center;
    }
    .informacion,
    .pase-cantidad {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* Ajustes específicos para móviles */

@media (max-width: 480px) {
    .pase-invitado {
        width: 90%;
        /* Asegura que el pase no sea tan pequeño en móviles */
        margin-top: 20px;
        /* Reducir margen superior en móviles */
    }
    .pase-invitado h2 {
        font-size: 2rem;
    }
    .informacion,
    .pase-cantidad {
        width: 100%;
    }
    .datos-pase {
        flex-direction: column;
    }
}

@keyframes aparecerDesdeIzquierda {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        /* Comienza fuera de la pantalla a la izquierda */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        /* Vuelve a su posición original */
    }
}


/*.pase-invitado {
  background-color: #fff;
  background-image: url('img/so.jpg');
  /* Asegúrate de tener la ruta correcta */


/* background-size: cover;
  background-position: center;
  border: 1px solid #ddd;
  border-top-left-radius: 5px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 5px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  z-index: 1;
  width: 60%;
  max-width: 600px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 0;
  /* Comienza invisible */


/* transform: translateY(30px);
  /* Comienza desplazado hacia abajo */


/*transition: opacity 1s, transform 1s;
  /* Transición de opacidad y transformación */


/*}

/* Hacer que la animación se active cuando el pase sea visible */

.pase-visible {
    opacity: 1;
    transform: translateY(0);
    /* Vuelve a su posición original */
}

.sombra-roja-texto {
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.7);
    /* Rojo semi-transparente, 3px de desenfoque */
}

.contorno-rojo-degradado {
    box-shadow: 0 0 5px red, /* Sombra roja base, más cerca */
    0 0 10px rgba(255, 0, 0, 0.8), /* Sombra roja más difusa y transparente */
    0 0 15px rgba(255, 0, 0, 0.6);
    /* Sombra roja más extendida y aún más transparente */
}


/* Estilos para el GIF circular */

.gif-circular {
    border-radius: 50%;
    /* Esto hace que la imagen se recorte en forma de círculo */
    border: 3px solid #ff0000;
    /* Borde rojo al estilo Shadow */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    /* Efecto de sombra para resaltarlo */
    overflow: hidden;
    /* Asegura que cualquier parte del GIF fuera del círculo se oculte */
}


/* Estilos para la sección de la piscina */

#piscina-sonica {
    padding: 60px 0;
    /* Espaciado vertical similar a otras secciones */
    /* background-color: #0a0a0a; <-- ELIMINADO PARA VER EL FONDO ORIGINAL */
}

#piscina-sonica .cuadro-body {
    border: 2px solid #ff0000;
    /* Borde rojo */
    /* background-color: #111111; <-- ELIMINADO PARA VER EL FONDO ORIGINAL */
    background-color: rgba(17, 17, 17, 0.7);
    /* Opcional: un ligero color oscuro con transparencia */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    /* Sombra roja */
}

#piscina-sonica h2.title {
    color: #ff0000;
    /* Título rojo */
}


/* Estilos para los SVG en secciones de fondo oscuro (cambiados de svg-blue a svg-white) */

.svg-white img {
    filter: invert(100%);
    /* Invierte el color del SVG a blanco */
}


/* Opcional: Estilos para las imágenes de flotador/chaleco dentro de la sección de piscina */

#piscina-sonica img {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
    /* Sombra suave para las imágenes */
}