@charset "UTF-8";
/* ==========================================================================
   diosesydiosas.com
   Hoja de estilos única. Sin frameworks ni fuentes externas: todo lo que la
   página necesita viaja en este archivo y en el HTML.

   Índice
     1. Tokens            9. Cabecera de página
     2. Base             10. Texto largo
     3. Estructura       11. Listados de fichas
     4. Cabecera         12. Barra lateral
     5. Buscador         13. Pie
     6. Portada          14. Estados y botones
     7. Tarjetas         15. Utilidades
     8. Etiquetas        16. Impresión
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Tipografía */
  --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --t-lg: clamp(1.35rem, 1vw + 1.1rem, 1.7rem);
  --t-xl: clamp(1.75rem, 2.2vw + 1.2rem, 2.5rem);
  --t-2xl: clamp(2.25rem, 4vw + 1.2rem, 3.75rem);

  /* Espaciado */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;

  --ancho: 74rem;
  --ancho-texto: 42rem;

  --radio-sm: 0.4rem;
  --radio: 0.85rem;
  --radio-lg: 1.5rem;

  --transicion: 180ms cubic-bezier(0.2, 0, 0.2, 1);
  --muelle: 420ms cubic-bezier(0.34, 1.3, 0.64, 1);

  /* Paleta clara (por defecto) */
  --fondo: #fcf9f4;
  --fondo-alt: #f4ece0;
  --superficie: #ffffff;
  --superficie-2: #fdfaf6;
  --borde: #e7ddcc;
  --borde-fuerte: #d2c3ac;
  --texto: #1c1915;
  --texto-suave: #5d5449;
  --texto-tenue: #8a8073;
  --acento: #91601a;
  --acento-claro: #b07d2c;
  --acento-fondo: #f7ecd6;
  --violeta: #58358a;
  --violeta-fondo: #efe8f8;
  --sobre-acento: #fffdf8;
  --sombra: 0 1px 2px rgb(28 25 21 / 6%), 0 8px 24px -14px rgb(28 25 21 / 22%);
  --sombra-alta: 0 2px 6px rgb(28 25 21 / 7%), 0 24px 48px -24px rgb(28 25 21 / 32%);
  --selección: #f7e2ba;
  --trama: rgb(28 25 21 / 4.5%);
  --brillo: 55%;
}

/* Paleta oscura: por preferencia del sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0b0c10;
    --fondo-alt: #111318;
    --superficie: #15171d;
    --superficie-2: #1a1d25;
    --borde: #262a34;
    --borde-fuerte: #3b4252;
    --texto: #eae6de;
    --texto-suave: #b2aa9c;
    --texto-tenue: #877f72;
    --acento: #e4b45f;
    --acento-claro: #f2cd88;
    --acento-fondo: #2b2114;
    --violeta: #bb9ae8;
    --violeta-fondo: #221b31;
    --sobre-acento: #17130a;
    --sombra: 0 1px 2px rgb(0 0 0 / 45%), 0 8px 24px -14px rgb(0 0 0 / 75%);
    --sombra-alta: 0 2px 6px rgb(0 0 0 / 45%), 0 24px 48px -24px rgb(0 0 0 / 85%);
    --selección: #4b3a17;
    --trama: rgb(255 250 235 / 5%);
    --brillo: 72%;
  }
}

/* ...y a mano desde el conmutador de la cabecera. */
:root[data-tema="oscuro"] {
  --fondo: #0b0c10;
  --fondo-alt: #111318;
  --superficie: #15171d;
  --superficie-2: #1a1d25;
  --borde: #262a34;
  --borde-fuerte: #3b4252;
  --texto: #eae6de;
  --texto-suave: #b2aa9c;
  --texto-tenue: #877f72;
  --acento: #e4b45f;
  --acento-claro: #f2cd88;
  --acento-fondo: #2b2114;
  --violeta: #bb9ae8;
  --violeta-fondo: #221b31;
  --sobre-acento: #17130a;
  --sombra: 0 1px 2px rgb(0 0 0 / 45%), 0 8px 24px -14px rgb(0 0 0 / 75%);
  --sombra-alta: 0 2px 6px rgb(0 0 0 / 45%), 0 24px 48px -24px rgb(0 0 0 / 85%);
  --selección: #4b3a17;
  --trama: rgb(255 250 235 / 5%);
  --brillo: 72%;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--selección); color: var(--texto); }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.018em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--e-4); }

a {
  color: var(--acento);
  text-decoration-color: color-mix(in srgb, var(--acento) 32%, transparent);
  text-underline-offset: 0.19em;
  text-decoration-thickness: 1px;
  transition: color var(--transicion), text-decoration-color var(--transicion);
}

a:hover { color: var(--acento-claro); text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-6) 0; }

ul, ol { padding-left: 1.25em; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

/* --------------------------------------------------------------------------
   3. Estructura
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.principal { flex: 1; padding-bottom: var(--e-8); }

.seccion { margin-block: var(--e-7); }
.seccion--primera { margin-top: var(--e-6); }

.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.seccion__cabecera h2 { margin: 0; position: relative; padding-bottom: var(--e-3); }

/* Filete dorado bajo el título de sección. */
.seccion__cabecera h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--violeta) 70%, transparent));
}

.seccion__nota { color: var(--texto-tenue); font-size: var(--t-sm); margin: 0; }

.disposicion {
  display: grid;
  gap: var(--e-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .disposicion { grid-template-columns: minmax(0, 1fr) 19rem; }

  /* La barra lateral se queda fija y, si su contenido es más alto que la
     pantalla (la lista de las 53 mitologías), rueda por dentro. */
  .disposicion__lado {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
  }
}

.saltar {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--acento);
  color: var(--sobre-acento);
  padding: var(--e-3) var(--e-4);
  border-radius: 0 0 var(--radio) 0;
  text-decoration: none;
}

.saltar:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 4.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--texto);
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}

.marca:hover { color: var(--texto); }

.marca__mark { color: var(--acento); flex-shrink: 0; transition: transform var(--muelle); }
.marca:hover .marca__mark { transform: rotate(60deg) scale(1.06); }

.marca__texto strong { font-weight: 600; }
.marca__texto span { color: var(--acento); font-weight: 400; font-style: italic; }

.navegacion {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-left: auto;
}

.navegacion > a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm);
  transition: background var(--transicion), color var(--transicion);
}

.navegacion > a:hover,
.navegacion > a[aria-current="page"] { color: var(--texto); background: var(--fondo-alt); }

/* Menú desplegable */
.menu { position: relative; }

.menu__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm);
  transition: background var(--transicion), color var(--transicion);
}

.menu__boton:hover,
.menu[data-abierto="si"] .menu__boton { color: var(--texto); background: var(--fondo-alt); }

.menu__boton svg { transition: transform var(--transicion); }
.menu[data-abierto="si"] .menu__boton svg { transform: rotate(180deg); }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  width: min(32rem, 82vw);
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--e-3);
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 2px;
}

.menu[data-abierto="si"] .menu__panel {
  display: grid;
  animation: aparecer 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.menu__panel a {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  padding: var(--e-2);
  border-radius: var(--radio-sm);
  color: var(--texto-suave);
  text-decoration: none;
}

.menu__panel a:hover { background: var(--fondo-alt); color: var(--texto); }
.menu__panel img { width: 22px; height: 22px; flex-shrink: 0; }

.menu__panel--simple { width: min(17rem, 82vw); grid-template-columns: 1fr; }

.menu__cuenta {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* Botón de menú en móvil */
.hamburguesa {
  display: none;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  cursor: pointer;
  padding: var(--e-2);
  line-height: 0;
}

@media (max-width: 61.99rem) {
  .hamburguesa { display: inline-flex; margin-left: auto; }

  .navegacion {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
    padding: var(--e-3);
    max-height: 80vh;
    overflow-y: auto;
  }

  .cabecera[data-menu="abierto"] .navegacion { display: flex; }

  .navegacion > a,
  .menu__boton { padding: var(--e-3); width: 100%; text-align: left; justify-content: space-between; }

  .menu__panel {
    position: static;
    width: auto;
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--e-3) var(--e-3);
    max-height: 17rem;
  }
}

/* Conmutador de tema */
.tema {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-suave);
  cursor: pointer;
  padding: var(--e-2);
  line-height: 0;
  transition: color var(--transicion), border-color var(--transicion), transform var(--transicion);
  flex-shrink: 0;
}

.tema:hover { color: var(--acento); border-color: var(--borde-fuerte); transform: rotate(-18deg); }
.tema__luna { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema__sol { display: none; }
  :root:not([data-tema="claro"]) .tema__luna { display: block; }
}

:root[data-tema="oscuro"] .tema__sol { display: none; }
:root[data-tema="oscuro"] .tema__luna { display: block; }
:root[data-tema="claro"] .tema__sol { display: block; }
:root[data-tema="claro"] .tema__luna { display: none; }

/* Barra de progreso de lectura */
.progreso {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acento), var(--violeta));
  z-index: 50;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Buscador
   -------------------------------------------------------------------------- */
.buscador { position: relative; flex: 1 1 auto; max-width: 22rem; }
.buscador--grande { max-width: 40rem; margin-inline: auto; }

.buscador__campo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0 var(--e-3) 0 var(--e-4);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador__campo:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent);
}

.buscador--grande .buscador__campo {
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-5);
  box-shadow: var(--sombra-alta);
}

.buscador__campo > svg { color: var(--texto-tenue); flex-shrink: 0; }

.buscador input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--texto);
  font: inherit;
  padding: 0.58rem 0;
  outline: none;
}

.buscador--grande input { font-size: var(--t-md); padding: 0.62rem 0; }
.buscador input::placeholder { color: var(--texto-tenue); }
.buscador input::-webkit-search-cancel-button { display: none; }

.buscador__enviar {
  background: var(--acento);
  color: var(--sobre-acento);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.5rem var(--e-5);
  transition: background var(--transicion);
  flex-shrink: 0;
}

.buscador__enviar:hover { background: var(--acento-claro); }

.buscador__sugerencias {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.55rem);
  z-index: 50;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--e-2);
  margin: 0;
  list-style: none;
  max-height: 23rem;
  overflow-y: auto;
  text-align: left;
  display: none;
}

.buscador__sugerencias:not(:empty) { display: block; }

.buscador__sugerencias a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-sm);
  color: var(--texto);
  text-decoration: none;
}

.buscador__sugerencias a:hover,
.buscador__sugerencias li[aria-selected="true"] a { background: var(--fondo-alt); }

.buscador__sugerencias img { width: 30px; height: 30px; flex-shrink: 0; }
.buscador__sugerencias span { min-width: 0; }
.buscador__sugerencias strong { font-weight: 600; display: block; line-height: 1.3; }

.buscador__sugerencias small {
  color: var(--texto-tenue);
  font-size: var(--t-xs);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 51.99rem) {
  .cabecera .buscador { display: none; }
}

/* --------------------------------------------------------------------------
   6. Portada
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
  background:
    radial-gradient(58rem 30rem at 12% -12%, color-mix(in srgb, var(--violeta) 17%, transparent), transparent 68%),
    radial-gradient(52rem 28rem at 90% -6%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 64%),
    var(--fondo-alt);
  padding-block: clamp(var(--e-7), 9vw, 6rem);
  text-align: center;
}

/* Cielo estrellado: dos capas de puntos de tamaños distintos. */
.portada::before,
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.portada::before {
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 30px 30px;
  color: var(--texto);
  opacity: 0.5;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
}

.portada::after {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, var(--acento), transparent),
    radial-gradient(1.4px 1.4px at 74% 16%, var(--violeta), transparent),
    radial-gradient(1.8px 1.8px at 46% 68%, var(--acento), transparent),
    radial-gradient(1.3px 1.3px at 88% 58%, var(--acento), transparent),
    radial-gradient(1.5px 1.5px at 8% 72%, var(--violeta), transparent),
    radial-gradient(1.2px 1.2px at 62% 38%, var(--acento), transparent);
  opacity: 0.85;
}

.portada > * { position: relative; }

.portada h1 { margin-bottom: var(--e-4); max-width: 18ch; margin-inline: auto; }

/* La palabra clave del titular, en dorado. */
.portada h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--acento), color-mix(in srgb, var(--violeta) 55%, var(--acento)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada__entradilla {
  font-size: var(--t-md);
  color: var(--texto-suave);
  max-width: 48ch;
  margin: 0 auto var(--e-6);
  text-wrap: pretty;
}

.portada__cifras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-5) var(--e-7);
  margin: var(--e-6) 0 0;
  list-style: none;
  padding: 0;
}

.portada__cifras b {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  color: var(--acento);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.portada__cifras span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--texto-tenue);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  margin-top: var(--e-5);
}

/* --------------------------------------------------------------------------
   7. Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.rejilla--ancha { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--e-4); }
.rejilla--estrecha { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }

/* Las tarjetas ocupan toda la altura de su celda: filas parejas aunque un
   título ocupe dos líneas. */
.rejilla > li { display: flex; }
.rejilla > li > * { width: 100%; }

.ficha {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-3) var(--e-4);
  color: var(--texto);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

/* Halo dorado que asoma por detrás del icono al pasar el ratón. */
.ficha::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 50%;
  width: 8rem;
  height: 8rem;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 26%, transparent), transparent 66%);
  opacity: 0;
  transition: opacity var(--transicion);
  pointer-events: none;
}

.ficha:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
  color: var(--texto);
}

.ficha:hover::before { opacity: 1; }

.ficha__icono {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--muelle);
}

.ficha:hover .ficha__icono { transform: scale(1.09) rotate(-4deg); }
.ficha--grande .ficha__icono { width: 54px; height: 54px; }

/* Ocupa todo el ancho sobrante para que las barras comparativas de todas las
   tarjetas midan lo mismo y se puedan comparar de un vistazo. */
.ficha__cuerpo { flex: 1; min-width: 0; position: relative; }

.ficha__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.22;
  display: block;
}

.ficha__meta { font-size: var(--t-xs); color: var(--texto-tenue); display: block; margin-top: 3px; }

/* Barra fina que compara el tamaño de cada mitología. */
.ficha__barra {
  display: block;
  height: 3px;
  margin-top: var(--e-2);
  border-radius: 3px;
  background: var(--borde);
  overflow: hidden;
}

.ficha__barra i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--violeta) 60%, var(--acento)));
}

/* Tarjeta de artículo con imagen */
.articulo-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.articulo-tarjeta:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}

.articulo-tarjeta__imagen {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--fondo-alt);
  display: block;
  transition: scale var(--muelle);
}

.articulo-tarjeta:hover .articulo-tarjeta__imagen { scale: 1.03; }
.articulo-tarjeta__marco { overflow: hidden; display: block; }

.articulo-tarjeta__cuerpo {
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  flex: 1;
}

.articulo-tarjeta__cuerpo h3 { margin: 0; font-size: var(--t-md); }
.articulo-tarjeta__cuerpo h3 a { color: var(--texto); text-decoration: none; }
.articulo-tarjeta__cuerpo h3 a:hover { color: var(--acento); }

.articulo-tarjeta__cuerpo p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   8. Etiquetas, chips y migas
   -------------------------------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: var(--acento-fondo);
  color: var(--acento);
  text-decoration: none;
  width: fit-content;
}

.etiqueta--violeta { background: var(--violeta-fondo); color: var(--violeta); }

/* Datos de cabecera de una ficha: mitología, tipo, género. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: var(--e-3) 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-xs);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
}

a.chip:hover { border-color: var(--acento); color: var(--acento); }

/* Navegación entre las secciones de una página larga. */
.saltos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-6);
}

.saltos a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}

.saltos a:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-fondo); }
.saltos img { width: 18px; height: 18px; }
.saltos b { font-variant-numeric: tabular-nums; color: var(--texto-tenue); font-weight: 500; }

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.migas li { display: flex; align-items: center; gap: var(--e-2); }

.migas li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: -45deg;
  opacity: 0.55;
}

.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas [aria-current] { color: var(--texto); }

/* --------------------------------------------------------------------------
   9. Cabecera de página
   -------------------------------------------------------------------------- */
.titular {
  display: flex;
  align-items: flex-start;
  gap: var(--e-5);
  margin-bottom: var(--e-6);
}

.titular__icono {
  width: clamp(58px, 9vw, 92px);
  height: clamp(58px, 9vw, 92px);
  flex-shrink: 0;
  filter: drop-shadow(0 6px 16px rgb(0 0 0 / 14%));
}

.titular h1 { margin: 0 0 var(--e-2); }
.titular__cuerpo { min-width: 0; }
.titular__sub { color: var(--texto-suave); font-size: var(--t-md); margin: 0; text-wrap: pretty; }

@media (max-width: 35rem) {
  .titular { gap: var(--e-4); }
}

/* --------------------------------------------------------------------------
   10. Texto largo (fichas y artículos)
   -------------------------------------------------------------------------- */
.prosa {
  font-size: var(--t-md);
  line-height: 1.78;
  color: var(--texto);
  max-width: var(--ancho-texto);
}

.prosa--ancha { max-width: none; }
.prosa > * + * { margin-top: var(--e-4); }

.prosa h2 { font-size: var(--t-lg); margin-top: var(--e-6); }
.prosa h3 { font-size: var(--t-md); margin-top: var(--e-5); }

.prosa img { border-radius: var(--radio); display: block; margin-inline: auto; }
.prosa figure { margin: var(--e-5) 0; }

.prosa blockquote {
  margin: var(--e-5) 0;
  padding: var(--e-2) var(--e-5);
  border-left: 3px solid var(--acento);
  color: var(--texto-suave);
  font-style: italic;
}

.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li + li { margin-top: var(--e-2); }

.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prosa th, .prosa td { border: 1px solid var(--borde); padding: var(--e-2) var(--e-3); text-align: left; }
.prosa th { background: var(--fondo-alt); }

/* Capitular en el primer párrafo de una ficha. */
.prosa--relato > p:first-of-type::first-letter {
  float: left;
  font-family: var(--fuente-titulo);
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.08em 0.09em 0 0;
  color: var(--acento);
}

/* Enlace generado automáticamente a otra deidad. */
.prosa a.deidad {
  color: var(--violeta);
  text-decoration-color: color-mix(in srgb, var(--violeta) 32%, transparent);
  font-weight: 500;
}

.prosa a.deidad:hover { color: var(--violeta); text-decoration-color: currentColor; }

/* Bloque que resalta un dato de la ficha */
.aviso {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  background: var(--violeta-fondo);
  border: 1px solid color-mix(in srgb, var(--violeta) 22%, transparent);
  border-radius: var(--radio);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto);
  margin-bottom: var(--e-5);
  max-width: var(--ancho-texto);
}

.aviso svg { color: var(--violeta); flex-shrink: 0; margin-top: 2px; }
.aviso p { margin: 0; }

/* Frase corta que acompaña al nombre. */
.epigrafe {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--texto-suave);
  border-left: 3px solid var(--acento);
  padding-left: var(--e-4);
  margin: 0 0 var(--e-5);
  max-width: var(--ancho-texto);
}

/* --------------------------------------------------------------------------
   11. Listados de fichas
   -------------------------------------------------------------------------- */
.grupo { margin-bottom: var(--e-7); scroll-margin-top: 6rem; }

.grupo__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.grupo__titulo img { width: 34px; height: 34px; }
.grupo__titulo h2 { margin: 0; font-size: var(--t-lg); }

.grupo__cuenta {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.deidades {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

.deidades li { background: var(--superficie); }

.deidades a {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  color: var(--texto);
  text-decoration: none;
  height: 100%;
  position: relative;
  transition: background var(--transicion);
}

.deidades a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acento);
  scale: 1 0;
  transition: scale var(--transicion);
}

.deidades a:hover { background: var(--fondo-alt); }
.deidades a:hover::before { scale: 1 1; }

.deidades b { font-family: var(--fuente-titulo); font-weight: 600; white-space: nowrap; }

.deidades span {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deidades em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  white-space: nowrap;
  padding-left: var(--e-2);
}

/* --------------------------------------------------------------------------
   12. Barra lateral
   -------------------------------------------------------------------------- */
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

.panel__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-base);
  font-weight: 600;
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
}

.panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }

.panel li a {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border-radius: var(--radio-sm);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  text-decoration: none;
  line-height: 1.35;
}

.panel li a:hover { background: var(--fondo-alt); color: var(--texto); }
.panel li a[aria-current="page"] { background: var(--acento-fondo); color: var(--acento); font-weight: 600; }
.panel img { width: 24px; height: 24px; flex-shrink: 0; }
.panel__pie { margin: var(--e-3) 0 0; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   13. Pie
   -------------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-alt);
  padding-block: var(--e-6);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.pie__rejilla {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: var(--e-5);
}

.pie h3 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  margin: 0 0 var(--e-3);
  font-family: var(--fuente-texto);
  font-weight: 600;
}

.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: var(--e-2); }
.pie a { color: var(--texto-suave); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }

.pie__legal {
  border-top: 1px solid var(--borde);
  padding-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  justify-content: space-between;
  align-items: center;
  color: var(--texto-tenue);
  font-size: var(--t-xs);
}

.pie__legal nav { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* --------------------------------------------------------------------------
   14. Estados y botones
   -------------------------------------------------------------------------- */
.vacio {
  text-align: center;
  padding: var(--e-7) var(--e-5);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  color: var(--texto-suave);
}

.vacio h2 { font-size: var(--t-lg); }

.error { text-align: center; padding-block: var(--e-8) var(--e-7); }

.error__codigo {
  font-family: var(--fuente-titulo);
  font-size: clamp(4.5rem, 17vw, 9rem);
  line-height: 1;
  background: linear-gradient(120deg, var(--acento), var(--violeta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.42;
  margin: 0;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--acento);
  color: var(--sobre-acento);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.62rem var(--e-5);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), transform var(--transicion), border-color var(--transicion);
}

.boton:hover { background: var(--acento-claro); color: var(--sobre-acento); transform: translateY(-1px); }

.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.boton--secundario:hover { background: var(--superficie); color: var(--texto); border-color: var(--acento); }

/* --------------------------------------------------------------------------
   15. Utilidades
   -------------------------------------------------------------------------- */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.centrado { text-align: center; }
.tenue { color: var(--texto-tenue); }
.estrecho { max-width: var(--ancho-texto); }

/* --------------------------------------------------------------------------
   16. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .cabecera, .pie, .disposicion__lado, .buscador, .migas, .saltos, .progreso { display: none !important; }
  body { background: #fff; color: #000; }
  .disposicion { display: block; }
  a { text-decoration: underline; color: inherit; }
  .prosa { max-width: none; font-size: 11pt; }
  .portada { background: none; }
}