/* ═══════════════════════════════════════════════════════════════════════════
   RealFluencers — identidad de marca (landing + buscador de cliente)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de styles.css y SOLO en index.html y cliente.html. El resto
   de las pantallas (comercial, login, revisión…) no lo cargan y quedan intactas.

   No redefine las variables de styles.css (--brand, --line, --muted, --paper):
   i18n.js inyecta el switch ES/EN con CSS que depende de ellas, así que pisarlas
   globalmente rompería el switch en todas las páginas. Acá se usan tokens --rf-*
   propios y solo se sobreescriben selectores concretos.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rf-black: #020407;   /* negro base del sitio corporativo: esqueleto, header, footer */
  --rf-section: #141414;  /* bloques de seccion alternos, igual que el sitio corporativo */
  --rf-dark:  #151635;   /* azul noche: SOLO como transicion dentro del gradiente */
  --rf-blue:  #1F66BA;   /* azul medio: elementos secundarios, hovers de tarjeta */
  --rf-sky:   #049AF1;   /* azul brillante: botones primarios, links, acentos */
  --rf-neon:  #E7FD01;   /* amarillo neón: highlights, hover de CTA, subrayados */
  --rf-white: #FFFFFF;

  /* Gradiente de marca: diagonal de azul noche a azul brillante, con el neón
     entrando SOLO como remate en la esquina superior derecha. Las paradas están
     calculadas para que el neón ocupe ~12% del área: pasar de ahí lo convierte
     en franja y deja de ser el acento que debe ser. */
  --rf-grad: linear-gradient(45deg, #020407 0%, #020407 42%, #151635 62%, #1F66BA 82%, #049AF1 100%);

  --rf-radio:    18px;   /* radio de borde base: tarjetas, mosaico, secciones */
  --rf-radio-sm: 12px;
  --rf-pill:     999px;  /* botones y chips */
  --rf-sombra:   0 2px 10px rgba(21, 22, 53, .06), 0 10px 30px rgba(21, 22, 53, .07);
  --rf-ancho:    1180px;
  --rf-epilogue: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rf-poppins:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base compartida ─────────────────────────────────────────────────────── */

.rf-page {
  font-family: var(--rf-poppins);
  color: var(--rf-dark);
  background: var(--rf-white);
}

.rf-wrap {
  max-width: var(--rf-ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.rf-page h1,
.rf-page h2,
.rf-page h3 {
  font-family: var(--rf-epilogue);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
}

/* ── Header sticky ───────────────────────────────────────────────────────── */
/* Mantiene .nav y .signin porque i18n.js busca `.nav` y `.signin, .usermenu`
   para montar el switch ES/EN dentro de un .nav-right. Cambiar esos nombres
   deja el switch en position:fixed arriba a la derecha. */

.rf-page .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
  padding: 14px 24px;
  /* Vidrio del sitio corporativo: negro translucido + blur. El fallback solido va
     primero; los navegadores con backdrop-filter usan la capa translucida.
     .85 y no .42: el header es sticky y pasa por encima de secciones CLARAS
     (.rf-promesas es blanca), donde una capa mas transparente lo lavaba a gris.
     A .85 se lee NEGRO en todo el scroll y el blur deja solo una insinuacion. */
  background: var(--rf-black);
  background: rgba(2, 4, 7, .85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* min-width:0 + max-width:100%: el logo tiene relación ~11:1, así que sin tope se lleva
   todo el ancho del header y empuja el switch y el botón fuera del viewport. */
.rf-page .nav .logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.rf-page .nav .logo img { display: block; height: 34px; width: auto; max-width: 100%; }

/* Mismo CTA que "Encuentra creadores" del sitio corporativo: píldora oscura que casi
   se funde con el header, borde apenas insinuado, y el texto en neón haciendo todo el
   trabajo de contraste. En hover se invierte y el neón pasa al fondo. */
.rf-page .nav .signin {
  font-family: var(--rf-poppins);
  font-size: 14px;
  font-weight: 600;
  color: var(--rf-neon);
  background: var(--rf-section);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 9px 20px;
  border-radius: var(--rf-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.rf-page .nav .signin:hover {
  background: var(--rf-neon);
  color: var(--rf-black);
  border-color: var(--rf-neon);
}

/* El switch ES/EN lo inyecta i18n.js como una píldora con borde (var(--line)/var(--muted)/
   var(--brand)), pensada para fondo claro. Acá se desarma a dos textos planos separados por
   una barra fina, como el sitio corporativo: sin fondo, sin borde, sin píldora.
   i18n.js inyecta sus estilos en un <style> que agrega al <head> en su init, o sea DESPUÉS
   de esta hoja: todo lo que se pise tiene que ganar por ESPECIFICIDAD (de ahí el
   .rf-page .nav delante de cada regla), no por orden. */
.rf-page .nav .lang-switch {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  align-items: center;
}

.rf-page .nav .lang-switch button {
  font-family: var(--rf-poppins);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 2px 10px;
  background: none;
  color: rgba(255, 255, 255, .55);
  transition: color .18s ease;
}

.rf-page .nav .lang-switch button:hover { color: var(--rf-white); }

/* La barra separadora va como borde izquierdo del segundo botón: así no hace falta
   un elemento extra que i18n.js tendría que saber inyectar. */
.rf-page .nav .lang-switch button + button { border-left: 1px solid rgba(255, 255, 255, .28); }

.rf-page .nav .lang-switch button.on {
  background: none;
  color: var(--rf-white);
  font-weight: 600;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rf-poppins);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--rf-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.rf-btn--primario { background: var(--rf-sky); color: var(--rf-white); }
.rf-btn--primario:hover { background: var(--rf-neon); color: var(--rf-dark); }

.rf-btn--secundario { background: transparent; color: var(--rf-white); border-color: var(--rf-white); }
.rf-btn--secundario:hover { background: var(--rf-neon); color: var(--rf-dark); border-color: var(--rf-neon); }

/* Variante secundaria del hero: el protagonista es la barra de búsqueda, así que este
   baja de jerarquía. */
.rf-btn--chico { padding: 10px 22px; font-size: 14px; }

/* Radio de tarjeta en vez de píldora, para que el botón case con el campo de brief. */
.rf-btn--cuadrado { border-radius: var(--rf-radio); }

/* ── HERO ────────────────────────────────────────────────────────────────── */

.rf-hero {
  background: var(--rf-grad);
  color: var(--rf-white);
  padding: 72px 0 84px;
  overflow: hidden;
}

.rf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.rf-hero h1 {
  font-size: clamp(38px, 5.2vw, 66px);
  /* La diagonal del gradiente aclara la esquina superior derecha justo donde cae
     el titular en pantallas anchas. La sombra lo despega sin ensuciar el diseño. */
  text-shadow: 0 2px 18px rgba(2, 4, 7, .45);
}

.rf-hero h1 em {
  font-style: normal;
  color: var(--rf-neon);
}

.rf-hero-sub {
  margin: 22px 0 34px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  max-width: 30em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(21, 22, 53, .3);
}

/* ── Barra de búsqueda del hero ──────────────────────────────────────────── */
/* Elemento protagonista de la columna izquierda. Mismo radio que las tarjetas
   (--rf-radio) para que campo y botón lean como una sola barra. */

.rf-buscador {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.rf-buscador-input {
  /* min-width:0 es obligatorio: sin él, el ancho mínimo por defecto de un input
     (~20 caracteres) impide que encoja y desborda la columna en pantallas chicas. */
  flex: 1 1 280px;
  min-width: 0;
  font-family: var(--rf-poppins);
  font-size: 16px;
  color: var(--rf-dark);
  background: var(--rf-white);
  border: 2px solid transparent;
  border-radius: var(--rf-radio);
  padding: 16px 20px;
  box-shadow: 0 8px 26px rgba(21, 22, 53, .18);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.rf-buscador-input::placeholder { color: rgba(21, 22, 53, .48); }

.rf-buscador-input:focus {
  outline: none;
  border-color: var(--rf-neon);
  box-shadow: 0 0 0 4px rgba(231, 253, 1, .3);
}

.rf-buscador .rf-btn { flex: 0 0 auto; }

.rf-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Mosaico de fotos ────────────────────────────────────────────────────── */
/* grid-auto-flow:dense es lo que hace que el onerror funcione bien: si una foto
   404ea y su celda se oculta, las siguientes recompactan y no queda hueco. */

.rf-mosaico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 12px;
}

.rf-mosaico-celda {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--rf-radio);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}

.rf-mosaico-celda--grande {
  grid-column: span 2;
  grid-row: span 2;
}

/* Aritmética del mosaico: con 3 columnas, las unidades de celda tienen que sumar
   múltiplo de 3 o la última fila queda coja. Con solo celdas 1x1 y 2x2 no sale nunca;
   la celda 2x1 es la que cuadra la cuenta. El molde vive en app.js (MOLDE) y hoy es
   1 grande (2x2 = 4) + 1 ancha (2x1 = 2) + 6 cuadradas (6) = 12 → 4 filas exactas en
   3 columnas y 6 filas exactas en el breakpoint de 2. Tocar el molde obliga a rehacer
   las DOS cuentas. */
.rf-mosaico-celda--ancha {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

/* Absolutas y apiladas: durante el crossfade conviven DOS <img> en la misma celda, la
   entrante encima con opacity 0 → 1 (la celda ya es position:relative). */
.rf-mosaico-celda img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: transform .4s ease, opacity .6s ease;
}

/* Estado de entrada de la foto nueva; app.js quita la clase en el frame siguiente y
   ahí arranca el fundido. Los 600ms tienen que seguir coincidiendo con MS_FUNDIDO. */
.rf-mosaico-celda img.rf-entra { opacity: 0; }

.rf-mosaico-celda:hover img { transform: scale(1.05); }

/* ── Franja de marcas ────────────────────────────────────────────────────── */

/* Franja OSCURA, no blanca: de los 29 logos, 22 son blancos sobre transparente y sobre
   fondo claro desaparecían por completo (medido: luminancia media ≥170 en 22 de 29).
   Los 7 restantes son oscuros, así que ningún fondo plano sirve para todos —por eso los
   logos se normalizan a blanco con el filtro de abajo en vez de dejarlos a su color. */
.rf-marcas {
  background: var(--rf-section);
  padding: 64px 0;
  overflow: hidden;
}

.rf-marcas h2 {
  text-align: center;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  color: var(--rf-white);
  margin-bottom: 38px;
}

/* La máscara desvanece los bordes para que los logos no aparezcan/desaparezcan
   de golpe contra el borde del viewport. */
.rf-cinta {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rf-cinta-pista {
  display: flex;
  flex: none;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
  animation: rf-desliza 60s linear infinite;
}

.rf-cinta:hover .rf-cinta-pista { animation-play-state: paused; }

/* Los 29 PNG son transparentes pero con arte de luminancia MIXTA: 22 claros y 7 oscuros.
   Sobre blanco los 22 claros desaparecen; sobre oscuro desaparecen los 7 oscuros. Se
   resuelve con fondo oscuro + halo blanco: el drop-shadow le da contorno legible al arte
   oscuro sin tocar el claro, y así los 29 se leen en la misma cinta conservando su color.
   (brightness(0) invert(1) también los igualaba, pero empastaba el arte denso en bloques.) */
.rf-cinta-pista img {
  flex: none;
  height: 46px;
  width: auto;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 0 3px rgba(255, 255, 255, .55));
  opacity: .8;
  transition: opacity .25s ease;
}

.rf-cinta-pista img:hover { opacity: 1; }

/* -50% y no -100%: la lista va duplicada en el HTML, así que medio recorrido es
   exactamente un ciclo completo y el salto al reiniciar es invisible. */
@keyframes rf-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-cinta-pista { animation: none; }
  .rf-cinta { overflow-x: auto; }
}

/* ── Tres promesas ───────────────────────────────────────────────────────── */

.rf-promesas { background: var(--rf-white); padding: 84px 0; }

/* minmax(0,1fr) y no 1fr: los badges son wordmarks de 800px de ancho, y con `1fr`
   (= minmax(auto,1fr)) el min-content del SVG reventaba la grilla y empujaba la tercera
   tarjeta fuera del contenedor. */
.rf-promesas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.rf-promesa {
  text-align: center;
  padding: 34px 26px;
  border: 1px solid rgba(21, 22, 53, .1);
  border-radius: var(--rf-radio);
  background: var(--rf-white);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rf-promesa:hover {
  border-color: var(--rf-sky);
  box-shadow: var(--rf-sombra);
  transform: translateY(-3px);
}

/* Los b_*.svg NO son iconos cuadrados: son wordmarks de 800x103 ("Better Creators",
   "Better Decisions", "Better Results") en neón. Van a ancho completo y sobre una banda
   oscura, porque el neón sobre blanco es ilegible. */
.rf-promesa-badge {
  display: block;
  background: var(--rf-black);
  border-radius: var(--rf-radio-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.rf-promesa-badge img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 240px;
  margin: 0 auto;
}

.rf-promesa h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--rf-dark);
  margin-bottom: 10px;
}

.rf-promesa p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(21, 22, 53, .74);
}

/* ── CTA final ───────────────────────────────────────────────────────────── */

.rf-cta {
  background: var(--rf-grad);
  color: var(--rf-white);
  padding: 78px 0;
  text-align: center;
}

.rf-cta h2 {
  font-size: clamp(27px, 3.6vw, 42px);
  max-width: 17em;
  margin: 0 auto 30px;
  text-shadow: 0 2px 18px rgba(2, 4, 7, .45);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.rf-footer {
  background: var(--rf-black);
  color: rgba(255, 255, 255, .8);
  padding: 60px 0 30px;
  font-size: 14px;
  font-weight: 300;
}

/* Marca ancha + dos columnas de links, como servicios.realfluencers.co. La columna de
   marca pesa ~1.7 porque lleva logo, tagline, claim, redes y tres filas de contacto;
   las de navegación son solo listas cortas. */
.rf-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 38px;
}

.rf-footer-logo { height: 38px; width: auto; display: block; max-width: 100%; margin-bottom: 22px; }

.rf-footer-tagline {
  font-family: var(--rf-epilogue);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--rf-white);
  margin: 0;
}

.rf-footer-tagline-neon { color: var(--rf-neon); }

.rf-footer-claim {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

.rf-redes { display: flex; gap: 12px; margin-top: 26px; }

/* Contacto: icono en neón + texto, todo el renglón clicable. */
.rf-footer-contacto {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.rf-footer-contacto a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  line-height: 1.5;
  transition: color .18s ease;
}

.rf-footer-contacto a:hover { color: var(--rf-neon); }

.rf-footer-contacto svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--rf-neon);
}

.rf-footer-copy { margin: 28px 0 0; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* Columnas de navegación. El h4 no entra en la regla de h1/h2/h3 de .rf-page, así que
   la tipografía de marca se declara acá. */
.rf-footer-col h4 {
  font-family: var(--rf-epilogue);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--rf-white);
  margin: 0 0 18px;
}

.rf-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.rf-footer-col a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  line-height: 1.5;
  transition: color .18s ease;
}

.rf-footer-col a:hover { color: var(--rf-neon); }

.rf-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--rf-white);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.rf-redes a:hover { background: var(--rf-neon); color: var(--rf-dark); border-color: var(--rf-neon); }
.rf-redes svg { width: 19px; height: 19px; }

/* Barra final fina: ya no lleva el copyright (subió a la columna de marca, como en el
   corporativo), solo los dos enlaces legales. */
.rf-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}

.rf-footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.rf-footer-legal a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.rf-footer-legal a:hover { color: var(--rf-neon); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rf-hero { padding: 48px 0 60px; }
  .rf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rf-promesas-grid { grid-template-columns: minmax(0, 1fr); }
  /* La marca pasa a ocupar el ancho completo y las dos columnas de links quedan
     debajo, de a pares. */
  .rf-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; }
  .rf-footer-marca { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .rf-wrap { padding: 0 18px; }
  /* El header pasa a dos filas: logo arriba, switch + acción abajo. Apretarlos en una
     sola fila obligaba a achicar el logo a ~15px de alto, ilegible. */
  .rf-page .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
  }
  .rf-page .nav .logo { flex: 1 1 100%; justify-content: center; }
  .rf-page .nav .logo img { height: auto; width: 200px; max-width: 62vw; }
  .rf-page .nav .signin { padding: 8px 15px; font-size: 13px; }
  /* Mosaico a 2 columnas: la celda grande sigue ocupando 2x2, o sea el ancho
     completo, y las chicas se acomodan de a pares. */
  .rf-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rf-hero-ctas .rf-btn, .rf-buscador .rf-btn { flex: 1 1 100%; }
  .rf-cinta-pista { gap: 30px; padding-right: 30px; }
  .rf-cinta-pista img { height: 36px; }
  .rf-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Igual que el logo del nav: el wordmark tiene relación ~11:1 y a 38px de alto mide
     ~430px, o sea más que el ancho útil. Se fija el ANCHO y el alto sale solo, así no
     se deforma ni desborda. */
  .rf-footer-logo { height: auto; width: 200px; max-width: 62vw; }
  .rf-footer-legal { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   cliente.html — SOLO piel
   ───────────────────────────────────────────────────────────────────────────
   Cero cambios de DOM: todos los ids, names y data-attributes que usa cliente.js
   quedan intactos. Acá solo se repintan selectores que ya existen en styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fondo negro del sitio corporativo + un glow azul MUY tenue en la esquina superior
   derecha. Va `fixed` para quedar anclado a esa esquina: con una lista larga de
   resultados, un gradiente que scrollea se corta a media página. No compite con el
   contenido porque todo lo que va encima (tarjeta del buscador, tarjetas de resultado)
   es OPACO; el glow solo despega el fondo de un negro plano.
   OJO: acá NO se pinta `color` sobre el body. El buscador y las tarjetas son blancos y
   sus textos siguen siendo oscuros; heredar blanco desde el body los borraría. Cada
   elemento que de verdad queda sobre el negro se aclara abajo, uno por uno. */
/* Mismo resplandor que el hero del landing. --rf-grad no se puede usar tal cual: es una
   diagonal pensada para una banda de ~600px, y estirada a una página que scrollea deja
   todo el flanco derecho azul brillante, compitiendo con las tarjetas. Se reconstruye la
   MISMA rampa (negro → azul noche → azul → celeste) en radiales concéntricos apoyados en
   la esquina superior derecha, que es donde el hero tiene su remate claro.
   El orden importa: la primera capa se pinta ARRIBA, así que va del más claro y chico al
   más oscuro y grande, y el negro plano de base al final. */
body.cliente.rf-page {
  background: var(--rf-black);
  background:
    radial-gradient(760px 520px at 100% 0%, rgba(4, 154, 241, .34), transparent 70%),
    radial-gradient(1180px 820px at 88% -6%, rgba(31, 102, 186, .30), transparent 66%),
    radial-gradient(980px 760px at 96% 8%, rgba(21, 22, 53, .55), transparent 72%),
    var(--rf-black);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.cliente.rf-page .app { max-width: var(--rf-ancho); padding-top: 40px; }

body.cliente.rf-page .page-title {
  font-family: var(--rf-epilogue);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--rf-white);   /* va directo sobre el negro */
  text-align: center;
}

/* El brief como protagonista: tarjeta BLANCA flotando sobre el negro. La sombra sube de
   la sutil de --rf-sombra (navy al 6%, invisible sobre negro) a una oscura y profunda,
   que es lo único que despega la tarjeta del fondo.
   1150px y no 780: sobraba aire a los lados. El tope real lo pone .app (--rf-ancho menos
   sus 30px de padding a cada lado ≈ 1120px), así que la tarjeta termina alineada al
   milímetro con la grilla de resultados de abajo. Sigue centrada por el margin auto y
   encoge sola en pantallas chicas. */
body.cliente.rf-page .finder {
  max-width: 1150px;
  margin: 28px auto 0;
  background: var(--rf-white);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rf-radio);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .38), 0 26px 64px rgba(0, 0, 0, .55);
  padding: 30px;
}

body.cliente.rf-page .field-brief--main label {
  font-family: var(--rf-epilogue);
  font-size: 21px;
  font-weight: 700;
  color: var(--rf-dark);
  text-align: center;
  display: block;
}

body.cliente.rf-page .field-sub {
  text-align: center;
  font-weight: 300;
  color: rgba(21, 22, 53, .62);
}

body.cliente.rf-page .field-brief--main textarea {
  font-family: var(--rf-poppins);
  font-size: 16px;
  /* styles.css lo pinta con var(--paper) (crema); sobre la tarjeta blanca desentona. */
  background: var(--rf-white);
  border: 2px solid rgba(21, 22, 53, .12);
  border-radius: var(--rf-radio-sm);
  padding: 16px 18px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.cliente.rf-page .field-brief--main textarea:focus {
  outline: none;
  border-color: var(--rf-sky);
  box-shadow: 0 0 0 4px rgba(4, 154, 241, .14);
}

body.cliente.rf-page .finder-actions { justify-content: center; }

body.cliente.rf-page .go {
  font-family: var(--rf-poppins);
  font-weight: 600;
  font-size: 16px;
  background: var(--rf-sky);
  color: var(--rf-white);
  border-radius: var(--rf-pill);
  padding: 14px 42px;
  transition: background .18s ease, color .18s ease;
}

body.cliente.rf-page .go:hover { background: var(--rf-neon); color: var(--rf-dark); }

body.cliente.rf-page .opts-toggle {
  font-family: var(--rf-poppins);
  color: var(--rf-sky);
  border-radius: var(--rf-pill);
}

body.cliente.rf-page .opts-toggle:hover { color: var(--rf-blue); }

/* Chips de filtro: selects y multi-selects redondeados. */
body.cliente.rf-page .finder-filters select,
body.cliente.rf-page .ms-btn {
  font-family: var(--rf-poppins);
  font-size: 14px;
  border: 1px solid rgba(21, 22, 53, .16);
  border-radius: var(--rf-pill);
  padding: 9px 18px;
  background: var(--rf-white);
  color: var(--rf-dark);
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.cliente.rf-page .finder-filters select:hover,
body.cliente.rf-page .ms-btn:hover { border-color: var(--rf-sky); }

body.cliente.rf-page .finder-filters select:focus,
body.cliente.rf-page .ms-btn:focus-visible {
  outline: none;
  border-color: var(--rf-sky);
  box-shadow: 0 0 0 3px rgba(4, 154, 241, .16);
}

body.cliente.rf-page .ms-panel {
  border-radius: var(--rf-radio-sm);
  box-shadow: var(--rf-sombra);
  border: 1px solid rgba(21, 22, 53, .1);
}

/* ── Grilla de resultados ────────────────────────────────────────────────── */
/* .results-list es MULTI-COLUMNA (columns), no grid: styles.css la fija en 2 y la baja a
   1 por debajo de 900px. Acá se redefine el juego de cortes entero. Las reglas ganan por
   ESPECIFICIDAD (4 clases contra 1), no por orden, así que el bloque de styles.css puede
   quedarse donde está sin estorbar. */
@media (min-width: 1100px) {
  body.cliente.rf-page .results-list { columns: 3; column-gap: 20px; }
}

@media (min-width: 700px) and (max-width: 1099.98px) {
  body.cliente.rf-page .results-list { columns: 2; column-gap: 20px; }
}

@media (max-width: 699.98px) {
  body.cliente.rf-page .results-list { columns: 1; }
}

/* Tarjetas de resultado. Las clases las genera cliente.js (cardHTML): no se renombra
   ninguna, solo se repintan. BLANCAS sobre el negro: igual que el buscador, el borde
   claro y la sombra navy no se ven sobre fondo oscuro, así que el relieve lo da una
   sombra negra suave. */
body.cliente.rf-page .pcard {
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--rf-radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .42);
  transition: transform .2s ease, box-shadow .2s ease;
}

body.cliente.rf-page .pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 20px 48px rgba(0, 0, 0, .55);
}

body.cliente.rf-page .pcard-name {
  font-family: var(--rf-epilogue);
  font-weight: 700;
  color: var(--rf-dark);
}

body.cliente.rf-page .pcard-badge { background: var(--rf-dark); border-radius: var(--rf-pill); }
body.cliente.rf-page .pb-num { color: var(--rf-neon); }

body.cliente.rf-page .pchip {
  border-radius: var(--rf-pill);
  background: rgba(4, 154, 241, .1);
  color: var(--rf-blue);
  font-weight: 500;
}

body.cliente.rf-page .pcard-cta {
  font-family: var(--rf-poppins);
  font-weight: 600;
  background: var(--rf-sky);
  color: var(--rf-white);
  border-radius: var(--rf-pill);
  transition: background .18s ease, color .18s ease;
}

body.cliente.rf-page .pcard-cta:hover { background: var(--rf-neon); color: var(--rf-dark); }

/* ── Lo que queda DIRECTO sobre el negro ─────────────────────────────────── */
/* Todo lo de acá abajo vive fuera de las tarjetas blancas, así que se aclara. */

/* "X de más de 5000 Realfluencers" */
body.cliente.rf-page .results-label { font-weight: 600; color: rgba(255, 255, 255, .74); }

/* Variante "buscando…": styles.css la pinta con var(--brand) (#009bdf), pensado para
   fondo claro. Sobre negro se sube al azul brillante de marca, que sí contrasta. */
body.cliente.rf-page .results-label--cargando,
body.cliente.rf-page .results-label--cargando .rl-icono { color: var(--rf-sky); }

/* Estado vacío Y errores: cliente.js reusa #empty para los dos (mostrarError reescribe
   su innerHTML con la misma <p> + .empty-sub), así que este par cubre ambos casos. */
body.cliente.rf-page .empty { color: rgba(255, 255, 255, .78); }
body.cliente.rf-page .empty p { color: var(--rf-white); }
body.cliente.rf-page .empty-sub { color: rgba(255, 255, 255, .58); }

/* Bloque de cierre del cliente sin login (renderMoreBlock): cuelga de .results, no de
   una tarjeta, así que también va sobre el negro. */
body.cliente.rf-page .pcard-more-text { color: rgba(255, 255, 255, .72); }
body.cliente.rf-page .pcard-more .pcard-cta { display: inline-flex; }

@media (max-width: 620px) {
  body.cliente.rf-page .finder { padding: 22px 18px; }
}