/* ==================================================================== */
                /* === ESTILOS CSS INTERNOS === */
/* ==================================================================== */
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
                /* === ESTILOS CSS - AJUSTE DE VISUALIZACIÓN PARA PC === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   @media (min-width: 992px) 
      and (hover: hover) 
{
   .glass-container { max-width: 900px;
                         margin: 0 auto 40px auto; }

   .bg-image { background-size: cover;
           background-position: center top;
         background-attachment: fixed; }
}

   @media (min-width: 992px) 
     and (max-height: 700px) 
          and (hover: hover) 
{
   .glass-container { transform: scale(0.95);
               transform-origin: top center; }
}
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
                /* === ESTILOS CSS - COOKIES === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   #cookie-overlay { position: fixed;
                          top: 0;
                         left: 0;
                        width: 100%;
                       height: 100%;
                   background: rgba(0,0,0,.85);
                      display: none;
              justify-content: center;
                  align-items: center;
                      z-index: 9999; }

   .cookie-modal { background: #1a1a1a;
                        color: #fff;
                      padding: 20px;
                border-radius: 15px;
                        width: 90%;
                    max-width: 360px;
                   text-align: center;
                       border: 1px solid #ffca28;
                  font-family: sans-serif; }

   .cookie-btn-group { display: flex;
                flex-direction: column;
                           gap: 10px;
                    margin-top: 15px; }

   .c-btn { padding: 10px;
             border: none;
      border-radius: 8px;
        font-weight: bold;
             cursor: pointer;
         transition: opacity 0.2s; }

   .c-btn:hover { opacity: 0.9; }
   .c-accept { background: #ffca28; 
                    color: #000; }
   .c-reject { background: #333; 
                    color: #fff; }
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
              /* === ESTILOS CSS - RESET Y BASE === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   * { margin: 0;
      padding: 0;
   box-sizing: border-box;
  font-family: sans-serif; }

   html, body { height: 100%;
                 width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
      background-color: #000; }
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
             /* === ESTILOS CSS - BOTON CONTRASTE === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   .contrast-toggle { position: fixed;
                           top: 15px;
                          left: 15px;
                       z-index: 1000;
                        height: 32px;
                       padding: 0 12px;
                 border-radius: 16px;
                    background: #fff;
                        border: 2px solid #ffca28;
                        cursor: pointer;
                       display: flex;
                   align-items: center;
                     font-size: 18px; }
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
             /* === ESTILOS CSS - IMAGEN DE FONDO === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   .bg-image { min-height: 100vh;
                    width: 100%;
         background-image:  linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.3)), url('fondo/fnd-916.webp');
      background-position: center;
          background-size: cover;
                   height: auto;
                  display: flex;
           flex-direction: column;
              align-items: center;
          justify-content: flex-start;
               margin-top: -20px;
               transition: background 0.3s;
    background-attachment: fixed;
              padding-top: 2vh; }

   @media (min-width: 769px) 

{
   .bg-image { background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.3)), url('fondo/fnd-169.webp'); }
}

   body.high-contrast .bg-image { background-image: none !important;
                                  background-color: #000 !important; }
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
             /* === ESTILOS CSS - CONTENEDOR GLASS === */
/* ==================================================================== */
/*                                                                                                                                                                    */
   .lang-selector { margin-top: 80px;
                 margin-bottom: 10px;
                       display: flex;
                           gap: 10px; }

   .lang-btn { background: rgba(255,255,255,0.1);
                    color: white;
                   border: 1px solid rgba(255,255,255,0.3);
                  padding: 8px 14px;
            border-radius: 8px;
                   cursor: pointer;
              font-weight: bold;
                font-size: 12px; }

   .lang-btn.active { background: #ffca28;
                           color: #000;
                    border-color: #ffca28; }

   .glass-container { background: rgba(0,0,0,0.5);
                     padding-top: 10px;
                   padding-right: 10px;
                  padding-bottom: 3px;
                    padding-left: 10px;
                   border-radius: 20px;
                           width: 88%;
                       max-width: 350px;
                           color: #fff;
                      text-align: center;
                          border: 1px solid rgba(255,255,255,0.15);
                 backdrop-filter: blur(5px);
                      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
                   margin-bottom: 5vh;
                     flex-shrink: 0; }

   #title { font-size: 22px;
        margin-bottom: 5px; }

   #addr { font-size: 11px;
               color: #ccc;
       margin-bottom: 15px;
         line-height: 1.3; }
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
           /* === ESTILOS CSS - BOTONES CONTENEDOR GLASS == */
/* ==================================================================== */
/*                                                                                                                                                                    */
   .btn { display: block;
      padding-top: 12px;
    padding-right: 0px;
   padding-bottom: 12px;
     padding-left: 0px;
           margin: 8px 0;
    border-radius: 12px;
      font-weight: bold;
  text-decoration: none;
            color: #fff;
           border: none;
           cursor: pointer;
            width: 100%;
        font-size: 16px; }

   .btn-carta { background: #4b0082; }
   .btn-rates { background: #0062cc; }
   .btn-phone { background: #ffca28;
                     color: #000 !important;
                 animation: pulse 1.5s infinite; }
   
   @keyframes pulse 
{
    0% {transform: scale(1);}
   50% {transform: scale(1.03);}
  100% {transform: scale(1);}
}
/*                                                                                                                                                                    */
/*                                                                                                                                                                    */
/* ==================================================================== */
          /* === ESTILOS CSS - FORMULARIO DE CONTACTO === */
/* ==================================================================== */
/*         


                                                                                                                                                           */
   /* Ventana flotante que mueve todo el formulario */
   #contact-viewer { display: none;
                    position: fixed;
                         top:  50%; /* desplaza arriba/abajo */
                        left: 50%; /* desplaza derecha/izquierda */
                   transform: translate(-50%, calc(-50% + 75px)); /*centra respecto cento d pantalla */
                       width: 49.70vh;
                      height: 62vh;
               border-radius: 8px;
                  background: rgba(0,0,0,0.8);
                      border: 1px solid #ffca28;
                     z-index: 20000;
             justify-content: center;
                 align-items: flex-start;
                     padding: 15px 0.5px 475px 0.5px; }
   



/* Cuerpo del formulario */
   .form-body { padding-top: 9px 10px 3px; }
  



 /* Botón de cierre del formulario */
   .close-form { position: absolute;
     


                 top: 3px;
                    right: 15px;
                font-size: 24px;
                   cursor: pointer;
                    color: #666;}
 



  /* Ventana principal del formulario */
   .form-window { background: #f0f0f0;
                       width: 90%;
                   max-width: 400px;
       
       
       
          /* padding: 10px; */          
               border-radius: 8px;
                    position: relative;
                       color: #333;
                  text-align: left;
                  box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
 



  /* Título del formulario */
   .form-header { background: #d9d9d9;
                     padding: 8px;
                    position: relative;
                  text-align: center;
               border-bottom: 1px solid #888;
               border-radius: 8px; }



   /* Texto itroductorio */
   .form-intro { background: #f0f0f0;
                    padding: 4px;
              border-radius: 4px;
              margin-bottom: 2px;
                  font-size: 12px; }




   /* Campo de entrada para introducir nombre, correo, etc.. */
   .form-input-box { width: 100%;
                   padding: 12px;
                    margin: 10px 0;
                    border: 1px solid #ccc;
             border-radius: 2px;
                box-sizing: border-box;
                 font-size: 12px; }




   /* Botón de eviar */
   .btn-send { display: block;
                margin: 10px auto 0 auto;
            background: #000;
                 color: #fff;
                 width: 80%;
               padding: 10px;
                border: none;
           font-weight: bold;
                cursor: pointer;
        text-transform: uppercase;
            margin-top: 10px;
         border-radius: 8px; }



   /* Texto reCAPTCHA y aviso de privacidad */
   .recap-text { font-size: 12px;
                     color: #666;
                text-align: center;
                margin-top: 15px;
             margin-bottom: 8px;
               line-height: 1.4; }
                                                                                                                                                 
                                                                                                                                                             



/* ==================================================================== */
              /* === ESTILOS CSS -  LINEA VERIPOS === */
/* ==================================================================== */




                                                                                                                                                       */
    .linea-veripos { color: #fff;
                margin-top: 5px;
             margin-bottom: 1px; }
     .gold-text { color: #ffca28; }
                                                                                                                                                                                                                                                                                                     



/* ==================================================================== */
         /* === ESTILO DEL CONTENEDOR TEXTO VERIPOST === */
/* ==================================================================== */
                                                                                                                                                          



    .veripos-text { display: block;
                 background: rgba(0,0,0,0.9);
                      color: #ddd;
                    padding: 15px;
                 margin-top: 8px;
              border-radius: 8px;
                  font-size: 11px;
                 text-align: left;
                     border: 1px solid #ffca28;
                   position: relative;
                     bottom: 25px;
                       left: 50%;
                  transform: translateX(-50%);
                      width: 280px; }
                                                                                                                                         
                                                                                                                                       



                                                                                                                                                
/* ==================================================================== */
            /* === ESTILOS CSS - VERIPOS SUMARY === */
/* ==================================================================== */




    .veripos-summary { cursor: pointer;
                        color: #cc3333;
                  font-weight: bold;
                   list-style: none;
                      display: inline; }                                                                                                                                                                                                                                                                                                         



/* ==================================================================== */
        /* === ESTILOS CSS - CONTENEDOR SEO PIE DE PAGINA === */
/* ==================================================================== */
                                                                                                                                                         



    .seo-footer { position: fixed;
                    bottom: 0;
                     width: 100%;
                   padding: 7px;
                background: rgba(0,0,0,0.4);
           backdrop-filter: blur(2px);
                text-align: center;
                     color: #fff;
                 font-size: 12px;
                   z-index: 500; }


                                                                                                                                          
                                                                                                                                                    
/* ==================================================================== */
             /* === ESTILOS CSS - TEXTO PIE LEGAL === */
/* ==================================================================== */
                                                                                                                                                    






    .footer-info { margin-top: 8px;
                margin-bottom: 2px; 
                    font-size: 10px; }



    .footer-info a { color: #ffca28;
           text-decoration: underline; }
                                                                                                                                                                                                                                                                                                  



/* ==================================================================== */
              /* == ESTILOS CSS - MENÚ LATERAL == */
/* ==================================================================== */
                                                                                                                                                               
 


   .menu-burger { position: fixed !important;
                        top: 15px !important;
                      right: 15px !important;
                       left: auto !important;
                    z-index: 9999 !important;
                 background: rgba(0,0,0,0.6);
                     border: 1px solid #fff3;
                    padding: 8px;
              border-radius: 8px;
                     cursor: pointer;
                    display: block; }



    .menu-burger div { width: 22px;
                      height: 2px;
                  background: #ffca28;
                      margin: 4px 0; }
             

         
    .side-nav { height: 100%;
                 width: 0;
              position: fixed;
               z-index: 2000;
                   top: 0;
                 right: 0;
            background: rgba(0,0,0,0.95);
            overflow-x: hidden;
            transition: 0.4s;
           padding-top: 60px;
           border-left: 2px solid #ffca28; }



    .menu-content { padding: 20px;
                    display: flex;
             flex-direction: column;
                        gap: 15px; }



    .menu-content a { color: white;
            text-decoration: none;
                  font-size: 17px;
                    display: flex;
                align-items: center;
                        gap: 10px;
                    padding: 10px 0;
              border-bottom: 1px solid #ffffff10; }



    .menu-content i { color: #ffca28;
                      width: 25px; }
                                                                                                                                                          
                                                                                                                                                             





/* ==================================================================== */
   /* === ESTILOS CSS - EL FONDO NEGRO DE LOS MENUS (CONTENIDO) === */
/* ==================================================================== */
                                        


                                                                              
   

     #pantalla-blanca {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 3000;
            overflow-y: auto;
            padding: 60px 20px;
            transform: translateX(100%);
            background-color: #000000;
            border-left: 2px solid #ffca28;
            color: white;
            transition: transform 0.4s ease;
        }
        
        
        #pantalla-blanca.open {
            transform: translateX(0);
        }





/* ==================================================================== */
       /* === ESTILOS CSS - TEXTOS EN LOS CONTENEDORES === */
/* ==================================================================== */
                                                                                                                                                     


        .quien {
            color: #fff;
            max-width: 720px;
            margin: 0 auto;
            padding: 20px;
        }
        
        
        
        .quien p { margin: 0; line-height: 1.6; }
        .quien p + p { margin-top: 16px; }
        .line-block span { display: block; }
        .line-block p { margin: 0; }
        .text-preline { white-space: pre-line; }
        .quien h1 { font-size: 26px; margin-bottom: 20px; color: #ffca28; line-height: 1.3; }
        .quien h2 { font-size: 20px; margin: 30px 0 10px; line-height: 1.3; }
        .quien h3 { margin: 30px 0 10px; line-height: 1.3; }
        .quien ul { margin: 10px 0 20px; padding-left: 20px; }
        .quien li { margin-bottom: 10px; }
        .quien .frase-final { margin-top: 30px; padding-top: 10px; border-top: 1px solid #eee; font-style: italic; }
        .space-sm { margin-top: 8px; }
        .space-md { margin-top: 16px; }
        .space-lg { margin-top: 32px; }
        .space-xl { margin-top: 48px; }
        .no-copy { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
        .allow-copy { -webkit-user-select: text; user-select: text; }




/* ==================================================================== */
        /* == ESTILOS PARA LA X DE CIERRE == */
/* ==================================================================== */




.menu-close-icon {
    position: absolute;
    top: 15px;             /* Misma altura que el botón burger */
    left: 15px;            /* Pegado a la izquierda */
    color: #ffca28;        /* Color amarillo */
    font-size: 30px;
    font-weight: bold;
    text-decoration: none; /* Quita el subrayado */
    z-index: 2500;         /* Por encima del contenido del menú */
    line-height: 1;
    cursor: pointer;
    padding: 5px;
    user-select: none;
    transition: 0.3s;
}



/* Cambia a blanco al pasar el ratón */
.menu-close-icon:hover {
    color: white;
}



/* ==================================================================== */
/* -- ESTILOS CSS - GALERÍA Y EVENTOS -- */
/* ==================================================================== */



.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}



.galeria-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease;
}



.galeria-grid img:hover {
    transform: scale(1.03);
}



.galeria-grid img:active {
    transform: scale(0.97);
}




/* PC */
@media (min-width: 769px) {

    .galeria-grid {
        grid-template-columns: repeat(3, 200px);
        justify-content: center;
    }

    .galeria-grid .thumb {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
}




/* MÓVIL */
@media (max-width: 768px) {

    .galeria-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .galeria-grid .thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        min-width: 0;
        object-fit: cover;
    }
}




/* Texto informativo debajo de la galería */

.galeria-info {
    margin-top: 20px;
    font-size: 14px;
    color: #ccc;
}




/* Miniaturas de EVENTOS */

.thumb-evento {
    width: 112px;
    height: 200px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    cursor: pointer;
}




/* ==================================================================== */
/* --  ESTILOS VÍDEOS -- */
/* ==================================================================== */



.video-block { margin-bottom: 25px; }

.btn-yt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    background-color: #FF0000;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
    padding: 8px 16px 8px 36px;
    position: relative;
}



.btn-yt:hover {
    background-color: #CC0000;
}



.btn-yt svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}



.video-text {
    margin: 6px 0 0 0;
    line-height: 1.6;
}




.s10 {
    display: block;
    margin-top: 10px;
    color: #fff;
}





.s15 {
    display: block;
    margin-top: 15px;
    color: #fff;
}




.s25 {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 15px;
    font-weight: bold;
}




/* ==================================================================== */
            /* === ESTILOS CSS - BOTÓN CIERRE MENÚ === */
/* ==================================================================== */
/*                                                                                                                                                                    */




.close-panel{
    position:fixed;
    top:15px;
    left:15px;
    z-index:4000;




    background:none !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;




    color:#fff !important;
    font-size:30px !important;
    font-weight:900 !important;
    font-family:Arial,sans-serif;



    width:auto;
    height:auto;
    padding:0;
    line-height:1;
    cursor:pointer;



    appearance:none;
    -webkit-appearance:none;
}





/* ==================================================================== */
             /* === ESTILOS CSS - BOTÓN BURGER === */
/* ==================================================================== */




    .menu-burger { position: fixed !important;
            top: 15px !important;
            right: 15px !important;
            left: auto !important;
            z-index: 9999 !important;
            background: rgba(0,0,0,0.6) !important;
            width: 45px !important;
            height: 45px !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
        }
        
        
        .menu-burger div {
            width: 22px !important;
            height: 2px !important;
            background: #ffca28 !important;
            margin: 3px 0 !important;
            display: block !important;
        }




/* ==================================================================== */
           /* === ESTILOS CSS - VISOR DE IMÁGENES === */
/* ==================================================================== */




        #img-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}



#img-target {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
}



.close-viewer {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}



/* ==================================================================== */
             /* === ESTILOS CSS - VISOR DE VÍDEOS === */
/* ==================================================================== */
                                                                                          



#video-viewer{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.90);
    z-index:20000;
    justify-content:center;
    align-items:center;
}



#video-frame{
    width:90%;
    max-width:1100px;
    aspect-ratio:16/9;
    border:none;
    border-radius:10px;
}






/* ==================================================================== */
        /* == INDICADOR DE SCROLL (DOBLE FLECHA) == */
/* ==================================================================== */



.scroll-indicator {
    position: absolute;
    bottom: 20px;
    right: 15px;
    color: #ffca28;
    font-size: 32px;
    z-index: 2500;
    
    
    
    /* Estilo de botón para que no se vea feo */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;


    
    /* Transición para cuando aparezca/desaparezca suavemente */
    transition: opacity 0.3s ease;
    


    /* Animación de rebote */
    animation: bounce 1.5s infinite;
}




/* Definición de la animación */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}



/* Clase para ocultar la flecha (añadida por JavaScript) */
.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none; /* Evita que haga scroll si está oculta */
    /* No hace falta poner transition aquí porque ya está puesta arriba en la principal */
}



/* ==================================================================== */
           /* === FLECHA VOLVER ARRIBA DE LOS CONTENIDOS === */
/* ==================================================================== */




.flecha-arriba-panel {
    position: fixed;

    bottom: 20px;
    right: 15px;

    color: #ffca28;
    font-size: 32px;

    background: transparent;
    border: none;
    cursor: pointer;

    padding: 5px;

    z-index: 5000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;

    animation: bounce-arriba-panel 1.5s infinite;
}



/* Flecha visible */

.flecha-arriba-panel.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/* Animación de la doble flecha */

@keyframes bounce-arriba-panel {

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(8px);
    }

    60% {
        transform: translateY(4px);
    }

}