/* ============================================================
   PRISMA · relato.css · Kit "Relato" (2026-10-03)
   Las técnicas de las páginas de producto de Apple que eligió el
   cliente para Soluciones, hechas una vez y con la estética de Prisma
   (Manrope, negro, naranja #FF4201, carbón casi negro sin cajas grises).
   Lo usan Programas, Prisma Shop, Prisma 360 y Contenido & Redes.
   Comportamiento en js/relato.js (va DESPUÉS de main.js). Marcado
   completo y ejemplos copiables: KIT-RELATO.md; ejemplo vivo de cada
   pieza en /pruebas-relato.html (noindex, fuera del menú y del sitemap).

   Reglas del kit
   - Todo funciona sin JS: sin `html.rl-js` cada pieza se ve entera,
     quieta y legible (carrusel = fila deslizable, escena = lista,
     capas = abiertas con sus notas, pestañas = todos los paneles...).
   - Con prefers-reduced-motion el JS no anima nada (no pone
     `html.rl-anim`): mismas versiones quietas, sin reproducción
     automática, y main.css ya pone duraciones y retrasos a cero.
   - Colores por capítulo: cada pieza lee --rl-fg, --rl-fg-2, --rl-line,
     --rl-surface y --rl-hot, que cambian dentro de .rl-ch--claro. No
     escribas colores fijos en una pieza nueva: usa esos tokens.
   - El naranja va solo en sobretítulo, frase clave, cifra clave y
     estados de UI (chip/pestaña elegida, botón). Sobre naranja, tinta.
   - Pegados arriba: --rl-chrome (lo escribe el JS en <html>) es el alto
     que ocupan la cabecera del sitio, si está a la vista, y la barra
     local, si está pegada. Lo que se pega dentro de la página usa
     top: var(--rl-chrome).

   Índice (clase raíz · atributo que activa el JS · técnica)
   0  .rl-ch--negro|--carbon|--claro   · (claro: .is-lit, .is-fading) T13 capítulos
   1  .rl-screen, .rl-kicker, .rl-title, .rl-lede                 T01 una idea por pantalla
   2  .rl-dual (strong = blanco, em = naranja)                    T02 doble capa
   3  .rl-hl            · [data-rl-highlights]                   T03 resumen en carrusel
   4  .rl-fig, .rl-figs · [data-rl-num]                           T04 cifra gigante
   5  .rl-picker        · [data-rl-picker]                        T05 selector que reescribe
   6  .rl-scene         · [data-rl-scene]                         T06 escena fija
   7  .rl-layers        · [data-rl-layers]                        T07 capas que se separan
   8  .rl-mf            · [data-rl-manifesto]                     T08 manifiesto en tres frases
   9  .rl-rotate        · [data-rl-words]                         T09 palabra que rota
   10 .rl-win           · [data-rl-window]                        T10 ventana con pestañas
   11 .rl-tiles/.rl-tile· [data-rl-tile]  (hoja: .rl-sheet[--claro]) T11 tarjeta con '+'
   12 .rl-gal           · [data-rl-gallery]                       T12 galería horizontal
   13 .rl-plans/.rl-plan, .rl-fold · [data-rl-fold]               T15 planes + desglose
   14 .rl-cmp           · [data-rl-compare]                       T16 comparador
   15 .rl-nav           · [data-rl-localnav]                      barra local de anclas
   16 .rl-loop          · [data-rl-loop]                          video en bucle con pausa
   17 .rl-ref, .rl-notes                                          notas al pie
   ============================================================ */

/* ---------- 0 · Tokens y capítulos (T13) ---------- */
/* Registrados para que el paso al capítulo claro se funda en vez de
   saltar (sin @property el cambio es seco, pero igual de legible). */
@property --rl-bg { syntax: '<color>'; inherits: true; initial-value: #0A0A0A; }
@property --rl-fg { syntax: '<color>'; inherits: true; initial-value: rgb(244 244 246 / .92); }
@property --rl-fg-2 { syntax: '<color>'; inherits: true; initial-value: rgb(244 244 246 / .55); }
@property --rl-line { syntax: '<color>'; inherits: true; initial-value: rgb(244 244 246 / .14); }
@property --rl-surface { syntax: '<color>'; inherits: true; initial-value: #151516; }

:root {
  --rl-carbon: #141415;            /* el "carbón": capítulos de proceso, de borde a borde */
  --rl-paper: #F3F3F2;             /* el único capítulo claro: planes y comparador */
  --rl-bg: var(--ink);
  --rl-fg: var(--text-on-ink);
  --rl-fg-2: var(--text-on-ink-2);
  --rl-line: var(--line-on-ink);
  --rl-field: rgb(var(--fg-rgb) / .36);   /* borde de campos y controles: 3:1 (CLAUDE.md) */
  --rl-surface: var(--ink-2);             /* tarjetas, ventanas, placas */
  --rl-surface-2: var(--ink-3);
  --rl-hot: var(--orange);                /* naranja para texto chico (sobretítulo, frase clave) */
  --rl-hot-big: var(--orange);            /* naranja para cifras y precios grandes */
  --rl-on-hot: var(--ink);

  /* Escala de pantallas (T01). 68 px a 1440, 34 en el teléfono: el
     análisis pide 56-80 px en escritorio para el titular de una idea. */
  --rl-fs-title: clamp(2.125rem, 1.25rem + 3.4vw, 4.25rem);
  --rl-fs-title-m: clamp(1.75rem, 1.05rem + 2.1vw, 2.75rem);   /* zonas de decisión y tarjetas */
  --rl-fs-lede: clamp(1.125rem, .95rem + .6vw, 1.5rem);        /* 24 px a 1440, 18 en el teléfono */
  --rl-fs-fig: clamp(4.5rem, 1.6rem + 8.4vw, 9.5rem);          /* cifra aislada: 152 px a 1440 */
  --rl-fs-mf: clamp(1.9rem, 1.05rem + 2.75vw, 3.5rem);         /* frases del manifiesto: 56 px a 1440 */
  --rl-fs-fig-s: clamp(3rem, 1.6rem + 4.2vw, 5.5rem);          /* cifras en fila */
  --rl-ls-title: -0.028em;
  --rl-seam: clamp(80px, 14vh, 180px);    /* largo del fundido entre negro y carbón */
  --rl-chrome: 0px;
  --rl-nav-h: 56px;
}

.rl-ch { position: relative; background: var(--rl-bg); color: var(--rl-fg); }
.rl-ch--negro { --rl-bg: var(--ink); }
/* El capítulo manda el fondo: un .s-ink o .s-paper de main.css dentro de
   él taparía el carbón (o el claro) con su propio gris. */
.rl-ch :is(.s-ink, .s-paper) { background: transparent; color: inherit; }
/* Carbón de borde a borde. El fondo NO cambia en seco: arranca y termina
   en el negro de la página con un fundido de --rl-seam, así el paso se
   siente como luz que cambia y no como una caja gris (pedido del cliente
   en Nosotros: "todo negro, más coherente"). Dos capítulos de carbón
   seguidos van en uno solo. */
.rl-ch--carbon {
  --rl-bg: var(--rl-carbon);
  --rl-surface: #1C1C1F;
  --rl-surface-2: #242427;
  background: linear-gradient(180deg, var(--ink) 0, var(--rl-carbon) var(--rl-seam), var(--rl-carbon) calc(100% - var(--rl-seam)), var(--ink) 100%);
}
/* Claro: solo para planes y comparador (360 y Contenido). Sin JS o con
   movimiento reducido es claro desde el principio. Con JS se enciende
   cuando su borde de arriba pasa el 62 % de la pantalla y se apaga al
   salir por abajo, con un fundido de .9 s (nunca queda a medias si dejas
   de hacer scroll). Redefine los tokens de main.css para que los botones
   y kickers de siempre funcionen encima. La hoja del '+' (T11) que se
   abre desde una tarjeta del claro lleva los mismos tokens
   (.rl-sheet--claro): el <dialog> vive en la capa superior, fuera del
   capítulo, y no los hereda. */
.rl-ch--claro, .rl-sheet--claro {
  --rl-bg: var(--rl-paper);
  --rl-fg: #0A0A0A;
  --rl-fg-2: #5E5E5E;                 /* 5,8:1 sobre el claro */
  --rl-line: rgb(10 10 10 / .12);
  --rl-field: rgb(10 10 10 / .5);
  --rl-surface: #FFFFFF;
  --rl-surface-2: #E8E8E7;
  --rl-hot: #C42D00;                  /* #FF4201 no llega a 4,5 en texto chico sobre claro (3,1); este da 5,1 */
  --rl-hot-big: #FF4201;              /* cifras y precios grandes: 3,1 ≥ 3 */
  --text-on-ink: var(--rl-fg);
  --text-on-ink-2: var(--rl-fg-2);
  --line-on-ink: var(--rl-line);
  --tint-soft: rgb(10 10 10 / .06);
  --tint-hover: rgb(10 10 10 / .08);
}
.rl-ch--claro {
  background: var(--rl-bg);
  color: var(--rl-fg);
  transition: --rl-bg .9s var(--ease-ui), --rl-fg .9s var(--ease-ui), --rl-fg-2 .9s var(--ease-ui), --rl-line .9s var(--ease-ui), --rl-surface .9s var(--ease-ui);
}
/* Mientras el claro cambia de luz (.is-fading, lo que dura el fundido; lo
   pone el JS), lo de adentro no corre sus propias transiciones: Chrome las
   reinicia en cada cuadro persiguiendo a los tokens que se funden, y un
   botón con "transition: color .25s" o una frase blanca con .9 s quedaban
   lavados casi un segundo después de que el fondo ya era claro (medido en
   360 #planes). Sin ellas, todo sigue al fondo cuadro a cuadro. La frase
   de la doble capa queda fuera: no transiciona su color (ver T02). */
html.rl-anim .rl-ch--claro.is-fading :not(.rl-dual :is(strong, b)),
html.rl-anim .rl-ch--claro.is-fading ::before,
html.rl-anim .rl-ch--claro.is-fading ::after { transition: none !important; }
html.rl-anim .rl-ch--claro:not(.is-lit) {
  --rl-bg: var(--ink);
  --rl-fg: rgb(244 244 246 / .92);
  --rl-fg-2: rgb(244 244 246 / .55);
  --rl-line: rgb(244 244 246 / .14);
  --rl-surface: #151516;
}
.rl-ch--claro .kicker { color: var(--rl-hot); }
.rl-ch--claro ::selection { background: var(--orange); color: var(--ink); }

/* ---------- 1 · Una idea por pantalla (T01) ---------- */
.rl-screen {
  position: relative;
  min-height: min(100svh, 1000px);
  display: grid; align-content: center;
  padding-block: clamp(88px, 13vh, 150px);
}
.rl-screen--auto { min-height: 0; }
/* .container trae margin-inline: auto y, dentro de una rejilla, los
   márgenes automáticos anulan el estirado: sin esto el bloque se encoge
   al ancho de su texto y queda centrado (mismo caso que .hero__content). */
.rl-screen > *, .rl-scene__pin > *, .rl-layers__pin > *, .rl-mf__lines { width: 100%; }
.rl-screen__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
/* En pantallas partidas el titular baja a 56 px (sigue dentro de 56-80) para
   caber en dos líneas en su media columna. */
.rl-screen--split .rl-title { font-size: clamp(2.125rem, 1.1rem + 2.7vw, 3.5rem); max-width: 16ch; }
@media (min-width: 960px) {
  .rl-screen--split .rl-screen__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .rl-screen--split.rl-screen--flip .rl-screen__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .rl-screen--split.rl-screen--flip .rl-screen__text { order: 2; }
}
.rl-screen--center { text-align: center; }
.rl-screen--center .rl-title, .rl-screen--center .rl-lede { margin-inline: auto; }

.rl-kicker {
  display: block; margin-bottom: 18px;
  font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
  color: var(--rl-hot);
}
.rl-title {
  font-size: var(--rl-fs-title); font-weight: 500;
  line-height: 1.04; letter-spacing: var(--rl-ls-title);
  max-width: 15ch; color: var(--rl-fg);
  text-wrap: balance;
}
.rl-title--m { font-size: var(--rl-fs-title-m); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; }
.rl-title em { font-style: normal; color: var(--rl-hot-big); }
.rl-lede {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 31em;
  font-size: var(--rl-fs-lede); line-height: 1.45; letter-spacing: -0.008em;
  color: var(--rl-fg-2);
}
.rl-lede + .rl-lede { margin-top: .9em; }
.rl-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: clamp(28px, 3.4vw, 44px); }
.rl-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 500; color: var(--rl-fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .2s var(--ease-ui), text-decoration-color .2s var(--ease-ui);
}
.rl-link:hover { color: var(--rl-hot); text-decoration-color: currentColor; }

/* ---------- 2 · Doble capa de lectura (T02) ---------- */
/* El párrafo va en gris; lo que va en <strong> se lee en blanco y con
   eso solo ya se entiende la pantalla (máximo dos por párrafo). Un <em>
   es la frase clave en naranja (una por pantalla, si hace falta). Con
   JS, las frases blancas se encienden cuando el párrafo llega a la
   vista: empiezan en el gris del resto y suben a blanco una tras otra.
   Lo que se anima es la mezcla (--rl-k, de 0 a 1), no el color: el color
   se calcula en cada cuadro con los tokens del momento. Así, en el
   capítulo claro, la frase acompaña al fundido del fondo en vez de
   perseguirlo (con "transition: color" quedaba casi invisible hasta 1,9 s
   después de encenderse el claro). Sin color-mix(), blanco directo. */
@property --rl-k { syntax: '<number>'; inherits: false; initial-value: 1; }
.rl-dual { color: var(--rl-fg-2); }
.rl-dual strong, .rl-dual b {
  font-weight: 500;
  color: var(--rl-fg);
  color: color-mix(in srgb, var(--rl-fg) calc(var(--rl-k) * 100%), var(--rl-fg-2));
  transition: --rl-k .9s var(--ease-ui);
}
.rl-dual em { font-style: normal; font-weight: 500; color: var(--rl-hot); }
html.rl-anim .rl-dual:not(.is-in) :is(strong, b) { --rl-k: 0; }
.rl-dual :is(strong, b):nth-of-type(2) { transition-delay: .35s; }

/* ---------- 3 · Resumen en carrusel (T03) ---------- */
.rl-hl { position: relative; padding-block: clamp(24px, 4vh, 48px); }
.rl-hl__track {
  display: flex; gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
}
.rl-hl__track::-webkit-scrollbar { display: none; }
.rl-hl__track:focus-visible { outline-offset: -3px; }
.rl-hl__slide {
  position: relative; flex: 0 0 auto;
  width: min(1180px, 100vw - 2 * var(--gutter) - 56px, 72svh * 16 / 9);   /* cabe con sus controles en una pantalla */
  aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background: var(--rl-surface);
  scroll-snap-align: start;
  isolation: isolate;
}
.rl-hl__media { position: absolute; inset: 0; z-index: -1; }
.rl-hl__media > img, .rl-hl__media > video, .rl-hl__media .rl-loop video { width: 100%; height: 100%; object-fit: cover; }
.rl-hl__media::after {   /* velo para que la frase se lea sobre la foto */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .72) 0%, rgb(var(--ink-rgb) / .2) 34%, transparent 55%);
}
.rl-hl__media--plain::after { display: none; }
.rl-hl__caption {
  position: relative; max-width: 15em;
  padding: clamp(24px, 3.4vw, 52px);
  font-size: clamp(1.3rem, .9rem + 1.3vw, 2.15rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.018em;
  color: rgb(var(--fg-rgb) / .92);
  text-wrap: balance;
}
.rl-hl__caption span { color: rgb(var(--fg-rgb) / .58); }
.rl-hl__caption em { font-style: normal; color: var(--orange); }
/* Con JS, la frase de la diapositiva que llega sube un poco al entrar. */
html.rl-anim .rl-hl__slide .rl-hl__caption { transition: opacity .7s var(--ease-ui), transform .8s var(--ease-enter); }
html.rl-anim .rl-hl.is-ready .rl-hl__slide:not(.is-active) .rl-hl__caption { opacity: .25; transform: translateY(10px); }

.rl-hl__controls {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-top: clamp(18px, 2.4vw, 28px);
}
html:not(.rl-js) .rl-hl__controls { display: none; }
.rl-hl__dots {
  display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 14px;
  border-radius: 999px; background: var(--rl-surface-2);
}
.rl-hl__dot {
  position: relative; width: 24px; height: 44px; display: grid; place-items: center; border-radius: 999px;
  transition: width .5s var(--ease-enter);
}
.rl-hl__dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--fg-rgb) / .5);
  transition: width .5s var(--ease-enter), background-color .3s var(--ease-ui);
}
.rl-ch--claro .rl-hl__dot::before { background: rgb(10 10 10 / .35); }
.rl-hl__dot[aria-current="true"] { width: 60px; }
.rl-hl__dot[aria-current="true"]::before { width: 44px; background: rgb(var(--fg-rgb) / .24); }
.rl-ch--claro .rl-hl__dot[aria-current="true"]::before { background: rgb(10 10 10 / .16); }
.rl-hl__dot i {   /* el progreso de la diapositiva activa: se llena en el tiempo que dura */
  position: absolute; left: 8px; top: 50%; width: 44px; height: 8px; margin-top: -4px; border-radius: 999px;
  /* Como en Apple: el avance va en el color del texto (blanco sobre la
     barra gris; tinta en el capítulo claro), no en naranja. */
  background: rgb(var(--fg-rgb) / .92); transform-origin: left; transform: scaleX(0); opacity: 0;
}
.rl-ch--claro .rl-hl__dot i { background: rgb(10 10 10 / .82); }
.rl-hl__dot[aria-current="true"] i { opacity: 1; }
.rl-hl.is-playing .rl-hl__dot[aria-current="true"] i { animation: rl-fill var(--rl-hl-ms, 6000ms) linear forwards; }
.rl-hl.is-held .rl-hl__dot[aria-current="true"] i { animation-play-state: paused; }
.rl-hl:not(.is-playing) .rl-hl__dot[aria-current="true"] i { transform: scaleX(1); }
@keyframes rl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rl-hl__dot:focus-visible { outline-offset: 0; }

/* Botón redondo de pausa/reproducir: lo comparten el carrusel y los videos. */
.rl-play {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--rl-surface-2); color: var(--rl-fg);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.rl-play:hover { background: var(--orange); color: var(--ink); }
.rl-play:active { transform: scale(.94); }
.rl-play svg { width: 16px; height: 16px; }
.rl-play .rl-i-play { display: none; }
.rl-play[data-state="paused"] .rl-i-play { display: block; }
.rl-play[data-state="paused"] .rl-i-pause { display: none; }

@media (max-width: 759px) {
  .rl-hl__slide { width: min(100vw - 2 * var(--gutter) - 28px, 64svh * 4 / 5); aspect-ratio: 4 / 5; }
  .rl-hl__caption { max-width: none; }
}

/* ---------- 4 · Cifra gigante aislada (T04) ---------- */
/* Un número solo, con un calificador chico arriba y una línea abajo.
   El párrafo que lo explica va antes o al lado, nunca pegado. La cifra
   va en claro y peso 200 (DESIGN.md: la cifra en naranja solo si es LA
   cifra clave del capítulo: .rl-fig--hot). */
.rl-fig { display: grid; justify-items: start; }
.rl-fig__q { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 500; color: var(--rl-fg); margin-bottom: .2em; }
.rl-fig__n {
  display: block; font-size: var(--rl-fs-fig); font-weight: 200; line-height: .92; letter-spacing: -0.045em;
  color: var(--rl-fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rl-fig__n small { font-size: .42em; font-weight: 300; letter-spacing: -0.02em; margin-left: .06em; }
.rl-fig--hot .rl-fig__n { color: var(--rl-hot-big); }
.rl-fig__line { margin-top: .9em; max-width: 26ch; font-size: clamp(1rem, .92rem + .3vw, 1.18rem); line-height: 1.4; color: var(--rl-fg-2); }
.rl-fig--center { justify-items: center; text-align: center; }
.rl-fig--center .rl-fig__line { margin-inline: auto; }
/* Dos o tres cifras lado a lado, con un filete fino arriba de cada una. */
.rl-figs { display: grid; gap: clamp(36px, 4vw, 72px) clamp(24px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.rl-figs .rl-fig { padding-top: 22px; border-top: 1px solid var(--rl-line); }
.rl-figs .rl-fig__n { font-size: var(--rl-fs-fig-s); }
/* Mientras cuenta, el número no cambia de ancho (cifras tabulares) y el
   lector de pantalla lee el valor final (el JS lo pone en .sr-only). */
.rl-num-anim { display: inline-block; }

/* ---------- 5 · Selector que reescribe los beneficios (T05) ---------- */
.rl-picker__q {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .4em;
  font-size: var(--rl-fs-title-m); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--rl-fg);
}
.rl-picker__field { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.rl-picker__select {
  appearance: none; -webkit-appearance: none;
  field-sizing: content;   /* mide la opción elegida antes de que llegue el JS (que manda: ancho en línea) */
  max-width: 100%; min-height: 48px; padding: 0 1.3em 2px 0;
  font: inherit; color: var(--rl-hot-big); letter-spacing: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--rl-field); border-radius: 0;
  cursor: pointer; text-overflow: ellipsis;
  transition: border-color .2s var(--ease-ui);
}
.rl-picker__select:hover, .rl-picker__select:focus-visible { border-bottom-color: var(--rl-hot-big); }
.rl-picker__select:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.rl-picker__select option { color: #0A0A0A; background: #FFFFFF; font-size: 1rem; }
/* La opción elegida, a tamaño de titular, es un rótulo que pone el JS; el
   <select> real va encima, invisible y a 16 px. El menú nativo usa la letra
   del select: a 44 px la lista salía gigante (macOS). */
.rl-picker__value {
  display: block; box-sizing: border-box; max-width: 100%; padding: 0 1.3em 4px 0;   /* 4 px: las descendentes (q, p) no tocan el subrayado */
  line-height: max(1.15em, 43px);   /* 48 px de alto mínimo con el texto centrado */
  color: var(--rl-hot-big); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--rl-field);
  transition: border-color .2s var(--ease-ui);
}
.rl-picker__field.is-cover .rl-picker__select {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0;
  font-size: 16px; letter-spacing: normal; opacity: 0;
}
.rl-picker__field.is-cover:hover .rl-picker__value,
.rl-picker__field.is-cover:focus-within .rl-picker__value { border-bottom-color: var(--rl-hot-big); }
.rl-picker__field.is-cover:has(.rl-picker__select:focus-visible) { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.rl-picker__field svg { position: absolute; right: .1em; width: .5em; height: .5em; pointer-events: none; color: var(--rl-hot-big); }
.rl-picker__sets { margin-top: clamp(32px, 4vw, 56px); }
.rl-picker__label { display: none; margin: 0 0 16px; font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
html:not(.rl-js) .rl-picker__label { display: block; }
html:not(.rl-js) .rl-picker__set + .rl-picker__set { margin-top: 48px; }
html:not(.rl-js) .rl-picker__q { display: none; }   /* sin JS no hay selector: cada grupo lleva su rótulo */
.rl-cards { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.rl-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(200px, 22vw, 280px); padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--r); background: var(--rl-surface);
}
.rl-card__k { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
.rl-card__t { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.012em; color: var(--rl-fg); text-wrap: balance; }
.rl-card__t s { color: var(--rl-fg-2); text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 70%, transparent); }
.rl-card__n { margin-top: auto; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--rl-hot-big); }
.rl-card__n small { font-size: .45em; font-weight: 300; letter-spacing: -0.01em; }
.rl-card__p { margin-top: auto; font-size: .98rem; line-height: 1.45; color: var(--rl-fg-2); }
.rl-card__n + .rl-card__p { margin-top: 0; }
@media (max-width: 599px) { .rl-card { min-height: 0; } .rl-card__n, .rl-card__p { margin-top: 6px; } }
html.rl-anim .rl-picker__set .rl-card { transition: opacity .45s var(--ease-ui), transform .6s var(--ease-enter); }
html.rl-anim .rl-picker__set.is-out .rl-card { opacity: 0; transform: translateY(8px); transition: opacity .18s var(--ease-exit), transform .18s var(--ease-exit); }
html.rl-anim .rl-picker__set.is-in .rl-card { opacity: 0; transform: translateY(18px); transition: none; }
html.rl-anim .rl-picker__set .rl-card:nth-child(2) { transition-delay: .06s; }
html.rl-anim .rl-picker__set .rl-card:nth-child(3) { transition-delay: .12s; }
html.rl-anim .rl-picker__set .rl-card:nth-child(4) { transition-delay: .18s; }

/* ---------- 6 · Escena fija (T06) ---------- */
/* Sin JS, con movimiento reducido o en pantallas muy bajas: el titular
   arriba y los pasos uno debajo de otro, todos a la vista. Con JS: la
   sección mide un tramo de scroll por paso (--rl-steps, lo pone el JS);
   el escenario se queda pegado (position: sticky, nunca el pin de
   ScrollTrigger: pasaba a fixed y volvía, y cada cambio era un CLS) y
   los textos entran y salen de a uno. El JS escribe data-rl-step en la
   sección (para que el visual cambie con CSS) y --rl-p (0 → 1). */
.rl-scene { position: relative; }
.rl-scene__pin { position: relative; padding-block: clamp(88px, 13vh, 150px); }
.rl-scene__layout { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.rl-scene__steps { display: grid; gap: 28px; counter-reset: rl-step; }
.rl-scene__step { max-width: 30em; }
.rl-scene__n { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-hot); font-variant-numeric: tabular-nums; }
.rl-scene__t { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.016em; color: var(--rl-fg); }
.rl-scene__p { margin-top: 10px; font-size: var(--rl-fs-lede); line-height: 1.42; color: var(--rl-fg-2); }
.rl-scene__p strong { font-weight: 500; color: var(--rl-fg); }
.rl-scene__tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border: 1px solid var(--rl-line); border-radius: 999px; font-size: .88rem; color: var(--rl-fg); }
.rl-scene__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.rl-scene__nav { display: none; }

html.rl-anim .rl-scene.is-live { height: calc(100svh + var(--rl-steps, 4) * var(--rl-step-h, 75svh)); }
html.rl-anim .rl-scene.is-live .rl-scene__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; align-content: center;
  padding-block: calc(var(--rl-nav-h) + 24px) 40px;
}
html.rl-anim .rl-scene.is-live .rl-scene__steps { position: relative; display: grid; gap: 0; }
html.rl-anim .rl-scene.is-live .rl-scene__step {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(28px); visibility: hidden;
  transition: opacity .45s var(--ease-exit), transform .55s var(--ease-exit), visibility 0s .55s;
}
html.rl-anim .rl-scene.is-live .rl-scene__step.is-past { transform: translateY(-28px); }
html.rl-anim .rl-scene.is-live .rl-scene__step.is-on {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .6s var(--ease-enter) .12s, transform .75s var(--ease-enter) .12s, visibility 0s;
}
/* Puntos para saltar a un paso (y saber cuántos quedan) */
html.rl-anim .rl-scene.is-live .rl-scene__nav {
  display: flex; gap: 6px; margin-top: clamp(24px, 3vw, 40px);
}
.rl-scene__nav button {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--rl-line);
  font-size: .88rem; color: var(--rl-fg-2);
  transition: color .25s var(--ease-ui), border-color .25s var(--ease-ui), background-color .25s var(--ease-ui);
}
.rl-scene__nav button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.rl-scene__nav button:hover { color: var(--rl-fg); border-color: var(--rl-field); }
.rl-scene__nav button[aria-current="step"] { color: var(--rl-on-hot); background: var(--orange); border-color: var(--orange); }
.rl-scene__nav button[aria-current="step"]::before { opacity: 1; }
.rl-scene__bar { display: none; }
html.rl-anim .rl-scene.is-live .rl-scene__bar {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rl-line);
}
.rl-scene__bar i { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(var(--rl-p, 0)); }
@media (min-width: 960px) {
  .rl-scene__layout--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .rl-scene__layout--split .rl-scene__stage { order: 2; }
}
@media (max-width: 959px) {
  html.rl-anim .rl-scene.is-live .rl-scene__pin { align-content: start; padding-top: calc(var(--rl-nav-h) + 16px); }
  html.rl-anim .rl-scene.is-live .rl-scene__layout { gap: 20px; }
  html.rl-anim .rl-scene.is-live .rl-scene__nav { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  html.rl-anim .rl-scene.is-live .rl-scene__nav button { flex: none; }
  html.rl-anim .rl-scene.is-live .rl-scene__nav button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html.rl-anim .rl-scene.is-live .rl-scene__nav button { padding: 0; width: 44px; justify-content: center; }
  html.rl-anim .rl-scene.is-live .rl-scene__nav button[aria-current="step"] { width: 64px; }
}
/* Pantallas muy bajas (un teléfono acostado): la escena no cabe pegada. */
@media (max-height: 560px) {
  html.rl-anim .rl-scene.is-live { height: auto; }
  html.rl-anim .rl-scene.is-live .rl-scene__pin { position: relative; height: auto; overflow: visible; }
  html.rl-anim .rl-scene.is-live .rl-scene__step { grid-area: auto; opacity: 1; transform: none; visibility: visible; }
  html.rl-anim .rl-scene.is-live .rl-scene__steps { gap: 28px; }
  html.rl-anim .rl-scene.is-live .rl-scene__nav, html.rl-anim .rl-scene.is-live .rl-scene__bar { display: none; }
}

/* ---------- 7 · Capas que se separan, con notas de a una (T07) ---------- */
/* El objeto queda quieto en el centro; con el scroll sus capas se
   separan (vista isométrica) y aparece una nota por capa, pegada a la
   capa que describe. Sin JS / movimiento reducido: las capas ya abiertas
   y las notas en lista, numeradas como las capas. --rl-open (0 → 1) es
   cuánto se abrió; --rl-i, el número de cada capa (lo pone el JS). */
.rl-layers { position: relative; }
.rl-layers__pin { position: relative; padding-block: clamp(88px, 13vh, 150px); }
.rl-layers__head { max-width: 40rem; }
.rl-layers__body { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .rl-layers__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.rl-layers__stage {
  --rl-open: 1; --rl-gap: clamp(34px, 5.4vw, 74px);
  position: relative; height: clamp(320px, 46vw, 560px);
  perspective: 2200px; display: grid; place-items: center;
}
.rl-layers__obj {
  position: relative; width: min(78%, 440px); aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(calc(-36deg + var(--rl-open) * 6deg)) translateZ(calc((var(--rl-n, 5) - 1) * (4px + var(--rl-gap) * var(--rl-open)) * -.5));
}
.rl-layers__layer {
  position: absolute; inset: 0; border-radius: 18px;
  background: var(--rl-surface); border: 1px solid var(--rl-line);
  transform: translateZ(calc(var(--rl-i, 0) * (4px + var(--rl-gap) * var(--rl-open))));   /* 4 px: cerradas no se pisan (z-fighting) */
  transition: border-color .5s var(--ease-ui), background-color .5s var(--ease-ui);
  overflow: hidden;
}
.rl-layers__layer::after {   /* número de la capa (también lo lleva su nota) */
  content: attr(data-rl-n); position: absolute; right: 14px; bottom: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--rl-fg-2);
}
.rl-layers__notes { display: grid; gap: 18px; counter-reset: rl-note; }
.rl-layers__note { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.rl-layers__note b { grid-row: span 2; font-size: .85rem; font-weight: 500; letter-spacing: .1em; color: var(--rl-hot); font-variant-numeric: tabular-nums; }
.rl-layers__note strong { font-weight: 500; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.2; color: var(--rl-fg); }
.rl-layers__note span { color: var(--rl-fg-2); line-height: 1.45; }

html.rl-anim .rl-layers.is-live { height: calc(100svh + var(--rl-n, 5) * 60svh + 40svh); }
html.rl-anim .rl-layers.is-live .rl-layers__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; padding-block: calc(var(--rl-nav-h) + 24px) 32px;
}
html.rl-anim .rl-layers.is-live .rl-layers__body { position: relative; display: block; margin-top: 0; height: 100%; }
html.rl-anim .rl-layers.is-live .rl-layers__stage { height: 100%; }
/* Abiertas, las capas que no hablan quedan como fantasmas (solo el filete
   y el contenido tenue): la capa activa se ve entera aunque esté debajo. */
html.rl-anim .rl-layers.is-live .rl-layers__layer {
  background-color: color-mix(in srgb, var(--rl-surface) calc((1 - var(--rl-open) * .88) * 100%), transparent);
  border-color: color-mix(in srgb, var(--rl-line) 100%, transparent);
}
html.rl-anim .rl-layers.is-live .rl-layers__layer > * { opacity: calc(1 - var(--rl-open) * .72); transition: opacity .5s var(--ease-ui); }
html.rl-anim .rl-layers.is-live .rl-layers__layer.is-on { background-color: var(--rl-surface); border-color: rgb(var(--orange-rgb) / .75); }
html.rl-anim .rl-layers.is-live .rl-layers__layer.is-on > * { opacity: 1; }
html.rl-anim .rl-layers.is-live .rl-layers__notes { position: absolute; inset: 0; pointer-events: none; display: block; }
html.rl-anim .rl-layers.is-live .rl-layers__note {
  position: absolute; top: var(--rl-y, 50%); width: min(300px, 30vw);
  transform: translateY(-50%) translateX(var(--rl-dx, 0)); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-exit), transform .45s var(--ease-exit), visibility 0s .45s;
}
html.rl-anim .rl-layers.is-live .rl-layers__note.is-left { left: 0; --rl-dx: -14px; text-align: left; }
html.rl-anim .rl-layers.is-live .rl-layers__note.is-right { right: 0; --rl-dx: 14px; }
html.rl-anim .rl-layers.is-live .rl-layers__note.is-on {
  opacity: 1; visibility: visible; --rl-dx: 0px;
  transition: opacity .55s var(--ease-enter) .1s, transform .7s var(--ease-enter) .1s, visibility 0s;
}
@media (max-width: 959px) {
  html.rl-anim .rl-layers.is-live .rl-layers__body { display: grid; grid-template-rows: 1fr auto; }
  html.rl-anim .rl-layers.is-live .rl-layers__stage { height: auto; min-height: 0; }
  html.rl-anim .rl-layers.is-live .rl-layers__notes { position: relative; inset: auto; display: grid; min-height: 7.5em; }
  html.rl-anim .rl-layers.is-live .rl-layers__note { position: static; grid-area: 1 / 1; width: auto; transform: translateY(10px); top: auto; }
  html.rl-anim .rl-layers.is-live .rl-layers__note.is-on { transform: none; }
  .rl-layers__obj { width: min(70%, 300px); }
}
@media (max-height: 560px) {
  html.rl-anim .rl-layers.is-live { height: auto; }
  html.rl-anim .rl-layers.is-live .rl-layers__pin { position: relative; height: auto; }
  html.rl-anim .rl-layers.is-live .rl-layers__notes { position: static; display: grid; }
  html.rl-anim .rl-layers.is-live .rl-layers__note { position: static; opacity: 1; visibility: visible; transform: none; width: auto; }
}

/* ---------- 8 · Manifiesto en tres frases sobre el hero desenfocado (T08) ---------- */
/* El hero se queda quieto y se desenfoca hacia el negro mientras suben
   tres frases, de a una. El desenfoque es una COPIA del fondo ya
   desenfocada que aparece por opacidad (barato: no se redibuja un blur
   en cada cuadro); si el fondo es un video o un canvas, se desenfoca el
   propio fondo. Sin JS o con movimiento reducido: el hero tal cual y las
   tres frases debajo, grandes. */
.rl-mf { position: relative; }
.rl-mf__pin { position: relative; }
.rl-mf__stage { position: relative; min-height: 100svh; display: grid; overflow: clip; }
.rl-mf__bg { position: absolute; inset: 0; z-index: 0; }
.rl-mf__bg > img, .rl-mf__bg > video, .rl-mf__bg > picture img { width: 100%; height: 100%; object-fit: cover; }
.rl-mf__blur { position: absolute; inset: -6%; z-index: 1; opacity: 0; pointer-events: none; filter: blur(28px) saturate(1.1); }
.rl-mf__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--ink); opacity: var(--rl-veil, 0); }
.rl-mf__hero { position: relative; z-index: 2; align-self: end; width: 100%; padding-block: var(--hero-top) clamp(48px, 9vh, 110px); }
.rl-mf__lines { position: relative; z-index: 3; padding-block: clamp(72px, 12vh, 140px); }
.rl-mf__line {
  display: block; max-width: 21ch;
  font-size: var(--rl-fs-mf); font-weight: 500; line-height: 1.08; letter-spacing: -0.024em;
  color: var(--rl-fg); text-wrap: balance;
}
.rl-mf__line + .rl-mf__line { margin-top: .5em; }
.rl-mf__line em { font-style: normal; color: var(--orange); }

html.rl-anim .rl-mf.is-live { height: calc(100svh + var(--rl-mf-len, 230svh)); }
html.rl-anim .rl-mf.is-live .rl-mf__pin { position: sticky; top: 0; height: 100svh; }
html.rl-anim .rl-mf.is-live .rl-mf__stage { height: 100svh; }
html.rl-anim .rl-mf.is-live .rl-mf__hero { opacity: var(--rl-hero-o, 1); transform: translateY(var(--rl-hero-y, 0px)); }
html.rl-anim .rl-mf.is-live .rl-mf__blur { opacity: var(--rl-blur-o, 0); }
html.rl-anim .rl-mf.is-live .rl-mf__bg.is-filter { filter: blur(var(--rl-blur-px, 0px)); transform: scale(1.06); }
html.rl-anim .rl-mf.is-live .rl-mf__lines {
  position: absolute; inset: 0; display: grid; align-content: center; padding-block: calc(var(--rl-nav-h) + 24px) 32px;
}
html.rl-anim .rl-mf.is-live .rl-mf__line {
  opacity: 0; transform: translateY(36px);
  transition: opacity .5s var(--ease-exit), transform .6s var(--ease-exit);
}
html.rl-anim .rl-mf.is-live .rl-mf__line.is-on { opacity: 1; transform: none; transition: opacity .8s var(--ease-enter), transform 1s var(--ease-enter); }
/* La frase anterior baja a gris cuando entra la siguiente (doble capa):
   al final las tres quedan encendidas. */
html.rl-anim .rl-mf.is-live .rl-mf__line.is-on.is-dim { opacity: .42; }

/* ---------- 9 · Una palabra que rota dentro del titular (T09) ---------- */
.rl-rotate { position: relative; display: inline; white-space: nowrap; }
.rl-rotate__w {
  padding: 0 .1em; margin: 0 -.02em; border-radius: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 0 / 100% 100%;
  color: var(--ink);
}
.rl-rotate__caret { display: none; }
html.rl-anim .rl-rotate.is-run .rl-rotate__w { background-size: 0% 100%; color: inherit; transition: background-size .32s var(--ease-enter), color .2s var(--ease-ui); }
html.rl-anim .rl-rotate.is-run .rl-rotate__w.is-hl { background-size: 100% 100%; color: var(--ink); }
html.rl-anim .rl-rotate.is-run .rl-rotate__caret {
  display: inline-block; width: .06em; min-width: 2px; height: .82em; margin-left: .04em; vertical-align: -.06em;
  background: var(--orange); animation: rl-caret .9s steps(1) infinite;
}
html.rl-anim .rl-rotate.is-done .rl-rotate__caret { display: none; }
@keyframes rl-caret { 50% { opacity: 0; } }

/* ---------- 10 · Ventana con pestañas (T10) ---------- */
.rl-win__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  width: min(100%, 62svh * 16 / 9); margin-inline: auto;   /* ventana, pestañas y leyenda en una pantalla */
  background: var(--rl-surface); isolation: isolate;
}
.rl-win__view { position: absolute; inset: 0; }
.rl-win__view > img, .rl-win__view > video, .rl-win__view .rl-loop video { width: 100%; height: 100%; object-fit: cover; }
html.rl-js .rl-win__view { opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .5s var(--ease-exit), transform .7s var(--ease-exit), visibility 0s .7s; }
html.rl-js .rl-win__view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-enter), transform 1s var(--ease-enter), visibility 0s; }
html:not(.rl-js) .rl-win__stage { display: none; }
.rl-win__bar { display: flex; justify-content: center; margin-top: clamp(18px, 2.2vw, 28px); }
html:not(.rl-js) .rl-win__bar { display: none; }
/* Control segmentado: una píldora que se desliza hasta la pestaña elegida. */
.rl-seg {
  position: relative; display: inline-flex; max-width: 100%; padding: 4px; gap: 2px;
  border-radius: 999px; background: var(--rl-surface-2);
  overflow-x: auto; scrollbar-width: none;
}
.rl-seg::-webkit-scrollbar { display: none; }
.rl-seg__pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--orange);
  transform: translateX(var(--rl-x, 0px)); width: var(--rl-w, 0px);
  transition: transform .45s var(--ease-enter), width .45s var(--ease-enter);
}
.rl-seg__tab {
  position: relative; z-index: 1; flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: .95rem; font-weight: 500; white-space: nowrap; color: var(--rl-fg-2);
  transition: color .3s var(--ease-ui);
}
.rl-seg__tab:hover { color: var(--rl-fg); }
.rl-seg__tab[aria-selected="true"] { color: var(--rl-on-hot); }
.rl-seg:not(.has-pill) .rl-seg__tab[aria-selected="true"] { background: var(--orange); }
.rl-seg__tab:focus-visible { outline-offset: -2px; }
.rl-win__panels { display: grid; margin-top: clamp(16px, 2vw, 24px); }
html.rl-js .rl-win__panel { grid-area: 1 / 1; }
html.rl-js .rl-win__panel[hidden] { display: block; visibility: hidden; opacity: 0; transition: none; }
html.rl-js .rl-win__panel { transition: opacity .6s var(--ease-enter) .1s; }
html:not(.rl-js) .rl-win__panel + .rl-win__panel { margin-top: 28px; }
.rl-win__caption { max-width: 36em; margin-inline: auto; text-align: center; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; color: var(--rl-fg-2); }
.rl-win__caption strong { font-weight: 500; color: var(--rl-fg); }
.rl-win__panel .rl-fold { justify-content: center; }
.rl-win__panel .rl-fold__body { text-align: left; max-width: 44em; margin-inline: auto; }
.rl-win__label { display: none; }
html:not(.rl-js) .rl-win__label { display: block; text-align: center; margin-bottom: 8px; font-weight: 500; color: var(--rl-fg); }
@media (max-width: 759px) {
  .rl-win__stage { aspect-ratio: 4 / 5; width: min(100%, 58svh * 4 / 5); }
  .rl-win__bar { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .rl-win__caption { text-align: left; }
}

/* ---------- 11 · Tarjeta con titular y '+' (T11) ---------- */
/* Mosaico, no rejilla de tarjetas iguales (DESIGN.md): 6 columnas en
   escritorio; cada tarjeta ocupa 2 (--wide: 3, --full: 6, --tall: dos
   filas). La tarjeta muestra casi solo el titular; el detalle (~90
   palabras) vive dentro, en .rl-tile__detail, y el JS lo abre en una
   hoja que crece desde la tarjeta. Sin JS el detalle se ve en la propia
   tarjeta. */
.rl-tiles { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; }
.rl-tile {
  position: relative; grid-column: span 2; display: flex; flex-direction: column;
  min-height: clamp(260px, 26vw, 380px); padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--r); background: var(--rl-surface); overflow: hidden; isolation: isolate;
  transition: background-color .3s var(--ease-ui);
}
.rl-tile--wide { grid-column: span 3; }
.rl-tile--full { grid-column: span 6; }
.rl-tile--tall { grid-row: span 2; }
.rl-tile__k { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-hot); }
.rl-tile__t { margin-top: 12px; max-width: 14ch; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--rl-fg); text-wrap: balance; }
.rl-tile__s { margin-top: 10px; max-width: 30ch; color: var(--rl-fg-2); line-height: 1.45; text-wrap: pretty; }
.rl-tile__meta { margin-top: auto; padding-top: 22px; padding-right: 60px; font-size: .92rem; color: var(--rl-fg-2); font-variant-numeric: tabular-nums; }
.rl-tile__media { position: absolute; inset: 0; z-index: -1; }
.rl-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.rl-tile__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--ink-rgb) / .78), rgb(var(--ink-rgb) / .1) 52%, rgb(var(--ink-rgb) / .55)); }
.rl-tile--photo .rl-tile__t, .rl-tile--photo .rl-tile__s, .rl-tile--photo .rl-tile__meta { color: rgb(var(--fg-rgb) / .94); }
.rl-tile--photo .rl-tile__k { color: var(--orange); }
.rl-tile__more {
  position: absolute; right: clamp(16px, 1.8vw, 24px); bottom: clamp(16px, 1.8vw, 24px);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rl-surface-2); color: var(--rl-fg);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .3s var(--ease-snap);
}
.rl-tile--photo .rl-tile__more { background: var(--glass-hover); color: rgb(var(--fg-rgb) / .94); }
.rl-tile__more svg { width: 16px; height: 16px; }
.rl-tile__more::after { content: ''; position: absolute; inset: -2000px; }   /* toda la tarjeta abre */
.rl-tile:hover .rl-tile__more, .rl-tile__more:focus-visible { background: var(--orange); color: var(--ink); transform: rotate(90deg); }
.rl-tile:hover .rl-tile__media img { transform: scale(1.03); }
.rl-tile__more:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.rl-tile__detail { margin-top: 18px; color: var(--rl-fg-2); line-height: 1.55; }
html.rl-js .rl-tile__detail { display: none; }
html:not(.rl-js) .rl-tile__more { display: none; }
@media (max-width: 959px) {
  .rl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-tile, .rl-tile--wide { grid-column: span 1; }
  .rl-tile--full { grid-column: span 2; }
}
@media (max-width: 599px) {
  .rl-tiles { grid-template-columns: minmax(0, 1fr); }
  .rl-tile, .rl-tile--wide, .rl-tile--full { grid-column: auto; min-height: 220px; }
  .rl-tile--tall { grid-row: auto; min-height: 320px; }
}
/* La hoja: <dialog> a pantalla completa con su propio velo (en la
   captura ::backdrop no siempre pinta; ver .cv-light en DESIGN.md).
   Sus colores son tokens propios (--rl-sheet-*): oscura por defecto y
   blanca con .rl-sheet--claro, que el JS pone cuando la tarjeta de origen
   está en un capítulo claro encendido (la placa crece de una tarjeta
   blanca a una hoja blanca, como la del Shop). La placa que viaja toma el
   color final del panel, así que basta con cambiar estos tokens. */
.rl-sheet {
  --rl-sheet-bg: #1C1C1F;
  --rl-sheet-fg: rgb(var(--fg-rgb) / .92);
  --rl-sheet-fg-2: rgb(var(--fg-rgb) / .62);
  --rl-sheet-strong: rgb(var(--fg-rgb) / .94);
  --rl-sheet-btn: #2A2A2E;
  --rl-sheet-k: var(--orange);
  --rl-sheet-veil: rgb(10 10 10 / .78);
  --rl-sheet-shadow: none;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-on-ink);
  overflow: hidden;
}
.rl-sheet--claro {
  --rl-sheet-bg: #FFFFFF;
  --rl-sheet-fg: #0A0A0A;
  --rl-sheet-fg-2: #5E5E5E;           /* 6,4:1 sobre blanco */
  --rl-sheet-strong: #0A0A0A;
  --rl-sheet-btn: #EDEDEC;
  --rl-sheet-k: #C42D00;              /* naranja de texto chico sobre claro: 5,6:1 sobre blanco */
  --rl-sheet-veil: rgb(10 10 10 / .46);
  --rl-sheet-shadow: 0 30px 80px rgb(0 0 0 / .18);
}
.rl-sheet--claro ::selection { background: var(--orange); color: var(--ink); }
.rl-sheet[open] { display: grid; place-items: center; }
.rl-sheet::backdrop { background: transparent; }
.rl-sheet__veil { position: absolute; inset: 0; background: var(--rl-sheet-veil); opacity: 0; transition: opacity .45s var(--ease-ui); }
.rl-sheet.is-open .rl-sheet__veil { opacity: 1; }
.rl-sheet__panel {
  position: relative; width: min(760px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg);
  background: var(--rl-sheet-bg); color: var(--rl-sheet-fg); box-shadow: var(--rl-sheet-shadow);
}
.rl-sheet__inner { opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease-exit), transform .4s var(--ease-exit); }
.rl-sheet.is-open .rl-sheet__inner { opacity: 1; transform: none; transition: opacity .5s var(--ease-enter) .18s, transform .6s var(--ease-enter) .18s; }
.rl-sheet__close {
  position: sticky; top: 0; float: right; margin: -8px -8px 0 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rl-sheet-btn); color: var(--rl-sheet-fg);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.rl-sheet__close:hover { background: var(--orange); color: var(--ink); }
.rl-sheet__close svg { width: 14px; height: 14px; }
.rl-sheet .rl-tile__k { color: var(--rl-sheet-k); }
.rl-sheet__title { margin-top: 12px; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.024em; text-wrap: balance; }
.rl-sheet__body { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.55; color: var(--rl-sheet-fg-2); }
.rl-sheet__body > * + * { margin-top: 1em; }
.rl-sheet__body strong { font-weight: 500; color: var(--rl-sheet-strong); }
.rl-sheet__body ul { display: grid; gap: 8px; }
.rl-sheet__body li { position: relative; padding-left: 18px; }
.rl-sheet__body li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
html.rl-sheet-open { overflow: hidden; }

/* ---------- 12 · Galería horizontal (T12) ---------- */
.rl-gal__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.rl-gal__arrows { display: flex; gap: 10px; flex: none; }
html:not(.rl-js) .rl-gal__arrows { display: none; }
.rl-arrow {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rl-surface-2); color: var(--rl-fg);
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), opacity .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.rl-arrow:hover:not([aria-disabled="true"]) { background: var(--orange); color: var(--ink); }
.rl-arrow:active:not([aria-disabled="true"]) { transform: scale(.94); }
.rl-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.rl-arrow svg { width: 16px; height: 16px; }
.rl-gal__track {
  display: flex; gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  padding-bottom: 6px;
}
.rl-gal__track::-webkit-scrollbar { display: none; }
.rl-gal__track:focus-visible { outline-offset: -3px; }
.rl-gal__item { flex: 0 0 auto; width: clamp(250px, 27vw, 400px); scroll-snap-align: start; }
.rl-gal--wide .rl-gal__item { width: clamp(280px, 40vw, 620px); }
.rl-gal__frame { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--rl-surface); }
.rl-gal--wide .rl-gal__frame { aspect-ratio: 16 / 10; }
.rl-gal__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
@media (hover: hover) { a.rl-gal__link:hover .rl-gal__frame img { transform: scale(1.03); } }
.rl-gal__cap { margin-top: 16px; max-width: 34ch; font-size: 1rem; line-height: 1.45; color: var(--rl-fg-2); }
.rl-gal__cap b { font-weight: 500; color: var(--rl-fg); }
a.rl-gal__link { display: block; border-radius: var(--r); }
a.rl-gal__link:focus-visible { outline-offset: 4px; }

/* ---------- 13 · Planes en 3 tarjetas (T15) y desglose plegable ---------- */
.rl-plans { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.rl-plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r); background: var(--rl-surface);
  border: 1px solid transparent;
}
.rl-plan--hi { border-color: rgb(var(--orange-rgb) / .55); }
.rl-plan__flag {   /* sobre el filete de arriba: no ocupa fila y los precios quedan alineados */
  position: absolute; top: 0; left: clamp(24px, 2.6vw, 40px); transform: translateY(-50%);
  padding: 5px 12px; border-radius: 999px; background: var(--orange); color: var(--ink);
  font-size: .78rem; font-weight: 500; letter-spacing: .02em; line-height: 1.2;
}
.rl-plan__name { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.014em; color: var(--rl-fg); }

.rl-plan__line { margin-top: 8px; color: var(--rl-fg-2); line-height: 1.45; min-height: 2.9em; }
.rl-plan__price { display: flex; align-items: baseline; gap: .3em; margin-top: clamp(22px, 2.4vw, 34px); color: var(--rl-hot-big); white-space: nowrap; }
.rl-plan__cur { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 400; letter-spacing: .02em; }
.rl-plan__amt { font-size: clamp(3.2rem, 2.2rem + 3vw, 5.25rem); font-weight: 200; line-height: .95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.rl-plan__per { font-size: 1rem; color: var(--rl-fg-2); }
.rl-plan__save { margin-top: 10px; font-size: .95rem; color: var(--rl-fg); }
.rl-plan__inc { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(22px, 2.4vw, 30px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--rl-line); }
.rl-plan__inc li { display: grid; justify-items: center; gap: 6px; width: 76px; text-align: center; font-size: .78rem; line-height: 1.2; color: var(--rl-fg-2); }
.rl-plan__inc i {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--rl-line); color: var(--rl-fg);
}
.rl-plan__inc svg { width: 22px; height: 22px; }
.rl-plan__inc li.is-new { color: var(--rl-fg); }
.rl-plan__inc li.is-new i { border-color: var(--orange); color: var(--rl-hot-big); }
.rl-plan__list { display: grid; gap: 9px; margin-top: 20px; font-size: .96rem; color: var(--rl-fg-2); }
.rl-plan__list li { position: relative; padding-left: 20px; line-height: 1.4; }
.rl-plan__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: currentColor; }
.rl-plan__foot { display: grid; gap: 14px; margin-top: auto; padding-top: clamp(22px, 2.4vw, 32px); }
.rl-plan__foot .btn { justify-content: center; }
/* Las filas de las tres tarjetas (nombre, línea, precio, valor, iconos,
   lista, pie) se alinean entre sí: cada tarjeta es una subrejilla de 7
   filas (--rl-plan-rows si una página usa otra cantidad). */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .rl-plans { row-gap: 0; }
    .rl-plan { display: grid; grid-template-rows: subgrid; grid-row: span var(--rl-plan-rows, 7); align-content: start; }
    .rl-plan__foot { align-self: end; }
  }
}
@media (max-width: 899px) {
  .rl-plans {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 420px);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .rl-plans::-webkit-scrollbar { display: none; }
  .rl-plan { scroll-snap-align: start; }
}
/* Plegable (desglose de un plan, lista de formatos detrás de un '+',
   letra chica...). Sin JS está abierto; el JS lo cierra al empezar. */
.rl-fold { display: grid; }
.rl-fold__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start;
  font-size: .95rem; font-weight: 500; color: var(--rl-fg);
  transition: color .2s var(--ease-ui);
}
.rl-fold__btn:hover { color: var(--rl-hot); }
.rl-fold__btn i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rl-field); flex: none; }
.rl-fold__btn i::before, .rl-fold__btn i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; background: currentColor; transition: transform .3s var(--ease-snap); }
.rl-fold__btn i::after { transform: rotate(90deg); }
.rl-fold__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }
html:not(.rl-js) .rl-fold__btn { display: none; }
.rl-fold__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease-enter), opacity .4s var(--ease-ui); }
.rl-fold__body > div { overflow: hidden; min-height: 0; }
.rl-fold__body.is-closed { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease-exit), opacity .25s var(--ease-ui), visibility 0s .4s; visibility: hidden; }
.rl-fold__inner { padding-top: 8px; }
.rl-break { display: grid; gap: 0; font-size: .95rem; }
.rl-break div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rl-line); color: var(--rl-fg-2); }
.rl-break div:last-child { border-bottom: 0; color: var(--rl-fg); font-weight: 500; }
.rl-break dd { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rl-fg); }

/* ---------- 14 · Comparador en columnas (T16) ---------- */
/* role="table" sobre una rejilla: cada fila lleva su rótulo arriba (con
   icono) y las celdas centradas debajo; un guion cuando no aplica. La
   cabecera de columnas (selector + nombre + botón) se queda pegada al
   bajar, compacta. En el teléfono, dos columnas. */
.rl-cmp { --rl-cols: 3; position: relative; }
.rl-cmp__grid { display: grid; grid-template-columns: repeat(var(--rl-cols), minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 40px); }
.rl-cmp__head {
  position: sticky; top: var(--rl-chrome, 0px); z-index: 5;
  background: var(--rl-bg); padding-block: 14px 18px; border-bottom: 1px solid transparent;
  transition: top .55s var(--ease-enter), border-color .3s var(--ease-ui);
}
.rl-cmp.is-stuck .rl-cmp__head { border-bottom-color: var(--rl-line); }
.rl-cmp.is-leaving .rl-cmp__head { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-ui), visibility 0s .25s; }
.rl-cmp__col { display: grid; justify-items: center; text-align: center; gap: 6px; min-width: 0; }
.rl-cmp__field { position: relative; width: 100%; max-width: 280px; }
.rl-cmp__select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px; padding: 0 34px 0 14px;
  font: inherit; font-size: .95rem; color: var(--rl-fg); text-overflow: ellipsis;
  background: transparent; border: 1px solid var(--rl-field); border-radius: 10px; cursor: pointer;
  transition: border-color .2s var(--ease-ui);
}
.rl-cmp__select:hover { border-color: var(--rl-fg); }
.rl-cmp__select option { color: #0A0A0A; background: #FFFFFF; }
.rl-cmp__field svg { position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; pointer-events: none; color: var(--rl-fg-2); }
.rl-cmp__name { margin-top: 12px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: var(--rl-fg); overflow-wrap: anywhere; }
.rl-cmp__sub { font-size: .92rem; color: var(--rl-fg-2); }
.rl-cmp__go { margin-top: 8px; height: 38px; padding: 0 16px; font-size: .9rem; }
.rl-cmp__sum, .rl-cmp__sub, .rl-cmp__go { transition: opacity .25s var(--ease-ui); }
.rl-cmp.is-stuck .rl-cmp__sub { display: none; }
.rl-cmp.is-stuck .rl-cmp__name { margin-top: 6px; font-size: 1.05rem; }
.rl-cmp.is-stuck .rl-cmp__field { display: none; }
.rl-cmp__sums { padding-block: clamp(26px, 3.4vw, 44px); border-bottom: 1px solid var(--rl-line); }
.rl-cmp__sumrow + .rl-cmp__sumrow { margin-top: clamp(20px, 2.6vw, 32px); }
.rl-cmp__fig { display: grid; justify-items: center; text-align: center; }
.rl-cmp__fig b { font-size: clamp(2.6rem, 1.8rem + 2.8vw, 4.25rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--rl-fg); font-variant-numeric: tabular-nums; }
.rl-cmp__fig span { margin-top: 6px; font-size: .92rem; color: var(--rl-fg-2); }
.rl-cmp__row { padding-block: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--rl-line); }
.rl-cmp__label {
  display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2);
}
.rl-cmp__label svg { width: 18px; height: 18px; color: var(--rl-fg); }
.rl-cmp__cell { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; min-width: 0; color: var(--rl-fg); line-height: 1.4; }
.rl-cmp__cell small { font-size: .88rem; color: var(--rl-fg-2); }
.rl-cmp__cell ul { display: grid; gap: 4px; }
.rl-cmp__dash { display: block; width: 18px; height: 1.5px; margin-top: .7em; background: var(--rl-fg-2); }
.rl-cmp__yes { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.rl-cmp__yes::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.rl-cmp__part { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.rl-cmp__part::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--orange); }
html.rl-anim .rl-cmp .is-swap { animation: rl-swap .55s var(--ease-enter); }
@keyframes rl-swap { from { opacity: 0; transform: translateY(8px); } }
.rl-cmp__fallback { overflow-x: auto; }
@media (max-width: 759px) {
  .rl-cmp { --rl-cols: 2 !important; }
  .rl-cmp [data-rl-col="2"] { display: none; }
  .rl-cmp__go { padding: 0 12px; }
}

/* ---------- 15 · Barra local de anclas ---------- */
/* Pegada arriba, debajo de la cabecera cuando la cabecera está a la
   vista (--rl-top, lo escribe el JS). Nombre de la página, 3 a 5 anclas
   y el CTA. El filete de abajo cuenta cuánto llevas de la página.
   Mismo aspecto que la de Contenido & Redes (.cr-nav). */
.rl-nav {
  position: sticky; top: var(--rl-top, 0px); z-index: 60; height: var(--rl-nav-h);
  background: var(--ink); border-bottom: 1px solid var(--line-on-ink);
  transition: top .55s var(--ease-enter);
}
html:not(.rl-js) .rl-nav { position: relative; }   /* sin JS la cabecera no se esconde: la barra no se pega debajo de ella */
/* Sin JS la cabecera nunca toma su vidrio oscuro: sobre el capítulo claro
   sus enlaces blancos no se leerían. Con el kit cargado, tinta de fondo. */
html:not(.rl-js) .header { background: var(--ink); }
.rl-nav__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.rl-nav__id { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 36px; font-weight: 500; font-size: .95rem; white-space: nowrap; color: var(--text-on-ink); }
.rl-nav__id::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.rl-nav__scroll { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rl-nav__scroll::-webkit-scrollbar { display: none; }
.rl-nav__links { display: flex; justify-content: center; gap: 2px; width: max-content; min-width: 100%; }
.rl-nav__links a {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 4px;
  font-size: .9rem; white-space: nowrap; color: var(--text-on-ink-2);
  transition: color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.rl-nav__links a:hover { color: var(--text-on-ink); background: var(--tint-soft); }
.rl-nav__links a[aria-current] { color: var(--orange); }
.rl-nav__links a::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease-ui), transform .3s var(--ease-snap); }
.rl-nav__links a[aria-current]::after { opacity: 1; transform: none; }
.rl-nav__links a:focus-visible { outline-offset: -2px; }
.rl-nav :is(a, button) { scroll-margin-top: -240px; }
.rl-nav__cta { flex: none; height: 36px; padding: 0 16px; font-size: .9rem; transition: opacity .3s var(--ease-ui), visibility 0s; }
.rl-nav.is-under .rl-nav__cta { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-ui), visibility 0s .2s; }
.rl-nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange); transform-origin: left; transform: scaleX(var(--rl-read, 0)); }
@media (max-width: 759px) {
  .rl-nav__id { display: none; }
  .rl-nav__links { justify-content: flex-start; }
  .rl-nav__inner { gap: 12px; }
  .rl-nav__scroll { margin-left: calc(-1 * var(--gutter) + 8px); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

/* ---------- 16 · Video en bucle con pausa ---------- */
/* Mudo, en bucle, solo mientras se ve; siempre con botón de pausa
   (WCAG 2.2.2). Con movimiento reducido no arranca solo: queda el póster
   y el botón dice "Reproducir". Carga nada hasta acercarse (preload="none"). */
.rl-loop { position: relative; width: 100%; height: 100%; }
.rl-loop video { width: 100%; height: 100%; object-fit: cover; background: var(--ink-2); }
.rl-loop .rl-play { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; background: var(--glass-hover); color: rgb(var(--fg-rgb) / .94); }
.rl-loop .rl-play:hover { background: var(--orange); color: var(--ink); }

/* ---------- 17 · Notas al pie ---------- */
/* La letra chica (IVA, costos de terceros, condiciones) sale del cuerpo:
   un superíndice que lleva a la nota y la nota que vuelve al texto. */
.rl-ref { font-size: .62em; line-height: 0; vertical-align: super; font-weight: 500; }
.rl-ref a { display: inline-block; min-width: 1.4em; padding: .1em .15em; color: var(--rl-hot); text-align: center; border-radius: 3px; }
.rl-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }
.rl-notes { padding-block: clamp(40px, 6vh, 72px); border-top: 1px solid var(--rl-line); }
.rl-notes__t { font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
.rl-notes ol { display: grid; gap: 10px; margin-top: 18px; max-width: 72ch; list-style: none; counter-reset: rl-n; }
.rl-notes li { position: relative; padding-left: 28px; font-size: .9rem; line-height: 1.55; color: var(--rl-fg-2); counter-increment: rl-n; }
.rl-notes li::before { content: counter(rl-n); position: absolute; left: 0; top: 0; font-weight: 500; color: var(--rl-fg); font-variant-numeric: tabular-nums; }
.rl-notes li:target { color: var(--rl-fg); }
.rl-notes li a.rl-back { margin-left: 6px; color: var(--rl-hot); }

/* ---------- Movimiento reducido: todo quieto y legible ---------- */
@media (prefers-reduced-motion: reduce) {
  .rl-hl__track, .rl-gal__track, .rl-plans { scroll-behavior: auto; }
  .rl-hl__dot i { animation: none !important; }
  .rl-tile__more, .rl-tile:hover .rl-tile__more { transform: none; }
  .rl-tile:hover .rl-tile__media img, a.rl-gal__link:hover .rl-gal__frame img { transform: none; }
}