/* ===========================================================================
   ResiDEV · página de presentación
   ---------------------------------------------------------------------------
   Tono oscuro con acento naranja, el mismo par que usa el propio sistema (barra
   lateral oscura, acciones en naranja). Sobre fondo oscuro las capturas de
   pantalla —que son claras— quedan recortadas y son lo primero que se mira,
   que es exactamente lo que debe pasar en una página de producto.

   Las variables de color salen de ResidevColorPalette.css; aquí sólo se añaden
   los tonos de superficie que esa paleta no cubre.
=========================================================================== */

:root{
    --rp-ink:        #0c0e12;
    --rp-ink-soft:   #14171e;
    --rp-ink-card:   #191d26;
    --rp-line:       rgba(255,255,255,.10);
    --rp-line-soft:  rgba(255,255,255,.06);
    --rp-fg:         #f2efea;
    --rp-fg-dim:     #a2a8b4;
    --rp-paper:      #f6f2ec;
    --rp-paper-ink:  #1b1d22;
    --rp-shadow:     0 30px 80px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    background: var(--rp-ink);
    color: var(--rp-fg);
    font-family: 'Inter', 'Expletus Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.rp-shell{
    width: min(1180px, 92vw);
    margin-inline: auto;
}

/* Etiqueta de sección: la misma en toda la página para que se lea como una
   sola pieza y no como secciones pegadas. */
.rp-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin: 0 0 1em;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--primary-100);
}
.rp-eyebrow::before{
    content: "";
    width: 1.6em;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.rp-title{
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.rp-lead{
    margin: 1.1em 0 0;
    max-width: 46ch;
    color: var(--rp-fg-dim);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.7;
}

/* Aparición al entrar en pantalla. Una sola clase para toda la página; el
   escalonado se resuelve con --rp-delay desde el HTML. */
.rp-reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--rp-delay, 0ms);
}
.rp-reveal.is-in{
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------------ botones */
.rp-btn{
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .95em 1.6em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.rp-btn--primary{
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: #1a1204;
    box-shadow: 0 14px 34px rgba(255,165,0,.28);
}
.rp-btn--primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(255,165,0,.38);
}
.rp-btn--ghost{
    border-color: var(--rp-line);
    color: var(--rp-fg);
    background: rgba(255,255,255,.03);
}
.rp-btn--ghost:hover{
    transform: translateY(-2px);
    border-color: rgba(255,165,0,.5);
    color: var(--primary-100);
}
.rp-btn .local-icon{ font-size: 1.1em; }

/* ----------------------------------------------------------------- cabecera */
.rp-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
    border-bottom: 1px solid transparent;
}
/* Sobre la portada la barra flota sin fondo; en cuanto empieza el contenido se
   vuelve cristal para no perder legibilidad sobre las secciones claras. */
.rp-nav.is-stuck{
    background: rgba(12,14,18,.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--rp-line-soft);
}
/* Retirada en celular mientras se baja. Se oculta con transform y no con
   display para que ir y venir sea una transición y no un salto. */
.rp-nav.is-hidden{
    transform: translateY(-110%);
    pointer-events: none;
}
.rp-nav{
    transition: background .35s ease, border-color .35s ease,
                transform .4s cubic-bezier(.22,.61,.36,1);
}
.rp-nav__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    padding: 1.1em 0;
}
.rp-nav__brand{
    display: flex;
    align-items: center;
    gap: .7em;
}
.rp-nav__brand img{ height: 2.1em; width: auto; }
.rp-nav__brand strong{
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.rp-nav__links{
    display: flex;
    align-items: center;
    gap: 1.9em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rp-nav__links button{
    background: none;
    border: 0;
    padding: 0;
    color: var(--rp-fg-dim);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease;
}
.rp-nav__links button:hover{ color: var(--primary-100); }
/* Enlace de salida al sitio de DAG: mismo peso que el resto de la navegación,
   pero marcado como lo que es — te lleva fuera de esta página. */
.rp-nav__out{
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--rp-fg-dim);
    font-size: .92rem;
    font-weight: 600;
    transition: color .25s ease;
}
.rp-nav__out::after{
    content: "↗";
    font-size: .85em;
    opacity: .7;
}
.rp-nav__out:hover{ color: var(--primary-100); }
.rp-nav__actions{ display: flex; align-items: center; gap: .8em; }
.rp-nav__burger{
    display: none;
    background: none;
    border: 1px solid var(--rp-line);
    border-radius: .8em;
    padding: .45em .55em;
    color: var(--rp-fg);
    font-size: 1.2rem;
    cursor: pointer;
}

/* ------------------------------------------------------------------ portada */
.rp-hero{
    position: relative;
    padding: clamp(8rem, 16vh, 11rem) 0 clamp(4rem, 8vh, 7rem);
    overflow: hidden;
}
/* Resplandor cálido detrás del titular: da profundidad sin añadir una imagen
   de fondo que habría que descargar. */
.rp-hero::before,
.rp-hero::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}
.rp-hero::before{
    width: 40rem; height: 40rem;
    top: -14rem; left: -12rem;
    background: rgba(255,165,0,.16);
}
.rp-hero::after{
    width: 32rem; height: 32rem;
    right: -10rem; top: 6rem;
    background: rgba(136,84,0,.20);
}
.rp-hero__grid{
    position: relative;
    display: grid;
    /* La captura pesa más que el texto en la primera impresión: se lleva la
       columna ancha. */
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}
.rp-hero h1{
    margin: 0;
    font-size: clamp(2.4rem, 5.4vw, 4.3rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
}
.rp-hero h1 em{
    font-style: normal;
    background: linear-gradient(120deg, var(--primary-100), #ffd08a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rp-hero__lead{
    margin: 1.5em 0 0;
    max-width: 52ch;
    color: var(--rp-fg-dim);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.75;
}
.rp-hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: .9em;
    margin-top: 2.4em;
}
.rp-hero__note{
    display: flex;
    align-items: center;
    gap: .6em;
    margin-top: 2em;
    color: #7f8794;
    font-size: .88rem;
}
.rp-hero__note .local-icon{ color: var(--primary-200); }

/* ======================================================================
   MAQUETAS DE DISPOSITIVO

   Los marcos son CSS, no imágenes: pesan cero, se adaptan a cualquier ancho y
   permiten cambiar la captura de dentro sin volver a exportar nada.
====================================================================== */
.rp-laptop{
    position: relative;
    width: 100%;
    filter: drop-shadow(0 34px 60px rgba(0,0,0,.55));
}
.rp-laptop__screen{
    position: relative;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .9em;
    background: #0b0d11;
    padding: .55em .55em 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
/* Barra del navegador: tres puntos y una pastilla con la dirección. Sin ella
   la captura parece flotar en el vacío; con ella se lee como una pantalla. */
.rp-laptop__bar{
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .1em .2em .55em;
}
.rp-laptop__dot{
    width: .52em;
    height: .52em;
    border-radius: 50%;
    background: #2f343d;
}
.rp-laptop__url{
    flex: 1;
    margin-left: .5em;
    padding: .28em .8em;
    border-radius: 999px;
    background: #171b22;
    color: #6f7684;
    font-size: .62rem;
    letter-spacing: .02em;
    text-align: center;
}
.rp-laptop__viewport{
    position: relative;
    aspect-ratio: 1512 / 800;
    border-radius: .35em .35em 0 0;
    overflow: hidden;
    background: #fff;
}
.rp-laptop__viewport img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Base del portátil. */
.rp-laptop__deck{
    height: .7em;
    margin: 0 -3%;
    border-radius: 0 0 .7em .7em;
    background: linear-gradient(180deg, #2a2f39, #11141a);
}

.rp-phone{
    position: relative;
    width: min(16.5rem, 62vw);
    margin-inline: auto;
    filter: drop-shadow(0 30px 55px rgba(0,0,0,.55));
}
.rp-phone__frame{
    position: relative;
    border: .5em solid #23272f;
    border-radius: 2.4em;
    background: #23272f;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.rp-phone__viewport{
    position: relative;
    aspect-ratio: 660 / 1434;
    border-radius: 2em;
    overflow: hidden;
    background: #fff;
}
.rp-phone__viewport img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Isla superior, apoyada sobre la captura. */
.rp-phone__notch{
    position: absolute;
    top: .55em;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 1.1em;
    border-radius: 999px;
    background: #14171d;
    z-index: 2;
}

/* ======================================================================
   INDICADORES QUE CUENTAN DESDE CERO
====================================================================== */
.rp-metrics{
    position: relative;
    padding: clamp(3rem, 7vh, 5rem) 0;
    border-block: 1px solid var(--rp-line-soft);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.rp-metrics__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2.5rem);
}
.rp-metric{
    text-align: center;
    padding: 1em .6em;
    border-right: 1px solid var(--rp-line-soft);
}
.rp-metric:last-child{ border-right: 0; }
.rp-metric__value{
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--primary-100), #ffcf8a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Anchura tabular: sin esto el número baila mientras cuenta y la fila
       entera se mueve con él. */
    font-variant-numeric: tabular-nums;
}
.rp-metric__label{
    display: block;
    margin-top: .9em;
    color: var(--rp-fg-dim);
    font-size: .88rem;
    line-height: 1.5;
}
.rp-metric__label strong{
    display: block;
    color: var(--rp-fg);
    font-weight: 700;
}

/* ======================================================================
   RECORRIDO CON DISPOSITIVO FIJO

   El dispositivo se queda quieto y los pasos pasan a su lado; al llegar cada
   paso, la captura cambia. Es la manera de enseñar tres pantallas sin obligar
   a nadie a hacer clic.
====================================================================== */
.rp-story{
    position: relative;
    padding: clamp(3.5rem, 9vh, 7rem) 0;
}
.rp-story--light{
    background: var(--rp-paper);
    color: var(--rp-paper-ink);
}
.rp-story--light .rp-lead,
.rp-story--light .rp-step p{ color: #5b6069; }
.rp-story--light .rp-step{ border-color: rgba(0,0,0,.09); }
.rp-story--light .rp-step.is-active{
    border-color: rgba(221,137,0,.55);
    background: rgba(255,255,255,.75);
}

.rp-story__head{
    max-width: 44rem;
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.rp-story__body{
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.rp-story--reverse .rp-story__body{
    grid-template-columns: 1.08fr .92fr;
}
.rp-story--reverse .rp-story__stage{ order: -1; }

.rp-story__stage{
    position: sticky;
    /* Centrado vertical aproximado: deja sitio a la barra fija de arriba. */
    top: clamp(5rem, 14vh, 9rem);
}

.rp-steps{
    display: grid;
    gap: clamp(1rem, 2vh, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.rp-step{
    padding: 1.5em 1.6em;
    border: 1px solid var(--rp-line);
    border-radius: 1.2em;
    background: rgba(255,255,255,.02);
    transition: border-color .45s ease, background .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
    /* Atenuado: está ahí, pero el que manda es el que corresponde a la captura
       que se está viendo. */
    opacity: .45;
}
.rp-step.is-active{
    opacity: 1;
    border-color: rgba(255,165,0,.5);
    background: rgba(255,165,0,.06);
    transform: translateY(-2px);
}

/* Con JavaScript las tarjetas no están puestas desde el principio: van
   apareciendo al llegar a ellas, que es lo que convierte la sección en un
   recorrido y no en una lista con una imagen al lado. Sin JavaScript no se
   ocultan nunca — de ahí que la regla cuelgue de :not(.no-js). */
html:not(.no-js) .rp-step:not(.is-revealed){
    opacity: 0;
    transform: translateY(26px);
}
.rp-step__index{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    margin-bottom: .9em;
    border-radius: .7em;
    background: rgba(255,165,0,.12);
    color: var(--primary-100);
    font-size: .8rem;
    font-weight: 800;
}
.rp-step.is-active .rp-step__index{
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: #1a1204;
}
.rp-step h3{
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.01em;
}
.rp-step p{
    margin: .7em 0 0;
    color: var(--rp-fg-dim);
    font-size: .97rem;
    line-height: 1.7;
}

/* Las capturas se apilan y sólo se ve la del paso activo. */
.rp-shots{
    position: relative;
    display: grid;
    /* Columna explícita y centrado: sin esto la columna se dimensiona por el
       contenido —que es una imagen de 1512 px con max-width— y el marco
       acababa encogido y pegado a la izquierda en vez de ocupar el ancho. */
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
.rp-shots > *{
    grid-area: 1 / 1;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.rp-shots > .is-showing{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ======================================================================
   MÓDULOS
====================================================================== */
.rp-modules{
    padding: clamp(3.5rem, 9vh, 7rem) 0;
}
.rp-modules__head{
    max-width: 44rem;
    margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.rp-modules__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}
.rp-module{
    position: relative;
    padding: 1.6em;
    border: 1px solid var(--rp-line);
    border-radius: 1.1em;
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    overflow: hidden;
    /* Contexto de apilamiento propio: de él depende que el destello (::before,
       en z-index -1) quede sobre el fondo de la card y bajo su contenido. */
    isolation: isolate;
    transition: transform .35s ease, border-color .35s ease, box-shadow .25s ease;
}

/* Destello que sigue al cursor, el mismo gesto que en los servicios del index
   de DAG: un foco dentro de la card centrado en el puntero, y la sombra
   exterior inclinándose hacia él. Las coordenadas llegan desde presentation.js
   en --spot-x/--spot-y y --glow-x/--glow-y; sin JavaScript los valores por
   defecto dejan el foco centrado, así que el efecto degrada en vez de
   desaparecer. */
.rp-module::before{
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        14em 14em at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255,165,0,.30),
        rgba(255,165,0,.10) 38%,
        transparent 68%
    );
    opacity: 0;
    transition: opacity .35s ease;
}
.rp-module:hover::before{ opacity: 1; }

.rp-module:hover{
    transform: translateY(-4px);
    border-color: rgba(255,165,0,.4);
    box-shadow:
        var(--glow-x, 0px) var(--glow-y, 18px) 40px rgba(255,165,0,.18),
        0 18px 40px rgba(0,0,0,.35);
}
.rp-module__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    margin-bottom: 1em;
    border-radius: .85em;
    background: rgba(255,165,0,.12);
    color: var(--primary-100);
    font-size: 1.15em;
}
.rp-module h3{
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}
.rp-module p{
    margin: .55em 0 0;
    color: var(--rp-fg-dim);
    font-size: .92rem;
    line-height: 1.65;
}

/* ======================================================================
   PERFILES
====================================================================== */
.rp-roles{
    padding: clamp(3.5rem, 9vh, 7rem) 0;
    background: var(--rp-paper);
    color: var(--rp-paper-ink);
}
.rp-roles .rp-lead{ color: #5b6069; }
.rp-roles__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.2rem;
    margin-top: clamp(2rem, 5vh, 3rem);
}
.rp-role{
    padding: 2em 1.8em;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1.3em;
    background: #fff;
    box-shadow: 0 12px 30px rgba(27,29,34,.06);
    transition: transform .35s ease, box-shadow .35s ease;
}
.rp-role:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(27,29,34,.12);
}
.rp-role__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    margin-bottom: 1.1em;
    border-radius: 1em;
    background: linear-gradient(135deg, rgba(255,165,0,.18), rgba(255,165,0,.06));
    color: var(--primary-300);
    font-size: 1.2em;
}
.rp-role h3{
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.rp-role ul{
    margin: 1.1em 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .7em;
}
.rp-role li{
    display: flex;
    gap: .6em;
    color: #5b6069;
    font-size: .94rem;
    line-height: 1.55;
}
.rp-role li::before{
    content: "";
    flex: 0 0 auto;
    width: .42em;
    height: .42em;
    margin-top: .55em;
    border-radius: 50%;
    background: var(--primary-200);
}

/* ======================================================================
   CIERRE Y PIE
====================================================================== */
.rp-cta{
    padding: clamp(4rem, 10vh, 7rem) 0;
}
.rp-cta__card{
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border: 1px solid rgba(255,165,0,.25);
    border-radius: 1.8em;
    background:
        radial-gradient(120% 140% at 10% 0%, rgba(255,165,0,.18), transparent 55%),
        linear-gradient(140deg, #1a1d25, #0d0f14);
    text-align: center;
}
.rp-cta__card h2{
    margin: 0;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.025em;
}
.rp-cta__card p{
    margin: 1.1em auto 0;
    max-width: 44ch;
    color: var(--rp-fg-dim);
    line-height: 1.75;
}
.rp-cta__actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9em;
    margin-top: 2.4em;
}

.rp-footer{
    padding: 2.5em 0 3.5em;
    border-top: 1px solid var(--rp-line-soft);
}
.rp-footer__inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2em;
    color: #757c88;
    font-size: .9rem;
}
.rp-footer a{ color: var(--rp-fg-dim); transition: color .25s ease; }
.rp-footer a:hover{ color: var(--primary-100); }
.rp-footer__links{ display: flex; gap: 1.6em; }

/* ======================================================================
   RESPONSIVE
====================================================================== */
@media (max-width: 1024px){
    .rp-hero__grid{
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .rp-hero__art{ order: 2; }
    .rp-metrics__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }
    .rp-metric:nth-child(2){ border-right: 0; }
    .rp-metric{ border-bottom: 1px solid var(--rp-line-soft); }
    .rp-metric:nth-last-child(-n+2){ border-bottom: 0; }

    /* En una sola columna el dispositivo va PRIMERO y se queda fijo, y los
       pasos pasan por debajo. Ese es el orden que hace legible el recorrido:
       se ve la pantalla y, mientras se baja, se va leyendo qué la explica y
       cómo cambia. Al revés —pasos arriba, dispositivo abajo— el cambio de
       captura ocurre fuera de la vista y el recorrido no se entiende. */
    .rp-story__body,
    .rp-story--reverse .rp-story__body{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .rp-story__stage,
    .rp-story--reverse .rp-story__stage{
        order: -1;
        position: sticky;
        top: 4.2rem;
        z-index: 3;
        padding: .8rem 0 1rem;
        /* Velo del color del fondo: los pasos pasan por debajo del marco y sin
           esto se verían asomando por los costados. */
        background: linear-gradient(180deg, var(--rp-ink) 78%, transparent);
    }
    /* Aire por debajo del último paso, para que también él llegue a la franja
       de foco y encienda su captura antes de que termine la sección. */
    .rp-steps{
        padding-bottom: 18vh;
    }
    .rp-story--light .rp-story__stage{
        background: linear-gradient(180deg, var(--rp-paper) 78%, transparent);
    }
    /* El escenario se sale del ancho del contenedor y ocupa la pantalla
       entera: en un teléfono cada punto de ancho cuenta para que la captura
       del portátil se pueda leer. */
    .rp-story__stage{
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        padding-inline: 2vw;
    }
    .rp-laptop{ width: 100%; }
    .rp-phone{ width: min(13rem, 52vw); }
    .rp-step{ padding: 1.2em 1.3em; }
}

@media (max-width: 760px){
    .rp-nav__links{
        position: absolute;
        top: 100%;
        right: 4vw;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1em;
        padding: 1.2em 1.4em;
        border: 1px solid var(--rp-line);
        border-radius: 1em;
        background: rgba(12,14,18,.96);
        backdrop-filter: blur(14px);
        box-shadow: var(--rp-shadow);
        display: none;
    }
    .rp-nav__links.is-open{ display: flex; }
    .rp-nav__burger{ display: inline-flex; }
    .rp-hero{ padding-top: 7rem; }
    .rp-hero__actions .rp-btn{ flex: 1 1 100%; justify-content: center; }
    .rp-metrics__grid{ gap: 1rem; }
    .rp-metric{ padding: .8em .3em; }
    .rp-footer__inner{ justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    /* Sin movimiento no hay nada que revelar: todo visible desde el principio.
       El recorrido con dispositivo fijo sigue funcionando —cambia la captura,
       que es información, no adorno— pero sin transición. */
    .rp-reveal{
        opacity: 1;
        transform: none;
        transition: none;
    }
    .rp-shots > *{ transition: none; }
    .rp-step{ transition: none; }
    html:not(.no-js) .rp-step:not(.is-revealed){
        opacity: .45;
        transform: none;
    }
    .rp-btn:hover,
    .rp-module:hover,
    .rp-role:hover{ transform: none; }
}