/* web/estilo.css */
html, body { overflow-x: hidden; overflow-x: clip; }

/* [hidden] con especificidad de id (#mapa, #entrada) le gana al [hidden] del
   navegador; sin este !important el elemento oculto se queda pintado encima
   de todo y tapa la pantalla de entrada y la película. */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; background: #070d12; color: #e8e4dc;
             font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

#entrada { height: 100%; display: grid; place-content: center; text-align: center; gap: 1rem; padding: 2rem; }
#entrada h1 { font-size: clamp(2.5rem, 9vw, 5rem); font-weight: 300; letter-spacing: .18em; margin: 0; }
#entrada p { max-width: 34ch; margin: 0 auto; opacity: .65; line-height: 1.6; }
#btn-entrar { margin-top: 1rem; padding: .8rem 2.4rem; background: none; color: inherit;
              border: 1px solid currentColor; border-radius: 2rem; font-size: 1rem; cursor: pointer; }
#btn-entrar:hover { background: #e8e4dc; color: #070d12; }

#pelicula { position: fixed; inset: 0; }
#pelicula video { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: contain; opacity: 0; transition: opacity .4s linear;
                  z-index: 0; }
/* El JS sube a 1 el <video> que reproduce (Delta.avanzar/empezarEn, arreglo
   del bache de luminancia de M3). La interfaz tiene que estar SIEMPRE por
   encima de ese 0/1, o el vídeo a pantalla completa se come los clics de
   las palabras -exactamente lo que pasó con #opciones sin z-index. */

#opciones { position: absolute; left: 0; right: 0; bottom: 12%; display: flex;
            justify-content: center; gap: clamp(2rem, 12vw, 9rem);
            opacity: 0; transition: opacity .6s ease; pointer-events: none; z-index: 3; }
#opciones.visible { opacity: 1; pointer-events: auto; }
.opcion { background: none; border: 0; color: #fff; font: inherit; font-size: clamp(1rem, 3.4vw, 1.5rem);
          letter-spacing: .04em; cursor: pointer; text-shadow: 0 2px 14px rgba(0,0,0,.9); padding: .4rem 1rem; }
.opcion:hover, .opcion:focus-visible { text-decoration: underline; text-underline-offset: .4em; }

#btn-silencio { position: absolute; top: .8rem; right: .8rem; z-index: 5; width: 2.2rem; height: 2.2rem;
                background: rgba(7,13,18,.4); color: inherit; border: 1px solid rgba(232,228,220,.35);
                border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; opacity: .55; }
#btn-silencio:hover, #btn-silencio:focus-visible { opacity: 1; }

#trazo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 5vh; z-index: 3; }
#trazo path { fill: none; stroke: #e8e4dc; stroke-width: .35; opacity: .5; }

/* mapa */
#mapa { position: fixed; inset: 0; display: grid; place-content: safe center; gap: 1.2rem;
        text-align: center; padding: 2rem; background: #070d12; overflow-y: auto; }
#mapa h2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 300; letter-spacing: .1em; margin: 0; }
#mapa-retrato { max-width: 46ch; margin: 0 auto; opacity: .7; line-height: 1.6; }
#mapa-svg { width: min(92vw, 900px); height: auto; overflow: visible; }
#mapa-svg .cauce { fill: none; stroke: #e8e4dc; stroke-width: .25; opacity: .16; }
#mapa-svg .cauce.activo { opacity: .9; stroke-width: .5; }
#mapa-svg .nodo { fill: #e8e4dc; opacity: .25; cursor: pointer; }
#mapa-svg .nodo.activo { opacity: 1; }
#mapa-svg .nodo:hover { opacity: .8; }
#mapa-svg .nodo-toque { cursor: pointer; }
#mapa-datos { white-space: pre-line; font-size: .8rem; opacity: .45; line-height: 1.7; }
#btn-otra { justify-self: center; padding: .7rem 2rem; background: none; color: inherit;
            border: 1px solid currentColor; border-radius: 2rem; cursor: pointer; }

/* móvil */
#gira { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #gira { display: block; position: absolute; left: 0; right: 0; top: 1.2rem;
          text-align: center; font-size: .85rem; opacity: .5; z-index: 4; }
  #opciones { bottom: 22%; }
  #mapa-svg { width: 94vw; }
}

/* apaisado bajo, justo lo que pide "Gira el teléfono" (844x390 tipo):
   el mapa entero no cabe en la altura, hay que encogerlo para que entre
   todo -incluido el botón "Bajar otra vez"- sin depender solo del scroll */
@media (orientation: landscape) and (max-height: 500px) {
  #mapa-svg { width: min(70vw, 620px); }
}