/* /para-residentes — "Edificio vivo". Se carga solo en esa página, encima de
   site.css (tokens, navbar, botones, teléfono). Prefijo rv- para no chocar con
   las clases del home.
   Hero: de noche el edificio se enciende; con el scroll sale un sol cálido
   (naranja) detrás del isotipo. El texto del hero nunca se oculta. */

:root {
  --rv-night-950: #0C0620;
  --rv-night-900: #140B2E;
  --rv-night-800: #1F1146;
  --rv-night-700: #2E1065;
  --rv-lamp: #FEF3C7;          /* luz cálida de las ventanas (amber-100) */
  --rv-sun: #FB923C;           /* orange-400 */
  --rv-sun-deep: #EA580C;      /* orange-600 */
  --rv-peach: #FFF1E6;
}

@layer components {
  /* ── Hero: escena nocturna ─────────────────────────────────────── */
  .rv-hero { position: relative; z-index: 0; isolation: isolate; color: var(--color-cream-50);
    --mark-h: clamp(150px, 23vh, 230px);
    --mark-w: calc(var(--mark-h) * .7349);
    --chip-w: min(232px, calc(100vw - var(--mark-w) - 2rem - 14px));
  }
  .rv-stage { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
  /* Con movimiento, la escena queda fija (sticky) mientras amanece: el hero suma 70svh de recorrido. */
  .rv-runway { display: none; }
  .rv-live .rv-runway { display: block; height: 70svh; }
  .rv-live .rv-stage { position: sticky; top: var(--stage-top, 0px); }

  .rv-sky { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: var(--rv-night-900); }
  .rv-sky-layer { position: absolute; inset: 0; }
  .rv-sky-night { background:
    radial-gradient(80% 60% at var(--sun-x, 72%) 105%, rgb(109 40 217 / .5), rgb(109 40 217 / 0) 70%),
    linear-gradient(180deg, #0C0620 0%, #140B2E 40%, #1F1146 74%, #2E1065 100%); }
  /* Amanecer cálido: el arriba sigue violeta (el titular blanco se lee siempre) y el
     naranja nace en el horizonte, alrededor del sol. Una sombra suave queda detrás del texto. */
  .rv-sky-dawn { opacity: 0; will-change: opacity; background:
    radial-gradient(55% 70% at 16% 46%, rgb(20 8 46 / .5), rgb(20 8 46 / 0) 70%),
    radial-gradient(62% 58% at var(--sun-x, 72%) 100%, rgb(255 237 213 / .95) 0%, rgb(253 186 116 / .85) 16%, rgb(249 115 22 / .55) 34%, rgb(234 88 12 / 0) 62%),
    linear-gradient(180deg, #24104F 0%, #3B1585 30%, #62268C 52%, #A63C72 72%, #E2703A 88%, #F6A256 100%); }
  .rv-stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; }
  .rv-sun { position: absolute; left: var(--sun-x, 72%); bottom: -24vmin; width: 58vmin; height: 58vmin; margin-left: -29vmin; border-radius: 50%; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(closest-side, rgb(255 244 220 / .9) 0%, rgb(255 214 153 / .75) 26%, rgb(253 186 116 / .5) 46%, rgb(249 115 22 / .22) 66%, rgb(249 115 22 / 0) 100%); }
  .rv-sun::before { content: ""; position: absolute; inset: 30%; border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #FFF3DA 0%, #FFC76E 38%, #FB923C 74%, #F97316 100%);
    box-shadow: 0 0 50px 16px rgb(253 186 116 / .6), 0 0 140px 50px rgb(249 115 22 / .32); }

  /* Ciudad: skyline generado en JS con las formas del logo. */
  .rv-city { position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: var(--street-real, 58px); z-index: -1; pointer-events: none; }
  .rv-ck { position: absolute; inset: 0; will-change: opacity; }
  .rv-ck-dawn { opacity: 0; }
  .rv-city svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .rv-torch { position: absolute; left: 0; top: 0; z-index: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, rgb(250 248 245 / .11), rgb(196 181 253 / .07) 45%, rgb(196 181 253 / 0)); }

  .rv-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 1.25rem); }
  .rv-copy { max-width: 40rem; }
  .rv-pill { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .7rem; border-radius: .8rem; font-size: .86rem; font-weight: 560; line-height: 1.35; color: #EDE9FE; background: rgb(196 181 253 / .1); box-shadow: inset 0 0 0 1px rgb(196 181 253 / .3); transition: background-color .2s, box-shadow .2s; }
  .rv-pill:hover { background: rgb(196 181 253 / .18); box-shadow: inset 0 0 0 1px rgb(196 181 253 / .6); }
  .rv-win { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 2.6px; background: var(--rv-lamp); box-shadow: 0 0 10px 1px rgb(254 243 199 / .75); }
  .rv-eyebrow { margin-top: 1.5rem; font-size: .95rem; font-weight: 560; color: #C4B5FD; }
  .rv-hero h1 { margin-top: .75rem; font-size: clamp(2.25rem, min(6.4vw, 7.4vh), 3.6rem); line-height: .99; letter-spacing: -.042em; font-weight: 740; text-wrap: balance; }
  .rv-hero h1 .l1 { display: block; color: #DDD6FE; }
  .rv-hero h1 .l2 { display: block; color: var(--color-cream-50); text-shadow: 0 0 30px rgb(250 248 245 / .3); }
  .rv-lead { margin-top: 1.25rem; max-width: 35em; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.55; color: rgb(253 252 250 / .82); }
  .rv-lead .short { display: none; }
  .rv-ctas { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .rv-trust { margin-top: 1.1rem; font-size: .88rem; line-height: 1.5; color: rgb(253 252 250 / .72); }
  .rv-trust .dot { display: inline-block; width: .32rem; height: .32rem; margin: 0 .55rem; border-radius: 22%; background: currentColor; opacity: .55; vertical-align: .15rem; }
  /* El CTA sobre la noche es la ventana más encendida de la escena. */
  .btn-lamp { background: var(--color-cream-50); color: var(--color-ink-900); box-shadow: 0 0 0 1px rgb(255 255 255 / .55), 0 12px 36px -10px rgb(250 248 245 / .6), 0 0 70px -14px rgb(196 181 253 / .75); }
  .btn-lamp:hover { background: #fff; transform: translateY(-1px); }
  .btn-night { color: var(--color-cream-50); box-shadow: inset 0 0 0 1.5px rgb(253 252 250 / .38); }
  .btn-night:hover { box-shadow: inset 0 0 0 1.5px rgb(253 252 250 / .8); }
  @media (max-width: 639px) {
    .rv-lead .long { display: none; }
    .rv-lead .short { display: inline; }
    .rv-ctas .btn { flex: 1 1 100%; }
  }

  /* Isotipo vivo + notificaciones */
  .rv-scene { position: relative; margin-top: auto; padding-top: 1.6rem; align-self: flex-start; }
  .rv-mark-wrap { position: relative; width: var(--mark-w); height: var(--mark-h); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rv-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .rv-mark-night, .rv-mark-day { will-change: opacity; }
  .rv-mark-day { opacity: 0; }
  .rv-chips { position: absolute; inset: 0; pointer-events: none; }
  .rv-chip { position: absolute; left: calc(100% + 14px); top: calc(34% - 28px); width: var(--chip-w); display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem .55rem .55rem; background: var(--color-cream-50); color: var(--color-ink-900); border-radius: .9rem; will-change: transform, opacity;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .75), 0 16px 36px -16px rgb(0 0 0 / .6), 0 0 44px -12px rgb(250 248 245 / .5); }
  .rv-chip:not([data-slot="1"]) { opacity: 0; visibility: hidden; }
  .rv-chip-ico { flex: none; width: 2rem; height: 2rem; border-radius: 22%; display: grid; place-items: center; }
  .rv-chip-ico svg { width: 1.05rem; height: 1.05rem; }
  .rv-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .rv-chip-txt strong { font-size: .84rem; font-weight: 650; letter-spacing: -.005em; }
  .rv-chip-txt span { margin-top: 2px; font-size: .78rem; color: var(--color-ink-500); }
  .rv-tone-violet { background: #EDE9FE; color: var(--color-brand); }
  .rv-tone-sun { background: #FFEDD5; color: #C2410C; }
  .rv-tone-ink { background: var(--color-ink-900); color: #fff; }
  .rv-tone-cream { background: var(--color-cream-300); color: var(--color-ink-900); }

  /* Calle: base de la ciudad, con los enlaces para quien no tiene Propi o busca administrador. */
  .rv-street { position: relative; z-index: 2; }
  .rv-street-bg { position: absolute; inset: 0; background: #0F0726; box-shadow: inset 0 1px 0 rgb(196 181 253 / .16); }
  .rv-street-dawn { position: absolute; inset: 0; opacity: 0; background: #3A1259; box-shadow: inset 0 1px 0 rgb(253 186 116 / .35); will-change: opacity; }
  .rv-street-inner { position: relative; display: flex; flex-direction: column; gap: .35rem; padding-block: .85rem 1rem; font-size: .88rem; line-height: 1.4; color: rgb(253 252 250 / .76); }
  .rv-street a { display: inline-flex; flex-wrap: wrap; gap: 0 .35em; align-items: baseline; padding: .25rem 0; }
  .rv-street .u { color: #DDD6FE; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(221 214 254 / .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  .rv-street a:hover .u { color: var(--color-cream-50); text-decoration-color: currentColor; }

  @media (min-width: 640px) {
    .rv-street-inner { flex-direction: row; flex-wrap: wrap; gap: .35rem 2rem; }
    .rv-hero { --mark-h: clamp(150px, 26vh, 300px); }
  }
  @media (min-width: 1024px) {
    .rv-hero { --mark-h: clamp(280px, min(54vh, 30vw), 520px); --chip-w: 224px; }
    .rv-hero h1 { font-size: clamp(2.25rem, min(4.9vw, 8vh), 4.4rem); }
    .rv-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.5rem; padding-top: var(--nav-h); }
    .rv-copy { align-self: center; padding-block: 2.25rem 3.25rem; }
    .rv-scene { grid-column: 2; align-self: end; margin: 0; padding: 0 calc(var(--chip-w) + 30px) 0 0; }
    .rv-chip { left: calc(100% + 28px); }
    .rv-chip[data-slot] { opacity: 1; visibility: visible; }
    .rv-chip[data-slot="1"] { top: calc(26.55% - 27px); }
    .rv-chip[data-slot="2"] { top: calc(46.13% - 27px); }
    .rv-chip[data-slot="3"] { top: calc(68.3% - 27px); }
    /* El anexo deja su aviso arriba de la pila, en el cielo libre sobre la torre. */
    .rv-chip[data-slot="4"] { top: auto; bottom: calc(73.45% + 39px); }
    .rv-chip[data-slot="1"]::before, .rv-chip[data-slot="2"]::before, .rv-chip[data-slot="3"]::before { content: ""; position: absolute; right: 100%; top: 27px; width: calc(28px + var(--mark-w) * .119); height: 1px; background: linear-gradient(90deg, rgb(250 248 245 / .8), rgb(250 248 245 / .12)); }
    .rv-street-inner { min-height: 58px; align-items: center; padding-block: .6rem; }
  }
  @media (min-width: 1280px) { .rv-hero { --chip-w: 252px; } .rv-main { column-gap: 3rem; } }

  /* Antes de que GSAP arme la escena (solo con movimiento; sin JS se quita a los 3 s). */
  .js-motion .rv-hero:not(.rv-ready) .rv-tower, .js-motion .rv-hero:not(.rv-ready) .rv-tower-glow { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
  .js-motion .rv-hero:not(.rv-ready) .rv-annex-block { opacity: 0; }
  .js-motion .rv-hero:not(.rv-ready) .rv-lit, .js-motion .rv-hero:not(.rv-ready) .rv-halo { opacity: 0; }
  .js-motion .rv-hero:not(.rv-ready) .rv-chip { opacity: 0 !important; visibility: hidden !important; }

  /* ── Secciones de día (estáticas por ahora) ────────────────────── */
  .rv-day { position: relative; z-index: 1; background: var(--color-cream-50); overflow-x: clip; }
  .rv-feature { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 1024px) {
    .rv-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
    .rv-feature--flip .rv-visual { order: -1; }
  }
  .rv-feature .t-h2 { margin-top: .9rem; }
  .rv-feature .t-lead { margin-top: 1rem; max-width: 34rem; }
  .rv-feature .points { margin-top: 1.5rem; }
  .rv-visual { position: relative; border-radius: var(--radius-panel); padding: clamp(1.75rem, 1rem + 3vw, 3rem) 1.5rem; display: grid; place-items: center; overflow: hidden; }
  .rv-visual::before, .rv-visual::after { content: ""; position: absolute; border-radius: var(--radius-atom); }
  .rv-visual::before { width: 7rem; height: 7rem; left: -2rem; bottom: 2.5rem; }
  .rv-visual::after { width: 4rem; height: 4rem; right: 1.5rem; top: 1.5rem; }
  .rv-visual--violet { background: var(--color-brand); }
  .rv-visual--violet::before { background: rgb(255 255 255 / .1); }
  .rv-visual--violet::after { background: rgb(255 255 255 / .14); }
  .rv-visual--sun { background: linear-gradient(160deg, #FFF1E6 0%, #FFE2C7 55%, #FFD3A8 100%); }
  .rv-visual--sun::before { background: rgb(251 146 60 / .18); }
  .rv-visual--sun::after { background: rgb(249 115 22 / .22); }
  .rv-visual--lilac { background: var(--color-violet-100); }
  .rv-visual--lilac::before { background: rgb(109 40 217 / .1); }
  .rv-visual--lilac::after { background: rgb(109 40 217 / .16); }
  .rv-visual .phone { position: relative; z-index: 1; max-width: 18.5rem; }

  /* Pasos para unirse */
  .rv-steps { margin-top: 1.75rem; display: grid; gap: .65rem; }
  .rv-step { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 3px 0 var(--color-cream-300); }
  .rv-step-n { flex: none; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-atom); display: grid; place-items: center; background: var(--color-brand); color: #fff; font-weight: 720; font-size: .95rem; box-shadow: 0 3px 0 var(--color-brand-deep); }
  .rv-step h3 { font-weight: 680; font-size: 1.06rem; letter-spacing: -.015em; color: var(--color-ink-900); }
  .rv-step p { margin-top: .2rem; font-size: .94rem; line-height: 1.45; color: var(--color-ink-600); }
  .rv-join-foot { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
  .rv-join-foot .note { font-size: .93rem; color: var(--color-ink-500); }

  /* Piezas de los teléfonos (datos de ejemplo) */
  .rv-app-head { padding: 1.35rem 1.2rem 1rem; background: var(--color-brand); color: #fff; }
  .rv-app-head p:first-child { font-size: .74rem; opacity: .75; }
  .rv-app-head p:last-child { font-size: 1.15rem; font-weight: 660; letter-spacing: -.015em; }
  .rv-app-body { padding: 1rem; display: grid; gap: .7rem; font-size: .82rem; color: var(--color-ink-800); }
  .rv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .rv-seg span { border-radius: .6rem; padding: .5rem .4rem; text-align: center; font-size: .76rem; box-shadow: inset 0 0 0 1px var(--color-ink-200); color: var(--color-ink-600); }
  .rv-seg span.on { box-shadow: inset 0 0 0 1.5px var(--color-brand); background: var(--color-violet-50); color: var(--color-violet-800); font-weight: 620; }
  .rv-field small { display: block; font-size: .68rem; color: var(--color-ink-500); margin-bottom: .2rem; }
  .rv-field b { display: block; font-weight: 500; border-radius: .6rem; padding: .45rem .7rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-ink-200); }
  .rv-app-btn { display: block; border-radius: .7rem; padding: .65rem; text-align: center; background: var(--color-brand); color: #fff; font-weight: 640; box-shadow: 0 3px 0 var(--color-brand-deep); }
  .rv-app-note { text-align: center; font-size: .7rem; color: var(--color-ink-500); }
  .rv-cal { border-radius: .8rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); padding: .7rem; }
  .rv-cal p { text-align: center; font-weight: 640; font-size: .76rem; margin-bottom: .5rem; }
  .rv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: .7rem; }
  .rv-cal-grid span { border-radius: 22%; padding: .3rem 0; background: #FFF1E6; color: #9A3412; }
  .rv-cal-grid span.off { background: transparent; color: var(--color-ink-300); }
  .rv-cal-grid span.on { background: var(--color-brand); color: #fff; font-weight: 650; }
  .rv-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .rv-slots span { border-radius: .6rem; padding: .5rem .3rem; text-align: center; font-size: .72rem; box-shadow: inset 0 0 0 1px var(--color-ink-200); color: var(--color-ink-600); }
  .rv-slots span.on { background: var(--color-brand); color: #fff; box-shadow: none; }
  .rv-check { display: flex; align-items: center; gap: .45rem; font-size: .74rem; color: var(--color-ink-600); }
  .rv-check i { width: 1rem; height: 1rem; border-radius: 22%; background: var(--color-brand); display: grid; place-items: center; color: #fff; }
  .rv-check i svg { width: .7rem; height: .7rem; }
  .rv-meta { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: var(--color-ink-500); }
  .rv-tag { display: inline-flex; align-items: center; border-radius: .45rem; padding: .12rem .5rem; font-size: .7rem; font-weight: 650; }
  .rv-tag--sun { background: #FFEDD5; color: #9A3412; }
  .rv-tag--live { background: var(--color-violet-100); color: var(--color-violet-800); }
  .rv-msg { border-radius: .8rem; padding: .65rem .75rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); }
  .rv-msg small { display: block; font-size: .68rem; color: var(--color-ink-500); margin-bottom: .2rem; }
  .rv-msg--admin { background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-200); }
  .rv-msg--admin small { color: var(--color-brand); }
  .rv-track { display: grid; gap: .45rem; padding-top: .15rem; }
  .rv-track div { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--color-ink-800); }
  .rv-track div.todo { color: var(--color-ink-300); }
  .rv-track i { width: 1rem; height: 1rem; border-radius: 22%; display: grid; place-items: center; background: var(--color-brand); color: #fff; }
  .rv-track div.todo i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-ink-200); }
  .rv-track i svg { width: .7rem; height: .7rem; }

  /* Todo lo demás: tarjetas con el teléfono asomado arriba y el texto abajo */
  .rv-details { display: grid; gap: .85rem; }
  @media (min-width: 900px) { .rv-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rv-detail { display: flex; flex-direction: column; border-radius: var(--radius-panel); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 4px 0 var(--color-cream-300); scroll-margin-top: calc(var(--nav-h) + 1rem); }
  .rv-detail-vis { position: relative; height: 17.5rem; display: flex; justify-content: center; padding-top: 1.75rem; overflow: hidden; }
  .rv-detail-vis .phone { flex: none; align-self: flex-start; max-width: 16.5rem; }
  .rv-detail-vis--cream { background: var(--color-cream-200); }
  .rv-detail-vis--sun { background: linear-gradient(160deg, #FFF1E6, #FFDDBA); }
  .rv-detail-vis--lilac { background: var(--color-violet-100); }
  .rv-detail-vis--violet { background: var(--color-brand); }
  .rv-detail-txt { padding: 1.5rem 1.6rem 1.75rem; }
  .rv-detail-label { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; color: var(--color-ink-700); }
  .rv-detail-label .ib { width: 1.9rem; height: 1.9rem; border-radius: var(--radius-atom); display: grid; place-items: center; background: var(--color-violet-100); color: var(--color-brand); }
  .rv-detail-label .ib .ico { width: 1rem; height: 1rem; }
  .rv-detail h3 { margin-top: .75rem; font-weight: 720; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.12; letter-spacing: -.025em; color: var(--color-ink-900); text-wrap: balance; }
  .rv-detail-txt > p { margin-top: .55rem; color: var(--color-ink-600); }
  .rv-detail .points { margin-top: 1rem; }

  /* Comunicados y emergencias */
  .rv-extras { margin-top: .85rem; display: grid; gap: .85rem; }
  @media (min-width: 640px) { .rv-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rv-extras li { display: flex; align-items: flex-start; gap: .9rem; border-radius: var(--radius-tile); padding: 1.15rem 1.25rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); }
  .rv-extras .ib { flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-atom); display: grid; place-items: center; background: var(--color-cream-200); color: var(--color-brand); }
  .rv-extras h3 { font-weight: 680; font-size: 1.05rem; letter-spacing: -.015em; color: var(--color-ink-900); }
  .rv-extras p { margin-top: .2rem; font-size: .92rem; line-height: 1.45; color: var(--color-ink-600); }

  /* Piezas extra de las pantallas */
  .rv-field b.muted { color: var(--color-ink-300); }
  .rv-msg b { display: block; font-weight: 650; }
  .rv-done { display: flex; align-items: center; gap: .6rem; border-radius: .8rem; padding: .6rem .7rem; background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-200); }
  .rv-done i { flex: none; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-atom); display: grid; place-items: center; background: var(--color-brand); color: #fff; }
  .rv-done i svg { width: .9rem; height: .9rem; }
  .rv-done b { display: block; font-size: .78rem; font-weight: 650; color: var(--color-violet-800); }
  .rv-done small { display: block; font-size: .7rem; color: var(--color-ink-600); }
  .rv-notice { display: flex; align-items: center; gap: .6rem; border-radius: .8rem; padding: .6rem .65rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300), 0 8px 18px -12px rgb(26 26 26 / .3); }
  .rv-notice b { display: block; font-size: .78rem; font-weight: 650; }
  .rv-notice small { display: block; font-size: .7rem; color: var(--color-ink-500); }
  .rv-app-sub { padding-top: .25rem; font-size: .68rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-500); }
  .rv-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .6rem; padding: .55rem .7rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); font-size: .76rem; }
  .rv-line small { display: block; font-size: .66rem; color: var(--color-brand); }
  .rv-tag--muted { background: var(--color-cream-200); color: var(--color-ink-500); }
  .rv-vote { display: flex; align-items: center; justify-content: space-between; border-radius: .8rem; padding: .7rem .9rem; font-size: .82rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-ink-200); color: var(--color-ink-700); }
  .rv-vote.on { background: var(--color-brand); color: #fff; font-weight: 650; box-shadow: 0 3px 0 var(--color-brand-deep); }
  .rv-vote svg { width: 1rem; height: 1rem; }
  .rv-proxy { border-radius: .6rem; padding: .5rem .6rem; text-align: center; font-size: .7rem; background: var(--color-cream-200); color: var(--color-ink-600); }
  .rv-balance { display: grid; justify-items: center; gap: .2rem; border-radius: .8rem; padding: .8rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); }
  .rv-balance small { font-size: .68rem; color: var(--color-ink-500); }
  .rv-balance b { font-size: 1.7rem; font-weight: 760; letter-spacing: -.04em; line-height: 1; }
  .rv-more-note { margin-top: 1.25rem; font-size: .95rem; color: var(--color-ink-600); display: flex; align-items: center; gap: .55rem; }
  .rv-more-note::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: var(--radius-atom); background: var(--rv-sun); }

  /* ── Piezas que usa el movimiento (sin JS no se ven o quedan en su estado final) ── */
  .rv-visual .phone-screen, .rv-visual .rv-app-body { position: relative; }
  /* Aviso que aparece dentro del teléfono (solicitud enviada / reserva confirmada). */
  .rv-toast { position: absolute; left: .75rem; right: .75rem; bottom: .85rem; z-index: 2; display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: .9rem; background: var(--color-ink-900); color: #fff; box-shadow: 0 16px 30px -14px rgb(0 0 0 / .55); opacity: 0; visibility: hidden; }
  .rv-toast i { flex: none; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-atom); display: grid; place-items: center; background: var(--rv-sun); color: #fff; }
  .rv-toast i svg { width: .9rem; height: .9rem; }
  .rv-toast b { display: block; font-size: .8rem; font-weight: 650; }
  .rv-toast small { display: block; font-size: .7rem; color: var(--color-ink-200); }
  /* "Escribiendo…" en la conversación de la PQR. */
  .rv-typing { display: inline-flex; align-items: center; gap: 4px; padding: .6rem .75rem; border-radius: .8rem; background: #fff; box-shadow: inset 0 0 0 1px var(--color-cream-300); justify-self: start; }
  .rv-typing--admin { background: var(--color-violet-50); box-shadow: inset 0 0 0 1px var(--color-violet-200); }
  .rv-typing i { width: 6px; height: 6px; border-radius: 22%; background: var(--color-ink-300); animation: rv-dot 1s ease-in-out infinite; }
  .rv-typing i:nth-child(2) { animation-delay: .15s; }
  .rv-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes rv-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
  /* Paso "encendido": la ficha se prende como una ventana al amanecer. */
  .rv-step { transition: box-shadow .4s ease, transform .4s var(--ease-spring); }
  .rv-step-n { transition: background-color .4s ease, box-shadow .4s ease; }
  .rv-step.is-on { box-shadow: inset 0 0 0 1.5px #FDBA74, 0 3px 0 #FDBA74; transform: translateX(4px); }
  .rv-step.is-on .rv-step-n { background: var(--rv-sun); box-shadow: 0 3px 0 #C2410C, 0 0 22px rgb(251 146 60 / .55); }
  /* El CTA del cierre brilla como una ventana encendida mientras está a la vista. */
  .rv-final .btn.is-glowing { animation: rv-glow 2.4s ease-in-out infinite; }
  @keyframes rv-glow { 0%, 100% { box-shadow: 0 4px 0 var(--color-brand-night), 0 0 0 0 rgb(254 243 199 / 0); } 50% { box-shadow: 0 4px 0 var(--color-brand-night), 0 0 34px 6px rgb(254 243 199 / .55); } }

  /* Cierre */
  .rv-final { display: grid; gap: .85rem; }
  @media (min-width: 768px) { .rv-final { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rv-final > div { border-radius: var(--radius-shell); padding: clamp(1.75rem, 1rem + 3vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
  .rv-final h2 { font-weight: 740; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.06; letter-spacing: -.03em; }
  .rv-final-has { background: var(--color-brand); color: #fff; }
  .rv-final-has p { color: rgb(255 255 255 / .82); }
  .rv-final-not { background: var(--color-cream-200); }
  .rv-final-not p { color: var(--color-ink-600); }
  .rv-final .cta-row { margin-top: auto; padding-top: .5rem; }
}