/* Estilos compartidos por todas las páginas - LÍDERES SOCIALES */
:root {
  --papel: #f6f5ef;
  --tinta: #1e2116;
  --tinta-suave: #59604c;
  --oliva: #55672c;
  --oliva-oscuro: #37421c;
  --linea: #d9d8c9;
  --marca: #d97b29;
  --tarjeta: #ffffff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}
a:focus-visible, button:focus-visible, audio:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
}

/* ---------- Botón Regresar ---------- */
.regresar-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.regresar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  font-size: .95rem; font-weight: 600;
  color: var(--oliva-oscuro); background: var(--tarjeta);
  border: 1.5px solid var(--oliva); border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.regresar:hover { background: var(--oliva); color: #fff; }
.regresar::before { content: "\2190"; font-size: 1.05em; }
.regresar-top { margin-top: 28px; }
.regresar-bottom { margin: 8px 0 48px; }

/* ---------- Página inicial ---------- */
.portada { max-width: 1040px; margin: 0 auto; padding: 0 24px 24px; }
.portada h1 {
  margin: 28px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 6.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--oliva-oscuro);
}
.portada .barra {
  height: 6px; width: 96px; background: var(--marca);
  border-radius: 3px; margin-bottom: 36px;
}
.lista {
  list-style: none; margin: 0; padding: 0;
  columns: 3 260px; column-gap: 40px;
}
.lista li { break-inside: avoid; border-bottom: 1px solid var(--linea); }
.lista a {
  display: block; padding: 10px 6px;
  color: var(--tinta); text-decoration: none;
  transition: background-color .15s, padding-left .15s;
}
.lista a:hover { background: #ecebdc; padding-left: 12px; }
.lista .nombre { font-weight: 600; }
.lista .apodo { color: var(--tinta-suave); font-size: .92em; }

/* ---------- Ficha del personaje (ventana emergente) ---------- */
.ficha-body { min-height: 100vh; display: flex; justify-content: center; }
.ficha {
  width: 100%; max-width: 520px;
  padding: 28px 24px 36px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.ficha h1 {
  margin: 8px 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.15;
  color: var(--oliva-oscuro);
}
.ficha .foto {
  width: 100%; max-width: 340px; height: auto;
  border: 6px solid var(--tarjeta);
  outline: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--tarjeta);
  display: block;
}
.ficha .descripcion {
  margin: 24px 0 22px;
  width: 100%;
  font-size: 1.02rem;
  text-align: center;
}
.ficha audio { width: 100%; max-width: 420px; }
.cerrar {
  margin-top: 30px;
  padding: 11px 28px;
  font: inherit; font-weight: 600;
  color: #fff; background: var(--oliva);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color .15s;
}
.cerrar:hover { background: var(--oliva-oscuro); }
.cerrar-x {
  position: fixed; top: 10px; right: 12px;
  width: 38px; height: 38px;
  font-size: 1.5rem; line-height: 1;
  color: var(--tinta); background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: 50%;
  cursor: pointer;
}
.cerrar-x:hover { background: var(--marca); color: #fff; }

/* ---------- Responsivo ---------- */
@media (max-width: 480px) {
  .lista { columns: 1; }
  .regresar-top { margin-top: 20px; }
}