/* ═══════════════════════════════════════════════════════════════════════════
   Componentes. Cada pieza una vez, con su clase, y reutilizada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rótulo ────────────────────────────────────────────────────────────────
   La etiqueta pequeña sobre los titulares. Va en Barlow Condensed para que se
   distinga de Oswald y no parezca un titular encogido. */
.rr-rotulo {
  display: block;
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-sm); letter-spacing: .24em;
  text-transform: uppercase; color: var(--rr-rojo);
  margin-bottom: var(--rr-e2);
}

.rr-encabezado { margin-bottom: var(--rr-e5); }
.rr-encabezado p {
  color: var(--rr-texto-tenue);
  font-size: var(--rr-t-lg);
  margin-top: var(--rr-e3);
}
.rr-encabezado--centro { text-align: center; }
.rr-encabezado--centro p { margin-inline: auto; }

/* ── Botones ───────────────────────────────────────────────────────────────
   El principal lleva texto CASI NEGRO sobre rojo, no blanco.

   Medido: #FFF sobre #E74249 da 3,98:1 y no llega al mínimo AA. El casi negro
   da 4,75:1. Y de paso rojo con texto oscuro es como se lee una señal de
   carretera, que en esta marca no es casualidad. */
.rr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: 1.02rem; letter-spacing: .11em; text-transform: uppercase;
  line-height: 1;
  border: 2px solid transparent; border-radius: var(--rr-r2);
  cursor: pointer; text-decoration: none;
  background: var(--rr-rojo); color: var(--rr-sobre-rojo);
  transition: background var(--rr-rapido) var(--rr-ease),
              transform var(--rr-rapido) var(--rr-ease),
              box-shadow var(--rr-rapido) var(--rr-ease);
}
.rr-btn:hover {
  background: var(--rr-rojo-vivo); color: var(--rr-sobre-rojo);
  transform: translateY(-2px);
  box-shadow: var(--rr-sombra-roja);
}
.rr-btn:active { transform: translateY(0); }

.rr-btn--linea {
  background: transparent; color: var(--rr-texto);
  border-color: var(--rr-line-viva);
}
.rr-btn--linea:hover {
  background: transparent; color: var(--rr-rojo-vivo);
  border-color: var(--rr-rojo); box-shadow: none;
}

/* Sobre pergamino el rojo claro no se lee: se usa el hondo, que da 5,45:1. */
.rr-seccion--pergamino .rr-btn { background: var(--rr-rojo-hondo); color: #fff; }
.rr-seccion--pergamino .rr-btn:hover { background: var(--rr-sobre-rojo); color: #fff; }
.rr-seccion--pergamino .rr-btn--linea {
  background: transparent; color: var(--rr-sobre-rojo);
  border-color: rgba(20, 16, 15, .35);
}

.rr-acciones { display: flex; flex-wrap: wrap; gap: var(--rr-e3); }

/* ── El rastro ─────────────────────────────────────────────────────────────
   El reguero de puntos que cruza el vinilo del remolque. Se usa donde SIGNIFICA
   algo —el recorrido de los tres pasos— y no como decoración de relleno.

   Va en un pseudoelemento con máscara para que se desvanezca por los extremos
   en vez de cortarse a hachazo contra el borde de la sección. */
.rr-rastro {
  position: relative;
  height: var(--rr-rastro-trazo);
  background-image: repeating-linear-gradient(
    90deg,
    var(--rr-rastro-color) 0 var(--rr-rastro-trazo),
    transparent var(--rr-rastro-trazo) calc(var(--rr-rastro-trazo) + 9px)
  );
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ── Tarjeta ───────────────────────────────────────────────────────────────*/
.rr-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--rr-surface-2);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-r3);
  padding: var(--rr-e4);
  text-decoration: none; color: inherit;
  transition: border-color var(--rr-rapido) var(--rr-ease),
              transform var(--rr-rapido) var(--rr-ease);
}
.rr-card h3 { margin-bottom: var(--rr-e2); }
.rr-card p { color: var(--rr-texto-tenue); font-size: var(--rr-t-sm); margin: 0; }

a.rr-card:hover { border-color: var(--rr-rojo); transform: translateY(-3px); }
a.rr-card:hover h3 { color: var(--rr-rojo); }

/* La franja superior es la firma de la tarjeta: aparece al pasar por encima,
   como el borde rasgado del vinilo entre el negro y el pergamino. */
.rr-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--rr-rojo);
  border-radius: var(--rr-r3) var(--rr-r3) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--rr-lento) var(--rr-ease);
}
a.rr-card:hover::before { transform: scaleX(1); }

/* La etiqueta es texto que se lee —«Bodas», «Teléfono», «El Palmar»—, así que
   va en el gris de lectura. Estaba en --rr-texto-suave y daba 3,01:1. */
.rr-card__num {
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-xs); letter-spacing: .2em;
  color: var(--rr-texto-tenue);
  margin-bottom: var(--rr-e3);
}

/* ── Pasos ─────────────────────────────────────────────────────────────────
   Aquí SÍ van numerados: es una secuencia real y el orden es información que
   hace falta. El rastro los une porque literalmente describen un trayecto. */
.rr-pasos { position: relative; display: grid; gap: var(--rr-e4); }
@media (min-width: 800px) {
  .rr-pasos { grid-template-columns: repeat(3, 1fr); gap: var(--rr-e5); }
  /* La línea que cruza los tres, a la altura de los números. */
  .rr-pasos::before {
    content: ""; position: absolute;
    top: 1.4rem; left: 8%; right: 8%; height: var(--rr-rastro-trazo);
    background-image: repeating-linear-gradient(
      90deg,
      var(--rr-rastro-color) 0 var(--rr-rastro-trazo),
      transparent var(--rr-rastro-trazo) calc(var(--rr-rastro-trazo) + 9px)
    );
    opacity: .45;
  }
}

.rr-paso { position: relative; }
.rr-paso__num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: var(--rr-rojo); color: var(--rr-sobre-rojo);
  font-family: var(--rr-display); font-weight: 600; font-size: 1.25rem;
  margin-bottom: var(--rr-e3);
}
.rr-paso h3 { margin-bottom: var(--rr-e2); }
.rr-paso p { color: var(--rr-texto-tenue); font-size: var(--rr-t-sm); }

/* ── Cifras ────────────────────────────────────────────────────────────────*/
/* Son cuatro cifras y el reparto tiene que ser par: 4, 2+2 o 1+1+1+1. Con
   `auto-fit` a 700px salían tres columnas y la cuarta se quedaba sola. */
.rr-cifras {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--rr-line);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-r3);
  overflow: hidden;
}
@media (min-width: 860px) { .rr-cifras { grid-template-columns: repeat(4, 1fr); } }

.rr-cifra { background: var(--rr-surface); padding: var(--rr-e4) var(--rr-e3); text-align: center; }
.rr-cifra__dato {
  display: block;
  font-family: var(--rr-display); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--rr-rojo); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rr-cifra__pie {
  display: block; margin-top: var(--rr-e2);
  font-family: var(--rr-rotulo); font-size: var(--rr-t-sm);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--rr-texto-tenue);
}

/* ── Lista de ventajas ─────────────────────────────────────────────────────*/
.rr-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rr-e3); }
.rr-checks li {
  position: relative; padding-left: 2rem; margin: 0;
  color: var(--rr-texto-tenue);
}
.rr-checks li::before {
  content: ""; position: absolute;
  left: 0; top: .55em;
  width: .55rem; height: .55rem;
  background: var(--rr-rojo);
  transform: rotate(45deg);
}
.rr-checks strong { display: block; color: var(--rr-texto); font-weight: 600; }

/* ── Preguntas ─────────────────────────────────────────────────────────────
   <details> nativo: se abre sin JavaScript y el buscador lee la respuesta
   aunque esté plegada. */
.rr-faq { border-top: 1px solid var(--rr-line); }
.rr-faq__item { border-bottom: 1px solid var(--rr-line); }
.rr-faq__item summary {
  display: flex; align-items: center; gap: var(--rr-e3);
  padding: var(--rr-e3) 0;
  cursor: pointer; list-style: none;
  font-family: var(--rr-display); font-weight: 500;
  font-size: var(--rr-t-lg); text-transform: uppercase;
  letter-spacing: .02em;
}
.rr-faq__item summary::-webkit-details-marker { display: none; }
.rr-faq__item summary::after {
  content: ""; margin-left: auto; flex: none;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--rr-rojo);
  border-bottom: 2px solid var(--rr-rojo);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--rr-rapido) var(--rr-ease);
}
.rr-faq__item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.rr-faq__item > div { padding-bottom: var(--rr-e4); color: var(--rr-texto-tenue); }

/* ── Cierre ────────────────────────────────────────────────────────────────*/
.rr-cta { background: var(--rr-void); text-align: center; }
.rr-cta h2 { margin-bottom: var(--rr-e3); }
.rr-cta p {
  color: var(--rr-texto-tenue); font-size: var(--rr-t-lg);
  margin-inline: auto; margin-bottom: var(--rr-e4);
}
.rr-cta .rr-acciones { justify-content: center; }

/* ── Aparecer al entrar en pantalla ────────────────────────────────────────
   El estado inicial se pone desde JavaScript (clase en <html>), no aquí. Si se
   escribiera en CSS y el JS fallara, el contenido se quedaría invisible para
   siempre: un adorno no puede ser capaz de ocultar la web. */
.js .rr-reveal { opacity: 0; transform: translateY(14px); }
.js .rr-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--rr-lento) var(--rr-ease),
              transform var(--rr-lento) var(--rr-ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .rr-reveal { opacity: 1; transform: none; }
}

/* ── Héroe ─────────────────────────────────────────────────────────────────
   Fondo negro del remolque, con dos luces muy bajas y el rastro cruzando.

   El rastro es la firma de la marca y aquí significa algo: la línea entra por
   un lado y sale por el otro. La web empieza diciendo «venimos de camino». */
.rr-hero {
  position: relative;
  background: var(--rr-void);
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) clamp(4.5rem, 3rem + 7vw, 8rem);
}

/* La portada cierra pegada a la banda de cifras, sin franja muerta.

   Antes el heroe reservaba hasta 11rem por abajo y debajo empezaba otra seccion
   con su propio relleno: entre el boton y el primer dato habia una banda negra
   de casi 300px que no contenia nada. */
.rr-hero--grande {
  padding-block: clamp(4rem, 2.5rem + 7vw, 7.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* ── El fondo ───────────────────────────────────────────────────────────────
   Una retícula de puntos que se va aclarando hacia el titular.

   No es decoración: es lo que vende el producto. Cada punto es un jugador, y la
   retícula sigue fuera del encuadre por los cuatro lados, que es exactamente la
   idea de «sin límite de jugadores». La versión anterior tenía la diagonal
   punteada de Road Room —una carretera, para un remolque que viaja— cruzando un
   titular que habla de escalar, no de desplazarse.

   El rojo sube de .20 a .38: al 20% sobre negro no es color, es una duda. */
.rr-hero__fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 70% at 8% 12%, rgba(231, 66, 73, .38), transparent 62%),
    radial-gradient(46% 58% at 88% 96%, rgba(148, 4, 10, .34), transparent 64%);
}

.rr-hero__fondo::after {
  content: "";
  position: absolute; inset: -10%;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  color: rgba(240, 235, 227, .16);

  /* La retícula se abre donde va el texto: densa en los bordes, transparente en
     el centro-izquierda. Sin esto compite con el titular en vez de sostenerlo. */
  -webkit-mask-image: radial-gradient(68% 78% at 24% 42%, transparent 12%, #000 78%);
          mask-image: radial-gradient(68% 78% at 24% 42%, transparent 12%, #000 78%);
}

/* Con `prefers-reduced-motion` no cambia nada porque no hay movimiento, pero sí
   con `prefers-contrast`: quien lo pide necesita el texto sobre fondo liso. */
@media (prefers-contrast: more) {
  .rr-hero__fondo, .rr-hero__fondo::after { display: none; }
}

.rr-hero__inner { position: relative; max-width: 48rem; }

/* El titular lleva un salto de línea escrito en el contenido. Se respeta a
   partir de 700px; por debajo se deja fluir, porque una línea partida a mano en
   una pantalla estrecha deja huérfanas feísimas. */
.rr-hero h1 { font-size: var(--rr-t-hero); }
@media (min-width: 700px) { .rr-hero h1 { white-space: pre-line; } }

.rr-hero__sub {
  font-size: var(--rr-t-lg);
  color: var(--rr-texto-tenue);
  margin: var(--rr-e4) 0 var(--rr-e5);
  max-width: 40rem;
}

/* ── Migas ─────────────────────────────────────────────────────────────────*/
.rr-migas { margin-bottom: var(--rr-e4); }
.rr-migas ol {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--rr-rotulo); font-size: var(--rr-t-sm);
  letter-spacing: .11em; text-transform: uppercase;
}
.rr-migas li { margin: 0; display: flex; gap: .5rem; align-items: center; }
.rr-migas li + li::before { content: "/"; color: var(--rr-texto-suave); }
.rr-migas a { color: var(--rr-texto-tenue); text-decoration: none; }
.rr-migas a:hover { color: var(--rr-rojo); }
.rr-migas [aria-current] { color: var(--rr-texto); }

/* ── Héroe con figura ──────────────────────────────────────────────────────
   Dos columnas: mensaje a la izquierda, remolque a la derecha. En vertical el
   remolque va DEBAJO del texto, no encima: en un móvil lo primero tiene que ser
   qué es esto, no una foto de producto que todavía no significa nada. */
.rr-hero__inner--figura { max-width: none; display: grid; gap: var(--rr-e5); align-items: center; }
@media (min-width: 900px) {
  /* La columna de texto manda: con las dos casi iguales el titular partia en
     cuatro lineas y el boton caia por debajo del pliegue. El dibujo aguanta
     bien siendo mas estrecho; el titular no. */
  .rr-hero__inner--figura { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--rr-e5); }
}
.rr-hero__texto { max-width: 44rem; }

/* El render lleva transparencia, así que se apoya en el negro sin recuadro.
   La sombra proyectada le da suelo: sin ella parece recortado y flotando. */
.rr-hero__figura img {
  width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .75));
}

/* ── Texto con figura al lado ──────────────────────────────────────────────*/
.rr-media { display: grid; gap: var(--rr-e5); align-items: center; }
@media (min-width: 900px) {
  .rr-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--rr-e6); }
}
.rr-media__figura { margin: 0; }
.rr-media__figura img {
  width: 100%; height: auto;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .6));
}
.rr-media__figura figcaption {
  margin-top: var(--rr-e3);
  font-family: var(--rr-rotulo);
  font-size: var(--rr-t-sm); letter-spacing: .06em;
  color: var(--rr-texto-tenue);
  border-left: 2px solid var(--rr-rojo);
  padding-left: var(--rr-e3);
}

/* ── Tarjeta plana ─────────────────────────────────────────────────────────
   La misma tarjeta, sin comportamiento de enlace. Comparte caja, borde, radio y
   espaciado con la enlazable: si mañana cambia el estilo de tarjeta, cambian
   las dos. Lo único que se quita es lo que sólo tiene sentido al pasar el
   ratón. */
.rr-card--plano { background: var(--rr-surface-2); }
.rr-card--plano::before { display: none; }

.rr-card__lista {
  list-style: none; padding: 0;
  margin: var(--rr-e3) 0 0;
  display: grid; gap: var(--rr-e1);
}
.rr-card__lista li {
  position: relative; padding-left: 1.1rem; margin: 0;
  font-size: var(--rr-t-sm); color: var(--rr-texto-tenue);
}
.rr-card__lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .35rem; height: .35rem;
  background: var(--rr-rojo); transform: rotate(45deg);
}

/* El enlace se pega abajo con `margin-top:auto` para que, en una fila de
   tarjetas de texto desigual, todos queden alineados en la misma línea. */
/* Rojo claro, no el de marca: a 15px, --rr-rojo sobre la tarjeta da 4,21:1 y
   se queda a un pelo del mínimo. El vivo da 5,50:1. El rojo de marca se reserva
   para superficies grandes —botones, puntos— donde el tamaño lo compensa. */
.rr-card__enlace {
  margin-top: auto; padding-top: var(--rr-e3);
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-sm); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  color: var(--rr-rojo-vivo);
}
.rr-card__enlace::after { content: " →"; }

.rr-card--aqui { border-color: var(--rr-rojo); }
.rr-card__aqui {
  margin-top: auto; padding-top: var(--rr-e3);
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--rr-rojo-vivo);
}

/* ── Listas que son rejillas ───────────────────────────────────────────────
   Son <ul> y <ol> de verdad —el contenido es una lista y así lo anuncia a un
   lector de pantalla— pero se pintan como rejilla. Sólo hay que quitarles los
   topos y la sangría que traen de fábrica. */
.rr-bloques,
.rr-vias,
.rr-grupo { list-style: none; padding: 0; margin: 0; }
.rr-bloques > li,
.rr-vias > li,
.rr-grupo > li { margin: 0; }

/* .rr-vias envuelve cada tarjeta en un <li>, así que el <li> tiene que dejar
   que la tarjeta ocupe todo el alto de su celda. */
.rr-vias > li { display: flex; }
.rr-vias > li > .rr-card { flex: 1; }

/* ── Figura invertida ──────────────────────────────────────────────────────
   Alterna el lado de la imagen entre secciones seguidas para que la página no
   se lea como una columna de bloques idénticos. Sólo en pantalla ancha: en
   vertical el orden del código es el orden de lectura y no se toca. */
@media (min-width: 900px) {
  .rr-media--invertido .rr-media__texto { order: 2; }
  .rr-media--invertido .rr-media__figura { order: 1; }
}

/* ── Línea de tiempo ───────────────────────────────────────────────────────
   El día, con los huecos donde encajamos marcados en rojo.

   En pantalla ancha va en horizontal, con el rastro punteado cruzando por
   detrás de los puntos. En vertical el rastro se pone de pie y baja por el
   lateral: la misma idea girada, no un componente distinto. */
.rr-momentos {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid; gap: var(--rr-e4);
}

.rr-momento { position: relative; padding-left: 2.4rem; }
.rr-momento__punto {
  position: absolute; left: 0; top: .45rem;
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--rr-surface-2);
  border: 2px solid var(--rr-line-viva);
  z-index: 1;
}
.rr-momento--aqui .rr-momento__punto {
  background: var(--rr-rojo);
  border-color: var(--rr-rojo);
  /* El halo separa el punto encendido del rastro que pasa por detrás. */
  box-shadow: 0 0 0 5px rgba(231, 66, 73, .18);
}

/* El rastro, en vertical, uniendo los puntos. */
.rr-momentos::before {
  content: "";
  position: absolute; left: .42rem; top: .9rem; bottom: 1.2rem;
  width: var(--rr-rastro-trazo);
  background-image: repeating-linear-gradient(
    180deg,
    var(--rr-rastro-color) 0 var(--rr-rastro-trazo),
    transparent var(--rr-rastro-trazo) calc(var(--rr-rastro-trazo) + 9px)
  );
  opacity: .4;
}

.rr-momento__hora {
  font-size: var(--rr-t-h3);
  margin-bottom: var(--rr-e1);
  color: var(--rr-texto-tenue);
}
.rr-momento--aqui .rr-momento__hora { color: var(--rr-texto); }

.rr-momento__marca {
  display: inline-block; margin-bottom: var(--rr-e2);
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rr-sobre-rojo); background: var(--rr-rojo);
  padding: .28rem .6rem; border-radius: var(--rr-r1);
}
.rr-momento p { color: var(--rr-texto-tenue); font-size: var(--rr-t-sm); }
.rr-momento--aqui p { color: var(--rr-texto); }

@media (min-width: 900px) {
  .rr-momentos { grid-template-columns: repeat(5, 1fr); gap: var(--rr-e4); }
  .rr-momento { padding-left: 0; padding-top: 2.2rem; }
  .rr-momento__punto { left: 0; top: .5rem; }
  /* El rastro se tumba. */
  .rr-momentos::before {
    left: .4rem; right: 6%; top: .95rem; bottom: auto;
    width: auto; height: var(--rr-rastro-trazo);
    background-image: repeating-linear-gradient(
      90deg,
      var(--rr-rastro-color) 0 var(--rr-rastro-trazo),
      transparent var(--rr-rastro-trazo) calc(var(--rr-rastro-trazo) + 9px)
    );
  }
}

/* Sobre el panel de pergamino cambian los colores: el rojo claro no se lee
   encima y los grises oscuros dejan de tener sentido. */
.rr-seccion--pergamino .rr-momento__punto { background: var(--rr-pergamino-hondo); border-color: var(--rr-pergamino-hondo); }
.rr-seccion--pergamino .rr-momento--aqui .rr-momento__punto {
  background: var(--rr-rojo-hondo); border-color: var(--rr-rojo-hondo);
  box-shadow: 0 0 0 5px rgba(148, 4, 10, .16);
}
.rr-seccion--pergamino .rr-momentos::before { --rr-rastro-color: rgba(20, 16, 15, .55); opacity: .6; }
.rr-seccion--pergamino .rr-momento__hora { color: rgba(20, 16, 15, .6); }
.rr-seccion--pergamino .rr-momento--aqui .rr-momento__hora { color: var(--rr-sobre-rojo); }
.rr-seccion--pergamino .rr-momento p { color: rgba(20, 16, 15, .72); }
.rr-seccion--pergamino .rr-momento--aqui p { color: var(--rr-sobre-rojo); }
.rr-seccion--pergamino .rr-momento__marca { background: var(--rr-rojo-hondo); color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   Tabla de precios.

   Una tabla de verdad y no una rejilla de <div>: son datos tabulares, y quien
   navega con lector de pantalla necesita que las cabeceras se anuncien al leer
   cada celda. Con divs eso se pierde y hay que reconstruirlo con ARIA, que es
   más trabajo y peor resultado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Envoltorio con scroll propio: en un móvil de 320px tres columnas no caben, y
   la alternativa a que la tabla ruede es que ruede la página entera. */
.rr-tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rr-tabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.rr-tabla th,
.rr-tabla td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rr-line);
  white-space: nowrap;
}

.rr-tabla thead th {
  font-family: var(--rr-display);
  font-size: var(--rr-t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rr-texto-tenue);
  border-bottom-color: var(--rr-line-viva);
}

.rr-tabla tbody th {
  font-weight: 600;
  color: var(--rr-texto);
}

.rr-tabla td { color: var(--rr-texto-tenue); }
.rr-tabla td strong { color: var(--rr-texto); font-weight: 600; }

/* Las filas que ya están en el precio de suelo se marcan con el rojo de la casa
   en el borde izquierdo. Es la información que se busca en esta tabla —«¿desde
   cuándo me sale a seis?»— y así se ve sin leer los números. */
.rr-tabla__suelo th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--rr-rojo);
}

.rr-tabla__nota {
  display: inline-block;
  margin-left: .5rem;
  font-size: var(--rr-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rr-texto-suave);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Piezas propias de Macro.

   Van con prefijo `mc-` y no `rr-` a propósito: son de este producto, no del
   sistema de Road Room. Si mañana se comparte el CSS entre las dos webs, se ve
   de un vistazo qué es común y qué no.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El frente a frente ────────────────────────────────────────────────────
   Dos columnas comparando el escape room de siempre con este. Es el bloque que
   más trabaja de la página: quien lo lee entiende el producto sin más texto. */
.mc-frente {
  display: grid;
  gap: var(--rr-e3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .mc-frente { grid-template-columns: 1fr 1fr; gap: var(--rr-e4); }
}

.mc-frente__lado {
  padding: var(--rr-e4);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-r2);
  background: var(--rr-surface);
}

/* El nuestro se marca con el rojo de la casa. Sin esto son dos cajas iguales y
   hay que leerlas enteras para saber cuál es cuál. */
.mc-frente__lado--nuestro {
  border-color: var(--rr-rojo);
  background: linear-gradient(180deg, rgba(231, 66, 73, .10), transparent 60%), var(--rr-surface);
}

.mc-frente__lado h3 {
  font-size: var(--rr-t-h3);
  margin-bottom: var(--rr-e3);
  color: var(--rr-texto-tenue);
}
.mc-frente__lado--nuestro h3 { color: var(--rr-rojo); }

.mc-frente__flujo {
  margin: 0;
  max-width: none;
  font-family: var(--rr-rotulo);
  font-size: var(--rr-t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--rr-texto);
}
.mc-frente__flujo span { color: var(--rr-texto-suave); margin-inline: .35em; }
.mc-frente__lado--nuestro .mc-frente__flujo span { color: var(--rr-rojo); }
.mc-frente__puntos { letter-spacing: .2em; }

/* ── La escala ─────────────────────────────────────────────────────────────
   Tres números enormes. Es el único sitio de la web donde se usa este tamaño:
   repetirlo en otras secciones lo convertiría en «aquí empieza otro bloque» en
   vez de «mira esto». */
.mc-escala {
  display: grid;
  gap: var(--rr-e3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  text-align: center;
}

.mc-escala__dato {
  font-family: var(--rr-rotulo);
  font-size: var(--rr-t-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rr-texto-tenue);
}

.mc-escala__dato span {
  display: block;
  font-family: var(--rr-display);
  font-size: clamp(3.4rem, 1.5rem + 8vw, 6.5rem);
  line-height: .92;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--rr-rojo);
  font-variant-numeric: tabular-nums;
  margin-bottom: .2em;
}

.mc-escala__remate {
  margin: var(--rr-e4) auto 0;
  max-width: none;
  text-align: center;
  font-family: var(--rr-display);
  font-size: var(--rr-t-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--rr-texto);
}

.mc-centrado { margin-top: var(--rr-e3); text-align: center; }
.mc-centrado p { margin-inline: auto; }

/* ── Los sitios ────────────────────────────────────────────────────────────
   Etiquetas, no viñetas. Es una lista de ejemplos donde el orden no significa
   nada, y un punto delante sugeriría que sí. */
.mc-sitios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.mc-sitios li {
  padding: .5rem 1rem;
  border: 1px solid var(--rr-line);
  border-radius: 999px;
  font-family: var(--rr-rotulo);
  font-size: var(--rr-t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rr-texto-tenue);
}


/* ── El producto: texto y foto ──────────────────────────────────────────────
   La foto del sobre es lo único que enseña el producto de verdad, así que tiene
   sitio propio y no va de adorno al fondo de una sección.

   El texto va primero en el orden del documento —quien usa lector de pantalla
   necesita saber de qué va antes de que le anuncien una imagen larga— y la
   rejilla lo coloca a la izquierda en pantallas anchas. */
.mc-producto {
  display: grid;
  gap: var(--rr-e4);
  align-items: center;
}
@media (min-width: 860px) {
  .mc-producto { grid-template-columns: 1fr 1fr; gap: var(--rr-e6); }
}

.mc-producto__figura { margin: 0; }
.mc-producto__figura img {
  display: block;
  width: 100%;
  height: auto;
  /* La foto viene recortada sin fondo, así que la sombra la pone el CSS: sin
     ella flota sobre el negro como un recorte pegado. */
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55));
}

.mc-producto__aventura {
  font-family: var(--rr-rotulo);
  font-size: var(--rr-t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rr-texto-tenue);
}
.mc-producto__aventura strong { color: var(--rr-rojo); }


/* ── Banda con imagen ancha ────────────────────────────────────────────────
   Para las ilustraciones apaisadas. El pie va debajo y en pequeño: es contexto,
   no titular, y en una ilustración así la gente mira antes de leer. */
.mc-banda__figura { margin: 0; }
.mc-banda__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rr-r2);
  border: 1px solid var(--rr-line);
}
.mc-banda__figura figcaption {
  margin-top: var(--rr-e2);
  font-size: var(--rr-t-sm);
  color: var(--rr-texto-tenue);
  max-width: var(--rr-medida);
}


/* ── La isla del héroe ─────────────────────────────────────────────────────
   El dibujo mide 482px de ancho de origen, así que se limita ahí: estirarlo más
   no añade un solo píxel de información y sí lo emborrona.

   En móvil va primero el texto y después la imagen. La rejilla del sistema ya
   apila, pero sin límite de alto el dibujo —que es casi el doble de alto que de
   ancho— empujaba los botones fuera de la primera pantalla. */
/* Se limita por ALTO y no por ancho.

   El dibujo es casi el doble de alto que de ancho, asi que un limite de anchura
   generoso lo dejaba en 806px de alto y empujaba el subtitulo y los botones
   fuera de la primera pantalla. Lo que hay que controlar aqui es cuanto ocupa
   verticalmente, no cuanto mide de lado. */
.rr-hero__figura img {
  display: block;
  max-height: min(64vh, 660px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* La isla, apoyada en la costura.

   `:has()` porque la regla la decide un hijo —que haya figura— y el relleno hay
   que quitarlo del padre. Sin el habria que marcar la seccion a mano desde PHP,
   y entonces el dia que alguien ponga una figura se olvidaria de la clase.

   El relleno de abajo pasa del heroe a la columna de texto: el texto lo sigue
   necesitando, la figura no, porque su sitio es justo el borde. */
/* En las dos anchuras, no solo en escritorio.

   En movil la figura queda debajo del boton en vez de al lado, pero el criterio
   es el mismo: si apoya en la costura se lee como un objeto de pie, y si flota
   a cuarenta pixeles parece un recorte que se ha quedado corto. */
.rr-hero--grande:has(.rr-hero__figura) { padding-bottom: 0; }
.rr-hero--grande:has(.rr-hero__figura) .rr-hero__texto {
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Sin sombra proyectada aqui: una sombra bajo un objeto que toca el suelo lo
   vuelve a levantar del suelo. */
.rr-hero__figura img { filter: none; }

@media (min-width: 900px) {
  .rr-hero__inner--figura { align-items: end; }
  .rr-hero__figura { align-self: end; }
}

@media (max-width: 899px) {
  .rr-hero__figura img { max-height: min(38vh, 320px); }
}