/* ═══ Ideas — estilos de la sección de artículos ═══
   Hermana de micro-ensayos/ensayos.css, pero SEPARADA a propósito: los micro
   ensayos los publica un robot cada domingo y esta sección se escribe a mano.
   Compartir hoja acoplaría las dos cosas (un retoque del robot cambiaría el
   aspecto de los artículos sin querer). Lo que sí se comparte de verdad son los
   tokens del tema, que viven en /tema.css.
   Diferencia con los ensayos: aquí los textos son largos y estructurados, así que
   hay estilos para subtítulos, índice de contenidos y frases destacadas. */

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

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #888;
  --border: #e8e8e8;
  --texto: #444;
  --texto-tenue: #555;
  --pie: #bbb;
  --radio: 6px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, sans-serif;
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ── */
.wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 32px 140px;
}

/* ── CABECERA (la misma de la landing) ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 14px;
  gap: 16px;
  margin-bottom: 72px;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
  animation-delay: 0.2s;
}

.topbar .marca {
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar .marca .punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.topbar .enlace {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.topbar .enlace:hover { color: var(--ink); }

.topbar .membresia {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--radio);
  padding: 9px 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.topbar .membresia:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ── TITULAR ── */
h1 {
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
  animation-delay: 0.2s;
}

/* Entradilla: la promesa del artículo en una o dos frases */
.entradilla {
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto-tenue);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
  animation-delay: 0.25s;
}

.firma {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 44px;
  opacity: 0;
  animation: fadeIn 0.9s ease forwards;
  animation-delay: 0.25s;
}

/* ── DIVIDER ── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 0.35s;
}

/* ── CUERPO ── */
.cuerpo, .lista-seccion, .form-section, .relacionados, .sumario {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 0.45s;
}

.cuerpo p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto);
  margin-bottom: 24px;
}

.cuerpo p strong, .cuerpo li strong { color: var(--ink); font-weight: 500; }

/* Los enlaces de texto van en tinta, nunca en el azul del navegador: rompe el
   blanco y negro. Cubre tanto el cuerpo del artículo como la presentación del
   índice, que también lleva enlaces sueltos. */
.cuerpo a, .lista-seccion .intro a { color: var(--ink); text-decoration: underline; }

/* Subtítulos del artículo. Llevan una línea fina encima porque en un texto largo
   el ojo necesita saber dónde empieza un bloque nuevo (contraste con líneas, no
   con color: es la regla del sistema visual). */
.cuerpo h2 {
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 64px 0 20px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* El primero no lleva línea: ya la tiene el <hr> de la cabecera del artículo */
.cuerpo h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.cuerpo h3 {
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 40px 0 14px;
}

/* Frase destacada: una idea que quiero que se quede. Línea a la izquierda, sin
   comillas gigantes ni fondo de color. */
.cuerpo .destacado {
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-left: 1px solid var(--ink);
  padding-left: 20px;
  margin: 40px 0;
}

/* ── ÍNDICE DE CONTENIDOS (artículos largos) ── */
.sumario {
  margin: 0 0 56px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sumario h2 {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
}

.sumario ol { list-style: none; margin: 0; counter-reset: sumario; }

.sumario li {
  counter-increment: sumario;
  font-size: 15px;
  line-height: 1.5;
  padding: 5px 0;
  display: flex;
  gap: 12px;
}

.sumario li::before {
  content: counter(sumario);
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
  padding-top: 3px;
}

.sumario a {
  color: var(--texto);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sumario a:hover { color: var(--ink); text-decoration: underline; }

/* ── LISTAS con flecha y líneas finas ── */
ul.items {
  list-style: none;
  margin: 0 0 40px;
}

ul.items li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
}

ul.items li:first-child { border-top: 1px solid var(--border); }

ul.items li::before {
  content: '→';
  color: var(--muted);
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 2px;
}

/* ── ÍNDICE: la lista de artículos ── */
ul.lista-ensayos {
  list-style: none;
  margin: 0 0 40px;
}

ul.lista-ensayos li { border-bottom: 1px solid var(--border); }

ul.lista-ensayos li:first-child { border-top: 1px solid var(--border); }

ul.lista-ensayos a {
  display: block;
  padding: 22px 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

ul.lista-ensayos a:hover { opacity: 0.6; }

ul.lista-ensayos .titulo {
  display: block;
  font-family: 'Schibsted Grotesk', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

ul.lista-ensayos .resumen {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 6px;
}

ul.lista-ensayos .fecha {
  display: block;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Texto de presentación del índice */
.lista-seccion .intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto);
  margin-bottom: 40px;
}

/* ── RELACIONADOS ── */
.relacionados {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.relacionados h2 {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}

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

ul.relacionados-lista li { border-bottom: 1px solid var(--border); }

ul.relacionados-lista a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

ul.relacionados-lista a:hover { opacity: 0.6; }

/* ── CIERRE DE CAPTACIÓN ── */
.form-section { margin-top: 72px; }

.form-section .invitacion {
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto);
  margin-bottom: 24px;
}

.form-section .invitacion strong { color: var(--ink); font-weight: 500; }

/* ── FOOTER ── */
footer {
  margin-top: 120px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--pie);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 0.45s;
}

footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── ANIMATION ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Formulario de MailerLite (el mismo de la portada, mismos estilos) ── */
#mlb2-40117147.ml-form-embedContainer, #mlb2-40117147 * { box-sizing: border-box; }
#mlb2-40117147.ml-form-embedContainer { width: 100%; }
#mlb2-40117147 .ml-form-embedWrapper {
  background: transparent; border: 0; border-radius: 0;
  max-width: 460px; width: 100%; margin: 0;
}
#mlb2-40117147 .ml-form-embedBody { padding: 0; }
#mlb2-40117147 form { margin: 0; width: 100%; }
#mlb2-40117147 .ml-form-fieldRow { margin: 0 0 14px 0; }

#mlb2-40117147 input[type="email"] {
  width: 100%; background: transparent; color: var(--ink);
  font-family: 'Geist', sans-serif; font-weight: 300;
  font-size: 14px; line-height: 1.5; padding: 14px 18px;
  border: 1px solid var(--ink); border-radius: var(--radio); outline: none;
  -webkit-appearance: none;
}
#mlb2-40117147 input[type="email"]::placeholder { color: var(--pie); }

#mlb2-40117147 .ml-form-embedPermissions { margin: 0 0 12px 0; }
#mlb2-40117147 .ml-form-embedPermissionsContent p {
  color: var(--texto-tenue); font-family: 'Geist', sans-serif;
  font-size: 12px; line-height: 1.6; margin: 0;
}
#mlb2-40117147 .ml-form-checkboxRow { margin: 0 0 18px 0; }
#mlb2-40117147 .ml-form-checkboxRow label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0;
}
#mlb2-40117147 .ml-form-checkboxRow input[type="checkbox"] {
  margin: 2px 0 0 0; width: 15px; height: 15px;
  accent-color: var(--ink); flex-shrink: 0; cursor: pointer;
}
#mlb2-40117147 .ml-form-checkboxRow .label-description p {
  color: var(--texto-tenue); font-family: 'Geist', sans-serif;
  font-size: 12px; line-height: 1.5; margin: 0;
}
#mlb2-40117147 .ml-form-checkboxRow a { color: var(--ink); text-decoration: underline; }
#mlb2-40117147 .ml-form-embedPermissionsContent a { color: var(--ink); text-decoration: underline; }

#mlb2-40117147 .ml-form-embedSubmit { margin: 0; }
#mlb2-40117147 .ml-form-embedSubmit button.primary {
  width: 100%; background: var(--ink); color: var(--bg); border: none; border-radius: var(--radio);
  font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 22px;
  cursor: pointer; transition: opacity 0.2s; -webkit-appearance: none;
}
#mlb2-40117147 .ml-form-embedSubmit button.primary:hover { opacity: 0.75; }
#mlb2-40117147 .ml-form-embedSubmit button.loading {
  width: 100%; background: var(--ink); border: none; border-radius: var(--radio);
  padding: 14px 22px; cursor: default;
}

#mlb2-40117147 .ml-form-successContent .success-headline {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
  font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px 0;
}
#mlb2-40117147 .ml-form-successContent p {
  color: var(--texto); font-family: 'Geist', sans-serif;
  font-size: 14px; line-height: 1.7; margin: 0;
}

#mlb2-40117147 .ml-error input[type="email"] { border-color: #c0392b !important; }
#mlb2-40117147 .ml-error .label-description p,
#mlb2-40117147 .ml-error label { color: #c0392b !important; }

#mlb2-40117147 .ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; }
#mlb2-40117147 .ml-form-embedSubmitLoad:after {
  content: " "; display: block; width: 11px; height: 11px; margin: 1px auto;
  border-radius: 50%; border: 3px solid var(--bg);
  border-color: var(--bg) var(--bg) var(--bg) transparent; animation: mlSpin 1.2s linear infinite;
}
@keyframes mlSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#mlb2-40117147 .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── TABLET + MÓVIL: texto más grande, para leer más cómodo ── */
@media (max-width: 1024px) {
  .cuerpo p, ul.items li, .form-section .invitacion, .lista-seccion .intro { font-size: 19px; }
  .entradilla { font-size: 20px; }
  .cuerpo .destacado { font-size: 1.3rem; }
  .sumario li { font-size: 17px; }
}

/* ── MÓVIL ── */
@media (max-width: 500px) {
  .wrap { padding: 32px 24px 100px; }
  .topbar { position: relative; margin-bottom: 56px; column-gap: 12px; }
  .topbar .marca { font-size: 14px; }
  .topbar .enlace { font-size: 10px; letter-spacing: 0.05em; }
  .topbar .membresia { font-size: 11px; padding: 8px 11px; }
  footer { flex-direction: column; gap: 6px; }
  .cuerpo h2 { font-size: 1.35rem; margin-top: 52px; }

  /* Con enlace de sección en la cabecera no caben 3 elementos en una línea: el
     logo va centrado arriba con el toggle a su derecha y los enlaces bajan. */
  .topbar:has(.enlace) .marca { width: 100%; justify-content: center; min-height: 30px; }
  .topbar:has(.enlace) .tema-toggle { position: absolute; top: 0; right: 0; }
  .topbar:has(.enlace) nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 12px; }
}