/* ==========================================================================
   Libro de Oración Común de 1662 — Edición en español
   Single stylesheet. Mobile-first. No inline styles anywhere (strict CSP).
   Look: a contemporary book publisher — flat colour, hairline rules, square
   corners, left-aligned headings. The book's own devices (red rubric ¶, a
   thin red rule) appear only where they mean something.
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL OFL) ----
   Vollkorn: text and UI (Latin subsets, no Reserved Font Name).
   Rosarivo: headings. It carries Reserved Font Names, so it ships unmodified
   (only rewrapped as WOFF2; see herramientas/build_fonts.py). */
@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rosarivo";
  src: url("../fonts/rosarivo-regular-2026-10.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched local fallbacks: text keeps its size and line breaks while
   the web fonts arrive, so the swap causes no layout shift. Georgia covers
   Windows/macOS, Noto Serif covers Android. Values from build_fonts.py. */
@font-face {
  font-family: "Vollkorn Fallback";
  src: local("Georgia");
  font-weight: 400 700;
  size-adjust: 97.46%;
  ascent-override: 97.68%;
  descent-override: 45.25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Vollkorn Fallback Noto";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  font-weight: 400 700;
  size-adjust: 90.81%;
  ascent-override: 104.84%;
  descent-override: 48.56%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Rosarivo Fallback";
  src: local("Georgia");
  font-weight: 400;
  size-adjust: 106.34%;
  ascent-override: 92.06%;
  descent-override: 39.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Rosarivo Fallback Noto";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  font-weight: 400;
  size-adjust: 99.08%;
  ascent-override: 98.81%;
  descent-override: 42.79%;
  line-gap-override: 0%;
}

/* ---- Tokens ---- */
:root {
  /* Neutrals: near-white paper with the faintest warmth, near-black ink */
  --color-bg: #fcfbf9;
  --color-bg-alt: #f4f2ef;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.95);
  --color-header: var(--color-bg);  /* solid: no tint or ghost text from the bands below */
  --color-ink: #1b1918;          /* 16.9:1 on --color-bg */
  --color-ink-muted: #5f5a56;    /* 6.1:1 on --color-bg-alt, 6.6:1 on --color-bg */
  --color-line: rgba(27, 25, 24, 0.14);
  --color-line-strong: rgba(27, 25, 24, 0.3);

  /* Brand red (CR granate #8B1A1A, brightened a step for screens) */
  --color-red: #9b1b22;          /* 7.9:1 on --color-bg; white on it 8.2:1 */
  --color-red-deep: #7a1219;     /* hover and pressed states */
  --color-red-tint: #f7eaea;
  --color-selection: rgba(155, 27, 34, 0.16);

  /* Content on the flat red bands */
  --color-on-red: #ffffff;
  --color-on-red-muted: rgba(255, 255, 255, 0.86);  /* 6.3:1 on --color-red */
  --color-on-red-line: rgba(255, 255, 255, 0.3);
  --color-on-red-border: rgba(255, 255, 255, 0.8);  /* outline buttons */
  --color-on-red-hover: rgba(255, 255, 255, 0.1);

  --color-backdrop: rgba(20, 14, 14, 0.85);

  --font-text: "Vollkorn", "Vollkorn Fallback", "Vollkorn Fallback Noto", Georgia, "Times New Roman", serif;
  --font-display: "Rosarivo", "Rosarivo Fallback", "Rosarivo Fallback Noto", Georgia, "Times New Roman", serif;

  --measure: 38rem;
  --width: 72rem;
  --gutter: 1rem;
  --radius: 2px;

  /* Shadows only where an object must read as physical */
  --book-shadow: radial-gradient(closest-side, rgba(27, 18, 16, 0.36), rgba(27, 18, 16, 0.12) 55%, rgba(27, 18, 16, 0));
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow-handle: 0 1px 4px rgba(27, 25, 24, 0.35);
  --shadow-cover: 0 1px 3px rgba(27, 25, 24, 0.22);  /* flat book covers: just an edge */

  --focus: var(--color-red);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}
/* Smooth scrolling only once the page has loaded (html.listo, set by
   efectos.js): a deep link like /#contacto then jumps straight to its target,
   while in-page clicks still glide. */
@media (prefers-reduced-motion: no-preference) {
  html.listo { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Vollkorn defaults to old-style figures; prices must read «$150.000» */
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
cite { font-style: italic; }
strong { font-weight: 600; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.15; }

a { color: var(--color-red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* <main tabindex="-1"> receives focus from the skip link; a ring around the
   whole page would look broken, and it is not an interactive control. */
main[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--color-selection); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-red);
  color: var(--color-on-red);
  text-decoration: none;
}
.saltar:focus { top: 0.5rem; }

/* Rosarivo has only old-style figures: numbers inside headings use Vollkorn */
.cifra { font-family: var(--font-text); }

/* ---- Small label above a heading: an italic line, like a running head ---- */
.cornisa {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

/* Rubric: an instruction to the reader, red with the book's hanging ¶.
   The only place the pilcrow appears. */
.rubrica {
  position: relative;
  padding-left: 1.3em;
  color: var(--color-red);
  font-size: 0.98em;
  line-height: 1.5;
}
.rubrica::before {
  content: "¶";
  content: "¶" / "";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

/* ---- Buttons: rectangular, flat ---- */
/* On red bands .btn-primario and .btn-secundario switch to light variants
   (see "Red bands"), so the markup never needs band-specific classes. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primario { background: var(--color-red); border-color: var(--color-red); color: var(--color-on-red); }
.btn-primario:hover { background: var(--color-red-deep); border-color: var(--color-red-deep); }
.btn-secundario { background: transparent; border-color: var(--color-red); color: var(--color-red); }
.btn-secundario:hover { background: var(--color-red-tint); }
/* Pending state (not a link yet): dashed outline, no fill, muted text, so it
   never reads as a button on either the white cards or the grey section. */
.btn-apagado {
  background: transparent;
  border: 1px dashed var(--color-line-strong);
  color: var(--color-ink-muted);
  font-weight: 400;
  cursor: default;
}
.btn-chico { min-height: 44px; padding: 0.45rem 1rem; font-size: 0.95rem; }

.btn-terciario {
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  background: transparent;
  border: 0;
  color: var(--color-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.btn-terciario:hover { text-decoration-thickness: 2px; }

.btn__icono { flex: none; width: 1.05em; height: 1.05em; margin-right: 0.5em; }
.btn--una-linea { white-space: nowrap; padding-left: 0.8rem; padding-right: 0.8rem; }
.btn__corto { display: none; }
@media (max-width: 29.99rem) {
  .btn__largo { display: none; }
  .btn__corto { display: inline; }
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.acciones .btn { flex: 1 1 14rem; }
.acciones--columna { flex-direction: column; gap: 0.6rem; }

/* ---- Header ---- */
.cabezal {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header);
  box-shadow: 0 1px 0 var(--color-line);
}
/* Padding sits inside the max-width, so the logo lines up with the content */
.cabezal__fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--color-ink);
  text-decoration: none;
}
.marca__cruz { width: 28px; height: 28px; flex: none; }
.marca__texto { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.marca__anio { color: var(--color-red); white-space: nowrap; }
.menu { display: none; }
.menu ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  color: var(--color-ink);
  font-size: 0.98rem;
  text-decoration: none;
}
.menu a:hover { color: var(--color-red); text-decoration: underline; }
/* Current page (/tutoriales/): red and underlined, so it is not shown by colour alone */
.menu a[aria-current] { color: var(--color-red); text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 30rem) {
  .marca__texto { font-size: 1rem; }
}
@media (min-width: 60rem) {
  .menu { display: block; }
}

/* ---- Sections ---- */
main > section { scroll-margin-top: 4.5rem; }

/* Every block starts at the left edge of the 72rem column; --bloque narrows
   a block without centring it, so headings and text share one left edge. */
.seccion {
  padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
}
.seccion > * {
  max-width: var(--bloque, var(--width));
  margin-left: max(0px, calc((100% - var(--width)) / 2));
  margin-right: auto;
}
.seccion--papel { background-color: var(--color-bg-alt); }

.encabezado {
  --bloque: 40rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.encabezado h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.7rem);
  line-height: 1.12;
  text-wrap: balance;
}
.subtitulo {
  margin: 0.6rem 0 0;
  font-size: 1.02em;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

/* Side heading: on wide screens the heading takes a narrow left column and
   the content the wide one (El libro, Preguntas, Contacto). The five columns
   add up to the 72rem content width, so the edges match every other section. */
@media (min-width: 60rem) {
  .seccion--lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) minmax(0, 4rem) minmax(0, 52rem) minmax(0, 1fr);
    row-gap: 0;
  }
  .seccion--lado > * { grid-column: 4; margin-left: 0; margin-right: 0; }
  .seccion--lado > .encabezado { grid-column: 2; grid-row: 1 / span 6; margin-bottom: 0; }
}

/* ---- Red bands (prayers, sample, closing contact): flat brand red ---- */
.seccion--granate {
  background-color: var(--color-red);
  color: var(--color-on-red);
  --focus: var(--color-on-red);
}
.seccion--granate .cornisa,
.seccion--granate .subtitulo { color: var(--color-on-red-muted); }
.seccion--granate a:not(.btn) { color: var(--color-on-red); }
.seccion--granate .btn-primario { background: var(--color-on-red); border-color: var(--color-on-red); color: var(--color-red); }
.seccion--granate .btn-primario:hover { background: var(--color-red-tint); border-color: var(--color-red-tint); }
.seccion--granate .btn-secundario { background: transparent; border-color: var(--color-on-red-border); color: var(--color-on-red); }
.seccion--granate .btn-secundario:hover { background: var(--color-on-red-hover); }
.seccion--granate .lista-rubrica li { border-top-color: var(--color-on-red-line); }
.seccion--granate .contacto-noscript { color: var(--color-on-red-muted); }

/* ---- Hero ---- */
/* Mobile first: title and a small book side by side, then price and the
   calls to action, so both fit in a 360x640 in-app browser without scrolling. */
.hero {
  padding: clamp(1.1rem, 5vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo libro" "texto texto";
  column-gap: 1rem;
  row-gap: 1.1rem;
  align-items: center;
  max-width: var(--width);
  margin: 0 auto;
}
.hero__titulo { grid-area: titulo; }
.hero__libro { grid-area: libro; position: relative; display: flex; justify-content: center; }
.hero__texto { grid-area: texto; display: flex; flex-direction: column; }

.hero .cornisa { margin-bottom: 0.6rem; font-size: 0.9rem; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.05rem + 4.6vw, 4.2rem);
  line-height: 1.04;
  color: var(--color-ink);
  text-wrap: balance;
}
.hero__fecha {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-text);
  font-size: 0.45em;
  color: var(--color-ink-muted);
}
.hero__subtitulo {
  margin: 0.4rem 0 0;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
/* The one thin red rule of the page, drawn once on load */
.filete {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 0.9rem 0 0;
  background: var(--color-red);
  transform-origin: left;
}
.hero__propuesta {
  order: 5;
  max-width: 30rem;
  margin: 1.1rem 0 0;
  font-size: 1.08rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero__precio {
  order: 1;
  margin: 0 0 0.2rem;
  font-size: 1.08rem;
  line-height: 1.45;
  text-wrap: balance;
}
/* Only the price is red; the presale line stays ink */
.hero__precio > strong { color: var(--color-red); }
.hero__condiciones {
  order: 2;
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
}
.hero__texto .acciones { order: 3; justify-content: flex-start; max-width: 36rem; margin: 0; gap: 0.6rem; }
.hero__nota { order: 4; margin: 0.6rem 0 0; font-size: 0.92rem; font-style: italic; color: var(--color-ink-muted); }
/* One quiet line to the tutorials (the menu is hidden below 60rem). The link's vertical padding gives a 44px tap
   area without changing the line spacing. */
.hero__tutoriales { order: 4; margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--color-ink-muted); }
.hero__tutoriales a { padding: 0.7rem 0.1rem; font-weight: 600; }

/* The book: the real 3D mockup (transparent WebP) with a soft contact shadow */
.hero__mockup {
  position: relative;
  z-index: 1;
  width: clamp(5.5rem, 26vw, 9.5rem);
  height: auto;
}
.hero__libro::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -3%;
  width: 92%;
  height: 7%;
  transform: translateX(-50%);
  background: var(--book-shadow);
  pointer-events: none;
}
@media (min-width: 40rem) {
  .hero .cornisa { font-size: 0.98rem; }
  .hero__grid { column-gap: 2rem; }
  .hero__mockup { width: 12rem; }
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas: "titulo libro" "texto libro";
    column-gap: 4rem;
    row-gap: 1.75rem;
    align-items: end;
  }
  .hero__subtitulo { margin-top: 0.8rem; font-size: 1.25rem; }
  .filete { width: 5rem; margin-top: 1.2rem; }
  .hero__texto { align-self: start; }
  /* Natural reading order again on wide screens */
  .hero__propuesta { order: 0; margin: 0 0 0.9rem; font-size: 1.2rem; }
  .hero__precio { font-size: 1.15rem; }
  .hero__condiciones { margin-bottom: 1.4rem; }
  .hero__texto .acciones { gap: 0.75rem; }
  .hero__libro { align-self: center; }
  .hero__mockup { width: 19rem; }
}

/* The single load animation: the book settles, the red rule is drawn */
@media (prefers-reduced-motion: no-preference) {
  .hero__mockup { animation: libro-asienta 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .filete { animation: filete-traza 0.9s 0.35s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
}
@keyframes libro-asienta {
  from { transform: translateY(18px) rotate(-1.5deg); }
  to { transform: none; }
}
@keyframes filete-traza {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- What it is ---- */
.texto-corrido {
  --bloque: var(--measure);
  hyphens: auto;
}
.texto-corrido p { text-wrap: pretty; }
.texto-corrido__entrada { font-size: 1.22em; line-height: 1.45; }
/* Facts as a ruled table, not boxes */
.ficha {
  --bloque: var(--measure);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0;
}
.ficha div { padding: 0.7rem 0; border-top: 1px solid var(--color-line-strong); }
.ficha dt { font-size: 0.88rem; font-style: italic; color: var(--color-ink-muted); }
.ficha dd { margin: 0.1rem 0 0; }
.ficha__cm { white-space: nowrap; color: var(--color-ink-muted); }
.ficha > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); --bloque: 46rem; }
  .ficha > div:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---- Contents / index ---- */
/* Five highlights as a ruled row, page number first, like an index entry */
.destacados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  padding: 0;
  list-style: none;
}
.destacados li { padding-top: 0.8rem; border-top: 1px solid var(--color-ink); }
.destacados li:last-child { grid-column: 1 / -1; }
.destacados__folio {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-red);
}
.destacados__folio::before {
  content: "p. ";
  font-size: 0.5em;
  font-weight: 400;
  font-style: italic;
  vertical-align: 0.45em;
  color: var(--color-ink-muted);
}
/* Count-up copy (efectos.js): the final width is reserved, nothing moves */
.contador {
  display: inline-block;
  min-width: calc(var(--digitos, 1) * 1ch);
  font-variant-numeric: lining-nums tabular-nums;
}
.destacados__texto { display: block; margin-top: 0.5rem; font-size: 0.98rem; line-height: 1.4; }
@media (min-width: 56rem) {
  .destacados { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .destacados li:last-child { grid-column: auto; }
}

/* The full index is folded on every screen; the five highlights stay visible. */
.indice-plegable { --bloque: 62rem; }
.indice-plegable__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--color-red);
  border-radius: var(--radius);
  color: var(--color-red);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.indice-plegable__boton::-webkit-details-marker { display: none; }
.indice-plegable__boton::after {
  content: "+";
  content: "+" / "";
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.indice-plegable[open] .indice-plegable__boton::after { content: "−"; content: "−" / ""; }
.indice-plegable[open] .indice-plegable__boton { margin-bottom: 2.25rem; }
.indice-plegable__boton:hover { background: var(--color-red-tint); }
.indice {
  columns: 1;
  column-gap: 4.5rem;
}
@media (min-width: 52rem) {
  .indice { columns: 2; }
}
.indice__grupo {
  break-inside: avoid;
  margin-bottom: 2.25rem;
}
.indice__grupo h3 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-ink);
  font-size: 1.05rem;
  font-weight: 600;
}
.indice__lista { margin: 0; padding: 0; list-style: none; }
.indice__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0.28rem 0;
}
.indice__pieza { flex: 0 1 auto; }
.indice__puntos {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  margin: 0 0.4rem;
  border-bottom: 1px dotted var(--color-line-strong);
  transform: translateY(-0.28em);
}
.indice__folio {
  flex: none;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.indice__nota {
  flex: 0 0 100%;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink-muted);
}
.destacado .indice__pieza { font-weight: 600; }
.destacado .indice__folio { color: var(--color-red); }

/* ---- Gallery ---- */
.seccion > .rubrica { --bloque: var(--measure); margin-bottom: 2rem; }
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  margin-top: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
}
@media (min-width: 64rem) {
  .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria figure { margin: 0; }
/* A hairline edge reads as paper; no shadow needed */
.galeria__enlace {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  transition: border-color 0.15s ease;
}
.galeria__enlace img { width: 100%; }
.galeria__enlace:hover { border-color: var(--color-red); }
.galeria figcaption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.35;
}
.galeria__folio { flex: none; font-style: italic; color: var(--color-ink-muted); }

/* ---- Lightbox ---- */
.visor {
  width: min(100vw - 1rem, 44rem);
  max-width: none;
  max-height: calc(100dvh - 1rem);
  margin: auto;
  padding: 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-dialog);
}
.visor::backdrop { background: var(--color-backdrop); }
.visor[open] { display: flex; flex-direction: column; gap: 0.5rem; }
.visor__barra { display: flex; align-items: center; gap: 0.5rem; }
.visor__titulo {
  flex: 1;
  margin: 0;
  padding-left: 0.25rem;
  font-size: 0.95rem;
}
.visor__plana {
  display: flex;
  justify-content: center;
  min-height: 0;
}
.visor__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 12.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.visor__pie { margin: 0; text-align: center; }
.visor__completo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.95rem;
}
/* Landscape phones: the plate at full width, scrolled inside its container */
@media (max-height: 500px) {
  .visor { max-height: calc(100dvh - 0.5rem); }
  .visor__plana {
    display: block;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .visor__img { width: 100%; max-width: none; max-height: none; }
}
.visor__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.visor button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}
.visor button:hover { background: var(--color-bg-alt); }
.visor__cerrar,
.visor__paso { font-size: 1.5rem; line-height: 1; }
.visor__edicion { display: flex; }
.visor__edicion button { padding: 0 0.85rem; font-size: 0.95rem; }
.visor__edicion button + button { border-left: 0; }
.visor__edicion button[aria-pressed="true"] {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-on-red);
}

/* ---- Color vs black and white ---- */
/* The colour layer covers the page to the left of the line (standard
   before/after). --t is the line position (0 = left edge, 1 = right edge),
   set from the range by JS. The 22px/44px terms match the 44px-wide
   invisible thumb, so the line sits exactly under the finger. */
.comparar {
  --bloque: 60rem;
  display: grid;
  gap: 1.75rem;
}
.comparar__figura { width: min(100%, 26rem); margin: 0; }
.comparar__marco {
  --t: 0.5;
  --x: calc(22px + (100% - 44px) * var(--t));
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
}
.comparar__marco img { width: 100%; }
.comparar__color {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.comparar__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 5px;
  transform: translateX(-50%);
  /* 3px red core with 1px white edges: visible over black text and red rubrics */
  background: var(--color-red);
  border-left: 1px solid var(--color-surface);
  border-right: 1px solid var(--color-surface);
  pointer-events: none;
}
.comparar__asa {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-on-red);
  box-shadow: var(--shadow-handle);
}
.comparar__asa::before {
  content: "‹ ›";
  content: "‹ ›" / "";
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.comparar__etiqueta {
  position: absolute;
  top: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: var(--color-surface-glass);
  border: 1px solid var(--color-line-strong);
  font-size: 0.85rem;
  line-height: 1.3;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.comparar__etiqueta--oculta { opacity: 0; }
.comparar__etiqueta--color { left: 0.5rem; color: var(--color-red); font-weight: 600; }
.comparar__etiqueta--bn { right: 0.5rem; color: var(--color-ink); }
.comparar__rango {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  /* Vertical swipes still scroll the page on touch screens */
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.comparar__rango::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.comparar__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
}
.comparar__rango::-moz-range-track { height: 100%; background: transparent; }
.comparar__rango::-moz-range-thumb { width: 44px; height: 100%; border: 0; border-radius: 0; background: transparent; }
/* The input is invisible, so the plate shows the keyboard focus */
.comparar__marco:has(.comparar__rango:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.comparar__marco:has(.comparar__rango:focus-visible) .comparar__asa {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--focus);
}
/* Without JS the range does nothing: show the plate half and half, no handle */
.comparar__marco:not(.comparar__marco--activo) .comparar__rango,
.comparar__marco:not(.comparar__marco--activo) .comparar__asa { display: none; }
.comparar__figura figcaption {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
.comparar__claves {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}
.comparar__claves li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--color-line-strong);
}
.comparar__claves li:first-child strong { color: var(--color-red); }
@media (min-width: 52rem) {
  .comparar {
    grid-template-columns: 24rem minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: center;
  }
  .comparar__figura { width: 24rem; }
}

/* ---- Editions ---- */
/* Three cards share one skeleton: title, channel, price, unit, badge,
   detail, three bullets, CTA block, footnote (nine rows; the "Recomendada"
   seal is absolutely positioned and takes no row). One column at a readable
   width, in source order (direct sale, Amazon B&W, Amazon colour), until the
   three fit side by side at the full column width; then they line up row by
   row. The direct sale stays the featured one (red border, seal, red price). */
.ediciones {
  --bloque: 34rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 60rem) {
  .ediciones { --bloque: var(--width); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.25rem; }
}
.edicion {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
}
@media (min-width: 30rem) {
  .edicion { padding: 2.25rem 1.75rem 1.75rem; }
}
/* Three across: a little less side padding, so each card keeps ~16rem of text */
@media (min-width: 60rem) {
  .edicion { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.edicion--color { border: 2px solid var(--color-red); }
.edicion__sello {
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  margin: 0;
  padding: 0.1rem 0.7rem;
  background: var(--color-red);
  color: var(--color-on-red);
  font-size: 0.9rem;
  font-weight: 600;
}
.edicion h3 { font-family: var(--font-display); font-size: 1.75rem; }
.edicion__canal {
  margin: 0.3rem 0 0.9rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
.edicion__precio { margin: 0; line-height: 1.05; white-space: nowrap; }
.edicion__cifra {
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--color-ink);
}
.edicion--color .edicion__cifra { color: var(--color-red); }
.edicion__moneda { font-size: 1.05rem; color: var(--color-ink-muted); }
.edicion__unidad { margin: 0.25rem 0 1rem; font-size: 0.95rem; font-style: italic; color: var(--color-ink-muted); }
.edicion__insignia {
  align-self: flex-start;
  justify-self: start;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  background: var(--color-red-tint);
  color: var(--color-red-deep);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.edicion__insignia--neutra { background: var(--color-bg-alt); color: var(--color-ink); }
/* Two-part badges break only at the middle dot, never inside a part */
.edicion__insignia > span { white-space: nowrap; }
.edicion__detalle { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.45; color: var(--color-ink-muted); }
/* Ruled list: a hairline between items instead of bullets */
.edicion__rasgos {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.edicion__rasgos li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-line);
  line-height: 1.45;
}
.edicion__secundario { color: var(--color-ink-muted); }
.edicion__cta {
  /* Free space of the taller card goes above this block, never into the buttons */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
}
.edicion__cta > * { flex: 0 0 auto; }
.edicion__pago { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.45; }
.edicion__pie {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
/* Wide screens: the three cards share the same nine rows (title, channel,
   price, unit, badge, note, bullets, CTA block, footnote), so they line up
   row by row. Every card must keep exactly nine visible rows. */
@media (min-width: 60rem) {
  @supports (grid-template-rows: subgrid) {
    .edicion {
      display: grid;
      grid-row: span 9;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
    .edicion__cta { margin-top: 0; justify-content: flex-end; }
    /* A one-line title sits on the same baseline as the two-line ones */
    .edicion h3 { align-self: end; }
    /* Payment details open: the cards stop sharing rows, otherwise the other
       cards would grow by the height of the revealed block. */
    .ediciones:has(.pago__datos:not(:empty)) { align-items: start; }
    .ediciones:has(.pago__datos:not(:empty)) .edicion { display: flex; grid-row: auto; }
    .ediciones:has(.pago__datos:not(:empty)) .edicion h3 { align-self: auto; }
    /* Amazon cards: the CTA block starts at the top of its row, so their
       «Próximamente» buttons sit at the same height in both cards. */
    .edicion--bn .edicion__cta,
    .edicion--color-amazon .edicion__cta { justify-content: flex-start; }
  }
}
/* Long button labels switch to their short form when the card, not only the
   screen, is narrow (three across from 60rem). The container is the CTA
   block, never the card: size containment on the card would turn its
   subgrid into an independent grid and break the row alignment. */
.edicion__cta { container-type: inline-size; }
@container (max-width: 21rem) {
  .edicion .btn__largo { display: none; }
  .edicion .btn__corto { display: inline; }
}
.edicion .contacto-grupo { display: flex; flex-direction: column; gap: 0.6rem; }
.edicion .contacto-grupo > .pago { margin: 0; }
.acciones--columna .btn,
.edicion .acciones.acciones--columna .btn { flex: none; width: 100%; }

/* Payment details (built by JS after a click) */
.pago { text-align: center; }
.pago .btn-terciario { width: 100%; }
.pago__datos { text-align: left; }
.pago__lista { margin: 0.25rem 0 0; }
.pago__fila { padding: 0.7rem 0; border-top: 1px solid var(--color-line); }
.pago__fila dt { font-size: 0.9rem; color: var(--color-ink-muted); }
.pago__fila dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  margin: 0.15rem 0 0;
}
.pago__fila .pago__titular { grid-column: 1 / -1; }
.pago__numero {
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.03em;
}
.pago__copiar {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--color-red);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-red);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.pago__copiar:hover { background: var(--color-red-tint); }
.pago__titular { display: block; font-size: 0.92rem; font-style: italic; color: var(--color-ink-muted); }
.pago__nota {
  margin: 0.4rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.92rem;
  font-weight: 500;
}
.pago__estado { margin: 0; min-height: 1.5em; font-size: 0.92rem; text-align: left; color: var(--color-ink-muted); }

/* Contact reveal (filled by JS after a click) */
/* Specificity 0,3,0: the card rule .edicion .acciones.acciones--columna .btn
   (0,4,0) must stay stronger than this one to stop buttons growing tall. */
.contacto-grupo .acciones .btn { flex: 1 1 15rem; }
/* The aria-live region must stay in the accessibility tree, so it is never
   display:none; it reserves one line instead. */
.contacto-revelado { margin: 0.9rem 0 0; min-height: 1.5em; line-height: 1.5; }
/* Inside a card the empty region takes no space (still rendered, so still live) */
.edicion .contacto-revelado:empty,
.pago__estado:empty { min-height: 0; margin: 0; }
.contacto-revelado a { font-weight: 600; word-break: break-all; }
.contacto-noscript { margin: 0.9rem 0 0; font-style: italic; color: var(--color-ink-muted); }

/* ---- Prayers (red band) ---- */
/* Narrow screens: one row of cards that scrolls sideways with snap points,
   so the band is one screen tall instead of four; the next card peeks in.
   The row bleeds to the screen edges. The container is focusable
   (tabindex="0" in the HTML), so arrow keys scroll it without JS. */
.oraciones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 26rem);
  align-items: stretch;
  gap: 1rem;
  max-width: none;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--color-on-red-border) transparent;
}
.oraciones > .plana-texto { scroll-snap-align: start; }
.oraciones:focus-visible { outline-offset: -3px; }
@media (min-width: 60rem) {
  /* Two cards per row, equal height per row */
  .oraciones {
    --bloque: 56rem;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--bloque);
    margin-left: max(0px, calc((100% - var(--width)) / 2));
    margin-right: auto;
    padding: 0;
    gap: 1.5rem;
    overflow: visible;
  }
}
.plana-texto {
  margin: 0;
  padding: 1.4rem 1.3rem 1.6rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
}
@media (min-width: 30rem) {
  .plana-texto { padding: 1.8rem 1.9rem 2rem; }
}
.plana-texto__cornisa {
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
.plana-texto blockquote { margin: 0; }
.plana-texto blockquote p:last-child { margin-bottom: 0; }
.plana-texto__titulo {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.2;
  text-wrap: balance;
}
/* Ragged right everywhere: justified text left holes in these narrow cards */
.plana-texto__oracion {
  font-size: 1.04rem;
  line-height: 1.62;
  text-align: left;
  hyphens: manual;
}

/* ---- Editorial decisions ---- */
.decisiones {
  --bloque: var(--measure);
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 56rem) {
  .decisiones { --bloque: 62rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
}
.decisiones__cita { margin: 0; }
.decisiones__cita blockquote {
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--color-red);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.5;
}
.decisiones__cita figcaption {
  margin-top: 0.8rem;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
.decisiones__intro { font-weight: 600; }
.lista-rubrica { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.lista-rubrica li { padding: 0.6rem 0; border-top: 1px solid var(--color-line-strong); }

/* ---- Sample (red band) ---- */
/* Single column capped to a readable width until the two-column layout */
.muestra-b {
  --bloque: 36rem;
  display: grid;
  grid-template-areas: "texto" "figura" "descarga" "puntos";
  gap: 1.75rem;
}
.muestra-b__texto { grid-area: texto; }
.muestra-b__figura { grid-area: figura; margin: 0; }
.muestra-b__descarga { grid-area: descarga; }
.muestra-b__puntos-caja { grid-area: puntos; }
.muestra-b h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.1;
  text-wrap: balance;
}
.muestra-b .subtitulo { margin-top: 0.5rem; }
.muestra-b__lead { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.5; text-wrap: pretty; }
.muestra-b__pila {
  position: relative;
  display: block;
  width: 16.25rem;
  max-width: 100%;
  margin: 0 auto;
}
.muestra-b__img { width: 100%; height: auto; }
/* Sits above the sheet's edge so it never covers the page's running head */
.muestra-b__sello {
  position: absolute;
  top: -0.75rem;
  right: -0.5rem;
  padding: 0.15rem 0.6rem;
  background: var(--color-surface);
  color: var(--color-red);
  font-size: 0.92rem;
  font-weight: 600;
}
@media (min-width: 60rem) {
  .muestra-b__pila { width: 21rem; }
}
.muestra-b__selector { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.muestra-b__selector button {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-on-red-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-on-red);
  font: inherit;
  font-size: 0.98rem;
  cursor: pointer;
}
.muestra-b__selector button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.muestra-b__selector button + button { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.muestra-b__selector button[aria-pressed="true"] {
  background: var(--color-on-red);
  border-color: var(--color-on-red);
  color: var(--color-red);
  font-weight: 600;
}
.muestra-b__puntos { margin-bottom: 0; }
.muestra-b__meta { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--color-on-red-muted); }
.muestra-b__otra { margin: 0.2rem 0 0; }
.muestra-b__otra a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.98rem; }
.muestra-b__incluye {
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-on-red-line);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-on-red-muted);
}
@media (min-width: 60rem) {
  .muestra-b {
    --bloque: 64rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "texto figura" "puntos figura" "descarga figura";
    column-gap: 4rem;
    row-gap: 1.5rem;
    align-items: start;
  }
  .muestra-b__figura { align-self: center; }
  .muestra-b__descarga .acciones { max-width: 26rem; }
}

/* ---- FAQ ---- */
.preguntas { --bloque: 46rem; border-bottom: 1px solid var(--color-line-strong); }
.preguntas details { border-top: 1px solid var(--color-line-strong); }
/* Linked questions (#por-que-este-precio) clear the sticky header */
.preguntas details[id] { scroll-margin-top: 5rem; }
.preguntas summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 0.95rem 2.5rem 0.95rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  content: "+" / "";
  position: absolute;
  right: 0.25rem;
  top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-red);
}
.preguntas details[open] summary::after { content: "−"; content: "−" / ""; }
.preguntas summary:hover { color: var(--color-red); }
.preguntas details p { max-width: var(--measure); padding-bottom: 0.5rem; }
/* Inline download links: vertical padding gives a 44px+ tap area without
   changing the line spacing. */
.enlace-descarga { padding: 0.7rem 0.1rem; font-weight: 600; }

/* ---- Other books of the series ---- */
/* Narrow screens: a catalogue list, small cover on the left, ruled between
   entries. Wide screens: three matched columns whose six rows (cover, title,
   subtitle, summary, credits + format, actions) line up across the books;
   uneven rows leave their spare space below the shorter entry. */
.libros { display: grid; gap: 0; }
.libro {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 1.1rem;
  align-content: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-ink);
}
.libro > * { grid-column: 2; }
.libro__portada {
  grid-column: 1;
  grid-row: 1 / span 5;
  width: 100%;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-cover);
}
.libro__titulo { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; }
.libro__subtitulo { margin: 0.35rem 0 0.6rem; font-style: italic; line-height: 1.4; color: var(--color-ink-muted); }
.libro__resumen { margin: 0 0 0.6rem; line-height: 1.5; }
.libro__creditos,
.libro__formato { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--color-ink-muted); }
.libro__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-top: 1rem;
}
.libro__acciones .btn { flex: 0 1 auto; white-space: nowrap; }
.libro__muestra { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Small phones: the actions take the full width under the cover, so the
   pending button keeps to one line */
@media (max-width: 29.99rem) {
  .libro__acciones { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .libros { --bloque: var(--width); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  @supports (grid-template-rows: subgrid) {
    .libro {
      grid-template-columns: none;
      grid-template-rows: subgrid;
      grid-row: span 6;
      row-gap: 0;
    }
    .libro > *,
    .libro__portada { grid-column: auto; grid-row: auto; }
    /* Covers of different trim sizes sit on one baseline */
    .libro__portada { align-self: end; width: 12rem; margin-bottom: 1.25rem; }
    .libro__acciones { align-self: end; }
  }
}

/* ---- Contact (red band) ---- */
.contacto__texto {
  --bloque: 34rem;
  margin-bottom: 1.75rem;
  font-size: 1.08em;
  text-wrap: pretty;
}
.contacto-grupo--pie { --bloque: 32rem; }
.contacto { padding-bottom: clamp(3.5rem, 8vw, 5.5rem); }

/* ---- Footer ---- */
.pie {
  padding: 2.75rem var(--gutter) 2rem;
  text-align: center;
}
.pie__intro {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
.pie__marcas {
  display: grid;
  grid-template-columns: minmax(0, 20rem);
  justify-content: center;
  gap: 1.5rem 2.5rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .pie__marcas { grid-template-columns: repeat(2, minmax(0, 20rem)); }
}
.pie__marcas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--color-ink-muted);
  text-decoration: none;
}
.pie__caja {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.5rem;
}
/* Optical balance: the wordmark (with its motto) at 2.4rem, the arch at 4.5rem */
.pie__logo { max-width: 100%; width: auto; }
.pie__logo--ao { height: 4.5rem; }
.pie__logo--cr { height: 2.4rem; }
.pie__url { max-width: 100%; font-size: 0.9rem; overflow-wrap: anywhere; }
.pie__marcas a:hover .pie__url { text-decoration: underline; color: var(--color-ink); }
.pie__legal {
  max-width: 40rem;
  margin: 0 auto;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
}

/* ---- Footer link (home: to /tutoriales/; /tutoriales/: back home) ---- */
.pie__enlace { margin: 0 0 1.25rem; font-size: 0.98rem; }
.pie__enlace a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; }

/* ---- /tutoriales/ ----
   One section per video: heading on the left on wide screens (.seccion--lado),
   the video and the pages it uses. */
.encabezado h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.3rem);
  line-height: 1.1;
  text-wrap: balance;
}
.tutoriales-intro { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.tutoriales-intro .texto-corrido { --bloque: var(--measure); }
.videos { --bloque: 40rem; margin-top: 2rem; }
/* Wide screens: the index of the five beside the intro, so the first video shows sooner. The five columns add up
   to the 72rem content width, like .seccion--lado. */
@media (min-width: 60rem) {
  .tutoriales-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 36rem) minmax(0, 4rem) minmax(0, 32rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    padding-top: 3rem;
  }
  .tutoriales-intro > * { grid-column: 2; margin-left: 0; margin-right: 0; }
  .tutoriales-intro > .videos { grid-column: 4; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}
.videos__rotulo {
  margin: 0 0 0.5rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-ink-muted);
}
.videos ol { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-line-strong); }
.videos li { border-top: 1px solid var(--color-line-strong); }
.videos a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  min-height: 48px;
  padding: 0.7rem 0.25rem;
  color: var(--color-ink);
  text-decoration: none;
}
.videos a:hover .videos__titulo { color: var(--color-red); text-decoration: underline; text-decoration-thickness: 1px; }
.videos__num { flex: none; width: 1.2em; color: var(--color-red); font-weight: 600; }
.videos__titulo { flex: 1 1 auto; font-weight: 600; }
.videos__dur { flex: none; color: var(--color-ink-muted); font-size: 0.95rem; }
.tutorial { padding-top: clamp(2.75rem, 7vw, 4.5rem); padding-bottom: clamp(2.75rem, 7vw, 4.5rem); }
.tutorial video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #2a0a0d;  /* the poster's wine, while it loads */
}
.tutorial__paginas { margin-top: 0.9rem; margin-bottom: 0; font-size: 0.98em; color: var(--color-ink-muted); }
/* The title of each video on /tutoriales/ links to its watch page */
.tutorial__enlace { color: inherit; text-decoration: none; }
.tutorial__enlace:hover { color: var(--color-red); text-decoration: underline; text-decoration-thickness: 2px; }

/* ---- Watch pages (/tutoriales/<n>-<name>/): the video first ---- */
.visionado { padding-top: clamp(0.75rem, 2.5vw, 1.75rem); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.migas li { display: flex; align-items: center; color: var(--color-ink-muted); }
.migas li + li::before { content: "›"; content: "›" / ""; margin: 0 0.5rem; color: var(--color-ink-muted); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.1rem; }
.visionado h1 {
  margin-top: 0.15rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.12;
  text-wrap: balance;
}
.visionado__video { --bloque: 56rem; }
.visionado__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #2a0a0d; }
.visionado__datos { margin-top: 1rem; margin-bottom: 0.3rem; }
.visionado__que { --bloque: var(--measure); margin-top: 0; margin-bottom: 0; font-size: 1.08rem; text-wrap: pretty; }
.visionado .tutorial__paginas { --bloque: var(--measure); }
.pasos { --bloque: 56rem; display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line-strong); }
.pasos a {
  display: flex;
  flex-direction: column;
  min-height: 48px;
  padding: 0.75rem 0.25rem;
  color: var(--color-ink);
  text-decoration: none;
}
.pasos a:hover .pasos__titulo { color: var(--color-red); text-decoration: underline; }
.pasos__rotulo { font-size: 0.9rem; font-style: italic; color: var(--color-ink-muted); }
.pasos__titulo { font-weight: 600; }
.pasos a + a { border-top: 1px solid var(--color-line-strong); }
@media (min-width: 40rem) {
  .pasos { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .pasos__sig { grid-column: 2; text-align: right; align-items: flex-end; }
  .pasos a + a { border-top: 0; }
}
.visionado__todos { margin-top: 1rem; margin-bottom: 0; }
.visionado__todos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.tutoriales-fin .acciones { --bloque: 32rem; margin-top: 0; }
@media (min-width: 60rem) {
  /* Side heading (16rem): a smaller title, so it does not break word by word */
  .tutorial .encabezado h2 { font-size: 2rem; }
  .tutorial .encabezado .subtitulo { font-size: 1rem; }
}

/* ---- 404 ---- */
.error {
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 4rem var(--gutter);
  text-align: center;
}
.error h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
}
/* Centred layout: the note is centred too, without the hanging ¶ */
.error .rubrica { max-width: var(--measure); margin-bottom: 0.5rem; padding-left: 0; }
.error .rubrica::before { content: none; }
.error__acciones { justify-content: center; width: min(100%, 30rem); }

/* ---- Scroll reveal (efectos.js) ----
   Hidden only under html.efectos, which JS sets after checking reduced
   motion; transform/opacity only, so no layout shift. */
.efectos .revela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.efectos .revela.revela--visible { opacity: 1; transform: none; }

/* ---- Preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .efectos .revela { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
  :root {
    --color-line: rgba(27, 25, 24, 0.45);
    --color-line-strong: rgba(27, 25, 24, 0.7);
    --color-ink-muted: #3d3834;
    --color-on-red-muted: var(--color-on-red);
  }
}
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .comparar__linea { background: Highlight; border-color: CanvasText; }
}
/* Print: red bands become plain paper, so everything "on red" turns to ink */
@media print {
  :root {
    --color-on-red: var(--color-ink);
    --color-on-red-muted: var(--color-ink-muted);
    --color-on-red-line: var(--color-line-strong);
    --color-on-red-border: var(--color-line-strong);
  }
  .cabezal, .visor, .acciones, .contacto-grupo, .pago, .comparar__rango, .comparar__asa,
  .muestra-b__selector { display: none !important; }
  body,
  .seccion--granate { background: var(--color-surface); }
  .efectos .revela { opacity: 1; transform: none; }
  /* If printed mid count-up, print the real page number, not the moving copy */
  .contador { display: none; }
  .destacados__folio .sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .oraciones { overflow: visible; grid-auto-flow: row; grid-auto-columns: auto; margin: 0; padding: 0; }
  .plana-texto { border: 1px solid var(--color-line-strong); break-inside: avoid; }
}
/* Print, one column (A4 portrait): never split an edition card across pages */
@media print and (max-width: 59.99rem) {
  .edicion { break-inside: avoid; }
}