/* ═══════════════════════════════════════════════════════════════════════════
   Estructura: contenedor, secciones, cabecera y pie.
   ═══════════════════════════════════════════════════════════════════════════ */

.rr-wrap {
  width: 100%;
  max-width: var(--rr-ancho);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, .6rem + 2.6vw, 2.5rem);
}

.rr-seccion { padding-block: var(--rr-seccion); position: relative; }

/* Superficie alterna. Se aplica desde la plantilla, alternando, para que el ojo
   sepa dónde acaba un bloque y empieza otro sin necesidad de líneas. */
.rr-seccion--surface { background: var(--rr-surface); }

/* El panel de pergamino: la mitad clara del vinilo. Cambia TODOS los colores de
   texto de dentro, porque sobre pergamino el rojo normal da 2,36:1 y no se lee. */
.rr-seccion--pergamino {
  background: var(--rr-pergamino);
  color: var(--rr-sobre-rojo);
}
.rr-seccion--pergamino h1,
.rr-seccion--pergamino h2,
.rr-seccion--pergamino h3 { color: var(--rr-sobre-pergamino); }
.rr-seccion--pergamino a { color: var(--rr-rojo-hondo); }
.rr-seccion--pergamino .rr-rotulo { color: var(--rr-rojo-hondo); }

/* La entradilla del encabezado es gris claro, pensado para fondo oscuro: sobre
   pergamino daba 1,64:1. */
.rr-seccion--pergamino .rr-encabezado p { color: var(--rr-sobre-pergamino-tenue); }

/* Y las tarjetas.
   Se quedaban con su fondo oscuro dentro del panel claro, y la regla de arriba
   les metía texto oscuro encima: títulos a 1,13:1, o sea invisibles. Además,
   una tarjeta negra sobre pergamino se lee como un error de maquetación, no
   como una decisión.

   Dentro del panel, la tarjeta se aclara y todo su texto se oscurece. */
.rr-seccion--pergamino .rr-card {
  background: var(--rr-pergamino-claro);
  border-color: rgba(20, 16, 15, .16);
}
.rr-seccion--pergamino .rr-card p,
.rr-seccion--pergamino .rr-card__lista li { color: var(--rr-sobre-pergamino-tenue); }
.rr-seccion--pergamino .rr-card__num { color: var(--rr-rojo-hondo); }
.rr-seccion--pergamino .rr-card__lista li::before { background: var(--rr-rojo-hondo); }
.rr-seccion--pergamino .rr-card__enlace,
.rr-seccion--pergamino .rr-card__aqui { color: var(--rr-rojo-hondo); }
.rr-seccion--pergamino .rr-card--aqui { border-color: var(--rr-rojo-hondo); }

/* Los pasos y las listas de comprobación, lo mismo. */
.rr-seccion--pergamino .rr-paso p,
.rr-seccion--pergamino .rr-checks li { color: var(--rr-sobre-pergamino-tenue); }
.rr-seccion--pergamino .rr-checks strong { color: var(--rr-sobre-pergamino); }
.rr-seccion--pergamino .rr-checks li::before { background: var(--rr-rojo-hondo); }
.rr-seccion--pergamino .rr-paso__num { background: var(--rr-rojo-hondo); color: #fff; }

/* ── Cabecera ──────────────────────────────────────────────────────────────
   Pegada arriba y con el negro del remolque. Sin `backdrop-filter`: crea un
   bloque contenedor nuevo y rompe cualquier `position: fixed` de dentro, que es
   un fallo caro de encontrar. */
.rr-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--rr-void);
  border-bottom: 1px solid transparent;
  transition: border-color var(--rr-rapido) var(--rr-ease);
}
.rr-header.is-fija { border-bottom-color: var(--rr-line); }

.rr-header__fila {
  display: flex; align-items: center; gap: var(--rr-e4);
  min-height: 4.75rem;
}

.rr-marca { display: flex; align-items: center; gap: .7rem; flex: none; text-decoration: none; }
.rr-marca img { width: auto; height: 2.6rem; }
.rr-marca__texto { display: flex; flex-direction: column; line-height: 1; }
.rr-marca__nombre {
  font-family: var(--rr-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: .05em;
  color: var(--rr-texto); text-transform: uppercase;
}
.rr-marca__bajada {
  font-family: var(--rr-rotulo); font-size: .68rem;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--rr-texto-tenue); margin-top: .22rem;
}

.rr-nav { margin-left: auto; display: flex; align-items: center; gap: var(--rr-e4); }
.rr-nav__lista {
  display: flex; align-items: center; gap: clamp(.9rem, .3rem + 1.2vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
}
.rr-nav__lista li { margin: 0; }
.rr-nav__lista a {
  /* `nowrap` e `inline-flex`: sin esto un enlace de dos palabras parte en dos
     líneas al estrechar y la cabecera pega un salto de alto. */
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--rr-rotulo); font-weight: 500;
  font-size: .96rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rr-texto); text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.rr-nav__lista a:hover { color: var(--rr-rojo-vivo); }
.rr-nav__lista a[aria-current] {
  color: var(--rr-rojo);
  border-bottom-color: var(--rr-rojo);
}

/* ── Menú en pantallas pequeñas ────────────────────────────────────────────
   El corte va en 1049px y no en 900: entre esas dos medidas los siete enlaces
   ya no caben sin apretarse, aunque técnicamente quepan. */
.rr-burger {
  display: none;
  background: none; border: 1px solid var(--rr-line);
  border-radius: var(--rr-r2);
  color: var(--rr-texto);
  width: 2.9rem; height: 2.9rem;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.rr-burger span,
.rr-burger span::before,
.rr-burger span::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--rr-rapido) var(--rr-ease), opacity var(--rr-rapido);
}
.rr-burger span { position: relative; }
.rr-burger span::before { content: ""; position: absolute; top: -6px; }
.rr-burger span::after  { content: ""; position: absolute; top: 6px; }
.rr-burger[aria-expanded="true"] span { background: transparent; }
.rr-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.rr-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1049px) {
  .rr-burger { display: flex; margin-left: auto; }
  .rr-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--rr-void);
    border-bottom: 1px solid var(--rr-line);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--rr-e3) 0 var(--rr-e4);
    margin-left: 0;
    display: none;
  }
  .rr-nav.is-abierto { display: flex; }
  .rr-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .rr-nav__lista a {
    padding: .85rem clamp(1.15rem, .6rem + 2.6vw, 2.5rem);
    border-bottom: 1px solid var(--rr-line);
    font-size: 1.05rem;
  }
  .rr-nav__lista a[aria-current] { border-bottom-color: var(--rr-line); }
  .rr-nav .rr-btn { margin: var(--rr-e3) clamp(1.15rem, .6rem + 2.6vw, 2.5rem) 0; }
}

/* ── Rejillas ──────────────────────────────────────────────────────────────
   `auto-fit` con mínimo: las tarjetas se reparten solas sin media queries. */
.rr-grid { display: grid; gap: var(--rr-e4); }

/* Columnas fijas por tramo, NO `auto-fit`.
   Con auto-fit el navegador mete las que quepan, y eso convertía una lista de
   cuatro en 3+1 y una de cinco en 4+1: una tarjeta sola y ancha al final, que
   es lo que más delata una rejilla mal pensada. Fijando el número por tramo, el
   reparto es siempre par o deliberado. */
.rr-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .rr-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.rr-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .rr-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .rr-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* La rejilla de modalidades lleva cinco o seis tarjetas.
   Tres columnas reparten bien las dos cantidades —6 en 3+3, 5 en 3+2— y ninguna
   deja una tarjeta sola. Cuatro columnas dejarían 5 en 4+1. */
.rr-grid--tarjetas { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .rr-grid--tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rr-grid--tarjetas { grid-template-columns: repeat(3, 1fr); } }

/* ── Pie ───────────────────────────────────────────────────────────────────*/
.rr-footer {
  background: var(--rr-void);
  border-top: 1px solid var(--rr-line);
  padding-block: var(--rr-e6) var(--rr-e4);
}
.rr-footer__grid {
  display: grid; gap: var(--rr-e5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.rr-footer h2 {
  font-size: .82rem; font-family: var(--rr-rotulo);
  letter-spacing: .19em; color: var(--rr-texto-tenue);
  margin-bottom: var(--rr-e3);
}
.rr-footer ul { list-style: none; padding: 0; margin: 0; }
.rr-footer li { margin-bottom: var(--rr-e2); }
.rr-footer a { color: var(--rr-texto); text-decoration: none; }
.rr-footer a:hover { color: var(--rr-rojo-vivo); text-decoration: underline; }

/* Sobre negro puro, --rr-texto-suave daba 3,78:1 a 12px. */
.rr-footer__legal {
  margin-top: var(--rr-e5);
  padding-top: var(--rr-e3);
  border-top: 1px solid var(--rr-line);
  display: flex; flex-wrap: wrap; gap: var(--rr-e2) var(--rr-e4);
  align-items: center; justify-content: space-between;
  font-size: var(--rr-t-xs); color: var(--rr-texto-tenue);
}

/* En móvil los enlaces del pie median 20px de alto. Un dedo no acierta en 20px:
   con este relleno pasan de 32, que es el mínimo cómodo. */
@media (max-width: 699px) {
  .rr-footer a { display: inline-block; padding-block: .4rem; }
  .rr-footer li { margin-bottom: var(--rr-e1); }
}

/* La banda de cifras monta sobre el héroe. Es lo único que rompe el ritmo de
   secciones, y por eso tiene su propio modificador en lugar de un style suelto
   en la plantilla: si mañana hay que ajustar cuánto solapa, se toca aquí y vale
   para donde se use. */
.rr-seccion--solapa {
  padding-block: 0;
  margin-top: calc(var(--rr-e5) * -1);
  position: relative;
  z-index: 2;
}

.rr-footer__intro {
  margin-top: var(--rr-e3);
  color: var(--rr-texto-tenue);
  font-size: var(--rr-t-sm);
}
.rr-footer__zona { color: var(--rr-texto-tenue); }

/* ── La última, cuando se queda sola ───────────────────────────────────────
   En dos columnas, una lista de tres queda 2+1 y una de cinco 2+2+1: siempre
   sobra una abajo. No es un fallo de maquetación —es aritmética— pero una
   tarjeta suelta a media anchura se lee como un descuido.

   Si el total es impar, la última ocupa las dos columnas. Deja de parecer que
   sobra y pasa a parecer el cierre de la lista.

   `:last-child:nth-child(odd)` es la forma de preguntar «¿el total es impar?»
   sin saber cuántos elementos hay: sólo se cumple si el último ocupa una
   posición impar, y eso sólo pasa cuando la cuenta es impar. */
@media (min-width: 560px) and (max-width: 999px) {
  .rr-grid--tarjetas > *:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 620px) and (max-width: 959px) {
  .rr-grid--3 > *:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 700px) {
  .rr-grid--2 > *:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ── Migas en móvil ────────────────────────────────────────────────────────
   «Inicio» medía 25px de alto. Es el enlace de vuelta y se pulsa con el pulgar
   en la parte alta de la pantalla, que es justo donde peor se acierta. */
@media (max-width: 699px) {
  .rr-migas a { display: inline-block; padding-block: .3rem; }
}