/* reclamatarjetasrevolving.es · base común v1.8 + piel · todo bajo .rtr · generado, no editar a mano */
/* ==========================================================================
   BASE COMÚN · v1.7.3 · 05/11/2026
   Sistema de diseño compartido por todas las webs de la cartera.

   Misma estructura por dentro, distinta piel por fuera:
   - Este archivo NO se edita para una web concreta.
   - Cada web carga después su piel (css/piel.css, copiada de
     pieles/_plantilla-piel.css), que solo sobrescribe tokens de :root.
   - Si a una web le falta algo, se añade aquí, se sube la versión y se
     anota en README.md.

   Índice
   1. Tokens (piel neutra por defecto)
   2. Reinicio y elementos
   3. Superficies del navegador (selección, foco, barras, números)
   4. Maquetación: contenedor, secciones, pila, rejilla
   5. Tipografía de lectura (.prosa)
   6. Iconos y utilidades
   7. Cabecera, navegación y migas de pan
   8. Portada (hero)
   9. Botones
   10. Llamada a la acción, «qué pasa después» y confianza
   11. Formulario «te llamamos»
   12. Precios
   13. Preguntas frecuentes
   14. Notas y fuentes citadas
   15. Autor, verificación y metadatos de artículo
   16. Servicios, zonas y casos
   17. Herramienta / calculadora
   18. Pie, banner de cookies y barra de contacto móvil
   19. Componentes opcionales de firma: cartón y tablero (v1.5)
   20. Movimiento reducido e impresión
   21. Página larga de servicio: portada con panel, barra de secciones,
       tarjetas tintadas, productos, línea de tiempo, dos columnas, dibujos,
       desplegables de la cabecera y pie en columnas (v1.7)
   ========================================================================== */


/* 1. TOKENS ================================================================
   Piel neutra: sirve para la galería y como red de seguridad. Cada web la
   sustituye entera en su piel. Contraste comprobado (WCAG 2.2 AA):
   texto 18:1, texto suave 7,9:1, marca sobre blanco 8,7:1, borde de
   campo 3,6:1, foco 5,8:1.                                                  */

:root {
  /* Color · superficies */
  --color-fondo: #f5f6f8;
  --color-superficie: #ffffff;
  --color-superficie-alt: #eceff3;
  --color-texto: #12161b;
  --color-texto-suave: #48525d;
  --color-linea: #d9dee4;
  --color-linea-campo: #7d8894;

  /* Color · marca */
  --color-marca: #1e4e79;
  --color-marca-intensa: #163a5b;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e8eff6;
  --color-enlace: var(--color-marca);
  --color-foco: #1d5fd1;
  --color-seleccion: color-mix(in srgb, var(--color-marca) 20%, transparent);

  /* Color · banda oscura (pie, llamadas fuertes) */
  --color-banda: #12161b;
  --color-sobre-banda: #eef1f4;
  --color-sobre-banda-suave: #b4bcc6;

  /* Color · estados (también el semáforo de las herramientas) */
  --color-ok: #1b6b3c;
  --color-ok-tenue: #e6f3ea;
  --color-aviso: #8a4b00;
  --color-aviso-tenue: #fdf1df;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Color · luces de las herramientas tipo semáforo (sobre la banda oscura) */
  --color-luz-apagada: #3a4048;
  --color-luz-verde: #1fcb74;
  --color-luz-ambar: #ffb020;
  --color-luz-roja: #ff4d4f;
  --tam-luz: 0.85rem;

  /* Color · banda alterna de secciones (.seccion--alt); por defecto, blanco (v1.5) */
  --color-seccion-alt: var(--color-superficie);

  /* Color · cartón de etiqueta (componentes opcionales .carton y .tablero, v1.5) */
  --color-carton: #e3d6bf;
  --color-carton-oscuro: #c4b08f;
  --color-sobre-carton: #2a2117;

  /* Color · tintes suaves y estrella (página larga de servicio, v1.7).
     Fondos de tarjetas, paneles, píldoras y dibujos. El texto que va
     encima es siempre --color-texto o --color-texto-suave. */
  --color-tinte-1: #e8eff6;
  --color-tinte-2: #fdf1df;
  --color-tinte-3: #e6f3ea;
  --color-tinte-4: #eeecf6;
  --color-estrella: #e0a100;

  /* Tipografía */
  --fuente-titulos: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --peso-normal: 400;
  --peso-fuerte: 600;
  --peso-titulos: 700;
  --tracking-titulos: -0.018em;
  --interlineado: 1.6;
  --interlineado-titulos: 1.15;

  /* Escala tipográfica fluida (360 px → 1280 px) */
  --texto-xs: 0.8125rem;
  --texto-s: 0.9375rem;
  --texto-m: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --texto-l: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --titulo-4: 1.125rem;
  --titulo-3: clamp(1.2rem, 1.12rem + 0.36vw, 1.4rem);
  --titulo-2: clamp(1.5rem, 1.33rem + 0.76vw, 2rem);
  --titulo-1: clamp(2rem, 1.62rem + 1.7vw, 3rem);
  --titulo-portada: clamp(2.25rem, 1.66rem + 2.6vw, 3.75rem);

  /* Espacio */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-seccion: clamp(3rem, 2.2rem + 3.6vw, 5.5rem);

  /* Forma */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 16px;
  --radio-xl: 24px;
  --radio-boton: 10px;
  --radio-campo: 8px;
  --grosor-linea: 1px;
  --sombra-1: 0 1px 2px rgb(18 22 27 / 0.06), 0 1px 3px rgb(18 22 27 / 0.05);
  --sombra-2: 0 2px 4px rgb(18 22 27 / 0.06), 0 10px 20px -10px rgb(18 22 27 / 0.2);

  /* Maquetación */
  --ancho-pagina: 72rem;
  --ancho-texto: 60ch;
  --margen: clamp(1rem, 0.64rem + 1.6vw, 2rem);
  --alto-cabecera: 4rem;

  /* Movimiento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --duracion: 180ms;

  color-scheme: light;
}


/* 2. REINICIO Y ELEMENTOS ================================================== */

.rtr *,
.rtr *::before,
.rtr *::after {
  box-sizing: border-box;
}

.rtr * {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--esp-5);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.rtr {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.rtr main {
  flex: 1 0 auto;
}

.rtr img,
.rtr picture,
.rtr svg,
.rtr video,
.rtr canvas {
  display: block;
  max-width: 100%;
}

.rtr img {
  height: auto;
}

.rtr input,
.rtr button,
.rtr textarea,
.rtr select {
  font: inherit;
  color: inherit;
}

.rtr button {
  cursor: pointer;
}

.rtr h1,
.rtr h2,
.rtr h3,
.rtr h4 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--tracking-titulos);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rtr h1 {
  font-size: var(--titulo-1);
}

.rtr h2 {
  font-size: var(--titulo-2);
}

.rtr h3 {
  font-size: var(--titulo-3);
  line-height: 1.25;
}

.rtr h4 {
  font-size: var(--titulo-4);
  line-height: 1.3;
}

.rtr p,
.rtr li,
.rtr dd,
.rtr figcaption,
.rtr blockquote {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.rtr a {
  color: var(--color-enlace);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
  transition: color var(--duracion) var(--curva), text-decoration-color var(--duracion) var(--curva);
}

.rtr a:hover {
  text-decoration-thickness: max(2px, 0.125em);
}

.rtr strong,
.rtr b {
  font-weight: var(--peso-fuerte);
}

.rtr small {
  font-size: var(--texto-s);
}

.rtr hr {
  border: 0;
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.rtr [hidden] {
  display: none !important;
}


/* 3. SUPERFICIES DEL NAVEGADOR ============================================= */

.rtr ::selection {
  background: var(--color-seleccion);
  color: inherit;
}

.rtr :focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.rtr :focus:not(:focus-visible) {
  outline: none;
}

.rtr input,
.rtr textarea,
.rtr select {
  caret-color: var(--color-marca);
  accent-color: var(--color-marca);
}

.rtr input[type="checkbox"],
.rtr input[type="radio"] {
  accent-color: var(--color-marca);
}

html {
  scrollbar-color: color-mix(in srgb, var(--color-texto) 32%, transparent) transparent;
}

.rtr table,
.rtr .cifra,
.rtr time {
  font-variant-numeric: tabular-nums;
}

.rtr abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}


/* 4. MAQUETACIÓN =========================================================== */

.rtr .contenedor {
  width: 100%;
  max-width: calc(var(--ancho-pagina) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rtr .contenedor--texto {
  max-width: calc(var(--ancho-texto) + 2 * var(--margen));
}

.rtr .seccion {
  padding-block: var(--esp-seccion);
}

.rtr .seccion--arriba {
  padding-top: var(--esp-6);
}

.rtr .seccion--alt {
  background: var(--color-seccion-alt);
  border-block: var(--grosor-linea) solid var(--color-linea);
}

.rtr .seccion--alt + .seccion--alt {
  border-top: 0;
}

.rtr .seccion--tenue {
  background: var(--color-marca-tenue);
}

.rtr .seccion__cabecera {
  max-width: var(--ancho-texto);
  margin-bottom: var(--esp-6);
}

.rtr .seccion__cabecera > * + * {
  margin-top: var(--esp-3);
}

.rtr .seccion__entradilla {
  font-size: var(--texto-l);
  color: var(--color-texto-suave);
}

.rtr .pila > * + * {
  margin-top: var(--esp-4);
}

.rtr .pila--grande > * + * {
  margin-top: var(--esp-6);
}

.rtr .grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.rtr .rejilla {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Texto principal con columna lateral (precio, llamada) que se queda fija
   en escritorio. En móvil la columna va detrás del texto. */
.rtr .con-lateral {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .rtr .con-lateral {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: var(--esp-8);
  }

  .rtr .con-lateral__aparte {
    position: sticky;
    top: var(--esp-5);
  }
}


/* 5. TIPOGRAFÍA DE LECTURA ================================================= */

.rtr .prosa {
  max-width: var(--ancho-texto);
}

.rtr .prosa > * + * {
  margin-top: var(--esp-4);
}

.rtr .prosa > h2 {
  margin-top: 2.4em;
}

.rtr .prosa > h3 {
  margin-top: 1.9em;
}

.rtr .prosa > h4 {
  margin-top: 1.6em;
}

.rtr .prosa > h2 + *,
.rtr .prosa > h3 + *,
.rtr .prosa > h4 + * {
  margin-top: var(--esp-3);
}

.rtr .prosa > :first-child {
  margin-top: 0;
}

/* Solo las listas sin clase: los componentes (pasos, precio…) dentro de
   .prosa mantienen su propio formato. */
.rtr .prosa :where(ul, ol):not([class]) {
  padding-left: 1.3em;
}

.rtr .prosa :where(ul, ol):not([class]) > li + li {
  margin-top: var(--esp-2);
}

.rtr .prosa :where(ul, ol):not([class]) > li::marker {
  color: var(--color-texto-suave);
}

.rtr .prosa > .pasos,
.rtr .prosa > .nota,
.rtr .prosa > .tabla,
.rtr .prosa > .llamada,
.rtr .prosa > .precio {
  margin-top: var(--esp-5);
}

.rtr .prosa blockquote {
  padding: var(--esp-4) var(--esp-5);
  background: var(--color-superficie-alt);
  border-radius: var(--radio-m);
  font-size: var(--texto-l);
}

.rtr .prosa figure {
  margin-block: var(--esp-6);
}

.rtr .prosa figcaption {
  margin-top: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .entradilla {
  font-size: var(--texto-l);
  line-height: 1.55;
}

/* Tabla de lectura: se desplaza dentro de su caja en móvil. El contenedor
   lleva role="region", aria-label y tabindex="0" en el HTML. */
.rtr .tabla {
  overflow-x: auto;
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
}

.rtr .tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-s);
}

.rtr .tabla caption {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  font-weight: var(--peso-fuerte);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .tabla th,
.rtr .tabla td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .tabla thead th {
  background: var(--color-superficie-alt);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.rtr .tabla tbody tr:last-child > * {
  border-bottom: 0;
}

/* Las cifras (plazos, importes) no se parten en dos líneas */
.rtr .tabla .cifra {
  white-space: nowrap;
  font-weight: var(--peso-fuerte);
}


/* Tabla comparativa (por ejemplo: hacerlo tú / informe / tramitación).
   La columna recomendada lleva .destacada en cada celda. */
.rtr .tabla--comparativa table {
  font-size: var(--texto-m);
}

.rtr .tabla--comparativa th,
.rtr .tabla--comparativa td {
  padding: var(--esp-4) var(--esp-5);
}

.rtr .tabla--comparativa thead th {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  letter-spacing: var(--tracking-titulos);
  white-space: normal;
}

.rtr .tabla--comparativa tbody th {
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .tabla--comparativa .destacada {
  background: var(--color-marca-tenue);
}

.rtr .tabla--comparativa thead .destacada {
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.rtr .tabla--comparativa .cifra {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
}

/* En móvil, cada fila se lee de arriba abajo: el criterio y debajo cada
   opción con su nombre (data-etiqueta en cada celda). La columna
   destacada sigue tintada. .tabla--apilada hace lo mismo con una tabla de
   lectura normal (plazos, requisitos) en vez de desplazarla de lado. */
@media (max-width: 47.99rem) {
  .rtr .tabla--comparativa,
  .rtr .tabla--apilada {
    overflow: visible;
  }

  .rtr .tabla--comparativa table,
  .rtr .tabla--comparativa tbody,
  .rtr .tabla--comparativa tr,
  .rtr .tabla--comparativa th,
  .rtr .tabla--comparativa td,
  .rtr .tabla--apilada table,
  .rtr .tabla--apilada tbody,
  .rtr .tabla--apilada tr,
  .rtr .tabla--apilada th,
  .rtr .tabla--apilada td {
    display: block;
    width: auto;
  }

  .rtr .tabla--comparativa caption,
  .rtr .tabla--apilada caption {
    display: block;
  }

  .rtr .tabla--comparativa thead,
  .rtr .tabla--apilada thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rtr .tabla--comparativa tbody tr,
  .rtr .tabla--apilada tbody tr {
    padding: var(--esp-4);
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .rtr .tabla--comparativa tbody tr:last-child,
  .rtr .tabla--apilada tbody tr:last-child {
    border-bottom: 0;
  }

  .rtr .tabla--comparativa tbody th,
  .rtr .tabla--apilada tbody th {
    padding: 0 0 var(--esp-2);
    border: 0;
    font-family: var(--fuente-titulos);
    font-size: var(--titulo-4);
    letter-spacing: var(--tracking-titulos);
    color: var(--color-texto);
  }

  .rtr .tabla--comparativa td,
  .rtr .tabla--apilada td {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: var(--esp-1) var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    border: 0;
    border-radius: var(--radio-s);
  }

  .rtr .tabla--comparativa td[data-etiqueta]::before,
  .rtr .tabla--apilada td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    font-size: var(--texto-s);
    font-weight: var(--peso-fuerte);
    color: var(--color-texto-suave);
  }
}


/* 6. ICONOS Y UTILIDADES =================================================== */

.rtr .icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtr .icono--grande {
  width: 1.75rem;
  height: 1.75rem;
}

.rtr .oculto-visual {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rtr .texto-suave {
  color: var(--color-texto-suave);
}

.rtr .texto-pequeno {
  font-size: var(--texto-s);
}

.rtr .sin-margen {
  margin: 0;
}

.rtr .salto {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  border-radius: var(--radio-s);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duracion) var(--curva);
}

.rtr .salto:focus-visible {
  transform: none;
}

.rtr .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--color-marca-tenue);
  color: var(--color-marca-intensa);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1.6;
  white-space: nowrap;
}


/* 7. CABECERA, NAVEGACIÓN Y MIGAS DE PAN =================================== */

.rtr .cabecera {
  position: relative;
  z-index: 20;
  background: var(--color-superficie);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--alto-cabecera);
}

.rtr .cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-right: auto;
  padding-block: var(--esp-2);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
  text-decoration: none;
}

.rtr .cabecera__marca:hover {
  color: var(--color-marca);
}

.rtr .cabecera__logo {
  width: auto;
  height: 2rem;
}

/* Marca en SVG en línea junto al nombre (alto de la letra) */
.rtr .cabecera__marca svg {
  flex: none;
  width: auto;
  height: 1.15em;
}

.rtr .cabecera__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-5);
  padding: 0;
  list-style: none;
}

.rtr .cabecera__nav li > a {
  display: inline-block;
  padding-block: var(--esp-2);
  color: var(--color-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}

.rtr .cabecera__nav li > a:hover,
.rtr .cabecera__nav li > a[aria-current="page"] {
  color: var(--color-marca);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.rtr .cabecera__accion {
  flex: none;
}

.rtr .cabecera__menu {
  display: none;
}

/* Móvil: el menú se pliega solo si hay JavaScript (clase .js en <html>).
   Sin JavaScript, los enlaces se ven debajo de la marca. */
@media (max-width: 55.99rem) {
  .rtr .cabecera__interior {
    flex-wrap: wrap;
  }

  .rtr .cabecera__marca {
    flex: 1 1 0;
    min-width: 0;
    text-wrap: balance;
  }

  .rtr .cabecera__nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: var(--esp-3);
  }

  .rtr .cabecera .cabecera__accion {
    display: none;
  }

  .js .rtr .cabecera__menu {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-3);
    margin-right: calc(-1 * var(--esp-3));
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--color-texto);
    font-size: var(--texto-s);
    font-weight: var(--peso-fuerte);
  }

  .js .rtr .cabecera__menu:hover {
    background: var(--color-superficie-alt);
  }

  .js .rtr .cabecera__menu .icono-cerrar,
  .js .rtr .cabecera__menu[aria-expanded="true"] .icono-abrir {
    display: none;
  }

  .js .rtr .cabecera__menu[aria-expanded="true"] .icono-cerrar {
    display: block;
  }

  .js .rtr .cabecera__nav {
    display: none;
  }

  .js .rtr .cabecera__nav[data-abierto] {
    display: block;
  }

  .js .rtr .cabecera__nav ul {
    flex-direction: column;
    gap: 0;
    border-top: var(--grosor-linea) solid var(--color-linea);
  }

  .js .rtr .cabecera__nav li {
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .js .rtr .cabecera__nav li > a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    font-size: var(--texto-m);
  }

  .rtr .cabecera__nav .boton {
    margin-top: var(--esp-4);
    width: 100%;
  }
}

@media (min-width: 56rem) {
  .rtr .cabecera__nav .boton {
    display: none;
  }
}

.rtr .migas {
  padding-top: var(--esp-5);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  padding: 0;
  list-style: none;
}

.rtr .migas li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.rtr .migas li + li::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.rtr .migas a {
  color: var(--color-texto-suave);
}

.rtr .migas a:hover {
  color: var(--color-marca);
}

.rtr .migas [aria-current="page"] {
  color: var(--color-texto);
}


/* 8. PORTADA (HERO) ========================================================
   La primera frase (.portada__entradilla) es la que se entiende sola: qué,
   para quién y dónde. Va en color de texto, no en gris.                    */

.rtr .portada {
  padding-block: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);
}

.rtr .migas + .portada,
.rtr .portada--interior {
  padding-top: var(--esp-6);
}

.rtr .portada__interior {
  display: grid;
  gap: var(--esp-6);
  align-items: start;
}

.rtr .portada__texto {
  max-width: 40rem;
}

.rtr .portada__texto > * + * {
  margin-top: var(--esp-4);
}

.rtr .portada__titulo {
  font-size: var(--titulo-1);
}

.rtr .portada--principal .portada__titulo {
  font-size: var(--titulo-portada);
  line-height: 1.06;
  letter-spacing: calc(var(--tracking-titulos) - 0.006em);
}

.rtr .portada__entradilla {
  font-size: var(--texto-l);
  line-height: 1.55;
  color: var(--color-texto);
}

.rtr .portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding-top: var(--esp-2);
}

.rtr .portada__confianza {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-2) 0 0;
  list-style: none;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .portada__confianza li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.rtr .portada__confianza .icono {
  margin-top: 0.15em;
  color: var(--color-ok);
}

.rtr .portada__datos > * + * {
  margin-top: var(--esp-4);
}

@media (min-width: 40rem) {
  .rtr .portada__confianza {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--esp-2) var(--esp-5);
  }
}

/* Portada con herramienta: texto a la izquierda y la herramienta a la
   derecha en escritorio; en móvil, la herramienta justo después del texto.
   Si .portada__confianza va como hijo directo de .portada__interior
   (después de la herramienta), en móvil queda debajo de la herramienta y en
   escritorio debajo del texto. */
@media (min-width: 60rem) {
  .rtr .portada--herramienta .portada__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas: "texto herramienta" "confianza herramienta";
    grid-template-rows: auto 1fr;
    column-gap: var(--esp-8);
    row-gap: var(--esp-5);
  }

  .rtr .portada--herramienta .portada__texto {
    grid-area: texto;
  }

  .rtr .portada--herramienta .portada__interior > .herramienta {
    grid-area: herramienta;
  }

  .rtr .portada--herramienta .portada__interior > .portada__confianza,
  .rtr .portada--herramienta .portada__interior > .portada__datos {
    grid-area: confianza;
    align-self: start;
    max-width: 40rem;
  }
}

/* Portada sobre el color de marca (v1.5, 04/11/2026): el texto pasa a
   --color-sobre-marca; el formulario o la herramienta siguen en superficie. */
.rtr .portada--marca {
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.rtr .portada--marca .portada__entradilla,
.rtr .portada--marca .portada__confianza {
  color: var(--color-sobre-marca);
}

.rtr .portada--marca .portada__confianza .icono {
  color: inherit;
}

.rtr .portada--marca .portada__texto a:not(.boton) {
  color: inherit;
}

.rtr .portada--marca .portada__texto :focus-visible,
.rtr .portada--marca .portada__datos :focus-visible {
  outline-color: var(--color-sobre-marca);
}

/* El formulario o la herramienta de la portada vuelven al color de texto */
.rtr .portada--marca .herramienta,
.rtr .portada--marca .formulario--panel {
  color: var(--color-texto);
}

.rtr .portada__imagen {
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--color-superficie-alt);
}

.rtr .portada__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 9. BOTONES =============================================================== */

.rtr .boton {
  --_fondo: var(--color-marca);
  --_texto: var(--color-sobre-marca);
  --_borde: var(--color-marca);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.7em 1.25em;
  border: var(--grosor-linea) solid var(--_borde);
  border-radius: var(--radio-boton);
  background: var(--_fondo);
  color: var(--_texto);
  font-family: inherit;
  font-size: var(--texto-m);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition:
    background-color var(--duracion) var(--curva),
    border-color var(--duracion) var(--curva),
    color var(--duracion) var(--curva),
    box-shadow var(--duracion) var(--curva),
    transform 120ms var(--curva);
}

.rtr .boton:hover {
  --_fondo: var(--color-marca-intensa);
  --_borde: var(--color-marca-intensa);
  text-decoration: none;
}

.rtr .boton:active {
  transform: translateY(1px) scale(0.99);
}

.rtr .boton .icono {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--duracion) var(--curva);
}

.rtr .boton:hover .icono-flecha {
  transform: translateX(3px);
}

.rtr .boton--secundario {
  --_fondo: var(--color-superficie);
  --_texto: var(--color-marca);
  --_borde: var(--color-linea-campo);
}

.rtr .boton--secundario:hover {
  --_fondo: var(--color-marca-tenue);
  --_texto: var(--color-marca-intensa);
  --_borde: var(--color-marca);
}

.rtr .boton--fantasma {
  --_fondo: transparent;
  --_texto: var(--color-marca);
  --_borde: transparent;
  padding-inline: 0.6em;
}

.rtr .boton--fantasma:hover {
  --_fondo: var(--color-marca-tenue);
  --_texto: var(--color-marca-intensa);
  --_borde: transparent;
}

/* Botón claro sobre fondos de marca o banda oscura */
.rtr .boton--claro {
  --_fondo: var(--color-superficie);
  --_texto: var(--color-marca-intensa);
  --_borde: var(--color-superficie);
}

.rtr .boton--claro:hover {
  --_fondo: var(--color-marca-tenue);
  --_borde: var(--color-marca-tenue);
}

.rtr .boton--enlace {
  --_fondo: transparent;
  --_texto: var(--color-enlace);
  --_borde: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
}

.rtr .boton--enlace:hover {
  --_fondo: transparent;
  --_borde: transparent;
  --_texto: var(--color-marca-intensa);
  text-decoration-thickness: 2px;
}

.rtr .boton--grande {
  min-height: 3.25rem;
  padding: 0.85em 1.5em;
  font-size: var(--texto-l);
}

.rtr .boton--bloque {
  display: flex;
  width: 100%;
}

.rtr .boton:disabled,
.rtr .boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Cargando: el texto se mantiene para lectores de pantalla y se dibuja un
   indicador. El botón lleva aria-busy="true" mientras envía. */
.rtr .boton[aria-busy="true"] {
  color: transparent;
  cursor: progress;
}

.rtr .boton[aria-busy="true"] .icono {
  opacity: 0;
}

.rtr .boton[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--_texto);
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(1turn);
  }
}

.rtr .enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}

.rtr .enlace-flecha:hover {
  text-decoration: underline;
}

.rtr .enlace-flecha .icono {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--duracion) var(--curva);
}

.rtr .enlace-flecha:hover .icono {
  transform: translateX(3px);
}


/* 10. LLAMADA A LA ACCIÓN, «QUÉ PASA DESPUÉS» Y CONFIANZA ================= */

.rtr .llamada {
  display: grid;
  gap: var(--esp-5) var(--esp-7);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

@media (min-width: 56rem) {
  .rtr .llamada {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* En la columna de texto de los artículos no caben dos columnas: la llamada va apilada (v1.3, 28/10/2026) */
.rtr .contenedor--texto .llamada {
  grid-template-columns: minmax(0, 1fr);
}

.rtr .llamada__texto > * + * {
  margin-top: var(--esp-3);
}

.rtr .llamada__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-2);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.15;
}

.rtr .llamada__accion {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
}

.rtr .llamada__confianza {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  max-width: 22rem;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .llamada__confianza .icono {
  margin-top: 0.1em;
  color: var(--color-ok);
}

.rtr .llamada--marca {
  border-color: var(--color-marca);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.rtr .llamada--marca .llamada__confianza,
.rtr .llamada--marca .llamada__confianza .icono {
  color: color-mix(in srgb, var(--color-sobre-marca) 86%, var(--color-marca));
}

.rtr .llamada--marca a:not(.boton) {
  color: inherit;
}

.rtr .llamada--marca :focus-visible,
.rtr .fondo-marca :focus-visible {
  outline-color: var(--color-sobre-marca);
}

/* Qué pasa después de contactar: la numeración sí aporta información
   (es un orden), por eso los pasos llevan número. */
.rtr .pasos {
  display: grid;
  gap: var(--esp-5);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 48rem) {
  .rtr .pasos--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--esp-6);
  }
}

.rtr .paso {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: minmax(2.25rem, auto) auto;
  align-content: start;
  gap: var(--esp-1) var(--esp-4);
  counter-increment: paso;
}

.rtr .paso::before {
  content: counter(paso);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--color-marca);
  border-radius: 50%;
  color: var(--color-marca);
  font-weight: var(--peso-titulos);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rtr .paso__titulo {
  align-self: center;
  font-size: var(--titulo-4);
}

.rtr .paso__texto {
  color: var(--color-texto-suave);
}

/* Fila de datos de confianza reales (credencial, plazo, precio).
   Nunca reseñas ni sellos inventados. */
.rtr .confianza {
  display: grid;
  gap: var(--esp-4) var(--esp-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .rtr .confianza {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.rtr .confianza li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-1) var(--esp-3);
}

.rtr .confianza .icono {
  grid-row: span 2;
  margin-top: 0.1em;
  color: var(--color-marca);
}

.rtr .confianza strong {
  display: block;
}

.rtr .confianza span {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}


/* 11. FORMULARIO «TE LLAMAMOS» ============================================= */

.rtr .formulario {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  scroll-margin-top: var(--esp-4);
}

.rtr .formulario--panel {
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

.rtr .formulario__titulo {
  font-size: var(--titulo-3);
}

.rtr .formulario__intro {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .campo {
  display: grid;
  gap: 0.375rem;
}

.rtr .campo__etiqueta {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-s);
}

.rtr .campo__opcional {
  font-weight: var(--peso-normal);
  color: var(--color-texto-suave);
}

.rtr .campo__ayuda {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.rtr .campo input,
.rtr .campo select,
.rtr .campo textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65em 0.85em;
  border: var(--grosor-linea) solid var(--color-linea-campo);
  border-radius: var(--radio-campo);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: max(16px, 1rem);
  line-height: 1.4;
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}

.rtr .campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.rtr .campo input::placeholder,
.rtr .campo textarea::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

.rtr .campo input:hover,
.rtr .campo select:hover,
.rtr .campo textarea:hover {
  border-color: var(--color-texto-suave);
}

.rtr .campo input:focus-visible,
.rtr .campo select:focus-visible,
.rtr .campo textarea:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 1px;
  border-color: var(--color-foco);
}

.rtr .campo [aria-invalid="true"] {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error-tenue) 45%, var(--color-superficie));
}

.rtr .campo [aria-invalid="true"]:focus-visible {
  outline-color: var(--color-foco);
  border-color: var(--color-error);
}

.rtr .campo__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--color-error);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.rtr .campo__error::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  background: currentColor;
  -webkit-mask: var(--mascara-alerta) center / contain no-repeat;
  mask: var(--mascara-alerta) center / contain no-repeat;
}

:root {
  --mascara-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  --mascara-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Casilla de consentimiento */
.rtr .casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--texto-s);
  cursor: pointer;
}

.rtr .casilla input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15em 0 0;
  cursor: pointer;
}

.rtr .casilla input[aria-invalid="true"] {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.rtr .casilla input[aria-invalid="true"]:focus-visible {
  outline: 3px solid var(--color-foco);
}

/* Campo trampa contra spam: fuera de la vista y del teclado */
.rtr .campo--trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.rtr .formulario__enviar {
  margin-top: var(--esp-2);
}

/* Primera capa de información sobre protección de datos (RGPD y LOPDGDD) */
.rtr .info-datos {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

.rtr .info-datos summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 1.5rem;
  list-style: none;
  cursor: pointer;
  font-weight: var(--peso-fuerte);
  color: var(--color-texto);
}

.rtr .info-datos summary::-webkit-details-marker {
  display: none;
}

.rtr .info-datos summary::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--mascara-mas) center / contain no-repeat;
  mask: var(--mascara-mas) center / contain no-repeat;
  transition: transform 260ms var(--curva);
}

.rtr .info-datos[open] summary::before {
  transform: rotate(45deg);
}

.rtr .info-datos dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2);
}

.rtr .info-datos dt {
  font-weight: var(--peso-fuerte);
  color: var(--color-texto);
}

/* Formulario por pasos (v1.5, 04/11/2026): <form data-formulario data-pasos>,
   una pantalla por <fieldset class="formulario__paso" data-paso>. base.js
   enseña una cada vez; sin JavaScript se ven todas seguidas, sin progreso
   ni «Atrás», y el botón dice el texto final. */
.rtr .formulario__paso {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rtr .formulario__paso > * + * {
  margin-top: var(--esp-4);
}

.rtr .formulario__pregunta {
  float: left;
  width: 100%;
  margin-bottom: var(--esp-4);
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.rtr .formulario__pregunta:focus {
  outline: none;
}

.rtr .formulario__pregunta + * {
  clear: both;
  margin-top: 0;
}

.rtr .formulario__progreso {
  display: grid;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}

html:not(.js) .formulario__progreso,
html:not(.js) .formulario [data-anterior] {
  display: none;
}

.rtr .formulario__navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.rtr .formulario__navegacion [type="submit"] {
  flex: 1 1 12rem;
}

.rtr .formulario__navegacion .boton--fantasma {
  margin-left: calc(-1 * var(--esp-3));
}

.rtr .formulario__nota {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .opciones--dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rtr .aviso-formulario {
  padding: var(--esp-3) var(--esp-4);
  border: var(--grosor-linea) solid color-mix(in srgb, var(--color-error) 35%, transparent);
  border-radius: var(--radio-m);
  background: var(--color-error-tenue);
  color: var(--color-error);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}


/* 12. PRECIOS =============================================================
   Tabla real (<table>) con horquillas o precios cerrados. En móvil cada
   fila se apila y usa data-etiqueta de cada celda como rótulo.            */

.rtr .tabla-precios {
  --_radio: calc(var(--radio-l) - var(--grosor-linea));
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.rtr .tabla-precios thead tr:first-child > :first-child {
  border-top-left-radius: var(--_radio);
}

.rtr .tabla-precios thead tr:first-child > :last-child {
  border-top-right-radius: var(--_radio);
}

.rtr .tabla-precios tbody tr:last-child > :first-child {
  border-bottom-left-radius: var(--_radio);
}

.rtr .tabla-precios tbody tr:last-child > :last-child {
  border-bottom-right-radius: var(--_radio);
}

.rtr .tabla-precios caption {
  padding-bottom: var(--esp-3);
  caption-side: top;
  text-align: left;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .tabla-precios th,
.rtr .tabla-precios td {
  padding: var(--esp-4) var(--esp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .tabla-precios thead th {
  background: var(--color-superficie-alt);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.rtr .tabla-precios tbody tr:last-child > * {
  border-bottom: 0;
}

.rtr .tabla-precios tbody th {
  font-weight: var(--peso-fuerte);
}

.rtr .tabla-precios__detalle {
  display: block;
  margin-top: var(--esp-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
  font-weight: var(--peso-normal);
}

.rtr .tabla-precios .importe {
  text-align: right;
  font-size: var(--texto-l);
  font-weight: var(--peso-titulos);
  white-space: nowrap;
}

.rtr .tabla-precios thead .importe {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.rtr .tabla-precios tr.destacada > * {
  background: var(--color-marca-tenue);
}

@media (max-width: 39.99rem) {
  .rtr .tabla-precios thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rtr .tabla-precios tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(45%);
    gap: var(--esp-2) var(--esp-4);
    padding: var(--esp-4);
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .rtr .tabla-precios tbody tr:first-child {
    border-radius: var(--_radio) var(--_radio) 0 0;
  }

  .rtr .tabla-precios tbody tr:last-child {
    border-bottom: 0;
    border-radius: 0 0 var(--_radio) var(--_radio);
  }

  .rtr .tabla-precios tbody tr:only-child {
    border-radius: var(--_radio);
  }

  .rtr .tabla-precios th,
  .rtr .tabla-precios td {
    padding: 0;
    border: 0;
    border-radius: 0 !important;
  }

  .rtr .tabla-precios tbody th {
    grid-column: 1;
    grid-row: 1;
  }

  .rtr .tabla-precios .importe {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
  }

  .rtr .tabla-precios td:not(.importe) {
    grid-column: 1 / -1;
  }

  .rtr .tabla-precios tr.destacada {
    background: var(--color-marca-tenue);
  }

  .rtr .tabla-precios tr.destacada > * {
    background: transparent;
  }

  .rtr .tabla-precios td[data-etiqueta]:not(.importe)::before {
    content: attr(data-etiqueta) ": ";
    font-weight: var(--peso-fuerte);
    color: var(--color-texto);
  }
}

/* Precio destacado de un servicio (columna lateral o bloque) */
.rtr .precio {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

.rtr .precio__concepto {
  font-size: var(--titulo-4);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
}

/* Cuando el concepto es el título del bloque (h2 o h3) */
.rtr :is(h2, h3).precio__concepto {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
}

.rtr .precio__importe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-2);
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rtr .precio__nota {
  font-family: var(--fuente-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

.rtr .precio__incluye {
  display: grid;
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
  font-size: var(--texto-s);
}

.rtr .precio__incluye li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.rtr .precio__incluye .icono {
  margin-top: 0.15em;
  color: var(--color-ok);
}


/* 13. PREGUNTAS FRECUENTES ================================================ */

.rtr .faq {
  max-width: var(--ancho-texto);
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.rtr .faq__item {
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  font-weight: var(--peso-fuerte);
  line-height: 1.35;
  letter-spacing: calc(var(--tracking-titulos) / 2);
  transition: color var(--duracion) var(--curva);
}

.rtr .faq__pregunta::-webkit-details-marker {
  display: none;
}

.rtr .faq__pregunta::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  background: currentColor;
  -webkit-mask: var(--mascara-mas) center / contain no-repeat;
  mask: var(--mascara-mas) center / contain no-repeat;
  transition: transform 260ms var(--curva);
}

.rtr .faq__pregunta:hover {
  color: var(--color-marca);
}

.rtr .faq__item[open] > .faq__pregunta::after {
  transform: rotate(45deg);
}

.rtr .faq__respuesta {
  padding-bottom: var(--esp-5);
  padding-right: var(--esp-6);
}

.rtr .faq__respuesta > * + * {
  margin-top: var(--esp-3);
}


/* 14. NOTAS Y FUENTES CITADAS ============================================= */

.rtr .nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie-alt);
}

.rtr .nota > .icono {
  margin-top: 0.15em;
}

.rtr .nota__texto > * + * {
  margin-top: var(--esp-2);
}

.rtr .nota--info {
  border-color: color-mix(in srgb, var(--color-marca) 22%, transparent);
  background: var(--color-marca-tenue);
}

.rtr .nota--info > .icono {
  color: var(--color-marca);
}

.rtr .nota--aviso {
  border-color: color-mix(in srgb, var(--color-aviso) 26%, transparent);
  background: var(--color-aviso-tenue);
}

.rtr .nota--aviso > .icono {
  color: var(--color-aviso);
}

.rtr .nota--ok {
  border-color: color-mix(in srgb, var(--color-ok) 24%, transparent);
  background: var(--color-ok-tenue);
}

.rtr .nota--ok > .icono {
  color: var(--color-ok);
}

.rtr .nota--error {
  border-color: color-mix(in srgb, var(--color-error) 24%, transparent);
  background: var(--color-error-tenue);
}

.rtr .nota--error > .icono {
  color: var(--color-error);
}

/* Cita de una fuente oficial junto al dato que respalda */
.rtr .fuente {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .fuente a {
  color: inherit;
}

.rtr .fuentes {
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .fuentes ol {
  padding-left: 1.3em;
}

.rtr .fuentes li + li {
  margin-top: var(--esp-1);
}


/* 15. AUTOR, VERIFICACIÓN Y METADATOS DE ARTÍCULO ========================= */

.rtr .caja-autor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-4) var(--esp-5);
  align-items: start;
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.rtr .caja-autor__foto {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-superficie-alt);
}

/* Sin foto: lo normal es quitar el círculo (la caja pasa sola a una
   columna, regla de abajo). Las iniciales solo si la web las quiere como
   marca, y entonces decorativas (aria-hidden), porque el nombre va al lado. */
.rtr .caja-autor__iniciales {
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: var(--peso-titulos);
  letter-spacing: 0.02em;
  color: var(--color-texto-suave);
}

.rtr .caja-autor:not(:has(> .caja-autor__foto)) {
  grid-template-columns: minmax(0, 1fr);
}

.rtr .caja-autor__texto > * + * {
  margin-top: var(--esp-2);
}

.rtr .caja-autor__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.rtr .caja-autor__nombre a {
  color: inherit;
}

.rtr .caja-autor__cargo {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .caja-autor__bio {
  font-size: var(--texto-s);
}

.rtr .caja-autor__revisor {
  grid-column: 1 / -1;
  padding-top: var(--esp-3);
  border-top: var(--grosor-linea) solid var(--color-linea);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

@media (max-width: 29.99rem) {
  .rtr .caja-autor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Recuadro de verificación: solo si el artículo ha pasado de verdad la
   comprobación de datos y enlaza sus fuentes. */
.rtr .verificacion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-5);
  border: var(--grosor-linea) solid color-mix(in srgb, var(--color-ok) 24%, transparent);
  border-radius: var(--radio-l);
  background: var(--color-ok-tenue);
  font-size: var(--texto-s);
}

.rtr .verificacion > .icono {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-ok);
}

@media (max-width: 29.99rem) {
  .rtr .verificacion {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rtr .verificacion__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  margin-bottom: var(--esp-2);
}

.rtr .meta-articulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .meta-articulo__autor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.rtr .meta-articulo__autor img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.rtr .meta-articulo a {
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

/* Perfil del autor o profesional (página de autor) */
.rtr .perfil {
  display: grid;
  gap: var(--esp-5) var(--esp-6);
  align-items: start;
}

/* Foto al lado solo si la hay; sin foto, el perfil es una columna */
@media (min-width: 40rem) {
  .rtr .perfil:has(> .perfil__foto) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.rtr .perfil__foto {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radio-l);
  object-fit: cover;
  background: var(--color-superficie-alt);
}

.rtr .perfil__texto > * + * {
  margin-top: var(--esp-3);
}

.rtr .perfil__cargo {
  font-size: var(--texto-l);
  color: var(--color-texto-suave);
}

/* Ficha de datos en dos columnas (titular, credenciales) */
.rtr .ficha {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-5);
}

.rtr .ficha dt {
  font-weight: var(--peso-fuerte);
}

.rtr .ficha dd {
  color: var(--color-texto-suave);
}

@media (max-width: 29.99rem) {
  .rtr .ficha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .rtr .ficha dd + dt {
    margin-top: var(--esp-3);
  }
}

/* Lista de enlaces relacionados */
.rtr .lista-enlaces {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  list-style: none;
}

/* Índice de un artículo largo */
.rtr .indice {
  padding: var(--esp-4) var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  font-size: var(--texto-s);
}

.rtr .indice__titulo {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  margin-bottom: var(--esp-2);
}

.rtr .indice ol {
  padding-left: 1.2em;
}

.rtr .indice li + li {
  margin-top: var(--esp-1);
}

.rtr .indice li > a {
  display: inline-block;
  padding-block: 0.15rem;
}


/* 16. SERVICIOS, ZONAS Y CASOS ============================================ */

/* Lista de servicios en filas: nombre, una línea, precio y enlace.
   Toda la fila es clicable a través del enlace del título. */
.rtr .servicios {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.rtr .servicio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-1) var(--esp-5);
  align-items: center;
  padding: var(--esp-5) var(--esp-2);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
  transition: background-color var(--duracion) var(--curva);
}

.rtr .servicio:hover {
  background: color-mix(in srgb, var(--color-marca) 5%, transparent);
}

.rtr .servicio__nombre {
  font-size: var(--titulo-3);
}

.rtr .servicio__nombre a {
  color: inherit;
  text-decoration: none;
}

.rtr .servicio__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rtr .servicio__nombre a:focus-visible {
  outline: none;
}

.rtr .servicio:has(a:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

.rtr .servicio__resumen {
  grid-column: 1;
  color: var(--color-texto-suave);
}

.rtr .servicio__lado {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  color: var(--color-marca);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.rtr .servicio__lado .icono {
  transition: transform var(--duracion) var(--curva);
}

.rtr .servicio:hover .servicio__lado .icono {
  transform: translateX(4px);
}

@media (max-width: 35.99rem) {
  .rtr .servicio {
    grid-template-columns: minmax(0, 1fr);
  }

  .rtr .servicio__lado {
    grid-column: 1;
    grid-row: auto;
  }
}

.rtr .zonas {
  columns: 12rem auto;
  column-gap: var(--esp-6);
  padding: 0;
  list-style: none;
}

.rtr .zonas li {
  break-inside: avoid;
  padding-block: var(--esp-1);
}

/* Caso real (con permiso y sin datos personales) */
.rtr .casos {
  display: grid;
  gap: var(--esp-5);
}

.rtr .caso {
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.rtr .caso__titulo {
  font-size: var(--titulo-3);
  margin-bottom: var(--esp-4);
}

.rtr .caso dl {
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 48rem) {
  .rtr .caso dl {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--esp-3) var(--esp-5);
  }
}

.rtr .caso dt {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

@media (max-width: 47.99rem) {
  .rtr .caso dl {
    gap: 0;
  }

  .rtr .caso dd + dt {
    margin-top: var(--esp-3);
  }
}


/* 17. HERRAMIENTA / CALCULADORA ===========================================
   Contenedor genérico para calculadoras por pasos (semáforos, viabilidad,
   presupuestos). La lógica de cada cálculo va en el JavaScript de cada
   web; base.js solo pasa de paso en paso y entrega las respuestas.       */

.rtr .herramienta {
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.rtr .herramienta__cabecera {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-5) var(--esp-4);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .herramienta__titulo {
  font-size: var(--titulo-3);
}

.rtr .herramienta__privacidad {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--color-texto);
}

.rtr .herramienta__privacidad .icono {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05em;
}

.rtr .herramienta__progreso {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}

.rtr .herramienta__barra {
  height: 4px;
  border-radius: 4px;
  background: var(--color-superficie-alt);
  overflow: hidden;
}

.rtr .herramienta__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-marca);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform 320ms var(--curva);
}

.rtr .herramienta__cuerpo {
  padding: var(--esp-5);
}

html:not(.js) .herramienta [data-herramienta] {
  display: none;
}

.rtr .herramienta__sin-js {
  font-size: var(--texto-s);
}

.rtr .herramienta__paso {
  border: 0;
  padding: 0;
  min-width: 0;
}

.rtr .herramienta__pregunta {
  float: left;
  width: 100%;
  margin-bottom: var(--esp-4);
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.rtr .herramienta__pregunta:focus {
  outline: none;
}

.rtr .herramienta__pregunta + * {
  clear: both;
}

.rtr .herramienta__ayuda {
  margin: calc(-1 * var(--esp-2)) 0 var(--esp-4);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .opciones {
  display: grid;
  gap: var(--esp-2);
}

.rtr .opcion {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  padding: var(--esp-3) var(--esp-4);
  border: var(--grosor-linea) solid var(--color-linea-campo);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}

.rtr .opcion:hover {
  border-color: var(--color-marca);
}

.rtr .opcion input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2em 0 0;
  cursor: pointer;
}

.rtr .opcion input:focus-visible {
  outline: none;
}

.rtr .opcion:has(input:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.rtr .opcion:has(input:checked) {
  border-color: var(--color-marca);
  background: var(--color-marca-tenue);
  box-shadow: inset 0 0 0 1px var(--color-marca);
}

.rtr .opcion__texto {
  display: grid;
  gap: 0.1rem;
}

.rtr .opcion__titulo {
  font-weight: var(--peso-fuerte);
}

.rtr .opcion__detalle {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .herramienta__navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.rtr .herramienta__navegacion .boton--fantasma {
  margin-left: calc(-1 * var(--esp-3));
}

.rtr .herramienta__navegacion [type="submit"] {
  margin-left: auto;
}

.rtr .herramienta__pie {
  padding: var(--esp-3) var(--esp-5);
  border-top: var(--grosor-linea) solid var(--color-linea);
  background: var(--color-superficie-alt);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Cabezal oscuro (carcasa de señal): título, privacidad y luces sobre la banda */
.rtr .herramienta--cabezal .herramienta__cabecera {
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  border-bottom: 0;
}

.rtr .herramienta--cabezal .herramienta__privacidad {
  color: var(--color-sobre-banda-suave);
}

.rtr .herramienta--cabezal .herramienta__cabecera :focus-visible {
  outline-color: var(--color-sobre-banda);
}

.rtr .herramienta__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

/* Tres luces: apagadas hasta que el resultado enciende una (data-luz).
   Nunca son la única señal: el resultado siempre lleva icono y texto. */
.rtr .luces {
  display: inline-flex;
  flex: none;
  gap: calc(var(--tam-luz) * 0.45);
  padding: calc(var(--tam-luz) * 0.3) calc(var(--tam-luz) * 0.4);
  border-radius: 999px;
  background: color-mix(in srgb, #000 40%, var(--color-banda));
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5), 0 1px 0 color-mix(in srgb, var(--color-sobre-banda) 10%, transparent);
}

/* Cada luz en su cavidad: aro oscuro y sombra interior arriba (la visera) */
.rtr .luz {
  width: var(--tam-luz);
  height: var(--tam-luz);
  border-radius: 50%;
  background: var(--color-luz-apagada);
  box-shadow: inset 0 calc(var(--tam-luz) * 0.12) calc(var(--tam-luz) * 0.18) rgb(0 0 0 / 0.55), 0 0 0 2px color-mix(in srgb, #000 55%, var(--color-banda));
  filter: brightness(0.85);
  transition: background-color 650ms var(--curva), box-shadow 650ms var(--curva), filter 650ms var(--curva);
}

.rtr .luces[data-luz="verde"] .luz--verde,
.rtr .luces[data-luz="ambar"] .luz--ambar,
.rtr .luces[data-luz="rojo"] .luz--roja {
  filter: brightness(1.08);
  box-shadow: inset 0 calc(var(--tam-luz) * 0.1) calc(var(--tam-luz) * 0.14) rgb(255 255 255 / 0.35), 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent), 0 0 calc(var(--tam-luz) * 0.9) calc(var(--tam-luz) * 0.12) color-mix(in srgb, currentColor 60%, transparent);
}

.rtr .luces[data-luz="verde"] .luz--verde {
  background: var(--color-luz-verde);
  color: var(--color-luz-verde);
}

.rtr .luces[data-luz="ambar"] .luz--ambar {
  background: var(--color-luz-ambar);
  color: var(--color-luz-ambar);
}

.rtr .luces[data-luz="rojo"] .luz--roja {
  background: var(--color-luz-roja);
  color: var(--color-luz-roja);
}

.rtr .herramienta--cabezal .resultado__estado {
  padding: 0;
  background: none;
  color: var(--color-texto);
  font-size: var(--titulo-3);
}

.rtr .herramienta--cabezal .resultado__estado .icono {
  color: var(--_tono);
}

/* La fecha como hoja de calendario: mes y año en la banda, día en grande.
   La fecha completa va en texto para los lectores de pantalla. */
.rtr .resultado__hoja {
  display: inline-grid;
  min-width: 9.5rem;
  margin-top: var(--esp-2);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  text-align: center;
}

.rtr .resultado__mes {
  padding: var(--esp-1) var(--esp-3);
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: var(--peso-titulos);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rtr .resultado__num {
  padding: var(--esp-2) var(--esp-4) var(--esp-1);
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4rem);
  font-weight: var(--peso-titulos);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.rtr .resultado__semana {
  padding: 0 var(--esp-3) var(--esp-2);
  border-top: var(--grosor-linea) solid var(--color-linea);
  padding-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Fecha protagonista del resultado */
.rtr .resultado__dia {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  font-weight: var(--peso-titulos);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-texto);
}

.rtr .resultado__norma {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

/* Resultado: siempre icono + título + texto, nunca solo color */
.rtr .resultado {
  --_tono: var(--color-marca);
  --_tenue: var(--color-marca-tenue);
  display: grid;
  align-content: start;
  gap: var(--esp-4);
}

.rtr .resultado__estado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--_tenue);
  color: var(--_tono);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.rtr .resultado__estado:focus {
  outline: none;
}

.rtr .resultado__estado .icono {
  width: 1.6rem;
  height: 1.6rem;
}

.rtr .resultado--ok {
  --_tono: var(--color-ok);
  --_tenue: var(--color-ok-tenue);
}

.rtr .resultado--aviso {
  --_tono: var(--color-aviso);
  --_tenue: var(--color-aviso-tenue);
}

.rtr .resultado--no {
  --_tono: var(--color-error);
  --_tenue: var(--color-error-tenue);
}

.rtr .resultado__datos {
  display: grid;
  gap: var(--esp-2) var(--esp-4);
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: var(--texto-s);
}

.rtr .resultado__datos dt {
  font-weight: var(--peso-fuerte);
}

.rtr .resultado__fecha {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.rtr .resultado__acciones {
  display: grid;
  gap: var(--esp-2);
}

/* Resultado con partes fijas: el script pinta en [data-resultado-contenido]
   y deja en su sitio un formulario (por ejemplo, el aviso del rojo) y los
   botones de volver, que así valida base.js como cualquier otro formulario. */
.rtr .resultado__contenido {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
}

.rtr .resultado__aviso {
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
}


/* 18. PIE, BANNER DE COOKIES Y BARRA DE CONTACTO MÓVIL ==================== */

.rtr .pie {
  margin-top: auto;
  padding-block: var(--esp-7) var(--esp-6);
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  font-size: var(--texto-s);
}

.rtr .pie__interior {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 48rem) {
  .rtr .pie__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.rtr .pie__marca {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
}

.rtr .pie__titular {
  max-width: 38rem;
  margin-top: var(--esp-2);
  color: var(--color-sobre-banda-suave);
}

.rtr .pie__enlaces ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  padding: 0;
  list-style: none;
}

.rtr .pie a,
.rtr .pie button.pie__boton-enlace {
  color: var(--color-sobre-banda);
}

.rtr .pie__enlaces a,
.rtr .pie button.pie__boton-enlace {
  display: inline-block;
  padding-block: 0.2rem;
}

.rtr .pie button.pie__boton-enlace {
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
}

.rtr .pie a:hover,
.rtr .pie button.pie__boton-enlace:hover {
  text-decoration-thickness: 2px;
}

.rtr .pie :focus-visible {
  outline-color: var(--color-sobre-banda);
}

.rtr .pie__legal {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid color-mix(in srgb, var(--color-sobre-banda) 18%, transparent);
  color: var(--color-sobre-banda-suave);
  font-size: var(--texto-xs);
}

/* Banner de cookies: aceptar y rechazar con el mismo peso (guía de la
   AEPD). No bloquea la página. */
.rtr .cookies {
  position: fixed;
  z-index: 50;
  right: var(--esp-3);
  bottom: var(--esp-3);
  left: var(--esp-3);
  max-width: 34rem;
  max-height: calc(100dvh - 2 * var(--esp-3));
  overflow-y: auto;
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-2);
  font-size: var(--texto-s);
}

@media (min-width: 40rem) {
  .rtr .cookies {
    right: auto;
    left: var(--esp-5);
    bottom: var(--esp-5);
  }
}

@media (max-width: 39.99rem) {
  .rtr .cookies {
    padding: var(--esp-4);
  }
}

html:has(.cookies:not([hidden]):not(.cookies--estatico)) {
  scroll-padding-bottom: calc(var(--alto-cookies, 12rem) + var(--esp-4));
}

.rtr:has(.cookies:not([hidden]):not(.cookies--estatico)) {
  padding-bottom: calc(var(--alto-cookies, 12rem) + var(--esp-4));
}

/* v1.6: el título del banner es un <p>, no un <h2>, para que el primer
   encabezado de la página sea su H1; lleva la tipografía de los títulos. */
.rtr .cookies__titulo {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--tracking-titulos);
  font-size: var(--titulo-4);
  margin-bottom: var(--esp-2);
}

.rtr .cookies__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.rtr .cookies__acciones .boton {
  min-height: 2.75rem;
  font-size: var(--texto-s);
}

.rtr .cookies__configurar {
  grid-column: 1 / -1;
  justify-self: center;
}

.rtr .cookies__panel {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.rtr .cookies__panel .casilla {
  font-size: var(--texto-s);
}

/* Solo para la galería de componentes */
.rtr .cookies--estatico {
  position: static;
}

/* Barra fija de contacto en móvil. Solo para las webs cuyo modelo de
   contacto incluye teléfono; en el resto («te llamamos») no se usa. */
.rtr .barra-movil {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3) calc(var(--esp-2) + env(safe-area-inset-bottom));
  border-top: var(--grosor-linea) solid var(--color-linea);
  background: var(--color-superficie);
  box-shadow: 0 -6px 20px -10px rgb(18 22 27 / 0.25);
}

.rtr .barra-movil .boton {
  min-height: 3rem;
}

.rtr:has(.barra-movil:not(.barra-movil--estatica)) {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}

html:has(.barra-movil:not(.barra-movil--estatica)) {
  scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

@media (min-width: 56rem) {
  .rtr .barra-movil:not(.barra-movil--estatica) {
    display: none;
  }

  .rtr:has(.barra-movil:not(.barra-movil--estatica)) {
    padding-bottom: 0;
  }

  html:has(.barra-movil:not(.barra-movil--estatica)) {
    scroll-padding-bottom: 0;
  }
}

/* Solo para la galería de componentes */
.rtr .barra-movil--estatica {
  position: static;
  max-width: 24rem;
  padding: var(--esp-2);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  box-shadow: none;
}


/* 19. COMPONENTES OPCIONALES DE FIRMA (v1.5, 04/11/2026) =====================
   Cada web que los use los pinta con sus tokens (--color-carton,
   --color-carton-oscuro, --color-sobre-carton).                              */

/* Cartón: tarjeta con forma de etiqueta de llavero (esquinas superiores
   cortadas y ojal reforzado). Para un dato que «etiqueta» algo: honorarios,
   la ficha de un inmueble. El texto va en --color-sobre-carton. */
.rtr .carton {
  --_ojal: 0.6rem;
  --_alto-ojal: 2.25rem;
  --_corte: 1.75rem;
  position: relative;
  padding: calc(var(--_alto-ojal) + var(--esp-6)) clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem) clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--color-carton);
  color: var(--color-sobre-carton);
  clip-path: polygon(var(--_corte) 0, calc(100% - var(--_corte)) 0, 100% var(--_corte), 100% 100%, 0 100%, 0 var(--_corte));
  -webkit-mask: radial-gradient(circle at 50% var(--_alto-ojal), transparent var(--_ojal), #000 calc(var(--_ojal) + 0.5px));
  mask: radial-gradient(circle at 50% var(--_alto-ojal), transparent var(--_ojal), #000 calc(var(--_ojal) + 0.5px));
}

.rtr .carton::before {
  content: "";
  position: absolute;
  top: calc(var(--_alto-ojal) - var(--_ojal) - 0.4rem);
  left: 50%;
  width: calc(2 * var(--_ojal) + 0.8rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border: 0.4rem solid var(--color-carton-oscuro);
  border-radius: 50%;
}

.rtr .carton > * + * {
  margin-top: var(--esp-4);
}

.rtr .carton__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-2);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.1;
}

.rtr .carton ul {
  display: grid;
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
}

.rtr .carton li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.rtr .carton .icono {
  flex: none;
  margin-top: 0.2em;
}

.rtr .carton a {
  color: inherit;
}

.rtr .carton :focus-visible {
  outline-color: var(--color-sobre-carton);
}

/* Tablero: ilustración en SVG en línea de un tablero de llaves con ganchos
   rotulados y un cartón colgado de todos a la vez (los canales por los que
   se mueve algo). El SVG lleva <title>; lo que dice también va en el texto. */
.rtr .tablero {
  --tablero-fondo: var(--color-fondo);
  margin: 0;
  max-width: 34rem;
}

.rtr .portada--marca .tablero {
  --tablero-fondo: var(--color-marca);
}

.rtr .tablero svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Dos composiciones: ancha y estrecha (en móvil ningún texto baja de 14 px) */
.rtr .tablero__estrecho {
  display: none;
}

@media (max-width: 40rem) {
  .rtr .tablero__ancho {
    display: none;
  }

  .rtr .tablero__estrecho {
    display: block;
    max-width: 26rem;
  }
}

.rtr .tablero text {
  font-family: var(--fuente-titulos);
}

.rtr .tablero__tabla {
  fill: var(--color-banda);
  stroke: color-mix(in srgb, var(--color-sobre-banda) 22%, transparent);
  stroke-width: 1.5;
}

.rtr .tablero__rotulo {
  fill: var(--color-sobre-banda);
  font-size: 18px;
  font-weight: 650;
}

.rtr .tablero__tornillo {
  fill: color-mix(in srgb, var(--color-sobre-banda) 80%, var(--color-banda));
}

.rtr .tablero__gancho {
  fill: none;
  stroke: color-mix(in srgb, var(--color-sobre-banda) 80%, var(--color-banda));
  stroke-width: 3.5;
  stroke-linecap: round;
}

.rtr .tablero__cuerda {
  fill: none;
  stroke: color-mix(in srgb, var(--color-carton) 35%, #fff);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.rtr .tablero__carton {
  fill: var(--color-carton);
}

.rtr .tablero__ojal {
  fill: var(--color-carton-oscuro);
}

.rtr .tablero__agujero {
  fill: var(--tablero-fondo);
}

.rtr .tablero__texto {
  fill: var(--color-sobre-carton);
}

.rtr .tablero__texto--linea {
  font-size: 16px;
  font-weight: 600;
}

.rtr .tablero__texto--grande {
  font-size: 25px;
  font-weight: 760;
}

.rtr .tablero__texto--medio {
  font-size: 15px;
  font-weight: 560;
}

.rtr .tablero figcaption {
  max-width: 30rem;
  margin-top: var(--esp-3);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.rtr .portada--marca .tablero figcaption {
  color: color-mix(in srgb, var(--color-sobre-marca) 88%, var(--color-marca));
}


/* 21. PÁGINA LARGA DE SERVICIO (v1.7, 05/11/2026) ===========================
   Para landings largas de servicio + guía:
   portada con panel tintado y dibujo, barra de secciones fija con
   píldoras, tarjetas con dibujo o tintadas, cabecera de sección en dos
   columnas, línea de tiempo de plazos, dos columnas con dibujo fijo,
   panel tintado y dibujos SVG en línea que toman los colores de la piel.
   Todo es opcional: las webs que no usan estas clases no cambian.          */

/* Portada con panel: tarjeta blanca con el texto sobre un panel tintado
   con un dibujo. En móvil, la tarjeta va arriba y el dibujo debajo. */
.rtr .portada--panel {
  padding-block: var(--esp-4) var(--esp-7);
}

.rtr .portada__panel {
  display: grid;
  gap: var(--esp-5);
  padding: clamp(0.75rem, 0.4rem + 1.6vw, 1.5rem);
  border-radius: var(--radio-xl);
  background: var(--color-tinte-1);
  overflow: hidden;
}

.rtr .portada__tarjeta {
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-2);
}

.rtr .portada__tarjeta > * + * {
  margin-top: var(--esp-4);
}

.rtr .portada__dibujo {
  display: grid;
  place-items: center;
  padding: var(--esp-2);
}

.rtr .portada__dibujo svg {
  width: 100%;
  max-width: 36rem;
  height: auto;
}

@media (min-width: 60rem) {
  .rtr .portada__panel {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    align-items: center;
    padding: var(--esp-6);
  }
}

/* Barra de secciones: píldoras que llevan a cada parte de la página,
   fija arriba al hacer scroll. base.js marca la sección visible con
   aria-current="true" ([data-nav-secciones]). En móvil se desliza de lado
   y la llamada de la derecha se oculta. */
.rtr .nav-secciones {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--color-superficie);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.rtr .nav-secciones__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.rtr .nav-secciones__lista {
  display: flex;
  flex: 1;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3) 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.rtr .nav-secciones__lista::-webkit-scrollbar {
  display: none;
}

.rtr .nav-secciones__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--esp-4);
  border: var(--grosor-linea) solid transparent;
  border-radius: 999px;
  background: var(--color-tinte-1);
  color: var(--color-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duracion) var(--curva), border-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}

.rtr .nav-secciones__lista li:nth-child(4n + 2) a { background: var(--color-tinte-2); }
.rtr .nav-secciones__lista li:nth-child(4n + 3) a { background: var(--color-tinte-3); }
.rtr .nav-secciones__lista li:nth-child(4n + 4) a { background: var(--color-tinte-4); }

.rtr .nav-secciones__lista a:hover {
  border-color: var(--color-marca);
}

/* li + a: misma especificidad que las reglas nth-child de arriba, y va después,
   así que el estado activo gana en todas las píldoras (antes solo en la 1.ª de cada 4). */
.rtr .nav-secciones__lista li a[aria-current="true"] {
  border-color: var(--color-marca);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.rtr .nav-secciones__accion {
  flex: none;
}

@media (max-width: 47.99rem) {
  .rtr .nav-secciones__accion {
    display: none;
  }
}

/* Que los saltos a una sección no queden debajo de la barra */
.rtr:has(.nav-secciones) main [id] {
  scroll-margin-top: 5rem;
}

/* Cabecera de sección en dos columnas: título a la izquierda y entradilla
   a la derecha en escritorio. */
.rtr .seccion__cabecera--dos {
  display: grid;
  gap: var(--esp-3) var(--esp-8);
  max-width: none;
}

.rtr .seccion__cabecera--dos > * + * {
  margin-top: 0;
}

@media (min-width: 64rem) {
  .rtr .seccion__cabecera--dos {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* Tarjetas: con dibujo arriba (.tarjeta__dibujo) o tintadas enteras
   (.tarjeta--tintada). El tinte sale de .tarjeta--tinte-1 … -4. */
.rtr .tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rtr .tarjeta {
  --_tinte: var(--color-tinte-1);
  display: grid;
  align-content: start;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.rtr .tarjeta--tinte-2 { --_tinte: var(--color-tinte-2); }
.rtr .tarjeta--tinte-3 { --_tinte: var(--color-tinte-3); }
.rtr .tarjeta--tinte-4 { --_tinte: var(--color-tinte-4); }

.rtr .tarjeta--tintada {
  border-color: transparent;
  background: var(--_tinte);
  padding: var(--esp-5);
}

.rtr .tarjeta__dibujo {
  display: grid;
  place-items: center;
  margin-bottom: var(--esp-2);
  padding: var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--_tinte);
  aspect-ratio: 4 / 3;
}

.rtr .tarjeta__dibujo svg {
  width: 100%;
  height: 100%;
}

.rtr .tarjeta__icono {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  color: var(--color-marca);
}

.rtr .tarjeta__icono .icono {
  width: 1.5rem;
  height: 1.5rem;
}

.rtr .tarjeta__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
}

.rtr .tarjeta__texto {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .tarjeta--tintada .tarjeta__texto {
  color: var(--color-texto);
}

.rtr .tarjeta__pie {
  margin-top: auto;
  padding-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-texto);
}

.rtr .tarjeta__pie strong {
  font-weight: var(--peso-fuerte);
}

/* Chip de estado (también dentro de la línea de tiempo) */
.rtr .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--color-superficie);
  border: var(--grosor-linea) solid var(--color-linea);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
  color: var(--color-texto);
}

/* Línea de tiempo: vertical en móvil, horizontal en escritorio. El
   momento va arriba, luego qué pasa y, si hay, el estado en un chip. */
.rtr .linea-tiempo {
  display: grid;
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rtr .linea-tiempo__paso {
  position: relative;
  padding-left: 2.25rem;
}

.rtr .linea-tiempo__paso::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-marca);
  box-shadow: 0 0 0 5px var(--color-tinte-1);
}

.rtr .linea-tiempo__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  bottom: calc(-1 * var(--esp-5) + 0.4rem);
  left: calc(0.55rem - 1px);
  width: 2px;
  background: var(--color-linea);
}

.rtr .linea-tiempo__cuando {
  color: var(--color-marca);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.rtr .linea-tiempo__titulo {
  margin-top: var(--esp-1);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.25;
}

.rtr .linea-tiempo__texto {
  margin-top: var(--esp-2);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .linea-tiempo .chip {
  margin-top: var(--esp-3);
}

@media (min-width: 60rem) {
  .rtr .linea-tiempo {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--esp-6);
  }

  .rtr .linea-tiempo__paso {
    padding: 2.5rem 0 0;
  }

  .rtr .linea-tiempo__paso::before {
    top: 0;
  }

  .rtr .linea-tiempo__paso:not(:last-child)::after {
    top: calc(0.55rem - 1px);
    bottom: auto;
    left: 1.6rem;
    right: calc(-1 * var(--esp-6));
    width: auto;
    height: 2px;
  }
}

/* Dos columnas: texto y un dibujo que se queda fijo al hacer scroll en
   escritorio. */
.rtr .dos-columnas {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .rtr .dos-columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-8);
  }

  .rtr .dos-columnas__fijo {
    position: sticky;
    top: 6rem;
  }
}

/* Panel tintado: bloque grande con fondo de tinte (precio, avisos). */
.rtr .panel {
  --_tinte: var(--color-tinte-1);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radio-xl);
  background: var(--_tinte);
}

.rtr .panel--tinte-2 { --_tinte: var(--color-tinte-2); }
.rtr .panel--tinte-3 { --_tinte: var(--color-tinte-3); }
.rtr .panel--tinte-4 { --_tinte: var(--color-tinte-4); }

/* Dibujos en SVG en línea: toman los colores de la piel con estas clases.
   El SVG lleva role="img" y <title>, o aria-hidden si es decorativo. */
.rtr .dibujo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rtr .dibujo text {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-fuerte);
}

.rtr .dibujo .d-papel { fill: var(--color-superficie); }
.rtr .dibujo .d-fondo { fill: var(--color-fondo); }
.rtr .dibujo .d-gris { fill: var(--color-linea); }
.rtr .dibujo .d-gris-fuerte { fill: var(--color-linea-campo); }
.rtr .dibujo .d-tinta { fill: var(--color-texto); }
.rtr .dibujo .d-suave { fill: var(--color-texto-suave); }
.rtr .dibujo .d-marca { fill: var(--color-marca); }
.rtr .dibujo .d-marca-tenue { fill: var(--color-marca-tenue); }
.rtr .dibujo .d-sobre-marca { fill: var(--color-sobre-marca); }
.rtr .dibujo .d-tinte-1 { fill: var(--color-tinte-1); }
.rtr .dibujo .d-tinte-2 { fill: var(--color-tinte-2); }
.rtr .dibujo .d-tinte-3 { fill: var(--color-tinte-3); }
.rtr .dibujo .d-tinte-4 { fill: var(--color-tinte-4); }
.rtr .dibujo .d-estrella { fill: var(--color-estrella); }
.rtr .dibujo .d-ok { fill: var(--color-ok); }
.rtr .dibujo .d-ok-tenue { fill: var(--color-ok-tenue); }
.rtr .dibujo .d-error { fill: var(--color-error); }
.rtr .dibujo .d-aviso-tenue { fill: var(--color-aviso-tenue); }

.rtr .dibujo .d-trazo,
.rtr .dibujo .d-trazo-marca,
.rtr .dibujo .d-trazo-ok,
.rtr .dibujo .d-trazo-gris,
.rtr .dibujo .d-trazo-papel {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtr .dibujo .d-trazo { stroke: var(--color-texto); }
.rtr .dibujo .d-trazo-marca { stroke: var(--color-marca); }
.rtr .dibujo .d-trazo-ok { stroke: var(--color-ok); }
.rtr .dibujo .d-trazo-gris { stroke: var(--color-linea); }
.rtr .dibujo .d-trazo-papel { stroke: var(--color-superficie); }

.rtr .dibujo .d-borde { stroke: var(--color-linea); stroke-width: 1.5; }
.rtr .dibujo .d-sombra { fill: var(--color-texto); opacity: 0.07; }

/* Portada con panel: título algo menor para que la tarjeta no lo parta en
   demasiadas líneas. */
.rtr .portada--panel .portada__titulo {
  font-size: clamp(2.1rem, 1.6rem + 2.1vw, 3.3rem);
}

@media (min-width: 60rem) {
  .rtr .portada--panel .portada__panel {
    grid-template-columns: minmax(0, 39rem) minmax(0, 1fr);
  }
}

/* Productos: tarjeta de compra con dibujo sobre tinte, nombre, precio y
   botón. Si no hay precio cerrado, .producto__precio--consulta. */
.rtr .productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rtr .producto {
  --_tinte: var(--color-tinte-1);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  text-align: center;
}

.rtr .producto--tinte-2 { --_tinte: var(--color-tinte-2); }
.rtr .producto--tinte-3 { --_tinte: var(--color-tinte-3); }
.rtr .producto--tinte-4 { --_tinte: var(--color-tinte-4); }

.rtr .producto__dibujo {
  display: grid;
  place-items: center;
  margin-bottom: var(--esp-2);
  padding: var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--_tinte);
  aspect-ratio: 1 / 1;
}

.rtr .producto__dibujo svg {
  width: 100%;
  height: 100%;
}

.rtr .producto__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
}

.rtr .producto__texto {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.rtr .producto__precio {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-2);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.1;
}

.rtr .producto__precio small {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

.rtr .producto__precio--consulta {
  font-size: var(--titulo-3);
}

.rtr .producto .boton {
  width: 100%;
  margin-top: var(--esp-2);
}

/* Desplegables de la cabecera: un botón abre un submenú con título y una
   línea de cada página. En escritorio flota debajo (también al pasar el
   ratón); en móvil se abre dentro del menú. Sin JavaScript se ven al
   recibir el foco (escritorio) o siempre (móvil). base.js lleva el
   aria-expanded, Esc y el clic fuera. */
.rtr .cabecera__desplegable {
  position: relative;
}

.rtr .cabecera__desplegar {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: var(--esp-2) 0;
  border: 0;
  background: none;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

.rtr .cabecera__desplegar:hover,
.rtr .cabecera__desplegar[aria-expanded="true"] {
  color: var(--color-marca);
}

.rtr .cabecera__desplegar .icono {
  width: 1em;
  height: 1em;
  transition: transform var(--duracion) var(--curva);
}

.rtr .cabecera__desplegar[aria-expanded="true"] .icono {
  transform: rotate(180deg);
}

.rtr .cabecera__nav .cabecera__submenu {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

.rtr .cabecera__desplegar[aria-expanded="true"] + .cabecera__submenu {
  display: flex;
}

.rtr .cabecera__nav .cabecera__submenu a {
  display: grid;
  gap: 0.1rem;
  padding: var(--esp-3);
  border-radius: var(--radio-m);
  color: var(--color-texto);
  text-decoration: none;
}

.rtr .cabecera__nav .cabecera__submenu a:hover {
  background: var(--color-tinte-1);
  color: var(--color-texto);
  text-decoration: none;
}

.rtr .cabecera__submenu-titulo {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.rtr .cabecera__submenu-texto {
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-suave);
}

@media (min-width: 56rem) {
  .rtr .cabecera__nav .cabecera__submenu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: -1rem;
    z-index: 30;
    min-width: 20rem;
    padding: var(--esp-2);
    border: var(--grosor-linea) solid var(--color-linea);
    border-radius: var(--radio-l);
    background: var(--color-superficie);
    box-shadow: var(--sombra-2);
  }

  /* Puente invisible para que el submenú no se cierre al bajar el ratón */
  .rtr .cabecera__nav .cabecera__submenu::before {
    content: "";
    position: absolute;
    inset: -0.8rem 0 auto;
    height: 0.8rem;
  }

  .rtr .cabecera__desplegable:hover > .cabecera__submenu,
  html:not(.js) .cabecera__desplegable:focus-within > .cabecera__submenu {
    display: flex;
  }
}

@media (max-width: 55.99rem) {
  html:not(.js) .cabecera__nav .cabecera__submenu {
    display: flex;
  }

  .js .rtr .cabecera__desplegar {
    width: 100%;
    justify-content: space-between;
    min-height: 3rem;
    font-size: var(--texto-m);
  }

  .js .rtr .cabecera__nav .cabecera__submenu {
    padding: 0 0 var(--esp-2) var(--esp-3);
    border-top: 0;
  }

  .js .rtr .cabecera__nav .cabecera__submenu li {
    border-bottom: 0;
  }

  .js .rtr .cabecera__nav .cabecera__submenu li > a {
    display: grid;
    align-items: start;
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-3);
    font-size: inherit;
  }
}

/* Pie en columnas: marca y titular a la izquierda, columnas de enlaces y,
   abajo, la fila legal. Las columnas solo llevan páginas que existen. */
.rtr .pie--columnas .pie__interior {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-6);
}

@media (min-width: 48rem) {
  .rtr .pie--columnas .pie__interior {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

.rtr .pie__titulo {
  margin-bottom: var(--esp-3);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-m);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  color: var(--color-sobre-banda);
}

.rtr .pie__columna ul {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rtr .pie__columna a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--color-sobre-banda-suave);
  text-decoration: none;
}

.rtr .pie__columna a:hover {
  color: var(--color-sobre-banda);
  text-decoration: underline;
}

.rtr .pie--columnas .pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  margin-top: var(--esp-7);
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid color-mix(in srgb, var(--color-sobre-banda) 18%, transparent);
}

.rtr .pie--columnas .pie__legal {
  margin: 0;
  padding: 0;
  border: 0;
}

.rtr .pie--columnas .pie__enlaces a,
.rtr .pie--columnas button.pie__boton-enlace {
  font-size: var(--texto-xs);
}

/* v1.7.1: estados y detalle de los componentes de la página larga */
.rtr .portada__tarjeta {
  border: var(--grosor-linea) solid color-mix(in srgb, var(--color-marca) 10%, transparent);
}

.rtr .portada__tarjeta .portada__titulo {
  text-wrap: balance;
}

.rtr .portada--panel .portada__confianza {
  padding-top: var(--esp-3);
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.rtr .nav-secciones {
  background: color-mix(in srgb, var(--color-superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rtr .nav-secciones__lista a:hover {
  transform: translateY(-1px);
}

.rtr .nav-secciones__lista a:focus-visible {
  outline-offset: 2px;
}

.rtr .tarjeta,
.rtr .producto {
  transition: transform var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva), border-color var(--duracion) var(--curva);
}

.rtr .tarjeta:hover,
.rtr .producto:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  border-color: color-mix(in srgb, var(--color-marca) 22%, var(--color-linea));
}

.rtr .tarjeta--tintada:hover {
  border-color: color-mix(in srgb, var(--color-marca) 18%, transparent);
}

.rtr .tarjeta__icono {
  box-shadow: var(--sombra-1);
}

.rtr .tarjeta__dibujo,
.rtr .producto__dibujo {
  overflow: hidden;
}

.rtr .tarjeta__dibujo svg,
.rtr .producto__dibujo svg {
  transition: transform calc(var(--duracion) * 2) var(--curva);
}

.rtr .tarjeta:hover .tarjeta__dibujo svg,
.rtr .producto:hover .producto__dibujo svg {
  transform: scale(1.04);
}

.rtr .producto__precio {
  color: var(--color-marca);
}

.rtr .producto__precio--consulta {
  color: var(--color-texto);
}

.rtr .linea-tiempo__paso::before {
  box-shadow: 0 0 0 5px var(--color-tinte-1), 0 0 0 6px color-mix(in srgb, var(--color-marca) 25%, transparent);
}

.rtr .panel {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-marca) 8%, transparent);
}

.rtr .chip {
  box-shadow: var(--sombra-1);
}

.rtr .seccion__cabecera--dos h2 {
  text-wrap: balance;
}

.rtr .faq__item {
  transition: background-color var(--duracion) var(--curva);
}

.rtr .faq__item[open] {
  background: var(--color-tinte-1);
  border-radius: var(--radio-m);
}

.rtr .faq__item[open] .faq__pregunta,
.rtr .faq__item[open] .faq__respuesta {
  padding-inline: var(--esp-4);
}

.rtr .cabecera__nav .cabecera__submenu a {
  transition: background-color var(--duracion) var(--curva);
}


/* v1.7.2: menú grande («Productos») con grupos en columnas y tarjetas que
   son un enlace entero (soluciones). */
.rtr .cabecera__interior {
  position: relative;
}

.rtr .cabecera__grupo-titulo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
  color: var(--color-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.rtr .cabecera__nav .cabecera__grupo ul {
  display: grid;
  gap: 0;
  border: 0;
}

.rtr .cabecera__nav .cabecera__grupo li {
  border: 0;
}

@media (min-width: 56rem) {
  .rtr .cabecera__desplegable--mega {
    position: static;
  }

  .rtr .cabecera__nav .cabecera__submenu--mega {
    left: 0;
    right: 0;
    top: 100%;
    min-width: 0;
    padding: var(--esp-4);
    gap: var(--esp-2) var(--esp-4);
  }

  .rtr .cabecera__nav .cabecera__desplegar[aria-expanded="true"] + .cabecera__submenu--mega,
  .rtr .cabecera__nav .cabecera__desplegable:hover > .cabecera__submenu--mega,
  html:not(.js) .cabecera__nav .cabecera__desplegable:focus-within > .cabecera__submenu--mega {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rtr .cabecera__grupo + .cabecera__grupo {
    padding-left: var(--esp-4);
    border-left: var(--grosor-linea) solid var(--color-linea);
  }
}

@media (max-width: 55.99rem) {
  .js .rtr .cabecera__nav .cabecera__submenu--mega {
    gap: var(--esp-2);
  }

  .js .rtr .cabecera__nav .cabecera__grupo ul {
    border-top: 0;
  }
}

/* Tarjeta que es un enlace entero: el título lleva el enlace y su ::after
   cubre la tarjeta; la flecha va arriba a la derecha. Dentro de un panel,
   el icono toma el tinte de la tarjeta. */
.rtr .tarjeta--enlace {
  position: relative;
  padding-right: var(--esp-7);
}

.rtr .tarjeta--enlace .tarjeta__titulo a {
  color: inherit;
  text-decoration: none;
}

.rtr .tarjeta--enlace .tarjeta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rtr .tarjeta--enlace .tarjeta__titulo a:focus-visible {
  outline: none;
}

.rtr .tarjeta--enlace:focus-within {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.rtr .tarjeta--enlace:hover .tarjeta__titulo a {
  color: var(--color-marca);
}

.rtr .tarjeta__flecha {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--_tinte);
  color: var(--color-marca);
  transition: transform var(--duracion) var(--curva);
}

.rtr .tarjeta--enlace:hover .tarjeta__flecha {
  transform: translateX(3px);
}

.rtr .tarjeta:not(.tarjeta--tintada) .tarjeta__icono {
  background: var(--_tinte);
  box-shadow: none;
}

.rtr .panel__titulo {
  margin-bottom: var(--esp-5);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
}

.rtr .panel + .panel {
  margin-top: var(--esp-5);
}

.rtr .tarjeta__numero {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  color: var(--color-marca);
}

/* Lista con marcas en dos columnas (señales, qué incluye) */
.rtr .lista-check {
  display: grid;
  gap: var(--esp-3) var(--esp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .rtr .lista-check--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rtr .lista-check li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-2);
  align-items: start;
}

.rtr .lista-check .icono {
  margin-top: 0.15em;
  color: var(--color-marca);
}

/* Un solo momento de movimiento: lo que lleva .d-aparece entra al cargar
   (sello, chip de estado). Con movimiento reducido se ve quieto. */
@media (prefers-reduced-motion: no-preference) {
  .rtr .dibujo--animado .d-aparece {
    transform-box: fill-box;
    transform-origin: center;
    animation: dibujo-aparece 700ms var(--curva) 500ms both;
  }

  .rtr .dibujo--animado .d-aparece--2 {
    animation-delay: 900ms;
  }
}

@keyframes dibujo-aparece {
  from {
    opacity: 0;
    transform: scale(1.25) rotate(-4deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .rtr .nav-secciones__lista a[aria-current="true"] {
    border-width: 2px;
  }

  .rtr .linea-tiempo__paso::before {
    forced-color-adjust: none;
    background: CanvasText;
    box-shadow: none;
  }
}


/* 20. COLORES FORZADOS, MOVIMIENTO REDUCIDO E IMPRESIÓN ================== */

@media (forced-colors: active) {
  .rtr .faq__pregunta::after,
  .rtr .info-datos summary::before,
  .rtr .campo__error::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .rtr .boton,
  .rtr .opcion,
  .rtr .nota,
  .rtr .resultado__estado {
    border: 1px solid CanvasText;
  }

  .rtr .luz {
    forced-color-adjust: none;
    background: Canvas;
    border: 1px solid CanvasText;
  }

  .rtr .luces[data-luz="verde"] .luz--verde,
  .rtr .luces[data-luz="ambar"] .luz--ambar,
  .rtr .luces[data-luz="rojo"] .luz--roja {
    background: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rtr *,
  .rtr *::before,
  .rtr *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rtr .boton[aria-busy="true"]::after {
    animation: none;
    border-right-color: var(--_texto);
    opacity: 0.6;
  }
}

@media print {
  .rtr .cabecera__nav,
  .rtr .cabecera__menu,
  .rtr .cabecera__accion,
  .rtr .cookies,
  .rtr .barra-movil,
  .rtr .herramienta__navegacion,
  .rtr .formulario,
  .rtr .salto {
    display: none !important;
  }

  .rtr {
    background: #fff;
    color: #000;
  }

  .rtr .pie {
    background: none;
    color: #000;
  }

  .rtr .pie a {
    color: #000;
  }

  .rtr .prosa a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}


/* ==========================================================================
   v1.8 · 11/11/2026 · tras una revisión de diseño. Arreglos y lectura (para
   todas las webs) y variantes opcionales (solo las webs que pongan la clase).
   ========================================================================== */

/* Arreglo: dentro de .prosa, la lista con marcas se pegaba al párrafo de
   arriba (.lista-check { margin: 0 } anulaba el ritmo de .prosa). */
.rtr .prosa > .lista-check {
  margin-top: var(--esp-4);
}

/* Lectura: la primera frase de cada sección responde al título, así que va
   en color de texto (como la de la portada), no en gris. */
.rtr .seccion__entradilla,
.rtr .linea-tiempo__texto,
.rtr .paso__texto {
  color: var(--color-texto);
}

.rtr .tarjeta--tintada .tarjeta__texto {
  font-size: var(--texto-m);
}

/* Lectura: suelo de 15 px para chips, el desplegable de protección de datos
   y la línea legal del pie. */
.rtr .chip,
.rtr .info-datos summary,
.rtr .pie__legal {
  font-size: var(--texto-s);
}

/* Subrayador: <mark> para las dos o tres frases que sostienen la página.
   Fondo del tinte 2 de la piel y texto en color de texto. */
.rtr mark {
  padding: 0.04em 0.18em;
  border-radius: 2px;
  background: var(--color-tinte-2);
  color: var(--color-texto);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Lista de «no»: aspas en gris para que no se confundan con los vistos. */
.rtr .lista-check--no .icono {
  color: var(--color-texto-suave);
}

/* Banner de cookies en móvil: más bajo, con «Configurar» en la misma fila
   que «Rechazar» y «Aceptar» (los dos con el mismo peso). */
@media (max-width: 39.99rem) {
  .rtr .cookies {
    padding: var(--esp-3) var(--esp-4);
  }

  .rtr .cookies__titulo {
    margin-bottom: var(--esp-1);
  }

  .rtr .cookies__acciones {
    grid-template-columns: 1fr 1fr auto;
    margin-top: var(--esp-3);
  }

  .rtr .cookies__configurar {
    grid-column: auto;
    justify-self: stretch;
    padding-inline: var(--esp-3);
  }
}

/* Opcional · cabecera fija con la llamada visible en móvil (webs «te
   llamamos»: lleva a #formulario, no añade ningún canal). */
.rtr .cabecera--fija {
  position: sticky;
  top: 0;
}

html:has(.cabecera--fija) {
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-3));
}

@media (max-width: 55.99rem) {
  .rtr .cabecera--fija .cabecera__marca {
    order: 0;
  }

  .rtr .cabecera--fija .cabecera__accion {
    order: 1;
    display: inline-flex;
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-s);
  }

  .rtr .cabecera--fija .cabecera__menu {
    order: 2;
  }

  .rtr .cabecera--fija .cabecera__nav {
    order: 3;
    max-height: calc(100dvh - var(--alto-cabecera));
    overflow-y: auto;
  }

  .rtr .cabecera--fija .cabecera__nav > .boton {
    display: none;
  }
}

/* Opcional · portada con panel sin marcos en móvil: el texto usa todo el
   ancho y el botón sube a la primera pantalla. */
@media (max-width: 55.99rem) {
  .rtr .portada--plana-movil .portada__panel {
    gap: var(--esp-6);
    padding: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .rtr .portada--plana-movil .portada__tarjeta {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .rtr .portada--plana-movil .portada__dibujo {
    padding: 0;
  }
}

/* Opcional · línea de tiempo siempre en vertical (para ponerla en una
   columna junto al título). */
@media (min-width: 60rem) {
  .rtr .linea-tiempo--vertical {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-5);
  }

  .rtr .linea-tiempo--vertical .linea-tiempo__paso {
    padding: 0 0 0 2.25rem;
  }

  .rtr .linea-tiempo--vertical .linea-tiempo__paso::before {
    top: 0.2rem;
  }

  .rtr .linea-tiempo--vertical .linea-tiempo__paso:not(:last-child)::after {
    top: 1.7rem;
    right: auto;
    bottom: calc(-1 * var(--esp-5) + 0.4rem);
    left: calc(0.55rem - 1px);
    width: 2px;
    height: auto;
  }
}

/* Lectura: la información básica de protección de datos, a 15 px. */
.rtr .info-datos {
  font-size: var(--texto-s);
}

/* Arreglo: entre 60 y 72rem el dibujo de .portada--panel se quedaba en unos
   240 px y sus textos bajaban de 12 px; se le da una columna mínima. */
@media (min-width: 60rem) and (max-width: 71.99rem) {
  .rtr .portada--panel .portada__panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr);
  }
}

/* Opcional · portada con panel alineada arriba: el dibujo empieza a la
   altura del H1 en lugar de quedar centrado con aire encima. */
@media (min-width: 60rem) {
  .rtr .portada--arriba .portada__panel {
    align-items: start;
  }
}

/* Figura con su pie: el dibujo y, debajo, la fuente en .fuente. */
.rtr .figura > .fuente {
  margin-top: var(--esp-3);
}

/* ==========================================================================
   PIEL · reclamatarjetasrevolving.es · v1 · 11/11/2026
   Dirección: «La regla del Supremo, en tinta azul». Papel blanco y tinta
   casi negra de los documentos judiciales, títulos en serif de documento,
   y un solo color fuerte: el azul de bolígrafo con el que se anota y se
   firma un contrato. El amarillo de subrayador marca lo que importa.

   Comprobado (11/11/2026):
   - Texto 17,4:1 sobre fondo; texto suave 7,6:1 sobre fondo y ≥ 6,7:1 sobre
     los cuatro tintes; borde de campo 4,0:1 sobre superficie.
   - Sobre-marca 8,4:1 sobre marca; marca 7,2:1 sobre su tenue.
   - Estados: ok 6,1:1, aviso 6,1:1 y error 5,8:1 sobre su tenue.
   - Foco 8,2:1 sobre fondo y 7,6:1 sobre superficie alternativa.
   - Distinta de las demás pieles de la cartera (11/11/2026): es la única
     con marca azul y fondo blanco frío; ninguna usa PT Serif ni Public Sans.
   - Pendiente: que el titular la apruebe.
   ========================================================================== */

/* Fuentes servidas desde la propia web (OFL). Se precarga solo la del texto. */
@font-face {
  font-family: "PT Serif";
  src: url("../fuentes/pt-serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fuentes/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fuentes/public-sans-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color · superficies: papel blanco, sin crema */
  --color-fondo: #fcfcfd;
  --color-superficie: #ffffff;
  --color-superficie-alt: #f2f4f8;
  --color-seccion-alt: #f5f7fa;
  --color-texto: #121725;
  --color-texto-suave: #4a5266;
  --color-linea: #dde1e9;
  --color-linea-campo: #767f93;

  /* Color · marca: azul de bolígrafo */
  --color-marca: #2340b8;
  --color-marca-intensa: #1a3092;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e9edfb;
  --color-foco: #2340b8;

  /* Color · banda oscura: tinta */
  --color-banda: #0e1322;
  --color-sobre-banda: #eef0f6;
  --color-sobre-banda-suave: #aab2c5;

  /* Color · estados */
  --color-ok: #17663a;
  --color-ok-tenue: #e5f3ea;
  --color-aviso: #8a4b00;
  --color-aviso-tenue: #fdf1df;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Color · luces (la web no usa semáforo; valores de la base) */
  --color-luz-apagada: #3a4048;
  --color-luz-verde: #1fcb74;
  --color-luz-ambar: #ffb020;
  --color-luz-roja: #ff4d4f;

  /* Color · tintes: papel azulado, subrayador amarillo, verde de visto
     bueno y gris de fotocopia */
  --color-tinte-1: #e9edfb;
  --color-tinte-2: #fff3b0;
  --color-tinte-3: #e3f2e8;
  --color-tinte-4: #eceef3;
  --color-estrella: #c98a00;

  /* Tipografía: dos familias hechas para documentos públicos. PT Serif
     (tipos públicos de Rusia) para títulos y Public Sans (administración
     de EE. UU.) para leer. Ninguna otra web de la cartera las usa. */
  --fuente-titulos: "PT Serif", Georgia, "Times New Roman", serif;
  --fuente-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-fuerte: 600;
  --peso-titulos: 700;
  --tracking-titulos: -0.01em;
  --interlineado: 1.62;

  /* Forma: esquinas de papel, casi rectas */
  --radio-s: 3px;
  --radio-m: 5px;
  --radio-l: 5px;
  --radio-xl: 6px;
  --radio-boton: 6px;
  --radio-campo: 4px;
  --sombra-1: 0 1px 2px rgb(14 19 34 / 0.07), 0 1px 3px rgb(14 19 34 / 0.05);
  --sombra-2: 0 22px 44px -22px rgb(14 19 34 / 0.30), 0 3px 8px -3px rgb(14 19 34 / 0.10);

  /* Maquetación (normalmente no se toca) */
  --ancho-pagina: 72rem;
}

/* Elementor: el bloque ocupa todo el ancho, sin márgenes del contenedor */
.e-con:has(.rtr){--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--content-width:100%;--gap:0px;--row-gap:0px;padding:0!important;max-width:100%!important}
.e-con:has(.rtr)>.e-con-inner{max-width:100%!important;padding:0!important;gap:0!important}
.elementor-section:has(.rtr)>.elementor-container{max-width:100%!important}
.elementor-column:has(.rtr)>.elementor-widget-wrap{padding:0!important}
.elementor-widget-html:has(.rtr){width:100%;max-width:100%;margin:0!important}

/* 2.3.1 · Menú de siete enlaces: en pantallas medianas se aprieta para caber en una fila. */
@media (min-width:56rem) and (max-width:79.99rem){.rtr .cabecera__marca{font-size:1rem}.rtr .cabecera__nav{gap:.5rem}.rtr .cabecera__nav ul{gap:0;flex-wrap:nowrap}.rtr .cabecera__nav li>a{padding-left:.45rem;padding-right:.45rem;font-size:.875rem;white-space:nowrap}.rtr .cabecera__accion{padding-left:.8rem;padding-right:.8rem;font-size:.875rem}}