/* Reset pequeño */
    :root{--overlay-color: rgba(0,0,0,0.45); --content-max-width: 1100px;}
    *{box-sizing:border-box}
    html,body{height:100%; margin:0; font-family: Inter, system-ui, sans-serif; color:#fff;}
    /* Contenedor fullscreen */
    .bg-wrap{
      position:fixed; inset:0; z-index:-1; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      background:#000;
    }
    /* Video fullbleed */
    .bg-video{
      position:absolute; top:50%; left:50%;
      width:auto; height:120%; min-width:100%; min-height:100%;
      transform:translate(-50%,-50%);
      object-fit:cover; object-position:center;
      filter: saturate(1.05) contrast(0.95);
    }
    /* Overlay para legibilidad */
    .bg-overlay{
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 70%);
      mix-blend-mode: multiply;
      pointer-events:none;
    }
    /* Contenido de la página */
    .page{
      position:relative; z-index:10;
      min-height:100vh; display:flex; align-items:center; justify-content:center;
      padding:48px 20px;
    }
    .card{
      width:100%; max-width:var(--content-max-width);
      background: rgba(255,255,255,0.03); padding:28px; border-radius:12px;
      backdrop-filter: blur(6px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
      text-align:center;
    }
    h1{margin:0 0 8px; font-size:clamp(24px,4vw,42px); letter-spacing: -0.02em;}
    p{margin:0 0 16px; opacity:0.95;}
    /* Botón de audio / controles */
    .controls{display:flex; gap:10px; justify-content:center; margin-top:12px;}
    .btn{
      background: rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.06);
      padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
    }
    .btn:active{transform:translateY(1px)}
    /* Botón pequeño para accesibilidad */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-

space:nowrap;border:0}
    /* Respecta a usuarios con preferencia por menos movimiento */
    @media (prefers-reduced-motion: reduce) {
      .bg-video { animation: none; }
      .bg-overlay { transition: none; }
    }

    /* Responsivo: reduce blur y overlay en móviles */
    @media (max-width:720px){
      .bg-video{height:140%}
      .card{padding:18px; border-radius:10px}
    }

/* Header*/
.main-header {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999; /* por encima del video */
}

.logo {
  height: 150px;
  width: auto;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}

.titulo {
  font-size: 28px;
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  font-weight: bold;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(34,34,34,0.85); /* semitransparente sobre el video */
  color: #fff;
  text-align: center;
  padding: 12px 0;
  z-index: 99999; /* más alto que el video */
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  pointer-events: auto; /* permite hacer clic en enlaces */
}

#footer a {
  color: #f39c12;
  text-decoration: none;
  margin: 0 8px;
}

#footer a:hover {
  text-decoration: underline;
}