/* =========================================================
   Ribera Fishing — Artículos tipo revista (v2, 13-oct-2026)

   Calcada de las revistas inglesas de carpa (Total Carp, la carpeta de
   ejemplos de Gaizka): cabecera de sección con su barra de color y el
   autor, titular enorme sobre la foto del pez, entradilla espaciada con
   fondo de color, capitular en cuadro, columnas estrechas con filete,
   rótulos de apartado en caja, pies de foto en cursiva sobre la foto,
   citas con comillas grandes, paso a paso numerado y la marca de fin.

   CADA FORMATO TIENE SU COLOR, como cada sección de la revista: el
   `data-formato` del <article> pone `--rf-acento` (ver «Formatos»). El
   titular de los reportajes (diario, crónica, destino) va en letra de
   mano; el de los técnicos, en Oswald.

   Todo va dentro de .rf-art para no chocar con el CSS de la web.
   Letras: las sirve la web con next/font (--font-oswald, --font-dm-sans,
   --font-revista-mano); fuera de la web, caen a Oswald, DM Sans, Lobster
   por su nombre, y si no están, a las de sistema.
   ========================================================= */

.rf-art {
  --rf-verde: #1a3a2a;
  --rf-verde-2: #2c5641;
  --rf-verde-noche: #0f2219;
  --rf-oro: #c8a84b;
  --rf-oro-texto: #85691c;
  --rf-oro-claro: #efe2b8;
  --rf-amarillo: #f5a623;
  --rf-crema: #f5f0e8;
  --rf-papel: #ffffff;
  --rf-gris: #eeece6;
  --rf-gris-texto: #56615a;
  --rf-tinta: #1d2420;
  --rf-filete: #cfcac0;
  --rf-pie: rgba(15, 20, 17, .82);

  /* El color de la sección. Lo cambia cada formato. */
  --rf-acento: #2c5641;
  --rf-sobre-acento: #ffffff;
  --rf-resalte-titular: #f5c84b;

  --rf-f-titular: var(--font-oswald, "Oswald"), "Oswald", "Arial Narrow", sans-serif;
  --rf-f-texto: var(--font-dm-sans, "DM Sans"), "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rf-f-acento: "Playfair Display", Georgia, "Times New Roman", serif;
  --rf-f-mano: var(--font-revista-mano, "Lobster"), "Lobster", "Brush Script MT", cursive;

  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px 56px;
  background: var(--rf-papel);
  color: var(--rf-tinta);
  font-family: var(--rf-f-texto);
  font-size: 16.5px;
  line-height: 1.58;
}
.rf-art *, .rf-art *::before, .rf-art *::after { box-sizing: border-box; }
.rf-art :where(img) { display: block; max-width: 100%; height: auto; }
.rf-art :where(p) { margin: 0; text-wrap: pretty; }
.rf-art :where(a) { color: var(--rf-acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rf-art :where(strong, b) { font-weight: 700; }
.rf-art a:focus-visible, .rf-art summary:focus-visible { outline: 3px solid var(--rf-amarillo); outline-offset: 2px; }

/* ---------- Formatos: el color de cada sección ---------- */
.rf-art[data-formato="diario"]   { --rf-acento: #1b6fa8; }
.rf-art[data-formato="cronica"]  { --rf-acento: #b0245e; }
.rf-art[data-formato="destino"]  { --rf-acento: #0b7a7c; }
.rf-art[data-formato="tactica"]  { --rf-acento: #b3261e; }
.rf-art[data-formato="tutorial"] { --rf-acento: #5e3a87; }
.rf-art[data-formato="anatomia"] { --rf-acento: #f2b705; --rf-sobre-acento: #1d2420; }
.rf-art[data-formato="prueba"]   { --rf-acento: #b84a0c; }
.rf-art[data-formato="consejo"]  { --rf-acento: #2e7d32; }
.rf-art[data-formato="guia"]     { --rf-acento: #2c5641; }
/* En anatomía el amarillo no se lee como texto sobre blanco: los enlaces
   y los rótulos de texto van en tinta, y el amarillo queda de fondo. */
.rf-art[data-formato="anatomia"] :where(a) { color: var(--rf-tinta); text-decoration-color: var(--rf-acento); text-decoration-thickness: 3px; }

/* ---------- Cabecera de sección (la línea de arriba de la página) ----------
   «■■■ DIARIO DEL RÍO | GERMÁN RIBERA» y el filete de puntos. */
.rf-seccion {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 0 0 18px; padding: 14px 0 9px;
  border-bottom: 1px dotted #8f9892;
  font: 700 11px/1.3 var(--rf-f-texto); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rf-tinta);
}
.rf-seccion::before { content: ""; flex: none; width: 46px; height: 9px; background: var(--rf-acento); }
.rf-seccion span { font-weight: 500; color: var(--rf-gris-texto); }
.rf-seccion span::before { content: "|"; margin-right: 10px; color: #a7aea9; }

/* ---------- Cabecera del artículo ---------- */
.rf-cabecera { padding: 22px 0 8px; text-align: center; }
.rf-antetitulo {
  margin: 0 0 10px;
  font: 700 12px/1.3 var(--rf-f-texto); letter-spacing: .18em; text-transform: uppercase;
  color: var(--rf-acento);
}
.rf-art[data-formato="anatomia"] .rf-antetitulo { color: var(--rf-tinta); }
.rf-titular {
  margin: 0 0 .28em;
  font-family: var(--rf-f-titular); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 7.6vw, 5.6rem); line-height: .94; letter-spacing: -.005em;
  color: var(--rf-tinta);
  text-wrap: balance;
}
.rf-titular em { font-style: normal; color: var(--rf-acento); }
/* Los reportajes, con titular de mano, como los «features» de la revista. */
.rf-art:is([data-formato="diario"], [data-formato="cronica"], [data-formato="destino"]) .rf-titular {
  font-family: var(--rf-f-mano); font-weight: 400; text-transform: none;
  font-size: clamp(2.7rem, 8vw, 6.2rem); line-height: .98; letter-spacing: 0;
}
/* Anatomía: el titular gordo con el amarillo detrás. */
.rf-art[data-formato="anatomia"] .rf-titular em,
.rf-art[data-formato="anatomia"] .rf-anatomia__titulo em {
  color: inherit;
  background: linear-gradient(transparent 52%, var(--rf-acento) 52%, var(--rf-acento) 92%, transparent 92%);
}

/* La entradilla: espaciada, centrada y, si trae `rf-resalte`, con el
   fondo de color línea a línea, como el «standfirst» de la revista. */
.rf-entradilla {
  max-width: 46ch; margin: 0 auto 26px;
  font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.75; letter-spacing: .14em;
  text-wrap: balance;
}
.rf-autor { font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.rf-entradilla > .rf-autor { color: var(--rf-acento); }
.rf-art[data-formato="anatomia"] .rf-entradilla > .rf-autor { color: var(--rf-tinta); }

/* Resalte línea a línea (entradilla y pies de foto). */
.rf-resalte {
  padding: .1em .35em;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rf-resalte .rf-autor { color: inherit; }

/* Variante: titular sobre la foto del pez y entradilla debajo, en el papel. */
.rf-cabecera--foto {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(min(74vh, 660px), auto) auto;
  margin: 0 -20px 30px; padding: 0;
  text-align: left;
}
.rf-cabecera--foto .rf-cabecera__fondo { grid-area: 1 / 1; position: relative; overflow: hidden; background: var(--rf-verde-noche); }
.rf-cabecera--foto .rf-cabecera__fondo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-cabecera--foto .rf-cabecera__fondo > .rf-ph { align-content: start; padding-top: 56px; }
.rf-cabecera--foto .rf-cabecera__fondo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 10, .78) 0%, rgba(8, 14, 10, .35) 34%, rgba(8, 14, 10, 0) 62%);
}
.rf-cabecera--foto .rf-cabecera__texto { display: contents; }
.rf-cabecera--foto .rf-antetitulo,
.rf-cabecera--foto .rf-titular { grid-area: 1 / 1; z-index: 1; padding-inline: 24px; }
.rf-cabecera--foto .rf-antetitulo {
  align-self: start; justify-self: start; margin: 22px 24px 0; padding: 4px 9px;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
}
.rf-cabecera--foto .rf-titular {
  align-self: end; max-width: 15ch; margin: 0; padding-bottom: 26px;
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.rf-cabecera--foto .rf-titular em { color: var(--rf-resalte-titular); }
.rf-art[data-formato="anatomia"] .rf-cabecera--foto .rf-titular em { background: none; color: var(--rf-acento); }
.rf-cabecera--foto .rf-cabecera__pie {
  grid-area: 1 / 1; z-index: 1; align-self: start; justify-self: end;
  max-width: min(46%, 340px); margin: 16px 16px 0 0;
  font: italic 500 .8rem/1.55 var(--rf-f-texto); text-align: right; color: #fff;
}
.rf-cabecera__pie .rf-resalte { background: var(--rf-pie); color: #fff; }
.rf-cabecera--foto .rf-entradilla { grid-area: 2 / 1; margin: 26px auto 4px; padding-inline: 20px; text-align: center; color: var(--rf-tinta); }

/* ---------- Bloques de texto ---------- */
.rf-bloque { margin: 0 0 28px; }
.rf-bloque--lateral { display: grid; gap: 26px; }
.rf-cols { column-gap: 30px; column-rule: 1px solid var(--rf-filete); }
.rf-cols > :is(figure, aside, blockquote, ul, ol, dl, table, details, .rf-cita, .rf-nota) { break-inside: avoid; }
.rf-cols > :is(figure, aside, blockquote, .rf-nota) { margin-block: 6px 18px; }
.rf-art :where(p + p) { text-indent: 1.25em; }
.rf-art :where(h2 + p, h3 + p, figure + p, aside + p, blockquote + p, ol + p, ul + p, dl + p, div + p, table + p) { text-indent: 0; }
.rf-cols :where(ul, ol) { margin: 6px 0 12px; padding-left: 1.15em; }
.rf-cols :where(li) { margin: 0 0 4px; }
.rf-cols :where(li)::marker { color: var(--rf-acento); font-weight: 700; }

/* El rótulo de apartado: en mayúsculas, dentro de una caja de color. */
.rf-art :where(h2) {
  display: table; margin: 1.2em 0 .7em; padding: .2em .5em .16em;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font-family: var(--rf-f-titular); font-weight: 600; font-size: 1.02rem; line-height: 1.25;
  letter-spacing: .05em; text-transform: uppercase;
  break-after: avoid;
}
.rf-art :where(h2:first-child) { margin-top: 0; }
.rf-art :where(h3) {
  margin: 1em 0 .3em;
  font-family: var(--rf-f-titular); font-weight: 600; font-size: 1.04rem; line-height: 1.25;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--rf-acento); break-after: avoid;
}
.rf-art[data-formato="anatomia"] :where(h3) { color: var(--rf-tinta); }

/* Capitular: la letra en un cuadro de color, de dos líneas de alto (con
   tres, una entrada corta empujaba hacia dentro el párrafo siguiente). */
.rf-capitular::first-letter {
  float: left; margin: .14em .14em 0 0; padding: .08em .12em .02em;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font-family: var(--rf-f-titular); font-weight: 700; font-size: 2.9em; line-height: .84; text-transform: uppercase;
}

/* Marca de fin, va dentro del último párrafo. */
.rf-fin {
  display: inline-block; margin-left: 6px; padding: 1px 5px 0;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 .7rem/1.35 var(--rf-f-titular); letter-spacing: .04em;
  vertical-align: .12em; text-indent: 0;
}

/* ---------- Fotos ---------- */
.rf-foto { position: relative; margin: 0 0 26px; }
.rf-foto > img { width: 100%; }
.rf-foto > .rf-ph { width: 100%; aspect-ratio: var(--rf-ratio, 3 / 2); }
.rf-foto--ancha { --rf-ratio: 16 / 9; margin: 4px 0 30px; }
.rf-foto--ancha > img, .rf-foto--vertical > img { aspect-ratio: var(--rf-ratio); object-fit: cover; }
.rf-foto--vertical { --rf-ratio: 4 / 5; }
/* El pie: cursiva pequeña sobre la foto, abajo a la derecha. */
.rf-foto figcaption {
  position: absolute; right: 10px; bottom: 10px; max-width: min(62%, 340px);
  font: italic 500 .8rem/1.55 var(--rf-f-texto); text-align: right; color: #fff;
}
.rf-foto figcaption:not(:has(.rf-resalte)) { padding: 3px 8px; background: var(--rf-pie); }
.rf-foto figcaption .rf-resalte { background: var(--rf-pie); color: #fff; }
.rf-foto--pie-arriba figcaption { top: 10px; bottom: auto; }
.rf-foto--pie-abajo figcaption { right: auto; left: 10px; text-align: left; }
.rf-foto--polaroid {
  padding: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 26px rgba(0, 0, 0, .16);
  transform: rotate(var(--rf-giro, -1.3deg));
}
.rf-foto--polaroid figcaption { right: 20px; bottom: 20px; }
.rf-foto--polaroid.rf-foto--pie-abajo figcaption { right: auto; left: 20px; }
.rf-foto__credito { display: block; margin-top: 2px; font-style: normal; font-size: .7rem; opacity: .85; }
/* Dentro de una columna la foto es pequeña: el pie, debajo. */
.rf-cols .rf-foto figcaption { position: static; max-width: none; margin-top: 5px; text-align: left; color: var(--rf-gris-texto); }
.rf-cols .rf-foto figcaption:not(:has(.rf-resalte)) { padding: 0; background: none; }
.rf-cols .rf-foto figcaption .rf-resalte { background: none; color: inherit; padding: 0; }

/* Galería: varias fotos juntas. */
.rf-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 6px 0 30px; }
.rf-galeria .rf-foto { margin: 0; }
.rf-galeria .rf-foto > img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Hueco de foto pendiente */
.rf-ph {
  display: grid; place-content: center; gap: 6px;
  padding: 22px; text-align: center;
  background: linear-gradient(160deg, var(--rf-verde-2), var(--rf-verde) 58%, var(--rf-verde-noche));
  border: 2px dashed rgba(245, 240, 232, .38);
  color: #e9e3d3; font: 600 .92rem/1.35 var(--rf-f-texto);
}
.rf-ph b { font-family: var(--rf-f-titular); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; color: var(--rf-amarillo); }

/* ---------- Vídeo: la foto y un botón; YouTube solo si se pulsa ---------- */
.rf-video {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 9; margin: 4px 0 30px;
  background: var(--rf-verde-noche); color: #fff; text-decoration: none;
}
.rf-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .2s ease; }
.rf-video:hover > img { opacity: .5; }
.rf-video__boton {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 .82rem/1 var(--rf-f-texto); letter-spacing: .14em; text-transform: uppercase;
}
.rf-video__boton::before { content: ""; border-left: 12px solid currentColor; border-block: 8px solid transparent; }
.rf-video__titulo { position: absolute; left: 14px; right: 14px; bottom: 12px; font: italic 500 .85rem/1.4 var(--rf-f-texto); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.rf-video:has(+ .rf-video__pie) { margin-bottom: 8px; }
.rf-video__pie { max-width: 72ch; margin: 0 0 30px; font: italic 500 .88rem/1.5 var(--rf-f-texto); color: var(--rf-gris-texto); }

/* ---------- Cita destacada: comillas grandes, letra grande ---------- */
.rf-cita {
  margin: 18px 0 22px; padding: 0;
  font: 500 1.5rem/1.22 var(--rf-f-texto); color: var(--rf-tinta);
}
.rf-cita p { text-indent: 0; }
.rf-cita p + p { margin-top: .4em; }
.rf-cita p:first-of-type::before, .rf-cita p:last-of-type::after {
  font: 700 2.2em/0 var(--rf-f-acento); color: var(--rf-acento); vertical-align: -.36em;
}
.rf-cita p:first-of-type::before { content: "\201C"; margin-right: .04em; }
.rf-cita p:last-of-type::after { content: "\201D"; margin-left: .04em; }
.rf-art[data-formato="anatomia"] .rf-cita p::before, .rf-art[data-formato="anatomia"] .rf-cita p::after { color: var(--rf-oro-texto); }
.rf-cita cite {
  display: block; margin-top: 10px;
  font: 700 .72rem/1.3 var(--rf-f-texto); font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rf-acento);
}
.rf-art[data-formato="anatomia"] .rf-cita cite { color: var(--rf-tinta); }
.rf-cita--caja { padding: 20px 22px; background: var(--rf-acento); color: var(--rf-sobre-acento); font-size: 1.3rem; }
.rf-cita--caja p:first-of-type::before, .rf-cita--caja p:last-of-type::after { color: inherit; opacity: .55; }
.rf-cita--caja cite { color: inherit; opacity: .85; }

/* ---------- Nota: el «top tip» de la revista ---------- */
.rf-nota {
  margin: 6px 0 22px; padding: 12px 14px 13px;
  background: var(--rf-gris); border-top: 4px solid var(--rf-acento);
  font-size: .93rem; line-height: 1.5;
}
.rf-nota p + p { text-indent: 0; margin-top: 6px; }
.rf-nota__titulo {
  margin-bottom: 4px !important;
  font: 700 .72rem/1.3 var(--rf-f-texto); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rf-acento);
}
.rf-art[data-formato="anatomia"] .rf-nota__titulo { color: var(--rf-tinta); }
.rf-nota--aviso { border-top-color: #b3261e; background: #f7ebe7; }
.rf-nota--aviso .rf-nota__titulo { color: #9c2119; }
.rf-nota__cifra { font: 700 2.3rem/1 var(--rf-f-titular); color: var(--rf-acento); text-transform: uppercase; }
.rf-art[data-formato="anatomia"] .rf-nota__cifra { color: var(--rf-tinta); }
.rf-nota--llamada { border-top: 0; background: var(--rf-acento); color: var(--rf-sobre-acento); }
.rf-nota--llamada .rf-nota__titulo, .rf-nota--llamada a { color: inherit; }
.rf-nota--llamada .rf-nota__boton { display: inline-block; margin-top: 4px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Datos: la ficha rápida («en datos») ---------- */
.rf-datos { margin: 0 0 28px; }
.rf-datos__titulo, .rf-claves__titulo, .rf-tarjetas__titulo, .rf-lugares__titulo, .rf-enlaces__titulo, .rf-hitos__titulo {
  display: inline-block; margin: 0 0 10px !important; padding: 3px 8px;
  background: var(--rf-tinta); color: #fff;
  font: 700 .72rem/1.3 var(--rf-f-texto); letter-spacing: .16em; text-transform: uppercase;
}
.rf-datos dl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  margin: 0; border-top: 3px solid var(--rf-acento);
}
.rf-datos dl > div { padding: 9px 12px 10px 0; border-bottom: 1px dotted var(--rf-filete); }
.rf-datos dt { font: 700 .68rem/1.3 var(--rf-f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rf-gris-texto); }
.rf-datos dd { margin: 2px 0 0; font-weight: 700; line-height: 1.35; }
.rf-datos--lista dl { grid-template-columns: 1fr; }
.rf-datos--lista dl > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; align-items: baseline; }
.rf-datos--lista dd { margin: 0; font-weight: 500; }

/* ---------- Claves: la lista numerada («what's hot») ---------- */
.rf-claves { margin: 6px 0 30px; }
.rf-claves ol { counter-reset: clave; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 28px; }
.rf-claves li { counter-increment: clave; position: relative; padding-left: 46px; font-size: .97rem; }
.rf-claves li::before {
  content: counter(clave); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 1.05rem/1 var(--rf-f-titular);
}
.rf-claves li > :is(h3, strong:first-child) {
  display: inline; margin: 0; padding: .05em .3em;
  background: var(--rf-tinta); color: #fff;
  font: 700 .82rem/1.6 var(--rf-f-texto); letter-spacing: .08em; text-transform: uppercase;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rf-claves li > h3 + p { margin-top: 6px; }
.rf-claves li p + p { text-indent: 0; margin-top: 6px; }

/* ---------- Tarjetas: sí/no, trampas, zonas… ---------- */
.rf-tarjetas { margin: 6px 0 30px; }
.rf-tarjetas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.rf-tarjeta { padding: 14px 16px 16px; background: var(--rf-gris); border-top: 4px solid var(--rf-acento); font-size: .94rem; line-height: 1.5; }
.rf-tarjeta h3 { margin-top: 2px; }
.rf-tarjeta p + p { text-indent: 0; margin-top: 6px; }
.rf-tarjeta__marca {
  display: inline-block; margin-bottom: 6px !important; padding: 2px 7px;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 .68rem/1.3 var(--rf-f-texto); letter-spacing: .14em; text-transform: uppercase;
}
.rf-tarjeta--no { border-top-color: #b3261e; }
.rf-tarjeta--no .rf-tarjeta__marca { background: #b3261e; color: #fff; }

/* ---------- Ficha del pescador ---------- */
.rf-ficha { margin: 0 0 24px; font-size: .9rem; line-height: 1.4; }
.rf-ficha__titulo, .rf-kit__titulo, .rf-parte__titulo {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px; text-indent: 0;
  font: 700 .74rem/1.3 var(--rf-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rf-gris-texto);
}
.rf-ficha__titulo { flex-wrap: wrap; }
.rf-ficha__titulo span { font: 700 1.05rem/1.2 var(--rf-f-titular); letter-spacing: .02em; color: var(--rf-tinta); }
.rf-ficha__titulo::after, .rf-kit__titulo::after { content: ""; flex: 1 1 24px; height: 6px; background: var(--rf-acento); }
.rf-ficha__caja { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: start; padding: 12px; background: var(--rf-gris); }
.rf-ficha__foto { width: 80px; aspect-ratio: 4 / 5; object-fit: cover; }
.rf-ficha__foto.rf-ph { padding: 6px; font-size: .68rem; }
.rf-ficha__foto.rf-ph b { font-size: .78rem; }
.rf-ficha dl, .rf-parte dl { margin: 0; }
.rf-ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 8px; }
.rf-ficha dl > div { display: contents; }
.rf-ficha dt { font-weight: 700; }
.rf-ficha dd { margin: 0; }

/* ---------- En la caja (producto en uso) ---------- */
.rf-kit { margin: 0 0 26px; }
.rf-kit__foto { margin: 0; }
.rf-kit__foto > img, .rf-kit__foto > .rf-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rf-kit__foto > img { object-fit: contain; background: #fff; }
.rf-kit__texto { margin-top: 6px; padding: 10px 12px; background: var(--rf-gris); font-size: .9rem; line-height: 1.45; }
.rf-kit__texto p + p { text-indent: 0; margin-top: 6px; }
.rf-kit__producto { font-weight: 700; }

/* Precio dinámico: la web rellena el contenido. */
.rf-precio:not(:empty) { margin-left: 6px; padding: 1px 7px; background: var(--rf-amarillo); color: var(--rf-tinta); font-weight: 700; font-style: normal; white-space: nowrap; }

/* ---------- Parte de pesca ---------- */
.rf-parte { margin: 0 0 26px; padding: 14px 16px 16px; background: var(--rf-tinta); color: var(--rf-crema); }
.rf-parte__titulo { color: #fff; }
.rf-parte__titulo::before { content: ""; width: 26px; height: 8px; background: var(--rf-acento); }
.rf-parte dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: .9rem; line-height: 1.35; }
.rf-parte dl > div { display: contents; }
.rf-parte dt { font: 600 .74rem/1.35 var(--rf-f-texto); letter-spacing: .12em; text-transform: uppercase; color: #b9c2b5; }
.rf-parte dd { margin: 0; }

/* ---------- Paso a paso: «PASO A PASO Nombre» y la raya ---------- */
.rf-pasos { margin: 8px 0 34px; }
.rf-pasos__titulo {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 0; background: none; color: var(--rf-tinta);
  font: italic 500 1.65rem/1.1 var(--rf-f-texto); letter-spacing: 0; text-transform: none;
}
.rf-pasos__titulo span { font: 700 .82rem/1 var(--rf-f-texto); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-tinta); }
.rf-pasos__titulo::after { content: ""; flex: 1 1 120px; height: 10px; align-self: center; background: var(--rf-acento); }
.rf-pasos__lista {
  counter-reset: paso; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px;
}
.rf-paso { counter-increment: paso; position: relative; }
.rf-paso::before {
  content: counter(paso); position: absolute; z-index: 1; top: 0; left: 0;
  min-width: 30px; height: 30px; padding: 0 6px; display: grid; place-items: center;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 1.05rem/1 var(--rf-f-titular);
}
.rf-paso > img, .rf-paso > .rf-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rf-paso > .rf-ph { padding: 40px 10px 10px; font-size: .78rem; }
.rf-paso > p, .rf-paso > div > p { margin-top: 7px; font: italic 400 .86rem/1.45 var(--rf-f-texto); text-indent: 0; }
/* Paso sin foto: el número arriba y el texto debajo. */
.rf-paso:not(:has(> img, > .rf-ph)) { padding-top: 40px; border-top: 1px solid var(--rf-filete); }
.rf-paso:not(:has(> img, > .rf-ph)) > :is(p, div > p) { font-style: normal; font-size: .93rem; }
.rf-paso h3 { margin: 0 0 3px; }

/* ---------- Anatomía del montaje ---------- */
.rf-anatomia { margin: 10px 0 36px; padding: 22px 0 0; border-top: 1px dotted #8f9892; }
.rf-anatomia__titulo {
  display: block; margin: 0 0 10px; padding: 0; background: none; color: var(--rf-tinta);
  font: 700 clamp(2.1rem, 5.4vw, 3.6rem)/.95 var(--rf-f-titular); letter-spacing: 0; text-transform: uppercase;
}
.rf-anatomia__entradilla { max-width: 60ch; margin-bottom: 18px; font: italic 400 1.1rem/1.45 var(--rf-f-acento); }
.rf-anatomia__grid { display: grid; gap: 22px; }
.rf-anatomia__dibujo { position: relative; margin: 0; background: var(--rf-crema); }
.rf-anatomia__dibujo > svg, .rf-anatomia__dibujo > img { display: block; width: 100%; height: auto; }
.rf-marca {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--rf-tinta); color: #fff;
  font: 600 .86rem/1 var(--rf-f-titular);
}
.rf-piezas { counter-reset: pieza; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rf-pieza { counter-increment: pieza; position: relative; padding-left: 36px; font: italic 400 .98rem/1.45 var(--rf-f-acento); }
.rf-pieza::before {
  content: counter(pieza); position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--rf-tinta); color: #fff; font: normal 600 .82rem/1 var(--rf-f-titular);
}
.rf-pieza h3 { margin: 0 0 2px; font: 600 1.08rem/1.25 var(--rf-f-acento); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--rf-tinta); }
.rf-pieza p + p { text-indent: 0; margin-top: 4px; }
.rf-pieza a { font-style: normal; }

/* ---------- También usamos: la franja de «también puedes probar» ---------- */
.rf-tambien { margin: 6px 0 34px; padding: 18px; background: var(--rf-acento); color: var(--rf-sobre-acento); }
.rf-tambien__titulo {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px; text-indent: 0;
  background: var(--rf-tinta); color: #fff; transform: rotate(-2deg);
  font: 600 1rem/1.3 var(--rf-f-titular); letter-spacing: .04em; text-transform: uppercase;
}
.rf-tambien ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.rf-tambien li { font: italic 400 1rem/1.35 var(--rf-f-acento); text-align: center; }
.rf-tambien li > img, .rf-tambien li > .rf-ph, .rf-tambien li > a > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; margin-bottom: 8px; }
.rf-tambien li > .rf-ph { font-style: normal; font-size: .8rem; }
.rf-tambien li strong { display: block; font: 600 1rem/1.3 var(--rf-f-titular); font-style: normal; }
.rf-tambien a { color: inherit; }

/* ---------- Tabla ---------- */
.rf-tabla { margin: 6px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rf-tabla table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.4; }
.rf-tabla th { padding: 8px 10px; background: var(--rf-acento); color: var(--rf-sobre-acento); text-align: left; font: 700 .72rem/1.3 var(--rf-f-texto); letter-spacing: .12em; text-transform: uppercase; }
.rf-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--rf-filete); vertical-align: top; }
.rf-tabla tbody tr:nth-child(even) td { background: #f7f6f2; }
.rf-tabla__nota { margin-top: 6px; font-size: .8rem; font-style: italic; color: var(--rf-gris-texto); }

/* ---------- Lugares: los destinos numerados ---------- */
.rf-lugares { margin: 6px 0 34px; }
.rf-lugares__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px 22px; }
.rf-lugar { font-size: .94rem; line-height: 1.5; }
.rf-lugar .rf-foto { margin-bottom: 10px; }
.rf-lugar .rf-foto > img { aspect-ratio: 3 / 2; object-fit: cover; }
.rf-lugar h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.rf-lugar__num { padding: 1px 6px; background: var(--rf-acento); color: var(--rf-sobre-acento); font-weight: 700; }
.rf-lugar__zona { font: italic 500 .85rem/1.3 var(--rf-f-texto); letter-spacing: 0; text-transform: none; color: var(--rf-gris-texto); }
.rf-lugar p + p { text-indent: 0; margin-top: 6px; }
.rf-lugar .rf-datos { margin: 8px 0 10px; }
.rf-lugar .rf-datos dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Hitos: la línea del tiempo ---------- */
.rf-hitos { margin: 6px 0 32px; }
.rf-hitos ol { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--rf-acento); display: grid; gap: 16px; }
.rf-hitos li { position: relative; font-size: .95rem; }
.rf-hitos li::before { content: ""; position: absolute; left: -30px; top: .45em; width: 13px; height: 13px; background: var(--rf-acento); border: 3px solid var(--rf-papel); }
.rf-hitos__fecha { display: block; font: 700 .76rem/1.3 var(--rf-f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rf-acento); }
.rf-art[data-formato="anatomia"] .rf-hitos__fecha { color: var(--rf-tinta); }
.rf-hitos li p + p { text-indent: 0; margin-top: 4px; }

/* ---------- Enlaces: el índice de fichas (especies, destinos…) ---------- */
.rf-enlaces { margin: 6px 0 30px; }
.rf-enlaces ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 22px; }
.rf-enlaces li { padding: 9px 0; border-bottom: 1px dotted var(--rf-filete); font-size: .9rem; line-height: 1.35; }
.rf-enlaces li strong { display: block; font: 600 1rem/1.25 var(--rf-f-titular); letter-spacing: .02em; }
.rf-enlaces li i { display: block; color: var(--rf-gris-texto); }
.rf-enlaces a { color: var(--rf-tinta); text-decoration: none; }
.rf-enlaces a:hover strong { color: var(--rf-acento); }

/* ---------- Veredicto ---------- */
.rf-veredicto { margin: 0 0 34px; padding: 20px; border: 3px solid var(--rf-acento); }
.rf-veredicto h2 { margin-top: 0; }
.rf-veredicto__cols { display: grid; gap: 18px; }
.rf-veredicto h3 { margin: 0 0 6px; }
.rf-veredicto__si h3 { color: #2e7d32; }
.rf-veredicto__no h3 { color: #9c2119; }
.rf-veredicto ul { margin: 0; padding-left: 1.1em; }
.rf-veredicto li + li { margin-top: 4px; }
.rf-veredicto__para { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--rf-filete); text-indent: 0; font: italic 400 1.08rem/1.45 var(--rf-f-acento); }

/* ---------- Preguntas frecuentes ---------- */
.rf-faq { max-width: 780px; margin: 10px 0 36px; }
.rf-faq details { border-top: 1px solid var(--rf-filete); }
.rf-faq details:last-child { border-bottom: 1px solid var(--rf-filete); }
.rf-faq summary {
  display: flex; justify-content: space-between; gap: 16px; padding: 13px 2px;
  cursor: pointer; list-style: none;
  font: 600 1.02rem/1.35 var(--rf-f-texto); color: var(--rf-tinta);
}
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::after {
  content: "+"; flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--rf-acento); color: var(--rf-sobre-acento);
  font: 700 1.1rem/1 var(--rf-f-texto); transition: transform .2s ease;
}
.rf-faq details[open] summary::after { transform: rotate(45deg); }
.rf-faq details > :not(summary) { padding: 0 2px 16px; text-indent: 0; }
.rf-faq details p + p { text-indent: 0; margin-top: 6px; }

/* ---------- Fuentes ---------- */
.rf-fuentes { margin: 0 0 26px; padding-top: 10px; border-top: 1px dotted #8f9892; font-size: .8rem; line-height: 1.5; color: var(--rf-gris-texto); }
.rf-fuentes__titulo { margin-bottom: 4px !important; font: 700 .68rem/1.3 var(--rf-f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rf-tinta); }
.rf-fuentes p + p { text-indent: 0; margin-top: 4px; }
.rf-fuentes a { color: inherit; }

/* ---------- Cierre y pie de página ---------- */
.rf-cierre { margin-top: 10px; padding-top: 16px; border-top: 1px dotted #8f9892; }
.rf-cierre > p:not(.rf-cierre__firma) { max-width: 70ch; }
.rf-cierre__firma { margin-top: 10px; text-align: right; font: 400 1.6rem/1.2 var(--rf-f-mano); color: var(--rf-acento); text-indent: 0; }
.rf-art[data-formato="anatomia"] .rf-cierre__firma { color: var(--rf-tinta); }
.rf-cierre::after {
  content: "Ribera Fishing · El blog"; display: block; margin-top: 22px;
  font: 700 10px/1 var(--rf-f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--rf-gris-texto);
}

/* ---------- Tema noche (sesiones nocturnas, siluro) ---------- */
.rf-art--noche {
  --rf-papel: #111613;
  --rf-tinta: #ece6d8;
  --rf-gris: rgba(245, 240, 232, .08);
  --rf-gris-texto: #b9c2b5;
  --rf-filete: rgba(245, 240, 232, .22);
  --rf-oro-texto: var(--rf-amarillo);
  --rf-oro-claro: rgba(200, 168, 75, .16);
}
.rf-art--noche .rf-seccion { border-bottom-color: rgba(245, 240, 232, .35); }
.rf-art--noche .rf-parte { background: rgba(0, 0, 0, .35); }
.rf-art--noche .rf-datos__titulo, .rf-art--noche .rf-claves__titulo, .rf-art--noche .rf-tarjetas__titulo,
.rf-art--noche .rf-lugares__titulo, .rf-art--noche .rf-enlaces__titulo, .rf-art--noche .rf-hitos__titulo,
.rf-art--noche .rf-tambien__titulo, .rf-art--noche .rf-claves li > :is(h3, strong:first-child) { background: var(--rf-crema); color: #111613; }
.rf-art--noche .rf-anatomia__dibujo { background: rgba(245, 240, 232, .92); }
.rf-art--noche .rf-tabla tbody tr:nth-child(even) td { background: rgba(245, 240, 232, .05); }
.rf-art--noche .rf-nota--aviso { background: rgba(179, 38, 30, .18); }
.rf-art--noche a { color: var(--rf-amarillo); }

/* ---------- Escritorio ---------- */
@media (min-width: 700px) {
  .rf-pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-veredicto__cols { grid-template-columns: 1fr 1fr; }
  .rf-claves ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .rf-cols { column-count: 2; }
  .rf-cabecera--foto .rf-antetitulo, .rf-cabecera--foto .rf-titular { padding-inline: 44px; }
  .rf-cabecera--foto .rf-titular { padding-bottom: 40px; }
}
@media (min-width: 900px) {
  .rf-bloque--lateral { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
  .rf-anatomia__grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .rf-anatomia__dibujo { position: sticky; top: 16px; }
}
@media (min-width: 1100px) {
  .rf-pasos__lista:not(.rf-pasos__lista--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rf-bloque:not(.rf-bloque--lateral) .rf-cols { column-count: 3; }
}
/* Un bloque corto no se reparte en columnas (dos frases partidas en tres
   se leen mal); uno mediano, en dos. Lo pone quien maqueta (La Redacción
   o la conversión de los artículos de WordPress) según lo que lleva. */
@media (min-width: 820px) {
  .rf-bloque.rf-bloque--corto .rf-cols { column-count: 1; max-width: 72ch; }
}
@media (min-width: 1100px) {
  .rf-bloque.rf-bloque--medio .rf-cols { column-count: 2; }
}

/* ---------- Móvil ---------- */
@media (max-width: 560px) {
  .rf-art { font-size: 16px; }
  .rf-foto figcaption, .rf-foto--polaroid figcaption, .rf-foto--pie-abajo figcaption {
    position: static; max-width: none; margin-top: 5px; text-align: left; color: var(--rf-gris-texto);
  }
  .rf-foto figcaption:not(:has(.rf-resalte)) { padding: 0; background: none; }
  .rf-foto figcaption .rf-resalte { padding: 0; background: none; color: inherit; }
  .rf-foto--polaroid { transform: none; }
  .rf-cita { font-size: 1.28rem; }
  .rf-cabecera--foto { grid-template-rows: minmax(68vh, auto) auto; }
  .rf-entradilla { letter-spacing: .08em; }
  .rf-marca { width: 22px; height: 22px; font-size: .76rem; }
  .rf-datos dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-faq summary::after, .rf-video > img { transition: none; }
}