/* La Política — hoja de estilo única. Sin recursos externos: cero peticiones a terceros. */

:root {
  --tinta: #17171a;
  --tinta-suave: #5c5c66;
  --papel: #ffffff;
  --papel-alt: #f6f6f6;
  --linea: #4e4e4;
  --acento: #8c1c13;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eceae5;
    --tinta-suave: #9d9a93;
    --papel: #121214;
    --papel-alt: #1b1b1e;
    --linea: #34343a;
    --acento: #e0645a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--papel);
  border: 1px solid var(--linea);
  padding: 0.5rem 0.75rem;
}

/* ---------- Cabecera ---------- */

.cabecera {
  border-bottom: 1px solid var(--linea);
  padding: 2.25rem 0 1.25rem;
  margin-bottom: 3rem;
}

.marca {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* El cuadro rojo del título */
.marca__nombre {
  display: inline-block;
  background: #f21b1b;
  color: #000;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.07em;
  padding: 0.55em 0.75em 0.55em 0.82em;
  max-width: 100%;
}

.marca__lema {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.nav {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: var(--tinta-suave);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible { color: var(--tinta); border-bottom-color: var(--acento); }

/* ---------- Portada ---------- */

.intro__titulo {
  margin: 0 0 3rem;
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-align: center;
  text-wrap: balance;
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entrada {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea);
}

.entrada:last-child { border-bottom: 0; }

.entrada__titulo {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

.entrada--destacada .entrada__titulo { font-size: 2.2rem; }

.entrada__titulo a {
  text-decoration: none;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}

.entrada__titulo a:hover,
.entrada__titulo a:focus-visible { background-size: 100% 2px; }

.entrada__bajada {
  margin: 0 0 0.75rem;
  color: var(--tinta-suave);
  line-height: 1.55;
}

.etiqueta {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}

.firma {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--tinta-suave);
}

/* ---------- Columna ---------- */

.columna__cabecera {
  padding-bottom: 1.75rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--linea);
}

.columna__cabecera h1 {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.12;
  font-weight: 700;
  text-wrap: balance;
}

.bajada {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.prosa { font-size: 1.125rem; }

.prosa--sola { padding-top: 1rem; }

.prosa p { margin: 0 0 1.4em; }

.prosa h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 1rem; }
.prosa h2 { font-size: 1.4rem; margin: 2.4rem 0 0.8rem; line-height: 1.25; }
.prosa h3 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }

.prosa a { color: var(--acento); text-underline-offset: 2px; }

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

.prosa ul, .prosa ol { padding-left: 1.25rem; margin: 0 0 1.4em; }
.prosa li { margin-bottom: 0.4em; }

.prosa hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 2.5rem 0;
}

.prosa img { max-width: 100%; height: auto; }

.prosa figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
}

.columna__pie {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}

.volver {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--tinta-suave);
}

.volver:hover { color: var(--acento); }

/* ---------- Pie ---------- */

.pie {
  margin-top: 5rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--linea);
  background: var(--papel-alt);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--tinta-suave);
  text-align: center;
}

.pie p { margin: 0.35rem 0; }
.pie__nota { opacity: 0.85; }

@media (max-width: 30rem) {
  .nav { gap: 1.1rem; flex-wrap: wrap; }
  .cabecera { margin-bottom: 2rem; }
}