/* ==========================================================================
   Catecismo & Artículos — Hoja de estilos
   Estética: editorial clásica · pergamino e tinta · acento oxblood
   ========================================================================== */

/* ---------- Tokens de tema ---------- */
:root {
  --paper:        #f5efe3;
  --paper-2:      #efe7d6;
  --card:         #fbf7ee;
  --ink:          #211c16;
  --ink-soft:     #4a4136;
  --ink-faint:    #8a7d6a;
  --line:         #e0d5c0;
  --accent:       #7c2b2b;   /* oxblood */
  --accent-soft:  #9c4a3f;
  --gold:         #9a7b3f;
  --good:         #4f6b3a;   /* verde "memorizado" */
  --shadow:       0 1px 2px rgba(33,28,22,.06), 0 8px 28px rgba(33,28,22,.08);
  --shadow-sm:    0 1px 2px rgba(33,28,22,.06), 0 2px 8px rgba(33,28,22,.05);
  --radius:       16px;
  --radius-sm:    11px;
  --maxw:         720px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-brand:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Newsreader", Georgia, serif;
  --font-ui:      "Newsreader", Georgia, serif;
}

html[data-theme="dark"] {
  --paper:        #18140f;
  --paper-2:      #1f1a13;
  --card:         #221c15;
  --ink:          #ece3d2;
  --ink-soft:     #c3b7a1;
  --ink-faint:    #8a7d68;
  --line:         #352c20;
  --accent:       #d98b7e;
  --accent-soft:  #e0a194;
  --gold:         #cba968;
  --good:         #8fae6e;
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.3);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(140% 120% at 80% -10%, rgba(124,43,43,.05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Cabecera fija ---------- */
/* =========================================================================
   HEADER — Layout minimalista con menú hamburguesa.
   Una sola fila siempre (mobile/desktop): logo a la izquierda, dos íconos
   a la derecha (hamburguesa + tema). Toda la navegación vive en el drawer.
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.1rem;
}

/* Brand: wordmark "1693.ORG" en tipografía Newsreader (la misma serif del
   cuerpo del sitio, el "eyebrow" que el usuario eligió como identidad).
   Mayúsculas con tracking generoso para sensación editorial. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  transition: transform .15s ease;
  flex-shrink: 0;
}
.brand:hover { transform: scale(1.04); }
.brand:active { transform: scale(.97); }
.brand__mark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
}

/* Acciones de la derecha: hamburguesa + tema */
.header-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}

/* =========================================================================
   ICON-BUTTON base (back-link en páginas internas, etc.). Tamaño compacto
   42px circular. NO se usa para los botones del header — ahí ahora viven
   .nav-toggle y .theme-toggle, que son 48x48 cuadrados con esquinas suaves.
   ========================================================================= */
.icon-btn {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink-soft);
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, color .2s ease, background .2s ease;
  padding: 0;
  font: inherit;
}
.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; }

/* =========================================================================
   HEADER BUTTONS — hamburguesa y tema. 48x48, esquinas suaves, presencia
   tipográfica. Reemplazan los antiguos .icon-btn pequeños del header.
   ========================================================================= */
.nav-toggle,
.theme-toggle {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0; font: inherit;
  transition: border-color .2s ease, color .2s ease,
              background .2s ease, transform .12s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.theme-toggle:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.nav-toggle:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.nav-toggle:active,
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 22px; height: 22px; }

/* Hamburguesa: 3 barras que se transforman en X cuando aria-expanded="true".
   Las barras son anchas y gruesas para tener presencia visual fuerte. */
.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 22px;
  gap: 5px;
}
.nav-toggle__bars > span {
  display: block;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.65,.05,.36,1),
              opacity .2s ease,
              width .25s ease;
}
.nav-toggle__bars > span:nth-child(2) { width: 70%; align-self: flex-end; }
.nav-toggle:hover .nav-toggle__bars > span:nth-child(2) { width: 100%; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* =========================================================================
   NAV-DRAWER — drawer lateral de pantalla completa que se desliza desde la
   derecha. Reemplaza el antiguo popover compacto. Modal con backdrop con
   blur. Tipografía generosa, items numerados estilo editorial, selector
   de tema integrado, footer de marca.
   ========================================================================= */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s ease;
  cursor: pointer;
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
html[data-theme="dark"] .nav-drawer__backdrop { background: rgba(0, 0, 0, .55); }

.nav-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 48px rgba(20, 15, 10, .22),
              -2px 0 8px rgba(20, 15, 10, .08);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(124,43,43,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav-drawer__brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.nav-drawer__close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: color .2s ease, border-color .2s ease, transform .12s ease, background .2s ease;
}
.nav-drawer__close:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.nav-drawer__close:active { transform: scale(.92); }
.nav-drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-drawer__close svg { width: 18px; height: 18px; }

.nav-drawer__eyebrow {
  font-family: var(--font-brand);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.5rem 1.5rem .25rem;
}

.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: .35rem 1.5rem 0;
}
.nav-drawer__nav a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  color: var(--ink);
  padding: .95rem .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  transition: color .2s ease, background .2s ease, padding .25s ease;
  /* Stagger entrance: animation set when drawer is open */
  opacity: 0;
  transform: translateY(8px);
}
.nav-drawer__nav a:last-child { border-bottom: 0; }
.nav-drawer.is-open .nav-drawer__nav a {
  animation: navItemIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.nav-drawer.is-open .nav-drawer__nav a:nth-child(1) { animation-delay: .12s; }
.nav-drawer.is-open .nav-drawer__nav a:nth-child(2) { animation-delay: .17s; }
.nav-drawer.is-open .nav-drawer__nav a:nth-child(3) { animation-delay: .22s; }
.nav-drawer.is-open .nav-drawer__nav a:nth-child(4) { animation-delay: .27s; }
.nav-drawer.is-open .nav-drawer__nav a:nth-child(5) { animation-delay: .32s; }
@keyframes navItemIn {
  to { opacity: 1; transform: translateY(0); }
}

.nav-drawer__num {
  font-family: var(--font-brand);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  align-self: start;
  margin-top: .35rem;
  transition: color .2s ease;
}
.nav-drawer__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.nav-drawer__label {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: normal;
}
.nav-drawer__desc {
  font-family: var(--font-ui, var(--font-body));
  font-size: .82rem;
  color: var(--ink-faint);
  line-height: 1.35;
}
.nav-drawer__arrow {
  font-family: var(--font-brand);
  font-size: 1.2rem;
  color: var(--ink-faint);
  transition: color .2s ease, transform .25s cubic-bezier(.32,.72,0,1);
  align-self: center;
}

.nav-drawer__nav a:hover .nav-drawer__num,
.nav-drawer__nav a:focus-visible .nav-drawer__num { color: var(--accent); }
.nav-drawer__nav a:hover .nav-drawer__label,
.nav-drawer__nav a:focus-visible .nav-drawer__label { color: var(--accent); }
.nav-drawer__nav a:hover .nav-drawer__arrow,
.nav-drawer__nav a:focus-visible .nav-drawer__arrow {
  color: var(--accent);
  transform: translateX(6px);
}
.nav-drawer__nav a:focus-visible { outline: none; }

.nav-drawer__nav a.is-active .nav-drawer__num,
.nav-drawer__nav a.is-active .nav-drawer__label { color: var(--accent); }
.nav-drawer__nav a.is-active .nav-drawer__label { font-weight: 700; }
.nav-drawer__nav a.is-active::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 30%; bottom: 30%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-drawer__divider {
  height: 1px;
  margin: 1.6rem 1.5rem .25rem;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--line) 100%, transparent),
    transparent);
}

/* Selector de tema en píldoras (segmented control) */
.nav-drawer__theme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: .35rem 1.5rem 0;
  padding: .35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.theme-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-brand);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.theme-pill svg { width: 18px; height: 18px; }
.theme-pill:hover { color: var(--ink); }
.theme-pill[aria-pressed="true"] {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(33,28,22,.08),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.theme-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Body lock cuando el drawer está abierto: evita scroll de fondo */
body.nav-locked {
  overflow: hidden;
  /* Preservar scrollbar gutter para que el contenido no salte */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer__panel,
  .nav-drawer__backdrop,
  .nav-toggle__bars > span,
  .nav-drawer__arrow { transition: none; }
  .nav-drawer.is-open .nav-drawer__nav a {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ---------- Contenedor de páginas ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 1.1rem 5rem; }
.page { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Tipografía de contenido ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; color: var(--ink); }
.eyebrow {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-family: var(--font-ui); font-weight: 600; margin: 0 0 .7rem;
}

/* ---------- Portada / Hero ---------- */
.hero { text-align: center; padding: 1.5rem 0 .5rem; }
.hero__title {
  font-size: clamp(2.4rem, 9vw, 3.6rem); margin: .2rem 0 .3rem;
  font-variation-settings: "opsz" 144, "SOFT" 0; letter-spacing: -.5px;
}
.hero__title em { font-style: italic; color: var(--accent); }
.hero__quote {
  font-size: clamp(1.25rem, 4.6vw, 2rem); font-weight: 500;
  line-height: 1.28; max-width: 26ch; margin: .2rem auto .5rem;
  letter-spacing: -.3px;
}
.hero__attr {
  font-family: var(--font-ui); font-weight: 600; color: var(--accent);
  letter-spacing: .02em; margin: 0 0 1.3rem; font-size: 1rem;
}
.hero__sub { color: var(--ink-soft); font-size: 1.1rem; margin: 0 auto 1.6rem; max-width: 34ch; }
.hero__rule { width: 54px; height: 2px; background: var(--accent); margin: 0 auto 1.7rem; opacity: .65; }

.tiles { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 540px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile__icon { color: var(--accent); margin-bottom: .7rem; }
.tile__icon svg { width: 30px; height: 30px; }
.tile h3 { font-size: 1.3rem; margin: 0 0 .25rem; }
.tile p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.tile__go { margin-top: .9rem; color: var(--accent); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

.scripture {
  margin: 2.4rem auto 0; max-width: 40ch; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 1.22rem;
  color: var(--ink-soft); line-height: 1.5;
}
.scripture cite { display: block; font-style: normal; font-family: var(--font-ui);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: .7rem; }

/* ---------- Encabezado de sección ---------- */
.section-head { margin-bottom: 1.5rem; }
.section-head h1 { font-size: clamp(2rem, 7vw, 2.7rem); margin: 0 0 .4rem; }
.section-head p { margin: 0; color: var(--ink-soft); }

/* ---------- Barra de búsqueda ---------- */
.searchbar { position: relative; margin: 0 0 1.2rem; }
.searchbar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
.searchbar input {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .8rem 1rem .8rem 2.6rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); transition: border-color .2s ease, box-shadow .2s ease;
}
.searchbar input::placeholder { color: var(--ink-faint); }
.searchbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---------- Progreso del catecismo ---------- */
.progress { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: 1.3rem; box-shadow: var(--shadow-sm); }
.progress__top { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--ink-soft); margin-bottom: .5rem; }
.progress__top strong { color: var(--ink); font-family: var(--font-display); }
.progress__bar { height: 7px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.2,1); }

/* ---------- Acciones (botones tipo "modo") ---------- */
.actions { display: flex; gap: .6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-ui); font-size: .92rem; font-weight: 600;
  padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: all .2s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--accent { background: var(--accent); color: #fff8f0; border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-soft); color: #fff8f0; }
html[data-theme="dark"] .btn--accent { color: #1a120f; }

/* ---------- Listado por secciones ---------- */
.section-group { margin-bottom: 2rem; }
.section-group__title {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--accent);
  margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.section-group__title .num { font-size: .75rem; color: var(--ink-faint); font-family: var(--font-ui); letter-spacing: .08em; margin-left: auto; }

.qlist { display: grid; gap: .55rem; }
.qcard {
  display: flex; align-items: flex-start; gap: .9rem; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem .95rem; box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.qcard:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.qcard__num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: .9rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-top: 2px;
  transition: background .2s ease, color .2s ease;
}
.qcard.is-learned .qcard__num { background: var(--good); color: #fff; border-color: var(--good); }
.qcard__q { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.qcard__check { flex: none; margin-left: auto; color: var(--good); opacity: 0; transition: opacity .2s ease; align-self: center; }
.qcard.is-learned .qcard__check { opacity: 1; }
.qcard__check svg { width: 18px; height: 18px; }

/* ---------- Detalle de pregunta ---------- */
.q-detail { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.q-detail__crumb { font-size: .82rem; color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.q-detail__crumb a { color: var(--accent); text-decoration: none; }
.q-detail__no { font-family: var(--font-display); font-size: 3.4rem; line-height: .9; color: var(--accent); opacity: .9; }
.q-detail__section { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: .4rem 0 1.4rem; }
.q-detail__q { font-family: var(--font-display); font-size: clamp(1.55rem, 6vw, 2.1rem); line-height: 1.22; margin: 0 0 1.4rem; }
.q-detail__label { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .5rem; }
.q-detail__a { font-size: 1.18rem; line-height: 1.75; color: var(--ink); }
.q-detail__a .ref { white-space: nowrap; }

.q-actions { display: flex; gap: .6rem; margin: 2rem 0 1.5rem; }
.q-nav { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.q-nav a { display: block; min-width: 0; text-decoration: none; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem .9rem; transition: all .2s ease; }
.q-nav a:hover { border-color: var(--accent); color: var(--accent); }
.q-nav a[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.q-nav .dir { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .2rem; }
.q-nav .lbl { font-family: var(--font-display); font-size: .92rem; display: block; line-height: 1.35; overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .q-nav { flex-direction: row; align-items: stretch; gap: .6rem; }
  .q-nav a { flex: 1 1 0; min-width: 0; max-width: 100%; }
  .q-nav .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-nav .next { text-align: right; }
}

/* Enlaces a referencias bíblicas */
a.ref-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent); }
a.ref-link:hover { border-bottom-style: solid; }

/* ---------- Modo memorización (tarjetas) ---------- */
.flash-wrap { text-align: center; }
.flash-meta { font-size: .82rem; color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.flashcard {
  perspective: 1600px; width: 100%; max-width: 540px; margin: 0 auto;
  aspect-ratio: 3 / 4; cursor: pointer;
}
@media (min-width: 600px) { .flashcard { aspect-ratio: 4 / 3; } }
.flashcard__inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flashcard.is-flipped .flashcard__inner { transform: rotateY(180deg); }
.flashcard__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.5rem; box-shadow: var(--shadow); overflow-y: auto;
}
.flashcard__face .tag { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.flashcard__face--front .q { font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.3; color: var(--ink); }
.flashcard__face--front .big-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent); opacity: .85; margin-bottom: .6rem; line-height: 1; }
.flashcard__face--back { transform: rotateY(180deg); }
.flashcard__face--back .a { font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
.flashcard__hint { font-size: .8rem; color: var(--ink-faint); margin-top: 1.1rem; font-style: italic; }

.flash-controls { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.flash-controls .btn { min-width: 0; }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); display: grid; place-items: center;
  transition: all .2s ease;
}
.round-btn:hover { border-color: var(--accent); color: var(--accent); }
.round-btn:active { transform: scale(.92); }
.round-btn svg { width: 22px; height: 22px; }
.flash-bottom { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* ---------- Blog ---------- */
.cat-filter { display: flex; gap: .45rem; overflow-x: auto; margin-bottom: 1.4rem; padding-bottom: .3rem; scrollbar-width: none; }
.cat-filter::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft);
  padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); transition: all .2s ease; white-space: nowrap;
}
.chip:hover { color: var(--ink); }
.chip.is-active { background: var(--accent); color: #fff8f0; border-color: var(--accent); }
html[data-theme="dark"] .chip.is-active { color: #1a120f; }

.post-list { display: grid; gap: 1rem; }
.post-card {
  display: block; text-decoration: none; color: inherit; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.post-card__meta { display: flex; gap: .6rem; align-items: center; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .55rem; }
.post-card__cat { color: var(--accent); font-weight: 600; }
.post-card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.post-card h3 { font-size: 1.3rem; margin: 0 0 .4rem; line-height: 1.25; }
.post-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* Artículo individual */
.article { }
.article__meta { display: flex; gap: .6rem; align-items: center; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; }
.article__meta .post-card__cat { color: var(--accent); }
.article h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.15; margin: 0 0 .6rem; }
.article__byline { color: var(--ink-soft); font-style: italic; margin: 0 0 1.8rem; }
.article__body { font-size: 1.12rem; line-height: 1.78; }
.article__body p { margin: 0 0 1.15rem; }
.article__body h2 { font-size: 1.5rem; margin: 2rem 0 .7rem; }
.article__body h3 { font-size: 1.22rem; margin: 1.6rem 0 .5rem; }
.article__body blockquote {
  margin: 1.6rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink-soft);
}
.article__body ul { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.article__body li { margin-bottom: .4rem; }

/* ---------- Botón volver ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.3rem; transition: color .2s ease;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 16px; height: 16px; }

/* ---------- Estado vacío ---------- */
.empty { text-align: center; color: var(--ink-faint); padding: 3rem 1rem; font-style: italic; }

/* ---------- Pie ---------- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: 3rem;
  padding: 2rem 1.1rem calc(2rem + env(safe-area-inset-bottom)); text-align: center;
}
.site-footer p { margin: .3rem 0; color: var(--ink-faint); font-size: .85rem; }
/* Línea única del footer: misma tipografía, color, tracking y caja que el
   wordmark del logo (Newsreader semibold uppercase en oxblood con tracking
   editorial .08em). Tamaño un poco menor que el logo para no competir
   visualmente con el header. !important en color y size porque la regla
   anterior .site-footer p tiene mayor especificidad (clase+elemento). */
.footer-word {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.08rem !important;
  color: var(--accent) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer a { color: var(--ink-soft); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: .65rem 1.15rem; border-radius: 999px;
  font-size: .9rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Catálogo de catecismos
   ========================================================================== */
.cat-list { display: grid; gap: 1rem; }
.cat-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.2rem;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.cat-card__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent);
}
.cat-card__icon svg { width: 24px; height: 24px; }
.cat-card__body { flex: 1; min-width: 0; }
.cat-card__body h3 { font-size: 1.22rem; margin: 0 0 .15rem; }
.cat-card__meta {
  margin: 0 0 .2rem; font-family: var(--font-ui);
  font-size: .82rem; letter-spacing: .03em; color: var(--ink-faint); text-transform: uppercase;
}
.cat-card--compact { align-items: center; padding: .95rem 1.1rem; }
.cat-card--compact .cat-card__icon { width: 38px; height: 38px; border-radius: 10px; }
.cat-card--compact .cat-card__icon svg { width: 21px; height: 21px; }
.cat-card--compact h3 { font-size: 1.12rem; margin: 0; line-height: 1.25; }
.cat-card--compact .progress__bar.slim { margin-top: .5rem; }
.cat-card__desc { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.cat-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  font-family: var(--font-ui); font-size: .8rem; color: var(--ink-faint);
}
.cat-card__prog { color: var(--good); font-weight: 600; }
.cat-card__go { flex: none; align-self: center; color: var(--ink-faint); }
.cat-card__go svg { width: 22px; height: 22px; }
.cat-card:hover .cat-card__go { color: var(--accent); }
.progress__bar.slim { height: 5px; margin-top: .6rem; }

/* ==========================================================================
   Exposición de Beddome
   ========================================================================== */
.beddome {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.beddome__title { font-size: 1.35rem; margin: 0 0 .3rem; color: var(--accent); }
.beddome__intro { margin: 0 0 1.2rem; color: var(--ink-faint); font-size: .92rem; font-style: italic; }
.bd-group {
  padding: .2rem 0;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 1.1rem; padding-bottom: 1.1rem;
}
.bd-group:last-child { border-bottom: none; margin-bottom: 0; }
.bd-item { margin: 0 0 1rem; }
.bd-item:last-child { margin-bottom: 0; }
.bd-q {
  margin: 0 0 .2rem; font-family: var(--font-display);
  font-weight: 600; color: var(--ink); line-height: 1.35;
}
.bd-a { margin: 0 0 .4rem; color: var(--ink-soft); }
.bd-verse {
  margin: .3rem 0 0; padding: .5rem .9rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--paper-2); border-radius: 0 8px 8px 0;
  color: var(--ink-soft); font-size: .95rem; line-height: 1.55;
}
.bd-verse cite {
  display: block; margin-top: .35rem; font-style: normal;
  font-family: var(--font-ui); font-size: .82rem; letter-spacing: .02em;
}
.bd-onlyref { margin: .2rem 0 0; font-family: var(--font-ui); font-size: .85rem; }

/* ==========================================================================
   Popover de versículos
   ========================================================================== */
.ref-link { cursor: pointer; }
.refpop {
  position: fixed; z-index: 1000; left: -9999px; top: 0;
  width: min(340px, calc(100vw - 20px));
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 16px rgba(33,28,22,.12), 0 18px 50px rgba(33,28,22,.22);
  padding: .85rem .95rem; opacity: 0; transform: translateY(4px) scale(.98);
  pointer-events: none; transition: opacity .14s ease, transform .14s ease;
}
.refpop.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.refpop.above { transform-origin: bottom center; }
.refpop__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding-bottom: .5rem; margin-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.refpop__ref { font-family: var(--font-display); font-weight: 600; color: var(--accent); font-size: 1.02rem; }
.refpop__ver { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase; white-space: nowrap; }
.refpop__body { font-size: .96rem; line-height: 1.6; color: var(--ink-soft); max-height: 42vh; overflow-y: auto; }
.refpop__body .vn { font-size: .62em; font-weight: 700; color: var(--accent); margin-right: 1px; vertical-align: super; }
.refpop__na { color: var(--ink-faint); font-style: italic; }
.refpop__link {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .65rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.refpop__link svg { width: 14px; height: 14px; }
.refpop__link:hover { text-decoration: underline; }

/* ==========================================================================
   Modo memorización — cabe completo en la pantalla, sin scroll
   ========================================================================== */
body.memo-mode { overflow: hidden; }
body.memo-mode main {
  padding-top: .7rem;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  height: calc(100vh - var(--header-h, 116px));
  height: calc(100svh - var(--header-h, 116px));
}
.page--memo { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page--memo .back-link { margin-bottom: .3rem; flex: none; }
.section-head--compact { margin-bottom: .55rem; flex: none; }
.section-head--compact .eyebrow { margin-bottom: .2rem; }
.section-head--compact h1 { font-size: clamp(1.45rem, 5.2vw, 2rem); margin: 0 0 .25rem; }
.section-head--compact .memo-hint { font-size: .9rem; line-height: 1.4; }

.page--memo .flash-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page--memo .flash-meta { margin-bottom: .5rem; flex: none; }
.page--memo .flashcard {
  aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: 540px; margin: 0 auto;
}
.page--memo .flashcard__face { padding: 1.3rem 1.3rem; }
.page--memo .flashcard__face--front .big-num { font-size: 2.1rem; margin-bottom: .35rem; }
.page--memo .flashcard__hint { margin-top: .85rem; }
.page--memo .flash-controls { margin-top: .8rem; flex: none; }
.page--memo .flash-bottom { margin-top: .6rem; flex: none; }

/* Pantallas de poca altura (la mayoría de teléfonos): compactar aún más */
@media (max-height: 780px) {
  .section-head--compact .memo-hint { display: none; }
  .section-head--compact h1 { font-size: 1.4rem; }
  .section-head--compact { margin-bottom: .4rem; }
  .page--memo .flashcard__face { padding: 1.1rem 1.1rem; }
}
@media (max-height: 660px) {
  .section-head--compact .eyebrow { display: none; }
  .page--memo .flash-meta { margin-bottom: .35rem; }
  .page--memo .flashcard__face--front .big-num { font-size: 1.8rem; }
  .round-btn { width: 46px; height: 46px; }
}

/* ==========================================================================
   Artículo: epígrafe e intervenciones de la audiencia
   ========================================================================== */
.article__body .post-epigraph {
  color: var(--ink-faint); font-size: .95rem; line-height: 1.5;
  padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line);
}
.article__body .intervencion {
  margin: 1.4rem 0; padding: .5rem 0 .5rem 1rem;
  border-left: 3px solid var(--line); color: var(--ink-soft);
  font-size: .96rem;
}
.article__body .intervencion strong { color: var(--accent); }

/* ==========================================================================
   Crédito de publicación (dentro del catecismo) y etiqueta del footer
   ========================================================================== */
.cat-credito {
  margin: -.4rem 0 0; font-family: var(--font-ui);
  font-size: .9rem; color: var(--ink-faint); line-height: 1.5;
}
.cat-credito a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.footer-tag { margin-top: .25rem !important; color: var(--ink-faint); font-size: .85rem; display: none; } /* deprecated, footer now consolidated */

/* ==========================================================================
   Catecismo (detalle): cabecera compacta para subir el contenido
   ========================================================================== */
#catPage .section-head { margin-bottom: .8rem; }
#catPage .section-head h1 { font-size: clamp(1.45rem, 5.6vw, 2rem); margin: 0 0 .3rem; }
#catPage .section-head > p { font-size: .9rem; line-height: 1.45; margin: 0; }
#catPage .section-head .cat-credito { font-size: .74rem; line-height: 1.4; margin: .3rem 0 0; color: var(--ink-faint); }
#catPage .section-head .cat-credito a { color: var(--accent); }
#catPage .progress { padding: .55rem .85rem; margin-bottom: .75rem; }
#catPage .progress__top { margin-bottom: .35rem; font-size: .82rem; }
#catPage .actions { margin-bottom: .8rem; }
#catPage .searchbar { margin-bottom: .85rem; }

/* ==========================================================================
   Skeleton de carga — se muestra brevemente mientras se descarga bajo
   demanda un catecismo o el listado del blog (ver loadScript() en app.js).
   ========================================================================== */
.skeleton { padding: .25rem 0; }
.skeleton__line {
  height: 1rem;
  margin: .9rem 0;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(124, 43, 43, .06) 0%,
    rgba(124, 43, 43, .14) 50%,
    rgba(124, 43, 43, .06) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton__line { animation: none; }
}

/* ==========================================================================
   Badge de serie en post-cards. Aparece arriba de la meta normal cuando
   el post pertenece a una serie. La serie es la unidad mental del artículo
   seriado, así que tiene más peso visual que la categoría.
   Mobile-first: línea sutil oxblood en el costado izquierdo + tres niveles
   de info (etiqueta · nombre · parte X de Y).
   ========================================================================== */
.post-card__serie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .65rem;
  padding: .35rem 0 .35rem .7rem;
  border-left: 2px solid var(--accent);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.post-card__serie-label {
  color: var(--accent);
  font-weight: 700;
}
.post-card__serie-name {
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  /* el nombre va a la línea de abajo en móvil si no cabe */
  flex: 1 1 100%;
  order: 2;
}
.post-card__serie-pos {
  color: var(--ink-faint);
  margin-left: auto;
}
/* En pantallas más anchas, el nombre cabe en la misma línea */
@media (min-width: 540px) {
  .post-card__serie-name { flex: 0 1 auto; order: 0; }
}

/* ==========================================================================
   Hero de serie + mini-índice dentro del artículo.
   Mobile-first: el hero es compacto (1-2 líneas), el índice es vertical
   con marcas a la izquierda. La parte actual destaca con fondo crema/oxblood
   muy tenue y la marca ● en oxblood pleno.
   ========================================================================== */

/* HERO DE SERIE — identificador arriba del título */
.article__serie-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  margin: .2rem 0 1.4rem;
  padding: .55rem 0 .55rem .85rem;
  border-left: 3px solid var(--accent);
  font-size: .78rem;
  letter-spacing: .06em;
  line-height: 1.3;
}
.article__serie-hero-label {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.article__serie-hero-name {
  color: var(--ink);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: 0;
  flex: 1 1 100%;
  order: 2;
  line-height: 1.35;
}
.article__serie-hero-pos {
  color: var(--ink-faint);
  text-transform: uppercase;
  font-weight: 500;
  margin-left: auto;
}
@media (min-width: 580px) {
  .article__serie-hero-name { flex: 0 1 auto; order: 0; font-size: 1rem; }
}

/* MINI-ÍNDICE — lista navegable de partes, antes del cuerpo */
.article__serie-index {
  margin: 0 0 2rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 10px;
}
.article__serie-index-title {
  margin: 0 0 .65rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.article__serie-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.article__serie-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem .15rem;
  border-radius: 6px;
}
.article__serie-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-faint);
  margin-top: .12rem;
}
.article__serie-link {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .55rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}
a.article__serie-link:hover .article__serie-titulo {
  color: var(--accent);
}
.article__serie-num {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  white-space: nowrap;
}
.article__serie-titulo {
  flex: 1 1 100%;
  font-size: .98rem;
  font-weight: 500;
  transition: color .15s ease;
}
@media (min-width: 540px) {
  .article__serie-titulo { flex: 1 1 auto; }
}
.article__serie-aqui {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-left: auto;
}

/* Estados: actual (●), leído (✓), pendiente (○) */
.article__serie-item.is-current {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.article__serie-item.is-current .article__serie-marca {
  color: var(--accent);
}
.article__serie-item.is-current .article__serie-titulo {
  font-weight: 600;
}
.article__serie-item.is-read .article__serie-marca {
  color: var(--accent);
  opacity: .65;
}
.article__serie-item.is-read .article__serie-titulo {
  color: var(--ink-soft);
}

/* ==========================================================================
   Home combinada — hero + pregunta del día + 5 catecismos + 2 artículos.
   Mobile-first: cada sección tiene un head con título + "ver todos →".
   ========================================================================== */

/* Pregunta del día — bloque destacado con tinte oxblood */
.qdia {
  margin: 1.6rem 0 2.4rem;
  padding: 1.4rem 1.3rem 1.5rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 14px;
}
html[data-theme="dark"] .qdia {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.qdia__eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 .35rem;
}
.qdia__contexto {
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
  font-style: italic;
}
.qdia__pregunta {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--ink);
  letter-spacing: -.005em;
}
.qdia__respuesta {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.qdia__respuesta p { margin: 0 0 .8rem; }
.qdia__respuesta p:last-child { margin: 0; }
.qdia__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.qdia__link:hover { border-bottom-color: var(--accent); }

@media (min-width: 580px) {
  .qdia { padding: 1.7rem 1.7rem 1.85rem; }
  .qdia__pregunta { font-size: 1.7rem; }
  .qdia__respuesta { font-size: 1.08rem; }
}

/* Secciones de la home con head (título + "Ver todos →") */
.home-section { margin: 2.6rem 0 1rem; }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.home-section__head h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  margin: 0;
  line-height: 1.2;
  color: var(--ink);
}
.home-section__more {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .88rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.home-section__more:hover { text-decoration: underline; }

/* Hero más compacto en la home combinada (ya no es la única sección) */
.home .hero { padding: 1rem 0 .5rem; }
.home .hero__title { font-size: clamp(1.4rem, 5vw, 1.9rem); }

/* ==========================================================================
   Landing page /serie/{id} — vista de serie completa con todas las partes.
   Mobile-first: hero arriba con stats (n partes, total minutos, progreso),
   lista de partes debajo cada una con marca de leído + meta + resumen.
   ========================================================================== */
.serie-page { padding-top: .5rem; }

.serie-hero {
  margin: 0 0 2rem;
  padding: 1.4rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
}
.serie-hero__eyebrow {
  color: var(--accent);
  margin: 0 0 .7rem;
}
.serie-hero__titulo {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 .5rem;
  letter-spacing: -.012em;
}
.serie-hero__autor {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  font-style: italic;
}
.serie-hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--ink-soft);
  margin: 0 0 .9rem;
}
.serie-hero__stats strong { color: var(--ink); font-weight: 600; }
.serie-hero__leidos { color: var(--accent); font-weight: 600; }
.serie-hero__bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .8rem;
}
.serie-hero__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .25s ease;
}

.serie-partes {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.serie-parte {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1rem 1.1rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
  text-decoration: none;
  background: var(--card);
}
.serie-parte:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  transform: translateY(-1px);
}
.serie-parte__marca {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.05rem;
  color: var(--ink-faint);
  margin-top: .15rem;
}
.serie-parte.is-read .serie-parte__marca {
  color: var(--accent);
}
.serie-parte.is-read .serie-parte__titulo {
  color: var(--ink-soft);
}
.serie-parte__body {
  flex: 1;
  min-width: 0;
}
.serie-parte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin: 0 0 .55rem;
  font-weight: 500;
}
.serie-parte__num {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .1em;
}
.serie-parte__titulo {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 .45rem;
}
.serie-parte__resumen {
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.serie-parte__go {
  display: none;
  align-self: center;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.serie-parte__go svg { width: 18px; height: 18px; }
@media (min-width: 540px) {
  .serie-parte__go { display: inline-flex; }
}

/* ==========================================================================
   Tiempo de lectura y "Leído ✓" en post-cards
   ========================================================================== */
.post-card__min {
  color: var(--ink-faint);
}
.post-card__leido {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .55rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
}
.post-card.is-read {
  opacity: .85;
}
.post-card.is-read h3 {
  color: var(--ink-soft);
}

/* ==========================================================================
   Hero de serie ahora es link — agregar hover. Tiempo de lectura por parte
   en el mini-índice de serie.
   ========================================================================== */
a.article__serie-hero {
  text-decoration: none;
  transition: background .15s ease;
  border-radius: 0 6px 6px 0;
}
a.article__serie-hero:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.article__serie-tiempo {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
  margin-left: .4rem;
}

/* ==========================================================================
   Serie-card en el listado /blog — representa una serie colapsada.
   Distinta visualmente a post-card para señalar "esto agrupa varios artículos".
   Mobile-first: badge "SERIE · N partes" arriba, meta, título, autor, CTA.
   ========================================================================== */
.serie-card {
  display: block;
  padding: 1.2rem 1.2rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 1rem;
}
.serie-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.serie-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.serie-card__badge-label {
  color: var(--accent);
}
.serie-card__badge-n {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .08em;
  padding-left: .55rem;
  border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}

.serie-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  margin-bottom: .55rem;
}

.serie-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 .45rem;
  letter-spacing: -.008em;
}

.serie-card__autor {
  font-size: .92rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 .9rem;
}

.serie-card__progreso {
  margin: .85rem 0 0;
}
.serie-card__progreso-txt {
  display: block;
  font-size: .74rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .4rem;
  text-transform: uppercase;
}
.serie-card__progreso-bar {
  height: 4px;
  background: color-mix(in srgb, var(--accent) 15%, var(--line));
  border-radius: 2px;
  overflow: hidden;
}
.serie-card__progreso-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}

.serie-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .9rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .005em;
}
.serie-card__cta svg { width: 16px; height: 16px; }

@media (min-width: 580px) {
  .serie-card { padding: 1.4rem 1.5rem 1.3rem; }
  .serie-card h3 { font-size: 1.35rem; }
}

/* ==========================================================================
   Botón "Compartir" en la pregunta del día.
   Discreto, junto al link "Ver en el catecismo", para no competir con éste.
   ========================================================================== */
.qdia__acciones {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 0;
}
.qdia__compartir {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: .42rem .85rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.qdia__compartir:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.qdia__compartir:active { transform: scale(.97); }
.qdia__compartir svg { width: 16px; height: 16px; flex-shrink: 0; }

/* =========================================================================
   BLOG — nueva vista editorial /blog
   Tres bloques con jerarquía visual fuerte (sin filtro/búsqueda):
   1) Hero del destacado (artículo más reciente)
   2) Sección "Series" con cards expandidas mostrando las partes
   3) Grid de "Lecturas independientes" en 2 columnas
   Cuando hay búsqueda/filtro, todo colapsa a una lista plana (.post-list).
   ========================================================================= */

/* Stats shelf debajo del título del blog: pequeña tira de números */
.blog-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: -.5rem 0 1.2rem;
  color: var(--ink-faint);
  font-family: var(--font-brand);
  font-size: .82rem;
  letter-spacing: .02em;
}
.blog-stats strong {
  color: var(--ink-soft);
  font-weight: 600;
  margin-right: .25rem;
}
.blog-stats__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  opacity: .55;
}

/* Contador dentro de los chips de categoría */
.chip__count {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .35em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: .78em;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.chip.is-active .chip__count {
  background: color-mix(in srgb, #fff8f0 22%, transparent);
  color: #fff8f0;
}
html[data-theme="dark"] .chip.is-active .chip__count {
  background: color-mix(in srgb, #1a120f 25%, transparent);
  color: #1a120f;
}

/* Contenedor de las tres secciones del modo jerárquico */
.blog-sections {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.blog-section__head {
  margin-bottom: 1rem;
}
.blog-section__head .eyebrow {
  margin-bottom: .25rem;
}
.blog-section__head h2 {
  font-size: clamp(1.4rem, 4vw, 1.7rem);
  margin: 0;
  letter-spacing: -.01em;
}

/* ---------- Hero: portada del destacado ---------- */
.blog-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.8rem 1.6rem 1.5rem;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1),
              border-color .25s ease,
              box-shadow .25s ease;
  /* Sutil halo oxblood en la esquina superior derecha */
  background-image:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%);
}
@media (min-width: 640px) {
  .blog-hero { padding: 2.4rem 2.2rem 2rem; border-radius: 26px; }
}
.blog-hero:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow:
    0 14px 32px rgba(20,15,10,.10),
    0 2px 6px rgba(20,15,10,.04);
}
.blog-hero:active { transform: translateY(-1px); }

.blog-hero__overhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.blog-hero__featured {
  font-family: var(--font-brand);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: .3rem .65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.blog-hero__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 5.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .9rem;
  color: var(--ink);
}
.blog-hero__resumen {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
  max-width: 62ch;
}
.blog-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.blog-hero__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--ink-faint);
}
.blog-hero__autor {
  font-weight: 600;
  color: var(--ink-soft);
}
.blog-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent);
  white-space: nowrap;
  transition: gap .25s cubic-bezier(.32,.72,0,1);
}
.blog-hero__cta svg { width: 18px; height: 18px; transition: transform .25s; }
.blog-hero:hover .blog-hero__cta { gap: .75rem; }
.blog-hero:hover .blog-hero__cta svg { transform: translateX(3px); }

/* ---------- Serie expandida ---------- */
.blog-series-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.blog-serie {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-serie:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 6px 18px rgba(20,15,10,.06);
}

.blog-serie__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem 1.3rem 1.1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.blog-serie__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .55rem .7rem;
  min-width: 58px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff8f0;
  flex: none;
  line-height: 1;
}
html[data-theme="dark"] .blog-serie__badge { color: #1a120f; }
.blog-serie__badge-label {
  font-family: var(--font-brand);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .2rem;
}
.blog-serie__badge-n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.blog-serie__heading h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: .25rem 0 .35rem;
  letter-spacing: -.01em;
}
.blog-serie__autor {
  margin: 0;
  font-size: .82rem;
  color: var(--ink-faint);
}
.blog-serie__progress {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .75rem;
}
.blog-serie__progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
}
.blog-serie__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .35s ease;
}
.blog-serie__progress-txt {
  font-family: var(--font-brand);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-faint);
  white-space: nowrap;
}

.blog-serie__partes {
  display: flex;
  flex-direction: column;
}
.blog-serie__parte {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.3rem;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  transition: background .15s ease, padding-left .25s cubic-bezier(.32,.72,0,1);
}
.blog-serie__parte:first-child { border-top: 0; }
.blog-serie__parte:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  padding-left: 1.55rem;
}
.blog-serie__parte:hover .blog-serie__go { color: var(--accent); transform: translateX(3px); }

.blog-serie__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  flex: none;
}
.blog-serie__num {
  font-family: var(--font-brand);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.blog-serie__check {
  color: var(--accent);
  font-weight: 700;
  font-size: .95rem;
}
.blog-serie__parte.is-read .blog-serie__marker {
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.blog-serie__partetitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0 0 .15rem;
  color: var(--ink);
}
.blog-serie__parte.is-read .blog-serie__partetitle { color: var(--ink-soft); }
.blog-serie__partemeta {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  color: var(--ink-faint);
  font-family: var(--font-brand);
  letter-spacing: .01em;
}
.blog-serie__go {
  color: var(--ink-faint);
  font-size: 1rem;
  transition: color .15s ease, transform .25s cubic-bezier(.32,.72,0,1);
  flex: none;
}

/* ---------- Grid de artículos sueltos ---------- */
.blog-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
}

/* En el grid las cards son las existentes .post-card; las uniformamos en altura. */
.blog-grid .post-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-grid .post-card h3 {
  font-size: 1.18rem;
  margin-bottom: .5rem;
}
.blog-grid .post-card p {
  font-size: .92rem;
  line-height: 1.5;
  /* Tres líneas máx para mantener parejo el grid */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Entrada animada staggered de las secciones */
.blog-sections > * {
  opacity: 0;
  transform: translateY(8px);
  animation: blogSectionIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.blog-sections > *:nth-child(1) { animation-delay: .05s; }
.blog-sections > *:nth-child(2) { animation-delay: .15s; }
.blog-sections > *:nth-child(3) { animation-delay: .25s; }
@keyframes blogSectionIn {
  to { opacity: 1; transform: translateY(0); }
}

/* La lista plana (filtros/búsqueda) reusa .post-list existente. Solo
   añadimos un pequeño margen para que respire al aparecer. */
.blog-flat .post-list { margin-top: .5rem; }
.blog-flat .empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 2.5rem 1rem;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero, .blog-hero__cta svg,
  .blog-serie__parte, .blog-serie__go,
  .blog-serie__progress-fill,
  .blog-sections > * { transition: none; animation: none; opacity: 1; transform: none; }
}

/* En el grid hay cards estrechas: si la categoría es larga (ej. "Adoración
   familiar") la meta-row se rompe feo. Permitimos wrap por categoría pero
   mantenemos juntos fecha + min con su separador. */
.blog-grid .post-card__meta {
  flex-wrap: wrap;
  row-gap: .3rem;
}
.blog-grid .post-card__meta .post-card__cat {
  flex: 0 0 100%;
  margin-bottom: .15rem;
}
.blog-grid .post-card__meta .post-card__dot:first-of-type {
  display: none; /* el primer dot tras la categoría ya no es necesario */
}

/* El atributo HTML `hidden` agrega display:none por user-agent, pero
   .blog-sections tiene display:flex que gana en especificidad. Forzamos
   con [hidden] selector para que el toggle de bindBlog funcione. */
.blog-sections[hidden],
.blog-flat[hidden] { display: none !important; }

/* =========================================================================
   TAGS — pills clickables que llevan a /temas/{tag}
   ========================================================================= */
.tag-list {
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.tag-list li { margin: 0; padding: 0; }
.tag {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-family: var(--font-brand);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tag:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Dentro de cards del listado, los tags van más juntos al final */
.post-card .tag-list { margin-top: .85rem; }
.blog-grid .post-card .tag-list { margin-top: .7rem; }

/* Autor enlazable */
.autor-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink-soft) 35%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.autor-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* =========================================================================
   CROSS-REFS A CATECISMOS — al final de cada artículo
   ========================================================================= */
.article__catrefs {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.article__catrefs-head {
  margin-bottom: 1.2rem;
}
.article__catrefs-head .eyebrow {
  margin-bottom: .35rem;
}
.article__catrefs-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -.01em;
}
.catref-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .catref-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.catref-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.catref-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 6px 16px rgba(20,15,10,.07);
}
.catref-card__eyebrow {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
  font-family: var(--font-brand);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}
.catref-card__autor {
  color: var(--ink-faint);
  font-weight: 500;
}
.catref-card__autor::before {
  content: "·";
  margin-right: .35rem;
  opacity: .6;
}
.catref-card__num {
  font-family: var(--font-brand);
  font-size: .82rem;
  color: var(--ink-faint);
  margin-bottom: .55rem;
}
.catref-card__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--ink);
  flex: 1;
}
.catref-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-brand);
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  transition: gap .25s cubic-bezier(.32,.72,0,1);
}
.catref-card__cta svg { width: 14px; height: 14px; transition: transform .25s; }
.catref-card:hover .catref-card__cta { gap: .55rem; }
.catref-card:hover .catref-card__cta svg { transform: translateX(2px); }

/* =========================================================================
   EMPIEZA AQUÍ — Rutas de lectura curadas
   ========================================================================= */
.empieza-page .section-head { margin-bottom: 2rem; }
.empieza-rutas {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.empieza-ruta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.6rem 1.4rem 1.5rem;
  background-image:
    radial-gradient(140% 80% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%);
}
@media (min-width: 640px) {
  .empieza-ruta { padding: 2rem 2rem 1.8rem; border-radius: 26px; }
}
.empieza-ruta__head { margin-bottom: 1.3rem; }
.empieza-ruta__head .eyebrow { margin-bottom: .35rem; }
.empieza-ruta__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  margin: 0 0 .55rem;
  letter-spacing: -.01em;
}
.empieza-ruta__intro {
  color: var(--ink-soft);
  margin: 0 0 .6rem;
  max-width: 60ch;
  line-height: 1.5;
}
.empieza-ruta__stats {
  font-family: var(--font-brand);
  font-size: .76rem;
  color: var(--ink-faint);
  margin: 0;
  letter-spacing: .02em;
}
.empieza-pasos {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.empieza-paso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease,
              background .15s ease, padding-left .25s cubic-bezier(.32,.72,0,1);
}
.empieza-paso:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
  padding-left: 1.25rem;
}
.empieza-paso__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  font-family: var(--font-brand);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  flex: none;
}
.empieza-paso.is-read .empieza-paso__num {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.empieza-paso__check { color: var(--accent); font-weight: 700; }
.empieza-paso__body { min-width: 0; }
.empieza-paso__body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 .2rem;
  color: var(--ink);
}
.empieza-paso.is-read .empieza-paso__body h4 { color: var(--ink-soft); }
.empieza-paso__meta {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-faint);
  font-family: var(--font-brand);
}
.empieza-paso__go {
  color: var(--ink-faint);
  font-size: 1rem;
  transition: color .15s ease, transform .25s cubic-bezier(.32,.72,0,1);
  flex: none;
}
.empieza-paso:hover .empieza-paso__go { color: var(--accent); transform: translateX(2px); }

.empieza-extra {
  display: inline-flex;
  align-items: center;
  margin-top: 1.2rem;
  font-family: var(--font-brand);
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.empieza-extra:hover { border-color: var(--accent); }

/* =========================================================================
   AUTOR — /autores/{slug}
   ========================================================================= */
.autor-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.autor-hero .eyebrow { margin-bottom: .4rem; }
.autor-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  margin: 0 0 1rem;
  letter-spacing: -.015em;
}
.autor-hero__bio {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  max-width: 62ch;
}
.autor-hero__stats {
  margin: 0;
  font-family: var(--font-brand);
  font-size: .82rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.autor-posts__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  letter-spacing: -.01em;
}

/* =========================================================================
   TEMA — /temas/{slug}: reusa post-list, solo el header es nuevo
   ========================================================================= */
.tema-page .section-head { margin-bottom: 1.4rem; }