/* ============ La Biblioteca de Franquito ============ */
:root {
  --fondo: #171310;
  --fondo-2: #211a14;
  --fondo-3: #2b2218;
  --borde: #3d3223;
  --texto: #f2e8d8;
  --texto-suave: #cbb99e;
  --acento: #e8b34b;
  --acento-fuerte: #f5c96b;
  --link: #8fc7ff;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  --radio: 14px;
  --ancho-max: 68rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232, 179, 75, .08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(143, 199, 255, .05), transparent 55%),
    var(--fondo);
  color: var(--texto);
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.65;
  min-height: 100vh;
}
/* Skip link */
.saltar {
  position: absolute; left: .75rem; top: -4rem;
  background: var(--acento); color: #20180a;
  padding: .6rem 1rem; border-radius: 0 0 10px 10px;
  font-weight: bold; z-index: 50; transition: top .2s;
  text-decoration: none;
}
.saltar:focus-visible { top: 0; }
/* Enfoque visible siempre */
:focus-visible {
  outline: 3px solid var(--acento-fuerte);
  outline-offset: 2px;
  border-radius: 4px;
}
a { color: var(--link); }
a:hover { color: #b9dcff; }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(43,34,24,.85), rgba(23,19,16,.6));
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.cabecera-interior {
  max-width: var(--ancho-max); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.25rem; flex-wrap: wrap;
}
.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--texto);
}
.marca svg { flex: none; }
.marca .nombre {
  font-size: 1.3rem; font-weight: bold; letter-spacing: .02em;
}
.marca .nombre small {
  display: block; font-size: .8rem; color: var(--texto-suave);
  font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
}
.cabecera .acciones { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

/* Botón interruptor de sonidos */
.boton-sonido {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: .45rem .95rem; font: inherit; font-size: .95rem;
  cursor: pointer;
}
.boton-sonido .pista {
  width: 2.2rem; height: 1.2rem; border-radius: 999px;
  background: #4a3f30; position: relative; transition: background .2s;
  flex: none;
}
.boton-sonido .pista::after {
  content: ""; position: absolute; top: .15rem; left: .15rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--texto-suave); transition: left .2s, background .2s;
}
.boton-sonido[aria-pressed="true"] .pista { background: #7a5a1d; }
.boton-sonido[aria-pressed="true"] .pista::after { left: 1.15rem; background: var(--acento-fuerte); }
.boton-sonido:hover { border-color: var(--acento); }

/* ---------- Navegación de salas ---------- */
.nav-salas { border-bottom: 1px solid var(--borde); background: rgba(23,19,16,.7); }
.nav-salas ul {
  max-width: var(--ancho-max); margin: 0 auto; padding: .55rem 1.25rem;
  list-style: none; display: flex; gap: .35rem; flex-wrap: wrap;
}
.nav-salas a {
  display: inline-block; text-decoration: none; color: var(--texto-suave);
  padding: .4rem .8rem; border-radius: 999px; font-size: .98rem;
}
.nav-salas a:hover { color: var(--texto); background: var(--fondo-3); }
.nav-salas a[aria-current="page"] {
  color: #20180a; background: var(--acento); font-weight: bold;
}

/* ---------- Contenido ---------- */
.contenido { max-width: var(--ancho-max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.portada { text-align: center; padding: 2.5rem 0 2rem; }
.portada h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 .6rem;
  color: var(--acento-fuerte); letter-spacing: .01em;
}
h1, h2, h3 { line-height: 1.25; }
.portada .lema { font-size: 1.2rem; color: var(--texto-suave); font-style: italic; margin: 0; }
.regla {
  border: 0; height: 2px; margin: 2rem auto; max-width: 16rem;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
}

/* Tarjetas de salas */
.grilla-salas {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none; padding: 0; margin: 1.5rem 0 0;
}
.tarjeta {
  background: linear-gradient(160deg, var(--fondo-2), var(--fondo-3));
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform .18s, border-color .18s;
  height: 100%;
}
.tarjeta:hover { transform: translateY(-3px); border-color: var(--acento); }
.tarjeta a {
  display: block; padding: 1.35rem 1.35rem 1.5rem;
  text-decoration: none; color: inherit; height: 100%;
}
.tarjeta .icono-sala { font-size: 1.9rem; }
.tarjeta h2 { margin: .5rem 0 .35rem; color: var(--acento-fuerte); font-size: 1.45rem; }
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: 1rem; }
.tarjeta .entrar {
  display: inline-block; margin-top: .9rem; color: var(--link); font-size: .95rem;
}

/* ---------- Página de sala ---------- */
.miga { font-size: .95rem; margin-bottom: 1.2rem; }
.miga a { text-decoration: none; }
.sala h1 { color: var(--acento-fuerte); font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .2rem 0 .4rem; }
.sala .descripcion { color: var(--texto-suave); font-size: 1.1rem; max-width: 46rem; }
.aviso-muestra {
  border: 1px dashed var(--acento); border-radius: var(--radio);
  background: rgba(232, 179, 75, .07);
  padding: .9rem 1.1rem; margin: 1.6rem 0; font-size: 1rem;
}
.aviso-muestra strong { color: var(--acento-fuerte); }

/* Estantes (botones conmutadores) */
.estante {
  background: linear-gradient(160deg, var(--fondo-2), var(--fondo-3));
  border: 1px solid var(--borde); border-radius: var(--radio);
  margin: 1rem 0; overflow: hidden;
}
.estante-cabeza { margin: 0; font-size: inherit; font-weight: normal; }
.estante-boton {
  appearance: none; background: none; border: 0; font: inherit; text-align: left;
  width: 100%;
  cursor: pointer; padding: 1rem 1.2rem;
  font-size: 1.15rem; font-weight: bold; color: var(--texto);
  display: flex; align-items: center; gap: .6rem;
}
.estante-boton .marcador {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--acento); font-size: 1rem; transition: transform .2s;
}
.estante-boton[aria-expanded="true"] .marcador { transform: rotate(90deg); }
.estante-boton:hover { background: rgba(232, 179, 75, .06); }
.estante .estante-cuerpo {
  padding: .2rem 1.3rem 1.2rem; border-top: 1px solid var(--borde);
}
.estante .estante-cuerpo p { margin: .7rem 0; }

/* Artículos de texto */
.texto {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.2rem 1.4rem; margin: 1.1rem 0;
}
.texto h3 { margin-top: 0; color: var(--acento-fuerte); }
.etiqueta {
  display: inline-block; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: #20180a; background: var(--acento);
  border-radius: 999px; padding: .15rem .7rem; font-weight: bold;
  margin-bottom: .5rem;
}
.etiqueta.gris { background: #6b5f4e; color: #171310; }

/* Lista de pistas de música */
.pistas { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.pistas li {
  display: flex; align-items: center; gap: .9rem;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .9rem 1.1rem;
}
.pistas .nota { font-size: 1.5rem; color: var(--acento); flex: none; }
.pistas .titulo-pista { font-weight: bold; }
.pistas .detalle-pista { color: var(--texto-suave); font-size: .95rem; }

/* Pie */
.pie {
  border-top: 1px solid var(--borde); margin-top: 3rem;
  color: var(--texto-suave); font-size: .95rem;
}
.pie .contenido { padding-top: 1.4rem; padding-bottom: 2rem; }

/* Utilidad: solo lector de pantalla */
.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;
}

@media (max-width: 40rem) {
  body { font-size: 1.05rem; }
  .cabecera-interior { padding: .7rem 1rem; }
  .contenido { padding: 1.4rem 1rem 3rem; }
}


/* App de una sola página: foco programático sin halo visual */
.contenido:focus, .contenido h1:focus { outline: none; }