/* ═══════════════════════════════════════════════════════════════════════════
   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); }

/* «Calcula tu evento» es más largo que el «Presupuesto» de antes y, con nueve
   enlaces al lado, el botón se partía en dos líneas (83 px de alto). En una
   línea y con algo menos de relleno cabe entero. */
.rr-nav > .rr-btn { flex: none; white-space: nowrap; padding: .85rem 1.25rem; }
.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 1239px: por debajo, los nueve enlaces y el botón «Calcula tu
   evento» no caben en una línea y la cabecera se sale de la pantalla. */
.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); }

/* Subido de 1049 a 1239px al cambiar «Presupuesto» por «Calcula tu evento»:
   con el botón en una línea, entre esas dos medidas la cabecera se salía de la
   pantalla (a 1060px el botón acababa en 1186px). */
@media (max-width: 1239px) {
  .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; }
}