/* ── Montserrat 500, que el sitio NO tenía ─────────────────────────────────────────
   El sitio aloja Montserrat solo en **peso 300** (`rufino-fuentes-locales.php`, s412) y
   Oswald como variable 200-700. El spec pide el cuerpo de capítulo, los botones, los precios
   y las etiquetas en **Montserrat 500**: sin ese fichero el navegador lo sintetiza desde el
   300, el texto sale más estrecho y más ligero, y ocupa menos líneas — el cuerpo de capítulo
   caía de 3 líneas a 2 y con él se descolocaba el ritmo de la página.
   Se declara AQUÍ y no en el mu-plugin de fuentes del sitio para no añadir dos descargas a
   las 100 páginas: solo lo pide quien usa el sistema premium.
   Descargado de Google el 04/09/2026 (Montserrat v31), mismos `unicode-range` que el 300. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('/wp-content/uploads/fuentes/montserrat-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('/wp-content/uploads/fuentes/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ══════════════════════════════════════════════════════════════════════════════════
   Rufino Studio · sistema premium «Apple» · P2/O1 · s418 · 04/09/2026
   Spec: PLANES_PROYECTOS/P03_SPEC_PREMIUM_2026-09.md (v2,medido en apple.com/fr)
   Origen: la maqueta v2 de Fable que Pablo aprobó el 04/09 («Ok a la maqueta»),~/s417/maqueta/build_v2.py,con sus medidas ya verificadas en el navegador.

   ⚠️ TODO VIVE DENTRO DE `.rp`,Y ES LA RAZÓN DE QUE ESTA HOJA SE PUEDA PUBLICAR.
   La maqueta era un HTML suelto,así que escribía `body{}`,`a{}`,`img{}`,`details{}`
   y clases como `.content`,`.body` o `.btn`. Publicado tal cual,eso repinta el sitio
   entero y pisa el trabajo de las páginas que ya estaban bien — es exactamente
   `error_regla_global_pisa_el_cap_del_componente`,que ya ha reincidido. Aquí cada
   regla está acotada al contenedor y cada clase lleva el prefijo `rp-`.
   Fuera de `.rp` esta hoja no cambia ni un píxel.

   No se edita a mano sin actualizar el spec. Se encola desde rufino-premium.php con
   ?v=filemtime,así que un cambio se ve al recargar.
   ══════════════════════════════════════════════════════════════════════════════════ */

.rp{
  --rp-bg0:#0E0E10; --rp-bg1:#141416; --rp-card:#1A1A1C; --rp-cardd:#000; --rp-tx:#E6E6E6; --rp-tx2:#A6A6A6; --rp-gold:#C99A48; --rp-goldl:#D4AD6A; --rp-line:rgba(166,166,166,.15);
  --rp-content:1260px; --rp-statement:1050px; --rp-body:840px; --rp-read:680px;
  --rp-tile:274px; --rp-tile-h:246px; --rp-tile-gap:40px; --rp-card3:372px; --rp-card3-gap:72px; --rp-radius:28px;
  --rp-sec-t:clamp(64px,7vw,112px); --rp-sec-b:clamp(72px,7.8vw,128px);
  --rp-ease:cubic-bezier(.4,0,.2,1); --rp-hover:cubic-bezier(.4,0,.6,1);
  --rp-gutter:max(20px,calc((100% - var(--rp-content))/2)); /* 04/09 tarde: 100% del contenedor, no 100vw — 100vw incluye la barra de scroll y descentraba los carriles respecto a .rp-content (medido: 3 px aquí, hasta 8 en Windows) */
}
:where(.rp) *{box-sizing:border-box}
.rp{scroll-behavior:smooth}

/* ⚠️ `clip`, NO `hidden` — s483 · 21/09/2026. Con `overflow-x:hidden` la especificación
   obliga al otro eje a pasar de `visible` a **`auto`**, y `.rp` —que envuelve la página
   entera— se convertía en un contenedor con scroll propio sin que nadie lo pidiera.
   Bastaba que algo lo desbordara (el último bloque `data-rp-reveal` sin revelar, que
   lleva `translateY(16px)`) para que tuviera 16 px de recorrido real: **el primer gesto
   de rueda o trackpad se lo tragaba entero y la página no se movía**. Con trackpad el
   gesto se reenganchaba en bucle — Pablo grabó 10 s sin poder bajar de la portada.
   `clip` recorta igual en horizontal pero deja el eje vertical en `visible`.
   Medido en el hero: primer scroll → scrollY 0 antes, 300 después. */
.rp{margin:0;background:var(--rp-bg0);color:var(--rp-tx);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(.rp) a{color:inherit;text-decoration:none}
:where(.rp) img{display:block;max-width:100%}
:where(.rp) h1,:where(.rp) h2,:where(.rp) h3,:where(.rp) p,:where(.rp) ul,:where(.rp) ol{margin:0}
:where(.rp) ul{padding:0;list-style:none}
.rp .rp-content{max-width:var(--rp-content);margin-inline:auto;padding-inline:20px}
@media(min-width:1300px){.rp .rp-content{padding-inline:0}}
.rp /* tipos (Apple → Rufino,.rp spec v2 §2.2) */
.rp-h1{font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.rp .rp-statement{font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:clamp(27px,3.5vw,50px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;max-width:var(--rp-statement);margin-inline:auto;text-align:center}
.rp .rp-h2{font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:clamp(23px,2.6vw,38px);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.rp .rp-h3{font-family:Oswald,Impact,sans-serif;font-weight:500;font-size:28px;line-height:32px}
.rp .rp-label{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(14px,1.15vw,17px);line-height:1.25;letter-spacing:.06em;color:var(--rp-gold);text-align:center}
.rp .rp-chapbody{font-size:clamp(16px,1.35vw,19px);line-height:1.4;font-weight:500;color:var(--rp-tx2);max-width:var(--rp-body);margin-inline:auto;text-align:center}
.rp .rp-body{font-size:16px;line-height:1.55}
.rp .rp-tag17{font-size:16px;font-weight:500}
.rp .rp-small{font-size:14px;line-height:1.45;color:var(--rp-tx2);font-weight:400}
.rp .rp-num{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(32px,3.1vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.rp .rp-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 21px;border-radius:980px;font-size:16px;font-weight:500;background:var(--rp-gold);color:var(--rp-bg0);transition:background .32s var(--rp-hover);white-space:nowrap}
.rp .rp-btn:hover{background:var(--rp-goldl)}
.rp .rp-btn--g{background:transparent;color:var(--rp-tx);border:1px solid var(--rp-tx2)}
.rp .rp-btn--g:hover{background:rgba(255,255,255,.06)}
.rp .rp-link{color:var(--rp-gold);font-size:16px;font-weight:400;transition:opacity .32s var(--rp-hover)}
.rp .rp-link:hover{opacity:.8}
.rp .rp-link::after{content:"\00a0›";} /* s537: espacio irrompible, la flecha no se queda sola en una línea */
.rp .rp-btn:focus-visible,.rp .rp-link:focus-visible,:where(.rp) summary:focus-visible,.rp .rp-paddle:focus-visible,.rp .rp-dot:focus-visible{outline:2px solid var(--rp-goldl);outline-offset:3px}
.rp .rp-pair{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.rp .rp-sec{padding-block:var(--rp-sec-t) var(--rp-sec-b)}
.rp .rp-sec--gamme{padding-block:120px 0}
.rp .rp-bg1{background:var(--rp-bg1)}
.rp .rp-sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.rp .rp-center{text-align:center}
.rp .rp-stack{display:grid;gap:24px}
.rp .rp-mt{margin-top:40px}
.rp /* nav actual,.rp representado (intocable) */
.rp-nav{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(14,14,16,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--rp-line);padding-inline:var(--rp-gutter)}
.rp .rp-nav .rp-logo{font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.06em;color:var(--rp-gold);font-size:18px}
.rp .rp-nav ul{display:flex;gap:26px}
.rp .rp-nav li{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-nav li.on{color:var(--rp-tx)}
.rp .rp-nav .rp-res{height:40px;padding:0 20px;font-size:12px;font-family:Oswald,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.rp .rp-tag{position:absolute;top:70px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-tx2);background:var(--rp-card);padding:4px 10px;border-radius:999px;border:1px solid var(--rp-line);z-index:21}
@media(max-width:900px){.rp .rp-nav ul{display:none}}
.rp /* rp-hero */
.rp-hero{position:relative;min-height:min(88vh,900px);display:grid;align-items:end;overflow:hidden}
.rp .rp-hero__media{position:absolute;inset:0}
.rp .rp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.rp .rp-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.92) 0%,rgba(14,14,16,.55) 45%,rgba(14,14,16,.15) 100%)}
.rp .rp-hero__body{position:relative;padding:clamp(48px,6vw,96px) var(--rp-gutter);display:grid;gap:22px;max-width:calc(820px + 2*var(--rp-gutter))}
/* 🔴 08/09/2026: iba `820px + var(--rp-gutter)` y el padding se aplica a los DOS lados,
   asi que el ancho util era 820 − gutter. A 1 440 el gutter es 90 y no se notaba (730 px);
   a 1 900 el gutter es 320 y el titular caia a 400 px, partido en seis lineas. Medido en
   la ventana de Pablo. Afectaba a las 10 paginas del sistema, no solo a la home. */
.rp .rp-hero .rp-ov{font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--rp-gold)}
.rp .rp-hero .rp-st{font-size:clamp(17px,1.6vw,22px);line-height:1.35;font-weight:400}
.rp .rp-hero .rp-price{font-size:16px;font-weight:400}
.rp .rp-hero .rp-price span{color:var(--rp-gold);margin:0 10px}
@media(max-width:760px){.rp .rp-hero{min-height:0;display:block}.rp .rp-hero__media{position:relative;aspect-ratio:3/4}.rp .rp-hero__media::after{background:linear-gradient(to top,var(--rp-bg0) 0%,rgba(14,14,16,0) 30%)}.rp .rp-hero__body{padding-top:12px}.rp .rp-pair .rp-btn{width:100%}}
.rp /* rp-chapters (Apple localnav 52px) */
.rp-chap{position:sticky;top:64px;z-index:15;height:52px;background:rgba(14,14,16,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--rp-line)}
.rp .rp-chap .in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:var(--rp-gutter)}
.rp .rp-chap ul{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.rp .rp-chap li a{font-size:14px;color:var(--rp-tx2);white-space:nowrap;transition:color .32s var(--rp-hover)}
.rp .rp-chap li a:hover{color:var(--rp-tx)}
.rp .rp-chap .rp-btn{height:32px;padding:0 14px;font-size:14px;flex:none}
@media(max-width:760px){.rp .rp-chap .rp-btn span{display:none}}
.rp /* carrusel genérico (Apple: scroll-snap x mandatory + paddles 50×130) */
.rp-rail{position:relative}
.rp .rp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-inline:var(--rp-gutter);scroll-padding-inline:var(--rp-gutter)}
.rp .rp-track::-webkit-scrollbar{display:none}
.rp .rp-track>*{scroll-snap-align:start;flex:none}
.rp .rp-paddle{position:absolute;top:calc(50% - 65px);width:50px;height:130px;border:0;border-radius:12px;background:var(--rp-card);color:var(--rp-tx);cursor:pointer;display:grid;place-items:center;transition:opacity .32s var(--rp-hover);z-index:2;opacity:0;pointer-events:none}
.rp .rp-paddle.on{opacity:1;pointer-events:auto}
.rp .rp-paddle--l{left:max(0px,calc(var(--rp-gutter) - 70px))}
.rp .rp-paddle--r{right:max(0px,calc(var(--rp-gutter) - 70px))}
.rp .rp-paddle::before{content:"";width:12px;height:12px;border-top:2px solid var(--rp-tx);border-right:2px solid var(--rp-tx);transform:rotate(45deg);margin-left:-4px}
.rp .rp-paddle--l::before{transform:rotate(-135deg);margin-left:4px}
@media(max-width:1100px){.rp .rp-paddle{display:none}}
.rp /* rp-gamme : tiles 274 × 246,.rp gap 40 */
.rp-gamme .rp-track{gap:var(--rp-tile-gap);padding-bottom:8px}
.rp .rp-tile{width:var(--rp-tile);display:flex;flex-direction:column}
.rp .rp-gamme .rp-track{align-items:stretch}
.rp .rp-tile__media{height:var(--rp-tile-h);border-radius:12px;background:var(--rp-card);overflow:hidden;display:grid;place-items:center;position:relative}
.rp .rp-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--rp-hover)}
.rp .rp-tile:hover .rp-tile__media img{transform:scale(1.02)}
.rp .rp-tile__media .rp-big{font-family:Oswald,sans-serif;font-weight:500;font-size:56px;line-height:1;color:var(--rp-gold);letter-spacing:-.01em;text-align:center;padding:16px}
.rp .rp-tile__media .rp-ph{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-dots{display:flex;gap:8px;justify-content:center;margin-top:20px;height:12px}
.rp .rp-dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--rp-tx2);opacity:.5}
.rp .rp-dot.on{opacity:1;background:var(--rp-gold);box-shadow:0 0 0 2px var(--rp-bg0),0 0 0 3px var(--rp-gold)}
.rp .rp-tile h3{font-family:Oswald,sans-serif;font-weight:500;font-size:25px;line-height:29px;margin-top:20px}
.rp .rp-tile .rp-pos{font-size:16px;font-weight:400;margin-top:8px;color:var(--rp-tx)}
.rp .rp-tile .rp-price{font-size:16px;font-weight:500;margin-top:16px;font-variant-numeric:tabular-nums}
.rp .rp-tile .rp-price small{display:block;font-size:14px;font-weight:400;color:var(--rp-tx2);margin-top:2px}
.rp .rp-tile .rp-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:40px}
@media(max-width:760px){.rp{--rp-tile:280px}}
.rp /* rp-highlights : 1260 × 680,.rp radio 28,.rp leyenda 28/500 a 48 px */
.rp-hl .rp-track{gap:20px}
.rp .rp-hlcard{width:min(var(--rp-content),calc(100vw - 40px));height:680px;border-radius:var(--rp-radius);overflow:hidden;position:relative;background:var(--rp-cardd)}
.rp .rp-hlcard img{width:100%;height:100%;object-fit:cover}
.rp .rp-hlcard figcaption{position:absolute;top:48px;left:48px;max-width:584px;font-family:Oswald,sans-serif;font-weight:500;font-size:28px;line-height:32px;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.rp .rp-hlcard figcaption em{display:block;font-family:Montserrat,sans-serif;font-style:normal;font-size:16px;font-weight:400;color:rgba(255,255,255,.8);margin-top:10px}
.rp .rp-pp{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;border:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:grid;place-items:center}
.rp .rp-pp::before{content:"";border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.rp .rp-pp[data-on="1"]::before{border:0;width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff;margin:0}
@media(max-width:760px){.rp .rp-hlcard{width:300px;height:480px}.rp .rp-hlcard figcaption{top:28px;left:28px;font-size:24px;line-height:28px}}
.rp /* rp-chapter */
.rp-chapter{display:grid;gap:24px;text-align:center}
.rp .rp-chapter .rp-media{margin-top:40px}
.rp .rp-media--one{max-width:var(--rp-content);margin-inline:auto;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd);position:relative}
.rp .rp-media--one img{width:100%;aspect-ratio:1260/680;object-fit:cover}
.rp .rp-media--one .rp-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--rp-tx2);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.rp .rp-linkrow{margin-top:32px;text-align:center}
.rp /* rp-tiles-3 : 372,.rp gap 72 */
.rp-g3 .rp-track{gap:var(--rp-card3-gap)}
.rp .rp-reason{width:var(--rp-card3);min-height:320px;background:var(--rp-card);border-radius:var(--rp-radius);padding:32px;display:grid;align-content:start;gap:12px}
.rp .rp-reason svg{width:26px;height:26px;stroke:var(--rp-gold);fill:none;stroke-width:1.5;margin-bottom:12px}
.rp .rp-reason .rp-lbl{font-size:16px;font-weight:500;color:var(--rp-tx2)}
.rp .rp-reason h3{font-family:Oswald,sans-serif;font-weight:500;font-size:28px;line-height:32px}
.rp .rp-reason p{font-size:16px;font-weight:300}
.rp .rp-disc{width:var(--rp-card3);height:688px;border-radius:var(--rp-radius);overflow:hidden;position:relative;background:var(--rp-cardd)}
.rp .rp-disc img{width:100%;height:100%;object-fit:cover;opacity:.85}
.rp .rp-disc .rp-t{position:absolute;top:32px;left:32px;right:32px}
.rp .rp-disc .rp-t .rp-lbl{font-size:16px;font-weight:500;color:rgba(255,255,255,.7)}
.rp .rp-disc .rp-t h3{font-family:Oswald,sans-serif;font-weight:500;font-size:28px;line-height:32px;margin-top:6px}
@media(max-width:760px){.rp{--rp-card3:calc(100vw - 40px);--rp-card3-gap:20px}}
.rp /* rp-compare */
.rp-cmp{overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--rp-radius);border:1px solid var(--rp-line);background:var(--rp-card);max-width:var(--rp-content);margin-inline:auto}
:where(.rp) table{border-collapse:separate;border-spacing:0;min-width:900px;width:100%;font-variant-numeric:tabular-nums}
:where(.rp) th,:where(.rp) td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--rp-line);vertical-align:top}
.rp thead th{position:sticky;top:0;background:var(--rp-card);z-index:2}
:where(.rp) th:first-child,:where(.rp) td:first-child{position:sticky;left:0;background:var(--rp-card);z-index:3;color:var(--rp-tx2);font-weight:400;font-size:15px;width:230px;scroll-snap-align:start}
.rp thead th:first-child{z-index:4}
:where(.rp) th .rp-h3{display:block;margin-bottom:6px}
:where(.rp) th .rp-pos{display:block;font-weight:300;font-size:14px;color:var(--rp-tx2)}
:where(.rp) td{font-size:16px}
.rp tr.rp-price td{font-family:Oswald,sans-serif;font-weight:500;font-size:28px}
.rp tr.rp-price td:first-child{font-family:Montserrat,sans-serif;font-size:15px;font-weight:400}
:where(.rp) td .rp-btnrow{display:grid;gap:10px;justify-items:start}
.rp .rp-note{margin-top:22px;max-width:var(--rp-body);margin-inline:auto;text-align:center}
:where(.rp) sup{color:var(--rp-gold);font-size:.7em}
.rp /* rp-banner-2up : 620 × 638,.rp radio 28 */
.rp-two{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-two article{min-height:638px;background:var(--rp-card);border-radius:var(--rp-radius);padding:56px 40px 40px;display:grid;align-content:start;justify-items:center;text-align:center;gap:16px}
.rp .rp-two h3{font-family:Oswald,sans-serif;font-weight:500;font-size:32px;line-height:1.15}
.rp .rp-two p{max-width:464px}
.rp .rp-two .rp-num{font-size:clamp(31px,2.9vw,41px);color:var(--rp-gold)}
.rp .rp-two .rp-fig{margin-top:auto;width:100%;height:220px;border-radius:16px;background:linear-gradient(180deg,rgba(201,154,72,.12),rgba(201,154,72,.02));display:grid;place-items:center;color:var(--rp-tx2);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:900px){.rp .rp-two{grid-template-columns:1fr}.rp .rp-two article{min-height:0}}
.rp /* rp-proof */
.rp-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-proof a{display:grid;gap:8px;padding:32px;background:var(--rp-card);border-radius:var(--rp-radius);transition:background .32s var(--rp-hover)}
.rp .rp-proof a:hover{background:#202022}
.rp .rp-proof .rp-num{font-size:clamp(32px,3.6vw,50px)}
@media(max-width:760px){.rp .rp-proof{grid-template-columns:1fr}}
:where(.rp) blockquote{margin:48px auto 0;max-width:var(--rp-read);text-align:center;font-size:clamp(17px,1.6vw,22px);line-height:1.35;font-weight:400}
:where(.rp) blockquote footer{margin-top:12px}
.rp /* rp-faq : centrada en el eje,.rp 680 */
.rp-faq{max-width:var(--rp-read);margin:64px auto 0;border-top:1px solid var(--rp-line);text-align:left}
:where(.rp) details{border-bottom:1px solid var(--rp-line)}
:where(.rp) summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(18px,1.8vw,25px);line-height:1.2}
:where(.rp) summary::-webkit-details-marker{display:none}
:where(.rp) summary::after{content:"+";position:absolute;right:0;top:20px;font-family:Oswald,sans-serif;font-size:28px;color:var(--rp-gold);transition:transform .32s var(--rp-hover)}
:where(.rp) details[open] summary::after{transform:rotate(45deg)}
:where(.rp) details p{padding:0 0 26px}
.rp /* rp-router */
.rp-router{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:48px}
.rp .rp-router a{font-family:Oswald,sans-serif;font-weight:500;font-size:28px;color:var(--rp-gold)}
.rp .rp-router a::after{content:"\00a0›"}
.rp /* rp-footnotes + legal strip */
.rp-fn{padding-block:48px 64px;border-top:1px solid var(--rp-line)}
.rp .rp-fn ol{max-width:var(--rp-body);margin-inline:auto;padding-left:20px;display:grid;gap:8px}
.rp .rp-legal{height:50px;display:grid;place-items:center;background:var(--rp-bg1);font-size:12px;color:var(--rp-tx2)}
.rp .rp-foot{background:var(--rp-bg1);padding:48px var(--rp-gutter);border-top:1px solid var(--rp-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.rp /* reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--rp-ease),transform .6s var(--rp-ease)}
.rp [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rp [data-reveal]{opacity:1;transform:none;transition:none}.rp{scroll-behavior:auto}.rp .rp-tile__media img{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════════════
   MODO DÍA
   Los valores NO se inventan: salen de `rufino-modo-dia.php`, que es quien decide el
   modo claro del sitio desde s375 (`html.rf-claro`, tokens `--rf-*`).

   El dato que había que mirar y no suponer: **en claro el acento no es dorado**.
   `--rf-gold` vale `#133157` (azul marino) y la superficie de los botones es
   `--rf-gold-surface: #FCB51F` (ámbar) con el texto en `--rf-on-gold: #133157`.
   Por eso aquí el botón se separa del color de acento en dos tokens propios: en noche
   coinciden (dorado sobre fondo oscuro) y en día no.
   ══════════════════════════════════════════════════════════════════════════════════ */

.rp{ --rp-btn-bg:var(--rp-gold); --rp-btn-fg:var(--rp-bg0); }
.rp .rp-btn{ background:var(--rp-btn-bg); color:var(--rp-btn-fg); }

html.rf-claro .rp{
  --rp-bg0:#F4F6F8;                    /* --rf-canvas   */
  --rp-bg1:#EEF1F5;                    /* --rf-sunken   */
  --rp-card:#FFFFFF;                   /* --rf-elevated */
  --rp-cardd:#0E0E10;                  /* card con foto a sangre: se queda oscura (spec §2.1) */
  --rp-tx:#133157;                     /* --rf-ink       */
  --rp-tx2:#48566B;                    /* --rf-ink-muted */
  --rp-gold:#133157;                   /* --rf-gold: en claro el acento es el azul marino */
  --rp-goldl:#0E2440;                  /* --rf-gold-hover */
  --rp-line:rgba(19,49,87,.15);        /* --rf-hairline  */
  --rp-btn-bg:#FCB51F;                 /* --rf-gold-surface */
  --rp-btn-fg:#133157;                 /* --rf-on-gold      */
}
html.rf-claro .rp-btn:hover{ background:#F0A800; }

/* s465 · LA VARIANTE FANTASMA, REPUESTA AQUÍ A PROPÓSITO.
   `.rp .rp-btn--g` se define arriba (background transparente + borde), pero la línea
   `.rp .rp-btn{ background:var(--rp-btn-bg); color:var(--rp-btn-fg) }` de este bloque
   viene DESPUÉS con la misma especificidad, así que se la comía: TODOS los botones
   secundarios del sitio salían primarios y la jerarquía visual desaparecía.
   Medido el 14/09 en /professionnels/: los 3 `--g` de la página con fondo dorado.
   Va después del hover de modo claro para ganarle también ahí. */
.rp .rp-btn--g{ background:transparent; color:var(--rp-tx); }
.rp .rp-btn--g:hover{ background:color-mix(in srgb, var(--rp-tx) 8%, transparent); color:var(--rp-tx); }
/* La leyenda de una card con foto a sangre va sobre la foto, no sobre el papel: en los
   dos modos se queda en blanco. */
html.rf-claro .rp-hlcard,html.rf-claro .rp-hlcard *{ color:#FFFFFF; }


/* ══════════════════════════════════════════════════════════════════════════════════
   LO QUE EL SITIO METE DENTRO DEL SISTEMA,Y HAY QUE DEVOLVER A CERO
   Medido en el navegador el 04/09/2026 sobre /apercu-premium/,no supuesto. La maqueta
   era un HTML en blanco; aquí debajo hay un tema y 58 hojas de estilo,y tres reglas
   suyas se cuelan en los componentes:

     · `ol li,ul li{ padding: var(--anita-g-li-inner) }`  → los tiles son <li> y salían
       con 6px 0 6px 3px,que descuadra el carrusel.
     · `:where(figure){ margin: 0 0 1em }`                 → 17 px de más bajo cada card.
     · el <button> del tema con `padding: var(--anita-g-button-inner)` (17px 32px) →
       la paleta del carrusel medía **72 px de ancho en vez de 50**: con `box-sizing:
       border-box`,64 px de padding no caben en 50 px de ancho y el botón se ensancha.

   Ninguna lleva !important,así que basta con ganar por especificidad desde `.rp`.
   ══════════════════════════════════════════════════════════════════════════════════ */

:where(.rp) li{ padding:0; }
/* ⚠️ La figura CONSERVA su margen inferior por defecto (1em ≈ 17 px). Aquí había un
   `figure{margin:0}` y quitaba justo el aire que la maqueta aprobada tiene bajo cada foto
   de capítulo: medido,40 px arriba y 17 abajo en la maqueta,40 y 0 con el reset puesto.
   El tema declara lo mismo que el navegador (`:where(figure){margin:0 0 1em}`),así que no
   hay nada que neutralizar. */

/* ⚠️ AQUÍ HABÍA UN `.rp button{ padding:0; border:0; background:none; font:inherit }` Y
   SE COMIÓ SUS PROPIOS COMPONENTES. `.rp button` vale (0,1,1) y `.rp-paddle` (0,1,0),así
   que el reset ganaba al componente: las paletas del carrusel y el botón de pausa del
   vídeo se quedaron transparentes y de 6 px. Es `error_regla_global_pisa_el_cap_del_componente`
   otra vez,esta vez dentro de mi propio sistema y contra mi propio CSS.
   La versión que funciona nombra los dos botones que existen,en vez de todos: neutraliza
   lo del tema sin tocar nada de lo que el componente declara. */
.rp-paddle,.rp .rp-pp{ padding:0; border:0; font:inherit; }

/* ⚠️ `RufinoGlifos` SE CONSERVA, Y VA DELANTE A PROPÓSITO.
   No es una fuente de texto: es una familia de respaldo con `unicode-range` acotado a
   símbolos y flechas (rufino-composicion-s400.php), para que ✕ ☀ ☾ ★ → ‹ › no salgan
   como cuadraditos. No toca ni una letra latina. Nuestros enlaces terminan en « › » y la
   FAQ abre con «+», así que quitarla de la pila rompería justo esos caracteres. */
/* ⚠️ AQUÍ ESTUVO EL FALLO QUE DESCOLOCÓ LA PÁGINA ENTERA.
   Puse `RufinoGlifos` DELANTE en los titulares para conservar los símbolos, copiando lo que
   hace el sitio. Resultado medido contra la maqueta: el statement «Il n'y a pas de deuxième
   prise.» pasó de **1 línea de 883 px en Oswald** a **2 líneas de 1 050 px**, y con él se
   descolocó el ritmo de toda la página — 1 843 px más alta que la maqueta que Pablo aprobó.
   Los titulares van en Oswald, como la maqueta y como dice el spec §2.2. RufinoGlifos se
   queda solo donde de verdad hace falta: los símbolos « › » y el «+» de la FAQ. */
.rp{ font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; }
:where(.rp) p,.rp li{ font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; }
.rp .rp-h1,.rp .rp-h2,.rp .rp-h3,.rp .rp-statement,.rp .rp-label,.rp .rp-num,.rp summary,.rp .rp-tile__title{
  font-family:Oswald,"Barlow Condensed","Arial Narrow",sans-serif;
}
/* los símbolos, y solo ellos */
.rp .rp-link::after,.rp summary::after,.rp .rp-router a::after{
  font-family:"RufinoGlifos",Oswald,sans-serif;
}

/* ── El revelado al scroll solo se activa si el JavaScript está vivo ────────────────
   `[data-rp-reveal]` empieza en `opacity:0` y lo enciende el observador. Si el JS no
   llega —un 404, un bloqueador, un error— la página entera se quedaría invisible y en
   blanco, que es el peor fallo posible y no da la cara: el HTML responde 200.
   Por eso la regla que oculta cuelga de `data-rp-js`, un atributo que pone el propio
   JS al arrancar. Sin JS no hay animación, pero se ve todo. */
.rp[data-rp-js] [data-rp-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--rp-ease), transform .6s var(--rp-ease); }
.rp[data-rp-js] [data-rp-reveal].in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){.rp[data-rp-js] [data-rp-reveal]{ opacity:1; transform:none; transition:none; }}

/* Los dos <button> del sistema, con el peso suficiente para que el tema no los ensanche.
   El tema declara `width:auto`, `display:inline-block` y su propio fondo para los botones,
   y su selector pesa lo mismo o más que `.rp-paddle` a secas: la paleta salía de 72 px y
   transparente, y el botón de pausa de 84. Repetir el contenedor sube la especificidad a
   (0,2,0) y gana sin recurrir a !important — que es lo que ha llenado este sitio de 852. */
.rp .rp-paddle{ padding:0; box-sizing:border-box; width:50px; height:130px; display:grid; place-items:center; background:var(--rp-card); border-radius:12px; }
.rp .rp-pp{ padding:0; box-sizing:border-box; width:56px; height:56px; display:grid; place-items:center; background:rgba(0,0,0,.55); border-radius:50%; }

/* Y el media query que las oculta en móvil,con el MISMO peso que la regla de arriba.
   Sin esto,`.rp .rp-paddle{display:grid}` (0,2,0) gana a `@media{.rp-paddle{display:none}}`
   (0,1,0) y las paletas salían en el móvil,donde el carrusel se desliza con el dedo.
   Subir la especificidad de un componente obliga a subirla también en sus excepciones:
   es la tercera vez hoy que este mismo descuido muerde. */
@media(max-width:1100px){ .rp .rp-paddle{ display:none; } }


/* ══════════════════════════════════════════════════════════════════════════════════
   LO QUE SE VE AL MIRAR LA PÁGINA,Y NO SALE EN NINGUNA MEDIDA
   Las 10 medidas del spec cuadraban y la página estaba mal. Esto es lo que Pablo vio.
   Estas cuatro reglas son las únicas del fichero que salen de `.rp`,y pueden hacerlo
   porque esta hoja SOLO se encola en las páginas del sistema premium (ver el mu-plugin).
   ══════════════════════════════════════════════════════════════════════════════════ */

/* 1 · El tema imprime el título de la página como <h1> encima del contenido,así que la
      página tenía DOS <h1>: «Aperçu premium · mariages» y el del hero. Además de romper
      el SEO,se lee como un encabezado de blog sobre un diseño que no lo es. */
.anita-page-title,.anita-single-page-header{ display:none; }

/* 2 · Los titulares iban en MAYÚSCULAS y la decisión de Pablo (Q26) es que vayan EN FRASE:
      «es lo que más Apple se nota y lo que más quita bruto». El texto ya está escrito en
      frase en el HTML; era el tema quien lo transformaba. */
.rp .rp-h1,.rp .rp-h2,.rp .rp-h3,.rp .rp-statement,.rp .rp-tile__title,.rp summary{ text-transform:none; letter-spacing:-.01em; }

/* 3 · El hero y las secciones estaban encajonados en el contenedor del tema (1 280 px con
      márgenes), cuando este sistema es de sección a sangre y contenido de 1 260 centrado.
      ⚠️ AQUÍ HABÍA `.rp{ width:100vw; margin-inline:calc(50% - 50vw); }` y SE QUITÓ el 04/09 por la
      tarde (revisión Fable). Medido: `.rp` salía de **1 440 px sobre un viewport útil de 1 434**
      (100vw cuenta la barra de scroll): todo el sistema 3 px corrido a la izquierda y 3 px cortados a
      la derecha —hasta 8 px en Windows. Y no hacía falta: la regla 5 ya deja `div.anita-container`
      sin `max-width`, y los cinco contenedores del tema hasta `main` tienen padding 0, así que `.rp`
      ocupa el ancho entero por sí solo. Verificado: `.rp` = 1 434 = clientWidth, left 0. */

/* 4 · La etiqueta de sección y el overline sí van en mayúsculas: es lo que el spec §2.2
      reserva para ellas, y lo que las distingue del titular. */
.rp .rp-ov{ text-transform:uppercase; letter-spacing:.12em; }

/* 5 · El hueco negro de 240 px entre el nav y el hero.
      No era del sistema: `div.anita-container` —cinco niveles por encima— lleva
      `padding-top:240px` para dejar sitio al header. En una página de secciones a sangre eso
      deja una banda negra antes de la primera imagen. Solo se anula en las páginas premium,
      que son las únicas donde se carga esta hoja; el nav flota sobre el hero, como en Apple. */
.anita-container{ padding-top:0; max-width:none; }

/* 6 · Los carruseles empezaban pegados al borde izquierdo (primera card en x = −3).
      Y la culpa era MÍA otra vez: `.rp ul{padding:0}` (0,1,1) del reset le gana a
      `.rp-track{padding-inline:var(--rp-gutter)}` (0,1,0),así que los quitaba el margen que
      los alinea con el contenido de 1 260. Tercera vez hoy con el mismo patrón. */
.rp .rp-track{ padding-inline:var(--rp-gutter); scroll-padding-inline:var(--rp-gutter); }

/* El texto corrido, con peso suficiente para que el sitio no lo capture.
   `body,p,li{font-family:"RufinoGlifos",Montserrat,…}` del tema vale (0,0,1) y va después que
   el reset del sistema, así que se quedaba con los párrafos: el cuerpo de capítulo pasaba de
   **3 líneas en Montserrat (88 px)** a **2 líneas (59 px)**, y con eso se encogían tres
   secciones enteras respecto a la maqueta aprobada. */
.rp p, .rp li, .rp .rp-chapbody, .rp .rp-body, .rp .rp-st, .rp .rp-pos,
.rp .rp-small, .rp .rp-tag17, .rp .rp-price, .rp .rp-note{
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
}

/* La figura de capítulo ocupa el ancho del contenido, no el de su foto.
   Medido contra la maqueta: `.rp-media` salía de **683 px** —el ancho natural de una foto
   vertical— en vez de 1 260, y con `aspect-ratio:1260/680` eso la dejaba en 369 px de alto
   en lugar de 680. Dos capítulos perdían 135 y 127 px de imagen, que es de donde salía casi
   toda la diferencia de ritmo con la maqueta. */
.rp .rp-media, .rp .rp-media--one{ width:100%; }
.rp .rp-media img, .rp .rp-media--one img{ width:100%; }

/* La tabla comparativa, con peso para que el tema no la comprima.
   Las reglas de la tabla venían en la maqueta como selectores de elemento (`th,td`), así que
   al devolverles la especificidad original quedaron en (0,0,1) — indefensas frente al
   `padding:10px 20px` que el tema pone a las celdas. La tabla salía **97 px más baja** que la
   maqueta, con las filas apretadas. Es la misma trampa que los botones: el reset por elemento
   protege del tema en un HTML en blanco, pero aquí no basta. */
.rp .rp-cmp th, .rp .rp-cmp td, .rp table th, .rp table td{ padding:16px 18px; vertical-align:top; }
.rp table td{ font-size:16px; }
.rp .rp-cmp th:first-child, .rp .rp-cmp td:first-child, .rp table th:first-child, .rp table td:first-child{
  font-size:15px; font-weight:400; width:230px;
}

/* ── La foto del hero llega hasta arriba, sin banda negra ──────────────────────────
   Pablo, 04/09: «la foto del hero debería llegar hasta arriba y no dejar una banda negra».
   El hueco no es del sistema: el tema reserva sitio para el nav fijo entre `main.anita-main`
   y su contenido. Medido en el navegador: **120 px** desde 601 px de ancho, **60 px** por
   debajo (comprobado a 375, 480, 600, 768, 900 y 1200).
   El nav es `position:fixed`, mide 140 px y **tiene el fondo transparente**, así que puede
   flotar sobre la foto como en Apple sin tapar nada: con el hero subido, el H1 queda a 306 px
   y el nav termina en 140. Verificado que no lo pisa. */
.rp{ margin-top:-120px; }
@media(max-width:767px){ .rp{ margin-top:-60px; } }


/* ══════════════════════════════════════════════════════════════════════════════════
   REVISIÓN DE FABLE · 04/09/2026 (tarde) · lo que se veía mal y ninguna medida atrapaba
   Todo medido en el navegador sobre /apercu-premium/ a 1 434 (útil) y a 375, con
   getComputedStyle y getBoundingClientRect, no supuesto. Cada bloque dice qué se veía,
   qué regla del tema lo causaba (con su especificidad) y con qué peso se le gana.
   Regla de la casa (§24 C bis, trampa 1): el tema se vence con `.rp <elemento>` (0,1,1) o
   `.rp .rp-x` (0,2,0); nunca con un reset de elemento suelto ni con !important.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* 1 · VIÑETAS EN LOS CARRUSELES Y EN LA BARRA DE CAPÍTULOS.
      Cada card de carrusel y cada capítulo es un <li>, y el tema declara
      `ul li{ list-style: var(--anita-li-style) }` y `ol li, ul li{ padding: 6px 0 6px 3px; margin:… }`
      (0,0,2). El reset `:where(.rp) li` (0,0,1) perdía: cada card llevaba un punto encima a la
      izquierda, la barra de capítulos se leía «Points forts • Le jour J • Le film», y los tiles
      medían 271 de contenido en vez de 274 (los 3 px de padding-left). */
.rp ul li{ list-style:none; padding:0; margin:0; }
.rp ol li{ padding:0; margin:0; }                 /* las notas al pie conservan su numeración */

/* 2 · MAYÚSCULAS DEL TEMA EN TODO LO QUE NO SE HABÍA NOMBRADO.
      `h2{ text-transform: var(--anita-t-h2--tt) }` y `h3{…}` (0,0,1). La regla 2 de arriba solo
      cubría `.rp-h1/.rp-h2/.rp-h3/.rp-statement/.rp-tile__title/summary`, y `.rp-tile__title` no
      existe en el HTML: salían en MAYÚSCULAS la etiqueta de capítulo («LE JOUR J», «CE QU'ILS EN
      DISENT»), los títulos de los tiles («MARIAGE CIVIL»), los de las razones y los del banner.
      El spec §2.2 y la decisión Q26 dicen frase; la maqueta aprobada iba en frase. */
.rp h2, .rp h3, .rp .rp-label{ text-transform:none; letter-spacing:normal; }

/* 3 · LA TABLA COMPARATIVA SE LEÍA COMO UNA TABLA DE WORDPRESS.
      Tres cosas del tema: `table tr:nth-child(2n+1) td{ background:… }` (cebra, 0,1,3), un reset
      que dejaba las celdas sin línea inferior (`0px none` medido), y el color de los valores
      heredado en gris. La maqueta: sin cebra, una línea `--rp-line` por fila, valores en `--rp-tx`
      y solo la primera columna en gris. Y en móvil la primera columna fija ocupaba 230 de 335 px:
      quedaban 105 px para leer los valores. */
.rp .rp-cmp th, .rp .rp-cmp td{ background:transparent; border:0; border-bottom:1px solid var(--rp-line); color:var(--rp-tx); }
.rp .rp-cmp thead th{ background:var(--rp-card); vertical-align:bottom; }
.rp .rp-cmp th:first-child, .rp .rp-cmp td:first-child{ background:var(--rp-card); color:var(--rp-tx2); }
.rp .rp-cmp tbody tr:last-child td{ border-bottom:0; }
.rp .rp-cmp tr.rp-price td{ color:var(--rp-tx); }
.rp .rp-cmp tr.rp-price td:first-child{ color:var(--rp-tx2); }
@media(max-width:760px){
  .rp .rp-cmp th:first-child, .rp .rp-cmp td:first-child{ width:132px; min-width:132px; font-size:13px; padding-inline:14px; }
  .rp .rp-cmp table{ min-width:760px; }
}

/* 4 · LA CITA DE CÉCILE SALÍA EN UNA CAJA GRIS CON EL AVISO DE reCAPTCHA DENTRO.
      Dos causas. El tema pone a todo <blockquote> `padding: var(--anita-g-quote-inner)` (40 px) y
      un fondo #212224. Y la atribución iba en un <footer>: un script del sitio
      (`rfp4-recaptcha-note`) cuelga el aviso «Ce site est protégé par reCAPTCHA…» de TODOS los
      <footer> de la página, así que aparecía dentro de la cita. El HTML pasa a <cite>, que es lo
      que corresponde a una atribución, y el blockquote vuelve a ser texto sobre el fondo. */
.rp blockquote{ padding:0; margin:48px auto 0; background:none; border:0; box-shadow:none; quotes:none; }
.rp blockquote::before, .rp blockquote::after{ content:none; }
.rp blockquote cite{ display:block; margin-top:12px; font-style:normal; }

/* 5 · LA BARRA DE CAPÍTULOS NO PUEDE SER PEGAJOSA EN ESTE SITIO, Y SE DEJA DE FINGIR.
      `position:sticky; top:64px` no hacía nada: `main.anita-main` lleva `overflow:hidden` (tema) y
      un ancestro con overflow distinto de visible es el contenedor de scroll del sticky, que aquí
      no scrollea. Y si se forzara, chocaría con el nav, que aquí no es una barra sino una
      píldora flotante (fixed, 140 px transparentes, la cápsula de 45 a 95 px): la barra quedaría
      debajo de la cápsula, con los enlaces detrás del cristal. El nav no se toca (orden de Pablo),
      así que la barra va en flujo bajo el hero, como índice de la página. Spec §3.3 actualizado. */
.rp .rp-chap{ position:relative; top:auto; z-index:auto; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* 6 · EL OVERLINE DEL HERO PESABA 300.
      No tenía peso propio y heredaba el 300 del cuerpo. En la maqueta Google Fonts solo servía
      Oswald 400/500, así que ese 300 se pintaba como 400; aquí Oswald es variable y el 300 sale
      de verdad: más fino que lo aprobado, y sobre una foto clara casi desaparece. */
.rp .rp-hero .rp-ov{ font-weight:400; }

/* 7 · LA LEYENDA DE LAS CARDS GRANDES CAÍA SOBRE LAS CARAS.
      En 3 de las 5 «Points forts» (el novio en el pasillo, el beso a la abuela, el beso de la
      pareja) la leyenda de 28 px a 48/48 pisaba una cara; en móvil, con 300 px de ancho, las
      cinco. Apple compone las fotos para el texto; nosotros tenemos las fotos que tenemos.
      Dos cosas: un velo suave arriba (o abajo) para que el texto lea siempre, y un modificador
      `rp-hlcard--bottom` que baja la leyenda a la esquina inferior izquierda en las cards cuyo
      aire está abajo. La foto no se toca: solo el sitio del texto. */
.rp .rp-hlcard::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(0,0,0,0) 36%); }
.rp .rp-hlcard figcaption{ z-index:2; }
.rp .rp-hlcard--bottom::before{ background:linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 40%); }
.rp .rp-hlcard--bottom figcaption{ top:auto; bottom:48px; }
.rp .rp-hlcard .rp-pp{ z-index:2; }
@media(max-width:760px){
  .rp .rp-hlcard--bottom figcaption{ bottom:28px; right:28px; }           /* que no monte sobre el botón de pausa */
  .rp .rp-hlcard--bottom .rp-pp{ bottom:auto; top:20px; }
}

/* 8 · EL BANNER DOBLE: LA FOTO OCUPA LA MITAD INFERIOR, A SANGRE.
      Spec §3.7 (Apple `BannerCard_twoUp`): texto centrado arriba y «la imagen en la mitad
      inferior». La maqueta la dejaba como una caja de 540 × 220 con 40 px de margen alrededor,
      y además `margin-top:auto` no empuja nada dentro de un grid con `align-content:start`: la
      caja quedaba pegada al botón y con 51 px de fondo vacío debajo. La card pasa a flex para que
      el auto-margen funcione, y la figura llega hasta los bordes inferior y laterales con el
      radio de la card. */
.rp .rp-two article{ display:flex; flex-direction:column; align-items:center; padding-bottom:0; }
.rp .rp-two article > .rp-btn{ margin-bottom:8px; }
.rp .rp-two .rp-fig{ margin:auto -40px 0; width:calc(100% + 80px); height:260px; border-radius:0 0 var(--rp-radius) var(--rp-radius); overflow:hidden; }
.rp .rp-two .rp-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){ .rp .rp-two .rp-fig{ height:220px; margin-top:24px; } }

/* 9 · LAS ANCLAS DE LA BARRA DE CAPÍTULOS SALTAN A SECO.
      `html{scroll-behavior:auto}` en el sitio. Apple desliza. Fuera de `.rp` porque el scroll es
      del documento; admisible porque esta hoja solo se carga en las páginas premium, y
      `prefers-reduced-motion` lo devuelve a seco. */
html{ scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* 10 · LA PÁGINA DE DESTINO ES v6, Y v6 METE TRES COSAS MÁS EN EL SISTEMA.
      `/mariages/` (6112) y `/cgv/` llevan `body.rfv6-page` (meta `_rfv6_active=1`): otra plantilla
      (`main.rfv6-main`), otro footer (`footer.rf-footer`) y dos hojas más. La vista previa 7044 NO
      lo llevaba, así que enseñaba otro footer (el de `rufino-footer-services`) y un envoltorio que
      en `/mariages/` no existe. El 04/09 por la tarde se le puso el meta a la 7044 para que la
      vista previa sea la misma plantilla que la página de destino, y salieron estas tres, medidas
      con el escáner de reglas del navegador (`el.matches(rule.selectorText)`):
        · `rf-s400`: `.rfv6-main h2, .rfv6-main h3{ font-family: RufinoGlifos, Oswald… !important }`
          → RufinoGlifos delante en todos los h2/h3 del sistema (trampa 4 otra vez), y con
          !important, que solo se gana con !important. Es la ÚNICA excepción de esta hoja, y esta
          es la razón.
        · `rfv6-runtime-offset`: `body.rfv6-page main h1, … h2, … h3{ text-transform:uppercase;
          letter-spacing:normal }` (0,2,2) → mayúsculas otra vez y se pierde el tracking de los
          titulares. Se gana con (0,3,x).
        · `main.rfv6-main` NO reserva los 120 px que reservaba la plantilla por defecto: el margen
          negativo del hero (reglas de arriba) cortaba 120 px de foto por arriba y subía el H1 a 253.
      Medido antes/después contra las alturas de sección de la plantilla por defecto. */
/* (0,1,2) y no (0,1,1): la regla de rf-s400 pesa (0,1,1) con !important y se imprime DESPUÉS de esta
   hoja, así que a igual peso ganaba ella. Medido: con `.rp h2` seguía saliendo RufinoGlifos. */
main .rp h2, main .rp h3{ font-family:Oswald,"Barlow Condensed","Arial Narrow",sans-serif !important; }
body.rfv6-page main .rp h1, body.rfv6-page main .rp h2, body.rfv6-page main .rp h3{ text-transform:none; }
body.rfv6-page main .rp .rp-h1{ letter-spacing:-.01em; }
body.rfv6-page main .rp .rp-h2{ letter-spacing:-.005em; }
body.rfv6-page main .rp .rp-tile h3, body.rfv6-page main .rp .rp-reason h3, body.rfv6-page main .rp .rp-two h3, body.rfv6-page main .rp .rp-label{ letter-spacing:normal; }
body.rfv6-page .rp{ margin-top:0; }
@media(max-width:767px){ body.rfv6-page .rp{ margin-top:0; } }
/* v6 pinta todo <a> sin clase con `--rf-link`; las cards de prueba y el media del tile son <a>. */
.rp .rp-proof a, .rp .rp-tile__media{ color:inherit; }
/* Y la cuarta de v6, la que más descolocaba: `rfv6-runtime-offset` pone
   `body.rfv6-page main p{ margin:0 0 1em }` (0,2,2), que le gana al reset del sistema y añadía
   79 px bajo cada statement, 21 bajo cada cuerpo de capítulo y 17 bajo cada línea de tile: los
   capítulos salían 68 px más altos que en la maqueta, los tiles 34 y el banner 32. Solo se anula
   el margen INFERIOR, a (0,2,3): los componentes espacian con margin-top, y así no se les pisa. */
body.rfv6-page main .rp p{ margin-bottom:0; }
/* La misma regla de v6 (0,2,2) también le gana a los dos únicos <p> del sistema que espacian
   con margin-top a (0,2,0): la fila de enlace bajo cada capítulo (32 px) y la nota bajo cada
   carrusel (22 px). Medido: salían a 0 y cada capítulo perdía 32 px, cada gama 22. */
body.rfv6-page main .rp .rp-linkrow{ margin-top:32px; }
body.rfv6-page main .rp .rp-note{ margin-top:22px; }


/* ══════════════════════════════════════════════════════════════════════════════════
   REVISIÓN DE PABLO · 04/09/2026 (noche) · dos alineaciones
   «Los botones Estimer y En savoir plus no están bien alineados con cada columna.
    Y el texto de abajo que empieza "Sur L'Essentiel..." tampoco está centrado en el eje.»
   ══════════════════════════════════════════════════════════════════════════════════ */

/* 1 · Los botones, centrados bajo SU columna.
   Los botones ya vivían dentro de la tabla (en su `<td>`), así que la celda era correcta;
   lo que fallaba era el contenedor: `.rp-btnrow{justify-items:start}` con el ancho del
   contenido (178 px) lo pegaba al borde izquierdo de la celda. Y como las columnas tienen
   anchos distintos (214, 280, 244, 290), el desvío era distinto en cada una: medido
   **−35, −67, −49 y −72 px** respecto al centro de su columna. Ocupando el ancho de la
   celda y centrando dentro, cada botón cae en el eje de su columna sea cual sea su ancho. */
.rp .rp-btnrow{ width:100%; justify-items:center; }

/* 2 · Las notas al pie, centradas en el eje de verdad.
   El bloque de 840 px sí estaba centrado, pero dentro llevaba `padding-left:20px` para los
   marcadores de la lista —solo a la izquierda— y el texto heredaba `text-align:start`.
   Resultado medido: el texto quedaba con su centro en **667 px, 53 px a la izquierda** del
   eje de la página (720). El padding pasa a ser simétrico y el texto se centra, que es lo
   que pide el spec para todo lo que es lectura (decisión de Pablo del 04/09). */
.rp .rp-fn ol{ padding-inline:20px; text-align:center; list-style-position:inside; }

/* Las notas al pie de sección, centradas en el eje.
   `.rp-note` llevaba `max-width:840px` y **ningún `margin-inline:auto`**: el párrafo se
   quedaba pegado al borde izquierdo de su contenedor. El `text-align:center` centraba el
   texto DENTRO de la caja, así que parecía centrado y no lo estaba — su centro caía en 510
   con el eje en 720. Lo vio Pablo, no la medición: yo había medido otro bloque (`.rp-fn`),
   que sí estaba bien.
   Barrido después: eran **tres** párrafos, no uno («Sur L'Essentiel…» −210 px, «Prix nets,
   TVA non applicable…» −300, «Album fabriqué à la main…» −300).
   ⚠️ Es el mismo error que en s416 dejó `.rf-pricing` desviado −112 px en ~20 páginas:
   **capar el ancho de un bloque sin centrarlo**. Al poner un `max-width`, va siempre con su
   `margin-inline:auto` — salvo que se quiera alineado a un lado, como el texto del hero. */
.rp .rp-note{ margin-inline:auto; }

/* …y con el peso suficiente para ganar a v6.
   `.rp .rp-note{margin-inline:auto}` (0,2,0) no bastaba: `body.rfv6-page main p{margin:0 0 1em}`
   vale **(0,2,2)** y su `margin` corto pone también los laterales a 0. Es la misma regla de v6
   que Fable neutralizó para el margen inferior — el shorthand se llevaba de paso el centrado.
   Con el selector completo, (0,3,2), gana sin recurrir a !important. */
body.rfv6-page main .rp .rp-note{ margin-inline:auto; }

/* ── s422 · 04/09/2026 · el mismo fallo que .rp-note, en sus dos hermanos ───────────
   Al montar /vos-questions/ el detector `revision_diseno.js` cazó `.rp-statement`
   **85 px fuera del eje**. Causa medida en el navegador, no supuesta: la regla de v6
   `body.rfv6-page main p{margin:0 0 1em}` (0,2,2) le gana a `.rp .rp-statement`
   (0,2,0), y su `margin` corto pone los laterales a 0, llevándose el centrado.
   Es exactamente la trampa 16c, que en s418 se cerró SOLO para `.rp-note`:
   `.rp-statement` y `.rp-chapbody` declaran igual `margin-inline:auto` y se quedaron
   con la bomba puesta. No se veía en /apercu-premium/ porque allí esos párrafos van
   en contenedores de su mismo ancho; asoma en cuanto uno cae en un `.rp-content`
   de 1 260 (que es lo que pasará en /mariages/).
   Regla: todo `<p>` del sistema con `max-width` va con su `margin-inline:auto`
   reafirmado a (0,3,2). Verificado antes/después con el detector. */
body.rfv6-page main .rp .rp-statement,
body.rfv6-page main .rp .rp-chapbody{ margin-inline:auto; }

/* ── s422 · cabecera de página sin hero ─────────────────────────────────────────────
   `/vos-questions/` es la primera página del sistema que no abre con un hero
   fotográfico: abre con overline + H1 + statement. El `.rp-h1` está definido para el
   hero, donde va alineado a la izquierda sobre la foto (spec §3.1), y el
   `.rp-statement` va centrado por definición. Juntos, sin foto, la cabecera quedaba
   con dos ejes distintos — visible en la captura a 375.
   `rp-sec--intro` centra los tres elementos para que compartan eje. Nombre comprobado
   antes de usarlo: 0 apariciones en themes/, mu-plugins/ y plugins/
   (`error_reutilizar_nombre_de_clase_existente`). */
.rp .rp-sec--intro .rp-ov,
.rp .rp-sec--intro .rp-h1{ text-align:center; }
.rp .rp-sec--intro .rp-h1{ max-width:var(--rp-statement); margin-inline:auto; }
body.rfv6-page main .rp .rp-sec--intro .rp-h1{ margin-inline:auto; }

/* ── s422 · el nav vuelve a leerse sobre el hero ────────────────────────────────
   La página anterior tenía un `<div class="rf-hero__scrim">` sobre la foto del hero.
   El hero premium no lo trae, y su foto (la novia de espaldas ante una cortina
   blanca) es casi blanca **justo arriba**, que es donde el nav fijo pinta el logo y
   el icono de menú en `rgb(230,230,230)`. Medido en móvil: se pierden los dos.
   El `::after` que ya existe oscurece **desde abajo** (donde va el texto), así que no
   cubre esto: hace falta el gradiente de arriba. Es la franja que reserva el tema
   para el nav (120 px en escritorio, 60 en móvil), con margen.
   No se toca el nav: el velo vive dentro de `.rp`. */
.rp .rp-hero__media::before{
  content:""; position:absolute; inset:0 0 auto 0; height:190px; z-index:1;
  background:linear-gradient(to bottom,rgba(14,14,16,.62) 0%,rgba(14,14,16,.28) 55%,rgba(14,14,16,0) 100%);
}
@media(max-width:760px){ .rp .rp-hero__media::before{ height:150px } }

/* ── s422 · etiqueta de formato en las tarjetas de gama ─────────────────────────
   El carrusel de `/mariages/` pasa de 4 tarjetas a 12, una por servicio del catálogo
   (orden de Pablo: «aquí me gustaría meter todos los servicios de mariages»). Antes
   los tres formatos de cada fórmula vivían detrás de `.rp-dots` — tres puntos de
   12 px que hay que descubrir y pulsar; ocho de los doce servicios no se veían.
   `.rp-fmt` ocupa el mismo sitio que ocupaban los puntos, así que la altura de la
   tarjeta no cambia (dots: margin-top 20 + height 12 = 32 px). Nombre comprobado
   antes de usarlo: 0 apariciones previas en themes/, mu-plugins/ y plugins/. */
.rp .rp-fmt{
  margin:20px 0 0; height:12px; line-height:12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rp-gold); text-align:center;
}

/* ── s438 · 08/09/2026 · dos bloques que se veían descolgados a la izquierda ────
   Pablo, con tres capturas: «algunos textos y botones no están centrados». El de
   precio se arregló en s436; estos dos son los que quedaban, y ninguno era un
   text-align mal puesto: era la CAJA la que no estaba donde parecía.

   1) `.rp-proof` declara `grid-template-columns:repeat(3,1fr)`. Con tres tarjetas
      llena la fila exacta (medido en `/mariages/`: 126..533, 553..959, 979..1386).
      Con DOS, la tercera columna se queda vacía y el par se va a la izquierda con
      427 px de hueco a la derecha, debajo de un rótulo centrado. `--2` hace dos
      columnas del MISMO ancho que tendrían siendo tres —(1260-40)/3— y las centra,
      así las tarjetas no engordan y la fila queda equilibrada.
      ⚠️ La regla móvil de `.rp-proof` (`grid-template-columns:1fr` bajo 760 px) es
      un selector, así que un `style=""` en línea se la comería y las dos tarjetas
      seguirían de 406 px en un móvil de 390. Por eso esto va aquí y con su propia
      copia de la regla móvil, no en el HTML.

   2) `.rp-inclus` no tenía NINGUNA regla: heredaba los 1 260 px del contenedor y su
      texto empezaba en el borde izquierdo. En `/mariages/` eso se lee bien porque
      cuelga de la tabla comparativa, igual de ancha. En las landings cuelga de un
      `.rp-statement` centrado de 1 050 px y se ve huérfana. `--centre` la lleva al
      ancho de lectura (--rp-body, el mismo que usan .rp-chapbody y .rp-note) y
      centra el bloque; el texto sigue alineado a la izquierda, que es como se lee
      una lista. `/mariages/` NO lleva la clase: allí el ancho completo es correcto. */
.rp .rp-proof--2{
  grid-template-columns:repeat(2,minmax(0,calc((var(--rp-content) - 40px) / 3)));
  justify-content:center;
}
@media(max-width:760px){ .rp .rp-proof--2{ grid-template-columns:1fr; } }

.rp .rp-inclus--centre{ max-width:var(--rp-body); margin-inline:auto; }

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE 11 · DENSIDAD Y HERO CINE · s439 · 08/09/2026
   ──────────────────────────────────────────────────────────────────────────────────
   POR QUÉ. Medido hoy en el navegador a 1 440 px, con el mismo script en las cuatro webs:
     · /lifestyle/portrait-express/ → 6,3 cajas y 1,0 iconos por cada 1 000 px de página;
       5 de sus 9 secciones sin una sola imagen; 2 853 px de padding = el 27 % del alto.
     · dima-artistry.com → 10,7 cajas y 10,0 iconos por 1 000 px · eurofirms.com → 9,5 y 6,6.
     · La home VIEJA de este sitio → 9,0 cajas. El rediseño bajó la densidad de lo que había.
   El aire de Apple (160/216) funciona sobre 64 imágenes por página; sobre 21 palabras y
   cero imágenes solo estira. Arriba se recortó la escala (~−30 %) y el aire (−33 %); aquí
   está el vocabulario gráfico que no existía y que sí tienen las dos webs de referencia.

   HERO CINE. Desmontado de dima-artistry.com el 08/09/2026: NO es WebGL (0 canvas,
   webgl=false) — es un vídeo de fondo a 100vh, cuatro capas de degradado, el texto abajo a
   la izquierda en 672 px, el titular a 96 px partido en dos y con la segunda mitad en
   degradado de marca con un brillo que la recorre. Todo eso se replica aquí con vídeo
   PROPIO (`<video>` local, no un iframe de YouTube: sin tercero, sin cookie, y ya tenemos
   los 4 vídeos de s400). No reabre la decisión Q27 («la intro WebGL desaparece»): esto no
   es WebGL.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── 11.1 · chips: la etiqueta pequeña que Dima pone en cada card ────────────────── */
.rp .rp-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rp .rp-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border:1px solid var(--rp-line);border-radius:980px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--rp-tx2);white-space:nowrap;line-height:1}
.rp .rp-chip--gold{border-color:rgba(201,154,72,.45);color:var(--rp-gold)}
.rp .rp-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ── 11.2 · barra de cifras (Dima: 50+ / 98 % / 25 ans · Eurofirms: 700M / 1.700) ── */
.rp .rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rp-line);border-block:1px solid var(--rp-line);max-width:var(--rp-content);margin-inline:auto}
.rp .rp-stats>div{background:var(--rp-bg0);padding:26px 22px;display:grid;gap:6px;align-content:start}
.rp .rp-bg1 .rp-stats>div{background:var(--rp-bg1)}
.rp .rp-stats b{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(25px,2.4vw,36px);line-height:1;color:var(--rp-gold);font-variant-numeric:tabular-nums}
.rp .rp-stats i{font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rp-tx2);font-weight:500}
.rp .rp-stats small{font-size:14px;font-weight:300;color:var(--rp-tx2);line-height:1.4}
@media(max-width:760px){.rp .rp-stats{grid-template-columns:repeat(2,1fr)}}

/* ── 11.3 · icono en cápsula, para cabeceras y listas ────────────────────────────── */
.rp .rp-ico{width:38px;height:38px;border:1px solid var(--rp-line);border-radius:50%;display:grid;place-items:center;flex:none}
.rp .rp-ico svg{width:17px;height:17px;stroke:var(--rp-gold);fill:none;stroke-width:1.5;margin:0}
.rp .rp-ovi{display:inline-flex;align-items:center;gap:10px;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rp-gold)}
.rp .rp-ovi svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ── 11.4 · card con foto a sangre + meta (la rejilla de expertises de Dima) ─────── */
.rp .rp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-cm{background:var(--rp-card);border-radius:var(--rp-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .32s var(--rp-hover),background .32s var(--rp-hover)}
.rp .rp-cm:hover{transform:translateY(-4px);background:#1F1F22}
.rp .rp-cm__media{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--rp-cardd)}
.rp .rp-cm__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--rp-hover)}
.rp .rp-cm:hover .rp-cm__media img{transform:scale(1.04)}
.rp .rp-cm__body{padding:24px;display:grid;gap:10px;align-content:start}
.rp .rp-cm__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--rp-tx2)}
/* s466 · la meta se parte POR PARTES, no por palabras. Estrenando la card el 15/09 con
   «1 septembre 2026 · Maternité & Famille», la fecha se rompía en dos líneas y la
   categoría quedaba flotando a la derecha con un hueco en medio. Cada trozo en su
   <span> con `nowrap` y el conjunto con `wrap`: si no cabe, baja la categoría entera. */
.rp .rp-cm__meta>span{white-space:nowrap}
/* Y a 480 el separador se va: cuando la meta parte en dos líneas, el «·» se queda
   colgando al final de la primera y parece un descuido. Sin él, fecha y categoría
   son dos líneas limpias. Visto en la captura a 375, no en el CSS. */
@media(max-width:480px){.rp .rp-cm__meta i{display:none}.rp .rp-cm__meta{gap:2px 9px}}
.rp .rp-cm__meta i{font-style:normal;color:var(--rp-gold)}
.rp .rp-cm h3{font-family:Oswald,sans-serif;font-weight:500;font-size:22px;line-height:26px}
.rp .rp-cm p{font-size:15px;font-weight:300;color:var(--rp-tx2);line-height:1.5}
@media(max-width:900px){.rp .rp-grid3,.rp .rp-grid2{grid-template-columns:1fr}}
/* s466 · EL GUTTER QUE LES FALTABA. Al estrenar `rp-cm` el 15/09 se vio a 375: las
   rejillas llevaban `max-width` y `margin-inline` pero NINGÚN `padding-inline`, así que
   las cards salían a 375 clavados —pegadas a los dos bordes— mientras el resto de la
   página respiraba a 335. Mismo par de reglas que `.rp-content`, para que el carril sea
   el mismo en toda la página. Estaba así desde que se escribió la pieza; lo destapó
   montarla, no leerla. */
.rp .rp-grid3,.rp .rp-grid2{padding-inline:20px}
@media(min-width:1300px){.rp .rp-grid3,.rp .rp-grid2{padding-inline:0}}

/* ── 11.5 · dos mitades con foto (el hero partido de Eurofirms) ──────────────────── */
.rp .rp-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-split>a{position:relative;min-height:360px;border-radius:var(--rp-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.rp .rp-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--rp-hover)}
.rp .rp-split>a:hover img{transform:scale(1.03)}
.rp .rp-split>a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.93) 0%,rgba(14,14,16,.45) 55%,rgba(14,14,16,.10) 100%)}
.rp .rp-split__t{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.rp .rp-split__t h3{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(22px,2vw,29px);line-height:1.1}
.rp .rp-split__t p{font-size:15px;font-weight:300;color:rgba(230,230,230,.82);line-height:1.5}
@media(max-width:900px){.rp .rp-split{grid-template-columns:1fr}}

/* ── 11.6 · hero cine (dima-artistry.com, medido el 08/09/2026) ──────────────────── */
.rp .rp-hero--cine{min-height:min(92vh,940px)}
.rp .rp-hero--cine .rp-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s linear}
.rp .rp-hero--cine .rp-hero__media video.on{opacity:1}
/* Las cuatro capas de Dima en un solo degradado: cortina arriba para que el nav se lea,
   apertura entre el 22 y el 45 % (ahí va la foto), y cierre casi opaco abajo, que es donde
   cae el texto. Medido en su `bg-gradient-hero`: .4 / .2 al 30 % / .6 al 70 % / .95. */
.rp .rp-hero--cine .rp-hero__media::after{background:linear-gradient(180deg,rgba(14,14,16,.86) 0%,rgba(14,14,16,.34) 22%,rgba(14,14,16,.22) 45%,rgba(14,14,16,.66) 74%,rgba(14,14,16,.96) 100%)}
.rp .rp-hero--cine .rp-hero__body{max-width:calc(720px + 2*var(--rp-gutter));padding-bottom:clamp(56px,7vw,104px)}
.rp .rp-hero--cine .rp-h1{font-size:clamp(40px,5.9vw,86px)}
/* El titular partido: la segunda mitad en degradado de marca con un brillo que la recorre.
   Es el `text-gradient-orange` + `@keyframes shimmer` de Dima, en dorado. */
.rp .rp-shine{background:linear-gradient(110deg,#B98833 0%,var(--rp-gold) 22%,#F2DCAF 42%,var(--rp-gold) 62%,#B98833 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rp-shine 7s linear infinite}
@keyframes rp-shine{0%{background-position:180% center}100%{background-position:-180% center}}
/* Grano de película (Dima: `film-grain`). SVG en línea, 0 peticiones, apenas visible. */
.rp .rp-grain::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── 11.7 · entrada escalonada de los hijos (Dima: translateY 40/20 por hijo) ────── */
/* Cuelga de `data-rp-js` por lo mismo que el revelado del bloque 8: sin JS no oculta nada. */
/* 🔴 CORREGIDO el 08/09/2026, con la home publicada y SIN TEXTO EN EL HERO.
   La regla decia `.rp-stagger>*{opacity:0}` y solo la encendia `[data-rp-reveal].in`. Un
   `.rp-stagger` SIN contexto de revelado —el hero de la home— se quedaba invisible para
   siempre: cinco elementos a opacity 0, incluidos el H1 y los dos botones. Y mis propias
   mediciones no lo veian porque yo inyectaba `opacity:1!important` antes de medir.
   Ahora **solo se oculta lo que alguien va a encender**: hace falta `[data-rp-reveal]` en el
   propio elemento o en un ancestro. Sin eso, no se toca. Falla en abierto, como el bloque 8. */
.rp[data-rp-js] [data-rp-reveal] .rp-stagger>*,
.rp[data-rp-js] .rp-stagger[data-rp-reveal]>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--rp-ease),transform .7s var(--rp-ease)}
.rp[data-rp-js] [data-rp-reveal].in .rp-stagger>*,
.rp[data-rp-js] .rp-stagger[data-rp-reveal].in>*{opacity:1;transform:none}
.rp[data-rp-js] .rp-stagger>:nth-child(2){transition-delay:.07s}
.rp[data-rp-js] .rp-stagger>:nth-child(3){transition-delay:.14s}
.rp[data-rp-js] .rp-stagger>:nth-child(4){transition-delay:.21s}
.rp[data-rp-js] .rp-stagger>:nth-child(5){transition-delay:.28s}
.rp[data-rp-js] .rp-stagger>:nth-child(6){transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  .rp[data-rp-js] .rp-stagger>*{opacity:1;transform:none;transition:none}
  .rp .rp-shine{animation:none}
  .rp .rp-hero--cine .rp-hero__media video{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE 12 · LENGUAJE VISUAL · s439 · 08/09/2026
   Orden de Pablo: «habrá que poner más SVG, jugar más con los colores y cambios de
   colores, jugar con los cambios de tipografía en una misma frase… como en Dima».
   ──────────────────────────────────────────────────────────────────────────────────
   EL DISPOSITIVO DE DIMA, MEDIDO EN SU DOM EL 08/09/2026:
     el titular es UN `<h2>` partido en dos `<span>` del mismo tamaño (60 px) y la misma
     familia (Playfair Display 700). El primero va en el color de texto; el segundo lleva
     `italic` + `linear-gradient(135deg,#FF791A,#F5AD47)` con `background-clip:text` y
     `color:transparent`. «Nos *Expertises*» · «Deux fondateurs, une *exigence*» ·
     «Donnons vie à votre *vision*». Eso es todo: mismo cuerpo, cambia estilo y color.
   NUESTRA VERSIÓN. La marca sigue siendo Oswald + Montserrat + dorado #C99A48. Lo que se
   añade es UNA itálica para el acento, porque el efecto no existe sin ella: ni Oswald ni
   Montserrat tienen cursiva alojada, y una sintética sale torcida. Playfair Display
   Italic 600 — la misma que usa Dima — alojada aquí (latin 23 KB + latin-ext 14 KB,
   descargada de Google el 08/09), y solo en las páginas del sistema, como Montserrat 500.
   ⚠️ ES UN TERCER TIPO EN LA MARCA. Va en el acento y nada más: nunca en un párrafo, nunca
   en un botón, nunca en el nav ni en el footer. Si Pablo lo quiere fuera, se cambia el
   `font-family` de `.rp-em` por Oswald y el resto del sistema no se entera.
   ══════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'PlayfairRP';font-style:italic;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/fuentes/playfair-italic600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PlayfairRP';font-style:italic;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/fuentes/playfair-italic600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── 12.1 · el acento: mitad de la frase en itálica y en degradado dorado ────────── */
/* Sin degradado por defecto: si el navegador no soporta `background-clip:text`, el texto
   seguiría ahí en dorado en vez de volverse invisible. El degradado entra en el @supports. */
.rp .rp-em{font-family:'PlayfairRP',Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;font-size:.97em;letter-spacing:0;color:var(--rp-gold);padding-right:.05em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rp .rp-em{background:linear-gradient(115deg,#B0813040 0%,var(--rp-gold) 22%,#F2DCAF 48%,var(--rp-gold) 74%,#A9782C 100%);background-size:180% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
  /* `--plain` para cuerpos pequeños: el degradado sobre 15-17 px pierde contraste */
  .rp .rp-em--plain{background:none;-webkit-text-fill-color:var(--rp-gold);color:var(--rp-gold)}
}
/* el acento que además respira, solo en titulares grandes (h1/statement) */
.rp .rp-em--live{animation:rp-shine 9s linear infinite}
@media(prefers-reduced-motion:reduce){.rp .rp-em--live{animation:none}}

/* ── 12.2 · color: un tercer fondo y un halo dorado por sección ──────────────────── */
.rp .rp-bg2{background:#08080A}
.rp .rp-glow{position:relative;isolation:isolate}
.rp .rp-glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 62% at 50% 0%,rgba(201,154,72,.11) 0%,rgba(201,154,72,.03) 42%,rgba(201,154,72,0) 68%)}
.rp .rp-glow--l::before{background:radial-gradient(90% 70% at 8% 12%,rgba(201,154,72,.13) 0%,rgba(201,154,72,0) 62%)}
/* filete con degradado, para cerrar o abrir sección sin meter una caja más */
.rp .rp-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent 0%,var(--rp-line) 16%,rgba(201,154,72,.55) 50%,var(--rp-line) 84%,transparent 100%)}

/* ── 12.3 · iconos: el sprite `<symbol>` que imprime rufino-premium.php ──────────── */
/* Un solo SVG oculto en el pie con todos los símbolos; cada uso es `<use href="#rpi-…">`.
   Cero peticiones y el color lo hereda de `currentColor`. Dima tiene 10 SVG por cada
   1 000 px de página; nosotros teníamos 1. */
.rp .rp-i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-.22em}
.rp .rp-i--s{width:14px;height:14px}
.rp .rp-i--l{width:26px;height:26px}
.rp .rp-i--gold{color:var(--rp-gold)}
.rp .rp-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* lista con icono: sustituye a la lista con viñeta de `ce qui est inclus` */
.rp .rp-ilist{display:grid;gap:14px;max-width:var(--rp-body);margin-inline:auto;text-align:left}
.rp .rp-ilist li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;font-weight:300;line-height:1.5}
.rp .rp-ilist li .rp-i{color:var(--rp-gold);margin-top:2px}

/* ── 12.4 · el color se mueve al pasar el ratón (Dima) ───────────────────────────── */
.rp .rp-cm{border:1px solid transparent}
.rp .rp-cm:hover{border-color:rgba(201,154,72,.30)}
.rp .rp-reason{border:1px solid transparent;transition:border-color .32s var(--rp-hover),background .32s var(--rp-hover)}
.rp .rp-reason:hover{border-color:rgba(201,154,72,.26);background:#1F1F22}
.rp .rp-chip{transition:border-color .32s var(--rp-hover),color .32s var(--rp-hover)}
.rp a:hover>.rp-chip,.rp .rp-cm:hover .rp-chip{border-color:rgba(201,154,72,.45);color:var(--rp-gold)}

/* ── 12.5 · hero cine: la capa de vídeo y su regla móvil · s439 · 08/09/2026 ─────── */
.rp .rp-hero--cine .rp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s linear;z-index:0}
.rp .rp-hero--cine .rp-hero__video.on{opacity:1}
@media(max-width:899px){
  /* En móvil manda la regla de `.rp-hero` (foto 3:4 y texto debajo) y el vídeo NO se
     descarga: son datos de alguien que va por 4G, y la foto ya cuenta lo mismo. */
  .rp .rp-hero--cine{min-height:0}
  .rp .rp-hero--cine .rp-hero__video{display:none}
  .rp .rp-hero--cine .rp-hero__body{padding-bottom:0}
}

/* ── 12.6 · la banda de cifras y la lista con icono · s439 · 08/09/2026 ──────────── */
/* La banda no lleva padding propio: sus celdas ya lo traen y sus líneas superior e
   inferior son las que la separan, como en Dima y en Eurofirms. */
.rp .rp-sec--band{padding-block:0}
.rp .rp-inclus.rp-ilist{max-width:var(--rp-body);margin-inline:auto;font-size:16px}
.rp .rp-inclus.rp-ilist li{margin:0}
.rp .rp-inclus.rp-ilist sup{color:var(--rp-gold)}

/* ── 12.7 · velo lateral del hero cine · s439 · 08/09/2026 ───────────────────────── */
/* Visto en la home publicada: el degradado vertical solo baja a .22 a media altura, y sobre
   la parte clara del vídeo el overline dorado y el titular blanco se perdían. Dima no tiene
   este problema porque su vídeo es oscuro; el nuestro no. Se añade un velo HORIZONTAL, más
   denso donde vive el texto (abajo a la izquierda), como capa aparte para no tocar el vertical. */
.rp .rp-hero--cine .rp-hero__body{position:relative}
.rp .rp-hero--cine .rp-hero__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(14,14,16,.88) 0%,rgba(14,14,16,.62) 28%,rgba(14,14,16,.22) 58%,rgba(14,14,16,.10) 100%)}
@media(max-width:899px){.rp .rp-hero--cine .rp-hero__media::before{background:none}}

/* ── 12.8 · 🔴 v6 ESTABA BORRANDO TODOS LOS ICONOS · s439 · 08/09/2026 ───────────── */
/* Pablo mandó una captura con los círculos de las tarjetas VACÍOS. El sprite estaba bien
   y los símbolos existían (bbox 21×18), pero el `<svg>` que los usa medía 0×0.
   La culpable es una regla EN LÍNEA del propio sitio, del bloque `rfv6-runtime-offset`:

     body.rfv6-page svg[aria-hidden="true"][focusable="false"]:not(.rf-icon){
       position:absolute!important; width:0!important; height:0!important;
       overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important }

   Es la limpieza de v6 para los SVG decorativos del tema, y exime solo a `.rf-icon`. Mis 22
   iconos llevan exactamente `aria-hidden="true" focusable="false"` —que es lo CORRECTO para
   un icono decorativo— así que los borraba todos. Se contrarresta aquí, acotado a `.rp`.
   ⚠️ Cualquier SVG decorativo que se añada al sistema necesita esta exención. */
body.rfv6-page .rp svg.rp-i[aria-hidden="true"][focusable="false"]{position:static!important;overflow:visible!important;clip:auto!important;clip-path:none!important;width:20px!important;height:20px!important}
body.rfv6-page .rp svg.rp-i--s[aria-hidden="true"][focusable="false"]{width:14px!important;height:14px!important}
body.rfv6-page .rp svg.rp-i--l[aria-hidden="true"][focusable="false"]{width:26px!important;height:26px!important}
body.rfv6-page .rp .rp-ico svg.rp-i[aria-hidden="true"][focusable="false"]{width:18px!important;height:18px!important}
/* el sprite sí tiene que seguir oculto */
body.rfv6-page .rp-sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE 13 · HERO CARRUSEL («rp-reel») · s439 · 08/09/2026
   Orden de Pablo: «ellos tienen hasta 5 vídeos o animaciones y se va viendo abajo en la
   barra cómo se va completando». Desmontado de dima-artistry.com el 08/09: cada diapositiva
   es media a sangre + overline + titular partido + una línea + dos CTA; abajo una barra de
   N segmentos numerados (01…05) donde el activo se rellena; en el centro, tres botones
   (anterior · pausa · siguiente) que aparecen al pasar el ratón.
   NUESTRO MATERIAL, medido el 08/09 en la mediateca: de los 10 vídeos solo tres son
   horizontales y ligeros — `portada-film-cecile-federico` (1280×720, 8 s, 1,1 MB),
   `portada-film-miguel-maria` (1280×720, 8 s, 1,4 MB) y `…reel-2` (1920×1080, 11,7 s,
   2,6 MB). Los demás son verticales o pesan 20-57 MB. Las diapositivas sin vídeo llevan foto.
   FALLA EN ABIERTO: sin JS se ve la primera diapositiva, en flujo. Solo cuando `data-rp-js`
   está puesto pasan a superponerse. Es la lección de `error_medi_con_el_css_que_tapaba_el_fallo`.
   ══════════════════════════════════════════════════════════════════════════════════ */

.rp .rp-reel{position:relative;overflow:hidden;isolation:isolate;background:var(--rp-bg0)}
.rp .rp-reel__slide{position:relative;min-height:min(92vh,940px);display:grid;align-items:end}
.rp .rp-reel__slide+.rp-reel__slide{display:none}          /* sin JS: solo la primera */
.rp[data-rp-js] .rp-reel__slide{position:absolute;inset:0;display:grid;opacity:0;pointer-events:none;transition:opacity .9s var(--rp-ease)}
.rp[data-rp-js] .rp-reel__slide:first-child{position:relative}
.rp[data-rp-js] .rp-reel__slide.on{opacity:1;pointer-events:auto}

.rp .rp-reel__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.rp .rp-reel__media img,.rp .rp-reel__media video{width:100%;height:100%;object-fit:cover;display:block}
.rp .rp-reel__media video{position:absolute;inset:0;opacity:0;transition:opacity .8s linear}
.rp .rp-reel__media video.on{opacity:1}
/* los dos velos de Dima: uno vertical (nav arriba, texto abajo) y uno lateral (texto izq.) */
.rp .rp-reel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,16,.86) 0%,rgba(14,14,16,.32) 22%,rgba(14,14,16,.20) 46%,rgba(14,14,16,.68) 76%,rgba(14,14,16,.96) 100%)}
.rp .rp-reel__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(14,14,16,.88) 0%,rgba(14,14,16,.60) 30%,rgba(14,14,16,.20) 60%,rgba(14,14,16,.06) 100%)}

.rp .rp-reel__body{position:relative;z-index:2;padding:clamp(48px,6vw,96px) var(--rp-gutter);padding-bottom:clamp(96px,10vw,150px);display:grid;gap:20px;max-width:calc(760px + 2*var(--rp-gutter));align-content:end}
.rp .rp-reel__body .rp-h1{font-size:clamp(36px,5.4vw,79px)}
.rp .rp-reel__body .rp-st{font-size:clamp(16px,1.35vw,18px);line-height:1.45;font-weight:400;color:rgba(230,230,230,.86)}

/* ── la barra de abajo: N segmentos numerados, el activo se rellena ──────────────── */
.rp .rp-reel__bar{position:absolute;left:0;right:0;bottom:clamp(22px,2.6vw,40px);z-index:4;display:flex;gap:20px;padding-inline:var(--rp-gutter);align-items:center}
.rp .rp-reel__seg{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.rp .rp-reel__line{flex:1;height:2px;background:rgba(230,230,230,.20);position:relative;overflow:hidden;border-radius:2px}
.rp .rp-reel__line b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rp-gold);display:block}
.rp .rp-reel__seg[data-estado="hecho"] .rp-reel__line b{width:100%}
.rp .rp-reel__seg[data-estado="activo"] .rp-reel__line b{animation:rp-relleno var(--rp-dur,7000ms) linear forwards}
.rp .rp-reel__seg[data-estado="parado"] .rp-reel__line b{animation-play-state:paused}
@keyframes rp-relleno{from{width:0}to{width:100%}}
.rp .rp-reel__num{font-family:Oswald,sans-serif;font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--rp-tx2);flex:none}
.rp .rp-reel__seg[data-estado="activo"] .rp-reel__num{color:var(--rp-gold)}
@media(max-width:760px){.rp .rp-reel__bar{gap:10px}.rp .rp-reel__num{display:none}}

/* ── los tres botones del centro (Dima: ⏮ ⏸ ⏭), que asoman al pasar el ratón ────── */
.rp .rp-reel__ctrl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:flex;gap:16px;align-items:center;opacity:.42;transition:opacity .32s var(--rp-hover)}
.rp .rp-reel:hover .rp-reel__ctrl,.rp .rp-reel__ctrl:focus-within{opacity:1}
.rp .rp-reel__ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(230,230,230,.32);background:rgba(14,14,16,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .32s var(--rp-hover),border-color .32s var(--rp-hover)}
.rp .rp-reel__ctrl button:hover{background:rgba(201,154,72,.30);border-color:var(--rp-gold)}
.rp .rp-reel__ctrl button svg{width:18px;height:18px;fill:currentColor;stroke:none}
body.rfv6-page .rp .rp-reel__ctrl button svg[aria-hidden="true"][focusable="false"]{position:static!important;width:18px!important;height:18px!important;overflow:visible!important;clip:auto!important;clip-path:none!important}
@media(max-width:760px){.rp .rp-reel__ctrl{gap:12px}.rp .rp-reel__ctrl button{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){
  .rp .rp-reel__seg[data-estado="activo"] .rp-reel__line b{animation:none;width:100%}
  .rp[data-rp-js] .rp-reel__slide{transition:none}
}

/* ── 13.1 · la cabecera de la tarjeta de razón · s439 · 08/09/2026 ───────────────── */
/* Pablo: «los iconos están pero no están bien alineados o no están en la línea que
   deberían». Tenía razón dos veces: el MISMO icono salía dos veces por tarjeta (suelto
   arriba y otra vez dentro del chip) y el suelto ocupaba su propio renglón, así que el
   chip caía descolgado. Ahora hay UN icono, en cápsula, y el chip a su lado en la misma
   línea, centrados entre sí. */
.rp .rp-reason__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.rp .rp-reason__head .rp-chips{margin:0}
.rp .rp-reason svg:not(.rp-i){display:none}   /* restos del marcado antiguo, si quedara alguno */

/* ── 13.2 · fuera los botones del centro (Pablo, 08/09) ──────────────────────────── */
/* «El hero está muy bien aunque deberías hacer desaparecer los botones de play y atrás y
   adelante.» Los tres del centro se van: tapaban la foto. Las flechas no hacen falta —cada
   segmento numerado de la barra ES un botón que lleva a su diapositiva— y la pausa se queda
   en la barra, pequeña: un carrusel que avanza solo sin forma de pararlo incumple la
   WCAG 2.2.2, y eso no se negocia por estética. */
.rp .rp-reel__ctrl{display:none}
.rp .rp-reel__pause{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(230,230,230,.22);background:none;color:var(--rp-tx2);display:grid;place-items:center;cursor:pointer;padding:0;margin-right:4px;transition:color .32s var(--rp-hover),border-color .32s var(--rp-hover)}
.rp .rp-reel__pause:hover{color:var(--rp-gold);border-color:var(--rp-gold)}
.rp .rp-reel__pause svg{width:11px;height:11px;fill:currentColor;stroke:none}
body.rfv6-page .rp .rp-reel__pause svg[aria-hidden="true"][focusable="false"]{position:static!important;width:11px!important;height:11px!important;overflow:visible!important;clip:auto!important;clip-path:none!important}
.rp .rp-reel__pause[data-parado="1"] svg rect:last-child{display:none}
.rp .rp-reel__pause[data-parado="1"] svg rect:first-child{width:12px;height:12px;x:8;y:6;rx:2}

/* ── 13.3 · `rp-chipbar` · la barra de cápsulas de Dima · s439 · 08/09/2026 ──────── */
/* Pablo: «el filtro con cápsulas te pedía mejor de ponerlo aquí y no tocar el portfolio.
   Nuestro portfolio me gusta.» Y con razón: flotando sobre el carrusel a pantalla completa
   se comía la cara del bebé. Aquí va DENTRO de la sección, sobre la rejilla que filtra.
   Es una pieza genérica: filtra cualquier rejilla cuyos hijos lleven `data-cat`. */
.rp .rp-chipbar{display:flex;flex-wrap:wrap;gap:10px;max-width:var(--rp-content);margin:0 auto 28px}
.rp .rp-chipbar button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;
  background:var(--rp-card);border:1px solid var(--rp-line);
  font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rp-tx2);cursor:pointer;white-space:nowrap;
  transition:color .32s var(--rp-hover),border-color .32s var(--rp-hover),background .32s var(--rp-hover)}
.rp .rp-chipbar button:hover{color:var(--rp-tx);border-color:rgba(201,154,72,.45)}
.rp .rp-chipbar button[aria-pressed="true"]{background:linear-gradient(135deg,var(--rp-gold),var(--rp-goldl));border-color:transparent;color:var(--rp-bg0)}
.rp .rp-chipbar button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
body.rfv6-page .rp .rp-chipbar button svg[aria-hidden="true"][focusable="false"]{position:static!important;width:13px!important;height:13px!important;overflow:visible!important;clip:auto!important;clip-path:none!important}
.rp .rp-chipbar em{font-style:normal;opacity:.6;font-size:10px}
/* lo filtrado se va del flujo; la rejilla se recoloca sola */
.rp [data-cat][hidden]{display:none!important}
@media(max-width:760px){
  .rp .rp-chipbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-inline:20px;margin-inline:-20px}
  .rp .rp-chipbar::-webkit-scrollbar{display:none}
  .rp .rp-chipbar button{flex:none;height:33px;padding:0 13px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.rp .rp-chipbar button{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE 14 · `rp-galerie` · la rejilla mixta de films y fotos · s439 · 08/09/2026
   Pablo: «ahí puedes poner más cosas, más píldoras, otros vídeos» · «el Nos films del home
   tiene que ser, y puedes poner fotos también, así que podrías cambiar el título y el texto»
   · «puedes incluso poner un filtro entre horizontal y vertical».
   Rejilla de 4 columnas donde lo horizontal ocupa 2 y lo vertical 1, así conviven los dos
   formatos sin recortarse. Filtra con `rp-chipbar`, que acepta VARIAS categorías por pieza.
   Los vídeos NO se reproducen solos: entre los cuatro pesan 89 MB. Póster + botón, y al
   pulsarlo arrancan CON SONIDO y con controles, que es como se ve un film.
   ══════════════════════════════════════════════════════════════════════════════════ */
.rp .rp-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-gitem{position:relative;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd);border:1px solid transparent;transition:border-color .32s var(--rp-hover)}
.rp .rp-gitem:hover{border-color:rgba(201,154,72,.30)}
.rp .rp-gitem[data-f="h"]{grid-column:span 2;aspect-ratio:16/9}
.rp .rp-gitem[data-f="v"]{grid-column:span 1;aspect-ratio:3/4}
.rp .rp-gitem>img,.rp .rp-gitem>video{width:100%;height:100%;object-fit:cover;display:block}
.rp .rp-gitem>video{position:absolute;inset:0}
.rp .rp-gitem__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(14,14,16,.86) 0%,rgba(14,14,16,.20) 45%,rgba(14,14,16,0) 70%)}
.rp .rp-gitem__cap{position:absolute;left:22px;right:22px;bottom:20px;display:grid;gap:8px;justify-items:start;pointer-events:none}
.rp .rp-gitem__cap h3{font-family:Oswald,sans-serif;font-weight:500;font-size:20px;line-height:24px;color:#fff}
.rp .rp-gitem__cap .rp-chip{background:rgba(14,14,16,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* el botón de reproducir: el mismo círculo de 56 px del spec §2.3 */
.rp .rp-gplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(14,14,16,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .32s var(--rp-hover),border-color .32s var(--rp-hover)}
.rp .rp-gplay:hover{background:rgba(201,154,72,.42);border-color:var(--rp-gold)}
.rp .rp-gplay svg{width:18px;height:18px;fill:currentColor;stroke:none;margin-left:3px}
body.rfv6-page .rp .rp-gplay svg[aria-hidden="true"][focusable="false"]{position:static!important;width:18px!important;height:18px!important;overflow:visible!important;clip:auto!important;clip-path:none!important}
.rp .rp-gitem.is-playing .rp-gplay,.rp .rp-gitem.is-playing .rp-gitem__veil,.rp .rp-gitem.is-playing .rp-gitem__cap{opacity:0;pointer-events:none;transition:opacity .3s}
@media(max-width:1000px){
  .rp .rp-galerie{grid-template-columns:repeat(2,1fr)}
  .rp .rp-gitem[data-f="h"]{grid-column:span 2}
  .rp .rp-gitem[data-f="v"]{grid-column:span 1}
}
@media(max-width:640px){
  .rp .rp-galerie{grid-template-columns:1fr;gap:16px}
  .rp .rp-gitem[data-f="h"],.rp .rp-gitem[data-f="v"]{grid-column:span 1}
  .rp .rp-gitem__cap{left:16px;right:16px;bottom:16px}
  .rp .rp-gitem__cap h3{font-size:16px;line-height:21px}
}

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE 15 · MODO DÍA DEL SISTEMA · s439 · 08/09/2026
   Pablo: «todas tienen que estar adaptadas para el nuevo sistema de diseño».
   🔴 LO QUE PASABA. Medido al pulsar el interruptor en la home: el fondo se aclaraba pero
   **las tarjetas seguían en #1A1A1C** y los chips en gris claro — tarjetas negras sobre
   fondo claro. La spec §2.1 ya definía esta paleta desde el 03/09 y **nunca se implementó**:
   en toda la hoja había 4 reglas `rf-claro`, y ninguna tocaba los tokens.
   LOS VALORES NO SE INVENTAN: salen de `rufino-modo-dia.php` (canvas #F4F6F8 · elevated
   #FFFFFF · sunken #EEF1F5 · ink #133157 · muted #48566B · hairline rgba(19,49,87,.15)).
   ⚠️ REGLA DURA DE PABLO (25/08, escrita en ese mismo fichero): **«el ámbar no toca NUNCA
   una letra»** — un ámbar legible como texto no existe. Así que en día:
     · el dorado como LETRA (overlines, enlaces, cifras, el acento) pasa a la tinta #133157;
     · el ámbar #FCB51F se queda solo como SUPERFICIE (botón, píldora activa), con tinta encima.
   Y los velos que van SOBRE FOTO siguen oscuros en los dos modos: debajo hay una imagen y
   encima letra blanca, no una superficie de la página.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ LA PALETA DE DÍA YA ESTABA, desde s418 (bloque 10 de esta hoja): `html.rf-claro .rp{}`
   con los tokens y los dos del botón (`--rp-btn-bg` ámbar / `--rp-btn-fg` tinta). **No se
   duplica aquí**: dos declaraciones de la misma paleta es la receta para que una envejezca.
   Lo que sigue son SOLO las piezas nacidas después de s418, que aquella no podía cubrir. */
html.rf-claro .rp .rp-chipbar button[aria-pressed="true"]{background:#FCB51F;border-color:transparent;color:#133157}
html.rf-claro .rp .rp-chip{background:rgba(19,49,87,.06);border-color:rgba(19,49,87,.15);color:#48566B}
html.rf-claro .rp .rp-chip--gold{border-color:rgba(19,49,87,.32);color:#133157}
/* el acento: se queda la itálica, se va el degradado (sería letra ámbar) */
html.rf-claro .rp .rp-em{background:none!important;-webkit-text-fill-color:#133157;color:#133157;animation:none}
/* el halo dorado de sección pasa a ámbar muy bajo: es gráfico, no letra */
html.rf-claro .rp .rp-glow::before{background:radial-gradient(120% 62% at 50% 0%,rgba(252,181,31,.12) 0%,rgba(252,181,31,.03) 42%,rgba(252,181,31,0) 68%)}
html.rf-claro .rp .rp-glow--l::before{background:radial-gradient(90% 70% at 8% 12%,rgba(252,181,31,.14) 0%,rgba(252,181,31,0) 62%)}
html.rf-claro .rp .rp-rule{background:linear-gradient(90deg,transparent,rgba(19,49,87,.15) 18%,rgba(252,181,31,.6) 50%,rgba(19,49,87,.15) 82%,transparent)}
/* la cifra de la banda y la de prueba: tinta, no ámbar */
html.rf-claro .rp .rp-stats b,html.rf-claro .rp .rp-num{color:#133157}
/* tarjetas con foto y sus velos: NO se aclaran, debajo hay una imagen */
html.rf-claro .rp .rp-hlcard,html.rf-claro .rp .rp-gitem{background:#0E0E10}
html.rf-claro .rp .rp-hlcard figcaption,html.rf-claro .rp .rp-hlcard figcaption em,
html.rf-claro .rp .rp-gitem__cap h3{color:#fff}
html.rf-claro .rp .rp-gitem__cap .rp-chip{background:rgba(14,14,16,.45);border-color:rgba(255,255,255,.28);color:#fff}
html.rf-claro .rp .rp-split__t h3{color:#fff}
html.rf-claro .rp .rp-split__t p{color:rgba(255,255,255,.86)}
html.rf-claro .rp .rp-split__t .rp-chip{background:rgba(14,14,16,.45);border-color:rgba(255,255,255,.28);color:#fff}
html.rf-claro .rp .rp-split__t .rp-link{color:#fff}
html.rf-claro .rp .rp-hero .rp-ov,html.rf-claro .rp .rp-reel__slide .rp-ov{color:#FCB51F}
html.rf-claro .rp .rp-hero .rp-h1,html.rf-claro .rp .rp-reel__slide .rp-h1,
html.rf-claro .rp .rp-hero .rp-st,html.rf-claro .rp .rp-reel__slide .rp-st,
html.rf-claro .rp .rp-hero .rp-price,html.rf-claro .rp .rp-reel__slide .rp-price{color:#fff}
html.rf-claro .rp .rp-hero .rp-em,html.rf-claro .rp .rp-reel__slide .rp-em{-webkit-text-fill-color:#FCB51F;color:#FCB51F}
html.rf-claro .rp .rp-reel__num{color:#48566B}
html.rf-claro .rp .rp-reel__seg[data-estado="activo"] .rp-reel__num{color:#133157}
html.rf-claro .rp .rp-reel__line{background:rgba(19,49,87,.20)}
html.rf-claro .rp .rp-reel__line b{background:#FCB51F}

/* ═══════════════════════════════════════════════════════════════════════════
   s440 · 08/09/2026 · Tres desajustes que Pablo vio y las medidas no cazaban,
   porque yo estaba verificando PRESENCIA (existe el nodo) y no MEDIDA (está
   donde debe). Los tres van medidos en el DOM, no a ojo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · El icono de sección caía 4 px por debajo del centro de su texto.
   Medido: centro del SVG a 16 px, centro del .rp-label a 12 px. El
   `vertical-align:-.22em` heredado no centra a 18 px de cuerpo. Con flex,
   el centrado no depende del tamaño de fuente. */
.rp .rp-label{display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:wrap}
.rp .rp-label svg{vertical-align:middle;flex:none}

/* 2 · Los checks de las listas quedaban 3 px altos: con icono de 14 px en
   línea de 24 px, el centrado de la PRIMERA línea pide 5 px, no 2. */
.rp .rp-ilist li .rp-i{margin-top:5px}

/* 3 · El carrusel de avis de Google entra por el shortcode
   [rufino_gbp_reviews] con el marcado del sistema ANTERIOR (rf-tcard,
   rf-avatar, rf-stars) y se veía como un injerto: radio de 8 px contra los
   28 del sistema, un borde que el sistema no usa, y el fondo de la tarjeta
   igual que el de la sección. Aquí solo se le aplican los tokens; el
   shortcode no se toca, porque lo comparten cuatro páginas que aún no son v3. */
.rp .rf-tcard{
  background:var(--rp-card);
  border:0;
  border-radius:var(--rp-radius);
  padding:34px;
}
.rp .rf-tcard__head{align-items:center;gap:14px}
.rp .rf-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}
.rp .rf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.rp .rf-stars svg{width:15px;height:15px;color:var(--rp-gold)}
.rp .rf-tcard__quote{color:var(--rp-tx);font-weight:300;line-height:1.6}
.rp .rf-quote__name{font-family:Oswald,"Barlow Condensed",sans-serif;font-weight:500;color:var(--rp-tx)}
.rp .rf-quote__role{color:var(--rp-tx2);font-size:14px}
/* el emoji que WordPress mete como <img> dentro de una reseña, a la altura del texto */
.rp .rf-tcard img.emoji{width:1em;height:1em;vertical-align:-.12em;margin:0 .05em}

/* ── 12.11 · 🔴 LA BANDA NEGRA DE ARRIBA DEL HERO DE CINE · s448 · 13/09/2026 ──────────
   Lo vio Pablo en una captura de /mariages/: una barra oscura con degradado que cruza el
   hero y se CORTA con una arista horizontal a media altura del titular.

   Causa real: DOS reglas distintas escriben sobre el MISMO pseudo-elemento.
     · §s422 (línea ~650)  `.rp-hero__media::before` = velo del NAV: `height:190px`,
       degradado vertical, para que el logo se lea sobre un hero claro.
     · §12.7 s439 (~906)   `.rp-hero--cine .rp-hero__media::before` = velo LATERAL del cine:
       `inset:0`, degradado horizontal a 100°.
   La segunda gana en `background` pero NO declara `height`, así que hereda los 190 px de la
   primera: el velo lateral queda recortado a una banda superior de 190 px que termina en seco.
   Y de paso el velo del nav desaparece, porque su degradado fue sustituido.
   Es `error_reutilizar_nombre_de_clase_existente` aplicado a un pseudo-elemento.

   Arreglo: una sola capa con DOS fondos superpuestos (el del nav arriba, el lateral debajo),
   en vez de inventar un `::after` nuevo que se apilaría por encima del texto del hero.
   Afecta solo a `rp-hero--cine`, que usan dos páginas: 6112 y 6125. */
.rp .rp-hero--cine .rp-hero__media::before{
  inset:0; height:auto;
  background:
    linear-gradient(to bottom, rgba(14,14,16,.62) 0%, rgba(14,14,16,.28) 12%, rgba(14,14,16,0) 24%),
    linear-gradient(100deg, rgba(14,14,16,.88) 0%, rgba(14,14,16,.62) 28%, rgba(14,14,16,.22) 58%, rgba(14,14,16,.10) 100%);
}
/* En móvil el velo lateral se retiró a propósito en s439 (§12.7); se conserva esa decisión,
   pero el velo del nav vuelve, que es el que hacía legible el logo. */
@media(max-width:899px){
  .rp .rp-hero--cine .rp-hero__media::before{
    background: linear-gradient(to bottom, rgba(14,14,16,.62) 0%, rgba(14,14,16,.28) 18%, rgba(14,14,16,0) 34%);
  }
}

/* ── 12.12 · 🔴 EL VELO SE PINTABA POR ENCIMA DEL TEXTO DEL HERO · s448 · 13/09/2026 ──
   La causa de fondo de la banda negra: `.rp-hero__media::before` lleva `z-index:1`, y
   `.rp-hero__body` es `position:relative` con `z-index:auto` (= 0). El contenedor de la
   foto no crea contexto de apilamiento (es `absolute` sin z-index), así que su `::before`
   sube al contexto de `.rp-hero` y se pinta ENCIMA del titular y del overline.
   Por eso en la captura de Pablo el overline dorado no se leía dentro de la banda: no
   era falta de contraste, era una capa oscura por delante de la letra.
   El texto del hero va por delante de sus dos velos, siempre. */
.rp .rp-hero__body{ z-index:2; }

/* ── 12.13 · 🔴 LOS CARRILES QUE NO LLENAN SE QUEDABAN A LA IZQUIERDA · s448 · 13/09/2026 ──
   Pablo: «hay textos, botones y otros elementos mal alineados, muchos a la izquierda y no
   siguen el centrado del eje central».

   `.rp-track` es un flex con `overflow-x:auto`. Cuando las tarjetas DESBORDAN, arrancan en el
   gutter y todo cuadra — y eso es lo único que hacen los carriles de `/mariages/` y la home,
   que van llenos. Pero cuando CABEN, el flex las deja pegadas al inicio y el resto del carril
   queda vacío a la derecha: el bloque se lee descentrado respecto al eje de la página.

   Medido el 13/09 a 1 440 px: **16 carriles en 12 páginas** por debajo de su ancho. Los peores:
   `/lifestyle/portrait-express/` §prix con UNA tarjeta (986 px de vacío), los pilares vídeo
   entreprise, événementiel y duo-entreprise con dos (672), `/professionnels/` §duo y §preuve
   con dos (444), y los de tres (358). Ninguno se veía en la referencia: sus carriles siempre
   desbordan (`error_el_carril_que_solo_se_ve_roto_cuando_esta_medio_vacio`, reincidente).

   `safe center` centra SOLO cuando el contenido cabe; en cuanto desborda, vuelve solo a `start`
   y no deja contenido inalcanzable a la izquierda del scroll, que es la trampa clásica de
   `justify-content:center` en un contenedor con scroll. Los navegadores que no lo soportan
   descartan la declaración entera y se quedan como hoy. */
.rp .rp-track{ justify-content: safe center; }

/* ── 12.14 · LAS FLECHAS AL BORDE Y EL CARRIL QUE SE FUNDE · s448 · 13/09/2026 ────────
   Pablo: *«las flechas deberíamos ponerlas aún más próximas de los extremos… a lo mejor
   habría que poner un degradado en los extremos para que los carruseles se difuminen
   justo cuando llegan a las flechas»*. Las dos cosas, y la primera tenía número:

   Las paletas iban ancladas al MARGEN (`calc(var(--rp-gutter) - 70px)`), y el margen crece
   con la pantalla. Medido el 13/09: a 1 440 px caían a **20 px** del borde, pero a 1 920 px
   se iban a **260 px** — flotando en mitad del vacío, que es justo lo que se ve mal en una
   pantalla ancha. Ahora van a una distancia FIJA del borde, no del margen.

   El difuminado se hace con `mask-image`, no con un degradado de color encima: así vale sobre
   cualquier fondo (modo noche, `rp-bg1`, foto) y no hay que repintar nada al cambiar de tema.
   Y va por lados: `premium.js` enciende `rp-fade-l` / `rp-fade-r` con el MISMO estado que
   enciende cada flecha, así que el borde solo se funde donde queda algo por ver. Al llegar al
   final, la última tarjeta se ve entera y no mordida. */
.rp .rp-paddle--l{ left:12px; }
.rp .rp-paddle--r{ right:12px; }

.rp .rp-track{
  --rp-fade-l:0px; --rp-fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--rp-fade-l),#000 calc(100% - var(--rp-fade-r)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--rp-fade-l),#000 calc(100% - var(--rp-fade-r)),transparent 100%);
}
.rp .rp-rail.rp-fade-l .rp-track{ --rp-fade-l:110px; }
.rp .rp-rail.rp-fade-r .rp-track{ --rp-fade-r:110px; }
/* Por debajo de 1 100 px no hay flechas (regla de arriba), así que tampoco hay nada que
   difuminar hacia: se apaga la máscara y el carril se comporta como hasta hoy. */
@media(max-width:1100px){
  .rp .rp-track{ -webkit-mask-image:none; mask-image:none; }
}

/* ═══ s453 · 13/09/2026 · Bloque «brochures» de /tarifs/ (P3, retirada de precios) ═══
   Formulario de captación: elige universo → email → recibe la brochure.
   Usa los tokens del sistema; ningún color a pelo, para que el modo día funcione solo. */
.rp .rb-form{ max-width:var(--rp-read); margin-inline:auto; }
.rp .rb-univers{ border:0; padding:0; margin:0 0 32px; }
.rp .rb-univers legend{ margin-bottom:16px; }
.rp .rb-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.rp .rb-chips .rp-chip{ cursor:pointer; transition:border-color .2s var(--rp-ease), background .2s var(--rp-ease); }
.rp .rb-chips .rp-chip input{ position:absolute; opacity:0; width:0; height:0; }
.rp .rb-chips .rp-chip:has(input:checked){ border-color:var(--rp-gold); background:var(--rp-card); }
.rp .rb-chips .rp-chip:has(input:focus-visible){ outline:2px solid var(--rp-gold); outline-offset:2px; }

.rp .rb-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px){ .rp .rb-row{ grid-template-columns:1fr; } }
.rp .rb-field{ display:flex; flex-direction:column; gap:8px; }
.rp .rb-field span{ font-size:14px; color:var(--rp-tx2); }
.rp .rb-field input{
  width:100%; padding:14px 16px; border:1px solid var(--rp-line); border-radius:var(--rp-radius);
  background:var(--rp-card); color:var(--rp-tx); font:inherit; font-size:16px;
}
.rp .rb-field input:focus-visible{ outline:2px solid var(--rp-gold); outline-offset:1px; }

/* El honeypot NO usa display:none: hay bots que lo detectan y lo esquivan. */
.rp .rb-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.rp .rb-check{ display:flex; gap:12px; align-items:flex-start; margin-top:20px; cursor:pointer; }
.rp .rb-check input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--rp-gold); }
.rp .rb-check span{ font-size:14px; line-height:1.6; color:var(--rp-tx2); }
.rp .rb-form>.rp-btn{ margin-top:28px; }
.rp .rb-form[aria-busy="true"]>.rp-btn{ opacity:.55; pointer-events:none; }
.rp .rb-msg{ margin-top:16px; min-height:1.4em; }
.rp .rb-msg.is-err{ color:#E2725B; }
.rp .rb-form.is-done>fieldset,
.rp .rb-form.is-done>.rb-row,
.rp .rb-form.is-done>.rb-check,
.rp .rb-form.is-done>.rp-btn{ display:none; }

/* s453 13/09/2026 · Arreglos del bloque de brochures, tras ver la pagina montada.
   Tres fallos reales: la cabecera partia overline y titular en dos columnas, el bloque
   tenia cuatro ejes horizontales distintos, y Anita pisaba los campos. */

/* Anita envuelve cada campo en .anita-input-wrap, convierte el placeholder en etiqueta
   flotante y le pega su asterisco de obligatorio, que cae ENCIMA del texto del campo.
   Aqui cada campo ya lleva su etiqueta propia encima, asi que se apaga la de Anita. */
.rp .rb-form .anita-input-wrap{ display:block; position:static; height:auto; width:100%; }
.rp .rb-form .anita-input-label{ display:none !important; }
.rp .rb-form .anita-input-wrap::after,
.rp .rb-form .anita-input-wrap::before,
.rp .rb-form .anita-input-wrap.is-required::after{ content:none !important; }

/* Un solo eje: el mismo ancho de lectura que el parrafo de la seccion. */
/* 840px y no el ancho de lectura (680): los cinco chips suman 732 y a 680 rompen 4+1. */
.rp .rb-form{ max-width:840px; }
.rp .rb-univers legend{ display:block; width:100%; text-align:center; margin-bottom:20px; }
.rp .rb-chips{ justify-content:center; }
.rp .rb-form > .rp-btn{ display:block; margin-inline:auto; }
.rp .rb-msg{ text-align:center; }

/* Los chips son pulsables: que se note antes de tocarlos, no solo al pasar el raton. */
.rp .rb-chips .rp-chip{ cursor:pointer; border-style:solid; }
.rp .rb-chips .rp-chip:hover{ border-color:var(--rp-goldl,var(--rp-gold)); }

/* ═══════════ s457 · 14/09/2026 · EL AIRE ENTRE BLOQUES DE UNA MISMA SECCIÓN ═══════════
   Pablo, 14/09: «acuérdate de separar un poco… apenas hay espacio entre las cards y el texto
   que está arriba. Y esto pasa en varios sitios de la web».

   La causa, leída en esta misma hoja: `.rp-content`, `.rp-statement` y `.rp-chapbody` llevan
   SOLO `margin-inline`. Ninguno trae margen vertical. El único que separaba era `.rp-sec__head`
   (40 px). Así que cada vez que una sección pone un texto y debajo otro bloque, quedan pegados
   salvo que el autor lo compense a mano.

   ⚠️ POR QUÉ SE SEPARAN LOS CONTENEDORES Y NO LOS TEXTOS: 22 textos del sistema ya llevan su
   propio `style="margin-…"` inline. Dar margen a `.rp-chapbody` se lo habría SUMADO al de esos
   22 y habría descuadrado justo las páginas que hoy están bien.

   Los pares son los que existen de verdad, contados sobre el post_content de las 31 páginas del
   sistema: content+rail ×46 · content+content ×10 · content+cmp ×7 · rail+content ×7 ·
   content+chipbar ×2 · content+two ×2 · chipbar+galerie ×1. Nada de `* + *`: solo estos. */
:root{--rp-gap-bloque:clamp(32px,3.4vw,48px)}
.rp .rp-sec > .rp-content + .rp-content,
.rp .rp-sec > .rp-content + .rp-rail,
.rp .rp-sec > .rp-content + .rp-cmp,
.rp .rp-sec > .rp-content + .rp-chipbar,
.rp .rp-sec > .rp-content + .rp-two,
.rp .rp-sec > .rp-rail + .rp-content,
.rp .rp-sec > .rp-chipbar + .rp-galerie{margin-block-start:var(--rp-gap-bloque)}
/* Si el bloque de arriba ya separa por su cuenta, no se suma: `.rp-sec__head` trae 40 px.
   ⚠️ El selector lleva `.rp-content.rp-sec__head` (0,5,0) y no `.rp-sec__head` a secas:
   medido el 14/09, con (0,3,0) PERDÍA contra la regla de arriba (0,4,0) y los bloques que
   siguen a una cabecera acababan con 40+48 px. Lo cazó la verificación, no la lectura. */
.rp .rp-sec > .rp-content.rp-sec__head + .rp-content,
.rp .rp-sec > .rp-content.rp-sec__head + .rp-rail,
.rp .rp-sec > .rp-content.rp-sec__head + .rp-cmp,
.rp .rp-sec > .rp-content.rp-sec__head + .rp-chipbar,
.rp .rp-sec > .rp-content.rp-sec__head + .rp-two{margin-block-start:0}

/* ══════════════════════════════════════════════════════════════════════════════════
   BLOQUE D2 · LO QUE QUEDABA DE DIMA · s466 · 15/09/2026
   ──────────────────────────────────────────────────────────────────────────────────
   Las cuatro piezas que el §5 de `P03_BARRIDO_DIMA_2026-09-08.md` dejó en ⏳. La quinta
   de esa lista (la card de blog) NO se escribe aquí: ya existe y se llama `rp-cm`
   (§11.4, con su `rp-cm__meta` y el `<i>` dorado para la categoría). Lo que le faltaba
   no era CSS, era estar montada en algún sitio.

   MEDIDO EN LA REFERENCIA EL 15/09/2026, no recordado de la hoja:
   · «Nos Réalisations» (home de dima-artistry.com, a 1440): grid de 12 columnas con
     gap 32; la card grande ocupa 8/12 (891×557) y el panel lateral 4/12 (429×557), en
     columna con `justify-content:space-between`; las miniaturas miden 64×48.
   · El CTA final: padding 128/0, overline 12px con 3,6px de letter-spacing, titular a
     60px, dos botones. ⚠️ **Y su fondo es una IMAGEN, no un vídeo** — la hoja del 08/09
     decía «CTA final con vídeo de fondo» y hoy la referencia no lleva vídeo ahí. Por eso
     `rp-cta` acepta las dos cosas: `<img>` o `<video>` dentro de `.rp-cta__media`.
     (`error_monte_con_la_hoja_y_no_con_la_pagina_de_referencia`.)

   MODO DÍA: ninguna de las cuatro define un color a mano, salvo la barra de progreso desde
   el 24/09 (vive fuera de `.rp`, ver D2.1). El resto sale de los tokens
   `--rp-*`, así que el bloque `html.rf-claro` de arriba las gira solo. El único ámbar
   que aparece es superficie (la barra de progreso), nunca una letra — regla de Pablo
   del 25/08.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── D2.1 · barra de progreso de lectura ──────────────────────────────────────────
   Va colgada de `body`, FUERA de `.rp` (24/09/2026). Hasta ese día iba dentro «para
   heredar los tokens», y dentro no se veía nunca: `main` lleva `filter:blur(0px)` y eso
   ancla todo `position:fixed` al documento en vez de a la pantalla
   (`error_blur_cero_no_es_none_y_rompe_position_fixed`). Fuera de `.rp` no hay tokens
   `--rp-*`, así que los colores van en claro: noche = los de `--rp-btn-bg` (#C99A48) →
   `--rp-goldl` (#D4AD6A); día = su regla `html.rf-claro` de D2.3, más abajo.
   La pinta el JS y solo en páginas largas (> 2,5 pantallas): en una corta, una barra
   que salta de 0 a 100 en dos ruedas de scroll es ruido, no información.
   `scaleX` en vez de `width` para que el navegador no recalcule layout en cada scroll. */
.rp-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;pointer-events:none;background:transparent}
.rp-progress__bar{height:100%;width:100%;transform:scaleX(var(--rp-p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,#C99A48 0%,#D4AD6A 100%);will-change:transform}
@media print{.rp-progress{display:none}}

/* ── D2.2 · el testimonio grande ──────────────────────────────────────────────────
   Una cita, no un carrusel: el carrusel de avis de Google ya existe (§1156) y resuelve
   «muchas reseñas». Esto resuelve otra cosa — UNA frase que sostiene un argumento, con
   su firma y su fuente debajo. Tipografía: la Playfair itálica alojada del acento
   `rp-em`, que es la única cursiva real que tiene el sistema.
   Las comillas son decorativas y van `aria-hidden` en el HTML: un lector de pantalla
   que lea «comillas» antes de cada cita es ruido. */
.rp .rp-cita{max-width:var(--rp-statement);margin-inline:auto;text-align:center;position:relative;padding-top:56px}
.rp .rp-cita::before{content:"“";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  font-family:'PlayfairRP',Georgia,serif;font-style:italic;font-weight:600;font-size:110px;line-height:1;color:var(--rp-gold);opacity:.32}
.rp .rp-cita__q{font-family:'PlayfairRP',Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;
  font-size:clamp(23px,2.5vw,36px);line-height:1.3;color:var(--rp-tx);text-wrap:balance}
.rp .rp-cita__sign{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rp .rp-cita__name{font-family:Oswald,sans-serif;font-weight:500;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--rp-tx)}
.rp .rp-cita__role{font-size:14px;font-weight:400;color:var(--rp-tx2)}
.rp .rp-cita__src{margin-top:14px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-cita__src a{color:var(--rp-gold);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.rp .rp-cita{padding-top:44px}.rp .rp-cita::before{font-size:84px}}

/* ── D2.3 · el CTA final con fondo ────────────────────────────────────────────────
   Sección a sangre: la foto o el bucle ocupan el ancho de la ventana y el texto va
   encima, centrado. El velo NO es decorativo: sin él, el texto blanco sobre una foto
   clara deja de leerse, y eso ya mordió una vez (`error_barrido_en_verde_con_el_diseno_roto`).
   Si el fondo es `<video>`, la regla de Pablo del 08/09 sigue mandando: bucle propio,
   horizontal, 6-12 s y ≤ 2,5 MB — se comprueba en el fichero, no en el póster. */
.rp .rp-cta{position:relative;overflow:hidden;padding-block:clamp(88px,9vw,128px);isolation:isolate}
.rp .rp-cta__media{position:absolute;inset:0;z-index:-2}
.rp .rp-cta__media img,.rp .rp-cta__media video{width:100%;height:100%;object-fit:cover;display:block}
.rp .rp-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(14,14,16,.82) 0%,rgba(14,14,16,.70) 50%,rgba(14,14,16,.88) 100%)}
.rp .rp-cta__body{position:relative;text-align:center;display:grid;justify-items:center;gap:18px}
.rp .rp-cta .rp-label{color:var(--rp-goldl)}
.rp .rp-cta .rp-statement,.rp .rp-cta .rp-chapbody{color:#F2F2F2}
.rp .rp-cta .rp-chapbody{max-width:var(--rp-read)}
.rp .rp-cta .rp-pair{margin-top:12px}
/* El velo se queda oscuro también en modo día: debajo hay una foto, no papel de la
   página. Es la misma excepción que ya tienen los heros y `rp-split` (arsenal §2 bis). */
/* 🔴 EL !important NO ES PEREZA, ES LA ÚNICA FORMA. Medido con el CSSOM el 15/09/2026
   preguntando qué reglas casan con este párrafo: la hoja del tema trae
   `html.rf-claro body[class] :is(p,span,li,td,th,…){color:var(--rf-ink-muted)!important}`,
   o sea que EN MODO DÍA TODO PÁRRAFO DEL SITIO se pinta de #48566B con !important.
   Sobre papel claro da igual; sobre una foto con velo oscuro, el texto se apaga.
   Sin esto, el CTA en modo día sale gris azulado sobre la foto y no se lee. */
html.rf-claro .rp .rp-cta .rp-statement,html.rf-claro .rp .rp-cta .rp-chapbody{color:#F2F2F2!important}
html.rf-claro .rp .rp-cta .rp-label{color:#FCB51F!important}
/* s466 · y lo que va DENTRO del CTA y no es un párrafo: el router y el botón secundario.
   Medido en /mariages/le-grand-jour/ el 15/09 con el CTA ya montado: en modo día salían
   los dos en #133157 (azul marino) sobre el velo oscuro del vídeo. Sobre una foto, la
   letra es clara — la misma excepción que los heros. */
html.rf-claro .rp .rp-cta .rp-router a{color:#F2F2F2!important;border-color:rgba(242,242,242,.28)!important}
html.rf-claro .rp .rp-cta .rp-router a:hover{color:#FCB51F!important}
html.rf-claro .rp .rp-cta .rp-btn--g{color:#F2F2F2!important;border-color:rgba(242,242,242,.55)!important}
/* Y la barra de progreso, que en día iba de ámbar a azul marino porque `--rp-goldl` es
   azul en claro: en día se queda en ámbar, de claro a oscuro. */
html.rf-claro .rp-progress__bar{background:linear-gradient(90deg,#FCB51F 0%,#E09A00 100%)}
@media(prefers-reduced-motion:reduce){.rp .rp-cta__media video{display:none}}

/* ── D2.4 · «Nos Réalisations» ────────────────────────────────────────────────────
   Card grande + panel lateral (8/4 de 12, como la referencia) + miniaturas de 64×48
   que cambian la grande. Las miniaturas son `<button>`, no `<a>`: no navegan, cambian
   lo que se ve — y un botón es lo que un teclado y un lector de pantalla esperan ahí.
   El panel se lee de arriba abajo: meta (tipo · año · lugar), título, cuerpo, enlace,
   y las miniaturas abajo del todo. */
.rp .rp-reals{display:grid;grid-template-columns:8fr 4fr;gap:32px;max-width:var(--rp-content);margin-inline:auto;align-items:stretch}
.rp .rp-reals__big{position:relative;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd);aspect-ratio:16/10}
.rp .rp-reals__big img,.rp .rp-reals__big video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--rp-ease)}
.rp .rp-reals__big img.on,.rp .rp-reals__big video.on{opacity:1}
.rp .rp-reals__num{position:absolute;right:18px;bottom:14px;z-index:2;font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;color:#E6E6E6;
  background:rgba(14,14,16,.55);border:1px solid rgba(230,230,230,.18);border-radius:999px;padding:5px 12px}
.rp .rp-reals__panel{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-block:6px}
.rp .rp-reals__meta{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-reals__meta i{font-style:normal;color:var(--rp-gold)}
.rp .rp-reals__panel h3{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(22px,2vw,29px);line-height:1.1;margin-top:10px}
.rp .rp-reals__panel p{font-size:16px;font-weight:300;line-height:1.55;color:var(--rp-tx2);margin-top:12px}
.rp .rp-reals__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.rp .rp-reals__thumbs button{width:64px;height:48px;padding:0;border:1px solid var(--rp-line);border-radius:6px;overflow:hidden;background:var(--rp-cardd);
  cursor:pointer;opacity:.5;transition:opacity .3s var(--rp-ease),border-color .3s var(--rp-ease)}
.rp .rp-reals__thumbs button img{width:100%;height:100%;object-fit:cover}
.rp .rp-reals__thumbs button[aria-current="true"]{opacity:1;border-color:var(--rp-gold)}
.rp .rp-reals__thumbs button:hover{opacity:.85}
.rp .rp-reals__thumbs button:focus-visible{outline:2px solid var(--rp-gold);outline-offset:2px}
@media(max-width:900px){.rp .rp-reals{grid-template-columns:1fr;gap:24px}.rp .rp-reals__big{aspect-ratio:3/2}}

/* ══════════════════════════════════════════════════════════════════════════════════
   🔴 s466 · 15/09/2026 · EL TEXTO SOBRE FOTO, EN MODO DÍA, NO SE LEÍA — Y NO ERA
   PORQUE FALTARA LA REGLA: ESTABA ESCRITA Y PERDÍA.
   ──────────────────────────────────────────────────────────────────────────────────
   Encontrado montando el bloque D2, preguntando al CSSOM qué reglas casaban con un
   párrafo del CTA (`el.matches(selectorText)` sobre `document.styleSheets`), en vez de
   leer la hoja. La respuesta trajo una tercera regla que no es nuestra:

     html.rf-claro body[class] :is(p,span,li,td,th,dt,dd,label,figcaption,blockquote,…)
       { color: var(--rf-ink-muted) !important }

   En modo día, ESO PINTA TODO PÁRRAFO DEL SITIO de #48566B con !important. Sobre papel
   claro no se nota. Sobre una foto con velo oscuro —el hero, el reel, las cards a
   sangre— el texto se apaga: medido en /mariages/ en claro, el overline del hero salía
   #48566B sobre un velo de rgba(14,14,16,.86), y el statement se perdía sobre el
   vestido blanco de la foto.

   Las reglas correctas ya existían desde s439/s440 (líneas del bloque de modo día:
   `…rp-hero .rp-ov{color:#FCB51F}`, `…rp-split__t p{color:rgba(255,255,255,.86)}`…).
   Ninguna llevaba !important, así que ninguna se aplicaba. Es el mismo patrón que
   `error_regla_css_posterior_anula_la_variante` de s465, pero con la regla ganadora
   viniendo de FUERA de esta hoja: por eso no se veía leyendo este fichero.

   Aquí se repiten esos mismos selectores —ni uno nuevo, ni un color distinto— con el
   !important que necesitan para ganar. Si algún día esa regla del tema desaparece,
   este bloque se puede borrar entero y nada cambia.
   ══════════════════════════════════════════════════════════════════════════════════ */
html.rf-claro .rp .rp-hlcard figcaption,html.rf-claro .rp .rp-hlcard figcaption em,
html.rf-claro .rp .rp-gitem__cap h3{color:#fff!important}
html.rf-claro .rp .rp-gitem__cap .rp-chip{color:#fff!important}
html.rf-claro .rp .rp-split__t h3{color:#fff!important}
html.rf-claro .rp .rp-split__t p{color:rgba(255,255,255,.86)!important}
html.rf-claro .rp .rp-split__t .rp-chip,html.rf-claro .rp .rp-split__t .rp-link{color:#fff!important}
html.rf-claro .rp .rp-hero .rp-ov,html.rf-claro .rp .rp-reel__slide .rp-ov{color:#FCB51F!important}
html.rf-claro .rp .rp-hero .rp-h1,html.rf-claro .rp .rp-reel__slide .rp-h1,
html.rf-claro .rp .rp-hero .rp-st,html.rf-claro .rp .rp-reel__slide .rp-st,
html.rf-claro .rp .rp-hero .rp-price,html.rf-claro .rp .rp-reel__slide .rp-price{color:#fff!important}
html.rf-claro .rp .rp-hero .rp-em,html.rf-claro .rp .rp-reel__slide .rp-em{-webkit-text-fill-color:#FCB51F!important;color:#FCB51F!important}
/* El botón secundario del hero va sobre la foto: su letra es blanca, no tinta. */
html.rf-claro .rp .rp-hero .rp-btn--g,html.rf-claro .rp .rp-reel__slide .rp-btn--g{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
/* La numeración del carrusel va sobre papel: el activo se queda en tinta fuerte. */
html.rf-claro .rp .rp-reel__seg[data-estado="activo"] .rp-reel__num{color:#133157!important}


/* ══════════════════════════════════════════════════════════════════════════════
   s467 · 15/09/2026 · EL FORMULARIO DE /contact/ ([rufino_predevis])
   Estas 11 reglas vivían en un <style> dentro del post_content de la 6144. Al montar
   la página con el sistema v3 se retiraron con el resto del bloque, y los cuatro
   <select> se quedaron a altura 0: el tema Anita los oculta (`is-hidden`) y pinta su
   propio widget, que sin `height:54px` colapsa. Los inputs de texto no lo acusaron
   porque su altura viene del CSS del plugin — por eso el fallo solo se veía en los
   selects, y solo mirando la página.
   Se traen aquí en vez de devolverlas al contenido: el sistema prohíbe <style> en
   post_content, y aquí son cacheables. Selector intacto (.rf-form-wrap) para no
   tocar el marcado que emite el shortcode.
   ══════════════════════════════════════════════════════════════════════════════ */
.rf-form-wrap{max-width:920px;margin-inline:auto}
.rf-form-wrap p{margin:0}
.rf-form-wrap input[type=text], .rf-form-wrap input[type=email], .rf-form-wrap input[type=tel], .rf-form-wrap input[type=date], .rf-form-wrap select, .rf-form-wrap textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12); border-radius:4px;padding:.85rem .95rem;color:var(--rf-ink);font-family:'Montserrat',sans-serif;font-weight:300;font-size:.96rem;line-height:1.5; box-sizing:border-box; transition:border-color .32s cubic-bezier(.2,.7,.2,1),background .32s cubic-bezier(.2,.7,.2,1)}
.rf-form-wrap input[type=text], .rf-form-wrap input[type=email], .rf-form-wrap input[type=tel], .rf-form-wrap input[type=date], .rf-form-wrap select{height:54px !important;display:block !important;margin:0 !important;vertical-align:top}
.rf-form-wrap textarea{min-height:140px !important;display:block !important;margin:0 !important}
.rf-form-wrap textarea{min-height:140px;resize:vertical}
.rf-form-wrap input:focus, .rf-form-wrap select:focus, .rf-form-wrap textarea:focus{outline:none;border-color:var(--rf-gold);background:rgba(255,255,255,.06)}
.rf-form-wrap input::placeholder, .rf-form-wrap textarea::placeholder{color:rgba(230,230,230,.4)}
.rf-form-wrap select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23C99A48' stroke-width='1.5'><polyline points='1 1 6 6 11 1'/></svg>");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.rf-form-wrap input[type=submit]{width:auto;display:inline-block;background:var(--rf-gold);color:#0E0E10;border:1px solid var(--rf-gold); font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem; padding:1rem 2.2rem;cursor:pointer;border-radius:4px;margin-block-start:var(--rf-sp-md); transition:background .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1)}
.rf-form-wrap input[type=submit]:hover{background:#D9A85A;transform:translateY(-1px)}


/* s467 · 15/09/2026 · LA CABECERA SIN HERO EMPIEZA BAJO EL NAV FIJO.
   Medido hoy en /reserver/, /a-propos/ y /vos-questions/: `.rfh-nav` es fijo y mide 86 px.
   `.rp-sec--intro` heredaba el padding de sección —clamp(64px,7vw,112px)—, que a 390 px
   da 64 y deja el overline a 80 px, o sea DEBAJO del nav. En escritorio no se veía porque
   allí el clamp ya da 112. `max()` sube el suelo sin tocar el aire de las demás secciones.
   ⚠️ Y el nav ENCOGE al hacer scroll: 140 px recién cargado (que es como llega el visitante)
   y 86 px una vez desplazado. La primera medición se hizo sobre el estado encogido y el
   valor salió corto; el clamp cubre los dos anchos: 104 px a 390 (nav 86) y 158 a 1440 (nav 140). */
.rp .rp-sec--intro{ padding-top: max(var(--rp-sec-t), clamp(104px, 11vw, 168px)); }

/* ═══════════════════════════════════════════════════════════════════════
   rp-skel · Esqueleto de carga (20/09/2026)
   Las galerías y los portfolios cargan muchas fotos: hasta que llegan, el
   hueco está en blanco y la página parece rota. Esto pinta un degradado que
   se mueve en el sitio que ocupará la foto, y se apaga solo cuando carga.
   Automático: lo aplica premium.js a las imágenes lazy. No se monta a mano.
   ═══════════════════════════════════════════════════════════════════════ */
.rp-skel{
  position:relative;
  background:linear-gradient(100deg,#141416 28%,#1d1d20 42%,#141416 58%);
  background-size:220% 100%;
  animation:rp-skel-mov 1.4s ease-in-out infinite;
}
@keyframes rp-skel-mov{ 0%{background-position:150% 0} 100%{background-position:-50% 0} }
.rp-skel--listo{ animation:none; background:none; }
@media (prefers-reduced-motion: reduce){
  .rp-skel{ animation:none; background:#17171a; }
}

/* ═══════════════════════════════════════════════════════════════════════
   rp-share · Compartir (20/09/2026)
   Para los álbumes: que una pareja pueda mandar su galería por WhatsApp sin
   copiar la barra del navegador. Usa el diálogo nativo del móvil cuando existe
   y, si no, copia el enlace al portapapeles y lo dice.
   Toma los tokens del sistema: misma píldora, mismo dorado, mismo hover.
   ═══════════════════════════════════════════════════════════════════════ */
.rp .rp-share{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px; border-radius:980px;
  background:transparent; border:1px solid var(--rp-line);
  color:var(--rp-tx2); cursor:pointer;
  font-family:Oswald,sans-serif; font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase;
  transition:border-color .32s var(--rp-hover), color .32s var(--rp-hover);
}
.rp .rp-share:hover{ border-color:rgba(201,154,72,.45); color:var(--rp-gold); }
.rp .rp-share:focus-visible{ outline:2px solid var(--rp-gold); outline-offset:3px; }
.rp .rp-share svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; margin-right:8px; flex:0 0 auto; }
.rp .rp-share[data-hecho="1"]{ border-color:rgba(201,154,72,.45); color:var(--rp-gold); }
@media (max-width:480px){
  .rp .rp-share{ width:100%; justify-content:center; }
}

/* s498 (23/09/2026) · H1 con la búsqueda (decisión 4A de Pablo). En pilares y universos, la
   línea pequeña del hero pasa de <p class="rp-ov"> a <h1 class="rp-ov">, y la frase grande de
   <h1 class="rp-h1"> a <p class="rp-h1">. La regla global del tema
   `h1…h6{ line-height:var(--rf-lh-tight); text-wrap:balance }` le daba 74 px de interlínea
   (40 px en móvil). Aquí recupera lo que tenía como <p>: 1,55 heredado de `.rp` y
   `text-wrap:pretty`. Medido en Chrome antes/después en 15 páginas, a 1440 y 375 px:
   mismas cajas, mismos estilos calculados. */
.rp .rp-hero h1.rp-ov{ line-height:1.55; text-wrap:pretty; }

/* Enlaces dentro de un párrafo (24/09/2026). `:where(.rp) a{color:inherit;text-decoration:none}`
   los dejaba del color del texto y sin subrayado: se podía hacer clic, pero nadie lo sabía
   (inventario del 24/09: 5 enlaces en /temoignages/, /tarifs/ y 6196). Mismo dibujo que las
   fuentes de las citas (`.rp-cita__src a`). Solo enlaces SIN clase: los `rp-link`, botones
   y tarjetas conservan el suyo. */
.rp :is(.rp-chapbody,.rp-body,.rp-statement,.rp-note) a:not([class]){color:var(--rp-gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .32s var(--rp-hover)}
.rp :is(.rp-chapbody,.rp-body,.rp-statement,.rp-note) a:not([class]):hover{color:#DCB472}

/* ═══ rp-instant · «Au même instant» (bloque 3, pieza 5 · 24/09/2026) ══════════════════════
   Una pareja real (la foto de Jennifer y la imagen del film de Pablo del mismo momento) en una
   sola tarjeta que gira entre las dos caras con los botones «Photo / Film».
   Contrato de degradación: SIN la clase `is-flip` (sin JS, JS que falla o
   `prefers-reduced-motion`) las dos caras se ven lado a lado, igual que el `rp-split` al que
   sustituye, y los botones siguen ocultos (atributo `hidden`). Nada queda a opacity:0.
   🧯 El giro vive en `.rp-instant__inner` (transform 3D): no meter nada `position:fixed` dentro
   (`error_blur_cero_no_es_none_y_rompe_position_fixed`). */
.rp .rp-instants{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-instant{display:grid;gap:16px;justify-items:center;min-width:0}
.rp .rp-instant__card{width:100%}
.rp .rp-instant__inner{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rp .rp-instant__face{position:relative;min-height:360px;border-radius:var(--rp-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;background:#141416}
.rp .rp-instant__face img,.rp .rp-instant__face video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp .rp-instant__face::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.93) 0%,rgba(14,14,16,.45) 55%,rgba(14,14,16,.10) 100%)}
/* sin giro, dos parejas lado a lado serían cuatro columnas: cada pareja ocupa la fila entera */
.rp .rp-instants:not(.is-flip){grid-template-columns:1fr}
/* con giro: una tarjeta por pareja, las dos caras apiladas en la misma celda */
.rp .rp-instant.is-flip .rp-instant__card{perspective:1800px}
.rp .rp-instant.is-flip .rp-instant__inner{grid-template-columns:1fr;gap:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rp .rp-instant.is-flip .rp-instant__face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-height:clamp(360px,34vw,460px)}
.rp .rp-instant.is-flip .rp-instant__face--film{transform:rotateY(180deg)}
.rp .rp-instant.is-flip[data-state="film"] .rp-instant__inner{transform:rotateY(180deg)}
/* la cara de detrás tampoco se enfoca con el tabulador (y Safari no la pinta a través).
   La transición que manda es la del estado de DESTINO: la cara que entra se hace visible al
   momento y la que sale se oculta a mitad del giro (.45 s). Con el retraso en las dos, a mitad
   de giro no se veía ninguna (medido en la vista previa del 24/09). */
.rp .rp-instant.is-flip .rp-instant__face{transition:visibility 0s}
.rp .rp-instant.is-flip[data-state="photo"] .rp-instant__face--film,
.rp .rp-instant.is-flip[data-state="film"] .rp-instant__face--photo{visibility:hidden;transition:visibility 0s .45s}
.rp .rp-instant__switch{display:inline-flex;gap:6px;padding:5px;border-radius:999px;border:1px solid rgba(230,230,230,.16);background:rgba(20,20,22,.6)}
.rp .rp-instant__switch[hidden]{display:none}
.rp .rp-instant__btn{font:500 12px/1 Oswald,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rp-tx2);background:none;border:0;border-radius:999px;padding:10px 18px;margin:0;cursor:pointer;transition:color .32s var(--rp-hover),background .32s var(--rp-hover)}
.rp .rp-instant__btn[aria-pressed="true"]{background:var(--rp-gold);color:#16160F}
.rp .rp-instant__btn:focus-visible{outline:2px solid var(--rp-gold);outline-offset:2px}
@media(max-width:900px){
  .rp .rp-instants.is-flip{grid-template-columns:1fr}
  .rp .rp-instant__inner{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rp .rp-instant.is-flip .rp-instant__inner{transition:none}}
html.rf-claro .rp .rp-instant__switch{background:rgba(255,255,255,.7);border-color:rgba(20,20,22,.14)}
html.rf-claro .rp .rp-instant__btn{color:#3A3A3E}
html.rf-claro .rp .rp-instant__btn[aria-pressed="true"]{color:#16160F}

/* ═══ rp-vf · visor de cámara sobre un vídeo (bloque 3, pieza 8 · 24/09/2026) ══════════════
   Capa decorativa encima de un `rp-media--one` que YA lleva vídeo: cuatro esquinas de encuadre,
   la regla de tercios muy suave, REC arriba a la izquierda y el código de tiempo abajo a la
   izquierda (abajo a la derecha vive el botón de pausa `rp-pp`). Todo `pointer-events:none`:
   no tapa el clic ni el botón. El timecode lee el `currentTime` del propio vídeo (25 fps),
   así que se para con él. Con `prefers-reduced-motion` el punto REC no parpadea. */
.rp .rp-vf{position:absolute;inset:0;z-index:2;pointer-events:none}
.rp .rp-vf__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:33.333% 33.333%;background-position:-1px -1px}
.rp .rp-vf__c{position:absolute;width:clamp(18px,2.4vw,30px);height:clamp(18px,2.4vw,30px);border:0 solid var(--rp-gold)}
.rp .rp-vf__c--tl{top:clamp(12px,1.6vw,20px);left:clamp(12px,1.6vw,20px);border-top-width:2px;border-left-width:2px}
.rp .rp-vf__c--tr{top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);border-top-width:2px;border-right-width:2px}
.rp .rp-vf__c--bl{bottom:clamp(12px,1.6vw,20px);left:clamp(12px,1.6vw,20px);border-bottom-width:2px;border-left-width:2px}
.rp .rp-vf__c--br{bottom:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);border-bottom-width:2px;border-right-width:2px}
.rp .rp-vf__rec{position:absolute;top:clamp(18px,2.4vw,30px);left:clamp(24px,3.2vw,44px);display:inline-flex;align-items:center;gap:7px;font:500 12px/1 Oswald,sans-serif;letter-spacing:.18em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.rp .rp-vf__dot{width:8px;height:8px;border-radius:50%;background:#E13A3A;animation:rp-vf-blink 1.1s steps(1,end) infinite}
@keyframes rp-vf-blink{50%{opacity:.15}}
.rp .rp-vf__tc{position:absolute;bottom:clamp(18px,2.4vw,30px);left:clamp(24px,3.2vw,44px);font:400 13px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.42);padding:5px 9px;border-radius:6px;font-variant-numeric:tabular-nums}
/* el botón de pausa entra DENTRO del encuadre: en su sitio de siempre tapaba la esquina */
.rp .rp-media--one:has(.rp-vf) .rp-pp{right:clamp(36px,4.4vw,60px);bottom:clamp(36px,4.4vw,60px)}
@media(max-width:600px){.rp .rp-media--one:has(.rp-vf) .rp-pp{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.rp .rp-vf__dot{animation:none}}

/* ═══ rp-depthbox · fotos en profundidad dentro de una sección (bloque 3, pieza 2 · 24/09/2026) ═
   Decisión de Pablo (24/09): NUNCA en el hero —el hero lleva una sola foto—; sí dentro de la
   landing. La foto grande de la sección se queda como está y dos fotos pequeñas se montan sobre
   sus esquinas y se desplazan a otra velocidad con el scroll. Sin JS o con
   `prefers-reduced-motion` quedan quietas y visibles; nada arranca en opacity:0. */
.rp .rp-depthbox{position:relative;max-width:var(--rp-content);margin-inline:auto}
.rp .rp-depthbox .rp-media--one{margin-top:0}
.rp .rp-chapter .rp-depthbox{margin-top:40px;margin-bottom:clamp(36px,5vw,64px)}
.rp .rp-depth__l{position:absolute;z-index:1;margin:0;border-radius:calc(var(--rp-radius) * .6);overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.55);outline:1px solid rgba(255,255,255,.10);will-change:transform}
.rp .rp-depth__l img{display:block;width:100%;height:100%;object-fit:cover}
.rp .rp-depth__l--a{width:clamp(120px,19%,240px);aspect-ratio:4/5;top:-7%;right:-2%}
.rp .rp-depth__l--b{width:clamp(110px,17%,210px);aspect-ratio:1/1;bottom:-9%;left:-2%}
@media(max-width:760px){
  .rp .rp-depth__l--a{width:32%;top:-6%;right:3%}
  .rp .rp-depth__l--b{width:30%;bottom:-8%;left:3%}
}

/* ═══ rp-cf · coverflow compacto (bloque 3, pieza 3 · 24/09/2026) ═══════════════════════════
   Tarjetas verticales 3:4 muy juntas: la del centro de frente y las vecinas giradas, por debajo
   de su borde. Sirve para recorrer una SERIE (el día de una boda en orden, varias bodas), no
   para fórmulas con precio (para eso está `rp-gamme`).
   Contrato: sin JS o con `prefers-reduced-motion` es un carrusel horizontal normal con
   scroll-snap y los controles siguen ocultos (`hidden`). Con JS la pista pasa a `is-3d`.
   🧯 Las tarjetas llevan `filter` y `transform`: nada `position:fixed` dentro. */
.rp .rp-cf{position:relative;--w:clamp(210px,21vw,290px);--paso:calc(var(--w) * .34)}
.rp .rp-cf__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:10px var(--rp-gutter) 18px;list-style:none}
.rp .rp-cf__track::-webkit-scrollbar{display:none}
.rp .rp-cf__item{flex:none;width:var(--w);scroll-snap-align:center;margin:0}
.rp .rp-cf__item figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--rp-radius);overflow:hidden;background:#141416}
.rp .rp-cf__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp .rp-cf__item figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.88) 0%,rgba(14,14,16,.25) 42%,rgba(14,14,16,0) 70%)}
.rp .rp-cf__item figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:10px;justify-items:start}
.rp .rp-cf__item h3{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(20px,1.7vw,25px);line-height:1.1;color:#fff}
/* con JS: la pista se vuelve un escenario 3D con las tarjetas apiladas */
.rp .rp-cf.is-3d .rp-cf__track{display:block;position:relative;overflow:hidden;height:calc(var(--w) * 4 / 3 + 40px);padding:20px 0;perspective:1400px;touch-action:pan-y;cursor:grab}
.rp .rp-cf.is-3d .rp-cf__item{position:absolute;top:20px;left:50%;
  transform:translateX(-50%) translateX(calc(var(--off,0) * var(--paso))) rotateY(calc(var(--sgn,0) * -46deg)) translateZ(calc(-1 * min(240px, var(--aoff,0) * 130px))) scale(calc(1 - min(.26, var(--aoff,0) * .1)));
  filter:brightness(calc(1 - min(.55, var(--aoff,0) * .24)));transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s cubic-bezier(.2,.7,.2,1)}
.rp .rp-cf.is-3d .rp-cf__item[data-off="0"]{z-index:6;cursor:default}
.rp .rp-cf.is-3d .rp-cf__item[data-far]{visibility:hidden}
.rp .rp-cf.is-3d .rp-cf__item:not([data-off="0"]) figcaption{visibility:hidden}
.rp .rp-cf__ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.rp .rp-cf__ctl[hidden]{display:none}
.rp .rp-cf__arr{width:48px;height:48px;border-radius:50%;border:1px solid rgba(230,230,230,.18);background:rgba(20,20,22,.6);color:#F2F2F2;cursor:pointer;display:grid;place-items:center;padding:0;margin:0;font:400 22px/1 Oswald,sans-serif;transition:border-color .32s var(--rp-hover),color .32s var(--rp-hover)}
.rp .rp-cf__arr:hover{border-color:var(--rp-gold);color:var(--rp-gold)}
.rp .rp-cf__arr:disabled{opacity:.35;cursor:default}
.rp .rp-cf__arr:focus-visible,.rp .rp-cf__track:focus-visible{outline:2px solid var(--rp-gold);outline-offset:3px}
.rp .rp-cf__n{font:500 13px/1 Oswald,sans-serif;letter-spacing:.18em;color:var(--rp-tx2);min-width:52px;text-align:center}
@media(max-width:760px){.rp .rp-cf{--w:min(62vw,240px);--paso:calc(var(--w) * .30)}}
html.rf-claro .rp .rp-cf__arr{background:rgba(255,255,255,.75);color:#16160F;border-color:rgba(20,20,22,.16)}

/* ═══ rp-flip · la tarjeta que gira (bloque 3, pieza 4 · 24/09/2026) ═════════════════════════
   Sobre una `rp-reason`: delante una foto de la boda con el lugar, detrás el texto de siempre
   (lugar, lo entregado, «Voir l'album»). Gira al pasar el ratón (solo con puntero fino) o con
   el botón de cada cara, que es lo que funciona con el dedo y con el teclado.
   Contrato: sin la clase `is-flip` (sin JS o con `prefers-reduced-motion`) la foto va arriba y
   el texto debajo, todo visible; los botones siguen ocultos. La cara que no está delante lleva
   `visibility:hidden`: su enlace no se enfoca con el tabulador y nada queda a opacity:0. */
.rp .rp-reason.rp-flip{padding:0;background:none;border:0;min-height:0;display:block}
.rp .rp-reason.rp-flip:hover{background:none}
.rp .rp-flip__front{position:relative;aspect-ratio:3/4;border-radius:var(--rp-radius);overflow:hidden;background:#141416}
.rp .rp-flip__front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp .rp-flip__front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.9) 0%,rgba(14,14,16,.3) 45%,rgba(14,14,16,0) 72%)}
.rp .rp-flip__t{position:absolute;left:28px;right:28px;bottom:26px;z-index:1;display:grid;gap:10px;justify-items:start}
.rp .rp-flip__h{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.12;color:#fff;margin:0}
.rp .rp-flip__back{background:var(--rp-card);border-radius:var(--rp-radius);padding:32px;display:grid;align-content:start;gap:12px;margin-top:12px}
.rp .rp-flip__btn{display:none}
/* con giro */
.rp .rp-flip.is-flip{perspective:1600px}
.rp .rp-flip.is-flip .rp-flip__inner{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rp .rp-flip.is-flip .rp-flip__front,.rp .rp-flip.is-flip .rp-flip__back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;margin:0}
.rp .rp-flip.is-flip .rp-flip__back{transform:rotateY(180deg);align-content:center;border:1px solid rgba(201,154,72,.22)}
.rp .rp-flip.is-flip[data-lado="back"] .rp-flip__inner{transform:rotateY(180deg)}
.rp .rp-flip.is-flip .rp-flip__front,.rp .rp-flip.is-flip .rp-flip__back{transition:visibility 0s}
.rp .rp-flip.is-flip[data-lado="front"] .rp-flip__back,.rp .rp-flip.is-flip[data-lado="back"] .rp-flip__front{visibility:hidden;transition:visibility 0s .4s}
.rp .rp-flip.is-flip .rp-flip__btn{display:inline-flex;align-items:center;gap:6px;background:rgba(14,14,16,.55);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:9px 14px;margin:0;font:500 12px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.rp .rp-flip.is-flip .rp-flip__back .rp-flip__btn{justify-self:start;background:none;color:var(--rp-tx2);border-color:rgba(230,230,230,.18);margin-top:8px}
.rp .rp-flip__btn:focus-visible{outline:2px solid var(--rp-gold);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .rp .rp-flip.is-flip:hover .rp-flip__inner{transform:rotateY(180deg)}
  .rp .rp-flip.is-flip:hover .rp-flip__back{visibility:visible;transition:visibility 0s}
  .rp .rp-flip.is-flip:hover .rp-flip__front{visibility:hidden;transition:visibility 0s .4s}
}

/* ═══ rp-rack · el enfoque (bloque 3, pieza 7 · 24/09/2026) ══════════════════════════════════
   Sobre un `rp-media--one` con vídeo: al entrar en pantalla el vídeo pasa de desenfocado a
   nítido (1,8 s) mientras gira un anillo de enfoque pequeño, arriba a la derecha. Se rearma al
   salir del todo. Contrato: el estado de REPOSO es nítido (sin `filter` en el CSS base); solo
   la clase `rp-rack--flou`, que pone el JS, desenfoca. Al quitarla, el filtro vuelve a `none`
   —no a `blur(0)`: `error_blur_cero_no_es_none_y_rompe_position_fixed`—. Sin JS o con
   `prefers-reduced-motion` nunca se desenfoca. */
.rp .rp-rack > img,.rp .rp-rack > video{transition:filter 1.8s cubic-bezier(.2,.7,.2,1),transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rp .rp-rack.rp-rack--flou > img,.rp .rp-rack.rp-rack--flou > video{filter:blur(14px) saturate(.7);transform:scale(1.04)}
.rp .rp-rack.rp-rack--seco > img,.rp .rp-rack.rp-rack--seco > video,.rp .rp-rack.rp-rack--seco .rp-rack__ring{transition:none}
.rp .rp-rack__lens{position:absolute;z-index:2;top:clamp(12px,1.8vw,24px);right:clamp(12px,1.8vw,24px);width:clamp(54px,7vw,104px);aspect-ratio:1;pointer-events:none}
.rp .rp-rack__ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(28,28,30,.92) 0%,rgba(14,14,16,.9) 70%,rgba(5,5,6,.95) 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.45);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rp .rp-rack.rp-rack--flou .rp-rack__ring{transform:rotate(-230deg)}
.rp .rp-rack__tick{position:absolute;left:50%;top:50%;font:500 clamp(7px,.72vw,10px)/1 Oswald,sans-serif;letter-spacing:.04em;color:rgba(230,230,230,.8);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(clamp(54px,7vw,104px) * -.34)) rotate(calc(-1 * var(--a)))}
.rp .rp-rack__needle{position:absolute;left:50%;top:5%;width:2px;height:13%;background:var(--rp-gold);transform:translateX(-50%);border-radius:1px}
.rp .rp-rack__dot{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,154,72,.7);transform:translate(-50%,-50%)}

/* ═══ rp-film · la tira de película (bloque 3, pieza 9 · 24/09/2026) ════════════════════════════
   Diez fotogramas 3:4 de una misma boda, con perforaciones y marca de borde a todo lo largo (fondos
   repetidos de la propia `<ol>`, no tapones en los extremos). La base es una fila que se desliza con el dedo o el
   trackpad (`overflow-x:auto`): así queda sin JS y con `prefers-reduced-motion`. El JS solo mueve
   su `scrollLeft` —sola de ida y vuelta, y con el scroll de la página— y se aparta en cuanto la
   persona la toca. Nada arranca oculto. */
.rp .rp-film{width:100%;min-width:0;max-width:var(--rp-content);margin-inline:auto;border-radius:var(--rp-radius);overflow:hidden;background:#050506;position:relative}
.rp .rp-chapter .rp-film{margin-top:40px}
.rp .rp-film__track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain;outline:none}
.rp .rp-film__track::-webkit-scrollbar{display:none}
.rp .rp-film__track:focus-visible{box-shadow:inset 0 0 0 2px var(--rp-gold)}
.rp .rp-film__strip{display:flex;gap:4px;width:max-content;margin:0;padding:36px 22px;list-style:none;
  background:radial-gradient(circle,#050506 36%,transparent 38%) 0 0/26px 14px repeat-x,radial-gradient(circle,#050506 36%,transparent 38%) 0 100%/26px 14px repeat-x,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='18'%3E%3Ctext x='0' y='12.5' font-family='Menlo,Consolas,monospace' font-size='9' letter-spacing='2.5' fill='%235a5a5c'%3ERUFINO 24 %C2%B7%3C/text%3E%3C/svg%3E") 0 14px/132px 18px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='18'%3E%3Ctext x='0' y='12.5' font-family='Menlo,Consolas,monospace' font-size='9' letter-spacing='2.5' fill='%235a5a5c'%3ERUFINO 24 %C2%B7%3C/text%3E%3C/svg%3E") 0 calc(100% - 14px)/132px 18px repeat-x,
  linear-gradient(#2c2c2e,#2c2c2e) 0 0/100% 14px no-repeat,linear-gradient(#2c2c2e,#2c2c2e) 0 100%/100% 14px no-repeat,#050506}
.rp .rp-film__frame{flex:none;position:relative;z-index:1;width:clamp(112px,16vw,232px);aspect-ratio:3/4;margin:0;border-radius:3px;overflow:hidden;background:var(--rp-card);outline:2px solid #000;outline-offset:-2px}
.rp .rp-film__frame img{display:block;width:100%;height:100%;object-fit:cover}
.rp .rp-film__n{position:absolute;left:6px;bottom:6px;z-index:2;font:11px/1 Menlo,Consolas,monospace;color:#fff;background:rgba(0,0,0,.55);padding:3px 6px;border-radius:4px}

/* ═══ rp-cross · textos que cruzan (bloque 3, pieza 12 · 24/09/2026) ═════════════════════════════
   Dos líneas de tipografía grande que se cruzan en sentidos opuestos, arriba de una sección que ya
   existía (el cierre del pilar del dúo). Solo dice lo que la página ya dice. Sin JS o con
   `prefers-reduced-motion`: las dos líneas quietas, centradas y partidas en renglones si no caben.
   Con JS (`.is-on`) van en una sola línea y el carril recorta: nunca hay scroll horizontal. */
.rp .rp-sec--cross{padding-top:clamp(28px,3.4vw,52px)}
.rp .rp-cross{margin:0 0 clamp(44px,5vw,80px);font-family:Oswald,Impact,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.rp .rp-cross__row{position:relative;width:100%;overflow:hidden;padding-block:6px}
.rp .rp-cross__track{display:flex;justify-content:center;gap:clamp(36px,4.4vw,64px);width:auto}
.rp .rp-cross__line{white-space:normal;text-align:center;text-wrap:balance}
.rp .rp-cross__row--a .rp-cross__line{font-size:clamp(34px,6.4vw,92px);color:var(--rp-tx)}
.rp .rp-cross__row--b .rp-cross__line{font-size:clamp(26px,4.8vw,68px);color:var(--rp-gold)}
.rp .rp-cross__dup{display:none}
.rp .rp-cross.is-on .rp-cross__track{justify-content:flex-start;width:max-content;will-change:transform}
.rp .rp-cross.is-on .rp-cross__line{white-space:nowrap}
.rp .rp-cross.is-on .rp-cross__dup{display:block}
/* rp-cross en modo día: la hoja del tema pinta todo `span` de #48566B con !important
   (`html.rf-claro body[class] :is(p,span,…)`, ver el bloque de s466 más arriba). Medido en el
   dúo el 24/09 con el CSSOM: las dos líneas salían #48566B. Se devuelven a sus tokens. */
html.rf-claro .rp .rp-cross__row--a .rp-cross__line{color:var(--rp-tx)!important}
html.rf-claro .rp .rp-cross__row--b .rp-cross__line{color:var(--rp-gold)!important}
/* rp-film en modo día: la tira es un objeto oscuro (como una foto con velo) y sus números van
   en blanco sobre su pastilla negra; la regla del tema los ponía #48566B con !important. */
html.rf-claro .rp .rp-film__n{color:#fff!important}

/* ═══ rp-trazo · el trazo (bloque 3, pieza 13 · 24/09/2026) ════════════════════════════════════
   Un hilo fino, fijo a la derecha en el margen, que se dibuja con el scroll de TODA la página y, a
   mitad de recorrido, forma el motivo del universo. Lo monta el JS colgado de `body` —nunca dentro
   de `main`: el tema le pone `filter:blur(0)` y eso desancla todo `position:fixed`
   (`error_blur_cero_no_es_none_y_rompe_position_fixed`)—. Decoración pura: sin JS no existe; con
   `prefers-reduced-motion` se ve entero y quieto. Por debajo del nav (50), del aviso de promociones
   (95) y de la barra móvil (95). No se lleva los clics. */
.rp-trazo{position:fixed;top:50%;right:clamp(2px,calc(25vw - 332px),28px);z-index:40;width:clamp(16px,calc(50vw - 648px),56px);height:min(60vh,520px);transform:translateY(-50%);pointer-events:none;color:#C99A48}
html.rf-claro body[class] .rp-trazo{color:#133157!important}   /* la hoja del tema pinta todo div de #48566B con !important y especificidad (0,2,3): aquí (0,3,2) */
.rp-trazo svg{display:block;width:100%;height:100%;overflow:visible}
.rp-trazo path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
@media (max-width:760px){.rp-trazo{height:34vh}}
@media print{.rp-trazo{display:none}}

/* ═══ rp-deco · la caja de un vídeo de decoración (vídeos de Gemini · 24/09/2026) ═══════════════
   Un objeto en su caja, dentro de una sección y con el texto al lado; nunca fondo de página y
   nunca presentado como trabajo propio (`feedback_video_ia_es_decoracion_no_prueba`). Uno por
   página. Más pequeña que `rp-media--one`: 720 px como mucho, 16:9. El `<video>` lleva su póster:
   sin JS, con `prefers-reduced-motion` o antes de cargar, se ve el póster. Los bucles usan el
   mecanismo de siempre (`data-rp-video`: arranca al 50 % visible, se para al salir, `rp-pp` pausa);
   el de avance con el scroll lleva `data-rp-scrub` y no se reproduce nunca solo. */
.rp .rp-deco{position:relative;width:100%;max-width:720px;margin:clamp(32px,4vw,56px) auto 0;aspect-ratio:16/9;border-radius:var(--rp-radius);overflow:hidden;background:#000}
.rp .rp-deco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rp .rp-deco .rp-pp{z-index:2;right:14px;bottom:14px;width:44px;height:44px}

/* ═══════════ s537 · 26/09/2026 · LOS ENLACES GRANDES EN MÓVIL ═══════════
   `rp-router` pinta sus enlaces a 28 px en todas las pantallas. En un móvil de 390 px tres
   enlaces seguidos ocupaban media pantalla y los largos («Vidéaste de mariage à Toulouse»)
   partían en dos líneas. Por debajo de 600 px bajan a 22 px y se separan menos. */
@media(max-width:600px){.rp .rp-router a{font-size:22px}.rp-router{gap:18px 28px}}

/* s537 · los vídeos de `rp-gitem` se ocultan hasta que se pulsa play. La imagen de debajo es el
   mismo fotograma, así que el `poster` sobraba: con él, cada visita bajaba al entrar los pósters
   de todos los vídeos (378 KB en la home), compitiendo con la foto principal. Al acabar el vídeo
   se quita `is-playing` y vuelve a verse la imagen. Medido antes de publicar: las dos únicas
   páginas con esta pieza (home y pilar vidéaste) llevan <img> debajo de cada vídeo. */
.rp .rp-gitem>video{opacity:0;transition:opacity .3s}
.rp .rp-gitem.is-playing>video{opacity:1}

/* ═══ Sesión A · /mariages/ · 27/09/2026 ════════════════════════════════════════════════
   Bloque para premium.css (cerrojo: Sesión C). En local se carga aparte, después de premium.
   Todo va con modificadores nuevos o con .rp delante: no cambia nada que no lo pida. */

/* utilidad: texto solo para lectores de pantalla */
.rp .rp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* T6 · arreglos de la auditoría (vienen de demo_reel/piezas/comp_3_auditoria.css) ───────── */
/* 7 · sin cursor seguidor en las páginas del sistema */
body:has(.rp) .rf-cursor{display:none!important}
body:has(.rp){cursor:auto}
/* 8 · los botones responden al pulsar */
.rp .rp-btn{transition:background .2s var(--rp-hover),transform .12s var(--rp-ease)}
.rp .rp-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.rp .rp-btn:active{transform:none}}
/* 9 · zonas táctiles de 44 px en pantallas táctiles */
@media (pointer:coarse){
  .rp .rp-link,.rp .rp-chap a,.rp .rp-chipbar button,.rp .rp-chip{min-height:44px!important;display:inline-flex;align-items:center}
}
/* 13 · un solo borde izquierdo entre 900 y 1299 px */
@media (min-width:900px) and (max-width:1299px){.rp .rp-content{padding-inline:clamp(20px,3.5vw,56px)}}
/* 14 · enlaces del footer en una línea */
.rf-footer a{white-space:nowrap}
/* 15 · los números de la tira de película sin cuarta familia tipográfica */
.rp-film__n{font-family:Montserrat,sans-serif!important;font-variant-numeric:tabular-nums}

/* T2 · rp-hero--pliegue: en móvil la foto se acorta para que el «Estimer» entre en la primera
   pantalla (375×812). Solo donde se pone la clase. */
@media (max-width:760px){
  .rp .rp-hero--pliegue{padding-top:86px}  /* la cabecera fija (rfh-nav) mide 86 px y tapaba las caras */
  .rp .rp-hero--pliegue .rp-hero__media{aspect-ratio:4/3}
  .rp .rp-hero--pliegue .rp-hero__body{gap:16px}
}

/* T7 · rp-vdlg: un vídeo que se abre encima de la página, en <dialog> nativo (Esc y foco gratis).
   Sin JS, el enlace lleva a su página. Patrón «Hero Video Dialog» de Magic UI, reescrito. */
.rp .rp-vdlg-open{display:inline-flex;align-items:center;gap:12px;justify-self:start;font-family:Oswald,sans-serif;font-weight:500;
  font-size:15px;letter-spacing:.04em;color:var(--rp-tx);text-decoration:none;min-height:44px}
.rp .rp-vdlg-open small{white-space:nowrap;font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.06em;color:var(--rp-tx2)}
.rp .rp-vdlg-open__i{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--rp-gold);display:grid;place-items:center;
  transition:background .25s var(--rp-hover)}
.rp .rp-vdlg-open__i::before{content:"";margin-left:3px;border-left:10px solid var(--rp-gold);border-top:6px solid transparent;border-bottom:6px solid transparent}
.rp .rp-vdlg-open:hover .rp-vdlg-open__i{background:var(--rp-gold)}
.rp .rp-vdlg-open:hover .rp-vdlg-open__i::before{border-left-color:var(--rp-bg0)}
.rp-vdlg{border:0;padding:0;background:transparent;width:min(1100px,92vw);max-width:none;overflow:visible}
.rp-vdlg::backdrop{background:rgba(8,8,10,.88)}
.rp-vdlg video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--rp-radius);background:#000}
.rp-vdlg__x{position:absolute;top:-52px;right:0;width:44px;height:44px;min-height:0!important;padding:0!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.35)!important;background:transparent!important;color:#fff!important;font:400 18px/1 Montserrat,sans-serif!important;cursor:pointer}
.rp-vdlg[open]{animation:rp-vdlg-in .3s var(--rp-ease)}
@keyframes rp-vdlg-in{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.rp-vdlg[open]{animation:none}}

/* T7 · objetos que se destacan al pasar el ratón (Focus Cards), solo con ratón y sin esconder nada */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #objets .rp-tile{transition:opacity .35s var(--rp-hover)}
  #objets .rp-tile__media img{transition:filter .35s var(--rp-hover),transform .6s var(--rp-hover)}
  #objets .rp-track:has(.rp-tile:hover) .rp-tile:not(:hover){opacity:.55}
  #objets .rp-track:has(.rp-tile:hover) .rp-tile:not(:hover) .rp-tile__media img{filter:blur(3px) saturate(.7)}
  #objets .rp-tile:hover .rp-tile__media img{transform:scale(1.03)}
}

/* T4 · rp-cmp--fiches: una fila por fórmula; por debajo de 760 px, una tarjeta por fórmula. */
.rp .rp-cmp--fiches th:first-child{width:auto;min-width:240px}
.rp .rp-cmp--fiches td:nth-child(2),.rp .rp-cmp--fiches td:last-child .rp-link{white-space:nowrap}
.rp .rp-cmp--fiches tbody th .rp-h3{display:block}
.rp .rp-cmp--fiches tbody th .rp-pos{display:block;margin-top:6px;font-size:14px;color:var(--rp-tx2)}
.rp .rp-cmp--fiches tbody td:nth-child(3){font-family:Oswald,sans-serif;font-size:22px;color:var(--rp-tx)}
@media (max-width:760px){
  .rp .rp-cmp--fiches{overflow:visible;border:0;background:transparent}
  .rp .rp-cmp--fiches table{min-width:0!important;display:block}
  .rp .rp-cmp--fiches thead{display:none}
  .rp .rp-cmp--fiches tbody{display:grid;gap:16px}
  .rp .rp-cmp--fiches tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rp-line);border-radius:var(--rp-radius);background:var(--rp-card)}
  .rp .rp-cmp--fiches tbody th,.rp .rp-cmp--fiches td:nth-child(4),.rp .rp-cmp--fiches td:last-child{grid-column:1/-1}
  .rp .rp-cmp--fiches td:nth-child(2),.rp .rp-cmp--fiches td:nth-child(3){border-bottom:0!important}
  .rp .rp-cmp--fiches th,.rp .rp-cmp--fiches td{display:block;width:auto!important;min-width:0!important;font-size:15px!important;padding:12px 18px!important}
  .rp .rp-cmp--fiches tbody th{padding-top:18px!important}
  .rp .rp-cmp--fiches td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rp-tx2)}
  .rp .rp-cmp--fiches tbody td:nth-child(3){font-size:22px!important}
  .rp .rp-cmp--fiches td:last-child{border-bottom:0;padding-bottom:18px!important}
}

/* T5 · la cita temprana: una sección corta, sin fundido, entre «Points forts» y «Le jour J» */
.rp .rp-sec--cita{padding-block:clamp(40px,5vw,72px)}
.rp .rp-cita--courte{padding-top:40px}
.rp .rp-cita--courte .rp-cita__src{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}

/* T8 · rp-hero__t: un solo <h1> que lleva la línea de búsqueda y el titular. El <h1> se anula
   (all:unset) y hace de rejilla con el mismo hueco que el cuerpo del hero: cada línea conserva su
   clase y su aspecto. Medido: 0 px de diferencia a 1440, 768 y 375 px. Vale para cualquier hero. */
.rp .rp-hero h1.rp-hero__t{all:unset;display:grid;gap:inherit}
.rp .rp-hero .rp-hero__t>.rp-ov{display:block;line-height:1.55;text-wrap:pretty}
.rp .rp-hero .rp-hero__t>.rp-h1{display:block}

/* ═══ rp-avis · reseñas numeradas (pieza de la Sesión E, colocada por la Sesión A en #avis de /mariages/ · 27/09/2026) ═══
   Sin JS: carril con scroll-snap. Con JS: contador, barra, botones 44×44 y aviso aria-live. */
/* A · numeradas */
.rp-avis{max-width:var(--rp-statement);margin-inline:auto}
.rp-avis__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.rp-avis__head .rp-label{text-align:left}
.rp-avis__count{margin:0;font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(14px,1.15vw,17px);
  letter-spacing:.06em;color:var(--rp-tx2);font-variant-numeric:tabular-nums}
.rp-avis__n{color:var(--rp-tx)}
.rp-avis__bar{margin-top:14px;height:2px;background:var(--rp-line);border-radius:2px;overflow:hidden}
.rp-avis__fill{display:block;height:100%;background:var(--rp-gold);transition:width .45s var(--rp-ease)}
.rp-avis__track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-behavior:smooth;
  scrollbar-width:thin}
.rp-avis__track:focus-visible{outline:2px solid var(--rp-goldl);outline-offset:6px;border-radius:8px}
.rp-avis__item{scroll-snap-align:start;display:flex;align-items:flex-start;justify-content:center;padding:24px 4px}
.rp-avis .rp-cita{margin:0}
.rp-avis .rp-cita__q{font-size:clamp(20px,2.1vw,30px)}
.rp-avis__nav{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:12px}
.rp-avis__nav .rp-link{margin-left:12px}
.rp-avis__nav .rp-link{display:inline-flex;align-items:center;min-height:44px}
.rp-avis__btn{display:none;flex:0 0 44px;width:44px !important;min-width:44px !important;height:44px !important;min-height:0 !important;padding:0 !important;margin:0 !important;box-sizing:border-box;border-radius:50%;
  border:1px solid var(--rp-line);background:transparent;color:var(--rp-tx);cursor:pointer;position:relative;
  transition:border-color .3s var(--rp-hover)}
.rp-avis__btn::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-5px 0 0 -3px;
  border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
.rp-avis__btn--next::before{margin-left:-7px;transform:rotate(-135deg)}
.rp-avis__btn:hover{border-color:var(--rp-gold)}
.rp-avis__btn:active{transform:scale(.96)}
.rp-avis__btn:focus-visible{outline:2px solid var(--rp-goldl);outline-offset:3px}
.rp-avis__btn[disabled]{opacity:.35;cursor:default}
.rp-avis__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Con JS: botones visibles, barra de scroll fuera (el contador ya dice dónde estás) */
.rp-avis.is-on .rp-avis__btn{display:inline-block}
.rp-avis.is-on .rp-avis__track{scrollbar-width:none;align-items:start;overflow-y:hidden;transition:height .45s var(--rp-ease)}
.rp-avis.is-on .rp-avis__track::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
  .rp-avis__track{scroll-behavior:auto}
  .rp-avis__fill,.rp-avis.is-on .rp-avis__track{transition:none}
}
@media (max-width:760px){
  .rp-avis__item{padding:16px 0}
}
html.rf-claro .rp-avis__n{color:var(--rp-tx) !important}

/* ═══ Sesión A · ronda 2 · 27/09/2026 (Pablo: «arreglos pequeños») ═══
   1 · rp-router: zona táctil de 44 px sin cambiar el corte de línea (el enlace sigue en línea; el padding
       vertical agranda la zona que se pulsa, no la línea). Medido: 34 → 44 px en home, /lifestyle/ y un pilar,
       a 375 y 320, también en modo día; mismas líneas y mismos anchos.
   2 · rp-avis: en móvil «Tous les témoignages» va en su propia línea, lejos de la pestaña fija «OFFRE».
   3 · rp-cmp--fiches: en móvil la columna de fotos gana ancho para que «Photos, au minimum» quepa en una línea. */
@media (pointer:coarse){.rp .rp-router a{padding-block:5px}}
@media (max-width:760px){
  .rp .rp-avis__nav{flex-wrap:wrap}
  .rp .rp-avis__nav .rp-link{flex-basis:100%;justify-content:center;margin-left:0}
  .rp .rp-cmp--fiches tr{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .rp .rp-cmp--fiches td[data-l]::before{white-space:nowrap}
  .rp .rp-cmp--fiches td:nth-child(2){white-space:normal}
}
/* 3 bis · a 320 px la etiqueta sin corte medía 8 px más que su celda: menos espaciado por debajo de 360. */
@media (max-width:359px){.rp .rp-cmp--fiches td[data-l]::before{letter-spacing:.02em}}

/* ══ Sesión D · 27/09/2026 · rp-ba (antes/después) y rp-avisf (franja de reseñas), piezas de la Sesión E ══
   Montadas por la Sesión D con OK de Pablo: rp-ba en /labo-premium/, rp-avisf en la home.
   CSS de E con el prefijo .rp añadido (regla de esta hoja: fuera de .rp no cambia un píxel).
   El JS de rp-avisf ya estaba en premium.js (lo subió la Sesión A); el de rp-ba va al final de premium.js. */
/* rp-ba · antes / después con tirador (Sesión E, 27/09/2026)
   Base sin JS: las dos fotos partidas al 50 % con una línea fija; el tirador no aparece
   (un control que no hace nada engaña). Con JS: .is-on muestra el range y lo mueve. */
.rp .rp-ba{margin:0;--rp-ba-x:50%}
.rp .rp-ba__stage{position:relative;overflow:hidden;border-radius:var(--rp-radius);background:var(--rp-card);
  aspect-ratio:3/2;isolation:isolate;touch-action:pan-y}
.rp .rp-ba__img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.rp .rp-ba__avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--rp-ba-x)) 0 0)}
.rp .rp-ba__line{position:absolute;top:0;bottom:0;left:var(--rp-ba-x);width:2px;margin-left:-1px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none;z-index:2}
.rp .rp-ba__knob{display:none;position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:rgba(14,14,16,.72);border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.rp .rp-ba__knob::before,.rp .rp-ba__knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border:solid #fff;border-width:0 0 2px 2px;margin-top:-4px}
.rp .rp-ba__knob::before{left:11px;transform:rotate(45deg)}
.rp .rp-ba__knob::after{right:11px;transform:rotate(-135deg)}
.rp .rp-ba__tag{position:absolute;top:16px;z-index:2;display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:980px;background:rgba(14,14,16,.62);color:#fff;font-family:Oswald,sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;line-height:1;pointer-events:none}
.rp .rp-ba__tag--avant{left:16px}
.rp .rp-ba__tag--apres{right:16px}
/* El range cubre la foto entera: se arrastra desde cualquier punto y el teclado usa las flechas nativas.
   Transparente por fondo, no por opacity (el banco cuenta los opacity:0). */
.rp .rp-ba__range{display:none;position:absolute;inset:0;z-index:3;width:100% !important;height:100% !important;min-height:0 !important;max-width:none !important;padding:0 !important;margin:0 !important;border:0 !important;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize}
.rp .rp-ba__range::-webkit-slider-runnable-track{height:100%;background:transparent}
.rp .rp-ba__range::-moz-range-track{height:100%;background:transparent}
.rp .rp-ba__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:100%;background:transparent;border:0}
.rp .rp-ba__range::-moz-range-thumb{width:44px;height:100%;background:transparent;border:0}
.rp .rp-ba__range:focus{outline:none}
.rp .rp-ba.is-on .rp-ba__range{display:block}
.rp .rp-ba.is-on .rp-ba__knob{display:block}
.rp .rp-ba.is-on .rp-ba__stage:has(.rp-ba__range:focus-visible) .rp-ba__knob{outline:3px solid var(--rp-goldl);outline-offset:3px}
.rp .rp-ba__cap{margin-top:14px;font-size:14px;line-height:1.5;color:var(--rp-tx2);text-align:center}
@media (max-width:760px){
  .rp .rp-ba__stage{border-radius:18px;aspect-ratio:4/3}
  .rp .rp-ba__tag{top:12px}
  .rp .rp-ba__tag--avant{left:12px}.rp .rp-ba__tag--apres{right:12px}
}
/* Modo día: las etiquetas y el tirador van sobre la foto, se quedan oscuros (como el velo de rp-cta). */
html.rf-claro .rp .rp-ba__tag{background:rgba(14,14,16,.62) !important;color:#fff !important}
html.rf-claro .rp .rp-ba__cap{color:var(--rp-tx2) !important}

/* B · franja */
.rp .rp-avisf__vp{overflow-x:auto;scrollbar-width:thin;padding-block:4px}
.rp .rp-avisf__track{list-style:none;margin:0;padding:0 var(--rp-gutter);display:flex;gap:20px;width:max-content}
.rp .rp-avisf__item{flex:0 0 auto;width:min(380px,78vw);padding:22px 24px;border:1px solid var(--rp-line);
  border-radius:20px;background:var(--rp-card)}
.rp .rp-avisf__q{margin:0;font-family:'PlayfairRP',Georgia,serif;font-style:italic;font-weight:600;font-size:18px;
  line-height:1.4;color:var(--rp-tx)}
.rp .rp-avisf__who{margin:12px 0 0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-avisf__ctl{display:none;margin-top:16px;text-align:center}
.rp .rp-avisf__pause{min-height:0 !important;height:44px;padding:0 18px !important;border-radius:980px;border:1px solid var(--rp-line);
  background:transparent;color:var(--rp-tx2);font-size:13px;letter-spacing:.04em;cursor:pointer}
.rp .rp-avisf__pause:focus-visible{outline:2px solid var(--rp-goldl);outline-offset:3px}
/* Con JS y sin reduced-motion: desfile continuo, copias con aria-hidden, pausa al pasar o enfocar */
.rp .rp-avisf.is-on .rp-avisf__vp{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rp .rp-avisf.is-on .rp-avisf__track{padding:0;animation:rp-avisf-go var(--rp-avisf-dur,60s) linear infinite}
.rp .rp-avisf.is-on .rp-avisf__ctl{display:block}
.rp .rp-avisf.is-on:hover .rp-avisf__track,.rp .rp-avisf.is-on:focus-within .rp-avisf__track,
.rp .rp-avisf.is-paused .rp-avisf__track{animation-play-state:paused}
@keyframes rp-avisf-go{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rp .rp-avisf.is-on .rp-avisf__vp{overflow-x:auto;-webkit-mask:none;mask:none}
  .rp .rp-avisf.is-on .rp-avisf__track{animation:none;padding:0 var(--rp-gutter)}
  .rp .rp-avisf.is-on .rp-avisf__ctl{display:none}
}

html.rf-claro .rp .rp-avisf__item{background:var(--rp-card) !important}
html.rf-claro .rp .rp-avisf__q{color:var(--rp-tx) !important}
/* El JS del tema Anita envuelve todo <input> en <div class="anita-input-wrap"> (relative, 0 px de alto):
   el range absoluto se estiraba dentro de esa caja y medía 0 px, así que no se podía arrastrar
   (solo teclado). Medido en /labo-premium/ el 27/09; en el banco no pasaba porque no hay tema.
   El envoltorio pasa a cubrir la foto entera. */
.rp .rp-ba .anita-input-wrap{position:absolute;inset:0;z-index:3;margin:0;padding:0;height:auto}

/* ═══ Sesión A · ronda 3 · 28/09/2026 · la línea de fuente de la cita corta (rp-cita--courte, solo /mariages/)
   Sus dos enlaces medían 19 px de alto en táctil (hallazgo de la Sesión C). El contenedor ya es flex:
   min-height en cada enlace, sin tocar el texto. Medido inyectado en LIVE a 375 y 320: 44 px, sin pisarse. */
@media (pointer:coarse){
  .rp .rp-cita--courte .rp-cita__src{row-gap:0}
  .rp .rp-cita--courte .rp-cita__src a{display:inline-flex;align-items:center;min-height:44px}
}

/* ═══ Sesión C · 28/09/2026 · rp-ovi y rp-bg2, probadas en el banco de piezas antes de usarlas ═══════════════
   Las dos estaban construidas y sin estrenar (Arsenal §1). Estrenarlas en el banco (PROTOTIPOS/banco_piezas/,
   27/09) destapó un defecto en cada una:
   · rp-ovi es `inline-flex`: en un capítulo centrado se quedaba pegada a la izquierda del carril (x≈90 px a 1440)
     donde rp-label, la pieza a la que sustituye, sale centrada. Se centra igual que rp-label (l. 1176).
   · rp-bg2 no tenía tono de día: la sección seguía #08080A con la tinta de día encima → titular a 1,53:1. En día
     toma un escalón por debajo de rp-bg1 (#EEF1F5), para seguir rompiendo la alternancia sin perder las tarjetas
     blancas. #133157 sobre #E7EBF1 ≈ 11:1 · #48566B ≈ 6,3:1. */
.rp .rp-ovi{display:flex;justify-content:center;flex-wrap:wrap;text-align:center}
html.rf-claro .rp .rp-bg2{background:#E7EBF1}

/* ═══ Sesión A · ronda 4 · 28/09/2026 (Pablo) ═══
   1 · /mariages/ en escritorio: el texto del hero baja ~80 px para que el titular no cruce la cara de la
       novia (foto miguel-092). Solo el hero con --pliegue. Medido a 1280, 1440 y 1920.
   2 · Tableta (761-899 px): la regla de móvil `.rp-hero--cine{min-height:0}` llega hasta 899 y aplastaba el
       hero (386 px, texto bajo la cabecera fija de 140 px). En esa franja el hero hace como en móvil: foto
       arriba bajo la cabecera, texto debajo, sin tapar a nadie. Medido a 768 y 890 en /mariages/,
       /lifestyle/, /maternite-famille/ y /evenements/: 0 scroll lateral. */
@media (min-width:900px){.rp .rp-hero--pliegue .rp-hero__body{padding-bottom:20px}}
@media (min-width:761px) and (max-width:899px){
  .rp .rp-hero--cine{display:block;min-height:0;padding-top:140px}
  .rp .rp-hero--cine .rp-hero__media{position:relative;inset:auto;aspect-ratio:3/2}
  .rp .rp-hero--cine .rp-hero__body{padding-top:24px;padding-bottom:0}
}

/* Sesión E · 28/09/2026 (s543, OK de Pablo): franja de reseñas de la home, cada tarjeta a su altura.
   Antes todas medían lo que la más larga (Miguel) y las cortas quedaban con hueco debajo. */
.rp .rp-avisf__track{align-items:flex-start}

/* ══ Sesión D · 28/09/2026 · CLS del coverflow rp-cf y zona táctil de la pausa del rp-reel ══════════
   1) CLS 0,50 en /services/photographe-mariage-toulouse/ (medido con CPU ×4 y red lenta): con la red lenta
      la página se pinta ANTES de que llegue premium.js (diferido) y, al llegar, pinta() coloca las tarjetas
      en 3D: Chrome lo cuenta como salto. Aquí la colocación inicial (tarjeta 1 delante) sale ya del CSS en
      el primer pintado, con la clase rp-js que pone rufino-premium.php en el <head>. Cuando llega el JS
      escribe los mismos valores: no se mueve nada. Sin JS o con reduced-motion: el carrusel plano de siempre.
      Descartado midiendo: alto de la pista, flechas, scrollLeft, overflow, display y perspective.
   2) La pausa del carrusel del hero de la home medía 26×26 (bajo el mínimo táctil de 44). Ahora el botón
      mide 44×44 y el círculo de 26 se dibuja dentro; los márgenes negativos le dejan el mismo sitio. */
@media (prefers-reduced-motion:no-preference){
html.rp-js .rp .rp-cf .rp-cf__track{display:block;position:relative;overflow:hidden;height:calc(var(--w) * 4 / 3 + 40px);padding:20px 0;perspective:1400px;touch-action:pan-y;cursor:grab}
html.rp-js .rp .rp-cf .rp-cf__item{position:absolute;top:20px;left:50%;transform:translateX(-50%) translateX(calc(var(--off,0) * var(--paso))) rotateY(calc(var(--sgn,0) * -46deg)) translateZ(calc(-1 * min(240px, var(--aoff,0) * 130px))) scale(calc(1 - min(.26, var(--aoff,0) * .1)));filter:brightness(calc(1 - min(.55, var(--aoff,0) * .24)))}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(1){--off:0;--aoff:0;--sgn:0;z-index:6}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(2){--off:1;--aoff:1;--sgn:1;z-index:5}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(3){--off:2;--aoff:2;--sgn:1;z-index:4}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(4){--off:3;--aoff:3;--sgn:1;z-index:3}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(n+5){--off:4;--aoff:3;--sgn:1;z-index:2;visibility:hidden}
html.rp-js .rp .rp-cf .rp-cf__item:nth-child(n+2) figcaption{visibility:hidden}
html.rp-js .rp .rp-cf .rp-cf__ctl[hidden]{display:flex;visibility:hidden}
}
.rp .rp-reel__pause{width:44px;height:44px;margin:0 -5px 0 -9px;border:0;border-radius:0;background:none;position:relative}
.rp .rp-reel__pause::before{content:"";position:absolute;left:9px;top:9px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(230,230,230,.22);transition:border-color .32s var(--rp-hover)}
.rp .rp-reel__pause:hover{border-color:transparent}
.rp .rp-reel__pause:hover::before{border-color:var(--rp-gold)}

/* ═══ Sesión C · 28/09/2026 (2) · modo día: texto dentro de botones que no heredaba su tinta ═══════════════════════
   Orden de Pablo: «arregla rp-chap y los contadores en modo día». Lo midió el banco de piezas (contraste, 27-28/09):
   la hoja del tema claro pinta todo span/em de #48566B con `html.rf-claro body[class] :is(p, span, …)` !important,
   especificidad (0,2,3). Dentro de un botón eso pisa la tinta del botón:
   · «mon mariage» en el botón de rp-chap: #48566B sobre ámbar #FCB51F = 4,17:1 (14 px; hace falta 4,5).
   · el contador de rp-chipbar («Tout 15»): #48566B al 60 % de opacidad y 10 px, sobre ámbar o blanco.
   Aquí heredan el color de su botón (en día, la tinta #133157 sobre ámbar ≈ 7,6:1) con un selector (0,3,2) que gana al
   del tema; el contador, además, a opacidad plena solo en día. Nada cambia en noche. */
html.rf-claro .rp .rp-btn span,
html.rf-claro .rp .rp-btn em{color:inherit!important}
html.rf-claro .rp .rp-chipbar button em{color:inherit!important;opacity:1}

/* ══ Sesión D · 28/09/2026 (2) · cinco piezas nuevas a LIVE con OK de Pablo ══════════════════════════
   rp-index (/portfolio/mariages/) · rp-ticket (/carte-cadeau/) · rp-strips (home) · rp-reco (Le Grand Jour en
   los pilares 6186/6190/6193) · rp-vword (pilar de vídeo). Estrenadas antes en el banco de la sesión C. */
/* ── rp-index · índice de bodas en lista (sesión D, 27/09/2026) ──────────────────────────
   Origen: 21st.dev · Project Index (@ssychui). Reescrito en vanilla.
   Sin JS, o en táctil: una lista de enlaces con su miniatura de 56 px a la izquierda.
   Con JS y ratón: las miniaturas de las filas se ocultan y UNA portada flota junto al cursor.
   El enlace lleva SOLO el nombre del álbum (petición de la sesión SEO); la fila entera se
   pulsa gracias al ::after del enlace, no envolviendo lugar y año en el <a>. */
.rp .rp-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--rp-line);counter-reset:none}
.rp .rp-index__it{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:"img t y" "img l y";column-gap:16px;row-gap:2px;align-items:center;
  min-height:80px;padding:12px 0;margin:0;border-bottom:1px solid var(--rp-line);list-style:none}
.rp .rp-index__n{display:none}
.rp .rp-index__a{grid-area:t;font:500 clamp(19px,1.75vw,25px)/1.2 Oswald,sans-serif;color:var(--rp-tx);
  text-decoration:none;text-transform:none;letter-spacing:0;transition:color .32s var(--rp-hover)}
.rp .rp-index__a::after{content:"";position:absolute;inset:0;z-index:1}
.rp .rp-index__a:focus-visible{outline:none}
.rp .rp-index__it:has(.rp-index__a:focus-visible){outline:2px solid var(--rp-gold);outline-offset:4px;border-radius:4px}
.rp .rp-index__l{grid-area:l;font:400 15px/1.4 Montserrat,sans-serif;color:var(--rp-tx2)}
.rp .rp-index__y{grid-area:y;font:500 16px/1 Oswald,sans-serif;color:var(--rp-tx2);font-variant-numeric:tabular-nums}
.rp .rp-index__img{grid-area:img;width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}

/* Escritorio: número · nombre · lugar · año en una línea, como un índice de libro */
@media (min-width:900px){
  .rp .rp-index__it{grid-template-columns:56px 3.2em minmax(0,1fr) minmax(8em,16em) 4em;
    grid-template-areas:"img n t l y";min-height:88px}
  .rp .rp-index__n{display:block;grid-area:n;font:500 14px/1 Oswald,sans-serif;color:var(--rp-tx2);font-variant-numeric:tabular-nums}
  .rp .rp-index__y{text-align:right}
}

/* Con ratón y JS (clase que pone el JS): la portada flota, las filas se aligeran */
.rp .rp-index--float .rp-index__it{grid-template-columns:3.2em minmax(0,1fr) minmax(8em,16em) 4em;grid-template-areas:"n t l y"}
.rp .rp-index--float .rp-index__img{display:none}
.rp .rp-index--float:hover .rp-index__it{opacity:.45;transition:opacity .32s var(--rp-hover)}
.rp .rp-index--float:hover .rp-index__it:hover{opacity:1}
.rp .rp-index--float .rp-index__it:hover .rp-index__a{color:var(--rp-gold)}
.rp .rp-index__float{position:fixed;left:0;top:0;z-index:5;width:320px;margin:0;pointer-events:none;
  border-radius:12px;overflow:hidden;background:var(--rp-cardd);opacity:0;
  transform:translate3d(-9999px,0,0) scale(.92);transition:opacity .25s var(--rp-ease),scale .25s var(--rp-ease)}
.rp .rp-index__float.on{opacity:1}
.rp .rp-index__float img{display:block;width:100%;height:auto}
.rp .rp-index__float.rp-index__float--v{width:240px}

@media (prefers-reduced-motion:reduce){
  .rp .rp-index__float,.rp .rp-index__it,.rp .rp-index__a{transition:none}
}

/* Modo día: la hoja del tema pinta span/div de #48566B con !important; el título es un <a> */
html.rf-claro .rp .rp-index__a{color:#133157!important}
html.rf-claro .rp .rp-index__l,html.rf-claro .rp .rp-index__y,html.rf-claro .rp .rp-index__n{color:#48566B!important}

/* ── rp-ticket · carte cadeau como billete con talón (sesión D, 28/09/2026) ─────────────────
   Origen: 21st · Admit One Ticket / React Bits · Tear Ticket. CSS puro.
   El importe va en el HTML. Dos muescas a los lados de la línea de corte (máscara radial) y una línea
   de puntos entre billete y talón. Al pasar el ratón, un brillo diagonal lo recorre una vez
   (Magic UI · Glare Hover); con reduced-motion, nada. En móvil el talón pasa abajo. El bono que se
   envía sigue siendo el PDF de siempre: esto es solo cómo se enseña en la web. */
.rp .rp-tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rp .rp-ticket{--stub:170px;position:relative;margin:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);
  border-radius:20px;background:var(--rp-card);overflow:hidden;isolation:isolate;
  -webkit-mask:radial-gradient(circle 14px at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 14px at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.rp .rp-ticket__main{padding:28px 28px 26px;display:grid;gap:8px;align-content:start}
.rp .rp-ticket__lab{margin:0;font:500 11px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-gold)}
.rp .rp-ticket__amt{margin:0;font:500 clamp(36px,3.4vw,48px)/1 Oswald,sans-serif;color:var(--rp-tx);letter-spacing:-.01em}
.rp .rp-ticket__txt{margin:0;font:300 15px/1.5 Montserrat,sans-serif;color:var(--rp-tx2)}
.rp .rp-ticket__stub{position:relative;display:grid;align-content:space-between;justify-items:center;gap:18px;padding:26px 18px;
  border-left:2px dashed var(--rp-line);background:linear-gradient(180deg,rgba(201,154,72,.10),rgba(201,154,72,.03))}
.rp .rp-ticket__brand{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font:500 13px/1 Oswald,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--rp-tx2)}
.rp .rp-ticket::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-100%);transition:none}
.rp .rp-ticket:hover::after{transform:translateX(100%);transition:transform .9s var(--rp-ease)}
@media (prefers-reduced-motion:reduce){.rp .rp-ticket::after{display:none}}
@media (max-width:760px){
  .rp .rp-tickets{grid-template-columns:1fr}
  .rp .rp-ticket{--stub:0px;grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .rp .rp-ticket__stub{border-left:0;border-top:2px dashed var(--rp-line);grid-auto-flow:column;align-items:center;justify-content:space-between;padding:16px 28px}
  .rp .rp-ticket__brand{writing-mode:horizontal-tb;transform:none}
}
html.rf-claro .rp .rp-ticket__lab,html.rf-claro .rp .rp-ticket__amt{color:#133157!important}
html.rf-claro .rp .rp-ticket__txt,html.rf-claro .rp .rp-ticket__brand{color:#48566B!important}
html.rf-claro .rp .rp-ticket::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.7) 50%,transparent 62%)}

.rp .rp-ticket__amt{text-transform:none}

/* ── rp-strips · universos en tiras que se abren (sesión D, 27/09/2026) ─────────────────
   Origen: React Bits · Accordion Gallery. CSS puro: se abre con :hover y con :focus-within
   (teclado), así que funciona igual sin JS.
   Escritorio (≥ 900): 5 tiras en 460 px. La abierta crece (flex 5) y va en color; las demás en
   blanco y negro con el nombre del universo en vertical. Si nadie la toca, está abierta la 1.ª.
   Móvil y tableta: 5 filas de 88 px, en color, con nombre y precio; nada escondido.
   Todo el contenido (título, frase, precio) está en el HTML y se lee sin abrir nada. */
.rp .rp-strips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rp .rp-strips__it{margin:0;padding:0;list-style:none}
.rp .rp-strips__a{position:relative;display:flex;align-items:flex-end;height:88px;border-radius:16px;overflow:hidden;
  background:var(--rp-cardd);color:#fff;text-decoration:none;isolation:isolate}
.rp .rp-strips__a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.rp .rp-strips__a::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,14,16,.86) 0%,rgba(14,14,16,.55) 55%,rgba(14,14,16,.15) 100%)}
.rp .rp-strips__name{display:none}
.rp .rp-strips__t{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:2px;padding:0 20px;width:100%;height:100%}
.rp .rp-strips__t .rp-chips{grid-row:1/3}
.rp .rp-strips__t .rp-chip{background:rgba(14,14,16,.45);border-color:rgba(255,255,255,.28);color:#fff}
.rp .rp-strips__h{margin:0;font:500 18px/1.15 Oswald,sans-serif;color:#fff;text-transform:none;letter-spacing:0}
.rp .rp-strips__pos{display:none}
.rp .rp-strips__price{font:500 13px/1.3 Montserrat,sans-serif;color:rgba(255,255,255,.82)}
.rp .rp-strips__price small{display:none}
.rp .rp-strips__a:focus-visible{outline:2px solid var(--rp-gold);outline-offset:3px}

@media (min-width:900px){
  .rp .rp-strips{flex-direction:row;height:460px;gap:12px}
  .rp .rp-strips__it{flex:1 1 0;min-width:0;transition:flex-grow .6s var(--rp-ease)}
  .rp .rp-strips__a{height:100%;border-radius:var(--rp-radius)}
  .rp .rp-strips__a img{filter:grayscale(1) brightness(.72);transition:filter .6s var(--rp-ease),transform .6s var(--rp-ease)}
  .rp .rp-strips__a::after{background:linear-gradient(to top,rgba(14,14,16,.92) 0%,rgba(14,14,16,.35) 50%,rgba(14,14,16,.05) 100%)}
  .rp .rp-strips__name{display:block;position:absolute;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);
    writing-mode:vertical-rl;font:500 15px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;
    white-space:nowrap;transition:opacity .3s var(--rp-ease)}
  .rp .rp-strips__t{display:grid;grid-template-columns:1fr;align-content:end;gap:10px;padding:34px;height:auto;
    min-width:420px;opacity:0;transform:translateY(10px);transition:opacity .35s var(--rp-ease),transform .35s var(--rp-ease)}
  .rp .rp-strips__t .rp-chips{grid-row:auto}
  .rp .rp-strips__h{font-size:clamp(22px,2vw,29px)}
  .rp .rp-strips__pos{display:block;font:300 15px/1.5 Montserrat,sans-serif;color:rgba(255,255,255,.86);max-width:36ch}
  .rp .rp-strips__price{font-size:15px;color:#fff}
  .rp .rp-strips__price small{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:2px}

  /* la abierta: la que tiene el ratón o el foco; si ninguna, la primera */
  .rp .rp-strips__it:hover,.rp .rp-strips__it:focus-within,
  .rp .rp-strips:not(:hover):not(:focus-within) .rp-strips__it:first-child{flex-grow:5}
  .rp .rp-strips__it:hover img,.rp .rp-strips__it:focus-within img,
  .rp .rp-strips:not(:hover):not(:focus-within) .rp-strips__it:first-child img{filter:none;transform:scale(1.02)}
  .rp .rp-strips__it:hover .rp-strips__name,.rp .rp-strips__it:focus-within .rp-strips__name,
  .rp .rp-strips:not(:hover):not(:focus-within) .rp-strips__it:first-child .rp-strips__name{opacity:0}
  .rp .rp-strips__it:hover .rp-strips__t,.rp .rp-strips__it:focus-within .rp-strips__t,
  .rp .rp-strips:not(:hover):not(:focus-within) .rp-strips__it:first-child .rp-strips__t{opacity:1;transform:none;transition-delay:.15s}
}
@media (prefers-reduced-motion:reduce){
  .rp .rp-strips__it,.rp .rp-strips__a img,.rp .rp-strips__t,.rp .rp-strips__name{transition:none!important}
}
/* Modo día: las tiras son foto a sangre con velo, como rp-split: la letra sigue blanca */
html.rf-claro .rp .rp-strips__h,html.rf-claro .rp .rp-strips__name,html.rf-claro .rp .rp-strips__price{color:#fff!important}
html.rf-claro .rp .rp-strips__pos,html.rf-claro .rp .rp-strips__price small{color:rgba(255,255,255,.84)!important}
html.rf-claro .rp .rp-strips__t .rp-chip{color:#fff!important;background:rgba(14,14,16,.45)!important;border-color:rgba(255,255,255,.28)!important}
/* Modo día (banco de C, 28/09): el acento rp-em pasaba a #133157 sobre la tira oscura (1,47:1). Sobre foto se queda claro */
html.rf-claro .rp .rp-strips__h .rp-em{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}

/* ── rp-reco · borde con brillo lento para la fórmula recomendada (sesión D, 27/09/2026) ──
   Origen: Magic UI · Shine Border / Aceternity · Moving Border. Reescrito en CSS puro.
   Un filete dorado fijo de 1,5 px alrededor de la foto de la tarjeta y un brillo que lo recorre
   en 7 s. Se dibuja DENTRO de la caja (la foto lleva overflow:hidden): no mueve nada.
   Con reduced-motion o sin soporte de @property: solo el filete, quieto.
   Vale en `rp-tile` (sobre `.rp-tile__media`) y en cualquier caja con `.rp-reco__box`. */
@property --rp-reco-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.rp .rp-reco .rp-tile__media,.rp .rp-reco__box{position:relative}
.rp .rp-reco .rp-tile__media::after,.rp .rp-reco__box::after{content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--rp-reco-a),rgba(201,154,72,.55) 0deg,rgba(201,154,72,.55) 250deg,#F2DCAF 300deg,var(--rp-gold) 330deg,rgba(201,154,72,.55) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:rp-reco-giro 7s linear infinite}
@keyframes rp-reco-giro{to{--rp-reco-a:360deg}}
@media (prefers-reduced-motion:reduce){
  .rp .rp-reco .rp-tile__media::after,.rp .rp-reco__box::after{animation:none;background:rgba(201,154,72,.8)}
}
/* Modo día: el filete es superficie, no letra, así que puede ir en ámbar */
html.rf-claro .rp .rp-reco .rp-tile__media::after,html.rf-claro .rp .rp-reco__box::after{
  background:conic-gradient(from var(--rp-reco-a),rgba(252,181,31,.6) 0deg,rgba(252,181,31,.6) 250deg,#FFE3A3 300deg,#FCB51F 330deg,rgba(252,181,31,.6) 360deg)}
/* La etiqueta va SOBRE la foto, arriba a la izquierda: fuera del flujo, no descuadra los títulos del carril */
.rp .rp-reco__tag{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border-radius:999px;background:rgba(14,14,16,.62);border:1px solid rgba(201,154,72,.55);color:#F2DCAF;
  font:500 11px/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* en día sigue sobre foto: se queda oscura con letra clara (como los velos, no es papel de la página) */
html.rf-claro .rp .rp-reco__tag{color:#fff!important;background:rgba(14,14,16,.62)}

/* ── rp-vword · palabra rellena de vídeo (sesión D, 28/09/2026) · UNA vez, en /videaste/ ────────
   Origen: React Bits · Masked Heading. CSS puro para el efecto; el JS solo reproduce el vídeo cuando se ve.
   Técnica: el vídeo debajo y, encima, una capa del color de la sección con la palabra en blanco y
   mix-blend-mode:multiply → donde hay letra se ve el vídeo, donde hay fondo queda el fondo.
   En modo día: fondo claro, letra negra y screen (el mismo efecto al revés).
   La palabra es texto de verdad (se lee y se copia); el vídeo es aria-hidden. Sin JS o con reduced-motion: el póster. */
.rp .rp-vword{position:relative;overflow:hidden;isolation:isolate;width:min(var(--rp-content),calc(100% - 40px));margin-inline:auto;background:#6b6258;aspect-ratio:21/9;border-radius:var(--rp-radius)}
.rp .rp-vword__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp .rp-vword__t{position:absolute;inset:0;margin:0;display:grid;place-items:center;background:var(--rp-bg0);color:#fff;mix-blend-mode:multiply;
  font:700 clamp(96px,22vw,320px)/.85 Oswald,sans-serif;letter-spacing:-.02em;text-transform:uppercase;text-align:center}
.rp .rp-bg1 .rp-vword__t,.rp.rp-bg1 .rp-vword__t{background:var(--rp-bg1)}
html.rf-claro .rp .rp-vword__t{background:var(--rp-bg0);color:#000!important;mix-blend-mode:screen}

/* Sesión D · 28/09 (3) · rp-vword: capas explícitas; sin ellas la mezcla no veía el vídeo (medido en LIVE) */
.rp .rp-vword__v{z-index:0}
.rp .rp-vword__t{z-index:1}
/* Sesión D · 28/09 (4) · rp-vword en <canvas>: el JS pinta el vídeo recortado por la palabra y tapa la versión CSS */
.rp .rp-vword__c{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}

/* Sesión D · 28/09 (5) · rp-strips en móvil: la fila crece con su contenido (los títulos de dos líneas pisaban el precio a 375) */
@media (max-width:899px){.rp .rp-strips__a{height:auto;min-height:104px}.rp .rp-strips__t{grid-template-columns:1fr;row-gap:6px;padding:16px 18px;align-content:end}.rp .rp-strips__t .rp-chips{grid-row:auto}}

/* Sesión D · 28/09 (6) · rp-index: el modo portada flotante solo desde 900 px. Una tableta con ratón o una ventana estrecha
   rompía la rejilla (título a una palabra por línea, medido a 375). Por debajo: miniatura de 56 px en cada fila. */
@media (max-width:899px){.rp .rp-index--float .rp-index__it{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"img t y" "img l y"}.rp .rp-index--float .rp-index__img{display:block}.rp .rp-index--float:hover .rp-index__it{opacity:1}}

/* ══ Sesión D · 28/09/2026 (7) · seis piezas más a LIVE con OK de Pablo: rp-lit (home), rp-story (home, rp-reals),
   rp-toc (universos y pilares con data-rp-toc, ≥1360 px), rp-seal (films de la galería de la home), rp-spot (carriles
   de razones de los pilares), rp-paper (rp-bg1 en modo día). Estrenadas antes en el banco de la sesión C. */
/* ── rp-lit · frase que se enciende palabra a palabra con el scroll (sesión D, 27/09/2026) ──
   Origen: React Bits · Scroll Reveal. Regla del reparto: opacidad de partida ≥ 0,35, así que
   la frase se lee entera desde el primer momento; el scroll solo la «enciende».
   El texto va en el HTML tal cual; el JS lo parte en <span> y guarda el acento rp-em entero.
   Sin JS, con reduced-motion o si el JS falla: la frase normal, a opacidad 1. */
.rp .rp-lit__w{opacity:var(--rp-lit-o,1);transition:opacity .2s linear}
.rp [data-rp-lit].rp-lit--on .rp-lit__w{--rp-lit-o:.35}
.rp [data-rp-lit].rp-lit--on .rp-lit__w.is-on{--rp-lit-o:1}

/* ── rp-story · historias que se abren desde el carrusel (sesión D, 28/09/2026) ─────────────
   Origen: Aceternity · Apple Cards Carousel (la apertura). Vanilla, <dialog> nativo.
   No es un carrusel nuevo: es un botón «Voir en histoire» que se añade a las tarjetas de rp-reals o
   rp-gamme. Sin JS el botón no existe (lleva hidden: un control que no hace nada engaña) y queda el
   enlace a la galería de siempre. El visor: foto entera sobre fondo oscuro, barras de progreso, tocar a
   la izquierda/derecha para ir atrás/adelante, mantener pulsado para pausar, Esc o × para cerrar.
   Reduced-motion: no avanza solo. Las fotos solo se piden al abrir. */
.rp .rp-story__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rp .rp-story__card{margin:0;list-style:none;position:relative;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd);aspect-ratio:4/5;display:flex;align-items:flex-end}
.rp .rp-story__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp .rp-story__card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.9) 0%,rgba(14,14,16,.2) 50%,rgba(14,14,16,0) 75%)}
.rp .rp-story__txt{position:relative;z-index:1;padding:24px;display:grid;gap:8px}
.rp .rp-story__meta{margin:0;font:500 11px/1.4 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rp .rp-story__txt h3{margin:0;font:500 clamp(20px,1.8vw,26px)/1.1 Oswald,sans-serif;color:#fff;text-transform:none}
.rp .rp-story__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.rp .rp-story__open{min-height:44px!important;padding:0 18px!important;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,16,.45);color:#fff;font:500 14px/1 Montserrat,sans-serif;cursor:pointer}
.rp .rp-story__open:focus-visible{outline:2px solid var(--rp-gold);outline-offset:3px}
@media (max-width:900px){.rp .rp-story__list{grid-template-columns:1fr}.rp .rp-story__card{aspect-ratio:4/3}}
/* el visor (va en <body>, fuera de .rp: sin prefijo) */
.rp-storyv{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050506;color:#fff;overflow:hidden}
.rp-storyv::backdrop{background:#050506}
.rp-storyv__bars{position:absolute;top:14px;left:14px;right:64px;display:flex;gap:4px;z-index:3}
.rp-storyv__bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.rp-storyv__bars i b{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.rp-storyv__bars i.is-done b{transform:scaleX(1)}
.rp-storyv__t{position:absolute;top:28px;left:16px;z-index:3;font:500 14px/1 Oswald,sans-serif;letter-spacing:.06em}
.rp-storyv__x{position:absolute;top:10px;right:10px;z-index:4;width:44px;height:44px;min-height:0!important;padding:0!important;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(14,14,16,.5);color:#fff;font:400 22px/1 Oswald,sans-serif;cursor:pointer}
.rp-storyv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rp-storyv__prev,.rp-storyv__next{position:absolute;top:0;bottom:0;z-index:2;width:40%;min-height:0!important;padding:0!important;margin:0;border:0;background:transparent;cursor:pointer}
.rp-storyv__prev{left:0}.rp-storyv__next{right:0}
.rp-storyv__prev:focus-visible,.rp-storyv__next:focus-visible,.rp-storyv__x:focus-visible{outline:2px solid #C99A48;outline-offset:-4px}
html.rf-claro .rp .rp-story__txt h3,html.rf-claro .rp .rp-story__open{color:#fff!important}
html.rf-claro .rp .rp-story__meta{color:rgba(255,255,255,.75)!important}
/* Modo día (medido por el banco de C, 28/09): la tinta de día dejaba el enlace a 1,47:1 sobre la tarjeta oscura */
html.rf-claro .rp .rp-story__txt .rp-link{color:#fff!important}
/* Variante dentro del panel de rp-reals (home): fondo de tarjeta, no foto. Texto de botón hereda en día (regla de C). */
.rp .rp-story__open--panel{border-color:var(--rp-line);background:transparent;color:var(--rp-tx);margin-right:14px}
html.rf-claro .rp .rp-story__open--panel{color:#133157!important;border-color:rgba(19,49,87,.25)!important}

/* ── rp-toc · índice lateral numerado para páginas largas (sesión D, 27/09/2026) ─────────
   Origen: React Bits · Line Sidebar. Vanilla. Complementa rp-chap (que va en flujo bajo el hero).
   No lleva HTML propio: el JS copia los enlaces de la barra .rp-chap de la página, así los
   enlaces no se duplican en el HTML servido. Sin JS no existe.
   Solo ≥ 1360 px: el reparto pedía 1280, pero medido a 1280 el margen del carril es de 20 px y
   el índice pisaría el texto alineado a la izquierda; a 1360 quedan 50 px.
   Aparece cuando la barra de capítulos ya ha salido por arriba; se va al llegar al pie. */
.rp-toc{position:fixed;left:14px;top:50%;z-index:30;transform:translate(-8px,-50%);opacity:0;visibility:hidden;
  transition:opacity .3s var(--rp-ease),transform .3s var(--rp-ease),visibility 0s .3s}
.rp-toc.is-on{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .3s var(--rp-ease),transform .3s var(--rp-ease)}
.rp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rp-toc li{margin:0;padding:0;list-style:none}
.rp-toc a{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 10px 0 4px;border-radius:999px;
  font:500 12px/1 Oswald,sans-serif;letter-spacing:.06em;color:var(--rp-tx2,#A6A6A6);text-decoration:none;white-space:nowrap}
.rp-toc b{font-weight:500;font-variant-numeric:tabular-nums;width:18px;text-align:right}
.rp-toc i{display:block;width:14px;height:1px;background:currentColor;opacity:.6;transition:width .3s var(--rp-ease)}
.rp-toc span{max-width:0;overflow:hidden;opacity:0;font:500 13px/1 Montserrat,sans-serif;letter-spacing:0;
  transition:max-width .35s var(--rp-ease),opacity .25s var(--rp-ease)}
.rp-toc:hover span,.rp-toc:focus-within span{max-width:220px;opacity:1}
.rp-toc:hover a,.rp-toc:focus-within a{background:rgba(14,14,16,.72)}
.rp-toc a[aria-current="true"]{color:var(--rp-gold,#C99A48)}
.rp-toc a[aria-current="true"] i{width:26px;opacity:1}
.rp-toc a:focus-visible{outline:2px solid var(--rp-gold,#C99A48);outline-offset:2px}
@media (max-width:1479px){.rp-toc{display:none}}  /* 28/09: a 1366 pisaba el texto (índice hasta x=92, texto desde x=53); desde 1480 el margen es de 110 */
@media (prefers-reduced-motion:reduce){.rp-toc,.rp-toc *{transition:none!important}}
html.rf-claro .rp-toc a{color:#48566B!important}
html.rf-claro .rp-toc a[aria-current="true"]{color:#133157!important}
html.rf-claro .rp-toc:hover a,html.rf-claro .rp-toc:focus-within a{background:rgba(244,246,248,.9)}

/* ── rp-seal · sello de texto en círculo alrededor del play (sesión D, 27/09/2026) ───────
   Origen: React Bits · Circular Text / Magic UI · Spinning Text. SVG textPath, 0 JS.
   El texto es aria-hidden: el nombre del botón sigue siendo su aria-label.
   Va FUERA del <button>: v6 fuerza a 18 px todo svg[aria-hidden][focusable] dentro del botón.
   Gira despacio (24 s por vuelta); con reduced-motion, quieto. Se apaga al reproducir. */
.rp .rp-seal{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;z-index:2;
  pointer-events:none;overflow:visible;animation:rp-seal-giro 24s linear infinite;transition:opacity .3s}
.rp .rp-seal text{font:500 10.5px/1 Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;fill:rgba(255,255,255,.88)}
.rp .rp-gplay{z-index:3}
.rp .rp-gitem.is-playing .rp-seal{opacity:0}
@keyframes rp-seal-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rp .rp-seal{animation:none}}
@media (max-width:600px){.rp .rp-seal{width:108px;height:108px;margin:-54px 0 0 -54px}}

/* ── rp-spot · foco de luz que sigue al ratón en las tarjetas (sesión D, 27/09/2026) ─────
   Origen: Magic UI · Magic Card / React Bits · Spotlight Card. Un degradado radial dorado al 7 %
   que se pinta donde está el ratón (--rp-sx/--rp-sy los escribe el JS). Solo con ratón fino.
   Sin JS, en táctil o con reduced-motion: la tarjeta de siempre. Afecta a rp-reason y rp-cm. */
.rp .rp-spot .rp-reason,.rp .rp-spot .rp-cm{position:relative;isolation:isolate}
.rp .rp-spot .rp-reason::before,.rp .rp-spot .rp-cm::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--rp-sx,50%) var(--rp-sy,-40%),rgba(201,154,72,.07),transparent 70%);
  opacity:0;transition:opacity .32s var(--rp-hover)}
.rp .rp-spot .rp-reason:hover::before,.rp .rp-spot .rp-cm:hover::before{opacity:1}
.rp .rp-spot .rp-reason:hover{border-color:rgba(201,154,72,.22)}
html.rf-claro .rp .rp-spot .rp-reason::before,html.rf-claro .rp .rp-spot .rp-cm::before{
  background:radial-gradient(360px circle at var(--rp-sx,50%) var(--rp-sy,-40%),rgba(252,181,31,.10),transparent 70%)}
@media (hover:none),(prefers-reduced-motion:reduce){.rp .rp-spot .rp-reason::before,.rp .rp-spot .rp-cm::before{display:none}}

/* ── rp-paper · textura de papel en modo día (sesión D, 28/09/2026) ─────────────────────────────
   Origen: 21st.dev · Paper Texture (@meghtrix). CSS puro, 0 imágenes. SOLO en modo día (html.rf-claro).
   Decisión de Pablo 28/09: en todas las secciones rp-bg1, salvo las que llevan halo (rp-glow usa background-image).
   La clase .rp-paper queda para ponerla a mano en una superficie concreta. */
html.rf-claro .rp .rp-paper,
html.rf-claro .rp .rp-sec.rp-bg1:not(.rp-glow){
  background-image:radial-gradient(rgba(19,49,87,.045) .7px,transparent .8px),repeating-linear-gradient(115deg,rgba(19,49,87,.018) 0 1px,transparent 1px 7px);
  background-size:5px 5px,auto}


/* ══ Sesión D · 28/09/2026 (8) · rp-grow en la home (bucle y póster sacados del máster 4K, 2,28 MB) ══ */
/* ── rp-grow · tarjeta que crece a pantalla completa con el scroll (sesión D, 27/09/2026) ──
   Origen: React Bits · Scroll Expand / 21st · Scroll Expansion Hero. Reescrito en vanilla.
   ⛔ Nunca en el hero (Pablo, 24/09): a mitad de página.
   Sin JS o con reduced-motion: una tarjeta 16:9 normal, del ancho del carril, con su póster.
   Con JS (clase rp-grow--on): una pista de 200vh; el marco se FIJA A MANO (sticky no funciona
   en este sitio: overflow:hidden del tema) y la tarjeta ocupa la pantalla entera desde el
   principio, recortada con clip-path hasta el tamaño del carril. Con el scroll el recorte se
   abre hasta 0 y el radio baja de 28 a 0. clip-path no mueve el layout: no hay CLS.
   Alto que añade: ~1 pantalla más que la tarjeta quieta (lo avisa el reparto: en /mariages/ no cabe). */
.rp .rp-grow{max-width:var(--rp-content);margin-inline:auto;padding-inline:20px;box-sizing:content-box}
.rp .rp-grow__card{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd)}
.rp .rp-grow__poster,.rp .rp-grow__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rp .rp-grow__video{opacity:0;transition:opacity .6s var(--rp-ease)}
.rp .rp-grow__video.is-on{opacity:1}
.rp .rp-grow__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(14,14,16,.82) 0%,rgba(14,14,16,.18) 45%,rgba(14,14,16,0) 70%)}
.rp .rp-grow__cap{position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);display:grid;gap:10px;justify-items:start;z-index:1}
.rp .rp-grow__cap h3,.rp .rp-grow__cap .rp-grow__h{margin:0;font:500 clamp(22px,2.4vw,34px)/1.1 Oswald,sans-serif;color:#fff;text-transform:none;letter-spacing:0}
.rp .rp-grow__cap .rp-chip{background:rgba(14,14,16,.45);border-color:rgba(255,255,255,.28);color:#fff}

/* con JS: pista larga, marco de pantalla completa recortado */
.rp .rp-grow--on{max-width:none;padding-inline:0}
.rp .rp-grow--on .rp-grow__track{position:relative;height:200vh;height:200svh}
.rp .rp-grow--on .rp-grow__stick{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh}
.rp .rp-grow--on .rp-grow__card{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;
  clip-path:inset(var(--rp-grow-t,20%) var(--rp-grow-x,10%) var(--rp-grow-b,20%) var(--rp-grow-x,10%) round var(--rp-grow-r,28px))}
.rp .rp-grow--on .rp-grow__cap{left:calc(var(--rp-grow-x,10%) + clamp(20px,3vw,40px));bottom:calc(var(--rp-grow-b,20%) + clamp(20px,3vw,36px))}
@media (max-width:767px){
  .rp .rp-grow--on .rp-grow__track{height:170vh;height:170svh}
}
/* Modo día: foto a sangre con velo, la letra sigue blanca */
html.rf-claro .rp .rp-grow__cap h3,html.rf-claro .rp .rp-grow__cap .rp-grow__h{color:#fff!important}
html.rf-claro .rp .rp-grow__cap .rp-chip{color:#fff!important;background:rgba(14,14,16,.45)!important;border-color:rgba(255,255,255,.28)!important}
html.rf-claro .rp .rp-grow__cap .rp-link{color:#fff!important}
/* el velo sigue al recorte, o el degradado oscuro quedaría fuera de lo visible */
.rp .rp-grow--on .rp-grow__veil{inset:var(--rp-grow-t,20%) var(--rp-grow-x,10%) var(--rp-grow-b,20%)}

/* ── rp-pblur · desenfoque progresivo bajo el texto sobre foto (sesión D, 27/09/2026) ──
   Origen: Magic UI · Progressive Blur / React Bits · Gradual Blur. CSS puro.
   Cuatro capas (tope del reparto: 4-5) con backdrop-filter creciente, cada una enmascarada
   en su franja: la foto se va emborronando hacia abajo, justo donde va la letra.
   Va ANTES del texto y DESPUÉS de la foto; el velo de la pieza anfitriona se mantiene.
   Sin soporte de backdrop-filter no pinta nada (queda el velo de siempre). */
.rp .rp-pblur{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}
.rp .rp-pblur>i{position:absolute;inset:0;display:block}
.rp .rp-pblur>i:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(to bottom,transparent 0%,#000 20%,#000 40%,transparent 60%);mask:linear-gradient(to bottom,transparent 0%,#000 20%,#000 40%,transparent 60%)}
.rp .rp-pblur>i:nth-child(2){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:linear-gradient(to bottom,transparent 20%,#000 40%,#000 60%,transparent 80%);mask:linear-gradient(to bottom,transparent 20%,#000 40%,#000 60%,transparent 80%)}
.rp .rp-pblur>i:nth-child(3){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask:linear-gradient(to bottom,transparent 40%,#000 60%,#000 80%,transparent 100%);mask:linear-gradient(to bottom,transparent 40%,#000 60%,#000 80%,transparent 100%)}
.rp .rp-pblur>i:nth-child(4){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask:linear-gradient(to bottom,transparent 60%,#000 85%);mask:linear-gradient(to bottom,transparent 60%,#000 85%)}
/* en rp-split el velo es el ::after del enlace: el texto tiene que quedar por encima de los dos */
.rp .rp-split>a .rp-pblur{z-index:0}
.rp .rp-split>a::after{z-index:0}
.rp .rp-split__t{z-index:2}

/* ── rp-map · mapa de puntos de Occitanie (sesión D, 28/09/2026) ─────────────────────────────
   Origen: Magic UI · Dotted Map. SVG ESTÁTICO generado una vez (contorno oficial de la región, datos abiertos de
   france-geojson; coordenadas de los municipios de geo.api.gouv.fr). 0 JS. Los lugares van también en el HTML (lista).
   La zona es el radio de 60 km alrededor de Colomiers de las condiciones publicadas. */
.rp .rp-map{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.rp .rp-map__fig{margin:0}
.rp .rp-map__svg{display:block;width:100%;height:auto}
.rp .rp-map__dots circle{fill:var(--rp-tx2);opacity:.35}
.rp .rp-map__zone{fill:rgba(201,154,72,.12);stroke:var(--rp-gold);stroke-width:1.5;stroke-dasharray:4 5}
.rp .rp-map__pt circle{fill:var(--rp-tx);stroke:var(--rp-bg0);stroke-width:2}
.rp .rp-map__pt--studio circle{fill:var(--rp-gold)}
.rp .rp-map__pt text{font:500 15px/1 Montserrat,sans-serif;fill:var(--rp-tx)}
.rp .rp-map__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rp .rp-map__list li{margin:0;padding:0 0 14px;list-style:none;border-bottom:1px solid var(--rp-line);display:grid;gap:4px}
.rp .rp-map__list b{font:500 20px/1.2 Oswald,sans-serif;color:var(--rp-tx)}
.rp .rp-map__list span{font:300 15px/1.4 Montserrat,sans-serif;color:var(--rp-tx2)}
@media (max-width:900px){.rp .rp-map{grid-template-columns:1fr;gap:28px}.rp .rp-map__pt text{font-size:20px}}
/* Modo día: el oro no es letra (los nombres van en tinta); el círculo de la zona es superficie */
html.rf-claro .rp .rp-map__list b{color:#133157!important}
html.rf-claro .rp .rp-map__list span{color:#48566B!important}
html.rf-claro .rp .rp-map__pt text{fill:#133157}
html.rf-claro .rp .rp-map__zone{fill:rgba(252,181,31,.14);stroke:#FCB51F}
html.rf-claro .rp .rp-map__pt--studio circle{fill:#FCB51F}

/* ── rp-arch · foto recortada en arco (sesión D, 27/09/2026) ─────────────────────────────
   Origen: 21st.dev · Image Mask (@uilayout.contact). Solo el arco: CSS puro, sin máscara SVG.
   `border-radius:999px 999px …` se limita solo a la mitad del ancho → semicírculo exacto
   arriba sea cual sea el ancho. `--low` es un arco rebajado (elipse), menos iglesia. */
.rp .rp-arch{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 14px 14px;background:var(--rp-cardd)}
.rp .rp-arch img{display:block;width:100%;height:100%;object-fit:cover}
.rp .rp-arch--low{border-radius:50% 50% 14px 14px / 28% 28% 14px 14px}
/* Uso en LIVE (28/09, /a-propos/ #duo): el arco sobre la media de una tarjeta de la gama. La tarjeta mide 246 px
   de alto fijo (apaisado): el arco pide vertical, así que la media pasa a 4/5. Las fotos del duo tienen fondo
   negro y el arco se perdía contra la página: un filete dorado lo dibuja. */
.rp .rp-tile__media.rp-arch{height:auto;aspect-ratio:4/5;outline:1px solid rgba(201,154,72,.45);outline-offset:-1px}

/* ── rp-rstrip · filas de enlaces con banda de fotos al pasar el ratón (sesión D, 28/09/2026) ──
   Origen: React Bits · Flowing Menu. Para la lista de universos o un rp-router largo.
   Cada fila es un enlace grande. Al pasar el ratón, una banda con fotos y el nombre repetido entra desde el
   borde por el que llega el cursor (arriba o abajo; lo decide el JS) y desfila en bucle. Sin JS la banda
   entra desde abajo (solo CSS). En táctil y con reduced-motion no hay banda: la fila es un enlace normal. */
.rp .rp-rstrip{list-style:none;margin:0;padding:0;border-top:1px solid var(--rp-line)}
.rp .rp-rstrip__it{position:relative;overflow:hidden;margin:0;list-style:none;border-bottom:1px solid var(--rp-line)}
.rp .rp-rstrip__a{display:flex;align-items:center;justify-content:center;min-height:clamp(72px,8vw,112px);
  font:500 clamp(28px,4vw,56px)/1 Oswald,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--rp-tx);text-decoration:none;position:relative;z-index:1}
.rp .rp-rstrip__a:focus-visible{outline:2px solid var(--rp-gold);outline-offset:-4px}
.rp .rp-rstrip__band{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--rp-gold);overflow:hidden;transform:translateY(101%);transition:transform .45s var(--rp-ease)}
.rp .rp-rstrip__it.is-top .rp-rstrip__band{transform:translateY(-101%)}
.rp .rp-rstrip__run{display:flex;align-items:center;gap:28px;height:100%;width:max-content;animation:rp-rstrip-go 18s linear infinite;animation-play-state:paused}
.rp .rp-rstrip__run span::after{content:attr(data-l)}
.rp .rp-rstrip__run span{font:500 clamp(28px,4vw,56px)/1 Oswald,sans-serif;text-transform:uppercase;color:#0E0E10;white-space:nowrap}
.rp .rp-rstrip__run img{height:70%;width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:999px}
@keyframes rp-rstrip-go{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .rp .rp-rstrip__it:hover .rp-rstrip__band{transform:none}
  .rp .rp-rstrip__it:hover .rp-rstrip__run{animation-play-state:running}
}
@media (hover:none),(prefers-reduced-motion:reduce){.rp .rp-rstrip__band{display:none}}
html.rf-claro .rp .rp-rstrip__a{color:#133157!important}
html.rf-claro .rp .rp-rstrip__band{background:#FCB51F}
html.rf-claro .rp .rp-rstrip__run span{color:#133157!important}
/* 🧯 SEO (28/09): el nombre repetido de la banda no va en el HTML (era texto duplicado para el rastreo);
   lo pinta ::after desde data-l. */

/* ── rp-peek · miniatura al pasar por un enlace (sesión D, 28/09/2026) ─────────────────────
   Origen: Aceternity · Link Preview. Con imagen PROPIA (la portada del destino), nunca un servicio externo.
   El enlace no cambia (mismo <a>, mismo texto: lo pidió la sesión SEO). La miniatura es un elemento
   aparte, fijo, fuera del flujo (no empuja nada: 0 CLS) y aria-hidden. Solo con ratón fino; en táctil y
   sin JS no existe. La imagen se pide la primera vez que se pasa por el enlace. */
.rp-peek{position:fixed;left:0;top:0;z-index:40;width:240px;margin:0;pointer-events:none;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 12px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}
.rp-peek.is-on{opacity:1;transform:none}
.rp-peek img{display:block;width:100%;height:160px;object-fit:cover}
@media (prefers-reduced-motion:reduce){.rp-peek{transition:none;transform:none}}

/* ── rp-phones · la galería privada dentro de un iPhone (sesión D, 28/09/2026) ───────────────
   Origen: Magic UI · iPhone. CSS puro, sin SVG: el marco es el borde redondeado + la isla.
   Dentro van capturas REALES de una galería de cliente (390×844 a 2x), nunca una maqueta.
   Dos teléfonos: el de delante enseña la entrada de la galería, el de detrás la rejilla. */
.rp .rp-phones{position:relative;margin:48px auto 0;padding:0;max-width:520px;display:grid;grid-template-columns:1fr 1fr;align-items:end}
.rp .rp-phone{position:relative;margin:0;aspect-ratio:390/844;border-radius:15%/7%;padding:3.2%;background:#0b0b0c;
  box-shadow:0 0 0 1.5px #3a3a3e,0 0 0 4px #1b1b1e,0 28px 60px rgba(0,0,0,.5);z-index:1}
.rp .rp-phone::after{content:"";position:absolute;top:2.6%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#000}
.rp .rp-phone img{display:block;width:100%;height:92.5%;margin-top:7.5%;object-fit:cover;object-position:top;border-radius:0 0 12% 12%/0 0 5.6% 5.6%}
.rp .rp-phone--back{grid-column:2;grid-row:1;transform:translate(-8%,-7%) rotate(3deg);z-index:0;opacity:.96}
.rp .rp-phones>.rp-phone:not(.rp-phone--back){grid-column:1;grid-row:1;transform:translateX(12%) rotate(-2deg)}
.rp .rp-phones__cap{grid-column:1/-1;margin-top:28px;text-align:center;font:300 14px/1.4 Montserrat,sans-serif;color:var(--rp-tx2)}
@media (max-width:600px){.rp .rp-phones{max-width:360px;margin-top:36px}}
@media (prefers-reduced-motion:reduce){.rp .rp-phone{transition:none}}
html.rf-claro .rp .rp-phones__cap{color:#48566B!important}
html.rf-claro .rp .rp-phone{box-shadow:0 0 0 1.5px #3a3a3e,0 0 0 4px #1b1b1e,0 24px 50px rgba(19,49,87,.28)}


/* ══ Sesión s549 · 28/09/2026 · rp-steps en /comment-ca-se-passe/ (6701) ══════════════════════════
   Pieza de la sesión D (banco, 27/09): pasos a la izquierda y una foto fija a la derecha que cambia
   según el paso que se lee. Aquí lleva la página ENTERA de cada paso (tarjetas, retratos, tabla,
   iPhone), no un resumen: nada del texto indexable se pierde ni se repite.
   Sin JS, en móvil o por debajo de 1000 px: cada paso con su foto encima, en columna, y los
   carriles de tarjetas siguen siendo carriles. Nada oculto.
   Con JS y ≥ 1000 px (clase rp-steps--on): dos columnas; el JS monta el escenario con las fotos de
   cada paso (copiadas de su figura, que entonces se oculta) y lo FIJA A MANO mientras la lista pasa,
   porque position:sticky no funciona en este sitio (overflow del tema). Los carriles pasan a
   rejilla dentro de la columna de texto. */
.rp .rp-steps__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,9vw,96px)}
.rp .rp-steps__it{margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:640px;scroll-margin-top:120px}
/* ⚠️ MEDIDO (s549): sin esto el carril de tarjetas, que es un hijo de la rejilla, impone su ancho
   mínimo (4 × 372 px) y ensancha el paso a 1 744 px antes de que el JS monte la pieza. Ese ensanche
   daba un CLS de 0,41-0,67 en la carga, con origen en ul.rp-track, aunque el carril está bajo el pliegue. */
.rp .rp-steps__it>*{min-width:0}
.rp .rp-steps__fig{margin:0 0 10px;aspect-ratio:3/2;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd)}
.rp .rp-steps__fig img{display:block;width:100%;height:100%;object-fit:cover}
.rp .rp-steps__fig--libre{aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
.rp .rp-steps__fig--libre .rp-phones{margin-top:0}
/* ⚠️ Las reglas de texto llevan `body.rfv6-page main` delante: el tema pone
   `body.rfv6-page main p{margin:0 0 1em}` (0,2,2), que le gana a `.rp .x` (0,2,0) — trampa 16c. */
body.rfv6-page main .rp .rp-steps__lab,.rp .rp-steps__lab{margin:0;font:500 15px/1.3 Oswald,sans-serif;letter-spacing:.06em;text-transform:none;color:var(--rp-gold)}
.rp .rp-steps__lab span{font-variant-numeric:tabular-nums;color:var(--rp-tx2);margin-right:8px}
body.rfv6-page main .rp .rp-steps__h,.rp .rp-steps__h{margin:0;font:500 clamp(27px,2.8vw,42px)/1.08 Oswald,sans-serif;color:var(--rp-tx);text-transform:none;letter-spacing:-.01em;text-wrap:balance;text-align:left}
body.rfv6-page main .rp .rp-steps__b,.rp .rp-steps__b{margin:0;font:300 17px/1.55 Montserrat,sans-serif;color:var(--rp-tx2);text-align:left;max-width:none}
.rp .rp-steps__b b{font-weight:500;color:var(--rp-tx)}
body.rfv6-page main .rp .rp-steps__more,.rp .rp-steps__more{margin:6px 0 0}
body.rfv6-page main .rp .rp-steps__it>.rp-small{margin:6px 0 0}
.rp .rp-steps__it>.rp-rail,.rp .rp-steps__it>.rp-cmp{margin-top:18px}
.rp .rp-steps__it>.rp-cmp{max-width:none;width:100%}
/* En móvil el carril sale a sangre, como el resto de carriles de la web: el contenido lleva
   20 px de margen y la pista ya trae su propio relleno (--rp-gutter). */
@media (max-width:699px){.rp .rp-steps__it>.rp-rail{margin-inline:-20px}}

/* ≥ 1000 px, CON O SIN JS: el carril y la tabla dejan de ser contenedores con scroll y pasan a rejilla.
   ⚠️ MEDIDO (s549): si este cambio lo hacía el JS al montar, Chrome contaba el paso del carril (y a veces
   de la tabla) como layout shift DENTRO de la pantalla —rectángulos con y=0— aunque estaban 1 500 px por
   debajo: CLS 0,37-0,63. Los contenedores con scroll propio no pueden cambiar de forma al montar la pieza. */
@media (min-width:1000px){
  .rp .rp-steps .rp-track{display:grid;overflow:visible;padding-inline:0;scroll-padding-inline:0;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none}
  .rp .rp-steps .rp-g3 .rp-track{grid-template-columns:1fr;gap:14px}
  .rp .rp-steps .rp-reason{width:auto;min-height:0;padding:26px 30px;gap:8px}
  .rp .rp-steps .rp-reason svg{margin-bottom:4px}
  .rp .rp-steps .rp-reason h3{font-size:24px;line-height:28px}
  .rp .rp-steps .rp-gamme .rp-track{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:0}
  .rp .rp-steps .rp-tile{width:auto}
  .rp .rp-steps .rp-tile__media{height:auto;aspect-ratio:274/246}
  .rp .rp-steps .rp-cmp{overflow:clip;scroll-snap-type:none}
  /* la tabla trae min-width:900px (otra regla): dentro del paso ocupa su columna, y se alinea a la
     izquierda como el resto del paso */
  .rp .rp-steps .rp-cmp table{min-width:0;width:100%}
  body.rfv6-page main .rp .rp-steps .rp-cmp th,body.rfv6-page main .rp .rp-steps .rp-cmp td,.rp .rp-steps .rp-cmp th,.rp .rp-steps .rp-cmp td{text-align:left}
  .rp .rp-steps .rp-cmp th:first-child,.rp .rp-steps .rp-cmp td:first-child{width:190px}
}

@media (min-width:1000px){
  .rp .rp-steps--on{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,5vw,72px)}
  .rp .rp-steps--on .rp-steps__list{gap:0}
  .rp .rp-steps--on .rp-steps__it{min-height:78vh;min-height:78svh;padding-block:9vh;align-content:center;max-width:none;margin:0;
    opacity:.4;transition:opacity .45s var(--rp-ease)}
  .rp .rp-steps--on .rp-steps__it.is-on{opacity:1}
  .rp .rp-steps--on .rp-steps__fig{display:none}
  .rp .rp-steps__col{position:relative}
  .rp .rp-steps__stage{position:absolute;top:0;left:0;width:100%;height:64vh;height:64svh;max-height:720px;border-radius:var(--rp-radius);overflow:hidden;background:var(--rp-cardd);will-change:transform}
  .rp .rp-steps__slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .6s var(--rp-ease),transform 1.2s var(--rp-ease)}
  .rp .rp-steps__slide.is-on{opacity:1;transform:none}
  .rp img.rp-steps__slide{width:100%;height:100%;object-fit:cover}
  /* el paso 4 no es una foto: son los dos iPhone de la galería, centrados sobre un fondo propio */
  .rp .rp-steps__slide--libre{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 38%,#26262b 0%,var(--rp-cardd) 70%)}
  .rp .rp-steps__slide--libre .rp-phones{margin:0;max-width:none;width:min(76%,calc((64svh - 110px) / 1.16))}
  .rp .rp-steps__slide--libre .rp-phones__cap{margin-top:22px;color:rgba(255,255,255,.72)}
  .rp .rp-steps__dots{position:absolute;right:18px;bottom:18px;display:flex;gap:6px;z-index:1}
  .rp .rp-steps__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,transform .3s}
  .rp .rp-steps__dots i.is-on{background:#fff;transform:scale(1.35)}
}
@media (prefers-reduced-motion:reduce){
  .rp .rp-steps__it,.rp .rp-steps__slide{transition:none!important}
}
html.rf-claro .rp .rp-steps__lab{color:#133157!important}
html.rf-claro .rp .rp-steps__lab span,html.rf-claro .rp .rp-steps__b{color:#48566B!important}
html.rf-claro .rp .rp-steps__h,html.rf-claro .rp .rp-steps__b b{color:#133157!important}
html.rf-claro .rp .rp-steps__slide--libre .rp-phones__cap{color:rgba(255,255,255,.72)!important}