/*
 * rf-portal.css — portada y páginas informativas (P7.2, documento 03 §7.1): cabecera de búsqueda,
 * buscador protagonista, rejilla de categorías, ciudades, «cómo funciona», confianza, llamada a proveedores,
 * la columna de lectura de las informativas y del centro de ayuda, y los bloques de recomendaciones que también
 * pintan la contratación y la celebración. Solo la cargan esas páginas: no es parte del armazón común.
 *
 * Revisión 4.5 (P7.11, documento 03 §7.1 y §15): papel, no pantalla. La portada son dos columnas —titular y foto—, el
 * buscador es una TIRA con borde de tinta, las secciones se separan con 48 px de aire y un filete, las categorías son
 * fichas con filete y el icono desnudo en violeta, «cómo funciona» es una lista numerada con filetes y la llamada a
 * proveedores un bloque con borde de tinta. Ningún color a mano, ningún degradado ni círculo (PatronVisualTest).
 */

/* ============================================================================================
   Portada: la página entera va a sangre (cada sección lleva su contenedor) para que el filete entre secciones cruce
   de lado a lado, como en el prototipo (design/patron-visual/prototipo.html, tablero «Portada»).
   ============================================================================================ */
.rf-portada { padding-block: 0; }
.rf-portada-seccion { border-top: 1px solid var(--rf-filete); padding-block: var(--rf-espacio-10); }
@media (min-width: 992px) {
  .rf-portada-seccion { padding-block: var(--rf-espacio-12); }
}
/* Cabecera de sección (§7.1 puntos 2 y 3): antetítulo y h2 a la izquierda, el enlace «ver todo» a la derecha. */
.rf-seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rf-espacio-2) var(--rf-espacio-6);
  margin-bottom: var(--rf-espacio-6);
}
.rf-seccion-cabecera h2 { margin: 0; }
.rf-portada-explicacion { color: var(--rf-texto-secundario); max-width: 60ch; }

/* ============================================================================================
   Cabecera de búsqueda (documento 03 §7.1 punto 1): 7/12 de texto y buscador, 5/12 de fotografía 4:5. Sin color de
   fondo, sin degradado y sin círculos: el papel de la página.
   ============================================================================================ */
.rf-hero {
  display: grid;
  gap: var(--rf-espacio-8);
  padding-block: var(--rf-espacio-8) var(--rf-espacio-10);
  align-items: center;
}
@media (min-width: 992px) {
  .rf-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--rf-espacio-12);
    padding-block: var(--rf-espacio-12) var(--rf-espacio-16);
  }
}
.rf-hero-texto { min-width: 0; }
.rf-hero-titular { margin-bottom: var(--rf-espacio-4); max-width: 16ch; }
.rf-hero-frase { color: var(--rf-texto-secundario); max-width: 48ch; margin-bottom: var(--rf-espacio-6); }
/* La foto (§7.1, M-57): con la proporción reservada; sin foto, el mismo bloque en papel 100 (nunca un fondo de color). */
.rf-hero-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rf-radio-lg);
  overflow: hidden;
  background: var(--rf-color-neutro-100);
}
@media (min-width: 992px) {
  .rf-hero-foto { aspect-ratio: 4 / 5; }
}
.rf-hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================================
   El buscador como tira (documento 03 §4.2 y §7.1): dónde · cuándo · qué buscas · niños · botón, con un solo borde de
   tinta y filetes entre los campos. En el móvil (M-56, D-1763) se apila en tres filas: dónde; cuándo y niños; qué
   buscas y el botón. Lo que afina (tipo, edad, presupuesto) va plegado debajo.
   ============================================================================================ */
.rf-buscador-tira {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "donde donde" "cuando cuantos" "que boton";
}
.rf-buscador-donde { grid-area: donde; }
.rf-buscador-cuando { grid-area: cuando; border-right: 1px solid var(--rf-filete); }
.rf-buscador-cuantos { grid-area: cuantos; }
.rf-buscador-que { grid-area: que; border-right: 1px solid var(--rf-filete); border-bottom: 0; }
.rf-buscador-tira .rf-tira-boton { grid-area: boton; }
.rf-buscador-tira .rf-tira-control { min-width: 0; }
@media (min-width: 768px) {
  .rf-buscador-tira {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .6fr) auto;
    grid-template-areas: "donde cuando que cuantos boton";
  }
  .rf-buscador-tira .rf-tira-campo { border-bottom: 0; border-right: 1px solid var(--rf-filete); }
  .rf-buscador-cuantos { border-right: 0; }
  .rf-buscador-tira .rf-tira-boton { padding-inline: var(--rf-espacio-5); }
}

.rf-buscador-mas { margin-top: var(--rf-espacio-3); }
.rf-buscador-mas summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--rf-primario);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-buscador-mas[open] summary { margin-bottom: var(--rf-espacio-3); }
.rf-buscador-mas-campos { display: grid; gap: var(--rf-espacio-3); }
.rf-buscador-mas-campos .rf-campo { margin: 0; }
@media (min-width: 576px) {
  .rf-buscador-mas-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================================
   «¿Qué necesitas?» (documento 03 §7.1 punto 2): fichas blancas con filete y radio lg, el icono desnudo en violeta a la
   izquierda, el nombre en 600 y una línea de ejemplos en secundario. Cuatro por fila; dos en el móvil (una a 320 px).
   ============================================================================================ */
.rf-categorias-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rf-espacio-3);
}
/* Dos columnas desde 360 px (a 320, el zum al 400 %, una: «Espacios de celebraciones» no cabe en media ficha, WCAG
   1.4.10) y cuatro desde 768. */
@media (min-width: 360px) { .rf-categorias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .rf-categorias-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rf-espacio-4); } }
.rf-categoria-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--rf-espacio-3);
  min-height: 64px;
  padding: var(--rf-espacio-3) var(--rf-espacio-4);
  border: 1px solid var(--rf-filete);
  border-radius: var(--rf-radio-lg);
  background: var(--rf-superficie);
  text-decoration: none;
  color: var(--rf-texto);
}
.rf-categoria-tarjeta:hover,
.rf-categoria-tarjeta:focus-visible { border-color: var(--rf-color-neutro-900); color: var(--rf-texto); }
.rf-categoria-tarjeta-icono { display: flex; flex-shrink: 0; color: var(--rf-color-primario-700); }
.rf-categoria-tarjeta-icono .rf-icono { width: 24px; height: 24px; }
.rf-categoria-tarjeta-texto { display: grid; min-width: 0; }
.rf-categoria-tarjeta-nombre { font-weight: 600; font-size: var(--rf-tipo-pequeno-movil-tamano); line-height: var(--rf-tipo-pequeno-movil-interlinea); overflow-wrap: break-word; }
.rf-categoria-tarjeta-ejemplos { font-size: var(--rf-tipo-etiqueta-movil-tamano); line-height: var(--rf-tipo-etiqueta-movil-interlinea); color: var(--rf-texto-secundario); overflow-wrap: break-word; }

/* Ciudades: una línea de chips bajo las categorías. */
.rf-ciudades { margin-top: var(--rf-espacio-8); }
.rf-ciudades-titulo { font-size: var(--rf-tipo-cuerpo-movil-tamano); line-height: var(--rf-tipo-cuerpo-movil-interlinea); margin-bottom: var(--rf-espacio-3); }
.rf-ciudades-rejilla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-espacio-2);
}
.rf-ciudad-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--rf-espacio-3);
  border-radius: var(--rf-radio-md);
  border: 1px solid var(--rf-color-neutro-400);
  color: var(--rf-texto);
  text-decoration: none;
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-ciudad-chip:hover,
.rf-ciudad-chip:focus-visible { border-color: var(--rf-color-neutro-900); background: var(--rf-color-neutro-100); color: var(--rf-texto); }

/* ============================================================================================
   Cómo funciona (documento 03 §7.1 punto 4): el titular a la izquierda y la lista numerada con filetes a la derecha.
   El número «01» va en la familia de títulos y en violeta, sin círculo (§15.1).
   ============================================================================================ */
.rf-pasos { display: grid; gap: var(--rf-espacio-6); }
@media (min-width: 992px) {
  .rf-pasos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rf-espacio-12); align-items: start; }
}
.rf-pasos-cabecera h2 { max-width: 20ch; }
.rf-pasos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rf-filete); }
.rf-paso {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--rf-espacio-3);
  padding-block: var(--rf-espacio-5);
  border-bottom: 1px solid var(--rf-filete);
}
.rf-paso-numero,
.rf-caracteristica-numero {
  font-family: var(--rf-fuente-titulos-pila);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: var(--rf-color-primario-700);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 48;
}
.rf-paso-titulo { margin: 0 0 var(--rf-espacio-1); }
.rf-paso-cuerpo { margin: 0; color: var(--rf-texto-secundario); max-width: 60ch; }

/* ============================================================================================
   Confianza (§7.1 punto 5) y las ventajas de /para-proveedores: un icono en tinta —desnudo, sin círculo— junto a su
   título y una frase. Tres en fila en escritorio, en columna en el móvil.
   ============================================================================================ */
.rf-confianza,
.rf-caracteristicas-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rf-espacio-6);
}
@media (min-width: 768px) {
  .rf-confianza,
  .rf-caracteristicas-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rf-espacio-8); }
}
.rf-caracteristica { display: flex; align-items: flex-start; gap: var(--rf-espacio-3); }
.rf-caracteristica-icono { display: flex; flex: none; color: var(--rf-texto); padding-top: 2px; }
.rf-caracteristica-icono .rf-icono { width: 24px; height: 24px; }
.rf-caracteristica-texto { min-width: 0; }
.rf-caracteristica-titulo { margin: 0 0 var(--rf-espacio-1); }
.rf-caracteristica-cuerpo { margin: 0; color: var(--rf-texto-secundario); }

/* ============================================================================================
   Llamada a proveedores (documento 03 §7.1 punto 6): un bloque blanco con borde de tinta y radio lg, el texto a la
   izquierda y el botón de acento a la derecha. Nunca una banda de color.
   ============================================================================================ */
.rf-llamada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rf-espacio-5);
  padding: var(--rf-espacio-6);
  border: 1px solid var(--rf-color-neutro-900);
  border-radius: var(--rf-radio-lg);
  background: var(--rf-superficie);
}
@media (min-width: 768px) {
  .rf-llamada { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--rf-espacio-8) var(--rf-espacio-10); }
}
.rf-llamada-texto { min-width: 0; max-width: 60ch; }
.rf-llamada-titulo { margin: 0 0 var(--rf-espacio-2); }
.rf-llamada-cuerpo { margin: 0; color: var(--rf-texto-secundario); }
.rf-llamada .rf-boton { flex-shrink: 0; }

/* «Cerca de ti» y «Para tu fecha» (P8.13): la fecha con su botón en una fila. */
.rf-cerca-fecha { margin-top: var(--rf-espacio-6); max-width: 32rem; }
.rf-cerca-fecha-fila { display: flex; flex-wrap: wrap; gap: var(--rf-espacio-2); margin-top: var(--rf-espacio-2); }
.rf-cerca-fecha-fila .rf-campo-control { flex: 1 1 12rem; }

/* ============================================================================================
   Informativas y centro de ayuda (P7.11, M-58, D-1765): la columna de lectura de 72 caracteres a la izquierda y, a la
   derecha, la segunda mitad de la página (los pasos, las ventajas, la lista de artículos o el formulario), para que el
   escritorio no deje el 60 % vacío. En el móvil, una sola columna.
   ============================================================================================ */
.rf-lectura { display: grid; gap: var(--rf-espacio-8); align-items: start; }
@media (min-width: 992px) {
  .rf-lectura { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rf-espacio-12); }
  .rf-lectura-principal { position: sticky; top: calc(64px + var(--rf-espacio-6)); }
}
.rf-lectura-entrada { max-width: 72ch; }
.rf-lectura-entrada .rf-cuerpo-lg { color: var(--rf-texto-secundario); }
.rf-lectura-texto { max-width: 72ch; }
.rf-lectura-acciones { display: flex; flex-wrap: wrap; gap: var(--rf-espacio-3); margin-top: var(--rf-espacio-6); }
/* Una lista con filetes (los artículos de la ayuda, las ventajas): fila a fila, sin cajas. */
.rf-lista-filetes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rf-filete); }
.rf-lista-filetes > li { padding-block: var(--rf-espacio-4); border-bottom: 1px solid var(--rf-filete); }
.rf-lista-filetes > li > a { font-weight: 600; }
.rf-lista-filetes p { margin: var(--rf-espacio-1) 0 0; }
.rf-ayuda-perfiles { display: flex; flex-wrap: wrap; gap: var(--rf-espacio-2); margin-block: var(--rf-espacio-4) var(--rf-espacio-6); }
.rf-ayuda-perfiles a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--rf-espacio-3);
  border: 1px solid var(--rf-color-neutro-400);
  border-radius: var(--rf-radio-md);
  color: var(--rf-texto);
  text-decoration: none;
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-ayuda-perfiles a[aria-current="page"] {
  background: var(--rf-color-neutro-900);
  border-color: var(--rf-color-neutro-900);
  color: var(--rf-color-neutro-0);
  font-weight: 600;
}
.rf-ayuda-grupo + .rf-ayuda-grupo { margin-top: var(--rf-espacio-8); }
.rf-ayuda-grupo h2 { margin-bottom: var(--rf-espacio-3); }
.rf-ayuda-articulo p { max-width: 72ch; }
.rf-ayuda-articulo-pie { margin-top: var(--rf-espacio-8); padding-top: var(--rf-espacio-4); border-top: 1px solid var(--rf-filete); }

/* ============================================================================================
   Bloque de contacto (P7.2) y su formulario de soporte (P11.7).
   ============================================================================================ */
.rf-contacto-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--rf-espacio-3);
  align-items: flex-start;
  max-width: 72ch;
}
.rf-contacto-bloque .rf-cuerpo-lg { color: var(--rf-texto-secundario); }
.rf-contacto-formulario { max-width: 40rem; }

/* Páginas de ciudad y categoría (P7.6, /c/{ciudad}/{categoria}): el texto editorial a una medida legible y los enlaces a
   las demás páginas de la ciudad como una lista que se reparte en líneas, sin desbordar a 360 px. */
.rf-ciudad-cabecera { max-width: 72ch; }
.rf-ciudad-hermanas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--rf-espacio-2) var(--rf-espacio-4); }
.rf-ciudad-hermanas a { color: var(--rf-primario); }

/* ============================================================================================
   Bloques de recomendaciones (P8.13; fragments/recomendaciones): la rejilla de tarjetas en escritorio y, en el móvil,
   la lista de tarjetas horizontales separadas por filetes del prototipo (portada móvil, M-83).
   ============================================================================================ */
.rf-recomendaciones > h2 { margin-bottom: var(--rf-espacio-1); }
.rf-recomendaciones > .rf-pequeno:first-of-type { margin-bottom: var(--rf-espacio-6); }
.rf-recomendaciones-vacio { color: var(--rf-texto-secundario); }

/* «Ampliar búsqueda» (RF-BUS-23, D-1540): el radio en vigor y los enlaces que lo amplían. */
.rf-ampliar { margin-top: var(--rf-espacio-4); }
.rf-ampliar-opciones { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rf-espacio-2); }
/* La petición de la ubicación de un bloque sin lugar (D-1676). */
.rf-ubicacion { margin-top: var(--rf-espacio-4); max-width: 32rem; }
.rf-ubicacion label { display: block; font-weight: 600; margin-bottom: var(--rf-espacio-2); }
.rf-ubicacion input[type="text"] { width: 100%; }

/* ============================================================================================
   Contratación (documento 03 §7.4, revisión 4.5; P7.11): la cabecera reducida a la marca, el paso a paso arriba, lo que
   se rellena a la izquierda en secciones separadas por filetes y el RESUMEN de la reserva siempre a la vista —a la
   derecha y fijo en escritorio, con el borde de tinta del bloque de contratación; arriba y plegable en el móvil—.
   ============================================================================================ */
.rf-contratacion-pagina { max-width: 1200px; }
.rf-contratacion-disposicion { display: grid; gap: var(--rf-espacio-6); align-items: start; }
@media (min-width: 992px) {
  .rf-contratacion-disposicion {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    grid-template-areas: "principal resumen";
    column-gap: var(--rf-espacio-10);
  }
  .rf-contratacion-principal { grid-area: principal; }
  .rf-contratacion-resumen { grid-area: resumen; position: sticky; top: calc(64px + var(--rf-espacio-6)); }
}
.rf-contratacion-principal { min-width: 0; }
.rf-contratacion-cabecera { margin-bottom: var(--rf-espacio-4); }
.rf-contratacion-cabecera h1 { margin-bottom: var(--rf-espacio-1); }
.rf-contratacion-cabecera p { margin: 0 0 var(--rf-espacio-1); }
.rf-contratacion-resumen {
  border: 1px solid var(--rf-color-neutro-900);
  border-radius: var(--rf-radio-lg);
  background: var(--rf-superficie);
  padding: var(--rf-espacio-4) var(--rf-espacio-5);
}
.rf-contratacion-resumen-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rf-espacio-3);
  cursor: pointer;
  list-style: none;
}
.rf-contratacion-resumen-cabecera::-webkit-details-marker { display: none; }
.rf-contratacion-resumen-titulo { margin: 0; font-size: var(--rf-tipo-h3-movil-tamano); line-height: var(--rf-tipo-h3-movil-interlinea); }
.rf-contratacion-resumen-total { font-family: var(--rf-fuente-titulos-pila); font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-contratacion-resumen[open] .rf-contratacion-resumen-total { display: none; }
.rf-contratacion-resumen[open] .rf-contratacion-resumen-cabecera { margin-bottom: var(--rf-espacio-3); }
.rf-contratacion-resumen-oferta { margin: 0; font-weight: 600; }
.rf-contratacion-resumen .rf-desglose { margin-top: var(--rf-espacio-3); }
.rf-contratacion-seccion { padding-block: var(--rf-espacio-5); border-top: 1px solid var(--rf-filete); }
.rf-contratacion-seccion h2 { font-size: var(--rf-tipo-h3-movil-tamano); line-height: var(--rf-tipo-h3-movil-interlinea); }
.rf-contratacion-formulario { display: grid; gap: var(--rf-espacio-3); }
/* Lo que depende de la retención se esconde con `hidden` al caducar (rf-form.js, M-107); un `display` propio lo taparía. */
[data-rf-solo-retenida][hidden] { display: none; }
.rf-contratacion-formulario fieldset { border: 0; padding: 0; margin: 0 0 var(--rf-espacio-3); min-width: 0; }
.rf-contratacion-formulario legend { font-family: var(--rf-fuente-titulos-pila); font-weight: 600; font-size: var(--rf-tipo-h3-movil-tamano); line-height: var(--rf-tipo-h3-movil-interlinea); margin-bottom: var(--rf-espacio-3); }
.rf-contratacion-formulario .rf-campo > label:not(.visually-hidden) { font-size: var(--rf-tipo-pequeno-movil-tamano); font-weight: 600; }
.rf-contratacion-formulario .rf-boton-principal { justify-self: start; min-width: 12rem; }
.rf-contratacion-motivos { color: var(--rf-color-semantico-error-texto); }
/* M-157: los avisos de la contratación no se pegan al título de debajo ni al botón que les sigue («Volver a elegir»). */
.rf-contratacion-pagina .rf-aviso { margin-block-end: var(--rf-espacio-4); }
.rf-contratacion-salidas { margin-block-end: var(--rf-espacio-5); }
.rf-contratacion-salidas .rf-acciones { justify-content: flex-start; }
/* El pago (§7.4 punto 2): la lista de lo que se paga en el resumen y la línea de tranquilidad con su candado. */
.rf-pago-reservas { list-style: none; margin: 0; padding: 0; }
.rf-pago-reservas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--rf-espacio-3); padding-block: var(--rf-espacio-2); border-top: 1px solid var(--rf-filete); }
.rf-pago-reservas li:first-child { border-top: 0; padding-top: 0; }
.rf-pago-reservas .rf-pequeno { grid-column: 1; }
.rf-pago-reservas-importe { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; }
.rf-pago-elemento { min-height: 120px; }
.rf-pago-seguro { display: inline-flex; align-items: center; gap: var(--rf-espacio-2); margin: 0; }
/* La confirmación (§7.4 punto 3): la ilustración de la celebración, el titular, y cada reserva con su localizador
   grande, que se copia con un botón. */
.rf-contratacion-confirmada { text-align: center; padding-block: var(--rf-espacio-8) var(--rf-espacio-6); }
.rf-contratacion-confirmada .rf-ilustracion { width: 96px; height: 96px; margin-bottom: var(--rf-espacio-3); }
/* El confeti de la confirmación (§3.2, D-1929): una ráfaga de 1,2 s que sale de la ilustración, por encima de nada que se
   pueda pulsar (pointer-events: none) y sin tapar el texto; rectángulos de radio pequeño con los colores de la marca.
   Con «reducir movimiento» no existe (el guion no la crea y aquí se esconde por si acaso). */
.rf-contratacion-confirmada { position: relative; overflow-x: clip; }
.rf-confeti { position: absolute; top: calc(var(--rf-espacio-8) + 48px); left: 50%; width: 0; height: 0; pointer-events: none; }
.rf-confeti-pieza { position: absolute; top: 0; left: 0; width: 7px; height: 11px; border-radius: var(--rf-radio-xs); opacity: 0;
  animation: rf-confeti-rafaga 1s cubic-bezier(.2,.8,.2,1) var(--rf-confeti-retraso, 0ms) 1 both; }
.rf-confeti-pieza-1 { background: var(--rf-color-primario-700); }
.rf-confeti-pieza-2 { background: var(--rf-color-acento-600); }
.rf-confeti-pieza-3 { background: var(--rf-color-apoyo-700); }
.rf-confeti-pieza-4 { background: var(--rf-color-acento-400); }
@keyframes rf-confeti-rafaga {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--rf-confeti-x, 0), var(--rf-confeti-y, 120px)) rotate(var(--rf-confeti-giro, 180deg)); }
}
@media (prefers-reduced-motion: reduce) { .rf-confeti { display: none; } }
.rf-espera-reservas li { display: grid; gap: var(--rf-espacio-1); }
.rf-espera-localizador {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-espacio-2);
  font-family: var(--rf-fuente-titulos-pila);
  font-size: var(--rf-tipo-h3-movil-tamano);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rf-espera-localizador .rf-boton-icono { border-color: transparent; }
.rf-espera-acciones { display: flex; flex-wrap: wrap; gap: var(--rf-espacio-2) var(--rf-espacio-5); }