/* =========================================================
   UNIVERSO BDH
   MINI FOOTER · TRANSPARENT GLASS
   ========================================================= */

   .bdh-minifooter {

       position: relative;

       width: 100%;

       margin-top: 3rem;

       padding: 1.4rem 0 0.8rem;

       /* TRANSPARENCIA */
       background:
           linear-gradient(180deg,
               rgba(0, 0, 0, 0.08),
               rgba(0, 0, 0, 0.22));

       /* GLASS */
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);

       /* BORDE SUPERIOR */
       border-top:
           1px solid rgba(255, 0, 212, 0.35);

       /* SOMBRA MUY SUTIL */
       box-shadow:
           0 -8px 30px rgba(255, 0, 212, 0.06);

       color: #ffffff;

       z-index: 20;

       overflow: hidden;
   }


   /* =========================================================
   LÍNEA NEÓN SUPERIOR
   ========================================================= */

   .bdh-minifooter::before {

       content: "";

       position: absolute;

       top: 0;

       left: 12%;
       right: 12%;

       height: 1px;

       background:
           linear-gradient(90deg,
               transparent,
               rgba(255, 0, 212, 0.75),
               rgba(255, 215, 0, 0.55),
               rgba(255, 0, 212, 0.75),
               transparent);

       box-shadow:
           0 0 10px rgba(255, 0, 212, 0.45);
   }


   /* =========================================================
   CONTENEDOR
   ========================================================= */

   .bdh-footer-inner {

       width: min(1050px, 90%);

       margin: auto;

       display: grid;

       grid-template-columns:
           minmax(180px, 0.8fr) minmax(300px, 1.2fr);

       align-items: center;

       gap: 3rem;
   }


   /* =========================================================
   MARCA
   ========================================================= */

   .footer-brand {

       display: flex;

       flex-direction: column;

       justify-content: center;
   }


   .footer-brand-title {

       font-family:
           "Old English Text MT",
           "UnifrakturCook",
           serif;

       font-size: 1.35rem;

       letter-spacing: 0.04em;

       background:
           linear-gradient(90deg,
               #ffffff,
               #ff00d4,
               #ffd700);

       -webkit-background-clip: text;
       background-clip: text;

       -webkit-text-fill-color: transparent;

       text-shadow:
           0 0 15px rgba(255, 0, 212, 0.15);
   }


   .footer-brand-subtitle {

       margin-top: 0.2rem;

       font-family:
           "Segoe UI",
           sans-serif;

       font-size: 0.55rem;

       letter-spacing: 0.22em;

       color:
           rgba(255, 255, 255, 0.45);
   }


   /* =========================================================
   GRID DE ENLACES
   ========================================================= */

   .footer-grid {

       display: grid;

       grid-template-columns:
           1fr 1fr;

       gap: 2.5rem;
   }


   .footer-column {

       display: flex;

       flex-direction: column;

       gap: 0.3rem;
   }


   .footer-column b {

       margin-bottom: 0.3rem;

       font-family:
           "Segoe UI",
           sans-serif;

       font-size: 0.58rem;

       letter-spacing: 0.18em;

       color: #ffd700;

       font-weight: 600;
   }


   .footer-column a {

       width: fit-content;

       font-family:
           "Segoe UI",
           sans-serif;

       font-size: 0.68rem;

       color:
           rgba(255, 255, 255, 0.55);

       text-decoration: none;

       transition:
           color 0.2s ease,
           transform 0.2s ease,
           text-shadow 0.2s ease;
   }


   .footer-column a:hover {

       color: #ff00d4;

       transform: translateX(3px);

       text-shadow:
           0 0 10px rgba(255, 0, 212, 0.65);
   }


   /* =========================================================
   DIVISOR
   ========================================================= */

   .footer-divider {

       width: min(1050px, 90%);

       height: 1px;

       margin:
           1rem auto 0.7rem;

       background:
           linear-gradient(90deg,
               transparent,
               rgba(255, 0, 212, 0.28),
               rgba(255, 215, 0, 0.22),
               transparent);
   }


   /* =========================================================
   PARTE INFERIOR
   ========================================================= */

   .footer-bottom {

       width: min(1050px, 90%);

       margin: auto;

       display: flex;

       justify-content: space-between;

       align-items: center;

       gap: 1rem;

       flex-wrap: wrap;

       font-family:
           "Segoe UI",
           sans-serif;

       font-size: 0.58rem;

       color:
           rgba(255, 255, 255, 0.38);
   }


   .footer-copy {

       display: flex;

       gap: 0.5rem;

       flex-wrap: wrap;

       align-items: center;
   }


   .footer-copy span {

       color:
           rgba(255, 215, 0, 0.55);
   }


   .footer-motto {

       font-family:
           "Old English Text MT",
           "UnifrakturCook",
           serif;

       font-size: 0.68rem;

       color:
           rgba(255, 0, 212, 0.68);

       text-shadow:
           0 0 10px rgba(255, 0, 212, 0.18);
   }


   /* =========================================================
   RESPONSIVE
   ========================================================= */

   @media (max-width: 700px) {

       .bdh-footer-inner {

           grid-template-columns: 1fr;

           gap: 1.2rem;

           text-align: center;
       }

       .footer-brand {

           align-items: center;
       }

       .footer-grid {

           justify-content: center;

           gap: 2rem;
       }

       .footer-column {

           align-items: center;
       }

       .footer-bottom {

           justify-content: center;

           text-align: center;
       }
   }

/*----------------------------------------------------*/
/* TTS controls (Reubicados a la derecha del menú) */
/* ---------------------------------------------------------*/
    .slides {
        position: relative; /* Actúa como el ancla maestra para los botones */
       }

    .tts-controls {
       position: absolute;
       top: -55px; /* Sube los botones a la altura exacta del botón de menú */
       right: 0;   /* Los pega milimétricamente al margen derecho */
       display: flex; 
       gap: 6px;
       z-index: 50;
        }

    .tts-controls button {
       background: linear-gradient(180deg, #934581, #9d1086);
       color: #fff; 
       border: 1px solid rgba(201, 166, 70, 0.4);
       padding: 6px 12px;
       border-radius: 6px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
        }

    .tts-controls button:hover {
       transform: scale(1.08);
       box-shadow: 0 0 12px rgba(157, 16, 134, 0.6);
       border-color: var(--gold-soft);
        
        }

/* =========================================================
   AJUSTES RESPONSIVOS (MÓVILES)
========================================================= */
@media (max-width: 700px) {
    .slides-wrapper {
        width: 98%;
    }
    
    .main {
        padding: 0px;
    }
    
    .tts-controls {
        top: -45px; /* Ajuste milimétrico de la altura en celulares */
    }
    
    /* Nota: Si mantienes .btn-menu { display: none; } en celulares, 
       los botones TTS ahora serán los únicos dueños de la esquina superior derecha. */
    .btn-menu {
        display: none;
    }
}