/* ── 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}
.rp{margin:0;background:var(--rp-bg0);color:var(--rp-tx);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
: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(40px,5.5vw,80px);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(30px,3.9vw,56px);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(26px,2.9vw,42px);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(15px,1.25vw,18px);line-height:1.25;letter-spacing:.06em;color:var(--rp-gold);text-align:center}
.rp .rp-chapbody{font-size:clamp(17px,1.5vw,21px);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:17px;line-height:1.55}
.rp .rp-tag17{font-size:17px;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(36px,3.4vw,48px);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:17px;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:17px;font-weight:400;transition:opacity .32s var(--rp-hover)}
.rp .rp-link:hover{opacity:.8}
.rp .rp-link::after{content:" ›";}
.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(19px,1.8vw,24px);line-height:1.35;font-weight:400}
.rp .rp-hero .rp-price{font-size:17px;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:28px;line-height:32px;margin-top:20px}
.rp .rp-tile .rp-pos{font-size:17px;font-weight:400;margin-top:8px;color:var(--rp-tx)}
.rp .rp-tile .rp-price{font-size:17px;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:17px;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:17px;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:17px;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:17px;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(34px,3.2vw,46px);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(36px,4vw,56px)}
@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(19px,1.8vw,24px);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(20px,2vw,28px);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:" ›"}
.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; }
/* 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(28px,2.7vw,40px);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;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--rp-tx2)}
.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}}

/* ── 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(24px,2.2vw,32px);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(44px,6.6vw,96px)}
/* 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(40px,6vw,88px)}
.rp .rp-reel__body .rp-st{font-size:clamp(17px,1.5vw,20px);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:17px;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}