* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


*::before,
*::after {
    pointer-events: none;
}


*, 
*::before, 
*::after {
      box-sizing: border-box;
    }


    /* Reset y box-sizing */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }



/* ocultar scrollbars cross-browser */
  *::-webkit-scrollbar { 
    display: none; 
}




  * { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}





/* ===== RESET COMPLETO DE ENLACES ===== */
a,
a:visited,
a:hover,
a:active,
a:focus {
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Evita selección visual rara en móvil */
a {
    -webkit-tap-highlight-color: transparent;
}



a {
  text-decoration: none;     /* Quita el subrayado */
  color: inherit;            /* Hereda el color del elemento padre */
}

a:visited {
  color: inherit;            /* Evita el color morado del enlace visitado */
}

a:hover,
a:focus {
  text-decoration: none;     /* Asegura que no aparezca subrayado al pasar el mouse */
  color: inherit;            /* Mantiene el mismo color al pasar el mouse */
}


/* Evita selección de texto en toda la página */
body {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Estándar moderno */
}

/*
body {
    cursor: default;
}
*/

.overlay {
    pointer-events: none;
}

      
      
      
          body { -webkit-touch-callout: none !important; }
          a { -webkit-user-select: none !important; }
          
          html {
              -webkit-user-select: none;
              -webkit-touch-callout: none;
          }
          
          .disable-select {
              -webkit-touch-callout: none; /* iOS Safari */
              -webkit-user-select: none;   /* Chrome/Safari/Opera */
              -khtml-user-select: none;    /* Konqueror */
              -moz-user-select: none;      /* Firefox */
              -ms-user-select: none;       /* Internet Explorer/Edge */
              -chrome-user-select: none;   /* google*/
              user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
          }
             
      
      
      
          a:hover { cursor: pointer; } 
          
          
          
               a:link, a:visited, a:active {
                  text-decoration:none;
              }
              
              
       a:link, a:visited, a:active {
                  text-decoration:none;
                  cursor:pointer; 
              }
              
              
              
       
            a {
          color: inherit; /* Hereda el color del texto del contenedor padre */
          text-decoration: none; /* Elimina el subrayado */
          cursor:pointer; 
      }
             
      
      
      .no-text-select {
          user-select: none; /* Desactiva la selección de texto */
          cursor: default; /* Cursor de flecha predeterminada */
              }
              
              /* Extra: Desactiva resaltado visual en navegadores táctiles */
      .no-text-select::selection {
          background: none; /* Elimina el color de resaltado */
      }
      
      /* Compatibilidad adicional para navegadores antiguos */
      .no-text-select {
          -webkit-user-select: none; /* Safari/Chrome */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE/Edge */
          user-select: none; /* Estándar */
      }
      
      
                    
      
      
          .no-tooltip {
          pointer-events: none;  Deshabilita los eventos del mouse en el enlace */
          color: blue; /* Color del enlace */
          text-decoration: underline; /* Subrayado del enlace */
          cursor: pointer; /* Cursor de mano para indicar que es un enlace */
      }
          




















        body {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE 10+ */
            user-select: none;
          }
      
      
      
          body { -webkit-touch-callout: none !important; }
          a { -webkit-user-select: none !important; }
          
          html {
              -webkit-user-select: none;
              -webkit-touch-callout: none;
          }
          
          .disable-select {
              -webkit-touch-callout: none; /* iOS Safari */
              -webkit-user-select: none;   /* Chrome/Safari/Opera */
              -khtml-user-select: none;    /* Konqueror */
              -moz-user-select: none;      /* Firefox */
              -ms-user-select: none;       /* Internet Explorer/Edge */
              -chrome-user-select: none;   /* google*/
              user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
          }
             
      
      
      
          a:hover { cursor: pointer; } 
          
          
          
               a:link, a:visited, a:active {
                  text-decoration:none;
              }
              
              
       a:link, a:visited, a:active {
                  text-decoration:none;
                  cursor:pointer; 
              }
              
              
              
       
            a {
          color: inherit; /* Hereda el color del texto del contenedor padre */
          text-decoration: none; /* Elimina el subrayado */
          cursor:pointer; 
      }
             
      
      
      .no-text-select {
          user-select: none; /* Desactiva la selección de texto */
          cursor: default; /* Cursor de flecha predeterminada */
              }
              
              /* Extra: Desactiva resaltado visual en navegadores táctiles */
      .no-text-select::selection {
          background: none; /* Elimina el color de resaltado */
      }
      
      /* Compatibilidad adicional para navegadores antiguos */
      .no-text-select {
          -webkit-user-select: none; /* Safari/Chrome */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE/Edge */
          user-select: none; /* Estándar */
      }
      
      
                    
      
      
          .no-tooltip {
          pointer-events: none; /* Deshabilita los eventos del mouse en el enlace */
          color: blue; /* Color del enlace */
          text-decoration: underline; /* Subrayado del enlace */
          cursor: pointer; /* Cursor de mano para indicar que es un enlace */
      }
          
      
      
              
              
              
                    /* Personalizar la barra de desplazamiento (opcional) */
      html::-webkit-scrollbar {
          display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
      }    
         
      
        /* Personalizar la barra de desplazamiento (opcional) */
         body::-webkit-scrollbar {
          display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
      }    
      

              /* Reset general */
              * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
              }

                      /* Estilos generales */

      
        body {
    position: relative; /* IMPORTANTE: para que los elementos absolutos dentro se posicionen con referencia al body */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%; /* Ocupa toda la pantalla */
    background-color: #f4f4f4;
    /*font-family: Arial, sans-serif;*/
    font-family: "Playfair Display", serif; /* Se deja la fuente como estaba */
    overflow: hidden; /* Evita que se desborde el contenido */
   /* margin: 10px; /* Margen externo de 10px en los 4 lados */
   /* padding: 10px; /* Margen interno de 10px para todos los elementos dentro */
   /* padding: 0 10px; /* Margen del body para evitar que toque los bordes */
    
    /* Mejoras para el rendimiento de desplazamiento */
    -ms-overflow-style: none; /* Para IE11 */
    scrollbar-width: none; /* Para Firefox */

    /* Mejora de accesibilidad: se asegura que el contenido visible no tenga desplazamiento innecesario */
    overscroll-behavior: contain; /* Evita el desplazamiento hacia atrás/adelante en algunos navegadores */

    /* Mejora de la visibilidad */
    color: #333; /* Color de texto más oscuro para una mejor legibilidad */
    word-wrap: break-word; /* Se asegura que el texto largo no desborde */
    line-height: 1.5; /* Mejora la legibilidad del texto */
    
    /* Efecto de transiciones suaves */
    transition: all 0.3s ease-in-out; /* Suaviza los cambios de estilo */
  cursor: crosshair;            
         box-sizing: border-box;

}




.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 0.7s forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3) translate(var(--dx), var(--dy));
    }
}


   body {
      overflow-y: scroll;
      scrollbar-width: none; /* Firefox */
    }
    body::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
    }




        /* Efecto de barrido cuando se mueve el mouse */
        body {
            animation: barra 2s infinite alternate;
        }

        @keyframes barra {
            0% {
                background-color: rgba(0, 0, 0, 0.9);
            }
            100% {
                background-color: rgba(0, 0, 0, 0.7);
            }
        }

#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    transition: background 0.3s ease;
}


/* Estilos específicos oficiales fondo de pagina  */
/* Asegúrate de que el html y body ocupen todo el alto de la ventana */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* Body */
body {
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
}



/* Estilos del contenedor de video */
#video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;






}

/* Estilos del video para cubrir todo el fondo */
#video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que cubra todo el espacio disponible */

    /* Tratamiento visual del video */
    filter:
        brightness(1.15)
        contrast(1.1)
        saturate(1.2)
        drop-shadow(0 0 35px rgba(90,150,255,0.35));

    /* Neomorfismo (abultado hacia afuera) */
    box-shadow:
        inset 0 0 40px rgba(255,255,255,0.15),
        0 0 60px rgba(70,140,255,0.45),
        0 0 120px rgba(70,140,255,0.25);




}








/* ================= CAPA DE COLOR AZUL SOBRE VIDEO ================= */
.video-color-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(80,140,255,0.18),
        rgba(0,0,0,0.05)
    );
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

/* ================= REFLEJO ANIMADO ================= */
/*.video-reflection {
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(180,220,255,0.25),
        transparent
    );
    animation: reflectionMove 8s linear infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes reflectionMove {
    from { left: -60%; }
    to { left: 120%; }
}*/

/* ================= REFLEJO ESPEJO DIAGONAL ================= */
.video-reflection {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0) 35%,
        rgba(200,230,255,0.30) 45%,
        rgba(255,255,255,0.28) 50%,
        rgba(200,230,255,0.30) 55%,
        rgba(255,255,255,0) 65%
    );

    transform: rotate(0deg) translate(-30%, -30%);
    animation: mirrorSweep 10s ease-in-out infinite;

    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 3;
}

@keyframes mirrorSweep {
    0% {
        transform: translate(-40%, -40%);
        opacity: 0;
    }

    30% {
        opacity: 0.6;
    }

    50% {
        transform: translate(40%, 40%);
        opacity: 0.8;
    }

    70% {
        opacity: 0.4;
    }

    100% {
        transform: translate(80%, 80%);
        opacity: 0;
    }
}



/* ================= DEGRADADOS PERIMETRALES ================= */
.gradient-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

/* ARRIBA → ABAJO */
.gradient-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 18%;
    background: linear-gradient(
        to bottom,
        rgba(70,130,255,0.45),
        transparent
    );
}

/* ABAJO → ARRIBA */
.gradient-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 18%;
    background: linear-gradient(
        to top,
        rgba(70,130,255,0.45),
        transparent
    );
}

/* IZQUIERDA → CENTRO */
.gradient-left {
    position: absolute;
    left: 0;
    width: 18%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(70,130,255,0.45),
        transparent
    );
}

/* DERECHA → CENTRO */
.gradient-right {
    position: absolute;
    right: 0;
    width: 18%;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(70,130,255,0.45),
        transparent
    );
}


/* ================= RESPONSIVE 768 ================= */
@media (max-width: 768px) {

    .gradient-top,
    .gradient-bottom {
        height: 22%;
    }

    .gradient-left,
    .gradient-right {
        width: 22%;
    }

    .video-wrapper video {
        filter:
            brightness(1.1)
            contrast(1.05)
            saturate(1.15);
    }
}













#radio-stream {
    display: none; /* Oculta el reproductor de audio */
}


             /* Media queries moviles  */
             @media screen and (max-width: 768px) {
            body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
            


 }

               #video-background {
      top: 0;
      left: 0;
      transform: none;
      width: 100%;
      height: 100%;
      min-width: unset;
      min-height: unset;
      object-fit: cover;
      object-position: center;
    }



            }
               .video-background {
      top: 0;
      left: 0;
      transform: none;
      width: 100%;
      height: 100%;
      min-width: unset;
      min-height: unset;
      object-fit: cover;
      object-position: center;
    }



             /* Mejoras para dispositivos móviles */
             @media (max-width: 600px) {
             body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
            }
            }



             @media (max-width: 480px) {
                body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */

             }
            }




            /* ocultar estilos en pantallas mas grandes */
            @media only screen and (min-width: 769px) {


            }



            /* estilos en posicion landscape moviles */
            @media (max-width: 1024px) and (orientation: landscape) {

                body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */

                }
             }



             /* Estilos específicos para moviles  iPhone 8 */    
             @media only screen  
             and (device-width: 375px)  
             and (device-height: 667px)  
             and (-webkit-device-pixel-ratio: 2) {  
                body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
             }
            }





             /* Estilos específicos para iPhone 8 en posición landscape */    
             @media only screen  
             and (device-width: 667px)  
             and (device-height: 375px)  
             and (-webkit-device-pixel-ratio: 2)  
             and (orientation: landscape) {  
                body {
             padding: 10px; /* Asegura márgenes adecuados en dispositivos móviles */
             font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
            
            }
            }
        




   .safari body  {
         
   }

   
   
   
   
   body.chrome body {
        
   }
    
   
   
   
      
   .opera body {
          
   }
      


      
   .firefox body  {
               
   }
      
      
      
      
    html.edge body {
   font-family: Arial, sans-serif;
   /* Estilos generales específicos para Edge */
}  








/* =========================
   ICONOS IZQUIERDA (ABAJO)
========================= */
.left-icons {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 3;
    transition: transform 0.3s;
}

.icon-row {
    display: flex;
    align-items: center;
}

.icon-row img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    filter: invert(1);
}

/* contador fijo */
.counter {
    min-width: 30px;
    text-align: left;
    margin-left: 5px;
    font-size: 12px;
    color: aliceblue;
}