/* Hub de recursos (unidad P13) — portada, guías y glosario.
   Hereda de `legal.css` el índice pegajoso y la medida de lectura; añade el kit de piezas que el
   owner aprobó en la voz del hub (§6): nota, importante, fuente oficial, pasos, tabla de campos,
   figura con pie y preguntas plegables.

   Cero hex: TODO color sale de `tokens/semantics.css` (R-15). Cero animación y cero transición:
   la guía no coreografía nada, así que `prefers-reduced-motion` no tiene nada que apagar. */

/* ── hero y navegación del hub ─────────────────────────────────────────── */
.r-page .hero { padding: 56px 0 40px; background: var(--color-surface-sunken); }
.r-page .hero .d1 { max-width: 20ch; font-size: clamp(34px, 4vw, 54px); }
.r-page .hero .lead { max-width: 65ch; margin-top: 20px; }
.r-page .eyebrow { color: var(--color-text-secondary); }
.r-page .sec { padding: 42px 0 64px; }

/* Migas, en el sitio del rótulo y con su misma escala. Sustituyen a la barra de tres enlaces que
   tenía la primera versión, que repetía el nombre de la página en la que ya estabas y, en un
   teléfono, se comía un renglón entero de la primera pantalla. */
.r-crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); }
.r-crumb a { color: var(--color-text-secondary); text-decoration: none; }
.r-crumb a:hover { color: var(--color-primary); text-decoration: underline; }
.r-crumb [aria-current="page"] { color: var(--color-text-primary); font-weight: 600; }

.r-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 22px; font-size: 14px; }
.r-links a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 4px; }
.r-more { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.r-more .r-toc-h { width: 100%; margin: 0 0 4px; }

/* == portada: rejilla de fichas ==
   La primera version apilaba tarjetas a todo lo ancho, separadas por filetes. Con una guia pasaba;
   con las cuatro de la §3.7 la pagina seria una columna de bloques iguales. La rejilla crece a lo
   ANCHO y cada ficha es una caja cerrada, que es lo que distingue un indice de contenido de una
   lista de ajustes. */
.r-group-h { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.r-grid + .r-group-h { margin-top: 44px; }
.r-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
/* Dos columnas fijas, no `auto-fill`: con tres columnas la ficha se queda en un tercio de la
   pantalla y el texto cabe a duras penas. Y mientras haya UNA sola guía, ocupa el ancho entero en
   vez de dejar media fila vacía — se corrige sola el día que entre la segunda. */
.r-grid > .r-tile:only-child { grid-column: 1 / -1; padding: 30px 32px; }
.r-grid > .r-tile:only-child h3 { font-size: 25px; }
.r-grid > .r-tile:only-child p { font-size: 16px; max-width: 62ch; }

.r-tile { position: relative; padding: 24px 26px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.r-tile:hover { border-color: var(--color-primary); }
.r-tile h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; color: var(--color-text-primary); text-wrap: balance; }
.r-tile h3 a { color: inherit; text-decoration: none; }
/* La ficha entera es zona de clic, pero el enlace sigue siendo el TITULO: asi el nombre accesible
   del destino es el del articulo, no un «Leer la guia» repetido en cada una. */
.r-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.r-tile h3 a:focus-visible { outline: none; }
.r-tile:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.r-tile h3 .ic { width: 15px; height: 15px; margin-left: 8px; vertical-align: -1px; color: var(--color-primary); }
.r-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); text-wrap: pretty; }

/* El glosario y el directorio de bancos no son guias: son referencia. Misma forma, menos peso. */
.r-grid-sm .r-tile { padding: 20px 22px; background: var(--color-surface-sunken); }
.r-grid-sm .r-tile h3 { font-size: 18px; }
.r-grid-sm .r-tile p { font-size: 14px; }

/* ── layout de guía y glosario: índice pegajoso + cuerpo de 72 ch ──────── */
.r-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.r-toc { position: sticky; top: 96px; font-size: 14px; }
.r-toc-h { font-weight: 700; margin: 0 0 14px; }
.r-toc a { display: block; padding: 7px 0; color: var(--color-text-secondary); line-height: 1.4; }
.r-toc a:hover, .r-body a:hover { color: var(--color-primary); text-decoration: underline; }

.r-body { max-width: 72ch; min-width: 0; }
.r-body section + section, .r-body .r-resumen { margin-top: 42px; }
/* Sin `scroll-margin-top` por sección: el destino de un ancla lo coloca
   `html{scroll-padding-top}` de `primitives.css`, una sola vez para todas las rutas. Un valor por
   página devolvía tres alturas distintas y ninguna igual a la de la barra — `LandingCraftTest` lo
   vigila desde P5, y esta hoja lo reintrodujo al heredarlo de la maqueta del preview. */
.r-body h2 { font-size: 25px; line-height: 1.25; margin: 0 0 14px; text-wrap: balance; }
.r-body p, .r-body li { font-size: 16px; line-height: 1.7; color: var(--color-text-secondary); text-wrap: pretty; }
.r-body p { margin: 0 0 14px; }
.r-body a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ── kit de piezas ─────────────────────────────────────────────────────── */
.r-callout, .r-resumen { margin: 20px 0 0; padding: 18px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.r-callout p:last-child, .r-resumen p:last-child { margin-bottom: 0; }
.r-callout b, .r-resumen h2 { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.r-nota { border-left: 3px solid var(--color-primary); }
.r-importante { background: var(--color-warning-light); border-color: var(--color-warning); }
.r-callout-src, .r-source { display: block; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.r-callout-src { margin: 8px 0 0; }
.r-body .r-source { margin-top: 18px; }

.r-pasos { padding-left: 24px; margin: 8px 0 20px; }
.r-pasos li { padding: 6px 0 6px 6px; }
.r-pasos li::marker { color: var(--color-primary); font-weight: 700; }

.r-tabla { overflow-x: auto; border: 1px solid var(--table-border); border-radius: var(--radius-lg); margin-top: 18px; }
.r-tabla table { width: 100%; min-width: 510px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.r-tabla th, .r-tabla td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--table-border); vertical-align: top; }
.r-tabla thead th { background: var(--table-header-bg); }
.r-tabla td { color: var(--color-text-secondary); }
.r-tabla tbody tr:last-child td { border-bottom: 0; }

/* ── figura: una sola imagen para los dos idiomas, rótulos por HTML ────── */
.r-figura { margin: 22px 0 0; }
.r-figura-lienzo { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-sunken); }
.r-figura-lienzo img { display: block; width: 100%; height: auto; }
.r-figura-rotulos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; counter-reset: rotulo; }
.r-rotulo { position: absolute; counter-increment: rotulo; font-size: 11px; line-height: 1.25; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.r-rotulo::before { content: counter(rotulo) ". "; color: var(--color-primary); }
/* Medidos sobre el propio WebP (1 653 x 1 450 antes de escalar), no repartidos a ojo: los seis
   bloques del CEP no van apilados, van en las dos columnas del documento. Cada rótulo ocupa el
   ANCHO ENTERO de la columna de ETIQUETAS de su bloque y se detiene donde empieza la de VALORES
   —medida por color de tinta: 554, 1 241, 427 y 1 210 px según el bloque—, así que sustituye la
   etiqueta del documento en vez de partirla y dejar medias palabras asomando. El del sello flota
   sobre el papel en blanco que hay encima de su encabezado, que ahí sí lo hay.
   El de la clave se ancla por ABAJO y no por arriba: en anchos intermedios «Clave de rastreo» se
   parte en dos renglones, y creciendo hacia arriba se queda dentro de su caja en vez de salirse. */
.r-rotulo-0 { top: 14.3%;    left: 3.4%;  width: 29.5%; }  /* fecha y hora  — caja de pago, izquierda */
.r-rotulo-1 { bottom: 71.1%; left: 52.6%; width: 21.9%; }  /* clave         — al ras del fondo de su caja */
.r-rotulo-2 { top: 35.5%;    left: 3.4%;  width: 21.8%; }  /* emisor        — columna del Ordenante */
.r-rotulo-3 { top: 35.5%;    left: 51.3%; width: 21.3%; }  /* receptor      — columna del Beneficiario */
.r-rotulo-4 { top: 14.3%;    left: 52.6%; width: 21.9%; }  /* monto         — caja de pago, derecha */
.r-rotulo-5 { top: 83.4%;    left: 3.4%;  width: 21.8%; }  /* sello digital — sobre su encabezado */
.r-figura-label { font-weight: 700; color: var(--color-text-primary); }
.r-figura figcaption { font-size: 13px; line-height: 1.6; margin-top: 10px; color: var(--color-text-secondary); }

/* ── la captura real de la demo, en la sección de producto ─────────────── */
.r-demo { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: center; margin: 22px 0 0; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.r-demo-img { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.r-demo-img img { display: block; width: 100%; height: auto; }
.r-demo figcaption { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); }
.r-demo .eyebrow { display: block; font-size: 11px; margin-bottom: 12px; }
.r-demo-title { display: block; font-size: 21px; line-height: 1.3; margin-bottom: 12px; color: var(--color-text-primary); }
.r-demo-body { display: block; margin-bottom: 12px; }
.r-demo a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 5px; }

/* ── preguntas frecuentes, sin JavaScript ──────────────────────────────── */
.r-body details { border-top: 1px solid var(--color-border); padding: 17px 0; }
.r-body details:last-of-type { border-bottom: 1px solid var(--color-border); }
.r-body summary { cursor: pointer; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--color-text-primary); }
.r-body details p { margin: 14px 0 0; }

/* ── resumen de cierre ─────────────────────────────────────────────────── */
.r-resumen { border-left: 3px solid var(--color-primary); }
.r-resumen ul { padding-left: 20px; margin: 0; }
.r-resumen li { margin: 7px 0; font-size: 16px; line-height: 1.7; color: var(--color-text-secondary); }

/* ── glosario ──────────────────────────────────────────────────────────── */
.r-term + .r-term { margin-top: 36px; }
.r-term h2 { font-size: 22px; }
.r-term-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; margin: 0; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .r-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* El índice deja de ser una lista suelta que se envuelve —se leía como un montón de etiquetas
     sueltas y se comía la primera pantalla— y pasa a una caja compacta: mismo contenido, tipografía
     menor y renglones apretados, que es como se lee un «en esta guía» y no como una nube de
     enlaces. Dos columnas se probaron y se descartaron: a 375 px los títulos largos parten en tres
     renglones y queda peor que en una. */
  .r-toc { position: static; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); font-size: 13px; }
  .r-toc .r-toc-h { margin: 0 0 8px; }
  .r-toc a { padding: 3px 0; }
  .r-page .hero { padding: 40px 0 32px; }
  .r-body { max-width: none; }
}
@media (max-width: 699px) {
  .r-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .r-tile, .r-grid > .r-tile:only-child { padding: 20px 22px; }
  .r-grid > .r-tile:only-child h3 { font-size: 21px; }
  .r-body h2 { font-size: 23px; }
  .r-page .sec { padding: 30px 0 42px; }
  .r-callout, .r-resumen { padding: 16px; }
  .r-page .hero .lead { font-size: 18px; }
  .r-demo { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .r-demo-img { width: min(100%, 300px); margin: auto; }
  /* En un teléfono los rótulos encima de la figura se pisan entre sí: pasan a lista debajo, que
     es lo que hacen legible una hoja carta reducida a 340 px. */
  .r-figura-rotulos { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  /* Y sueltan el ancho y el anclaje de la banda: fuera de la figura ya no cubren una columna del
     documento, y heredarlos partía «Clave de rastreo» en tres renglones. */
  .r-rotulo { position: static; width: auto; bottom: auto; }
}
@media print {
  .r-toc, .r-links, .r-crumb { display: none; }
  .r-layout { display: block; }
  .r-body { max-width: none; }
  .r-body details { break-inside: avoid; }
}