/* ══════════════════════════════════════════════════════════════════════
Sistema de diseño A+C · tokens y componentes compartidos
Portada y página de la Red de Investigación Docentes 2.0.
Todo lleva el prefijo rd- (clases) y --rd- (variables) para no chocar con
la cabecera (.site-header, .nav-*, .dropdown-*, .mobile-*) ni con el pie
(.d20ftr-*). Fuentes: Fraunces (títulos) y Manrope (texto), cargadas con
un a Google Fonts en el de la página.
Regla de cascada: los reinicios usan :where(), que no suma especificidad,
así que cualquier componente gana a los reinicios sin necesidad de
subir la especificidad ni de usar !important.
══════════════════════════════════════════════════════════════════════ */
/* Tipografías de reserva con la MISMA anchura que las web (medida en la página real): mientras Fraunces y Manrope se
descargan, el texto ocupa el mismo espacio y el cambio no mueve la página (CLS por font-display: swap). */
@font-face { font-family: 'Manrope Reserva'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); font-weight: 100 599; size-adjust: 101.4%; }
@font-face { font-family: 'Manrope Reserva'; src: local('Arial Bold'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 600 900; size-adjust: 100%; }
/* Fraunces: la reserva se declara por fuente, cada una con su corrección (medidas en la página real). Se prefiere Georgia si existe. */
@font-face { font-family: 'Fraunces Reserva'; src: local('DejaVu Serif'); font-weight: 100 599; size-adjust: 95.5%; }
@font-face { font-family: 'Fraunces Reserva'; src: local('DejaVu Serif Bold'); font-weight: 600 900; size-adjust: 83.8%; }
@font-face { font-family: 'Fraunces Reserva'; src: local('Times New Roman'); font-weight: 100 599; size-adjust: 100%; }
@font-face { font-family: 'Fraunces Reserva'; src: local('Times New Roman Bold'); font-weight: 600 900; size-adjust: 100%; }
@font-face { font-family: 'Fraunces Reserva'; src: local('Georgia'); font-weight: 100 599; size-adjust: 100%; }
@font-face { font-family: 'Fraunces Reserva'; src: local('Georgia Bold'); font-weight: 600 900; size-adjust: 100%; }
:root {
/* ── Color: berenjena medido en el canal de YouTube ── */
--rd-b-950: #150C17;
--rd-b-900: #1C1220;
--rd-b-850: #241829;
--rd-b-800: #2D1F2F;
--rd-b-700: #3A293D;
--rd-b-600: #453346;
--rd-resplandor: #4A364B;
--rd-lavanda: #C9B6E4;
--rd-violeta: #8B5FBF;
--rd-oro: #F0B424;
--rd-oro-claro: #FFD66B;
--rd-oro-tinta: #6B4600;
--rd-burdeos: #79122F;
--rd-crema: #FBF5EA;
--rd-papel: #F6F1E8;
--rd-papel-hondo: #EDE6D9;
--rd-blanco: #FFFFFF;
--rd-lavanda-papel: #E7DFE6;
--rd-lavanda-borde: #CFC2CE;
/* texto sobre claro / sobre oscuro */
--rd-t-cla: #241828;
--rd-t-cla-2: #584A5C;
--rd-t-osc: #FBF5EA;
--rd-t-osc-2: #D8CBDB;
--rd-t-osc-3: #AC9DB1;
--rd-borde: #DCD2C8;
--rd-borde-osc: rgba(251, 245, 234, .16);
/* ── Tipografía ── */
--rd-display: 'Fraunces', 'Fraunces Reserva', Georgia, 'Times New Roman', serif;
--rd-texto: 'Manrope', 'Manrope Reserva', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* ── Espaciado (escala de 4 y 8) ── */
--rd-e1: 4px; --rd-e2: 8px; --rd-e3: 12px; --rd-e4: 16px; --rd-e5: 24px;
--rd-e6: 32px; --rd-e7: 48px; --rd-e8: 64px; --rd-e9: 96px; --rd-e10: 128px;
/* ── Radios y sombras: el sistema es casi recto ── */
--rd-r1: 2px;
--rd-r2: 4px;
--rd-r-pastilla: 999px;
--rd-sombra-1: 0 2px 0 rgba(36, 24, 40, .10);
--rd-sombra-2: 0 16px 32px rgba(36, 24, 40, .18);
--rd-sombra-3: 0 26px 52px rgba(0, 0, 0, .45);
/* ── Retícula ── */
--rd-ancho: 1200px;
--rd-margen: 24px;
--rd-cab: 86px; /* altura de la cabecera sólida, en todos los anchos */
/* ── Contexto: lo cambian las superficies oscuras ── */
--rd-tx: var(--rd-t-cla);
--rd-tx-2: var(--rd-t-cla-2);
--rd-rot: var(--rd-oro-tinta);
--rd-enl: var(--rd-burdeos);
--rd-filete: var(--rd-borde);
--rd-filete-fuerte: var(--rd-b-850);
}
/* 86 px también en móvil: en estado sólido, .site-header.scrolled (86 px) gana por
especificidad a la regla móvil de 70 px de la cabecera. Medido con Playwright. */
@media (max-width: 760px) { :root { --rd-margen: 20px; --rd-e9: 64px; --rd-e10: 80px; } }
/* ── Base ─────────────────────────────────────────────────────────────── */
.rd, .rd *, .rd *::before, .rd *::after { box-sizing: border-box; }
.rd {
margin: 0;
background: var(--rd-papel);
color: var(--rd-tx);
font: 17px/1.65 var(--rd-texto);
overflow-wrap: break-word;
}
@media (max-width: 760px) { .rd { font-size: 16px; } }
:where(.rd) :where(h1, h2, h3, h4) {
margin: 0; font-family: var(--rd-display); line-height: 1.08;
letter-spacing: -.015em; text-wrap: balance; text-transform: none;
}
:where(.rd) :where(p, figure, blockquote, dl, dd) { margin: 0; }
:where(.rd) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.rd) :where(a) { color: inherit; }
:where(.rd) :where(img) { max-width: 100%; height: auto; }
.rd :focus-visible { outline: 3px solid var(--rd-oro); outline-offset: 3px; border-radius: 3px; }
.rd [id] { scroll-margin-top: calc(var(--rd-cab) + 24px); }
/* La cabecera es fija: el primer bloque de la página necesita este hueco. */
.rd-tras-cabecera { padding-top: var(--rd-cab); }
.rd-c {
max-width: var(--rd-ancho);
margin-left: auto; margin-right: auto;
padding-left: var(--rd-margen); padding-right: var(--rd-margen);
}
.rd-oculto {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ── Secciones y superficies ──────────────────────────────────────────── */
.rd-sec { padding-top: var(--rd-e9); padding-bottom: var(--rd-e9); }
.rd-sec--compacta { padding-top: var(--rd-e8); padding-bottom: var(--rd-e8); }
.rd-sup-crema { background: var(--rd-crema); }
.rd-sup-papel { background: var(--rd-papel); }
.rd-sup-blanco { background: var(--rd-blanco); }
/* escalón entre el crema de lectura y el berenjena */
.rd-sup-lavanda { background: var(--rd-lavanda-papel); --rd-filete: var(--rd-lavanda-borde); }
.rd-sup-berenjena,
.rd-sup-berenjena-honda {
color: var(--rd-t-osc);
--rd-tx: var(--rd-t-osc);
--rd-tx-2: var(--rd-t-osc-2);
--rd-rot: var(--rd-oro);
--rd-enl: var(--rd-oro-claro);
--rd-filete: var(--rd-borde-osc);
--rd-filete-fuerte: var(--rd-oro);
}
.rd-sup-berenjena { background: var(--rd-b-850); }
.rd-sup-berenjena-honda {
position: relative; isolation: isolate;
background:
radial-gradient(52% 58% at 72% 40%, rgba(88, 58, 104, .70) 0%, rgba(88, 58, 104, 0) 70%),
radial-gradient(40% 46% at 16% 78%, rgba(121, 18, 47, .28) 0%, rgba(121, 18, 47, 0) 72%),
linear-gradient(168deg, var(--rd-b-850) 0%, var(--rd-b-900) 44%, var(--rd-b-950) 100%);
}
/* ── Tipografía ───────────────────────────────────────────────────────── */
.rd-rot {
font: 700 12px/1.3 var(--rd-texto); letter-spacing: .16em; text-transform: uppercase;
color: var(--rd-rot);
}
.rd-h1 { font-weight: 800; font-size: clamp(34px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -.028em; color: var(--rd-tx); }
.rd-h1 em, .rd-h2 em { font-style: normal; color: var(--rd-enl); }
.rd-h1 .rd-h1__l {
display: block; margin-top: .18em; font-weight: 400; font-style: italic;
font-size: .62em; letter-spacing: -.01em; color: var(--rd-tx-2);
}
.rd-h2 { font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); color: var(--rd-tx); }
.rd-h3 { font: 700 20px/1.25 var(--rd-texto); letter-spacing: -.005em; color: var(--rd-tx); }
.rd-bajada { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--rd-tx-2); max-width: 27.6em; }
.rd-texto { font-size: 16.5px; line-height: 1.65; color: var(--rd-tx-2); max-width: 37em; }
.rd-texto + .rd-texto { margin-top: var(--rd-e4); }
.rd-nota { font-size: 13.5px; line-height: 1.5; color: var(--rd-tx-2); }
/* frase grande en serif: para abrir una sección sin titular convencional */
.rd-frase {
font: 600 clamp(23px, 2.6vw, 32px)/1.22 var(--rd-display);
letter-spacing: -.01em; color: var(--rd-tx); max-width: 28ch;
}
/* Cabecera de sección: rótulo, título y bajada */
.rd-cab { display: flex; flex-direction: column; gap: var(--rd-e2); max-width: 37em; margin-bottom: var(--rd-e7); }
.rd-cab p:not(.rd-rot) { font-size: 16.5px; color: var(--rd-tx-2); }
/* variante: el rótulo cruza con un filete hasta el borde */
.rd-cab-regla { display: flex; align-items: center; gap: var(--rd-e4); margin-bottom: var(--rd-e3); }
.rd-cab-regla .rd-rot { flex: none; }
.rd-cab-regla::after { content: ""; flex: 1; height: 1px; background: var(--rd-filete); }
/* ── Botones y enlaces ────────────────────────────────────────────────── */
.rd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--rd-e2);
min-height: 50px; padding: 0 26px; border-radius: var(--rd-r1);
font: 700 15px/1.2 var(--rd-texto); text-align: center; text-decoration: none;
border: 2px solid transparent; cursor: pointer;
transition: background-color .16s, color .16s, border-color .16s;
}
.rd-btn--oro { background: var(--rd-oro); color: var(--rd-t-cla); }
.rd-btn--oro:hover { background: var(--rd-oro-claro); }
.rd-btn--tinta { background: var(--rd-b-850); color: var(--rd-crema); }
.rd-btn--tinta:hover { background: var(--rd-b-600); }
/* contorno: toma el color del contexto (tinta en claro, crema en oscuro) */
.rd-btn--linea { border-color: currentColor; color: var(--rd-tx); background: transparent; }
.rd-btn--linea:hover { background: var(--rd-b-850); border-color: var(--rd-b-850); color: var(--rd-crema); }
.rd-sup-berenjena .rd-btn--linea:hover, .rd-sup-berenjena-honda .rd-btn--linea:hover,
.rd-tarjeta--osc .rd-btn--linea:hover { background: var(--rd-crema); border-color: var(--rd-crema); color: var(--rd-b-850); }
.rd-enl {
display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
font: 700 15px/1.3 var(--rd-texto); color: var(--rd-enl); text-decoration: none;
border-bottom: 2px solid transparent;
}
.rd-enl:hover { border-bottom-color: var(--rd-oro); }
/* fila de acciones; en móvil los botones ocupan el ancho */
.rd-acc { display: flex; flex-wrap: wrap; gap: var(--rd-e3) var(--rd-e5); align-items: center; }
.rd-salida {
display: flex; flex-wrap: wrap; gap: var(--rd-e3) var(--rd-e5); align-items: center;
margin-top: var(--rd-e6); padding-top: var(--rd-e5); border-top: 1px solid var(--rd-filete);
}
@media (max-width: 760px) { .rd-acc .rd-btn, .rd-salida .rd-btn { width: 100%; } }
/* ── Tarjeta / superficie ─────────────────────────────────────────────── */
.rd-tarjeta {
display: flex; flex-direction: column; gap: var(--rd-e2); min-width: 0;
padding: var(--rd-e5); background: var(--rd-blanco); color: var(--rd-t-cla);
border: 1px solid var(--rd-lavanda-borde);
--rd-tx: var(--rd-t-cla); --rd-tx-2: var(--rd-t-cla-2); --rd-rot: var(--rd-oro-tinta);
--rd-enl: var(--rd-burdeos); --rd-filete: var(--rd-lavanda-borde);
}
.rd-tarjeta--papel { background: var(--rd-papel); border-color: var(--rd-borde); }
.rd-tarjeta--filete { border-top: 3px solid var(--rd-burdeos); }
.rd-tarjeta--osc {
background: var(--rd-b-800); color: var(--rd-t-osc); border-color: var(--rd-borde-osc);
--rd-tx: var(--rd-t-osc); --rd-tx-2: var(--rd-t-osc-2); --rd-rot: var(--rd-oro);
--rd-enl: var(--rd-oro-claro); --rd-filete: var(--rd-borde-osc);
}
.rd-tarjeta p:not(.rd-rot) { font-size: 15px; line-height: 1.55; color: var(--rd-tx-2); }
.rd-tarjeta .rd-acc { margin-top: auto; padding-top: var(--rd-e3); }
/* ── Rejillas: siempre encogen (minmax con 0 o con min(100%, …)) ────────── */
.rd-rejilla { display: grid; gap: var(--rd-e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rd-dos { display: grid; gap: var(--rd-e8); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
@media (max-width: 1040px) { .rd-dos { grid-template-columns: minmax(0, 1fr); gap: var(--rd-e7); } }
/* ── Aviso destacado (condición de no garantía) ───────────────────────────
Marcado recomendado:
*/
.rd-aviso {
position: relative; display: flex; flex-direction: column; gap: var(--rd-e2);
padding: var(--rd-e5) var(--rd-e5) var(--rd-e5) calc(var(--rd-e5) + 6px);
background: var(--rd-blanco); color: var(--rd-t-cla);
border: 1px solid var(--rd-lavanda-borde); border-left: 0;
max-width: 72ch;
}
.rd-aviso::before {
content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 6px;
background: linear-gradient(180deg, var(--rd-oro), var(--rd-burdeos));
}
.rd-aviso__et {
display: flex; align-items: center; gap: var(--rd-e2);
font: 800 12px/1.3 var(--rd-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rd-burdeos);
}
.rd-aviso__et::before {
content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
background: var(--rd-burdeos); color: var(--rd-crema); font: 800 12px/1 var(--rd-texto); letter-spacing: 0;
}
.rd-aviso__tx { font-size: 16px; line-height: 1.6; color: var(--rd-t-cla); }
.rd-aviso__tx + .rd-aviso__tx { margin-top: var(--rd-e2); }
/* variante sobre superficie oscura */
.rd-aviso--osc { background: var(--rd-b-800); color: var(--rd-t-osc); border-color: var(--rd-borde-osc); }
.rd-aviso--osc .rd-aviso__et { color: var(--rd-oro); }
.rd-aviso--osc .rd-aviso__et::before { background: var(--rd-oro); color: var(--rd-b-850); }
.rd-aviso--osc .rd-aviso__tx { color: var(--rd-t-osc); }
/* variante compacta, para acompañar un enlace o una lista */
.rd-aviso--compacto { padding-top: var(--rd-e4); padding-bottom: var(--rd-e4); }
.rd-aviso--compacto .rd-aviso__tx { font-size: 14.5px; }
/* ── Listas ───────────────────────────────────────────────────────────── */
.rd-lista { display: grid; gap: var(--rd-e3); }
.rd-lista > li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.55; color: var(--rd-tx); }
.rd-lista > li::before {
content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
background: var(--rd-oro); transform: rotate(45deg);
}
.rd-lista > li b { font-weight: 700; }
.rd-lista--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-e3) var(--rd-e6); }
@media (max-width: 760px) { .rd-lista--dos { grid-template-columns: minmax(0, 1fr); } }
/* lo que NO incluye: marca de exclusión, sin el oro */
.rd-lista--no > li::before {
width: 10px; height: 2px; top: .8em; transform: none; background: var(--rd-burdeos);
}
.rd-sup-berenjena .rd-lista--no > li::before,
.rd-sup-berenjena-honda .rd-lista--no > li::before { background: var(--rd-oro-claro); }
/* ── Pasos encadenados (p. ej. admisión, selección, aceptación) ─────────── */
.rd-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rd-e6); counter-reset: rdp; }
.rd-pasos > li { position: relative; counter-increment: rdp; padding-top: var(--rd-e7); min-width: 0; }
.rd-pasos > li::before {
content: counter(rdp); position: absolute; left: 0; top: 0;
font: 400 34px/1 var(--rd-display); color: var(--rd-enl); font-variant-numeric: tabular-nums;
}
.rd-pasos > li::after {
content: ""; position: absolute; left: 40px; right: calc(-1 * var(--rd-e6) + 8px); top: 17px;
height: 2px; background: var(--rd-filete-fuerte); opacity: .5;
}
.rd-pasos > li:last-child::after { display: none; }
.rd-pasos h3 { font: 700 18px/1.3 var(--rd-texto); color: var(--rd-tx); }
.rd-pasos p { margin-top: var(--rd-e2); font-size: 15px; line-height: 1.55; color: var(--rd-tx-2); }
@media (max-width: 760px) {
.rd-pasos { grid-template-columns: minmax(0, 1fr); gap: var(--rd-e5); }
.rd-pasos > li { padding: 0 0 0 52px; }
.rd-pasos > li::after { left: 16px; right: auto; top: 44px; bottom: calc(-1 * var(--rd-e5) + 6px); width: 2px; height: auto; }
}
/* ── Ficha de datos (definiciones) ────────────────────────────────────── */
.rd-ficha { border-top: 1px solid var(--rd-filete); }
.rd-ficha > div {
display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--rd-e4);
padding: var(--rd-e3) 0; border-bottom: 1px solid var(--rd-filete);
}
.rd-ficha dt { font: 700 12px/1.6 var(--rd-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-tx-2); }
.rd-ficha dd { font-size: 15px; line-height: 1.55; color: var(--rd-tx); }
@media (max-width: 760px) { .rd-ficha > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* ── Preguntas frecuentes (details/summary, sin JS) ──────────────────── */
.rd-preguntas { border-top: 2px solid var(--rd-filete-fuerte); }
.rd-preguntas details { border-bottom: 1px solid var(--rd-filete); }
.rd-preguntas summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--rd-e4);
min-height: 56px; padding: var(--rd-e3) 0; cursor: pointer; list-style: none;
font: 700 17px/1.35 var(--rd-texto); color: var(--rd-tx);
}
.rd-preguntas summary::-webkit-details-marker { display: none; }
.rd-preguntas summary::after {
content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
border-right: 2px solid var(--rd-enl); border-bottom: 2px solid var(--rd-enl);
transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.rd-preguntas details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.rd-preguntas summary:hover { color: var(--rd-enl); }
.rd-preguntas details > div { padding: 0 0 var(--rd-e5); max-width: 66ch; font-size: 15.5px; line-height: 1.6; color: var(--rd-tx-2); }
@media (prefers-reduced-motion: reduce) { .rd-preguntas summary::after { transition: none; } }
/* ══════════════════════════════════════════════════════════════════════
Páginas interiores de www (21 sep 2026). Mismo sistema, más piezas.
══════════════════════════════════════════════════════════════════════ */
body.rd-cuerpo { margin: 0; background: var(--rd-papel); }
.rd-saltar { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 12px 16px; background: var(--rd-oro); color: var(--rd-t-cla); font: 700 15px var(--rd-texto); }
.rd-saltar:focus { left: 12px; top: 12px; }
/* ── Cabecera de página: rótulo, título, bajada y migas, sobre berenjena ── */
.rd-pag-cab { padding-top: calc(var(--rd-cab) + var(--rd-e7)); padding-bottom: var(--rd-e8); }
.rd-pag-cab .rd-c { display: grid; gap: var(--rd-e3); }
.rd-pag-cab .rd-h1 { max-width: 15em; } /* em y no ch: el ancho no cambia cuando la tipografía web sustituye a la de reserva (CLS) */
.rd-pag-cab .rd-bajada { max-width: 34.8em; }
.rd-pag-cab--dos .rd-c { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--rd-e8); align-items: end; }
@media (max-width: 1040px) { .rd-pag-cab--dos .rd-c { grid-template-columns: minmax(0, 1fr); gap: var(--rd-e6); } }
.rd-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 600 13px/1.4 var(--rd-texto); color: var(--rd-tx-2); }
.rd-migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rd-tx-2); text-decoration: none; }
.rd-migas a:hover { color: var(--rd-enl); }
.rd-migas [aria-current] { color: var(--rd-tx); }
/* ── Vías: filas editoriales (no tarjetas iguales) ── */
.rd-vias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--rd-e8); border-top: 2px solid var(--rd-filete-fuerte); }
.rd-vias > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--rd-e4); padding: var(--rd-e5) 0; border-bottom: 1px solid var(--rd-filete); }
.rd-vias__n { font: 400 30px/1 var(--rd-display); color: var(--rd-enl); font-variant-numeric: tabular-nums; }
.rd-vias h3 { font: 700 20px/1.25 var(--rd-texto); color: var(--rd-tx); }
.rd-vias p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--rd-tx-2); }
.rd-vias .rd-acc { margin-top: var(--rd-e3); }
@media (max-width: 760px) { .rd-vias { grid-template-columns: minmax(0, 1fr); } .rd-vias > li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--rd-e3); } }
/* ── Filas de tabla (catálogos) ── */
.rd-filas { border-top: 2px solid var(--rd-filete-fuerte); }
.rd-fila { display: grid; grid-template-columns: minmax(0, 1fr) 170px 100px 140px; gap: var(--rd-e4); align-items: baseline;
padding: var(--rd-e4) 0; border-bottom: 1px solid var(--rd-filete); color: inherit; text-decoration: none; }
.rd-fila strong { font: 700 18px/1.3 var(--rd-texto); }
.rd-fila small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--rd-tx-2); }
.rd-fila__dato { font-size: 14px; color: var(--rd-tx-2); }
.rd-fila__ir { font: 700 13.5px/1.2 var(--rd-texto); color: var(--rd-enl); text-align: right; }
a.rd-fila:hover { background: var(--rd-crema); } a.rd-fila:hover strong { color: var(--rd-enl); }
@media (max-width: 760px) { .rd-fila { grid-template-columns: minmax(0, 1fr) auto; } .rd-fila__dato:nth-of-type(2), .rd-fila__ir { display: none; } }
/* ── Pastillas de filtro (enlaces, sin JS) ── */
.rd-pastillas { display: flex; flex-wrap: wrap; gap: var(--rd-e2); }
.rd-pastillas a, .rd-pastillas span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--rd-e4);
border: 1px solid var(--rd-filete); background: var(--rd-blanco); color: var(--rd-t-cla); font: 700 14px/1.2 var(--rd-texto); text-decoration: none; }
.rd-pastillas a:hover, .rd-pastillas [aria-current] { background: var(--rd-b-850); border-color: var(--rd-b-850); color: var(--rd-crema); }
/* ── Cifras ── */
.rd-cifras { display: flex; flex-wrap: wrap; gap: var(--rd-e5) var(--rd-e7); }
.rd-cifras div { display: flex; flex-direction: column; gap: 2px; }
.rd-cifras b { font: 400 clamp(30px, 3.4vw, 44px)/1 var(--rd-display); color: var(--rd-enl); font-variant-numeric: tabular-nums; }
.rd-cifras span { font-size: 13.5px; color: var(--rd-tx-2); }
/* ── Destacado: medio + texto ── */
.rd-destacado { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--rd-e7); align-items: center; }
.rd-destacado img { display: block; width: 100%; height: auto; box-shadow: var(--rd-sombra-2); }
@media (max-width: 1040px) { .rd-destacado { grid-template-columns: minmax(0, 1fr); gap: var(--rd-e5); } }
/* ── Galería ── */
.rd-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--rd-e4); }
.rd-galeria a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.rd-galeria img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--rd-papel-hondo); }
.rd-galeria span { font: 700 13.5px/1.35 var(--rd-texto); }
.rd-galeria a:hover span { color: var(--rd-enl); }
/* ── Índice de la página ── */
.rd-indice { display: flex; flex-wrap: wrap; gap: 0 var(--rd-e5); padding: var(--rd-e3) 0; border-bottom: 1px solid var(--rd-filete); }
.rd-indice a { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.2 var(--rd-texto); color: var(--rd-enl); text-decoration: none; }
.rd-indice a:hover { box-shadow: inset 0 -2px 0 var(--rd-oro); }
/* ── Formularios ── */
.rd-form { display: grid; gap: var(--rd-e4); max-width: 640px; }
.rd-campo { display: grid; gap: 6px; }
.rd-campo label, .rd-campo legend { font: 700 14px/1.3 var(--rd-texto); color: var(--rd-tx); }
.rd-campo input, .rd-campo select, .rd-campo textarea {
width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--rd-lavanda-borde); border-radius: var(--rd-r1);
background: var(--rd-blanco); color: var(--rd-t-cla); font: 16px/1.4 var(--rd-texto); }
.rd-campo textarea { min-height: 140px; resize: vertical; }
.rd-campo input:focus, .rd-campo select:focus, .rd-campo textarea:focus { outline: 3px solid var(--rd-oro); outline-offset: 1px; border-color: var(--rd-b-850); }
.rd-campo small { font-size: 13px; color: var(--rd-tx-2); }
.rd-campo--error input, .rd-campo--error textarea { border-color: var(--rd-burdeos); }
.rd-casilla { display: flex; gap: var(--rd-e3); align-items: flex-start; font-size: 15px; line-height: 1.5; }
.rd-casilla input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
/* ── Cita ── */
.rd-cita { padding-left: var(--rd-e5); border-left: 3px solid var(--rd-oro); font: 400 italic clamp(19px, 2vw, 24px)/1.45 var(--rd-display); color: var(--rd-tx); max-width: 50ch; }
.rd-cita cite { display: block; margin-top: var(--rd-e3); font: 600 14px/1.4 var(--rd-texto); font-style: normal; color: var(--rd-tx-2); }
/* ── Prosa larga (documentos legales, guías) ── */
.rd-prosa { max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--rd-tx); }
.rd-prosa > * + * { margin-top: 1em; }
.rd-prosa h2 { font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--rd-display); margin-top: 1.8em; }
.rd-prosa h3 { font: 700 19px/1.3 var(--rd-texto); margin-top: 1.5em; }
.rd-prosa ul, .rd-prosa ol { padding-left: 1.3em; list-style: revert; }
.rd-prosa li + li { margin-top: .35em; }
.rd-prosa a { color: var(--rd-burdeos); text-underline-offset: 3px; }
.rd-prosa table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rd-prosa th, .rd-prosa td { padding: 8px 10px; border-bottom: 1px solid var(--rd-filete); text-align: left; vertical-align: top; }