/* Solo lo de /results/. Los tokens y la base van en base.css; la
   cabecera y el pie, en chrome.css. Aqui no se repite nada de eso. */
/* ══ RESULTADOS ═══════════════════════════════════════════════════════════
   Pagina de consulta, no de contemplacion. Aqui la gente viene a comprobar
   una cifra, asi que manda la lectura: nada se oculta con el scroll, todo se
   escanea, y el unico movimiento es que las tarjetas suban al entrar. */
body.rs{background:var(--dark);color:var(--cream)}

/* ── Portada: se entra dentro de la letra ────────────────────────────────
   El titular es corto a proposito. Antes eran tres lineas gigantes mas
   subtitulo mas tres cifras y no cabia en una pantalla; ahora el titular cabe
   solo y las cifras salen POR DENTRO de la O, que es donde tienen sitio. */
/* Cada seccion pegajosa necesita su propio hueco, y el hueco es lo que da el
   RECORRIDO. El del hero mide 1,5 pantallas: la primera MEDIA pantalla no se
   mueve nada —el respiro para leer el titular antes de que empiece a pasar
   cosas, el mismo en las siete paginas— y en la pantalla restante sube el panel
   por delante. */
.rail-hold{position:relative}
.rail,.rail-plano{position:relative}
/* Sin .sfx esto no existe: las dos secciones se leen una debajo de otra como
   cualquier pagina. El carril entero vive bajo la clase que pone el guion. */
.sfx .rail-hold{height:calc(var(--vhu) * 4);z-index:1}
/* La ventana del carril. Se queda fija una pantalla mientras el plano corre por
   detras: es lo unico que consigue una diagonal DE VERDAD. Si la pagina sigue
   bajando sus 620 px mientras yo desplazo 250 en horizontal, lo que se ve es un
   scroll vertical con un temblor lateral, no una diagonal. */
.sfx .rail{position:sticky;top:0;height:var(--vhu);overflow:hidden;background:var(--dark)}
/* Lo UNICO que se mueve en toda la escena. Un solo transform sobre un solo
   elemento: los dos paneles son hijos suyos, asi que van clavados el uno al
   otro por construccion, no por calibrarlos.

   Y el fondo va AQUI, no en cada seccion. Con la trama de puntos repetida en
   cada panel, cada rejilla queda anclada a su propia caja y en la union entre
   los dos el patron da un salto: se ve la costura y se lee como dos cosas
   pegadas. Una sola trama, sobre el plano, cubriendo a los dos: entonces lo que
   se mueve es UNA superficie, y son los puntos cruzando la pantalla los que
   cuentan que te estas desplazando. La caja se estira para abarcar el panel de
   destino, que vive a un ancho y 0,42 anchos de aqui. */
.sfx .rail-plano{position:absolute;left:0;top:0;
 width:200vw;height:calc(var(--vhu) + 42vw);
 background:var(--dark);background-image:var(--dots-d);background-size:30px 30px;
 will-change:transform}
.sfx .rail-plano > section{position:absolute;left:0;top:0;width:100vw;height:var(--vhu)}
/* Las secciones se quedan transparentes: el fondo lo pone el plano. Solo bajo
   .sfx — sin guion cada una necesita el suyo. */
.sfx #rs-hero,.sfx .zh-rev{background:none}
#rs-hero{position:relative;height:var(--vhu);min-height:520px;overflow:hidden;
 background:var(--dark);background-image:var(--dots-d);background-size:30px 30px}
/* El hero YA NO SE PEGA. El relevo con la segunda seccion es un scroll normal
   —hacia abajo— al que se le suma un desplazamiento lateral: el titular se va
   hacia la izquierda mientras la seccion de abajo entra desde la derecha, y el
   conjunto se lee como bajar en diagonal, hacia abajo y a la derecha. Ni
   horizontal ni vertical, la mezcla. De la segunda seccion en adelante la
   pagina sigue exactamente igual que antes, con su baraja pegajosa. */
.sfx #rs-hero{z-index:1}

/* El muro de logotipos del fondo. Cinco cintas en diagonal que corren en
   sentidos alternos y a velocidades distintas: con velocidades iguales se ve
   que es una sola imagen desplazandose y el truco se cae. Va con opacidad muy
   baja porque no esta ahi para leerse — esta para que el hero no sea un fondo
   liso y para que, sin decirlo, se note que hay clientes detras. Decorativo y
   nada mas: aria-hidden, y ningun dato que no este ya escrito en la pagina. */
.zh-wall{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4) 0,#000 13%,#000 87%,rgba(0,0,0,.4) 100%);
 mask-image:linear-gradient(180deg,rgba(0,0,0,.4) 0,#000 13%,#000 87%,rgba(0,0,0,.4) 100%)}
/* El velo. Las cintas se quedan vivas en todo el hero y solo se apagan en el
   nucleo donde va el titular: sin esto, las pastillas pasan por detras de las
   letras y el titular pierde el filo. Va aparte de las cintas y a opacidad
   entera; si estuviera dentro heredaria la opacidad del muro y no taparia
   nada. Radio corto y caida larga: lo justo para el bloque de texto, no medio
   hero apagado. */
.zh-wall::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(45% 38% at 50% 50%,rgba(26,8,4,.94) 0,rgba(26,8,4,.66) 50%,rgba(26,8,4,0) 80%)}
.zh-wall-rot{position:absolute;top:50%;left:50%;opacity:.17;
 transform:translate(-50%,-50%) rotate(-24deg);
 display:flex;flex-direction:column;gap:clamp(16px,2.4vw,34px)}
.zh-row{display:flex;overflow:hidden}
/* La cinta lleva DOS copias identicas de la lista y se desplaza justo la
   mitad: al terminar, el fotograma final es pixel a pixel el inicial y el
   bucle no tiene costura. Por eso la separacion va en margin de cada pastilla
   y no en gap de la cinta — un gap entre las dos mitades rompe la simetria y
   se ve el salto. */
.zh-track{display:flex;flex:0 0 auto;animation:zhCintaL var(--sp,120s) linear infinite}
.zh-track.der{animation-name:zhCintaR}
@keyframes zhCintaL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes zhCintaR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.zh-pill{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 background:rgba(243,238,228,.9);border-radius:16px;
 width:clamp(168px,17vw,268px);height:clamp(86px,8.8vw,138px);
 padding:clamp(12px,1.4vw,20px) clamp(16px,2vw,28px);
 margin-right:clamp(16px,2.4vw,34px)}
.zh-pill img{width:100%;height:100%;object-fit:contain;display:block}
@media (prefers-reduced-motion:reduce){.zh-track{animation:none}}

.zh-title{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
 align-items:center;justify-content:center;text-align:center;
 padding:calc(var(--navh) + 20px) clamp(20px,5vw,52px) clamp(30px,5vh,60px)}
/* Sin will-change. El titular ya no se anima por su cuenta —ahora se mueve el
   hero entero y el va dentro—, y un will-change sobre algo que no cambia obliga
   al navegador a mantenerle una capa aparte para nada: memoria de video y una
   composicion mas en cada fotograma. Declarar de mas cuesta igual que animar. */
.zh-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
 line-height:.88;font-size:clamp(46px,min(11vw,16vh),172px);max-width:12ch;margin:0;color:var(--cream)}
.zh-kw b{color:rgba(236,229,219,.85);font-weight:600}
.zh-kw{max-width:62ch;margin:clamp(12px,2vh,18px) auto 0;font-size:clamp(14px,1.5vw,16.5px);
 line-height:1.6;color:rgba(236,229,219,.62)}
.zh-lead{margin-top:clamp(18px,2.6vh,30px);max-width:52ch;font-size:clamp(15px,1.7vw,19px);
 line-height:1.6;color:rgba(236,229,219,.7)}

/* Lo que sale por dentro de la letra. En crema, no en el rojo de marca: por el
   ojo de la O se ve un trozo pequeno y un granate a ese tamano parece una
   mancha. El crema ademas da el contraste que pide el momento — se sale de lo
   oscuro y se entra en lo claro.
   Ningun tono blanco en el degradado: sobre el fondo oscuro, un centro casi
   blanco a media opacidad se lee como un foco, no como papel. Todo el rango
   se queda dentro de la familia crema de la marca. */
/* MISMO FONDO QUE EL HERO. Antes era crema sobre oscuro, y con dos fondos
   distintos lo que se lee es "una tarjeta clara tapando otra cosa". Con el
   mismo fondo y la misma trama de puntos los dos paneles son UNA superficie
   continua: lo que se ve moverse son los puntos, y eso es lo que cuenta la
   escena. El contraste claro vuelve mas abajo, en las tarjetas de casos. */
.zh-rev{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
 min-height:var(--vhu);color:var(--cream);overflow:hidden;
 background:var(--dark);background-image:var(--dots-d);background-size:30px 30px}
/* Sube por delante del hero y lo tapa: margen negativo de una pantalla, esquina
   redondeada y sombra hacia arriba. Es el mismo recurso que usan las tarjetas
   del final, y por eso la pagina se lee como una baraja de principio a fin. */
/* Sin margen negativo: el hero esta pegado arriba, asi que el panel sube por
   encima con solo ir detras en el flujo. El panel se pega a su vez, para que el
   carrete pueda subir por delante de EL igual que el subio por delante del
   hero. La pagina entera es una baraja. */
.sfx .zh-rev{z-index:2}
.zh-in{position:relative;text-align:center;max-width:min(1100px,92vw);
 padding:clamp(40px,7vh,86px) clamp(20px,5vw,52px)}
.sfx .zh-in{opacity:0}   /* entra cuando el panel ya esta puesto */
.zh-in h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.9;font-size:clamp(26px,min(4.4vw,6.4vh),64px);max-width:17ch;margin:0 auto;
 color:var(--cream)}
.zh-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(28px,4vh,46px);
 background:rgba(236,229,219,.14);border:1px solid rgba(236,229,219,.14);border-radius:14px;overflow:hidden}
.zh-fact{background:rgba(236,229,219,.055);padding:clamp(18px,2.4vw,30px)}
.zh-fact b{display:block;font-family:var(--display);font-weight:800;line-height:.84;
 font-size:clamp(32px,4.4vw,58px);color:#F0794F}
.zh-fact span{display:block;margin-top:9px;font-size:13px;line-height:1.5;color:rgba(236,229,219,.62)}
@media(max-width:760px){.zh-facts{grid-template-columns:1fr}}

/* ── El carrete de cifras ────────────────────────────────────────────────
   Las escenas de /about/ pero sin foto: aqui la protagonista es la cifra, a
   tamano descomunal, y lo que se releva es una tras otra sobre el mismo
   fondo. La foto no hace falta cuando el numero ya es la imagen. */
.rl-hold{position:relative}
/* ── EL ORDEN DE APILADO ─────────────────────────────────────────────────
   La pagina es una baraja: cada seccion sube por delante de la anterior. Para
   que eso funcione, el z-index tiene que CRECER en el mismo orden en que se
   leen — hero 1, panel 2, carrete 3, tarjetas 4, cierre 5.
   Si una se queda por debajo, sube igual pero se ve por detras de la anterior,
   que es lo que pasaba con las tarjetas: el carrete a 3 y ellas a 1, asi que
   aparecian tapadas por un carrete desenfocado. */
.sfx .rl-hold{height:calc(var(--vhu) * var(--h-reel, 4.8));z-index:3;
 /* El carrete llega desplazado un ancho de pantalla hacia la derecha, y eso
    saca barra horizontal en TODA la pagina si nadie lo recorta. Medido en
    movil: 370 px de desborde. clip y no hidden — hidden crearia contenedor
    de scroll y le quitaria el sitio al position:sticky de .rl-stage. */
 overflow-x:clip;overflow-y:visible;
 /* 1,7 pantallas, y el numero NO es estetico: es lo que separa el segundo
    relevo del momento en que el carril se suelta.

    El carril deja de pegarse en (alto del contenedor - alto del carril), o sea
    a una pantalla del final. Y el carrete arrancaba tambien a una pantalla del
    final, porque su margen negativo era justo una pantalla. Los dos numeros
    coincidian POR CONSTRUCCION, asi que el segundo relevo empezaba en el mismo
    pixel en que el carril se soltaba: la seccion 2 se iba hacia arriba —scroll
    vertical— a la vez que corria la diagonal. Medido: railTop de 0 a -236
    durante el relevo. Eso es lo que se veia como "primero baja y luego hace la
    diagonal".
    Adelantandolo a 1,7 pantallas, el relevo entero ocurre con el carril aun
    clavado y lo unico que se mueve es la diagonal. */
 margin-top:calc(var(--vhu) * -2.2)}
/* La cuenta que ata estos dos numeros, por si alguien los toca:
   el carril se suelta en (alto del contenedor - 1 pantalla);
   el relevo 2 empieza en (alto del contenedor - este margen) y dura 0,7.
   Para que termine con el carril aun clavado hace falta margen > 1,7.
   Con 2,2 sobran 0,5 pantallas. Bajarlo de 1,7 devuelve el fallo de que la
   seccion se deslice hacia arriba mientras corre la diagonal. */
.rl-stage{position:relative;background:var(--dark);background-image:var(--dots-d);
 background-size:30px 30px;padding:clamp(40px,7vh,80px) 0}
.sfx #rlStage{will-change:transform,filter}

.sfx .rl-stage{position:sticky;top:0;height:var(--vhu);overflow:hidden;padding:0;
 /* Llega desplazado por la diagonal, asi que necesita reservar capa igual
    que el plano. Y su fondo es el mismo oscuro con la misma trama: al
    moverse los dos por el mismo vector, la union no se ve. */
 will-change:transform}

.rl-scenes{position:relative}
.sfx .rl-scenes{position:absolute;inset:0;display:grid;place-items:center;
 padding:calc(var(--navh) + 20px) clamp(20px,5vw,64px) clamp(30px,6vh,70px)}
.rl-scene{max-width:min(1240px,92vw);margin:0 auto;padding:clamp(30px,5vh,54px) clamp(20px,5vw,52px);
 border-bottom:1px solid rgba(236,229,219,.12)}
.rl-scene:last-child{border-bottom:0}
/* Dos columnas: la cifra a un lado y el texto al otro. Ademas de aprovechar
   el ancho, es lo que hace que se vea que entran desde lados opuestos — en
   una sola columna las dos velocidades no se distinguen. */
.sfx .rl-scene{grid-area:1/1;width:100%;padding:0;border-bottom:0;opacity:0;
 display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
 gap:clamp(20px,3.6vw,60px);align-items:center}
.sfx .rl-col{min-width:0}
@media(max-width:900px){
 .sfx .rl-scene{grid-template-columns:1fr;gap:clamp(12px,2vh,20px);align-content:center}
}
.sfx .rl-scene:first-child{opacity:1}

.rl-tag{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
 color:#F0794F;display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0}
.rl-tag i{font-style:normal;font-weight:500;color:rgba(236,229,219,.45)}

/* El logotipo del cliente, en pastilla clara. Los logos son de tinta oscura y
   sobre el fondo de la escena desaparecerian; pasarlos a silueta crema
   destruiria los que tienen detalle dentro. La pastilla los deja intactos y
   ademas encaja con el lenguaje de tarjetas del resto del sitio. */
.rl-logo{display:inline-flex;align-items:center;justify-content:center;background:var(--paper);
 border-radius:16px;padding:clamp(12px,1.4vw,20px) clamp(16px,2vw,26px);
 width:clamp(190px,22vw,320px);height:clamp(96px,11vw,160px);
 margin-bottom:clamp(13px,2vh,20px);will-change:transform}
/* La caja es FIJA y la imagen la llena por dentro con object-fit:contain. Antes
   estaba con max-height/max-width y width:auto, y eso nunca agranda: un
   logotipo que viene a 127 px de ancho se pintaba a 127 px y punto, daba igual
   el hueco que tuviera. De ahi que se siguieran sin ver.
   Con la caja fija, el cuadrado usa todo el alto y el apaisado todo el ancho, y
   los cuatro acaban pesando lo mismo. El tamano de la caja esta puesto contra
   la resolucion real de los archivos —el mayor sube 1,15x, nada que se note—
   asi que no hay ninguno pixelado. */
.rl-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* La cifra. Es lo unico que tiene que verse desde el otro lado de la sala. */
.rl-n{font-family:var(--display);font-weight:800;line-height:.78;letter-spacing:-.03em;
 font-size:clamp(88px,min(22vw,32vh),320px);margin:clamp(8px,1.4vh,18px) 0 0;
 white-space:nowrap;color:var(--cream);will-change:transform}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .rl-n{background-image:linear-gradient(180deg,#F0794F 0%,#F6A277 40%,#ECE5DB 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.rl-n small{font-family:var(--body);font-weight:500;font-size:clamp(14px,1.6vw,20px);
 letter-spacing:0;-webkit-text-fill-color:rgba(236,229,219,.6);color:rgba(236,229,219,.6);
 margin-left:clamp(10px,1.4vw,18px)}
.rl-t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.92;font-size:clamp(22px,min(3.6vw,5.4vh),54px);max-width:20ch;
 margin:0;color:var(--cream);will-change:transform}
.sfx .rl-col + .rl-col .rl-tag{margin-bottom:clamp(12px,2vh,20px)}
.rl-d{margin:clamp(10px,1.6vh,18px) 0 0;max-width:46ch;font-size:clamp(15px,1.6vw,18px);
 line-height:1.62;color:rgba(236,229,219,.68);will-change:transform}

/* ── Las tarjetas ── */
/* Sube por delante del carrete y lo tapa, con el mismo relevo que en /about/:
   el carrete se desenfoca debajo mientras esta aparece en el sitio. */
#rs-cases{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,120px);background:var(--bg);color:var(--dark)}
.sfx #rs-cases{position:relative;z-index:4;margin-top:calc(var(--vhu) * -2);
 border-radius:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,36px) 0 0;
 box-shadow:0 -30px 76px rgba(0,0,0,.62)}
.rs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);
 flex-wrap:wrap;margin-bottom:clamp(28px,4vh,46px)}
.rs-head .h2{max-width:18ch}
#rs-donde{background:var(--bg);padding:clamp(56px,8vw,104px) 0}
#rs-donde .lead + .lead{margin-top:16px}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}

/* ── LAS TARJETAS SE COMEN UNAS A OTRAS ──────────────────────────────────────
   Cada caso se pega arriba y el siguiente sube por delante y lo tapa, dejando
   asomar el canto del anterior. Ocho casos en una rejilla de dos columnas se
   leen como un catalogo; de uno en uno, tapandose, se leen como una lista de
   cosas que pasaron.

   Va en min-width:861px: en movil, ocho pegados con su recorrido cada uno son
   ocho pantallas de scroll y el pulgar no perdona. Alli se quedan en columna.

   El "top" crece 12 px por tarjeta. Con todas al mismo top la de arriba
   desaparece del todo y no se ve que hay una pila debajo; escalonadas, el canto
   de cada una dice cuantas llevas. */
@media(min-width:861px){
 .sfx .rs-grid{display:block}
 .sfx .rs-grid .rs-card{
  position:sticky;
  /* --tope son los 32 px de la barra de WordPress: 0 para un visitante. */
  top:calc(var(--navh) + var(--tope,0px) + 20px + (var(--n,1) - 1) * 12px);
  /* Todas la misma altura, la de la mas alta, calculada por el guion en
     --h-caso. Con alturas distintas la de arriba no llega a tapar a la de
     debajo y asoma contenido suyo por el pie —etiquetas sueltas bajo una
     tarjeta ajena—, que se lee como un fallo y no como una pila. Iguales,
     lo unico que asoma es el canto de 12 px, que es justo lo que queria
     verse. */
  height:var(--h-caso,auto);min-height:44vh;justify-content:center;
  margin:0 0 30vh;
  box-shadow:0 -18px 50px rgba(26,8,4,.14)}
 .sfx .rs-grid .rs-card:last-child{margin-bottom:0}
 /* Las tarjetas claras necesitan fondo OPACO: pegadas una sobre otra, con el
    --paper translucido se leerian los titulares de las de debajo a traves. */
 .sfx .rs-grid .rs-card:not(.rs-big){background:#F3EEE4}
 .sfx .rs-grid .rs-big{grid-column:auto}
 .sfx .rs-grid .rs-card:nth-child(1){--n:1}
 .sfx .rs-grid .rs-card:nth-child(2){--n:2}
 .sfx .rs-grid .rs-card:nth-child(3){--n:3}
 .sfx .rs-grid .rs-card:nth-child(4){--n:4}
 .sfx .rs-grid .rs-card:nth-child(5){--n:5}
 .sfx .rs-grid .rs-card:nth-child(6){--n:6}
 .sfx .rs-grid .rs-card:nth-child(7){--n:7}
 .sfx .rs-grid .rs-card:nth-child(8){--n:8}
 /* El hover levantaba la tarjeta con box-shadow y aqui pelea con la sombra de
    apilado: se queda solo el borde. */
 .sfx .rs-grid .rs-card:hover{box-shadow:0 -18px 50px rgba(26,8,4,.14)}
}
.rs-card{background:var(--paper);border:1px solid var(--line);border-radius:clamp(14px,1.6vw,22px);
 padding:clamp(24px,2.8vw,38px);display:flex;flex-direction:column;
 transition:border-color .3s,box-shadow .3s}
.rs-card:hover{border-color:rgba(26,8,4,.24);box-shadow:0 16px 44px rgba(26,8,4,.09)}
.rs-big{grid-column:1/-1;background:var(--dark);color:var(--cream);border-color:transparent;
 background-image:var(--dots-d);background-size:28px 28px}
.rs-big:hover{box-shadow:0 20px 60px rgba(26,8,4,.3)}

.rs-sector{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
 color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.rs-sector i{font-style:normal;font-weight:500;letter-spacing:.1em;color:rgba(122,82,72,.62)}
.rs-sector i::before{content:'';display:inline-block;width:14px;height:1px;background:currentColor;
 vertical-align:middle;margin-right:10px}
.rs-big .rs-sector{color:#F0794F}
.rs-big .rs-sector i{color:rgba(236,229,219,.45)}

/* La cifra es lo primero que se lee y lo unico que se recuerda. */
.rs-n{font-family:var(--display);font-weight:800;line-height:.82;letter-spacing:-.02em;
 font-size:clamp(52px,6.4vw,86px);color:var(--accent);margin:clamp(14px,2vh,20px) 0 0;
 display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rs-n b{font-family:var(--body);font-weight:500;font-size:clamp(13px,1.35vw,16px);
 letter-spacing:0;color:var(--muted);line-height:1.3}
.rs-big .rs-n{font-size:clamp(64px,9vw,132px);color:#F0794F}
.rs-big .rs-n b{color:rgba(236,229,219,.62)}

.rs-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.94;font-size:clamp(20px,2.1vw,29px);margin:clamp(14px,2vh,20px) 0 0;max-width:22ch}
.rs-big h3{font-size:clamp(26px,3.4vw,48px);max-width:18ch}
.rs-d{margin:clamp(10px,1.4vh,15px) 0 0;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.62;
 color:var(--muted);max-width:44ch}
.rs-big .rs-d{color:rgba(236,229,219,.7);font-size:clamp(15px,1.7vw,19px);max-width:50ch}

.rs-w{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:clamp(18px,2.6vh,26px)}
/* Eran <span> muertos y ahora son enlaces a la ficha del servicio: siete
   tarjetas se convierten en dieciseis entradas a /services/, sin anadir una
   sola palabra. El selector cubre los dos por si queda alguna etiqueta sin
   destino al que mandar. */
.rs-w a:hover{color:var(--accent-dk);box-shadow:inset 0 0 0 1px var(--accent)}
.rs-big .rs-w a:hover{color:#F0794F;box-shadow:inset 0 0 0 1px #F0794F}
.rs-w span,.rs-w a{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
 padding:6px 12px;border-radius:100px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.rs-big .rs-w span,.rs-big .rs-w a{color:rgba(236,229,219,.72);box-shadow:inset 0 0 0 1px rgba(236,229,219,.2)}

/* ── Como se leen estas cifras ── */
#rs-how{background:var(--bg-alt);color:var(--dark);background-image:var(--dots);background-size:28px 28px;
 padding:clamp(56px,8vw,100px) 0}
.rs-how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.rs-list{list-style:none;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,22px);
 padding-top:clamp(6px,1.2vh,16px)}
.rs-list li{position:relative;padding-left:26px;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.62;
 color:var(--muted)}
.rs-list li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
 border-radius:50%;background:var(--accent)}
.rs-list b{color:var(--dark);font-weight:600}

/* ── Cierre ── */
#rs-cta{background:var(--dark);color:var(--cream);text-align:center;
 padding:clamp(20px,3vw,40px) 0 clamp(80px,11vw,140px);background-image:var(--dots-d);background-size:30px 30px}
#rs-cta .h2{margin:0 auto;max-width:16ch}
#rs-cta .lead{margin:20px auto 0;color:rgba(236,229,219,.66)}
.cta-b{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
/* Ultimo de la baraja. Un elemento estatico pierde SIEMPRE contra uno
   posicionado, este donde este en el HTML: sin esto, el dia que las tarjetas
   se solapen con el cierre, el cierre pasa por debajo y no se ve. */
.sfx #rs-cta{position:relative;z-index:5}

/* Las tarjetas SOLO se desplazan, no se ocultan. Esta pagina se consulta: una
   cifra que depende de que un ScrollTrigger dispare es una cifra que se puede
   perder, y aqui las cifras son el contenido. El movimiento se nota igual. */
@media(max-width:860px){.sfx .rs-card{transform:translateY(34px)}}

@media(max-width:900px){
 .rs-facts{grid-template-columns:1fr}
 .rs-grid{grid-template-columns:1fr}
 .rs-how-grid{grid-template-columns:1fr;gap:26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}