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

/* ── Actividades ───────────────────────────────────────────────────────────
   La principal a lo ancho y con foto; las otras tres en fila debajo. La
   jerarquía la da el tamaño, no un rótulo que diga «destacada». */
.rr-actividades { display: grid; gap: var(--rr-e4); }

.rr-actividades__resto { display: grid; gap: var(--rr-e4); }
@media (min-width: 860px) {
  .rr-actividades__resto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* El texto se estira en columna para que el enlace quede abajo en las tres
   tarjetas, aunque una tenga lista y otra no. */
.rr-actividad__texto { display: flex; flex-direction: column; height: 100%; }
.rr-actividad .rr-card__lista { margin-top: var(--rr-e3); }
.rr-actividad .rr-card__enlace { margin-top: auto; padding-top: var(--rr-e3); }

.rr-actividad--principal {
  display: grid; gap: var(--rr-e4); align-items: center;
  padding: var(--rr-e5) var(--rr-e4);
  border-color: var(--rr-line-viva);
  /* La misma luz roja del héroe, en pequeño: la tarjeta es de la familia. */
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(231, 66, 73, .16), transparent 70%),
    var(--rr-surface-2);
}
@media (min-width: 900px) {
  .rr-actividad--principal {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    padding: var(--rr-e5);
  }
}
.rr-actividad--principal h3 { font-size: var(--rr-t-h2); }
.rr-actividad--principal p { font-size: var(--rr-t-md); max-width: 36rem; }
.rr-actividad--principal .rr-card__num { color: var(--rr-rojo); }

.rr-actividad__figura { margin: 0; }
.rr-actividad__figura img {
  width: 100%; height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .7));
}

/* ── 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);
}
.rr-hero--grande {
  padding-block: clamp(4.5rem, 3rem + 8vw, 9.5rem) clamp(6.5rem, 4rem + 10vw, 11rem);
}

.rr-hero__fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(62% 80% at 10% 105%, rgba(231, 66, 73, .20), transparent 68%),
    radial-gradient(52% 62% at 92% -8%, rgba(224, 196, 136, .08), transparent 70%);
}

/* La diagonal punteada. Se desvanece por los dos extremos con una máscara, en
   lugar de cortarse a hachazo contra el borde de la sección. */
.rr-hero__fondo::after {
  content: "";
  position: absolute; left: -12%; right: -12%; top: 64%;
  height: var(--rr-rastro-trazo);
  background-image: repeating-linear-gradient(
    90deg,
    var(--rr-pergamino-hondo) 0 var(--rr-rastro-trazo),
    transparent var(--rr-rastro-trazo) calc(var(--rr-rastro-trazo) + 10px)
  );
  opacity: .3;
  transform: rotate(-5deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ── El fondo de la portada ─────────────────────────────────────────────────
   El mismo que macro.roadroom.es: retícula de puntos y dos luces rojas.

   Solo en la portada (`--grande`). Las interiores conservan la diagonal
   punteada de arriba: la retícula es la firma de la entrada, y repetida en
   cada página dejaría de significar nada.

   La portada gana especificidad (dos clases) sobre `.rr-hero__fondo`, así que
   no hace falta tocar la regla general ni ordenar nada. */
.rr-hero--grande .rr-hero__fondo {
  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%);
}

/* La retícula sustituye a la diagonal. Se redefine el pseudoelemento entero
   porque la diagonal fija `top`, `height`, `transform` y `opacity`, y cualquiera
   de ellos que quedara heredado deformaría la retícula. */
.rr-hero--grande .rr-hero__fondo::after {
  inset: -10%;
  top: -10%; left: -10%; right: -10%;
  height: auto;
  transform: none;
  opacity: 1;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  color: rgba(240, 235, 227, .16);

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

@media (prefers-contrast: more) {
  .rr-hero--grande .rr-hero__fondo,
  .rr-hero--grande .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) {
  .rr-hero__inner--figura { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: var(--rr-e6); }
}
.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; }


/* ── Lista de «no» ──────────────────────────────────────────────────────────
   La misma lista de comprobación, en negativo. El color no es rojo de marca
   sino gris apagado: en rojo parecerían advertencias de peligro, y no lo son —
   son casos que simplemente no encajan. */
.rr-checks--no li::before {
  content: "×";
  color: var(--rr-texto-suave);
}
.rr-checks--no li { color: var(--rr-texto-tenue); }

/* ── Aviso destacado ────────────────────────────────────────────────────────
   Para lo que hay que leer ANTES de lo que viene debajo, no en letra pequeña
   después. Se marca con la banda roja a la izquierda, no con un fondo de
   alerta: es una advertencia honesta, no un error. */
.rr-aviso {
  margin-top: var(--rr-e4);
  padding: var(--rr-e3) var(--rr-e4);
  border-left: 3px solid var(--rr-rojo);
  background: var(--rr-surface);
  border-radius: 0 var(--rr-r2) var(--rr-r2) 0;
}
.rr-aviso p { color: var(--rr-texto-tenue); }
.rr-aviso p:last-child { margin-bottom: 0; }
.rr-aviso strong { color: var(--rr-texto); }


/* ── Cinta de franquicia ────────────────────────────────────────────────────
   Una llamada distinta a las demás porque va dirigida a otra persona: quien
   entra a roadroom.es quiere contratar un evento, y este bloque le habla a
   quien quiere montar el negocio.

   Por eso lleva borde rojo arriba y abajo en vez de fondo de color: se separa
   de la lectura sin gritar, y no compite con el CTA de reserva que viene justo
   después. */
.rr-franquicia-cinta {
  border-block: 1px solid var(--rr-rojo);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(231, 66, 73, .12), transparent 70%),
    var(--rr-surface);
  text-align: center;
}
.rr-franquicia-cinta h2 { margin-bottom: var(--rr-e3); }
.rr-franquicia-cinta p { margin-inline: auto; }
.rr-franquicia-cinta .rr-acciones { justify-content: center; margin-top: var(--rr-e4); }


/* ══════════════════════════════════════════════════════════════════════════
   CALCULADORA DE EVENTOS
   ══════════════════════════════════════════════════════════════════════════
   Dos columnas en escritorio: los pasos a la izquierda y el ticket a la
   derecha, pegado mientras se baja. En móvil, una columna y una barra fija con
   el total. */

.rr-calc__grid { display: grid; gap: var(--rr-e5); align-items: start; }
@media (min-width: 960px) {
  .rr-calc__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
.rr-calc__pasos { display: grid; gap: var(--rr-e5); min-width: 0; }

.rr-calc__paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.rr-calc__paso legend {
  display: flex; align-items: center; gap: var(--rr-e3);
  padding: 0;
  font-family: var(--rr-display); font-weight: 600;
  font-size: var(--rr-t-h3); line-height: 1.1; text-transform: uppercase;
  color: var(--rr-texto);
}
.rr-calc__num {
  flex: none; display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--rr-rojo); color: var(--rr-sobre-rojo);
  font-family: var(--rr-rotulo); font-size: 1.1rem;
}
.rr-calc__ayuda { color: var(--rr-texto-tenue); margin: var(--rr-e2) 0 var(--rr-e4); max-width: 44rem; }

/* ── Personas ──────────────────────────────────────────────────────────────*/
.rr-calc__personas { display: flex; align-items: stretch; gap: var(--rr-e2); max-width: 26rem; }
.rr-calc__personas input {
  flex: 1; min-width: 0;
  padding: .55rem .5rem;
  text-align: center;
  font-family: var(--rr-display); font-weight: 600;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--rr-surface-2); color: var(--rr-texto);
  border: 1px solid var(--rr-line-viva); border-radius: var(--rr-r2);
  -moz-appearance: textfield; appearance: textfield;
}
.rr-calc__personas input::-webkit-inner-spin-button,
.rr-calc__personas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rr-calc__personas input:focus { border-color: var(--rr-rojo); }

.rr-calc__boton {
  flex: none; width: 3.6rem;
  font-size: 1.9rem; line-height: 1;
  background: var(--rr-surface-2); color: var(--rr-texto);
  border: 1px solid var(--rr-line-viva); border-radius: var(--rr-r2);
  cursor: pointer;
  transition: border-color var(--rr-rapido) var(--rr-ease), color var(--rr-rapido) var(--rr-ease);
}
.rr-calc__boton:hover { border-color: var(--rr-rojo); color: var(--rr-rojo-vivo); }

.rr-calc__unidad {
  max-width: 26rem; margin: .45rem 0 0; text-align: center;
  font-family: var(--rr-rotulo); font-size: var(--rr-t-sm);
  letter-spacing: .16em; text-transform: uppercase; color: var(--rr-texto-tenue);
}

.rr-calc__rango { display: block; width: 100%; max-width: 26rem; margin-top: var(--rr-e4); accent-color: var(--rr-rojo); }
.rr-calc__marcas {
  display: flex; justify-content: space-between; max-width: 26rem; margin-top: .3rem;
  font-family: var(--rr-rotulo); font-size: var(--rr-t-xs);
  letter-spacing: .12em; color: var(--rr-texto-tenue);
}

/* ── Actividades como piezas ───────────────────────────────────────────────
   Cada una es un checkbox de verdad, escondido pero enfocable, con la tarjeta
   pintada al lado. Así se marca con teclado, el lector de pantalla anuncia
   «marcada / no marcada» y no hace falta JavaScript para el estado. */
.rr-calc__actividades { display: grid; gap: var(--rr-e3); }
@media (min-width: 640px) {
  .rr-calc__actividades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rr-opcion { position: relative; display: block; cursor: pointer; }
.rr-opcion input {
  position: absolute; top: 1rem; left: 1rem;
  width: 1px; height: 1px; opacity: 0;
}

.rr-opcion__caja {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--rr-e4);
  background: var(--rr-surface-2);
  border: 1px solid var(--rr-line); border-radius: var(--rr-r3);
  transition: border-color var(--rr-rapido) var(--rr-ease),
              transform var(--rr-rapido) var(--rr-ease),
              box-shadow var(--rr-rapido) var(--rr-ease);
}
.rr-opcion:hover .rr-opcion__caja { border-color: var(--rr-line-viva); transform: translateY(-2px); }
.rr-opcion input:focus-visible + .rr-opcion__caja { outline: 2px solid var(--rr-rojo-vivo); outline-offset: 3px; }

.rr-opcion input:checked + .rr-opcion__caja {
  border-color: var(--rr-rojo);
  box-shadow: inset 0 0 0 1px var(--rr-rojo);
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(231, 66, 73, .15), transparent 70%),
    var(--rr-surface-2);
}

.rr-opcion__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rr-e2); margin-bottom: var(--rr-e3);
}
.rr-opcion__cabeza .rr-card__num { margin: 0; }

/* El estado se lee de un vistazo: «+ Añadir» apagado, «✓ Añadida» en rojo. Va
   en CSS y aria-hidden porque el checkbox ya anuncia el estado real. */
.rr-opcion__estado {
  flex: none;
  padding: .35rem .65rem;
  font-family: var(--rr-rotulo); font-weight: 600;
  font-size: var(--rr-t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rr-texto-tenue);
  border: 1px solid var(--rr-line-viva); border-radius: 999px;
  white-space: nowrap;
}
.rr-opcion__estado::before { content: "+ Añadir"; }
.rr-opcion input:checked + .rr-opcion__caja .rr-opcion__estado {
  background: var(--rr-rojo); border-color: var(--rr-rojo); color: var(--rr-sobre-rojo);
}
.rr-opcion input:checked + .rr-opcion__caja .rr-opcion__estado::before { content: "✓ Añadida"; }

.rr-opcion__titulo {
  font-family: var(--rr-display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.12; text-transform: uppercase;
  color: var(--rr-texto);
}
.rr-opcion__texto {
  display: block; margin: var(--rr-e2) 0 var(--rr-e4);
  font-size: var(--rr-t-sm); color: var(--rr-texto-tenue);
}

.rr-opcion__pie {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem var(--rr-e3);
  margin-top: auto; padding-top: var(--rr-e3);
  border-top: 1px dashed var(--rr-line-viva);
}
.rr-opcion__precio {
  font-family: var(--rr-display); font-weight: 600;
  font-size: 1.85rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--rr-texto);
}
.rr-opcion input:checked + .rr-opcion__caja .rr-opcion__precio { color: var(--rr-rojo-vivo); }
.rr-opcion__regla {
  font-family: var(--rr-rotulo); font-size: var(--rr-t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--rr-texto-tenue);
}

/* ── El ticket ─────────────────────────────────────────────────────────────
   En pergamino, el color del vinilo del remolque: es el papel donde se apunta
   el evento. La fila de muescas de arriba lo convierte en ticket sin decirlo. */
.rr-calc__resumen { position: sticky; top: 6.5rem; }
@media (max-width: 959px) { .rr-calc__resumen { position: static; } }

.rr-ticket {
  position: relative;
  padding: var(--rr-e4);
  background: var(--rr-pergamino); color: var(--rr-sobre-pergamino);
  border-radius: var(--rr-r3);
  box-shadow: var(--rr-sombra);
}
.rr-ticket::before {
  content: ""; position: absolute; left: var(--rr-e3); right: var(--rr-e3); top: -6px;
  height: 12px;
  background: radial-gradient(circle at 6px 6px, var(--rr-bg) 5px, transparent 5.5px) 0 0 / 18px 12px repeat-x;
}

.rr-ticket .rr-rotulo { color: var(--rr-rojo-hondo); }
.rr-ticket h2 { color: var(--rr-sobre-pergamino); font-size: var(--rr-t-h3); margin: .2rem 0 var(--rr-e3); }

.rr-ticket__datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--rr-e3);
  margin: 0 0 var(--rr-e3); padding-bottom: var(--rr-e3);
  border-bottom: 1px dashed rgba(20, 16, 15, .3);
}
.rr-ticket__datos div { margin: 0; }
.rr-ticket__datos dt {
  font-family: var(--rr-rotulo); font-weight: 600; font-size: var(--rr-t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--rr-sobre-pergamino-tenue);
}
.rr-ticket__datos dd {
  margin: .15rem 0 0;
  font-family: var(--rr-display); font-weight: 600; font-size: 1.45rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rr-ticket__lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rr-e2); }
.rr-ticket__lineas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--rr-e3);
  margin: 0; font-size: var(--rr-t-sm); font-weight: 600;
}
.rr-ticket__lineas small {
  display: block; font-weight: 400;
  font-size: var(--rr-t-xs); color: var(--rr-sobre-pergamino-tenue);
}
.rr-ticket__lineas strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr-ticket__lineas .rr-ticket__vacio { font-style: italic; font-weight: 400; color: var(--rr-sobre-pergamino-tenue); }

.rr-ticket__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--rr-e3);
  margin-top: var(--rr-e3); padding-top: var(--rr-e3);
  border-top: 2px solid var(--rr-sobre-pergamino);
}
.rr-ticket__total span {
  font-family: var(--rr-rotulo); font-weight: 600; font-size: var(--rr-t-sm);
  letter-spacing: .14em; text-transform: uppercase;
}
.rr-ticket__total strong {
  font-family: var(--rr-display); font-weight: 600;
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); line-height: 1;
  color: var(--rr-rojo-hondo); font-variant-numeric: tabular-nums;
}
.rr-ticket__total strong.is-cambio { animation: rr-latido .35s var(--rr-ease); }
@keyframes rr-latido { 40% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .rr-ticket__total strong.is-cambio { animation: none; }
}

.rr-ticket__nota { margin: var(--rr-e2) 0 var(--rr-e4); font-size: var(--rr-t-xs); color: var(--rr-sobre-pergamino-tenue); }

.rr-ticket__acciones { display: grid; gap: var(--rr-e2); }
/* Sobre pergamino el rojo claro no se lee: el hondo, igual que en las
   secciones pergamino. */
.rr-ticket .rr-btn { width: 100%; background: var(--rr-rojo-hondo); color: #fff; }
.rr-ticket .rr-btn:hover { background: var(--rr-sobre-rojo); color: #fff; }
.rr-ticket .rr-btn--linea { background: transparent; color: var(--rr-sobre-pergamino); border-color: rgba(20, 16, 15, .35); }
.rr-ticket .rr-btn--linea:hover { background: transparent; color: var(--rr-sobre-pergamino); border-color: var(--rr-sobre-pergamino); box-shadow: none; }
.rr-ticket__tel { margin-top: .2rem; text-align: center; font-size: var(--rr-t-sm); color: var(--rr-sobre-pergamino); }

/* ── Barra de móvil ────────────────────────────────────────────────────────*/
.rr-calc-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--rr-e3);
  padding: .75rem clamp(1rem, 4vw, 1.5rem) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 10, 10, .95);
  border-top: 1px solid var(--rr-line-viva);
  transform: translateY(110%);
  transition: transform var(--rr-rapido) var(--rr-ease);
}
.rr-calc-barra.is-visible { transform: none; }
@media (min-width: 960px) { .rr-calc-barra { display: none; } }

.rr-calc-barra__total { display: flex; flex-direction: column; line-height: 1.1; }
.rr-calc-barra__total small {
  font-family: var(--rr-rotulo); font-size: var(--rr-t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--rr-texto-tenue);
}
.rr-calc-barra__total strong {
  font-family: var(--rr-display); font-weight: 600; font-size: 1.6rem;
  color: var(--rr-texto); font-variant-numeric: tabular-nums;
}
.rr-calc-barra .rr-btn { padding: .75rem 1.1rem; }