/* ═══ A · TOKENS DEL SISTEMA v6 ═══
   Paleta «marca recuperada» (aprobada 25/08/2026): las superficies salen del CRM
   —para que la app y la web hablen el mismo idioma— y los colores salen del LOGO,
   no de la web actual. El logo (`icon-5.png`) es 75 % azul marino #133157 y 25 %
   ámbar #FCB51F, medido sobre el archivo. El negro y el #C99A48 apagado de hoy se
   quedan donde estaban: en el modo oscuro. Son dos registros de la misma marca. */
html.rf-claro{
  color-scheme: light;
  /* superficies — grises del CRM, frío y neutro para no teñir las fotos */
  --rf-canvas:#F4F6F8; --rf-elevated:#FFFFFF; --rf-sunken:#EEF1F5;
  --rf-chip:rgba(19,49,87,.06);
  /* texto — azul marino del logo en vez de negro: 12,08 sobre el fondo */
  --rf-ink:#133157; --rf-ink-muted:#48566B; --rf-ink-faint:#5A6879;
  /* el ámbar del logo da 1,65 como TEXTO: es color de botón, no de letra. Para
     texto se usa el oro profundo (4,94) y para superficie el ámbar (7,33 con el
     azul encima, que es exactamente la pareja que ya vive en el logo). */
  /* 🚫 EL ORO PROFUNDO SE VA (orden de Pablo, 25/08). Un ámbar legible como letra
     NO EXISTE: cualquier ámbar oscurecido hasta 4,5:1 sobre blanco ES ese marrón
     —#A2721A da 3,91 y #8A6420 da 5,35, no hay punto medio—. Así que «solo ámbar»
     se resuelve al revés: el ámbar no toca NUNCA una letra, y las letras que antes
     iban en oro se van a la tinta de la página. El acento entero lo lleva lo
     gráfico (bloque W.8) y la única «letra» ámbar es el número de sección, que va
     con aria-hidden y es un dibujo, no texto.
     El token se conserva con su nombre porque lo usan 20 reglas y siempre como
     `color:` —nunca como fondo ni como borde—, así que redefinirlo aquí lo apaga
     de golpe en todo el sitio sin tocar ninguna estructura. */
  --rf-gold:#133157; --rf-gold-hover:#0E2440; --rf-gold-pressed:#0A1B30;
  --rf-gold-surface:#FCB51F; --rf-on-gold:#133157;
  --rf-gold-08:rgba(252,181,31,.10); --rf-gold-12:rgba(252,181,31,.16);
  --rf-gold-15:rgba(252,181,31,.20); --rf-gold-25:rgba(252,181,31,.32);
  --rf-gold-40:rgba(252,181,31,.48);
  --rf-hairline-faint:rgba(19,49,87,.08); --rf-hairline:rgba(19,49,87,.15);
  --rf-hairline-strong:rgba(19,49,87,.32);
}

/* ═══ B · DONDE NACEN LOS COLORES DE VERDAD ═══
   Redefinir :root y body NO basta: el color base del v6 nace en `body.rfv6-page`
   (0,1,1) y le gana a `body` (0,0,1). Los tokens de la home nacen en
   `body.rfh2-page`. Si el modo claro no escribe en ESOS MISMOS selectores, hereda
   el gris del modo oscuro y el texto sale a 1, 18 sobre el papel. Es el mismo error
   que `error_alias_css_se_resuelven_en_la_raiz`, en versión especificidad. */
html.rf-claro, html.rf-claro body{ background:var(--rf-canvas) !important; color:var(--rf-ink); }
html.rf-claro body.rfv6-page{ color:var(--rf-ink) !important; background:var(--rf-canvas) !important; }
html.rf-claro body.rfh2-page, html.rf-claro body.rfh-nav-site{
  --rfh-ink:#F4F6F8; --rfh-ink2:#FFFFFF; --rfh-paper:#EEF1F5;
  /* 🚫 `--rfh-gold` era el ÚLTIMO token con el oro profundo, y se me escapó en W.9
     porque busqué `--rf-gold` y la home tiene el suyo propio. Pintaba los guiones
     de sus overlines vía pseudo-elemento, que es donde no miraba mi detector. */
  --rfh-gold:#133157; --rfh-gold-soft:rgba(252,181,31,.16);
  --rfh-txt:#133157; --rfh-txt-dim:#48566B; --rfh-hair:rgba(19,49,87,.15);
}
html.rf-claro .rfv6-main, html.rf-claro .rf-tile, html.rf-claro .site-content, html.rf-claro #content{ background-color:var(--rf-canvas); }
html.rf-claro .rf-tile--elevated{ background-color:var(--rf-elevated); }
html.rf-claro .rf-tile--sunken{ background-color:var(--rf-sunken); }

html.rf-claro /* ═══ C · TIPOGRAFÍA QUE NO LEE LOS TOKENS ═══ */
h1, html.rf-claro h2, html.rf-claro h3, html.rf-claro h4, html.rf-claro .rf-numhead__title, html.rf-claro .rf-hero__title, html.rf-claro .rf-cta__title, html.rf-claro .rfm7-paso__t{
  color:var(--rf-ink) !important; }
html.rf-claro .rf-tile p, html.rf-claro .rf-wrap p, html.rf-claro .rfv6-main li, html.rf-claro .rfv6-main blockquote{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-overline{ color:var(--rf-gold) !important; }
html.rf-claro .rf-ink-faint, html.rf-claro .rf-meta__item{ color:var(--rf-ink-muted) !important; }
html.rf-claro /* Tablas de precios: las celdas llevan su propio gris y no heredan del cuerpo. */
.rf-pricetable, html.rf-claro .rf-pricetable tr, html.rf-claro .rf-pricetable td, html.rf-claro .rf-pricetable th, html.rf-claro .rf-pricetable__note{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-pricetable th, html.rf-claro .rf-pricetable strong{ color:var(--rf-ink) !important; }

html.rf-claro /* ═══ D · LO QUE VA SOBRE FOTO SE QUEDA CLARO ═══
   En un hero el fondo es la imagen, no la página: ahí el texto claro es lo correcto
   y el velo se mantiene. Es la regla que ya seguía el v6 y la que hace que la home
   funcione sin tocar su maquetación. */
.rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-hero__title, html.rf-claro .rf-cta .rf-cta__title, html.rf-claro .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-lead, html.rf-claro .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-overline, html.rf-claro .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-meta__item, html.rf-claro .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) p, html.rf-claro .rf-cta p, html.rf-claro .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-btn--ghost{ color:#F5F5F5 !important; }
html.rf-claro .rfh-hero .rfh-fw, html.rf-claro .rfh-hero .rfh-csub, html.rf-claro .rfh-hero h1, html.rf-claro .rfh-hero h2, html.rf-claro .rfh-hero p, html.rf-claro .rfh-hero span:not(.rfh-sc){ color:#F5F2EC !important; }
html.rf-claro .rfh-hero .rfh-sc, html.rf-claro .rfh-hero b{ color:#FCB51F !important; }
html.rf-claro /* El velo del hero de la home iba al 87 %: sobre papel tapaba la foto. Al 55 % la
   imagen respira y el texto sigue por encima de 4, 5. */
/* ⚠️ Medido, no estimado: con el velo al 22 % en el centro, un texto claro sobre
   una zona blanca de la foto cae a 1, 51. Ningún medidor automático puede verlo
   —no sabe qué hay en la imagen—; se ve mirando. Hace falta ≥62 % de velo allí
   donde haya texto: arriba la foto respira, abajo el texto se lee. */
.rfh-hero__scrim{ background:linear-gradient(rgba(14,14,16,.34) 0%, rgba(14,14,16,.40) 26%, rgba(14,14,16,.66) 46%, rgba(14,14,16,.80) 72%, rgba(14,14,16,.88) 100%) !important; }
html.rf-claro /* 🧯 EL PEOR FALLO DE LA SESIÓN, y el medidor no podía verlo. Los heros del v6
   (mariages, tarifs, contact, las 10 landings…) conservaban el velo del modo
   noche —#09090B al 87 %—: un rectángulo casi negro entre una nav clara y un
   cuerpo claro, con la foto invisible debajo. El contraste medía 15:1, impecable, y el diseño estaba mal. Medir no es mirar. Mismo degradado que la home. */
.rf-hero__scrim, html.rf-claro .rf-cta__scrim, html.rf-claro .rfm7-bande__voile{
  background:linear-gradient(rgba(14,14,16,.34) 0%, rgba(14,14,16,.40) 26%,
             rgba(14,14,16,.66) 46%, rgba(14,14,16,.80) 72%, rgba(14,14,16,.88) 100%) !important; }
html.rf-claro /* Los chips de filtro van sobre la foto del hero. */
.rfh-filters a, html.rf-claro .rfh-filters button, html.rf-claro .rfh-chip{ color:#F5F2EC !important; border-color:rgba(245,242,236,.45) !important; }
html.rf-claro .rfh-filters .on, html.rf-claro .rfh-chip.on{ background:#FCB51F !important; color:#133157 !important; }

html.rf-claro /* ═══ E · BOTONES: el oro de marca vuelve a ser FONDO ═══
   Con --rf-gold en profundo, un botón que use el token de fondo cae a 3, 25. El fondo
   se pinta con el oro de marca y el texto encima en tinta: 7, 4. */
.rf-btn--primary, html.rf-claro .rfh-btn--gold, html.rf-claro .rfh-btn--primary, html.rf-claro .rf-badge, html.rf-claro .rf-price__badge, html.rf-claro .rf-pd-submit{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; font-weight:500; }
html.rf-claro .rf-btn--primary:hover, html.rf-claro .rfh-btn--gold:hover{ background:#FFC544 !important; }
html.rf-claro /* El fantasma no lleva fondo: en el hero va sobre la foto, fuera va sobre el papel. */
body[class] .rfh-hero .rfh-btn--ghost{ background:transparent !important; color:#F5F2EC !important;
  border-color:rgba(245,242,236,.55) !important; }
html.rf-claro .rfh-btn--ghost{ background:transparent !important; color:var(--rf-ink) !important;
  border-color:var(--rf-hairline-strong) !important; }
html.rf-claro .rf-btn--ghost{ color:var(--rf-ink) !important; border-color:var(--rf-hairline-strong) !important; }

/* s385 · EL FILETE DEL BOTÓN FANTASMA CUANDO ESTÁ SOBRE EL HERO.
   La regla de arriba pinta el filete con `--rf-hairline-strong` (marino al 32 %), que
   está pensado para el PAPEL: sobre papel da 1,9, igual que el modo oscuro, y ahí está
   bien. Pero el hero NO se vuelve papel en modo claro — sigue siendo marino —, así que
   ese filete queda marino sobre marino: **contraste 1,00, invisible**. El texto sí lo
   habían arreglado (va crema, 12:1); el borde se quedó atrás y el botón se leía como
   texto suelto en vez de como botón.
   Medido el 27/08/2026 en /a-propos/ y /carte-cadeau/. Se sube «un poco» (orden de
   Pablo): crema al 45 % da 2,3 sobre el marino del hero, en la misma línea que el 1,8
   del modo oscuro — un filete que se ve sin gritar.
   ⚠️ Va como regla DEL COMPONENTE, no tocando `--rf-hairline-strong`: ese token lo usan
      más piezas y subirlo aquí les cambiaría el borde a todas (el fallo de
      `error_regla_global_pisa_el_cap_del_componente`, que ya nos mordió). */
html.rf-claro body[class] .rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) .rf-btn--ghost,
html.rf-claro body[class] .rfh-hero .rfh-btn--ghost{
  border-color:rgba(245,245,245,.45) !important; }

html.rf-claro /* ═══ F · NAVEGACIÓN ═══ */
.rfh-nav, html.rf-claro .rfh-nav__pill, html.rf-claro .anita-header, html.rf-claro header.site-header{
  background:rgba(244,246,248,.92) !important;
  backdrop-filter:saturate(140%) blur(10px); border-color:var(--rf-hairline) !important; }
html.rf-claro .rfh-nav a, html.rf-claro .rfh-nav__pill a, html.rf-claro .anita-header a{ color:var(--rf-ink) !important; }
html.rf-claro .rfh-nav a:hover, html.rf-claro .rfh-nav__pill a:hover{ color:var(--rf-gold) !important; }

html.rf-claro /* ═══ G · PIE (v6 + el pie legal) ═══ */
.rf-footernav{ background:var(--rf-sunken) !important; border-top-color:var(--rf-gold-25) !important; }
html.rf-claro .rf-footernav__col a{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-footernav__col a:hover, html.rf-claro .rf-footernav__col a:focus{ color:var(--rf-gold) !important; }
html.rf-claro /* Los rótulos del pie van en oro de marca: 7, 77 sobre negro, 2, 19 sobre papel. */
.rf-footernav__h, html.rf-claro .rf-footer__social-label{ color:var(--rf-gold) !important; }
html.rf-claro .rf-footer__col a, html.rf-claro .rf-footer__col li span{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-footer__col a:hover, html.rf-claro .rf-footer__col a:focus{ color:var(--rf-gold) !important; }
html.rf-claro .rf-footer__legal, html.rf-claro .rf-footer__legal span, html.rf-claro .rf-footer__legal a{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-footer__social a{ color:var(--rf-ink-muted) !important; background:rgb(26 26 28 / .04) !important; }
html.rf-claro .rf-footer__social a:hover, html.rf-claro .rf-footer__social a:focus-visible{ color:var(--rf-gold) !important; }
html.rf-claro .rfp4-recaptcha-note{ color:var(--rf-ink-muted) !important; opacity:1 !important; }
html.rf-claro .rfp4-recaptcha-note a, html.rf-claro .grecaptcha-badge + * a{ color:var(--rf-gold) !important; }

html.rf-claro /* ═══ H · EL PIE DEL TEMA ANITA ═══
   /portfolio/ carga el pie de Anita ADEMÁS del v6 (bug conocido, cabo abierto aparte).
   Mientras el duplicado exista, al menos que se lea. */
.anita-copyright, html.rf-claro .anita-footer, html.rf-claro .anita-footer a, html.rf-claro .anita-footer p, html.rf-claro .rf-footer-reserver{ color:var(--rf-ink-muted) !important; }
html.rf-claro .anita-footer h1, html.rf-claro .anita-footer h2, html.rf-claro .anita-footer h3, html.rf-claro .anita-footer h4{ color:var(--rf-ink) !important; }

html.rf-claro /* ═══ I · PÁGINAS LEGALES (mentions, CGV, confidentialité) ═══ */
.rf-hero--legal .rf-hero__title{ color:var(--rf-ink) !important; }
html.rf-claro .rf-hero--legal .rf-hero__lead{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-legal, html.rf-claro .rf-legal p, html.rf-claro .rf-legal li, html.rf-claro .rf-legal td{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-legal h2, html.rf-claro .rf-legal h3, html.rf-claro .rf-legal strong, html.rf-claro .rf-legal th{ color:var(--rf-ink) !important; }
html.rf-claro .rf-legal em{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-legal a{ color:var(--rf-gold) !important; }

html.rf-claro /* ═══ J · BLOG, ÁLBUMES, AVIS, CTA MÓVIL ═══ */
.rf-alb__lead, html.rf-claro .rf-alb__quote p, html.rf-claro .rf-alb__film b{ color:var(--rf-ink) !important; }
html.rf-claro .rf-blog__card, html.rf-claro .rf-blog__excerpt, html.rf-claro .rf-post__meta{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rfmob-cta{ color:var(--rf-ink) !important; background:rgba(255,255,255,.92) !important;
  border-color:var(--rf-hairline) !important; }

html.rf-claro /* ═══ K · LOGO ═══
   El de la web es blanco y sobre estos fondos desaparece. `icon-5.png` no es un
   apaño: es la variación azul marino + ámbar del logo, la que le corresponde a
   este registro. ⚠️ Solo existe el ICONO; falta el lockup con el texto. */
.rfh-nav__logo img, html.rf-claro .rf-footer__logo img, html.rf-claro .anita-header .custom-logo{ visibility:hidden; }
html.rf-claro .rfh-nav__logo, html.rf-claro .rf-footer__logo{
  background:url('/wp-content/uploads/2026/02/Rufino-studio-Logo-Design_Final-File_icon-5.png') left center/contain no-repeat; }

html.rf-claro /* ═══ M · LAS SUPERFICIES QUE SEGUÍAN OSCURAS ═══
   🧯 Error propio, encontrado midiendo: aclarar el TEXTO sin aclarar SU FONDO deja
   oscuro sobre oscuro. Al poner la tinta azul de forma global, las zonas que llevan
   el negro del modo oscuro clavado pasaron de leerse (texto claro sobre negro) a no
   leerse: `.rf-legal` cayó a 1, 47. Estas piezas se tratan por FONDO, no por color
   de letra. Hermano de `error_regla_global_pisa_el_cap_del_componente`. */

/* Transición de página y preloader: en modo claro, un overlay negro es un fogonazo
   a cada navegación. Nadie lo habría visto en una captura fija. */
#rfv6-pt-overlay, html.rf-claro .anita-preloader-wrap{ background:var(--rf-canvas) !important; }

html.rf-claro /* Páginas legales: la sección entera lleva el negro fijo. */
.rf-legal, html.rf-claro .rf-hero--legal, html.rf-claro .rf-hero--blog{ background:var(--rf-canvas) !important; }
html.rf-claro .rf-hero--blog :is(h1,h2,.rf-overline){ color:var(--rf-ink) !important; }
html.rf-claro .rf-hero--blog :is(p,.rf-lead,.rf-hero__lead){ color:var(--rf-ink-muted) !important; }

html.rf-claro /* Menú lateral y desplegables de la navegación. */
#rfhDrawer, html.rf-claro .rfh-drawer{ background:rgba(244,246,248,.985) !important; }
html.rf-claro #rfhDrawer a, html.rf-claro .rfh-drawer a, html.rf-claro #rfhDrawer span, html.rf-claro .rfh-drawer span{ color:var(--rf-ink) !important; }
html.rf-claro .rfh-dd{ background:var(--rf-elevated) !important; border-color:var(--rf-hairline) !important; }
html.rf-claro .rfh-dd a, html.rf-claro .rfh-dd span{ color:var(--rf-ink) !important; }

html.rf-claro /* Banner de cookies del tema Anita: el velo se queda (es un modal), la caja no. */
.anita-rcpm-box{ background:var(--rf-elevated) !important; }
html.rf-claro .anita-rcpm-box p, html.rf-claro .anita-rcpm-box span, html.rf-claro .anita-rcpm-box li{ color:var(--rf-ink-muted) !important; }
html.rf-claro .anita-rcpm-box h1, html.rf-claro .anita-rcpm-box h2, html.rf-claro .anita-rcpm-box h3, html.rf-claro .anita-rcpm-box strong{ color:var(--rf-ink) !important; }

html.rf-claro /* Sistema de reservas (rufino-booking). */
.rfv2-panel, html.rf-claro .rufino-category-card{ background:var(--rf-elevated) !important; border-color:var(--rf-hairline) !important; }
html.rf-claro .rfv2-panel p, html.rf-claro .rfv2-panel span, html.rf-claro .rfv2-panel li, html.rf-claro .rfv2-panel label, html.rf-claro .rufino-category-card p, html.rf-claro .rufino-category-card span{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rfv2-panel h1, html.rf-claro .rfv2-panel h2, html.rf-claro .rfv2-panel h3, html.rf-claro .rfv2-panel strong, html.rf-claro .rufino-category-card h2, html.rf-claro .rufino-category-card h3{ color:var(--rf-ink) !important; }

html.rf-claro /* Bloque de newsletter (aparece en el pie del portfolio). */
.rf-newsletter, html.rf-claro .rf-newsletter-inner{ background:var(--rf-sunken) !important; }
html.rf-claro .rf-newsletter p, html.rf-claro .rf-newsletter label, html.rf-claro .rf-newsletter span, html.rf-claro .rf-newsletter li{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-newsletter h2, html.rf-claro .rf-newsletter h3, html.rf-claro .rf-newsletter strong{ color:var(--rf-ink) !important; }
html.rf-claro .rf-newsletter input{ background:var(--rf-elevated) !important; color:var(--rf-ink) !important;
  border-color:var(--rf-hairline-strong) !important; }
html.rf-claro #rfNlBtn{ background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }

html.rf-claro /* Menú legal del pie del tema. */
#menu-legal-footer a, html.rf-claro .anita-copyright-menu a{ color:var(--rf-ink-muted) !important; }

html.rf-claro /* Paginación del blog: el número activo iba con el oro profundo de FONDO. */
.page-numbers.current{ background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important; }
html.rf-claro .page-numbers{ color:var(--rf-ink-muted) !important; }

/* s385 · LA PAGINACIÓN SE QUEDÓ CON SU FONDO OSCURO.
   La regla de arriba ya pasaba el TEXTO a color de papel, pero cada botón lleva su
   propio `background:#212224` y ese no se convirtió: marino sobre gris muy oscuro,
   **1,22**. Medido el 27/08/2026 en /?s=mariage y /blog/page/2/ — las vistas de
   paginación y de búsqueda, que no salen en el sitemap y por eso nadie las mira.
   Otra vez el mismo patrón: texto arreglado, superficie olvidada.
   ⚠️ `:not(.current)` a propósito: el botón de la página actual va en ámbar con letra
      marino (regla de arriba) y ahí el contraste ya es bueno. */
html.rf-claro body[class] a.page-numbers:not(.current),
html.rf-claro body[class] span.page-numbers:not(.current){
  background:var(--rf-sunken) !important; border-color:var(--rf-hairline) !important; }

html.rf-claro /* ═══ N · RED DE SEGURIDAD: EL TEXTO HEREDA, NO SE PERSIGUE ═══
   🧯 Lección de esta sesión. Se intentó cubrir pieza por pieza y no converge: tras
   cuatro rondas seguían apareciendo componentes con el gris del modo oscuro clavado
   (#E6E6E6, #A6A6A6, blanco) repartidos entre el tema Anita, el plugin de reservas, Elementor y los bloques propios de la home. Enumerarlos es una guerra sin fin —
   cada ronda encontraba una «quinta pieza que no leía los tokens».
   Se invierte: TODO el texto del contenido toma la tinta del día, y el claro se
   devuelve solo donde el fondo es una FOTO (bloques D y Ñ, que van con !important
   y por tanto ganan a esta red). */
/* ⚠️ Anclada a `body[class]`, NO a `body.rfv6-page`: /portfolio/ y los 6 álbumes usan
   `page-albums-listing.php` y su body no lleva esa clase — por eso se quedaron fuera
   y medían 48 fallos cuando el resto ya estaba limpio. `body[class]` pesa lo mismo
   (0,1,1) y cubre cualquier plantilla, presente o futura. */
body[class] :is(p,span,li,td,th,dt,dd,label,figcaption,blockquote,div,
                sup,sub,small,b,strong,em,i,u,s,mark,abbr,cite,time,address,summary,figure,article,section,aside,header,footer,nav){
  color:var(--rf-ink-muted) !important;
}
html.rf-claro body[class] :is(h1,h2,h3,h4,h5,h6){ color:var(--rf-ink) !important; }
html.rf-claro body[class] a{ color:var(--rf-ink) !important; }
html.rf-claro body[class] a:hover{ color:var(--rf-gold) !important; }

html.rf-claro /* ═══ Ñ · LO QUE VA SOBRE FOTO, Y LOS BOTONES ═══
   Estas dos familias tienen su propio fondo (una imagen o el ámbar), así que su
   texto NO puede seguir a la tinta del día. Van después de la red y con !important. */
/* ⚠️ `.rf-cta :is(p)` pesa (0,1,1) y la red del bloque N pesa (0,1,2): sin
   `body[class]` delante, el CTA final perdía y su texto salía azul-gris sobre el
   velo negro. A 1280 no se veía en la medición porque la foto lo tapaba lo bastante
   para contarlo como «sobre foto»; asomó a 375, donde la imagen ya no cubre. El
   fallo estaba en los dos tamaños — el medidor solo lo delató en uno. */
.rf-hero:not(.rf-hero--legal):not(.rf-hero--blog) :is(p,span,li,b,strong,em,small,sup,a,div,h1,h2,h3,time,cite,address), html.rf-claro body[class] .rf-cta :is(p,span,li,b,strong,em,small,a,div,h2,h3,time), html.rf-claro .rfh-hero :is(p,span,b,strong,em,small,a,div,h1,h2):not(.rfh-sc):not(.rfh-btn){ color:#F5F2EC !important; }
html.rf-claro /* el botón fantasma del CTA va sobre el mismo velo */
body[class] .rf-cta .rf-btn--ghost{ color:#F5F2EC !important;
  border-color:rgba(245,242,236,.55) !important; background:transparent !important; }
html.rf-claro /* Los botones del hero tienen fondo propio: no pueden llevar el texto del hero. */
.rfh-hero .rfh-btn, html.rf-claro .rf-hero .rf-btn{ color:inherit !important; }
html.rf-claro .rfh-hero .rfh-sc, html.rf-claro .rfh-hero b{ color:#FCB51F !important; }
html.rf-claro /* «Voir le projet» aparece encima de la foto de cada álbum al pasar por encima. */
.anita-gl-gallery__explore, html.rf-claro .anita-gl-gallery__explore *{ color:#F5F5F5 !important; }

html.rf-claro /* Los hijos de un botón heredan del botón: si no, la red les daría la tinta del
   contenido y saldría gris sobre el ámbar. */
.rf-btn *, html.rf-claro .rfh-btn *, html.rf-claro .rufino-btn *, html.rf-claro button *{ color:inherit !important; }
html.rf-claro .rufino-btn, html.rf-claro .rufino-btn-next, html.rf-claro .rufino-btn-prev{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }

html.rf-claro /* ═══ O · FORMULARIOS Y EL CALENDARIO DE DISPONIBILIDADES ═══
   Campos y paneles con el gris oscuro #212224 del modo oscuro. Un formulario con el
   fondo oscuro y la tinta del día encima da 1, 22: es donde escribe un lead. */
.rf-avail-preview, html.rf-claro .rf-avail-wrap, html.rf-claro .rf-avail{ background:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro .rf-avail-day{ color:var(--rf-ink-muted) !important; }
html.rf-claro .rf-avail-day.past{ color:var(--rf-ink-faint) !important; opacity:.55; }
html.rf-claro input, html.rf-claro textarea, html.rf-claro select, html.rf-claro .anita-select, html.rf-claro .anita-select__trigger{
  background:var(--rf-elevated) !important; color:var(--rf-ink) !important;
  border-color:var(--rf-hairline-strong) !important; }
html.rf-claro input::placeholder, html.rf-claro textarea::placeholder{ color:var(--rf-ink-faint) !important; }

html.rf-claro /* ═══ P · LO ÚLTIMO QUE HABLA ═══
   🧯 El orden importa tanto como la especificidad: la red del bloque N lleva
   !important, así que pisaba a los botones definidos ANTES que ella y el texto del
   badge salía gris sobre el ámbar (4,17). Todo lo que tiene fondo propio se declara
   aquí, al final, para que gane por orden en el documento. */
/* ⚠️ con `body[class]` delante: sin él, la red (0,1,2) le gana a `.rf-badge` (0,1,0)
   aunque esto vaya después, y el badge salía gris sobre el ámbar. */
body[class] .rf-btn--primary, html.rf-claro body[class] .rfh-btn--gold, html.rf-claro body[class] .rfh-btn--primary, html.rf-claro body[class] .rf-badge, html.rf-claro body[class] .rf-price__badge, html.rf-claro body[class] .rf-pd-submit, html.rf-claro body[class] .rufino-btn, html.rf-claro body[class] .rufino-btn-next, html.rf-claro body[class] .rufino-btn-prev, html.rf-claro body[class] .page-numbers.current, html.rf-claro body[class] .rfh-hero .rfh-btn--gold, html.rf-claro body[class] #rfNlBtn{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rf-btn--primary *, html.rf-claro body[class] .rfh-btn--gold *, html.rf-claro body[class] .rf-badge *, html.rf-claro body[class] .rf-price__badge *, html.rf-claro body[class] .rufino-btn *, html.rf-claro body[class] .rf-pd-submit *{
  color:var(--rf-on-gold) !important; }

html.rf-claro /* Los filtros del hero de la home van sobre la foto: texto claro, no tinta. */
body[class] .rfh-hero button, html.rf-claro body[class] .rfh-hero .rfh-filters *, html.rf-claro body[class] .rfh-filters button, html.rf-claro body[class] .rfh-filters a{ color:#F5F2EC !important; }
html.rf-claro body[class] .rfh-filters .on, html.rf-claro body[class] .rfh-filters button.on, html.rf-claro body[class] .rfh-chip.on{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important; }
html.rf-claro body[class] .rfh-hero .rfh-btn--ghost{ background:transparent !important; color:#F5F2EC !important;
  border-color:rgba(245,242,236,.55) !important; }

html.rf-claro /* ═══ Q · ÚLTIMOS CABOS, MEDIDOS UNO A UNO ═══ */
/* El número de paso lleva su propia pastilla en #0D0D0D, casi negra. Suponer que
   era ámbar claro y darle tinta azul lo empeoró (2,61 → 1,49): hay que mirar el
   fondo, no deducirlo. Pastilla ámbar + número azul, como los botones: 7, 33. */
body[class] .rfl2b-step__num{ background:var(--rf-gold-surface) !important;
  color:var(--rf-on-gold) !important; border-color:var(--rf-gold-surface) !important; }
html.rf-claro /* La galería del portfolio la pinta Anita en WebGL: las fotos van a un <canvas> y
   NO hay <img> en el DOM, así que el medidor cree que este texto está sobre el
   fondo claro cuando en realidad va sobre la imagen. Se queda claro a propósito. */
body[class] .anita-gl-gallery__explore, html.rf-claro body[class] .anita-gl-gallery__explore *{
  color:#FFFFFF !important; opacity:1 !important; }
html.rf-claro body[class] .anita-meta, html.rf-claro body[class] [class*="anita-gl-gallery"] .anita-meta{
  color:#FCB51F !important; opacity:1 !important; }

html.rf-claro /* ═══ R · TARJETAS CON FOTO Y VELO OSCURO ═══
   🧯 Estas NO las encontró el barrido normal: como el texto va sobre una foto, el
   medidor las «perdonaba». Al volver a medir contando también lo que va sobre foto
   aparecieron 74 casos a 375 px, todos iguales: tinta azul sobre el velo #141416 de
   la tarjeta = 2, 47. Lección: perdonar por contexto esconde fallos reales — la
   segunda pasada hay que hacerla sin perdonar nada. */
body[class] :is([class*="rf-d-univers"], [class*="rfp4-card"]), html.rf-claro body[class] :is([class*="rf-d-univers"], [class*="rfp4-card"]) *{ color:#F5F2EC !important; }
html.rf-claro body[class] .rf-d-univers__kicker, html.rf-claro body[class] .rfp4-card__meta, html.rf-claro body[class] .rfp4-card__cta{ color:#FCB51F !important; }

html.rf-claro /* ═══ S · LO QUE APARECIÓ AL BARRER EL SITIO ENTERO ═══
   Las 14 páginas principales ya daban 0. Estas salieron al medir las 29 restantes
   (landings, álbumes, estimation, espace-client): mismo patrón de siempre, un
   contenedor con el gris #212224 o el oro viejo #C99A48 clavados. */
/* El configurador de /estimation/: cada opción es un LABEL con fondo oscuro. */
body[class] .rf-cfg-choice{ background:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-cfg-choice-t{ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-cfg-choice-s{ color:var(--rf-ink-muted) !important; }
html.rf-claro body[class] .rf-cfg-choice input:checked ~ *{ color:var(--rf-ink) !important; }

html.rf-claro /* Los bloques de cita de las landings (BLOCKQUOTE.rf-quote). */
body[class] .rf-quote{ background:var(--rf-sunken) !important;
  border-color:var(--rf-gold-25) !important; }
html.rf-claro body[class] .rf-quote :is(p,span,q){ color:var(--rf-ink-muted) !important; }
html.rf-claro body[class] .rf-quote cite{ color:var(--rf-ink) !important; }

html.rf-claro /* El botón de /espace-client/ llevaba el oro viejo de fondo. */
body[class] .rf-ec-btn{ background:var(--rf-gold-surface) !important;
  border-color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rf-ec-btn, html.rf-claro body[class] .rf-ec-btn *{ color:var(--rf-on-gold) !important; }

html.rf-claro /* Un botón dentro de un hero manda sobre el texto del hero: si no, hereda el
   blanco del hero y queda blanco sobre ámbar (1,6). */
body[class] .rf-hero .rf-btn--primary, html.rf-claro body[class] .rf-hero .rf-btn--primary *, html.rf-claro body[class] .rf-cta .rf-btn--primary, html.rf-claro body[class] .rf-cta .rf-btn--primary *{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }

html.rf-claro /* ═══ T · LOS POSTS DEL BLOG ═══
   Las tarjetas de «artículos relacionados» del final de cada post llevan el gris
   #212224. Se vieron al barrer los posts uno a uno: el listado /blog/ ya daba 0, pero la plantilla de post individual es otra y nadie la había mirado. */
body[class] .rf-related-item{ background:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-related-item :is(h2,h3,h4,strong){ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-related-item :is(p,span,time,div,small){ color:var(--rf-ink-muted) !important; }
html.rf-claro body[class] .rf-related-item:hover{ border-color:var(--rf-gold-40) !important; }

html.rf-claro /* ═══ U · TRATAMIENTO DE IMAGEN DEL MODO CLARO ═══
   Valores aprobados por Pablo en la maqueta (preajuste «Fundido»):
   esquinas 26px salvo headers · fundido 10% · halo 66% · velo 44%
   saturación 104% · brillo 106% · contraste 96% · grade frío 8%. */

/* U.1 · Las máscaras, con curva suave (smoothstep, 16 paradas). Una rampa lineal
   de opacidad se percibe con un codo; la curva se lee continua. */
{
  --rf-m-vert:linear-gradient(to bottom,rgba(0,0,0,0.000) 0px,rgba(0,0,0,0.011) 2.5px,rgba(0,0,0,0.043) 5px,rgba(0,0,0,0.092) 7.5px,rgba(0,0,0,0.156) 10px,rgba(0,0,0,0.232) 12.5px,rgba(0,0,0,0.316) 15px,rgba(0,0,0,0.407) 17.5px,rgba(0,0,0,0.500) 20px,rgba(0,0,0,0.593) 22.5px,rgba(0,0,0,0.684) 25px,rgba(0,0,0,0.768) 27.5px,rgba(0,0,0,0.844) 30px,rgba(0,0,0,0.908) 32.5px,rgba(0,0,0,0.957) 35px,rgba(0,0,0,0.989) 37.5px,rgba(0,0,0,1.000) 40px,rgba(0,0,0,1.000) 50%,rgba(0,0,0,1.000) calc(100% - 40px),rgba(0,0,0,0.989) calc(100% - 37.5px),rgba(0,0,0,0.957) calc(100% - 35px),rgba(0,0,0,0.908) calc(100% - 32.5px),rgba(0,0,0,0.844) calc(100% - 30px),rgba(0,0,0,0.768) calc(100% - 27.5px),rgba(0,0,0,0.684) calc(100% - 25px),rgba(0,0,0,0.593) calc(100% - 22.5px),rgba(0,0,0,0.500) calc(100% - 20px),rgba(0,0,0,0.407) calc(100% - 17.5px),rgba(0,0,0,0.316) calc(100% - 15px),rgba(0,0,0,0.232) calc(100% - 12.5px),rgba(0,0,0,0.156) calc(100% - 10px),rgba(0,0,0,0.092) calc(100% - 7.5px),rgba(0,0,0,0.043) calc(100% - 5px),rgba(0,0,0,0.011) calc(100% - 2.5px),rgba(0,0,0,0.000) calc(100% - 0px));
  --rf-m-full:linear-gradient(to bottom,rgba(0,0,0,0.000) 0px,rgba(0,0,0,0.011) 2.5px,rgba(0,0,0,0.043) 5px,rgba(0,0,0,0.092) 7.5px,rgba(0,0,0,0.156) 10px,rgba(0,0,0,0.232) 12.5px,rgba(0,0,0,0.316) 15px,rgba(0,0,0,0.407) 17.5px,rgba(0,0,0,0.500) 20px,rgba(0,0,0,0.593) 22.5px,rgba(0,0,0,0.684) 25px,rgba(0,0,0,0.768) 27.5px,rgba(0,0,0,0.844) 30px,rgba(0,0,0,0.908) 32.5px,rgba(0,0,0,0.957) 35px,rgba(0,0,0,0.989) 37.5px,rgba(0,0,0,1.000) 40px,rgba(0,0,0,1.000) 50%,rgba(0,0,0,1.000) calc(100% - 40px),rgba(0,0,0,0.989) calc(100% - 37.5px),rgba(0,0,0,0.957) calc(100% - 35px),rgba(0,0,0,0.908) calc(100% - 32.5px),rgba(0,0,0,0.844) calc(100% - 30px),rgba(0,0,0,0.768) calc(100% - 27.5px),rgba(0,0,0,0.684) calc(100% - 25px),rgba(0,0,0,0.593) calc(100% - 22.5px),rgba(0,0,0,0.500) calc(100% - 20px),rgba(0,0,0,0.407) calc(100% - 17.5px),rgba(0,0,0,0.316) calc(100% - 15px),rgba(0,0,0,0.232) calc(100% - 12.5px),rgba(0,0,0,0.156) calc(100% - 10px),rgba(0,0,0,0.092) calc(100% - 7.5px),rgba(0,0,0,0.043) calc(100% - 5px),rgba(0,0,0,0.011) calc(100% - 2.5px),rgba(0,0,0,0.000) calc(100% - 0px)),linear-gradient(to right,rgba(0,0,0,0.000) 0px,rgba(0,0,0,0.011) 2.5px,rgba(0,0,0,0.043) 5px,rgba(0,0,0,0.092) 7.5px,rgba(0,0,0,0.156) 10px,rgba(0,0,0,0.232) 12.5px,rgba(0,0,0,0.316) 15px,rgba(0,0,0,0.407) 17.5px,rgba(0,0,0,0.500) 20px,rgba(0,0,0,0.593) 22.5px,rgba(0,0,0,0.684) 25px,rgba(0,0,0,0.768) 27.5px,rgba(0,0,0,0.844) 30px,rgba(0,0,0,0.908) 32.5px,rgba(0,0,0,0.957) 35px,rgba(0,0,0,0.989) 37.5px,rgba(0,0,0,1.000) 40px,rgba(0,0,0,1.000) 50%,rgba(0,0,0,1.000) calc(100% - 40px),rgba(0,0,0,0.989) calc(100% - 37.5px),rgba(0,0,0,0.957) calc(100% - 35px),rgba(0,0,0,0.908) calc(100% - 32.5px),rgba(0,0,0,0.844) calc(100% - 30px),rgba(0,0,0,0.768) calc(100% - 27.5px),rgba(0,0,0,0.684) calc(100% - 25px),rgba(0,0,0,0.593) calc(100% - 22.5px),rgba(0,0,0,0.500) calc(100% - 20px),rgba(0,0,0,0.407) calc(100% - 17.5px),rgba(0,0,0,0.316) calc(100% - 15px),rgba(0,0,0,0.232) calc(100% - 12.5px),rgba(0,0,0,0.156) calc(100% - 10px),rgba(0,0,0,0.092) calc(100% - 7.5px),rgba(0,0,0,0.043) calc(100% - 5px),rgba(0,0,0,0.011) calc(100% - 2.5px),rgba(0,0,0,0.000) calc(100% - 0px));
}

html.rf-claro /* U.2 · Esquinas: sí en las fotos de contenido, NUNCA en los headers, que van a
   sangre y con radio se convertirían en tarjetas. */
body[class] :is(.rf-editorial__frame, .rf-split__media, .rf-xlink__media, .rf-ba, .rfp4-card__media, .rf-alb__img){ border-radius:26px; overflow:hidden; }
html.rf-claro body[class] :is(.rf-hero, .rf-cta, .rfh-hero, .rf-hero__photo, .rf-cta__photo){ border-radius:0 !important; }

html.rf-claro /* U.3 · Fundido de bordes.
   ⚠️ La máscara va en el CONTENEDOR, no en la imagen: la foto del hero lleva ken
   burns (`rfv6-kb`) y las de xlink un zoom de 0, 62s al pasar el ratón. Con la
   máscara sobre la imagen, el fundido escalaría con ella y «respiraría». Sobre el
   contenedor —que no se anima— el degradado se queda quieto y la foto se mueve
   debajo, que es lo que se busca. */
/* 🧯 `.rf-hero__photo` NO es un contenedor: ES la propia <img>, y lleva la
   animación de ken burns. Una máscara ahí escala con el transform y el fundido
   «respiraría» con la animación. Para los headers se cambia de técnica: el
   fundido se pinta en el velo —que no se anima— como un degradado AL COLOR DEL
   FONDO. Misma curva, mismo resultado, inmune al movimiento de la foto. */
body[class] .rf-hero__scrim{
  background:linear-gradient(to bottom,rgba(244,246,248,1.000) 0px,rgba(244,246,248,1.000) 140px,rgba(244,246,248,0.989) 142.5px,rgba(244,246,248,0.957) 145px,rgba(244,246,248,0.908) 147.5px,rgba(244,246,248,0.844) 150px,rgba(244,246,248,0.768) 152.5px,rgba(244,246,248,0.684) 155px,rgba(244,246,248,0.593) 157.5px,rgba(244,246,248,0.500) 160px,rgba(244,246,248,0.407) 162.5px,rgba(244,246,248,0.316) 165px,rgba(244,246,248,0.232) 167.5px,rgba(244,246,248,0.156) 170px,rgba(244,246,248,0.092) 172.5px,rgba(244,246,248,0.043) 175px,rgba(244,246,248,0.011) 177.5px,rgba(244,246,248,0.000) 180px,rgba(244,246,248,0.000) 50%,rgba(244,246,248,0.000) calc(100% - 40px),rgba(244,246,248,0.011) calc(100% - 37.5px),rgba(244,246,248,0.043) calc(100% - 35px),rgba(244,246,248,0.092) calc(100% - 32.5px),rgba(244,246,248,0.156) calc(100% - 30px),rgba(244,246,248,0.232) calc(100% - 27.5px),rgba(244,246,248,0.316) calc(100% - 25px),rgba(244,246,248,0.407) calc(100% - 22.5px),rgba(244,246,248,0.500) calc(100% - 20px),rgba(244,246,248,0.593) calc(100% - 17.5px),rgba(244,246,248,0.684) calc(100% - 15px),rgba(244,246,248,0.768) calc(100% - 12.5px),rgba(244,246,248,0.844) calc(100% - 10px),rgba(244,246,248,0.908) calc(100% - 7.5px),rgba(244,246,248,0.957) calc(100% - 5px),rgba(244,246,248,0.989) calc(100% - 2.5px),rgba(244,246,248,1.000) calc(100% - 0px)),linear-gradient(rgba(14,14,16,0.172) 0%, rgba(14,14,16,0.202) 26%, rgba(14,14,16,0.334) 46%, rgba(14,14,16,0.405) 72%, rgba(14,14,16,0.440) 100%) !important; }
/* El CTA de mitad de página NO está debajo de la barra: su fundido va simétrico,
   los mismos 40 px arriba y abajo. Si se le quita esta regla se cae al velo del
   bloque D, que es el del modo noche (.34→.88) y aquí sería un ladrillo negro. */
html.rf-claro body[class] .rf-cta__scrim{
  background:linear-gradient(to bottom,rgba(244,246,248,1.000) 0px,rgba(244,246,248,0.989) 2.5px,rgba(244,246,248,0.957) 5px,rgba(244,246,248,0.908) 7.5px,rgba(244,246,248,0.844) 10px,rgba(244,246,248,0.768) 12.5px,rgba(244,246,248,0.684) 15px,rgba(244,246,248,0.593) 17.5px,rgba(244,246,248,0.500) 20px,rgba(244,246,248,0.407) 22.5px,rgba(244,246,248,0.316) 25px,rgba(244,246,248,0.232) 27.5px,rgba(244,246,248,0.156) 30px,rgba(244,246,248,0.092) 32.5px,rgba(244,246,248,0.043) 35px,rgba(244,246,248,0.011) 37.5px,rgba(244,246,248,0.000) 40px,rgba(244,246,248,0.000) 50%,rgba(244,246,248,0.000) calc(100% - 40px),rgba(244,246,248,0.011) calc(100% - 37.5px),rgba(244,246,248,0.043) calc(100% - 35px),rgba(244,246,248,0.092) calc(100% - 32.5px),rgba(244,246,248,0.156) calc(100% - 30px),rgba(244,246,248,0.232) calc(100% - 27.5px),rgba(244,246,248,0.316) calc(100% - 25px),rgba(244,246,248,0.407) calc(100% - 22.5px),rgba(244,246,248,0.500) calc(100% - 20px),rgba(244,246,248,0.593) calc(100% - 17.5px),rgba(244,246,248,0.684) calc(100% - 15px),rgba(244,246,248,0.768) calc(100% - 12.5px),rgba(244,246,248,0.844) calc(100% - 10px),rgba(244,246,248,0.908) calc(100% - 7.5px),rgba(244,246,248,0.957) calc(100% - 5px),rgba(244,246,248,0.989) calc(100% - 2.5px),rgba(244,246,248,1.000) calc(100% - 0px)),linear-gradient(rgba(14,14,16,0.172) 0%, rgba(14,14,16,0.202) 26%, rgba(14,14,16,0.334) 46%, rgba(14,14,16,0.405) 72%, rgba(14,14,16,0.440) 100%) !important; }
/* ⚠️ EL FUNDIDO ES PARA LAS FOTOS QUE VAN SUELTAS SOBRE EL PAPEL, NO PARA LAS QUE
   VAN EN TARJETA (orden de Pablo, 25/08). Una foto suelta se funde con la página y
   por eso el degradado tiene sentido. Una foto dentro de una tarjeta ya tiene su
   propio marco —superficie blanca y filete— y ahí el fundido no la integra: la
   disuelve contra el blanco y deja un halo oscuro alrededor. Se ve sobre todo en
   las fotos de fondo oscuro (Professionnels, Lifestyle en /tarifs/), donde el
   degradado parece suciedad.
   · CON fundido (sueltas): `.rf-editorial__frame` · `.rf-split__media` · `.rf-ba`
   · SIN fundido (en tarjeta): `.rf-xlink__media` · `.rfp4-card__media`
   🔓 `.rf-alb__img` se queda con fundido: no he encontrado ninguna página donde se
      use, así que no lo cambio a ciegas. Pendiente de ver dónde sale. */
html.rf-claro body[class] :is(.rf-editorial__frame, .rf-split__media, .rf-ba, .rf-alb__img){
  -webkit-mask-image:var(--rf-m-full); mask-image:var(--rf-m-full);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
html.rf-claro body[class] :is(.rf-xlink__media, .rfp4-card__media){
  -webkit-mask-image:none !important; mask-image:none !important; }


html.rf-claro /* U.5 · Halo del texto. Va en ::before porque ::after lo ocupa el grano de
   película. Lleva la misma máscara que la foto para fundirse igual por arriba y
   por abajo, y se queda por debajo del texto (que va después en el DOM). */
body[class] :is(.rf-hero, .rf-cta)::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:var(--rf-m-vert); mask-image:var(--rf-m-vert);
  background:radial-gradient(ellipse 60% 122% at 24% 54%,rgba(14,14,16,0.660) 0%,rgba(14,14,16,0.637) 16%,rgba(14,14,16,0.594) 30%,rgba(14,14,16,0.528) 43%,rgba(14,14,16,0.442) 55%,rgba(14,14,16,0.343) 66%,rgba(14,14,16,0.244) 76%,rgba(14,14,16,0.135) 86%,rgba(14,14,16,0.046) 94%,transparent 100%); }
html.rf-claro body[class] :is(.rf-hero__inner, .rf-cta__inner){ position:relative; z-index:2; }

html.rf-claro /* U.6 · Revelado: sobre papel claro las fotos piden luz y color, no el apagado
   que pide el fondo negro. */
body[class] :is(.rf-hero__photo, .rf-cta__photo), html.rf-claro body[class] :is(.rf-editorial__frame, .rf-split__media, .rf-xlink__media, .rf-ba, .rfp4-card__media, .rf-alb__img) img{
  filter:saturate(104%) brightness(106%) contrast(96%); }

html.rf-claro /* U.7 · Grade frío al 8%, para que la foto converse con el gris azulado
   del fondo en vez de tirar a cálido como pide el modo oscuro. */
body[class] :is(.rf-hero__photo, .rf-cta__photo, .rf-editorial__frame, .rf-split__media, .rf-xlink__media, .rf-ba, .rfp4-card__media, .rf-alb__img)::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(rgba(26,44,62,0.080), rgba(19,49,87,0.048)); }
html.rf-claro body[class] :is(.rf-editorial__frame, .rf-split__media, .rf-xlink__media, .rf-ba, .rfp4-card__media, .rf-alb__img){ position:relative; }

html.rf-claro /* U.8 · Ninguna línea pegada a un header: el fundido se desvanece y chocaría
   contra ella, que es justo lo contrario del efecto. */
body[class] .rf-hero + *, html.rf-claro body[class] .rf-cta + *{ border-top:0 !important; }
html.rf-claro body[class] :is(.rfh-nav, .anita-header){ border-bottom:0 !important; }

html.rf-claro /* U.9 · El grano se retira en modo claro: multiply sobre papel claro ensucia. */
body[class] .rf-grain::after{ opacity:.14; }

/* ═══ L · GRANO ═══
   🧯 Aquí había una regla del grano al 35 % que, por ir la última, pisaba a la
   U.9 que lo baja al 14 %. El orden mandaba sobre la intención. */
/* ═══ V · ESPACIO CLIENTE ═══
   `section.rf-client` llevaba el negro #0E0E10 y sus textos el gris claro con más
   peso que la red. Salió al barrer el sitio entero: la plantilla del espacio
   cliente es propia y no la miraba nadie. */
/* ⚠️ El fondo lo ponía `.rfv6-page.page-id-2589 .rf-client` — una regla atada al
   ID de la página, (0,3,0) con !important. Hace falta `body[class]` en medio para
   pesar (0,3,2) y ganarle. Hay más reglas `page-id-…` por el sitio: cualquiera
   que pinte fondo necesitará el mismo tratamiento. */
html.rf-claro body[class] .rf-client, html.rf-claro body[class] .rf-client__wrap{
  background:var(--rf-canvas) !important; }
html.rf-claro body[class] .rf-ec-title, html.rf-claro body[class] .rf-client h1,
html.rf-claro body[class] .rf-client h2{ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-ec-desc, html.rf-claro body[class] .rf-client p,
html.rf-claro body[class] .rf-ec-wrap label{ color:var(--rf-ink-muted) !important; }
/* Los enlaces de esta plantilla iban en el oro de marca: 2,36 sobre el papel. */
html.rf-claro body[class] .rf-client a, html.rf-claro body[class] .rf-ec-wrap a{
  color:var(--rf-gold) !important; }
html.rf-claro .rf-ec-input, html.rf-claro .rf-ec-wrap input{
  background:var(--rf-elevated) !important; color:var(--rf-ink) !important;
  border-color:var(--rf-hairline-strong) !important; }

/* ═══ W · LOS DEFECTOS QUE PABLO CAZÓ MIRANDO (S374 → arreglados en S375) ═══
   Van al final a propósito: la red del bloque N lleva !important y le gana por
   ORDEN a todo lo que se declare antes que ella. */

/* W.1 · El overline del header salía BLANCO en claro (y oro en oscuro). Le toca
   el ámbar del logo, que es el acento de este registro. En los heros que van
   sobre papel —legal y blog, sin foto debajo— manda el oro profundo. */
html.rf-claro body[class] :is(.rf-hero,.rf-cta,.rfh-hero):not(.rf-hero--legal):not(.rf-hero--blog) .rf-overline,
html.rf-claro body[class] :is(.rf-hero,.rf-cta,.rfh-hero):not(.rf-hero--legal):not(.rf-hero--blog) .rf-overline *{
  color:#FCB51F !important; }
html.rf-claro body[class] :is(.rf-hero--legal,.rf-hero--blog) .rf-overline{ color:var(--rf-gold) !important; }

/* W.2 · La tabla de precios perdía el acento Y el marco. Su CSS no vive en ningún
   archivo del sitio —va dentro del contenido de /tarifs/— y pinta el fondo y las
   líneas con blancos al 2-8 % y la cabecera con el oro viejo rgba(201,154,72,.08):
   sobre papel claro, los tres son invisibles. */
html.rf-claro body[class] .rf-pricetable{ background:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-pricetable :is(th,td){ border-bottom-color:var(--rf-hairline-faint) !important; }
html.rf-claro body[class] .rf-pricetable thead th{ background:var(--rf-elevated) !important;
  color:var(--rf-gold) !important; border-block-end:1px solid var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-pricetable td.rf-pricetable__feat{ background:var(--rf-gold-08) !important; }
html.rf-claro body[class] .rf-pricetable td b{ color:var(--rf-gold) !important; }

/* W.3 · El bloque «Faire mon estimation» (rufino-estimation-xlink) lleva el oro
   viejo #C99A48 clavado en el botón, en el kicker y en el filete izquierdo. */
html.rf-claro body[class] .rfest-xl__inner{ background:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; border-left-color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rfest-xl__k{ color:var(--rf-gold) !important; }
html.rf-claro body[class] .rfest-xl__t{ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rfest-xl__btn, html.rf-claro body[class] .rfest-xl__btn *{
  background:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important; }

/* W.4 · El mismo oro viejo en los vecinos de esas páginas: el enlace «pour aller
   plus loin» (rufino-ccsp-xlink) y el icono de película de los álbumes. Sobre
   papel, #C99A48 da 2,36 — no se lee. */
html.rf-claro body[class] .rfccsp{ border-block-start-color:var(--rf-gold-25) !important; }
html.rf-claro body[class] .rfccsp__a{ color:var(--rf-gold) !important;
  border-block-end-color:var(--rf-gold-40) !important; }
html.rf-claro body[class] .rf-alb__film i{ background:var(--rf-gold-12) !important;
  border-color:var(--rf-gold-surface) !important; color:var(--rf-gold) !important; }

/* s385 · LA TARJETA «VOIR LE FILM», QUE ESTABA ARREGLADA A MEDIAS.
   El bloque J de arriba ya pasa su TEXTO a colores de papel (`.rf-alb__film b` a
   --rf-ink) y la W.4 de aquí arriba ya arregla su icono ▶. Pero la TARJETA sigue
   con el `background:#141416` literal que trae `rufino-album-narrativa.php`: texto
   de modo claro sobre una tarjeta que se quedó en modo oscuro.
   Medido el 27/08/2026 en /albums/mariage-cecile-federico-albi/: el titular a
   2,47 y el ▶ a 1,02 — ilegibles los dos. Se corrige la superficie, que es lo que
   faltaba; el texto ya estaba bien y no hay que tocarlo.
   ⚠️ La lección: arreglar el texto de un bloque y no su fondo deja el bloque PEOR
      que si no se hubiera tocado — en oscuro al menos se leía. */
html.rf-claro body[class] .rf-alb__film{ background:var(--rf-sunken) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-alb__film>span>span{ color:var(--rf-ink-muted) !important; }

html.rf-claro body[class] .rf-blogpil{ border-top-color:var(--rf-hairline) !important; }

/* W.5 · Dos que el barrido de S374 no vio, y que salieron al volver a barrer:
   · La ✕ que cierra el menú lateral es un BUTTON, y la red del bloque N no cubre
     los botones a propósito (los de oro llevan su propio color). Se quedó con el
     gris del modo oscuro #E6E6E6 sobre el cajón claro: 1,15. Invisible.
   · Las etiquetas «avant / après» del before-after tienen su PROPIA pastilla
     oscura sobre la foto; con la tinta del día encima daban 1,23. Ahí manda la
     pastilla, no la página: el texto va claro. */
html.rf-claro body[class] :is(#rfhDrawer,.rfh-drawer) button,
html.rf-claro body[class] :is(#rfhDrawer,.rfh-drawer) button *{ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-ba__tag,
html.rf-claro body[class] .rf-ba__tag *{ color:#F5F2EC !important; }

/* W.6 · LA HOME TIENE OTRO JUEGO DE CLASES, y sus acentos de oro se aplanaban a
   blanco. Medido cargando la misma página en los dos modos: en oscuro van en
   #C99A48 y en claro salían #F5F2EC, o sea el mismo color que el texto que los
   rodea — el destacado desaparecía.
   · `.rfh-k`      el kicker del hero (el «overline» de la home)
   · `.rfh-w.rfh-g` las palabras destacadas del H1
   · todas las negritas del hero: comprobado en oscuro, las 10 van en oro y ninguna
     vive dentro de un botón, así que la regla puede ser `b` a secas y no una lista
     de clases que se quedaría corta a la primera negrita nueva.
   · `.rfh-uni .on` el chip de universo activo. ⚠️ NO es `.rfh-filters .on`, por eso
     se escapaba de la regla del bloque P: dos filtros distintos, dos clases. */
html.rf-claro body[class] .rfh-hero :is(.rfh-k, .rfh-w.rfh-g, .rfh-uni .on),
/* ⚠️ `:is(b,strong):not(.rfh-btn)` y no `b` a secas: la red del bloque Ñ es
   `html.rf-claro .rfh-hero :is(…):not(.rfh-sc):not(.rfh-btn)` y **cada `:not()` suma
   una clase de especificidad** — pesa (0,4,2). Un `… .rfh-hero b` pesa (0,3,3) y
   PIERDE por mucho que vaya después: con especificidades distintas el orden no
   decide. Medido: las 10 negritas seguían blancas. Con el `:not()` pesa (0,4,3). */
html.rf-claro body[class] .rfh-hero :is(b,strong):not(.rfh-btn){ color:#FCB51F !important; }
html.rf-claro body[class] .rfh-hero .rfh-uni .on{ background:var(--rf-gold-12) !important; }

/* W.7 · LA CÁPSULA DEL NAV AL SCROLLEAR — el defecto 6, que Pablo veía y yo no
   reproducía porque NO EXISTE con la página parada: nace al pasar de 75 px, cuando
   `rufino-nav-scroll` le pone la clase `scrolled` a la barra. Tres fallos apilados
   en la misma zona, los tres invisibles en una captura del principio de la página:

   1 · La cápsula NO es `.rfh-nav__pill`: es `.rfh-nav::before`, un pseudo-elemento
       con rgba(20,20,22,.72) clavado. Nunca lo tocó ninguna regla del modo claro,
       así que se quedaba casi negra con la tinta del día encima: contraste 1,71.
   2 · Mi propia regla de la barra lleva !important y le ganaba a
       `nav.rfh-nav.scrolled{background-color:transparent}`, que no lo lleva. Al
       scrollear quedaban las DOS: la banda de lado a lado Y la cápsula flotando.
   3 · Lo mismo con la píldora del menú, que su CSS apaga al scrollear a propósito
       («dentro de la cápsula sería un segundo cristal sobre el primero») y mi
       !important volvía a encender.

   🧯 La lección: al pintar un componente en otro modo hay que mirar TODOS SUS
   ESTADOS, no solo el de reposo — y un `!important` puesto para ganar una batalla
   gana también las que no querías, incluidas las que apagan cosas. */
html.rf-claro body[class] .rfh-nav::before{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(19,49,87,.14) !important;
  box-shadow:0 6px 24px rgba(19,49,87,.10) !important; }
html.rf-claro body[class] nav.rfh-nav.scrolled{
  background-color:transparent !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important; border-block-end-color:transparent !important; }
html.rf-claro body[class] nav.rfh-nav.scrolled .rfh-nav__pill{
  background-color:transparent !important; border-color:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   W.8 · REGISTRO B — «ÁMBAR GRÁFICO»  (elegido por Pablo el 25/08 en la maqueta)
   ═══════════════════════════════════════════════════════════════════════════
   EL DIAGNÓSTICO, medido en /tarifs/: en modo oscuro 124 textos van en oro
   #C99A48 — uno de cada cinco. En claro quedaban 44, y en un marrón que al lado
   del azul marino no se lee como acento. De ahí que la página saliera «muy
   lineal con el azul y el blanco».
   LA RESTRICCIÓN, medida: el ámbar #FCB51F sobre papel da 1,65 y NO puede ser
   letra. Y el oro #8A6420 ya está en el techo — #A2721A, más cálido y más
   parecido al del modo oscuro, cae a 3,91 y tampoco vale.
   LA SALIDA: el ámbar entra por lo GRÁFICO (filetes, reglas, subrayados, bordes
   de foto) y el oro se limita a la letra, pero se aplica de verdad.
   ⚠️ Todo esto se apoya en piezas que el sitio YA TIENE —la barra de acento de
   las tarjetas, el guion de los overlines— en vez de añadir adornos nuevos. */

/* ── B.1 · LOS ACENTOS QUE SE COMÍA LA RED ────────────────────────────────────
   La red del bloque N pesa (0,2,3) y se llevaba por delante el oro de las tres
   piezas que en modo oscuro SON el acento. Medido en LIVE: el número de sección,
   el overline, el precio y hasta el nombre del univers salían todos en #48566B,
   el mismo gris azulado del texto corriente. Estas reglas pesan (0,3,2). */
html.rf-claro body[class] .rf-numhead__num{ color:var(--rf-gold) !important; }
html.rf-claro body[class] .rf-overline{ color:var(--rf-gold) !important; }
html.rf-claro body[class] .rf-apercu__price{ color:var(--rf-gold) !important; }
html.rf-claro body[class] .rf-apercu__name{ color:var(--rf-ink) !important; }

/* ── B.2 · LOS FILETES QUE NO SE VEÍAN ────────────────────────────────────────
   Cuatro clases se reparten 92 bordes y 24 fondos en blanco al 2-8 %: en negro
   dibujan la retícula, sobre papel blanco no existen. Es media estructura de la
   página evaporada, y es la mitad de la sensación de «le falta detalle». */
html.rf-claro body[class] :is(.rf-apercu__card, .rf-options__item, .rf-cadeaux__item, .rf-zones__item){
  background:var(--rf-elevated) !important; border-color:var(--rf-hairline) !important; }

/* ── B.3 · RELIEVE ────────────────────────────────────────────────────────────
   El modo oscuro separa superficies con saltos de luminosidad grandes
   (#0E0E10 / #141416 / #212224). En claro son #F4F6F8 / #FFFFFF / #EEF1F5: un
   3 % de distancia. Sin sombra, una tarjeta no se lee como tarjeta. */
html.rf-claro body[class] :is(.rf-apercu__card, .rf-options__item, .rf-cadeaux__item,
  .rf-zones__item, .rf-xlink, .rf-pricetable, .rf-related-item){
  box-shadow:0 1px 2px rgba(19,49,87,.05), 0 10px 26px rgba(19,49,87,.09) !important; }

/* ── B.4 · EL ÁMBAR, EN LO GRÁFICO ────────────────────────────────────────────
   La regla bajo el número de sección: el gesto más visible de todos, y no toca
   una sola letra. Solo en los numhead centrados, que son los que llevan el
   número encima del título; en los alineados a la izquierda el número es un
   elemento de la fila y cambiarle el display movería la maqueta. */
html.rf-claro body[class] .rf-numhead--center .rf-numhead__num{
  position:relative; display:inline-block; padding-block-end:12px; }
html.rf-claro body[class] .rf-numhead--center .rf-numhead__num::after{
  content:""; position:absolute; inset-inline:16%; inset-block-end:0;
  block-size:3px; background:var(--rf-gold-surface); }

/* El subrayado del precio va como IMAGEN DE FONDO y no como pseudo-elemento con
   z-index:-1: dentro de una tarjeta con fondo propio, el -1 lo mandaría detrás
   del fondo de la tarjeta y no se vería. */
html.rf-claro body[class] .rf-apercu__price{
  background:linear-gradient(rgba(252,181,31,.36),rgba(252,181,31,.36)) 0 86%/100% 6px no-repeat !important; }

/* La barra de acento de las tarjetas ya EXISTE (::before, 3 px, en oro, crece al
   pasar el ratón). Solo se recolorea — no se le toca la geometría, que es la
   animación del sitio. El segmento fijo va en ::after, que estaba libre. */
html.rf-claro body[class] .rf-apercu__card::before{ background:var(--rf-gold-surface) !important; }
html.rf-claro body[class] :is(.rf-apercu__card, .rf-options__item, .rf-cadeaux__item, .rf-zones__item){
  position:relative; }
html.rf-claro body[class] :is(.rf-apercu__card, .rf-options__item, .rf-cadeaux__item, .rf-zones__item)::after{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:-1px;
  inline-size:44px; block-size:2px; background:var(--rf-gold-surface); }

/* El guion del overline: existe en el marcado y aquí salía en gris azulado. En la
   variante `--bare` está oculto a propósito, así que no se fuerza. */
html.rf-claro body[class] .rf-overline::before{ background:var(--rf-gold-surface) !important; }

/* La tabla: filete ámbar arriba, cabecera limpia y la fila que se recorre. */
html.rf-claro body[class] .rf-pricetable{ border-block-start:2px solid var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rf-pricetable tbody tr:hover :is(th,td){ background:rgba(252,181,31,.07) !important; }

/* Las tarjetas con foto: el filete ámbar hace de junta entre la foto y la ficha
   —que es justo lo que el fundido ya no hace, porque en tarjeta lo quitamos. */
html.rf-claro body[class] .rf-xlink__media{ border-block-end:3px solid var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rf-xlink:hover{ border-color:rgba(252,181,31,.55) !important; }
html.rf-claro body[class] :is(.rf-xlink, .rf-apercu__card) svg{ color:var(--rf-gold) !important; }

/* El botón fantasma sobre papel. En hero y CTA va sobre foto y se queda claro:
   por eso se ancla a `.rf-tile`, que son las secciones de papel. */
html.rf-claro body[class] .rf-tile .rf-btn--ghost{ border-color:rgba(252,181,31,.75) !important; }
html.rf-claro body[class] .rf-tile .rf-btn--ghost:hover{
  background:rgba(252,181,31,.12) !important; border-color:var(--rf-gold-surface) !important; }

/* ═══ W.9 · SIN ORO: LA TINTA LEE, EL ÁMBAR ACENTÚA ════════════════════════════
   Con el token ya apagado, quedan cuatro piezas que necesitan decir algo distinto
   de «soy texto corriente», y ninguna puede hacerlo con el ámbar. */

/* El número de sección SÍ va en ámbar: lleva `aria-hidden="true"` en el marcado y
   mide 86 px — es un dibujo, no contenido, y las reglas de contraste de texto no
   le aplican. Es además la pieza que hacía toda la mancha marrón de la página. */
html.rf-claro body[class] .rf-numhead__num{ color:var(--rf-gold-surface) !important; }

/* Overline y cabecera de tabla: LA REGLA DE PABLO — donde no cabe el ámbar, va el
   AZUL MARINO, no el azul apagado. Yo las había dejado en #48566B para no tener
   tres voces fuertes seguidas (número ámbar, overline, título); él prefiere el
   marino y manda él. Su guion sí es ámbar (W.8), que es lo que las separa del
   texto corriente. */
html.rf-claro body[class] .rf-overline{ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-pricetable thead th{ color:var(--rf-ink) !important; }

/* Las flechas de las tarjetas van en tinta, no en ámbar: un icono funcional pide
   3:1 y el ámbar sobre papel da 1,78. El ámbar de esas tarjetas ya está en su
   barra de acento y en el filete de la foto. */
html.rf-claro body[class] :is(.rf-xlink, .rf-apercu__card) svg{ color:var(--rf-ink) !important; }

/* Los enlaces dentro de texto corrido perdían su color y hay que devolverles el
   aviso de que son enlaces: tinta llena sobre el gris del párrafo, y el subrayado
   en ámbar. */
html.rf-claro body[class] :is(.rf-legal a, .rfccsp__a, .rfp4-recaptcha-note a, .rf-client a){
  color:var(--rf-ink) !important; border-block-end-color:var(--rf-gold-surface) !important; }

/* La página en la que estás, dentro del menú lateral. Era el ÚNICO sitio que
   seguía en el oro viejo #C99A48 —los otros ocho ítems ya iban en marino— y no
   lo tocaba ninguna regla del modo claro. No puede irse a marino a secas: se
   quedaría igual que los demás y se pierde el «estás aquí». Marino + barra
   ámbar debajo: el aviso lo da el ámbar, la letra la lee la tinta. */
html.rf-claro body[class] :is(.current-menu-item, .current_page_item, .current-menu-ancestor) .rf-magnetic{
  color:var(--rf-ink) !important;
  background:linear-gradient(var(--rf-gold-surface),var(--rf-gold-surface)) 0 100%/2.2em 3px no-repeat !important;
  padding-block-end:6px !important; }

/* Los dos últimos restos del oro viejo, y los dos son FONDO — ahí el ámbar sí va,
   con la tinta encima (7,33). Uno es el «Réserver» de una cabecera y el otro el
   enlace de salto al contenido, que solo aparece al tabular: invisible con el
   ratón, pero es lo primero que ve quien navega con teclado. */
html.rf-claro body[class] :is(.rf-skip-link, .rf-he-reserver),
html.rf-claro body[class] :is(.rf-skip-link, .rf-he-reserver) *{
  background-color:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important; }

/* ═══ W.10 · LO QUE APARECIÓ AL REVISAR ANTES DE PUBLICAR ══════════════════════
   Encontrado en /reserver/, que es la página donde se cobra. Todo del mismo
   origen: la red del bloque N no cubre los BOTONES a propósito —los de ámbar
   llevan su propio color— así que los botones SIN fondo propio se quedaron con
   el gris del modo oscuro. Sobre papel blanco eso es invisible. */

/* 🔴 Las flechas ← → para cambiar de mes en el calendario de reservas estaban a
   1,25: no se veían. Nadie puede reservar un mes que no sabe que existe.
   Se cubre por CONTENEDOR y no por nombre de botón: el asistente de reserva
   tiene varios pasos que aparecen según avanzas, y nombrarlos uno a uno deja
   fuera los que no se ven en la primera pantalla. */
html.rf-claro body[class] :is(.rufino-booking, .rfv2-panel, .rufino-calendar,
  .rufino-categories, .rufino-cat-extra, .rufino-wizard-nav) button:not(.rufino-btn):not([class*="gold"]){
  color:var(--rf-ink) !important; }

/* La barra de progreso del asistente llevaba el oro viejo de FONDO. */
html.rf-claro body[class] .rufino-progress-fill{ background:var(--rf-gold-surface) !important; }

/* 🔴 EL BANNER DE COOKIES. Conserva su superficie oscura a propósito
   —rgba(20,20,22,.97)— y sus botones están bien (14,7 y 15,4), pero la red le
   pintó el TEXTO con la tinta del día: #48566B sobre casi negro = 2,0. Es lo
   primero que ve cada visitante nuevo y de ahí sale el consentimiento RGPD.
   Sobre superficie oscura manda la superficie, no la página. */
html.rf-claro body[class] :is(.rf-cookie, .rf-cookie-settings) :is(p,span,li,label,small,div,h2,h3,strong){
  color:#E6E6E6 !important; }
html.rf-claro body[class] :is(.rf-cookie, .rf-cookie-settings) a{ color:var(--rf-gold-surface) !important; }

/* El configurador de /estimation/: el botón de enviar —que es la conversión de
   esa página— llevaba el oro viejo de FONDO, y el texto de la promo en oro. */
html.rf-claro body[class] .rf-cfg-submit,
html.rf-claro body[class] .rf-cfg-submit *{
  background-color:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rf-cfg-promo-b{ color:var(--rf-ink) !important; }

/* Cuatro fondos en oro viejo que solo se vieron barriendo la home A 375 px.
   El más importante es `.rf-mcta__btn`: la barra de llamada a la acción fija de
   móvil, o sea el botón que más se pulsa en el sitio. Los otros tres son el
   indicador de escena del hero, su filete y un botón de los bloques de la home. */
html.rf-claro body[class] :is(.rf-mcta__btn, .rf-d-btn),
html.rf-claro body[class] :is(.rf-mcta__btn, .rf-d-btn) *{
  background-color:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] :is(.rfh-hero__progress, .rfh-crule){
  background-color:var(--rf-gold-surface) !important; }

/* ═══ W.11 · EL HEADER DE LA HOME ══════════════════════════════════════════════
   🔴 No estaba adaptado, y es lo PRIMERO que ve un visitante. Medido: su velo
   `.rfh-hero__scrim` solo llevaba el degradado oscuro; el fundido a papel se lo
   di en U.3 a `.rf-hero__scrim` y a `.rf-cta__scrim`, y la home usa OTRA clase.
   Resultado: la barra clara caía a plomo sobre el negro, con una línea dura.
   Y no es un vídeo: es una composición de cine por capas —fondo negro, barras
   de letterbox, grano al 9 %, viñeta, fuga de luz y un grade de color—, dos de
   las cuales seguían pintando con el oro viejo #C99A48. */

/* ⚠️ LA HOME NO LLEVA FUNDIDO ARRIBA (decisión de Pablo, 25/08). Aquí la foto
   arranca limpia justo debajo de la barra; el degradado superior se la comía. Sí
   conserva el de abajo, que es el que entrega el header a la página.
   Los demás headers (`.rf-hero__scrim`, U.3) SÍ funden arriba: son otra pieza y
   otra decisión — no unificar sin preguntar.
   El velo de la home es MÁS DENSO que el del v6 (.34→.88 frente a .172→.44) y se
   conserva: aquí va el H1 grande en blanco. */
html.rf-claro body[class] .rfh-hero__scrim{
  background:linear-gradient(to bottom,rgba(244,246,248,0.000) 0px,rgba(244,246,248,0.000) calc(100% - 40px),rgba(244,246,248,0.011) calc(100% - 37.5px),rgba(244,246,248,0.043) calc(100% - 35px),rgba(244,246,248,0.092) calc(100% - 32.5px),rgba(244,246,248,0.156) calc(100% - 30px),rgba(244,246,248,0.232) calc(100% - 27.5px),rgba(244,246,248,0.316) calc(100% - 25px),rgba(244,246,248,0.407) calc(100% - 22.5px),rgba(244,246,248,0.500) calc(100% - 20px),rgba(244,246,248,0.593) calc(100% - 17.5px),rgba(244,246,248,0.684) calc(100% - 15px),rgba(244,246,248,0.768) calc(100% - 12.5px),rgba(244,246,248,0.844) calc(100% - 10px),rgba(244,246,248,0.908) calc(100% - 7.5px),rgba(244,246,248,0.957) calc(100% - 5px),rgba(244,246,248,0.989) calc(100% - 2.5px),rgba(244,246,248,1.000) calc(100% - 0px)),linear-gradient(rgba(14,14,16,.34) 0%, rgba(14,14,16,.40) 26%,
    rgba(14,14,16,.66) 46%, rgba(14,14,16,.80) 72%, rgba(14,14,16,.88) 100%) !important; }

/* La base del hero era NEGRO PURO. Cualquier hueco entre foto y foto —o mientras
   carga— era un agujero negro en una web clara. Va al papel. */
/* LA BASE DE LOS HEADERS. Estaba en NEGRO PURO en los tres —home, v6 y CTA—.
   Con la foto cargada no se nota, pero mientras carga (o si falla) el visitante ve
   un rectángulo negro en una web clara: un parpadeo que sufre TODO el que entra.
   ⚠️ Probé papel y tampoco vale: el texto del header es BLANCO —va sobre foto— y
   sobre papel se queda en 2,5 mientras carga. La base correcta no es ni negro ni
   papel, es el AZUL MARINO de la marca: pertenece a la paleta, no abre un agujero
   negro, y el texto blanco encima se lee a 12,1. */
html.rf-claro body[class] :is(.rfh-hero, .rf-hero, .rf-cta){
  background-color:var(--rf-ink) !important; }

/* El grade y la fuga de luz llevaban el oro viejo. Mismos valores, mismo efecto,
   ámbar en vez de #C99A48 — es color de imagen, no de letra, así que aquí el
   ámbar entra sin problema. */
html.rf-claro body[class] .rfh-hero__grade{
  background:linear-gradient(rgba(26,44,62,.16), rgba(252,181,31,.07)) !important; }
html.rf-claro body[class] .rfh-hero__leak{
  background:linear-gradient(115deg, rgba(0,0,0,0) 38%, rgba(255,238,196,.32) 50%,
    rgba(252,181,31,.14) 56%, rgba(0,0,0,0) 66%) !important; }

/* ═══ W.12 · LO QUE FALTABA EN LA HOME ═════════════════════════════════════════
   La home NO usa las clases del v6: tiene su propia familia `rfh-*`, y por eso se
   le escapó entera. La barrí buscando TEXTO OSCURO CONTENIDO DENTRO DE UNA FOTO
   —no «que solape con una foto», que da falsos positivos con los títulos que van
   AL LADO— y salieron cuatro familias, más un bloque con superficie oscura que no
   había tocado nadie. Los colores no son inventados: son los que usa el modo
   oscuro en esas mismas piezas, con el oro pasado a ámbar. */

/* 1 · Las tarjetas de universo (`.rfh-monde`), que son la entrada a los servicios.
   Contraste medido del título: 1,9 — ilegible. Su velo ya oscurece abajo (.05
   arriba, .88 abajo), que es justo donde va el texto: lo que fallaba es que el
   texto se había ido a la tinta del día. */
html.rf-claro body[class] .rfh-monde__txt,
html.rf-claro body[class] .rfh-monde__txt :is(h3,span,div,b,strong){ color:#F5F2EC !important; }
html.rf-claro body[class] .rfh-monde__txt p{ color:rgba(245,242,236,.78) !important; }
html.rf-claro body[class] .rfh-monde :is(.rfh-ol, .rfh-lnk){ color:#FCB51F !important; }
/* ⚠️ Y el velo de esas tarjetas era DEMASIADO FLOJO donde va el texto. Medido
   evaluando el degradado a la altura exacta de cada pieza, con el peor caso (una
   zona blanca de la foto): el overline caía a 1,09 y el título a 2,18 — el velo
   ahí solo daba el 29 % y el 37 %. Por eso la tarjeta cuya foto es clara se leía
   peor que las otras dos. Esto NO lo ve el barrido de contraste: la foto y el
   velo son capas absolutas, no un fondo de ancestro, así que el medidor cree que
   el texto está sobre papel. Se calcula, o no se ve.
   El velo pasa a llevar el 58 % a media altura, que es donde empieza el texto. */
html.rf-claro body[class] .rfh-monde__scrim{
  background:linear-gradient(rgba(14,14,16,.06) 16%, rgba(14,14,16,.58) 48%,
    rgba(14,14,16,.78) 70%, rgba(14,14,16,.92) 100%) !important; }
/* El overline se queda en 2,81 en el peor caso absoluto —una zona blanca de la
   foto justo detrás de esa línea— y subir más el velo taparía la foto, que es lo
   que la tarjeta vende. Se le da la sombra que pide cualquier texto sobre imagen:
   no cuenta para el cálculo AA, pero es lo que lo hace legible de verdad.
   Referencia: en modo oscuro esa misma línea da 1,35 en ese mismo peor caso. */
html.rf-claro body[class] .rfh-monde__txt :is(.rfh-ol, h3, p, .rfh-lnk){
  text-shadow:0 1px 3px rgba(14,14,16,.55) !important; }
html.rf-claro body[class] .rfh-folio__card :is(.rfh-t, .rfh-s){
  text-shadow:0 1px 3px rgba(14,14,16,.55) !important; }

/* 2 · Los pies de las fotos del dúo, que van DENTRO de la foto. En oscuro son oro. */
html.rf-claro body[class] .rfh-duo__photos figcaption{ color:#FCB51F !important; }

/* 3 · Los rótulos del portfolio, también dentro de la foto. */
html.rf-claro body[class] .rfh-folio__card .rfh-t,
html.rf-claro body[class] .rfh-folio__card .rfh-t *{ color:#F5F2EC !important; }
html.rf-claro body[class] .rfh-folio__card .rfh-s{ color:#FCB51F !important; }

/* 4 · El destacado del párrafo (`.rfh-mark`) va sobre PAPEL, no sobre foto, así que
   ahí el ámbar no puede ser la letra: tinta con el subrayado en ámbar, igual que
   los enlaces. En oscuro es oro con un subrayado de oro. */
html.rf-claro body[class] .rfh-mark{ color:var(--rf-ink) !important;
  background:linear-gradient(rgba(252,181,31,.36),rgba(252,181,31,.36)) 0 88%/100% 6px no-repeat !important; }

/* 5 · Los números de sección de la home. ⚠️ Estos NO van en ámbar y los del v6 SÍ,
   y no es un descuido: el del v6 lleva `aria-hidden="true"` —es un dibujo y las
   reglas de contraste de texto no le aplican— y este NO lo lleva, así que es
   contenido. A 64 px cuenta como texto grande y pide 3,0; el ámbar da 1,65 y
   tampoco llega. Marino, y que el acento lo ponga lo gráfico. */
html.rf-claro body[class] .rfh-numhead .rfh-n{ color:var(--rf-ink) !important; }

/* 6 · `.rf-d-engage__item` no es una foto: es una tarjeta con DEGRADADO OSCURO de
   fondo (#141416 → #0E0E10) que el modo claro nunca sobrescribió. Eran cajas
   negras con texto oscuro encima. */
html.rf-claro body[class] .rf-d-engage__item{
  background:var(--rf-elevated) !important; border-color:var(--rf-hairline) !important;
  box-shadow:0 1px 2px rgba(19,49,87,.05), 0 10px 26px rgba(19,49,87,.09) !important; }
html.rf-claro body[class] :is(.rf-d-engage__num, .rf-d-engage__label){ color:var(--rf-ink) !important; }
html.rf-claro body[class] .rf-d-engage__desc{ color:var(--rf-ink-muted) !important; }

/* ═══ W.13 · UNIFICACIÓN (orden de Pablo: «todo tiene que estar unificado») ═════
   Al mirar los PSEUDO-ELEMENTOS —que mi detector no escaneaba— apareció el oro
   viejo en doce sitios más. La regla queda una sola para todo el sitio:
     · ÁMBAR   lo puramente decorativo: guiones, filetes, comillas, barras de
               acento, degradados. No es letra y no le aplica el contraste.
     · MARINO  todo lo que es letra, y también las FLECHAS que acompañan a un
               enlace: se leen como parte del enlace y un icono funcional pide 3:1,
               que el ámbar (1,78) no da.
   Y los números de sección pasan a ser ÁMBAR EN TODAS LAS PÁGINAS, ahora que el
   de la home está marcado como decorativo igual que el del v6. */

/* Los guiones de los overlines de la home y sus variantes. */
html.rf-claro body[class] :is(.rfh-ol, .rfh-sol)::before{
  background-color:var(--rf-gold-surface) !important; color:var(--rf-gold-surface) !important;
  border-color:var(--rf-gold-surface) !important; }

/* Las comillas de las citas: son un dibujo tipográfico, no texto. */
html.rf-claro body[class] .rf-d-case__quote::before,
html.rf-claro body[class] .rf-d-case__quote::after{
  color:var(--rf-gold-surface) !important; border-color:var(--rf-gold-surface) !important; }

/* El acento de las tarjetas de compromiso y el del cajón del menú. */
html.rf-claro body[class] .rf-d-engage__item::after{
  background-image:linear-gradient(var(--rf-gold-surface) 0%, rgba(0,0,0,0) 100%) !important; }
html.rf-claro body[class] :is(.rf-drawer, .rf-drawer__overline)::before{
  background-color:var(--rf-gold-surface) !important; }

/* Las flechas que siguen a un enlace van con la letra, en marino. */
html.rf-claro body[class] a::after{
  color:var(--rf-ink) !important; border-color:var(--rf-ink) !important; }

/* EL NÚMERO DE SECCIÓN DE LA HOME, ya en ámbar como el de todas las demás. */
html.rf-claro body[class] .rfh-numhead .rfh-n{ color:var(--rf-gold-surface) !important; }

/* ═══ W.14 · LOS ACENTOS QUE QUEDABAN EN LA HOME ═══════════════════════════════
   Método: fotografiar la home ENTERA en oscuro (941 elementos), fotografiarla en
   claro y comparar pieza por pieza. Salieron 16 familias cuyo acento de oro se
   había caído al gris genérico. Tres de ellas NO eran fallo y se dejan como están:
     · `.rf-overline` y `.rf-d-engage__num` → marino a propósito (W.9).
     · `.rfh-num`, los números del menú lateral, miden 12 px: el ámbar ahí da 1,65
       y no hay excepción decorativa que valga — son parte del enlace. Marino.
   Y una aclaración que vale para todo el sitio: los ICONOS y las FLECHAS van con
   la letra, en marino, porque un icono funcional pide 3:1 y el ámbar da 1,78. El
   ámbar es solo para lo que no significa nada por sí solo. */

/* Las estrellas de las reseñas SÍ son ámbar: son `<svg aria-hidden="true">`, o sea
   decoración declarada, y una valoración en oro es el gesto de siempre. */
html.rf-claro body[class] .rf-d-case__rating,
html.rf-claro body[class] .rf-d-case__rating svg,
html.rf-claro body[class] .rf-d-case__rating path{
  color:var(--rf-gold-surface) !important; fill:var(--rf-gold-surface) !important; }

/* Rótulos que en oscuro iban en oro y se habían quedado en el gris del cuerpo:
   la firma del logo, los capítulos del reportaje, el rótulo de redes del pie, el
   overline del cajón y los nombres de quien firma cada testimonio. */
html.rf-claro body[class] :is(.rf-brand-tagline, .rfh-cn, .rf-footer__social-label,
  .rf-drawer__overline){ color:var(--rf-ink) !important; }
html.rf-claro body[class] :is(.rf-d-case__quote, .rf-d-case__id, blockquote) :is(b,em){
  color:var(--rf-ink) !important; }

/* 🔴 Los enlaces dentro de texto corrido se habían quedado SIN NINGUNA SEÑAL: en
   oscuro eran oro y aquí salían del mismo marino que el párrafo. Un enlace que no
   se distingue del texto no es un enlace. Se marcan con el subrayado ámbar, igual
   que los de las páginas legales. Acotado a `a:not([class])` para no tocar
   botones ni navegación, que llevan su propia forma. */
html.rf-claro body[class] :is(.rf-tile, .rf-legal, .rfh-wrap, .rf-wrap) :is(p,li) a:not([class]){
  color:var(--rf-ink) !important;
  background:linear-gradient(var(--rf-gold-surface),var(--rf-gold-surface)) 0 100%/100% 2px no-repeat !important;
  padding-block-end:2px !important; text-decoration:none !important; }

/* ═══ W.15 · LA SECCIÓN FINAL DE LA HOME (`.rfh-final`) ════════════════════════
   🔴 El título iba en AZUL MARINO A 46 px sobre una foto nocturna, y el párrafo y
   la letra pequeña en el gris del cuerpo. Es el último bloque antes del pie: el
   sitio donde se pide el devis.
   Se me escapó por el mismo motivo que la home entera: su foto NO es un `<img>`,
   es un `background-image` de `.rfh-final__bg`, y mi detector de «texto oscuro
   sobre foto» solo miraba etiquetas `<img>`. Punto ciego corregido: ahora también
   cuenta como foto cualquier elemento con `url()` de fondo. */
html.rf-claro body[class] .rfh-final__inner,
html.rf-claro body[class] .rfh-final__inner :is(h1,h2,h3,p,span,div,li,small){
  color:#F5F2EC !important; text-shadow:0 1px 3px rgba(14,14,16,.55) !important; }
/* ⚠️ El velo de esta sección daba 0,45 en el centro, que es donde va TODO el
   texto: el título se quedaba en 2,75 (pide 3,0) y la línea pequeña en 2,75
   (pide 4,5). Sube a 0,62 y con eso el texto claro llega a 4,89 contra el peor
   caso imaginable —una zona blanca de la foto—. El borde exterior no se toca. */
html.rf-claro body[class] .rfh-final__scrim{
  background:radial-gradient(rgba(14,14,16,.62) 0%, rgba(14,14,16,.92) 100%) !important; }

/* ⚠️ Y la negrita de la línea pequeña NO va en ámbar: 12 px de ámbar sobre una
   foto es la peor colocación posible (1,72) y subir el velo hasta que pasara
   taparía la foto, que es lo que la sección vende. Va clara y en negrita. El
   ámbar de este bloque ya lo pone el botón, que es una pastilla entera. Misma
   regla de siempre: el ámbar no carga con la letra donde no se puede leer. */
html.rf-claro body[class] .rfh-final__inner :is(b,strong){ color:#F5F2EC !important; }
/* El botón tiene fondo propio: su texto no sigue al del bloque. */
html.rf-claro body[class] .rfh-final__inner :is(.rfh-btn, .rf-btn),
html.rf-claro body[class] .rfh-final__inner :is(.rfh-btn, .rf-btn) *{
  color:var(--rf-on-gold) !important; text-shadow:none !important; }

/* ═══ W.16 · BARRIDO COMPLETO DEL SITIO EN MODO CLARO (26/08) ══════════════════
   Ocho páginas pasadas por los tres detectores ya afinados: restos de oro viejo
   incluyendo PSEUDO-ELEMENTOS, texto oscuro sobre foto incluyendo fondos CSS, y
   superficies oscuras sin convertir. Home, mariages, à propos, portfolio,
   témoignages, solutions pro, lifestyle y contact. Salieron cuatro cosas. */

/* 1 · 🔴 EL «RÉSERVER» FLOTANTE (`.rf-footer-reserver`) estaba a 1,01 — INVISIBLE.
   Es un botón fijo de 88x44 que acompaña al visitante por toda la página: fondo
   rgba(14,14,16,.85) heredado del modo oscuro y encima el marino del día. Un CTA
   invisible es peor que no tenerlo. Pasa a ser la pastilla ámbar de siempre. */
/* ⚠️ Y con el ID delante, porque la regla que lo pintaba oscuro es
   `#anita-footer .rf-footer-reserver` DENTRO de `@media (max-width:767px)`: un ID
   le gana a cualquier cantidad de clases, así que en ESCRITORIO mi regla ganaba y
   en MÓVIL no. El botón salía ámbar en el portátil y negro sobre marino —1,47— en
   el teléfono, que es justo donde más se pulsa.
   🧯 La lección: cuando una regla ajena vive en una media query, el fallo solo
   existe a ese ancho. Verificar a un solo tamaño no es verificar. */
html.rf-claro body[class] .rf-footer-reserver,
html.rf-claro body[class] .rf-footer-reserver *,
html.rf-claro body[class] #anita-footer .rf-footer-reserver,
html.rf-claro body[class] #anita-footer .rf-footer-reserver *{
  background-color:var(--rf-gold-surface) !important; color:var(--rf-on-gold) !important;
  border-color:var(--rf-gold-surface) !important; }

/* 2 · El botón de volver arriba de Anita: un círculo negro al 25 % con la flecha
   marino encima. Superficie clara, flecha marino y un filete que lo despegue. */
html.rf-claro body[class] .anita-back2top{
  background-color:var(--rf-elevated) !important;
  border:1px solid var(--rf-hairline) !important;
  box-shadow:0 2px 10px rgba(19,49,87,.10) !important; }
html.rf-claro body[class] .anita-back2top,
html.rf-claro body[class] .anita-back2top *{ color:var(--rf-ink) !important; fill:currentColor !important; }

/* 3 · El sello «Audit de marque» de /professionnels/: fondo casi negro con el
   marino encima (2,66) y el borde en el oro viejo. Aquí manda la SUPERFICIE, que
   es un sello oscuro a propósito: se le devuelve el texto claro y el borde ámbar. */
html.rf-claro body[class] .rfl2b-audit__stamp,
html.rf-claro body[class] .rfl2b-audit__stamp *{ color:#F5F2EC !important; }
html.rf-claro body[class] .rfl2b-audit__stamp{
  border-color:rgba(252,181,31,.65) !important; }

/* 4 · La página actual del menú, OTRA VEZ. La arreglé el 25/08 apuntando a
   `.rf-magnetic`, y resulta que en las plantillas de Anita el mismo enlace NO
   lleva esa clase: `li.current-menu-item > a` a secas. Apuntar a una clase que
   solo existe en una plantilla deja fuera todas las demás — se apunta al ESTADO,
   que es lo que no cambia. El subrayado ámbar solo en los menús de lista; en la
   píldora de la barra el estado ya se ve por su propio fondo. */
html.rf-claro body[class] :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a,
html.rf-claro body[class] :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a *{
  color:var(--rf-ink) !important; }
html.rf-claro body[class] :is(.rfh-drawer, nav.anita-nav, .main-menu, #menu-legal-footer)
  :is(.current-menu-item, .current_page_item) > a{
  background:linear-gradient(var(--rf-gold-surface),var(--rf-gold-surface)) 0 100%/2.2em 3px no-repeat !important;
  padding-block-end:6px !important; }

/* ═══ W.17 · LO QUE SOLO APARECE A 375 px ══════════════════════════════════════
   🧯 Media sesión midiendo a un solo ancho. El móvil tiene REGLAS PROPIAS, y un
   fallo que vive dentro de una media query no existe hasta que se mira a ese
   ancho. Barrido rehecho a 375. */

/* La barra CTA fija del móvil seguía siendo un cristal OSCURO —rgba(14,14,16,.72)—
   mientras la cápsula del nav ya es clara. Es la pieza que más se ve en el móvil,
   porque va pegada abajo toda la visita. Mismo cristal claro que la cápsula. */
html.rf-claro body[class] .rf-mcta{
  background-color:rgba(255,255,255,.86) !important;
  border-block-start:1px solid var(--rf-hairline) !important;
  box-shadow:0 -4px 18px rgba(19,49,87,.10) !important; }

/* Y otra superficie invisible que se me había escapado: las tarjetas de
   testimonio llevan `rgba(255,255,255,.024)` de fondo, o sea nada sobre papel.
   Misma cura que las demás tarjetas: superficie, filete y relieve. */
html.rf-claro body[class] .rf-d-case{
  background-color:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important;
  box-shadow:0 1px 2px rgba(19,49,87,.05), 0 10px 26px rgba(19,49,87,.09) !important; }

/* El marcador «+» del desplegable «J'ai un code promo», en /reserver/: iba en el
   oro viejo. Es el indicador de abrir/cerrar, o sea un control — va con la letra,
   en marino, como las flechas y los iconos de FAQ. */
html.rf-claro body[class] summary::before,
html.rf-claro body[class] summary::marker{ color:var(--rf-ink) !important; }

/* ═══ W.18 · LA VERIFICACIÓN PROFUNDA (26/08) ══════════════════════════════════ */

/* 1 · Las viñetas de las listas legales (`.rf-legal li::before`) seguían en el oro
   viejo. Son un guion de 8x1 px: decoración pura → ámbar. */
html.rf-claro body[class] .rf-legal li::before,
html.rf-claro body[class] .rf-legal__wrap li::before{
  background-color:var(--rf-gold-surface) !important; }

/* 2 · 🔴 FALLO QUE CAUSÉ YO. Al quitarle el oro viejo a `.rf-d-btn` pinté de ámbar
   las DOS variantes, y `.rf-d-btn--ghost` es la secundaria: en el menú lateral
   salían «Reservar una fecha» y «Hablemos de vosotros» con exactamente la misma
   pastilla ámbar. Dos botones idénticos no son una jerarquía. El fantasma vuelve a
   ser fantasma: sin relleno, filete ámbar y letra en tinta. */
html.rf-claro body[class] .rf-d-btn--ghost,
html.rf-claro body[class] .rf-d-btn--ghost *{
  background-color:transparent !important; color:var(--rf-ink) !important;
  border:1px solid rgba(252,181,31,.75) !important; }
html.rf-claro body[class] .rf-d-btn--ghost:hover{
  background-color:rgba(252,181,31,.12) !important; border-color:var(--rf-gold-surface) !important; }

/* 3 · 🔴 EL ANILLO DE FOCO ERA INVISIBLE SOBRE PAPEL.
   ⚠️ Corrijo lo que yo mismo escribí aquí antes de comprobarlo: el sitio SÍ define
   anillo de foco —hay un bloque «ACCESSIBILITY: focus states» que pone
   `outline:2px solid rgba(230,230,230,.6) !important` en todo lo enfocable—. Lo
   que pasa es que ese gris claro al 60 % está pensado para el fondo negro: sobre
   papel no se ve. Quien navega con teclado se quedaba sin saber dónde está.
   Anillo propio, ámbar con halo de tinta para que se lea sobre papel Y sobre foto.
   Le gana por especificidad (0,3,3 contra 0,1,1) pese al !important ajeno.
   Solo en modo claro: al oscuro no le toco los estados, que allí funciona.
   🧯 No pude verificarlo forzando el foco por JS —`.focus()` no dispara
   `:focus-visible` en Chrome si la última interacción no fue de teclado—, así que
   está comprobado por especificidad y por lectura del CSS servido, no visto. */
html.rf-claro body[class] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--rf-gold-surface) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(19,49,87,.28) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   S380 (26/08/2026) · LO QUE ENCONTRÓ LA COMPARACIÓN ELEMENTO A ELEMENTO
   ENTRE LOS DOS MODOS, corrida esta vez en las 33 páginas y no solo en la home.
   Pablo, s375: «hay muchos más fallos que comparando la web modo claro y modo
   oscuro encontrarás y que son lógicos». Los había: 41 causas distintas.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · EL HERO LEGAL Y EL DE BLOG VUELVEN AL PAPEL.
   La excepción ya estaba escrita arriba —`html.rf-claro .rf-hero--legal{
   background:var(--rf-canvas)}`, especificidad 0-2-1— pero la regla general
   `html.rf-claro body[class] :is(.rfh-hero,.rf-hero,.rf-cta)` (0-3-2) le ganaba
   y pintaba el hero de MARINO. Encima el texto de ese hero también va en marino:
   marino sobre marino = CONTRASTE 1,00 y el overline «Informations légales»
   DESAPARECÍA. Afectaba a /cgv/, /mentions-legales/ y /blog/ enteras.
   Se le da la misma especificidad que a la regla que la pisaba. */
html.rf-claro body[class] :is(.rf-legal, .rf-hero--legal, .rf-hero--blog){
  background-color:var(--rf-canvas) !important; }

/* 2 · Y SU HALO ES NEGRO AL 66 %.
   `::before` lleva un radial-gradient con rgba(14,14,16,.66) para que el titular
   despegue sobre el negro. Sobre papel deja una mancha gris que apaga el lead.
   Se retira SOLO en estos dos heroes, que no tienen foto: los heroes con
   fotografía conservan su halo, que ahí sí hace falta. */
html.rf-claro body[class] :is(.rf-hero--legal, .rf-hero--blog)::before{
  background-image:none !important; }

/* 3 · LA FLECHA «→» NO ES UN FILETE, ES UNA LETRA.
   Iba en el mismo :is() que el guión del overline —que sí es un filete dibujado,
   content:"" de 34×1 px— y por tanto recibía fondo ámbar Y color ámbar. La flecha
   se pintaba del color de su propio fondo: quedaba un CUADRADO MACIZO. Se le quita
   el fondo; el color ámbar se queda, que es su papel en el modo oscuro. */
html.rf-claro body[class] .rfh-sol::before{
  background-color:transparent !important; border-color:transparent !important; }

/* 4 · EL CHIP «▸ MICRO-FILM» de los capítulos de la home.
   Su velo va escrito a pelo —rgba(14,14,16,.65) en home-v4.css:243— y no reacciona
   al tema, pero su letra sale de var(--rfh-txt) y sí reacciona: quedaba marino
   sobre un velo oscuro. Como el chip vive SOBRE UNA FOTO, lo correcto es conservar
   el velo y devolverle la letra clara. */
html.rf-claro body[class] .rfh-chap__media::after{ color:#EDEAE4 !important; }

/* 5 · LAS TARJETAS QUE SE QUEDABAN SIN SUPERFICIE NI FILETE.
   Su fondo (blanco al 2,4 %) y su borde (blanco al 8 %) están pensados para el
   negro: sobre papel son invisibles —el borde daba 1,00— y el componente pierde su
   forma. La FAQ dejaba de parecer clicable en 12 páginas. */
html.rf-claro body[class] :is(.rf-faq__item, .rf-contact-card, .rfcc-m,
                              .rfl2b-gaze__card, .rf-cohort){
  background-color:var(--rf-elevated) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .rf-va__link{ border-color:var(--rf-hairline) !important; }

/* 6 · LOS TÍTULOS PARTIDOS EN PALABRAS NO SON TEXTO SECUNDARIO.
   Los <h1> se parten en <span class="rf-word"> para animarlos, y la regla general
   «todo span va a --rf-ink-muted» los alcanzaba: el titular salía con el color del
   texto secundario. Se limita a .rf-word para no tocar los spans que llevan acento
   a propósito dentro de un título (el ámbar del hero de la home). */
html.rf-claro body[class] :is(h1,h2,h3) .rf-word{ color:inherit !important; }

/* 7 · LOS ACENTOS QUE SE HABÍAN QUEDADO EN MARINO VUELVEN AL ÁMBAR.
   Orden de Pablo (26/08/2026). En el modo claro los tokens del oro se apagan a
   marino a propósito —`--rf-gold:#133157`, `--rfh-gold:#133157`, arriba— y lo
   gráfico se fue rescatando pieza a pieza con --rf-gold-surface. Estos son los que
   NO se rescataron: el barrido de las 33 páginas los encontró perdiendo el acento.
   ⚠️ NO se toca el token global: eso revertiría la decisión de s375 y alcanzaría
   también a lo que hoy está en marino queriendo. Solo lo medido. */
html.rf-claro body[class] :is(
  .rf-avatar, .rf-case__num, .rf-galerie__type, .rf-apercu__link, .rf-cat-desc,
  .rfcc-m__prix, .rfm7-paso__num, .rf-duo-portraits__role, .rf-fond-badge,
  .rf-pq-card__overline, .rfl2b-count, .rf-zones__price, .rf-cfg-kicker,
  .rf-step__num, .rf-footernav__h, .rf-quote__mark, .rf-cohort__cond,
  .rfv2-panel-kicker){ color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rfl2-trio figcaption b{ color:var(--rf-gold-surface) !important; }
html.rf-claro body[class] .rfm7-delais th{ color:var(--rf-gold-surface) !important; }


/* ═══ 9 · s385 · LAS ARCHIVOS DEL BLOG (/category/…), QUE NADIE HABÍA MIRADO ═══
   El barrido de s384 cubrió 33 páginas «de diseño» y dejó fuera los ARCHIVOS del
   blog. Ahí manda la plantilla del tema Anita con widgets de bloque de WordPress, y
   el resultado en modo claro era el peor del sitio: la página se vuelve papel, el
   texto se vuelve marino… y los widgets de la barra lateral SE QUEDAN NEGROS.
   Marino #133157 sobre #1A1A1E: contraste 1,33. No es «poco contraste», es que no
   se ve nada. Medido el 27/08/2026 en /category/blog/: ~400 apariciones entre las
   10 categorías — buscador, «Catégories», «Articles récents», «Commentaires
   récents», nube de tags, fechas y títulos.
   Y los huecos de imagen (`.anita-lazy-wrapper`, 930×620) quedaban como ladrillos
   grises oscuros sobre el papel mientras carga la foto.
   ⚠️ La lección: un barrido «por páginas de diseño» no cubre un sitio. Las
      plantillas heredadas del tema (archivos, tags, autor, 404, búsqueda) no salen
      en la lista de páginas y por eso nadie las mira. */
html.rf-claro body[class] .anita-widget{ background:var(--rf-sunken) !important;
  border-color:var(--rf-hairline) !important; }
html.rf-claro body[class] .anita-lazy-wrapper{ background:var(--rf-sunken) !important; }

/* 9-bis · s385 · RETIRADA. Esta regla pintaba «Continue Reading» y «Tagged in:» y,
   sin querer, TAMBIÉN los enlaces de etiqueta (`.anita-post-tags-wrap a`): 168 enlaces
   en las 15 páginas /tag/ pasaron a ámbar sobre papel, 1,65. En modo oscuro esos
   enlaces van en gris normal (8,96), o sea que el ámbar no era un acento de la marca
   ahí — lo puse yo. Y la decisión de Pablo del 27/08 («los números y tal ya dijimos que
   eran en ámbar») era sobre los ACENTOS, no sobre convertir enlaces en dorados.
   Se retira entera y esos elementos vuelven exactamente a como estaban antes de s385.
   ⚠️ La lección: una regla escrita para dos elementos concretos se llevó por delante un
      tercero que casaba con el selector. Al escribir `.x a` hay que mirar QUÉ enlaces
      viven dentro de `.x`. */


/* 8 · EL COMPARADOR ANTES/DESPUÉS SE QUEDABA SIN «ANTES».
   La regla que realza las fotos en el modo claro —saturate(104%) brightness(106%)
   contrast(96%), para que no se vean apagadas sobre papel— alcanza también a
   `.rf-ba__img--before`, cuya gracia es justo la contraria: ir en gris y más oscura
   para que se note la diferencia al arrastrar el divisor. Con el realce encima, las
   dos mitades quedaban IDÉNTICAS y el comparador parecía roto. */
html.rf-claro body[class] .rf-ba__img--before{
  filter:grayscale(.7) brightness(.82) contrast(1.05) !important; }

/* 9 · Y EL FUNDIDO DE BORDES NO PINTA NADA EN UN COMPARADOR.
   `.rf-ba` está en la lista de marcos a los que el claro aplica --rf-m-full. En una
   foto suelta el fundido queda bien; aquí difumina los bordes del componente y la
   línea que se arrastra, que es justo lo que tiene que verse nítido. */
html.rf-claro body[class] .rf-ba{
  -webkit-mask-image:none !important; mask-image:none !important; }

/* 10 · FUERA EL FUNDIDO DE BORDES EN TODAS LAS FOTOS (orden de Pablo, 26/08/2026).
   El diagnóstico ya estaba escrito en U.4, arriba: sobre papel el fundido «deja un
   halo oscuro alrededor» y «parece suciedad» en las fotos de fondo oscuro. Allí se
   resolvió a medias —fuera en las fotos EN TARJETA, dentro en las SUELTAS—; Pablo,
   viendo las dos versiones de /mariages/, ha pedido quitarlo en todas: la foto queda
   nítida con su esquina redondeada, como en el modo oscuro.
   ⚠️ Y se cierra el 🔓 que dejaba U.4: `.rf-alb__img` NO SE USA EN NINGUNA PARTE —
   0 páginas publicadas, y fuera de este archivo no aparece en ningún CSS ni PHP del
   sitio. Igual `.rfp4-card__media`. Son clases muertas: se dejan en la regla porque
   no molestan, pero que nadie vuelva a buscar dónde salen. */
html.rf-claro body[class] :is(.rf-editorial__frame, .rf-split__media, .rf-ba,
                              .rf-alb__img, .rf-xlink__media, .rfp4-card__media){
  -webkit-mask-image:none !important; mask-image:none !important; }


/* 12 · FUERA LA FRANJA BLANCA DE LA BARRA (orden de Pablo, 27/08/2026).
   En el modo oscuro la fotografía del hero llega hasta arriba del todo y la barra
   flota encima. En claro no llegaba, y NO era solo el fondo del nav: eran DOS capas
   montadas —el fondo casi opaco de la barra, y una banda de papel SÓLIDO en
   `.rf-hero__scrim` que llega justo hasta RF_TEMA_NAV_PX (140 px, el alto exacto de
   la barra) antes de empezar a fundirse, puesta a propósito en U.3 para que la
   barra clara tuviera fondo—. Quitar solo una de las dos no cambiaba nada.
   Aquí se usa la rampa que YA EXISTE para esto, `rf_tema_rampa_solo_abajo`: arranca
   transparente en 0 px y funde a papel solo al final, para unir con la sección
   siguiente. No hay ningún degradado escrito a mano.
   ⚠️ SOLO en las páginas cuyo hero ES una fotografía. En /cgv/ y /blog/ el hero es
   papel (se pusieron así hoy mismo, arreglo 1) y allí la barra CONSERVA su fondo:
   sin él, la letra clara sobre papel no se leería. De ahí el :has(). */
html.rf-claro body[class]:has(.rf-hero.rf-grain, .rfh-hero) .rf-hero__scrim{
  background:linear-gradient(to bottom,rgba(244,246,248,0.000) 0px,rgba(244,246,248,0.000) calc(100% - 40px),rgba(244,246,248,0.011) calc(100% - 37.5px),rgba(244,246,248,0.043) calc(100% - 35px),rgba(244,246,248,0.092) calc(100% - 32.5px),rgba(244,246,248,0.156) calc(100% - 30px),rgba(244,246,248,0.232) calc(100% - 27.5px),rgba(244,246,248,0.316) calc(100% - 25px),rgba(244,246,248,0.407) calc(100% - 22.5px),rgba(244,246,248,0.500) calc(100% - 20px),rgba(244,246,248,0.593) calc(100% - 17.5px),rgba(244,246,248,0.684) calc(100% - 15px),rgba(244,246,248,0.768) calc(100% - 12.5px),rgba(244,246,248,0.844) calc(100% - 10px),rgba(244,246,248,0.908) calc(100% - 7.5px),rgba(244,246,248,0.957) calc(100% - 5px),rgba(244,246,248,0.989) calc(100% - 2.5px),rgba(244,246,248,1.000) calc(100% - 0px)),linear-gradient(rgba(14,14,16,0.172) 0%, rgba(14,14,16,0.202) 26%, rgba(14,14,16,0.334) 46%, rgba(14,14,16,0.405) 72%, rgba(14,14,16,0.440) 100%) !important; }

html.rf-claro body[class]:has(.rf-hero.rf-grain, .rfh-hero) nav.rfh-nav:not(.scrolled){
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-block-end-color:transparent !important; }

/* 13 · Y EL LOGO BLANCO VUELVE MIENTRAS LA BARRA ESTÁ SOBRE LA FOTO.
   El bloque K esconde el logo blanco del sitio y lo sustituye por `icon-5.png`
   —la variación marino + ámbar— porque «sobre estos fondos desaparece». Cierto
   sobre papel; sobre la fotografía pasa justo lo contrario: el marino se pierde y
   solo sobrevive el círculo ámbar. Así que sobre la foto se devuelve el logo
   blanco, que es EL MISMO que ya usa el modo oscuro, y en cuanto se scrollea y la
   cápsula pone fondo claro vuelve el marino. No hace falta ningún resplandor. */
html.rf-claro body[class]:has(.rf-hero.rf-grain, .rfh-hero) nav.rfh-nav:not(.scrolled) .rfh-nav__logo{
  background-image:none !important; }
html.rf-claro body[class]:has(.rf-hero.rf-grain, .rfh-hero) nav.rfh-nav:not(.scrolled) .rfh-nav__logo img{
  visibility:visible !important; }

/* Lo que va FUERA de la pastilla (Client · ES · el botón del tema) pasa al crema del
   hero: sobre una fotografía el marino no se lee. La pastilla del menú se queda
   clara —decisión de Pablo—, y dentro de ella la letra sigue en marino. */
html.rf-claro body[class]:has(.rf-hero.rf-grain, .rfh-hero) nav.rfh-nav:not(.scrolled)
  :is(.rfh-nav__client, .rfh-nav__lang, #rf-tema-btn){
  color:#F5F2EC !important; border-color:rgba(245,242,236,.55) !important; }


/* 14 · LOS ACENTOS QUE SE ESCAPARON DE LA LISTA DEL PUNTO 7.
   Allí solo entraron los que tenían CLASE PROPIA; los que viven en una etiqueta
   genérica —<em>, <b>, <u>— se quedaron fuera «por prudencia», y se notaba: las
   cifras de la home seguían en marino cuando lo que las hace legibles de un vistazo
   es justo el acento —«20·22», «4,8·/5», «2·=1»—. Lo cazó Pablo mirando la home.
   Estos selectores NO están adivinados: salen de preguntarle al navegador, elemento
   por elemento y página por página, qué regla lo pinta de oro en el modo oscuro. */
html.rf-claro body[class] :is(
  .rfh-stat .rfh-v em,            /* las cifras de la home: 2022 · 4,8/5 · 2=1 */
  .rfh-quote cite b,              /* el nombre de quien firma la cita */
  .rfh-bar__meta .rfh-tcw b,      /* el timecode de la intro */
  .rf-brand-tagline,              /* la tira «Toulouse · Occitanie · Mariages…» */
  .rf-cta-final__title em,        /* «Parlons-en avant.» */
  .rufino-cat-extra .rf-cat-appel u,
  .rfp4-poster__load,
  .rfl2b-wall__cap b,
  .rfl2e-trio figcaption b,
  .rfl2l-trio figcaption b,
  .rfl2m-trio figcaption b){ color:var(--rf-gold-surface) !important; }


/* 15 · Y LA TIRA QUE CRUZA LA HOME («Toulouse · Occitanie · Mariages · Familles…»).
   Su regla es `.rfh-marquee__track span` y en oscuro va en oro AL 45 %: es un
   susurro, no un titular. Se mantiene ese mismo alfa con el ámbar del registro
   claro, para que siga siendo igual de discreta y no se convierta en un letrero. */
html.rf-claro body[class] .rfh-marquee__track span{
  color:rgba(252,181,31,.45) !important; }


/* 16 · EL PORTFOLIO SE HABÍA QUEDADO ENTERO FUERA DEL MODO CLARO (27/08/2026).
   Y con motivo: `/portfolio/` no tiene hero, su carrusel es WebGL del tema Anita y
   usa una barra inferior propia en vez del pie unificado, así que NINGUNO de los
   selectores de los bloques 1-15 lo alcanzaba. Lo vio Pablo abriendo la página.
   Se identifica por el contenedor del carrusel, no por el ID de la página: si algún
   día se renumera, esto sigue funcionando. */

/* 16.a · La barra superior, como en el resto del sitio: sin franja, con el logo
   blanco mientras está sobre la fotografía. */
html.rf-claro body[class]:has(.anita-gl-container-wrap) nav.rfh-nav:not(.scrolled){
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-block-end-color:transparent !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap) nav.rfh-nav:not(.scrolled) .rfh-nav__logo{
  background-image:none !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap) nav.rfh-nav:not(.scrolled) .rfh-nav__logo img{
  visibility:visible !important; }
/* s385 · …PERO SOLO MIENTRAS EL CARRUSEL ESTÉ ACTIVO.
   Esta regla da por hecho que el menú va siempre sobre la fotografía a pantalla
   completa. Es cierto con el carrusel, y falso en la variante REJILLA, que se activa
   por debajo de 1020 px o con «reducir movimiento»: ahí la página hace scroll de
   verdad (6.245 px medidos a 900) y el menú fijo acaba **sobre la franja clara del
   pie**. Con el crema forzado, «Client», «ES» y la luna quedaban a **1,01** — la
   cápsula blanca con las letras color crema encima. Verificado en imagen a 900 px.
   `html:not(.rfp4-nogl)` es exactamente «el carrusel no está apagado», la misma
   condición que usa la línea legal del pie. En rejilla el menú vuelve a los colores
   normales del modo claro, que es lo correcto sobre papel. */
html.rf-claro:not(.rfp4-nogl) body[class]:has(.anita-gl-container-wrap) nav.rfh-nav:not(.scrolled)
  :is(.rfh-nav__client, .rfh-nav__lang, #rf-tema-btn){
  color:#F5F2EC !important; border-color:rgba(245,242,236,.55) !important; }

/* 16.b · EL TÍTULO DE CADA PROYECTO, sobre la fotografía a pantalla completa.
   El mismo patrón de siempre: la letra pasa a marino y el fondo —una foto— no
   cambia. En oscuro es crema (230,230,230) y así se lee; en claro caía a marino
   sobre imágenes oscuras y desaparecía. Vuelve al crema, que es lo que se lee
   sobre una fotografía, sea cual sea el tema. */
html.rf-claro body[class] :is(.anita-gl-gallery__caption, .anita-gl-gallery__title){
  color:#F5F2EC !important; }

/* 16.c · LA BARRA INFERIOR FIJA, que también vive sobre la foto: los enlaces
   legales (© · Mentions légales · Politique de confidentialité) quedaban en marino
   y NO SE VEÍAN. Son los enlaces obligatorios, así que no es un detalle estético. */
html.rf-claro body[class]:has(.anita-gl-container-wrap) footer :is(a, span, p, li){
  color:#F5F2EC !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap) footer a:hover{
  color:var(--rf-gold-surface) !important; }

/* 16.d · Y el botón «Voir le projet» conservaba el ORO VIEJO —#C99A48 al 70 %—
   que s375 retiró de todo el modo claro. Pasa al ámbar del registro claro. */
html.rf-claro body[class] .anita-gl-gallery__explore{
  border-color:rgba(252,181,31,.75) !important;
  background-color:rgba(252,181,31,.16) !important; }


/* 16.e · LOS ENLACES LEGALES DEL PORTFOLIO, ahora sí.
   ⚠️ La regla 16.c no llegaba a aplicarse: `html.rf-claro #menu-legal-footer a`
   —con ID, especificidad 1-1-2— le ganaba a mi excepción (0-3-4). Esa regla es
   CORRECTA para el pie normal, que va sobre papel; el problema es que en
   `/portfolio/` el mismo pie vive sobre la fotografía y ahí el marino no se lee.
   Es la sexta vez en esta sesión que una general pisa un caso particular, así que
   aquí la excepción se escribe con el ID también, para ganarle de sobra. */
html.rf-claro body[class]:has(.anita-gl-container-wrap)
  :is(#menu-legal-footer, .anita-copyright-menu, .anita-copyright-wrap) :is(a, span, li){
  color:#F5F2EC !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap)
  :is(#menu-legal-footer, .anita-copyright-menu) a:hover{
  color:var(--rf-gold-surface) !important; }


/* 16.f · LAS FLECHAS ‹ › DEL CARRUSEL, EN BLANCO (orden de Pablo, 27/08/2026).
   `a.anita-gallery-nav` va SOBRE las fotografías a pantalla completa y en claro
   caía a marino —color y borde—, que sobre una imagen oscura no se ve. Pablo:
   «en el modo claro las flechas que están a derecha e izquierda no deben ser azul
   marino sino blancos». Mismo caso que el título y los enlaces de la barra: la
   letra cambia de tema y el fondo, que es una foto, no. */
html.rf-claro body[class]:has(.anita-gl-container-wrap) .anita-gallery-nav{
  color:#F5F2EC !important;
  border-color:rgba(245,242,236,.55) !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap) .anita-gallery-nav::before,
html.rf-claro body[class]:has(.anita-gl-container-wrap) .anita-gallery-nav::after{
  color:#F5F2EC !important; border-color:#F5F2EC !important; }
html.rf-claro body[class]:has(.anita-gl-container-wrap) .anita-gallery-nav:hover{
  color:var(--rf-gold-surface) !important;
  border-color:var(--rf-gold-surface) !important; }