/* Estilos de las paginas de palabras y del glosario. Van aparte de la portada:
   son HTML plano, sin JavaScript, para que Google las lea sin tener que
   ejecutar nada. Usan las mismas fuentes y colores del libro.

   Ojo con las fuentes: Blackout Midnight y Utility NO traen glifos acentuados,
   por eso los titulos grandes llevan el acento pintado con CSS (.ac) y el texto
   real va en aria-label. Aachen Std y Mulish si tienen acentos y ahi no hace
   falta el truco. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d0d0d;
  color: rgba(255,255,255,0.86);
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* El colors.css del sistema le pinta a TODA <a> un recuadro de marcatextos
   (el mismo de <mark>). Sirve para resaltar una palabra dentro de un parrafo,
   pero aqui casi todas las ligas son de navegacion —migas, menu, vecinas— y
   salian todas encajonadas. Se apaga y se deja el subrayado de siempre. */
a {
  background: none;
  padding: 0;
  border-radius: 0;
  transform: none;
  display: inline;
  font-weight: inherit;
  color: var(--hue-teal);
  text-decoration: none;
}
a:hover { color: var(--hue-magenta); filter: none; }
a:active { transform: none; }

/* acentos pintados encima de la letra, igual que en la portada */
.ac { position: relative; display: inline-block; line-height: 1; }
.ac::after {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  margin-bottom: -0.068em; width: 0.23em; height: 0.095em;
  background: currentColor; box-shadow: var(--ac-shadow, none);
  transform: translateX(-44%) rotate(-26deg);
}
.ac-d::after { width: 0.34em; height: 0.085em; border-radius: 0.05em; transform: translateX(-50%); }
.ac-n::after { width: 0.36em; height: 0.08em; margin-bottom: -0.055em; border-radius: 0.06em; transform: translateX(-50%) skewY(-10deg); }

/* ── barra ───────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 5vw, 48px);
  background: #0d0d0d; border-bottom: 3px solid rgba(255,255,255,0.12);
}
.marca {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 15px; color: #fff; text-decoration: none;
}
.marca b { color: var(--hue-magenta); }
.barra nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.barra nav a {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 12px; color: rgba(255,255,255,0.7);
  text-decoration: none; padding: 8px 12px;
}
.barra nav a:hover { color: #fff; }
.barra nav a.comprar { background: var(--hue-magenta); color: #fff; }

/* ── caja de contenido ───────────────────────────────────────────────────── */
main { max-width: 760px; margin: 0 auto; padding: clamp(34px, 6vw, 62px) clamp(16px, 5vw, 32px) 70px; }

.miga {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 11px; color: rgba(255,255,255,0.45);
  margin-bottom: 22px;
}
.miga a { color: rgba(255,255,255,0.6); text-decoration: none; }
.miga a:hover { color: var(--hue-teal); }

h1.palabra {
  font-family: 'Blackout Midnight', sans-serif; font-weight: 400;
  text-transform: uppercase; line-height: 1.04; letter-spacing: 0.005em;
  font-size: clamp(42px, 9vw, 84px); color: #fff;
  --ac-shadow: 0.075em 0.09em 0 #000;
  text-shadow: 5px 6px 0 var(--hue-magenta), 10px 12px 0 #000;
  margin-bottom: 18px;
}

.meta { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.meta span {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 11px; padding: 6px 12px;
}
.meta .pais { background: var(--hue-teal-dark); color: #fff; }
.meta .pos { border: 2px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); }

.def {
  font-family: 'Aachen Std', Georgia, serif; font-weight: 700;
  font-size: clamp(20px, 3vw, 25px); line-height: 1.36; color: #fff;
  border-left: 5px solid var(--hue-green); padding-left: 18px;
  margin-bottom: 22px;
}

.bloque { margin-top: 40px; }
.bloque h2 {
  font-family: 'Aachen Std', Georgia, serif; font-weight: 700;
  font-size: clamp(21px, 3.2vw, 28px); line-height: 1.14; color: var(--hue-green);
  margin-bottom: 14px;
}
.bloque p { margin-bottom: 15px; text-wrap: pretty; }
.bloque p:last-child { margin-bottom: 0; }

.rolas { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rolas li {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 13px; color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06); border-left: 4px solid var(--hue-magenta);
  padding: 11px 14px;
}

/* ── de una palabra a la siguiente ───────────────────────────────────────── */
.vecinas {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 52px; padding-top: 26px;
  border-top: 3px solid rgba(255,255,255,0.12);
}
.vecinas a {
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 12px; color: rgba(255,255,255,0.75);
  text-decoration: none; padding: 9px 13px; border: 2px solid rgba(255,255,255,0.28);
}
.vecinas a:hover { color: #fff; border-color: var(--hue-magenta); }

/* ── llamada a comprar ───────────────────────────────────────────────────── */
.cajon {
  margin-top: 46px; padding: 26px;
  background: rgba(255,255,255,0.05); border: 3px solid rgba(255,255,255,0.14);
}
.cajon p { margin-bottom: 15px; }
.cajon p:last-child { margin-bottom: 0; }
.boton {
  display: inline-block; background: var(--hue-magenta); color: #fff;
  font-family: 'Utility', sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 14px; text-decoration: none;
  padding: 13px 24px; box-shadow: 5px 5px 0 #000;
}
.boton:hover { color: #fff; filter: brightness(1.12); }

/* ── glosario ────────────────────────────────────────────────────────────── */
.glosario { max-width: 900px; }
.entrada-texto { margin-bottom: 32px; text-wrap: pretty; }
.lista {
  list-style: none; display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.lista li {
  background: rgba(255,255,255,0.05); border-left: 4px solid rgba(255,255,255,0.18);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
}
.lista li:has(a) { border-left-color: var(--hue-magenta); }
.lista a, .lista span:first-child {
  font-family: 'Aachen Std', Georgia, serif; font-weight: 700;
  font-size: 18px; line-height: 1.2; color: #fff; text-decoration: none;
}
.lista a { color: var(--hue-teal); }
.lista a:hover { color: var(--hue-magenta); }
.lista i {
  font-family: 'Utility', sans-serif; font-style: normal; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 10px; color: rgba(255,255,255,0.5);
}
.lista .mini { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.66); }

/* ── pie ─────────────────────────────────────────────────────────────────── */
.pie {
  border-top: 3px solid rgba(255,255,255,0.12);
  padding: 40px clamp(16px, 5vw, 32px) 56px; text-align: center;
}
.pie img { opacity: 0.85; margin-bottom: 16px; }
.pie p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.pie .ligas { font-size: 13px; }