/*
 * Web pública de resi.do (application/views/resi_web). 2026-10-03.
 * Colores del logo: azul #0061a9, celeste #009cdf y dorado #ecc31d, sobre un
 * azul noche. El dorado es para la acción; el celeste, para lo informativo.
 * Primero el celular.
 */
:root {
    --noche: #06162c; --noche-2: #0a2242; --noche-3: #12325d;
    --azul: #0061a9; --cielo: #009cdf; --oro: #ecc31d; --oro-2: #f6d94e;
    --verde: #16a34a; --rojo: #e5484d;
    --texto: #0f172a; --suave: #5b6478; --borde: #e3e8f1; --fondo: #f4f7fb; --blanco: #fff;
    --radio: 18px; --sombra: 0 22px 50px -26px rgba(6, 22, 44, .45);
    --t: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --c: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font: 400 16px/1.65 var(--c); color: var(--texto); background: var(--blanco); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--t); line-height: 1.15; letter-spacing: -.025em; margin: 0; color: inherit; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.r-in { width: min(1180px, 100% - 32px); margin-inline: auto; }
.r-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r-sr:focus { position: fixed !important; width: auto; height: auto; clip: auto; top: 10px; left: 10px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }

/* ── botones ── */
.r-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 15.5px/1.1 var(--t); border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; text-align: center; }
.r-btn:hover { transform: translateY(-2px); }
.r-btn svg { width: 19px; height: 19px; flex: none; }
.r-btn--oro { background: linear-gradient(135deg, var(--oro), var(--oro-2)); color: var(--noche); box-shadow: 0 14px 30px -14px rgba(236, 195, 29, .85); }
.r-btn--borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.r-btn--borde:hover { box-shadow: inset 0 0 0 2px #fff; }
.r-btn--oscuro { background: var(--noche); color: #fff; }
.r-btn--wa { background: #e9f8ef; color: #0d6b34; }
.r-btn--wa:hover { background: #d9f3e3; }
.r-btn--chico { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ── cabecera ── */
.r-cab { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s; }
.r-cab__in { display: flex; align-items: center; gap: 18px; height: 74px; }
.r-cab.r-solida { background: rgba(6, 22, 44, .93); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.r-logo { display: flex; align-items: center; flex: none; }
.r-logo img { height: 40px; width: auto; }
.r-cab .r-logo img, .r-pie .r-logo img { filter: brightness(0) invert(1); }
.r-cab .r-logo img { filter: none; background: rgba(255,255,255,.96); padding: 5px 10px; border-radius: 12px; height: 44px; }
.r-nav { display: none; margin-left: auto; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.r-nav a { color: rgba(255,255,255,.82); font: 600 14px/1 var(--t); padding: 10px 14px; border-radius: 999px; }
.r-nav a:hover, .r-nav a.r-si { background: rgba(255,255,255,.1); color: #fff; }
.r-cab__acc { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.r-cab__acc .r-btn--chico { display: none; }
.r-cab__entrar { display: none; color: #fff; font: 600 14.5px/1 var(--t); padding: 10px 12px; }
.r-menu-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.r-menu-btn svg { width: 22px; height: 22px; }
.r-cajon { position: fixed; inset: 74px 0 auto; z-index: 49; background: var(--noche); padding: 10px 16px 22px; display: none; box-shadow: 0 30px 40px -20px rgba(0,0,0,.6); }
.r-cajon.r-abierto { display: block; }
.r-cajon a { display: block; color: #fff; font: 600 17px/1 var(--t); padding: 16px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.r-cajon .r-btn { display: flex; width: 100%; margin-top: 16px; border: 0; color: var(--noche); }
@media (min-width: 560px) { .r-cab__acc .r-btn--chico { display: inline-flex; } }
@media (min-width: 1024px) {
    .r-nav { display: flex; }
    .r-cab__acc { margin-left: 18px; }
    .r-cab__entrar { display: inline-block; }
    .r-menu-btn, .r-cajon { display: none !important; }
}

/* ── portada ── */
.r-hero { position: relative; overflow: hidden; color: #fff; padding: 118px 0 64px; background:
    radial-gradient(800px 480px at 88% 18%, rgba(0, 156, 223, .32), transparent 62%),
    radial-gradient(640px 420px at 6% 96%, rgba(236, 195, 29, .16), transparent 60%),
    linear-gradient(180deg, var(--noche), var(--noche-2)); }
.r-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); }
.r-hero__in { position: relative; z-index: 2; display: grid; gap: 48px; align-items: center; }
.r-pildora { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font: 600 13px/1.25 var(--t); color: rgba(255,255,255,.9); }
.r-pildora b { background: var(--oro); color: var(--noche); padding: 4px 9px; border-radius: 999px; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
.r-hero h1 { font-size: clamp(36px, 7vw, 64px); text-wrap: balance; font-weight: 800; margin: 20px 0 18px; }
.r-hero h1 em, .r-cabpag h1 em { font-style: normal; color: var(--oro); }
.r-hero__sub { font-size: clamp(16.5px, 2.2vw, 19px); color: rgba(255,255,255,.78); max-width: 580px; }
.r-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.r-hero__btns.r-centro { justify-content: center; }
.r-hero__conf { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; color: rgba(255,255,255,.75); font-size: 14.5px; }
.r-hero__conf span { display: inline-flex; align-items: center; gap: 7px; }
.r-hero__conf svg { width: 18px; height: 18px; color: var(--oro); }
@media (max-width: 480px) { .r-hero__btns .r-btn { width: 100%; } }

/* teléfono de la portada */
.r-hero__vis { position: relative; display: flex; justify-content: center; padding: 10px 0 20px; }
.r-tel { position: relative; width: min(300px, 82vw); border-radius: 40px; padding: 14px 14px 12px; background: #f6f8fc; color: var(--texto);
    box-shadow: 0 0 0 9px #0f203d, 0 0 0 10px rgba(255,255,255,.18), 0 40px 80px -30px rgba(0,0,0,.8); }
.r-tel__barra { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 var(--t); padding: 4px 10px 10px; }
.r-tel__barra i { width: 70px; height: 20px; border-radius: 999px; background: #0f203d; }
.r-tel__cab { padding: 6px 8px 12px; }
.r-tel__cab small { display: block; color: var(--suave); font-size: 12.5px; }
.r-tel__cab b { font: 800 17px/1.2 var(--t); }
.r-tel__saldo { position: relative; border-radius: 20px; padding: 16px; color: #fff; background: linear-gradient(135deg, var(--azul), var(--cielo)); margin-bottom: 10px; overflow: hidden; }
.r-tel__saldo::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); }
.r-tel__saldo small { display: block; font-size: 12px; opacity: .85; }
.r-tel__saldo b { display: block; font: 800 27px/1.2 var(--t); margin: 2px 0 8px; }
.r-tel__ok { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 10px 4px 7px; font: 700 12px/1 var(--t); }
.r-tel__ok svg { width: 14px; height: 14px; }
.r-tel__fila { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px; margin-top: 8px; box-shadow: 0 1px 0 var(--borde); }
.r-tel__fila b { display: block; font: 700 13.5px/1.25 var(--t); }
.r-tel__fila small { display: block; font-size: 11.5px; color: var(--suave); }
.r-tel__menu { display: flex; justify-content: space-around; margin-top: 12px; padding: 10px 4px 2px; border-top: 1px solid var(--borde); color: #a3abbb; }
.r-tel__menu svg { width: 21px; height: 21px; }
.r-tel__menu .r-si { color: var(--azul); }

.r-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #e8f1fb; color: var(--azul); }
.r-ic svg { width: 20px; height: 20px; }
.r-ic--cielo { background: #e3f5fd; color: #0284c7; }
.r-ic--oro { background: #fdf6d8; color: #a27f00; }
.r-ic--verde { background: #e3f7ea; color: var(--verde); }
.r-ic--rojo { background: #fde8e8; color: var(--rojo); }
.r-ic--azul { background: #e8f1fb; color: var(--azul); }
.r-ic--grande { width: 64px; height: 64px; border-radius: 20px; }
.r-ic--grande svg { width: 32px; height: 32px; }

.r-flota { position: absolute; display: none; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; color: var(--texto); box-shadow: var(--sombra); font: 700 13.5px/1.25 var(--t); animation: r-flotar 6s ease-in-out infinite; }
.r-flota small { display: block; font: 500 12px/1.3 var(--c); color: var(--suave); }
.r-flota--1 { left: -6%; top: 16%; }
.r-flota--2 { right: -8%; top: 44%; animation-delay: -2s; }
.r-flota--3 { left: 0; bottom: 6%; animation-delay: -4s; }
@keyframes r-flotar { 50% { transform: translateY(-8px); } }
@media (min-width: 640px) { .r-flota { display: flex; } }
@media (min-width: 1024px) {
    .r-hero { padding: 140px 0 90px; }
    .r-hero__in { grid-template-columns: 1.08fr .92fr; }
    .r-flota--1 { left: -4%; } .r-flota--2 { right: -6%; }
}
@media (prefers-reduced-motion: reduce) { .r-flota { animation: none; } html { scroll-behavior: auto; } }

/* ── cifras ── */
.r-datos { background: var(--noche-2); color: #fff; border-top: 1px solid rgba(255,255,255,.07); }
.r-datos__in { display: grid; grid-template-columns: repeat(2, 1fr); }
.r-dato { padding: 26px 14px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.r-dato:nth-child(2n) { border-right: 0; }
.r-dato b { display: block; font: 800 clamp(24px, 4vw, 34px)/1.1 var(--t); color: var(--oro); }
.r-dato span { display: block; font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 6px; }
@media (min-width: 860px) {
    .r-datos__in { grid-template-columns: repeat(4, 1fr); }
    .r-dato { border-bottom: 0; padding: 34px 18px; }
    .r-dato:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.08); }
    .r-dato:last-child { border-right: 0; }
}

/* ── secciones ── */
.r-sec { padding: 72px 0; }
.r-sec--gris { background: var(--fondo); }
.r-sec--oscura { background: linear-gradient(180deg, var(--noche), var(--noche-2)); color: #fff; }
@media (min-width: 1024px) { .r-sec { padding: 104px 0; } }
.r-cabsec { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.r-cabsec h2 { font-size: clamp(28px, 4.4vw, 44px); text-wrap: balance; font-weight: 800; }
.r-cabsec h2 em { font-style: normal; color: var(--azul); }
.r-sec--oscura .r-cabsec h2 em { color: var(--oro); }
.r-cabsec p { margin-top: 14px; font-size: 17.5px; color: var(--suave); }
.r-cabsec p a { color: var(--azul); font-weight: 600; text-decoration: underline; }
.r-sec--oscura .r-cabsec p { color: rgba(255,255,255,.74); }
.r-cabsec--izq { text-align: left; margin: 0 0 24px; }
.r-eti { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fdf6d8; color: #8a6c00; font: 700 13px/1 var(--t); margin-bottom: 16px; }
.r-eti svg { width: 16px; height: 16px; }
.r-eti--cielo { background: #e3f5fd; color: #0369a1; }

/* cómo funciona */
.r-flujo { display: grid; gap: 16px; }
.r-flujo__paso { position: relative; background: #fff; border-radius: var(--radio); padding: 24px; box-shadow: 0 1px 0 var(--borde), 0 12px 30px -24px rgba(6,22,44,.3); }
.r-flujo__dia { display: block; font: 700 12.5px/1 var(--t); text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 16px 0 6px; }
.r-flujo__paso h3 { font-size: 19px; margin-bottom: 8px; }
.r-flujo__paso p { color: var(--suave); font-size: 15px; }
@media (min-width: 720px) { .r-flujo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
    .r-flujo { grid-template-columns: repeat(4, 1fr); }
    .r-flujo__paso:not(:last-child)::after { content: ''; position: absolute; top: 43px; right: -14px; width: 12px; height: 2px; background: var(--borde); }
}

/* funciones */
.r-funciones { display: grid; gap: 14px; }
.r-fun { background: #fff; border-radius: var(--radio); padding: 22px; box-shadow: 0 1px 0 var(--borde); transition: transform .15s, box-shadow .15s; }
.r-fun:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--borde), var(--sombra); }
.r-fun h3 { font-size: 17px; margin: 14px 0 6px; }
.r-fun p { color: var(--suave); font-size: 14.5px; }
@media (min-width: 640px) { .r-funciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .r-funciones { grid-template-columns: repeat(3, 1fr); } }
.r-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 30px; font-size: 14.5px; }
.r-extras__t { font-weight: 700; color: var(--suave); }
.r-extras__i { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--borde); }
.r-extras a { display: inline-flex; align-items: center; gap: 5px; color: var(--azul); font-weight: 700; }
.r-extras a svg { width: 16px; height: 16px; }

/* doble columna */
.r-doble { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) {
    .r-doble { grid-template-columns: 1fr 1fr; gap: 64px; }
    .r-doble--inv > :first-child { order: 0; }
}
.r-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.r-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: rgba(255,255,255,.88); }
.r-lista svg { width: 21px; height: 21px; flex: none; color: var(--oro); margin-top: 2px; }
.r-lista--clara li { color: var(--texto); }
.r-lista--clara svg { color: var(--cielo); }
.r-nota { margin-top: 20px; padding: 12px 16px; border-radius: 14px; background: var(--fondo); color: var(--suave); font-size: 14.5px; }

/* panel de la administración (ilustración) */
.r-panel { background: #fff; color: var(--texto); border-radius: 22px; padding: 16px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.7); }
.r-panel__barra { display: flex; gap: 6px; margin-bottom: 14px; }
.r-panel__barra span { width: 10px; height: 10px; border-radius: 50%; background: #e3e8f1; }
.r-panel__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-panel__kpis div { background: var(--fondo); border-radius: 14px; padding: 12px; }
.r-panel__kpis small { display: block; font-size: 12px; color: var(--suave); }
.r-panel__kpis b { display: block; font: 800 clamp(17px, 3.2vw, 22px)/1.3 var(--t); }
.r-panel__kpis em { font-style: normal; font-size: 12px; color: var(--suave); }
.r-panel__kpis em.r-sube { color: var(--verde); font-weight: 600; }
.r-panel__barras { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 16px 4px 22px; }
.r-panel__barras span { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--cielo), var(--azul)); }
.r-panel__barras span:last-child { background: linear-gradient(180deg, var(--oro-2), var(--oro)); }
.r-panel__barras i { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--c); color: var(--suave); font-style: normal; }
.r-panel__fila { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--borde); margin-top: 8px; }
.r-panel__fila span { flex: 1; min-width: 0; }
.r-panel__fila b { display: block; font: 700 13.5px/1.25 var(--t); }
.r-panel__fila small { display: block; font-size: 12px; color: var(--suave); }
.r-panel__fila em { font-style: normal; font: 700 12.5px/1 var(--t); color: var(--azul); background: #e8f1fb; padding: 7px 11px; border-radius: 999px; }

/* alquileres (ilustración) */
.r-alq { position: relative; display: grid; gap: 14px; max-width: 460px; margin-inline: auto; width: 100%; }
.r-alq__tarj { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 1px 0 var(--borde), var(--sombra); }
.r-alq__cab { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.r-alq__cab b { display: block; font: 700 15.5px/1.25 var(--t); }
.r-alq__cab small { color: var(--suave); font-size: 13px; }
.r-alq__linea { display: flex; justify-content: space-between; padding: 9px 2px; font-size: 14.5px; color: var(--suave); }
.r-alq__linea b { color: var(--texto); font-family: var(--t); }
.r-verde { color: var(--verde) !important; }
.r-alq__aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--noche); color: rgba(255,255,255,.88); border-radius: 18px; padding: 14px 16px; font-size: 14px; margin-left: 24px; }
.r-alq__aviso svg { width: 20px; height: 20px; color: var(--oro); flex: none; }

/* banda de la demo */
.r-banda { background: linear-gradient(120deg, var(--oro), var(--oro-2)); color: var(--noche); padding: 48px 0; }
.r-banda__in { display: grid; gap: 22px; align-items: center; }
.r-banda h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; }
.r-banda p { margin-top: 8px; font-size: 16.5px; max-width: 640px; color: rgba(6,22,44,.78); }
@media (min-width: 900px) { .r-banda__in { grid-template-columns: 1fr auto; } }

/* afiliados */
.r-afil { display: grid; gap: 20px; align-items: center; background: #fff; border-radius: 24px; padding: 28px; box-shadow: 0 1px 0 var(--borde); }
.r-afil h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin-bottom: 8px; }
.r-afil p { color: var(--suave); }
.r-afil p b { color: var(--texto); }
@media (min-width: 900px) { .r-afil { grid-template-columns: auto 1fr auto; padding: 32px 36px; } }

/* preguntas */
.r-faq-in { max-width: 840px; }
.r-faq details { border-bottom: 1px solid var(--borde); }
.r-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font: 700 17px/1.35 var(--t); }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); color: var(--azul); font: 500 22px/1 var(--c); transition: transform .2s; }
.r-faq details[open] summary::after { transform: rotate(45deg); }
.r-faq details p { padding: 0 2px 22px; color: var(--suave); font-size: 16px; max-width: 720px; }

/* cierre */
.r-final { position: relative; overflow: hidden; padding: 84px 0; text-align: center; color: #fff; background:
    radial-gradient(600px 300px at 50% 0%, rgba(0,156,223,.3), transparent 70%), var(--noche); }
.r-final h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; text-wrap: balance; }
.r-final p { margin: 14px auto 0; max-width: 560px; color: rgba(255,255,255,.75); font-size: 17px; }

/* cabecera de página interior */
.r-cabpag { color: #fff; text-align: center; padding: 130px 0 70px; background:
    radial-gradient(700px 360px at 80% 10%, rgba(0,156,223,.3), transparent 65%),
    linear-gradient(180deg, var(--noche), var(--noche-2)); }
.r-cabpag h1 { font-size: clamp(32px, 5.6vw, 54px); font-weight: 800; text-wrap: balance; margin: 18px auto 14px; max-width: 860px; }
.r-cabpag p { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.78); font-size: 18px; }

/* ── calculadora ── */
.r-sec--calc { background: radial-gradient(900px 420px at 50% 0%, #eef6fd, transparent 70%), #fff; }
.r-calc { display: grid; gap: 18px; align-items: start; }
@media (min-width: 980px) { .r-calc { grid-template-columns: 1.05fr .95fr; gap: 26px; } .r-calc__res { position: sticky; top: 96px; } }
.r-calc__datos, .r-calc__res { border-radius: 24px; padding: 22px; }
@media (min-width: 640px) { .r-calc__datos, .r-calc__res { padding: 30px; } }
.r-calc__datos { background: #fff; box-shadow: 0 1px 0 var(--borde), 0 0 0 1px var(--borde); }

.r-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 0 0 26px; padding: 5px; border: 0; border-radius: 16px; background: var(--fondo); }
.r-seg label { position: relative; cursor: pointer; }
.r-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.r-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 12px; font: 700 15px/1.2 var(--t); color: var(--suave); transition: background .2s, color .2s, box-shadow .2s; }
.r-seg span svg { width: 19px; height: 19px; }
.r-seg input:checked + span { background: #fff; color: var(--noche); box-shadow: 0 6px 16px -8px rgba(6,22,44,.35); }
.r-seg input:checked + span svg { color: var(--azul); }
.r-seg input:focus-visible + span { outline: 3px solid var(--cielo); outline-offset: 1px; }

.r-calc__preg { display: block; font: 800 19px/1.3 var(--t); margin-bottom: 14px; }
.r-calc__preg--chica { font-size: 16px; margin-bottom: 10px; }
.r-calc__num { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.r-calc__num input { width: 0; flex: 1 1 auto; min-width: 0; max-width: 170px; height: 64px; padding: 0 14px; border: 2px solid var(--borde); border-radius: 16px; font: 800 34px/1 var(--t); text-align: center; color: var(--noche); background: #fff; -moz-appearance: textfield; appearance: textfield; }
.r-calc__num input::-webkit-outer-spin-button, .r-calc__num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.r-calc__num input:focus { border-color: var(--cielo); outline: none; box-shadow: 0 0 0 4px rgba(0,156,223,.15); }
.r-calc__num span { font: 600 16px/1 var(--t); color: var(--suave); margin-right: auto; }
.r-calc__mas { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--fondo); font: 600 22px/1 var(--c); color: var(--azul); cursor: pointer; }
.r-calc__mas:hover { background: #e6eef8; }

.r-rango { --p: 50%; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.r-rango::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cielo), var(--azul)) 0 / var(--p) 100% no-repeat, #e3e8f1; }
.r-rango::-moz-range-track { height: 10px; border-radius: 999px; background: #e3e8f1; }
.r-rango::-moz-range-progress { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--cielo), var(--azul)); }
.r-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: #fff; border: 7px solid var(--oro); box-shadow: 0 4px 12px rgba(6,22,44,.3); }
.r-rango::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 7px solid var(--oro); box-shadow: 0 4px 12px rgba(6,22,44,.3); }
.r-rango:focus-visible { outline: none; }
.r-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(0,156,223,.25); }

.r-calc__marcas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.r-calc__marcas button { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--fondo); font: 700 13.5px/1 var(--t); color: var(--suave); cursor: pointer; }
.r-calc__marcas button:hover { background: #e6eef8; color: var(--azul); }
.r-calc__ayuda { margin-top: 12px; color: var(--suave); font-size: 14px; }

.r-calc__cuota { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.r-calc__fee { display: flex; gap: 8px; }
.r-calc__fee select, .r-calc__fee input { height: 50px; border: 2px solid var(--borde); border-radius: 14px; padding: 0 12px; background: #fff; font: 700 17px/1 var(--t); }
.r-calc__fee input { flex: 1; min-width: 0; }

.r-calc__addons { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.r-calc__addons h3 { font-size: 17px; }
.r-calc__addons .r-calc__ayuda { margin: 4px 0 14px; }
.r-addon { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 2px solid var(--borde); margin-top: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.r-addon[hidden] { display: none; }
.r-addon:hover { border-color: #c9d6e8; }
.r-addon input { position: absolute; opacity: 0; pointer-events: none; }
.r-addon__caja { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid #c3cddd; display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.r-addon__caja svg { width: 16px; height: 16px; stroke-width: 3; }
.r-addon__txt { flex: 1; min-width: 0; }
.r-addon__txt b { display: block; font: 700 15px/1.3 var(--t); }
.r-addon__txt small { display: block; color: var(--suave); font-size: 13px; line-height: 1.4; }
.r-addon__precio { flex: none; font: 700 14px/1.2 var(--t); color: var(--azul); text-align: right; white-space: nowrap; }
.r-addon:has(input:checked) { border-color: var(--azul); background: #f2f8fe; }
.r-addon input:checked ~ .r-addon__caja, .r-addon:has(input:checked) .r-addon__caja { background: var(--azul); border-color: var(--azul); color: #fff; }
.r-addon input:focus-visible ~ .r-addon__caja { outline: 3px solid var(--cielo); outline-offset: 2px; }

.r-calc__res { color: #fff; background:
    radial-gradient(420px 260px at 100% 0%, rgba(0,156,223,.35), transparent 70%),
    linear-gradient(160deg, var(--noche-3), var(--noche)); box-shadow: 0 40px 80px -40px rgba(6,22,44,.8); }
.r-calc__eti { font: 700 13px/1 var(--t); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.r-calc__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.r-calc__total span { font: 800 clamp(42px, 8vw, 60px)/1 var(--t); letter-spacing: -.035em; color: var(--oro); font-variant-numeric: tabular-nums; }
.r-calc__total small { font: 600 18px/1 var(--t); color: rgba(255,255,255,.7); }
.r-calc__por { color: rgba(255,255,255,.78); font-size: 15px; }

.r-esc { display: flex; align-items: flex-end; gap: 5px; height: 128px; margin: 24px 0 8px; padding-bottom: 34px; }
.r-esc__t { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.r-esc__barra { position: relative; height: var(--h); border-radius: 7px 7px 3px 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.r-esc__barra i { position: absolute; inset: auto 0 0; height: calc(var(--l) * 100%); background: linear-gradient(180deg, var(--oro-2), var(--oro)); transition: height .35s ease; }
.r-esc__t b { position: absolute; left: 50%; bottom: calc(var(--h) + 4px); transform: translateX(-50%); font: 700 10.5px/1 var(--t); color: rgba(255,255,255,.55); white-space: nowrap; transition: bottom .3s; }
.r-esc__t small { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%) rotate(-35deg); transform-origin: top center; font: 600 9.5px/1 var(--c); color: rgba(255,255,255,.45); white-space: nowrap; }
.r-esc__t--si b { color: var(--oro); }
.r-esc__t--si small { color: rgba(255,255,255,.8); }
.r-esc__pie { font-size: 12.5px; color: rgba(255,255,255,.55); }
@media (max-width: 520px) { .r-esc__t b { display: none; } .r-esc__t--ult b, .r-esc__t:first-child b, .r-esc__t:last-child b { display: block; } .r-esc__t:first-child:not(.r-esc__t--ult) + .r-esc__t--ult b { display: none; } }

.r-calc__desg { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.r-calc__desg li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14.5px; color: rgba(255,255,255,.85); }
.r-calc__desg li small { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); }
.r-calc__desg li b { font-family: var(--t); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-calc__desg-add b { color: #7dd3fc; }
.r-calc__desg li.r-calc__desg-tot { border-bottom: 0; padding-top: 14px; font: 800 17px/1.2 var(--t); color: #fff; }
.r-calc__desg-tot b { color: var(--oro); }
.r-calc__btns { display: grid; gap: 10px; margin-top: 22px; }
.r-calc__btns .r-btn { width: 100%; }
.r-calc__letra { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.5; }

/* tablas de precios */
.r-tablas { display: grid; gap: 18px; }
@media (min-width: 900px) { .r-tablas { grid-template-columns: 1fr 1fr; } }
.r-tabla { background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 1px 0 var(--borde); }
.r-tabla h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 14px; }
.r-tabla h3 svg { width: 22px; height: 22px; color: var(--azul); }
.r-tabla h4 { font-size: 15px; margin: 24px 0 8px; color: var(--suave); }
.r-tabla table { width: 100%; border-collapse: collapse; font-size: 15px; }
.r-tabla th { text-align: left; font: 700 12.5px/1.3 var(--t); text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 0 8px 10px 0; border-bottom: 2px solid var(--borde); }
.r-tabla td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--borde); vertical-align: top; }
.r-tabla td small { display: block; color: var(--suave); font-size: 13px; }
.r-tabla tr:last-child td { border-bottom: 0; }
.r-tabla td b { font-family: var(--t); font-variant-numeric: tabular-nums; }
.r-tabla--addons { margin-top: 18px; }

/* ── pie ── */
.r-pie { background: #041021; color: rgba(255,255,255,.7); padding: 60px 0 26px; font-size: 14.5px; }
.r-pie__cols { display: grid; gap: 34px; }
.r-pie__marca p { margin-top: 14px; max-width: 340px; }
.r-pie h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.r-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.r-pie a:hover { color: #fff; }
.r-pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
@media (min-width: 720px) { .r-pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.r-wa-caja { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.r-wa { position: relative; height: 60px; min-width: 60px; padding: 0 15px; border-radius: 999px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; box-shadow: 0 14px 32px -8px rgba(18,140,126,.75); transition: gap .25s, padding .25s, transform .2s; animation: r-wa-salto 5s ease-in-out 3s infinite; }
.r-wa svg { width: 30px; height: 30px; flex: none; position: relative; z-index: 1; }
.r-wa__txt { max-width: 0; overflow: hidden; white-space: nowrap; font: 700 15px/1 var(--t); transition: max-width .3s ease; position: relative; z-index: 1; order: -1; }
.r-wa:hover, .r-wa:focus-visible { gap: 10px; padding: 0 18px 0 20px; }
.r-wa:hover .r-wa__txt, .r-wa:focus-visible .r-wa__txt { max-width: 120px; }
.r-wa__onda { position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366; animation: r-wa-onda 2.4s ease-out infinite; pointer-events: none; }
.r-wa__onda--2 { animation-delay: 1.2s; }
.r-wa__punto { position: absolute; top: -3px; right: -3px; z-index: 2; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #ff3b30; color: #fff; font: 800 11.5px/1 var(--t); box-shadow: 0 0 0 3px #fff; animation: r-pop .4s cubic-bezier(.2,.9,.3,1.4) 6s both; }
@keyframes r-wa-onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
@keyframes r-wa-salto { 0%, 88%, 100% { transform: none; } 91% { transform: translateY(-7px) rotate(-6deg); } 94% { transform: translateY(0) rotate(5deg); } 97% { transform: translateY(-3px); } }
.r-wa-globo { position: relative; width: min(290px, calc(100vw - 36px)); padding: 14px 16px 16px; border-radius: 20px 20px 6px 20px; background: #fff; color: var(--texto); box-shadow: 0 24px 50px -18px rgba(6,22,44,.5); opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: opacity .3s, transform .3s; }
.r-wa-globo.r-abierto { opacity: 1; transform: none; }
.r-wa-globo__x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--suave); font-size: 20px; line-height: 1; cursor: pointer; }
.r-wa-globo__x:hover { background: var(--fondo); }
.r-wa-globo__quien { display: flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--t); color: #128c7e; }
.r-wa-globo__quien i { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
.r-wa-globo__escribe { display: inline-flex; gap: 4px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fondo); }
.r-wa-globo__escribe i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b5; animation: r-escribe 1s ease-in-out infinite; }
.r-wa-globo__escribe i:nth-child(2) { animation-delay: .15s; } .r-wa-globo__escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes r-escribe { 50% { transform: translateY(-4px); opacity: .5; } }
.r-wa-globo__txt, .r-wa-globo__btn { display: none; }
.r-wa-globo.r-escrito .r-wa-globo__escribe { display: none; }
.r-wa-globo.r-escrito .r-wa-globo__txt { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.5; animation: r-pase-in .35s ease both; }
.r-wa-globo.r-escrito .r-wa-globo__btn { display: flex; justify-content: center; margin-top: 12px; padding: 11px; border-radius: 12px; background: #25d366; color: #fff; font: 700 14px/1 var(--t); }
.r-pie__wa { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .r-wa, .r-wa__onda, .r-wa__punto, .r-wa-globo__escribe i { animation: none !important; } .r-wa__onda { display: none; } }
.r-prueba { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 41; background: var(--noche); color: var(--oro); font: 700 12.5px/1 var(--t); padding: 9px 14px; border-radius: 999px; box-shadow: var(--sombra); white-space: nowrap; }
@media (max-width: 480px) { .r-prueba { left: 16px; transform: none; font-size: 11px; } }

/* ════════ Ronda 2 (2026-10-04): destacados, próximamente y registro ════════ */
.r-pronto { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 999px; background: var(--oro); color: var(--noche); font: 800 10px/1 var(--t); letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; }
.r-cajon .r-pronto { vertical-align: 3px; }
.r-eti--oscura { background: rgba(236,195,29,.14); color: var(--oro); }
.r-tablas--una { max-width: 760px; margin-inline: auto; grid-template-columns: 1fr !important; }

/* calculadora: sin desglose */
.r-calc__extras { margin-top: 6px; font-size: 13.5px; color: #7dd3fc; }
.r-calc__prueba { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(236,195,29,.1); box-shadow: inset 0 0 0 1px rgba(236,195,29,.28); }
.r-calc__prueba i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--oro); color: var(--noche); }
.r-calc__prueba i svg { width: 21px; height: 21px; }
.r-calc__prueba span { font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.45; }
.r-calc__prueba b { display: block; font: 800 15.5px/1.3 var(--t); color: #fff; }

/* ── destacado: comprobantes ── */
.r-pasos-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.r-pasos-nav button { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--borde); font: 700 13.5px/1 var(--t); color: var(--suave); transition: background .2s, color .2s, box-shadow .2s; }
.r-pasos-nav button span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); font-size: 12px; }
.r-pasos-nav button.r-si { background: var(--noche); color: #fff; box-shadow: none; }
.r-pasos-nav button.r-si span { background: var(--oro); color: var(--noche); }

.r-comp { position: relative; display: flex; justify-content: center; padding: 10px 0 40px; }
.r-tel--comp { width: min(290px, 80vw); min-height: 470px; overflow: hidden; }
.r-pant { position: absolute; inset: 48px 14px 14px; opacity: 0; transform: translateX(24px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.r-comp[data-paso="0"] .r-pant--0, .r-comp[data-paso="1"] .r-pant--1, .r-comp[data-paso="2"] .r-pant--2, .r-comp[data-paso="3"] .r-pant--3 { opacity: 1; transform: none; }

.r-fac { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 1px 0 var(--borde), 0 10px 24px -18px rgba(6,22,44,.4); margin-top: 6px; }
.r-fac__fila { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1.2 var(--t); color: var(--suave); }
.r-fac > b { display: block; font: 800 30px/1.1 var(--t); margin: 8px 0 2px; color: var(--noche); }
.r-fac > small { color: var(--suave); font-size: 12.5px; }
.r-fac__est { font-style: normal; font-size: 11px; padding: 4px 8px; border-radius: 999px; background: #fdf0d5; color: #9a6700; }
.r-fac__est--ok { background: #e3f7ea; color: var(--verde); }
.r-fac__btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, var(--azul), var(--cielo)); color: #fff; font: 700 14px/1 var(--t); animation: r-latido 1.6s ease-in-out infinite; }
.r-fac__btn svg { width: 18px; height: 18px; }
.r-fac--gris { margin-top: 10px; opacity: .75; padding: 12px 16px; }
@keyframes r-latido { 50% { box-shadow: 0 0 0 8px rgba(0,156,223,.18); } }

.r-recibo { position: relative; overflow: hidden; margin: 8px 6px 0; padding: 16px; border-radius: 14px; background: #fff; transform: rotate(-2deg); box-shadow: 0 18px 30px -18px rgba(6,22,44,.5); border-top: 5px solid var(--verde); }
.r-comp[data-paso="1"] .r-recibo { animation: r-foto .8s cubic-bezier(.2,.9,.3,1.2) both; }
.r-recibo__banco { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--t); color: var(--suave); margin-bottom: 12px; }
.r-recibo__banco i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--azul), var(--cielo)); }
.r-recibo__l { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px dashed var(--borde); font-size: 12.5px; color: var(--suave); }
.r-recibo__l b { color: var(--texto); font-family: var(--t); }
.r-recibo__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.r-comp[data-paso="1"] .r-recibo__flash { animation: r-flash .5s ease-out .1s; }
.r-carga { margin: 22px 6px 0; font: 600 12.5px/1 var(--t); color: var(--suave); }
.r-carga i { display: block; height: 8px; border-radius: 999px; background: #e3e8f1; margin-top: 8px; overflow: hidden; }
.r-carga b { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cielo), var(--azul)); }
.r-comp[data-paso="1"] .r-carga b { animation: r-llenar 2.2s ease-in-out .5s both; }
@keyframes r-foto { from { transform: translateY(40px) rotate(-8deg) scale(.9); opacity: 0; } }
@keyframes r-flash { 30% { opacity: .9; } }
@keyframes r-llenar { from { width: 0; } }

.r-linea { list-style: none; margin: 12px 4px 0; padding: 0; }
.r-linea li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.r-linea li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: #e3e8f1; }
.r-linea i { flex: none; position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: #e3e8f1; box-shadow: inset 0 0 0 4px #f6f8fc; transition: background .3s; }
.r-linea span { font: 700 13.5px/1.3 var(--t); color: #a3abbb; transition: color .3s; }
.r-linea small { display: block; font: 500 11.5px/1.3 var(--c); }
.r-comp[data-paso="2"] .r-linea i, .r-comp[data-paso="3"] .r-linea i { background: var(--verde); }
.r-comp[data-paso="2"] .r-linea span, .r-comp[data-paso="3"] .r-linea span { color: var(--texto); }
.r-comp[data-paso="2"] .r-linea li:nth-child(4) i { background: var(--oro); animation: r-latido 1.2s infinite; }
.r-comp[data-paso="2"] .r-linea li:nth-child(5) i { background: #e3e8f1; }
.r-comp[data-paso="2"] .r-linea li:nth-child(5) span { color: #a3abbb; }
/* retrasos escalonados de la línea de estados */
.r-comp[data-paso="2"] .r-linea li:nth-child(1) i, .r-comp[data-paso="2"] .r-linea li:nth-child(1) span { transition-delay: .2s; }
.r-comp[data-paso="2"] .r-linea li:nth-child(2) i, .r-comp[data-paso="2"] .r-linea li:nth-child(2) span { transition-delay: .7s; }
.r-comp[data-paso="2"] .r-linea li:nth-child(3) i, .r-comp[data-paso="2"] .r-linea li:nth-child(3) span { transition-delay: 1.2s; }
.r-comp[data-paso="2"] .r-linea li:nth-child(4) i, .r-comp[data-paso="2"] .r-linea li:nth-child(4) span { transition-delay: 1.7s; }

.r-pagada { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 70px; }
.r-pagada__ok { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; box-shadow: 0 0 0 14px rgba(22,163,74,.14), 0 0 0 28px rgba(22,163,74,.07); }
.r-pagada__ok svg { width: 48px; height: 48px; stroke-width: 2.6; }
.r-comp[data-paso="3"] .r-pagada__ok { animation: r-pop .6s cubic-bezier(.2,.9,.3,1.4) both; }
.r-pagada b { font: 800 22px/1.2 var(--t); margin-top: 34px; }
.r-pagada small { color: var(--suave); margin-top: 6px; }
.r-pagada em { font-style: normal; margin-top: 18px; padding: 7px 16px; border-radius: 999px; background: #e3f7ea; color: var(--verde); font: 800 13px/1 var(--t); }
@keyframes r-pop { from { transform: scale(.3); opacity: 0; } }

.r-comp__admin { position: absolute; right: max(0px, calc(50% - 300px)); bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--sombra); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.r-comp__admin b { display: block; font: 700 13.5px/1.25 var(--t); }
.r-comp__admin small { display: block; font-size: 12px; color: var(--suave); }
.r-comp__admin em { font-style: normal; font: 700 12.5px/1 var(--t); padding: 8px 12px; border-radius: 999px; }
.r-comp__boton { background: var(--azul); color: #fff; }
.r-comp__hecho { display: none; align-items: center; gap: 4px; background: #e3f7ea; color: var(--verde); }
.r-comp__hecho svg { width: 14px; height: 14px; }
.r-comp[data-paso="2"] .r-comp__admin, .r-comp[data-paso="3"] .r-comp__admin { opacity: 1; transform: none; transition-delay: .9s; }
.r-comp[data-paso="3"] .r-comp__admin { transition-delay: 0s; }
.r-comp[data-paso="3"] .r-comp__boton { display: none; }
.r-comp[data-paso="3"] .r-comp__hecho { display: inline-flex; }
@media (min-width: 960px) { .r-comp__admin { right: -10px; bottom: 60px; } }

/* ── destacado: acceso ── */
.r-acc { position: relative; overflow: hidden; background:
    radial-gradient(700px 400px at 15% 10%, rgba(0,156,223,.22), transparent 65%),
    radial-gradient(600px 400px at 90% 90%, rgba(236,195,29,.12), transparent 60%),
    linear-gradient(180deg, var(--noche), var(--noche-2)); }
.r-acc__tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -10px auto 34px; max-width: 900px; }
.r-acc__tipos button { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: rgba(255,255,255,.8); font: 700 13.5px/1 var(--t); transition: background .2s, color .2s, transform .2s; }
.r-acc__tipos button svg { width: 17px; height: 17px; }
.r-acc__tipos button:hover { background: rgba(255,255,255,.12); }
.r-acc__tipos button.r-si { background: var(--oro); color: var(--noche); box-shadow: none; transform: translateY(-2px); }

.r-acc__escena { display: grid; gap: 14px; align-items: center; justify-items: center; }
.r-acc__col { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 300px; }
.r-acc__paso { font: 700 12px/1 var(--t); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.r-acc__flecha { width: 2px; height: 34px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.35)); position: relative; overflow: hidden; }
.r-acc__flecha span { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 12px var(--oro); animation: r-viaje-v 1.6s linear infinite; }
@keyframes r-viaje-v { from { top: -10px; } to { top: 100%; } }
@media (min-width: 980px) {
    .r-acc__escena { grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: start; }
    .r-acc__flecha { width: 100%; height: 2px; align-self: center; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35)); }
    .r-acc__flecha span { top: -3px; animation-name: r-viaje-h; }
}
@keyframes r-viaje-h { from { left: -10px; } to { left: 100%; } }

.r-pase { --pc: var(--cielo); width: 100%; border-radius: 24px; padding: 16px; background: #fff; color: var(--texto); text-align: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); border-top: 6px solid var(--pc); transition: border-color .3s; }
.r-pase--oro { --pc: var(--oro); } .r-pase--azul { --pc: var(--azul); } .r-pase--verde { --pc: var(--verde); }
.r-pase__cab { display: flex; align-items: center; gap: 10px; text-align: left; }
.r-pase__cab i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 16%, #fff); color: var(--pc); flex: none; }
.r-pase--oro .r-pase__cab i { color: #9a7a00; }
.r-pase__cab i svg { width: 21px; height: 21px; }
.r-pase__cab small { display: block; font-size: 11.5px; color: var(--suave); }
.r-pase__cab b { font: 800 17px/1.2 var(--t); }
.r-pase__qr { width: 150px; margin: 14px auto 10px; color: var(--noche); padding: 6px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--borde); }
.r-pase__qr svg, .r-garita__qr svg { display: block; width: 100%; height: auto; }
.r-pase__quien { display: block; font: 800 16px/1.25 var(--t); }
.r-pase__det { display: block; font-size: 12.5px; color: var(--suave); margin-top: 3px; min-height: 2.6em; }
.r-pase__wa { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border-radius: 999px; background: #e9f8ef; color: #0d6b34; font: 700 12px/1 var(--t); }
.r-pase__wa svg { width: 15px; height: 15px; }
.r-acc__escena.r-nuevo .r-pase { animation: r-pase-in .55s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes r-pase-in { from { transform: translateY(18px) scale(.95); opacity: 0; } }

.r-garita { width: 100%; border-radius: 24px; padding: 14px; background: #0f2342; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.8); }
.r-garita__cab { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--t); color: rgba(255,255,255,.8); margin-bottom: 12px; }
.r-garita__cab svg { width: 17px; height: 17px; color: var(--oro); }
.r-garita__visor { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1d3a66, #081529); display: grid; place-items: center; }
.r-garita__qr { width: 52%; color: var(--noche); padding: 5px; background: #fff; border-radius: 8px; opacity: .25; transform: scale(.9) rotate(-6deg); transition: opacity .4s, transform .4s; }
.r-garita__esq { position: absolute; inset: 14%; border-radius: 10px;
    background: linear-gradient(var(--oro), var(--oro)) 0 0 / 26px 4px no-repeat, linear-gradient(var(--oro), var(--oro)) 0 0 / 4px 26px no-repeat,
    linear-gradient(var(--oro), var(--oro)) 100% 0 / 26px 4px no-repeat, linear-gradient(var(--oro), var(--oro)) 100% 0 / 4px 26px no-repeat,
    linear-gradient(var(--oro), var(--oro)) 0 100% / 26px 4px no-repeat, linear-gradient(var(--oro), var(--oro)) 0 100% / 4px 26px no-repeat,
    linear-gradient(var(--oro), var(--oro)) 100% 100% / 26px 4px no-repeat, linear-gradient(var(--oro), var(--oro)) 100% 100% / 4px 26px no-repeat; }
.r-garita__laser { position: absolute; left: 14%; right: 14%; top: 14%; height: 3px; border-radius: 3px; background: #ff4d4d; box-shadow: 0 0 14px 3px rgba(255,77,77,.7); opacity: 0; }
.r-acc__escena[data-fase="1"] .r-garita__qr, .r-acc__escena[data-fase="2"] .r-garita__qr, .r-acc__escena[data-fase="3"] .r-garita__qr { opacity: 1; transform: none; }
.r-acc__escena[data-fase="1"] .r-garita__laser { opacity: 1; animation: r-laser 1.1s ease-in-out infinite alternate; }
@keyframes r-laser { from { top: 14%; } to { top: calc(86% - 3px); } }
.r-garita__res { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 14px; background: rgba(22,163,74,.16); color: #fff; opacity: .15; transition: opacity .35s, background .35s; }
.r-garita__res b { display: block; font: 800 14.5px/1.2 var(--t); }
.r-garita__res small { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.r-garita__ok { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--verde); }
.r-garita__ok svg { width: 19px; height: 19px; stroke-width: 2.6; }
.r-acc__escena[data-fase="2"] .r-garita__res, .r-acc__escena[data-fase="3"] .r-garita__res { opacity: 1; }
.r-acc__escena[data-fase="2"] .r-garita__ok { animation: r-pop .45s cubic-bezier(.2,.9,.3,1.4) both; }

.r-aviso { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 18px; background: #fff; color: var(--texto); box-shadow: 0 24px 50px -26px rgba(0,0,0,.8); opacity: .15; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.r-aviso b { display: block; font: 700 14px/1.25 var(--t); }
.r-aviso small { display: block; font-size: 12px; color: var(--suave); }
.r-aviso--2 { transition-delay: .25s; }
.r-acc__escena[data-fase="3"] .r-aviso { opacity: 1; transform: none; }

.r-acc__mas { display: grid; gap: 12px; margin-top: 56px; }
.r-acc__item { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.r-acc__item i { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(0,156,223,.16); color: #7dd3fc; }
.r-acc__item i svg { width: 20px; height: 20px; }
.r-acc__item h3 { font-size: 16px; margin: 12px 0 4px; }
.r-acc__item p { font-size: 14px; color: rgba(255,255,255,.66); }
@media (min-width: 640px) { .r-acc__mas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .r-acc__mas { grid-template-columns: repeat(3, 1fr); } }
.r-acc__nota { display: flex; gap: 14px; align-items: flex-start; margin: 26px auto 0; max-width: 860px; padding: 18px 20px; border-radius: 18px; background: rgba(236,195,29,.08); box-shadow: inset 0 0 0 1px rgba(236,195,29,.25); }
.r-acc__nota i { flex: none; color: var(--oro); }
.r-acc__nota i svg { width: 24px; height: 24px; }
.r-acc__nota p { font-size: 14.5px; color: rgba(255,255,255,.78); }
.r-acc__nota b { color: #fff; }

/* ── próximamente ── */
.r-prox__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--oro); color: var(--noche); font: 800 12.5px/1 var(--t); letter-spacing: .04em; text-transform: uppercase; }
.r-prox__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--noche); animation: r-parpadeo 1.2s ease-in-out infinite; }
@keyframes r-parpadeo { 50% { opacity: .2; } }
.r-prox { position: relative; overflow: hidden; color: #fff; padding: 120px 0 60px; background:
    radial-gradient(700px 420px at 85% 30%, rgba(0,156,223,.26), transparent 65%), linear-gradient(180deg, var(--noche), var(--noche-2)); }
.r-prox::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: linear-gradient(rgba(0,156,223,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,156,223,.09) 1px, transparent 1px); background-size: 28px 28px; }
.r-prox__in { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .r-prox { padding: 150px 0 90px; } .r-prox__in { grid-template-columns: 1.05fr .95fr; } }
.r-prox h1 { font-size: clamp(36px, 6.4vw, 60px); font-weight: 800; margin: 22px 0 16px; }
.r-prox h1 em { font-style: normal; color: var(--oro); }
.r-prox__txt > p { color: rgba(255,255,255,.78); font-size: 18px; max-width: 560px; }
.r-prox__barra { margin-top: 28px; max-width: 460px; font: 700 13px/1 var(--t); color: rgba(255,255,255,.7); }
.r-prox__barra i { display: block; height: 12px; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.r-prox__barra b { display: block; height: 100%; width: 82%; border-radius: inherit;
    background: repeating-linear-gradient(-45deg, var(--oro) 0 12px, var(--oro-2) 12px 24px); background-size: 34px 100%; animation: r-rayas 1s linear infinite, r-llenar 2s ease-out both; }
@keyframes r-rayas { to { background-position: 34px 0; } }

.r-plano { position: relative; max-width: 440px; width: 100%; margin-inline: auto; padding: 20px; border-radius: 28px; background: rgba(0,97,169,.18); box-shadow: inset 0 0 0 1px rgba(0,156,223,.3); overflow: hidden; }
.r-plano__svg { display: block; width: 100%; height: auto; }
.r-plano__trazo path { fill: none; stroke: #7dd3fc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: r-dibujar 3.2s ease-out forwards; }
.r-plano__trazo path:nth-child(2) { animation-delay: .3s; } .r-plano__trazo path:nth-child(3) { animation-delay: .7s; }
.r-plano__trazo path:nth-child(4) { animation-delay: 1.1s; } .r-plano__trazo path:nth-child(5) { animation-delay: 1.4s; } .r-plano__trazo path:nth-child(6) { animation-delay: 1.8s; }
@keyframes r-dibujar { to { stroke-dashoffset: 0; } }
.r-plano__ventanas rect { fill: rgba(125,211,252,.12); stroke: rgba(125,211,252,.45); stroke-width: 1; animation: r-luz 5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes r-luz { 0%, 60%, 100% { fill: rgba(125,211,252,.12); } 70%, 90% { fill: var(--oro); } }
.r-plano__gancho { stroke: #7dd3fc; stroke-width: 2; }
.r-plano__carga { fill: var(--oro); animation: r-grua 3.4s ease-in-out infinite; }
@keyframes r-grua { 50% { transform: translateY(26px); } }
.r-plano__cinta { position: absolute; left: -10%; right: -10%; bottom: 26px; transform: rotate(-4deg); background: repeating-linear-gradient(-45deg, var(--oro) 0 16px, #111 16px 32px); padding: 4px 0; overflow: hidden; }
.r-plano__cinta span { display: block; white-space: nowrap; width: max-content; padding: 3px 0; background: var(--oro); color: #111; font: 800 12px/1 var(--t); letter-spacing: .08em; text-transform: uppercase; animation: r-marquesina 14s linear infinite; }
@keyframes r-marquesina { to { transform: translateX(-50%); } }
.r-fun--prox { position: relative; }
.r-fun--prox::after { content: 'Pronto'; position: absolute; top: 18px; right: 18px; padding: 4px 8px; border-radius: 999px; background: #fdf6d8; color: #8a6c00; font: 800 10.5px/1 var(--t); text-transform: uppercase; letter-spacing: .04em; }

.r-prox-tarj { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 26px 26px 26px 34px; border-radius: 24px; background: var(--noche); color: #fff; overflow: hidden; transition: transform .2s; }
.r-prox-tarj:hover { transform: translateY(-3px); }
.r-prox-tarj__cinta { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: repeating-linear-gradient(-45deg, var(--oro) 0 10px, #111 10px 20px); background-size: 100% 28px; animation: r-rayas-v 1.2s linear infinite; }
@keyframes r-rayas-v { to { background-position: 0 28px; } }
.r-prox-tarj__ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(0,156,223,.18); color: #7dd3fc; }
.r-prox-tarj__ico svg { width: 28px; height: 28px; }
.r-prox-tarj__txt b { display: block; font: 800 clamp(19px, 2.6vw, 24px)/1.25 var(--t); margin: 12px 0 6px; }
.r-prox-tarj__txt small { display: block; color: rgba(255,255,255,.7); font-size: 15px; }
.r-prox-tarj__ver { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; color: var(--oro); font: 700 14.5px/1 var(--t); }
.r-prox-tarj__ver svg { width: 17px; height: 17px; }
@media (min-width: 860px) { .r-prox-tarj { grid-template-columns: auto 1fr auto; } .r-prox-tarj__ver { grid-column: auto; } }

/* ── registro ── */
.r-reg-body { background: var(--fondo); }
.r-reg { min-height: 100vh; display: grid; }
.r-reg__lado { position: relative; overflow: hidden; color: #fff; padding: 22px 20px 30px; display: flex; flex-direction: column; gap: 22px; background:
    radial-gradient(600px 380px at 90% 10%, rgba(0,156,223,.3), transparent 65%), radial-gradient(500px 360px at 0% 100%, rgba(236,195,29,.16), transparent 60%), linear-gradient(180deg, var(--noche), var(--noche-2)); }
.r-reg__logo img { height: 46px; background: rgba(255,255,255,.96); padding: 6px 12px; border-radius: 12px; }
.r-reg__lado h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin: 18px 0 12px; text-wrap: balance; }
.r-reg__lado h1 em { font-style: normal; color: var(--oro); }
.r-reg__lado-txt > p { color: rgba(255,255,255,.76); font-size: 16.5px; max-width: 480px; }
.r-reg__lado .r-lista { margin-top: 22px; }
.r-reg__pasos { list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.r-reg__pasos li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font: 700 13px/1 var(--t); color: rgba(255,255,255,.7); }
.r-reg__pasos span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 11.5px; }
.r-reg__pasos li.r-si { background: var(--oro); color: var(--noche); }
.r-reg__pasos li.r-si span { background: var(--noche); color: var(--oro); }
.r-reg__ayuda { margin-top: auto; font-size: 14px; color: rgba(255,255,255,.65); }
.r-reg__ayuda a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.r-reg__ayuda svg { width: 17px; height: 17px; color: #25d366; }
@media (max-width: 959px) { .r-reg__lado .r-lista, .r-reg__pasos, .r-reg__ayuda { display: none; } }
.r-reg__main { padding: 26px 16px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.r-reg__caja { width: 100%; max-width: 560px; background: #fff; border-radius: 26px; padding: 26px 20px; box-shadow: 0 1px 0 var(--borde), 0 30px 60px -40px rgba(6,22,44,.45); }
@media (min-width: 640px) { .r-reg__caja { padding: 36px; } }
@media (min-width: 960px) {
    .r-reg { grid-template-columns: minmax(380px, 44%) 1fr; }
    .r-reg__lado { position: sticky; top: 0; height: 100vh; padding: 36px 48px; }
    .r-reg__lado-txt { margin-top: auto; }
}
.r-reg__cab h2 { font-size: 28px; font-weight: 800; }
.r-reg__cab p { margin-top: 6px; color: var(--suave); }
.r-reg__cab a, .r-reg__acepto a, .r-reg__err a { color: var(--azul); font-weight: 600; text-decoration: underline; }
.r-reg__form { margin-top: 24px; display: grid; gap: 16px; }
.r-reg__dos { display: grid; gap: 16px; }
@media (min-width: 560px) { .r-reg__dos { grid-template-columns: 1fr 1fr; } }
.r-campo label { display: block; font: 700 14px/1.3 var(--t); margin-bottom: 7px; }
.r-campo input { width: 100%; height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--borde); background: #fff; font: 500 16px/1 var(--c); transition: border-color .15s, box-shadow .15s; }
.r-campo input::placeholder { color: #a3abbb; }
.r-campo input:focus { outline: none; border-color: var(--cielo); box-shadow: 0 0 0 4px rgba(0,156,223,.15); }
.r-campo input[aria-invalid="true"] { border-color: var(--rojo); }
.r-campo__pref { display: flex; align-items: stretch; }
.r-campo__pref span { display: grid; place-items: center; padding: 0 14px; border: 2px solid var(--borde); border-right: 0; border-radius: 14px 0 0 14px; background: var(--fondo); font: 700 15px/1 var(--t); color: var(--suave); }
.r-campo__pref input { border-radius: 0 14px 14px 0; }
.r-campo__clave { position: relative; }
.r-campo__clave input { padding-right: 50px; }
.r-campo__ver { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--suave); cursor: pointer; display: grid; place-items: center; }
.r-campo__ver svg { width: 20px; height: 20px; }
.r-campo__ver.r-si { color: var(--azul); background: #e8f1fb; }
.r-campo__ayuda { margin-top: 6px; font-size: 13px; color: var(--suave); }
.r-reg__err { margin-top: 6px; font-size: 13.5px; color: #c53030; font-weight: 500; }
.r-reg__acepto { position: relative; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--suave); cursor: pointer; }
.r-reg__acepto input { position: absolute; opacity: 0; pointer-events: none; }
.r-reg__acepto .r-addon__caja { margin-top: 1px; }
.r-reg__acepto:has(input:checked) .r-addon__caja { background: var(--azul); border-color: var(--azul); color: #fff; }
.r-reg__acepto input:focus-visible + .r-addon__caja { outline: 3px solid var(--cielo); outline-offset: 2px; }
.r-reg__enviar { width: 100%; margin-top: 6px; }
.r-reg__enviar.r-cargando { opacity: .7; cursor: progress; }
.r-reg__letra { font-size: 13px; color: var(--suave); text-align: center; }
.r-reg__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.r-reg__alerta { margin-top: 18px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; background: #e8f1fb; color: var(--azul); }
.r-reg__alerta--danger { background: #fde8e8; color: #b42318; }
.r-reg__alerta--success { background: #e3f7ea; color: var(--verde); }
.r-reg__resi { margin-top: 20px; max-width: 560px; text-align: center; font-size: 13.5px; color: var(--suave); }

@media (prefers-reduced-motion: reduce) {
    .r-fac__btn, .r-acc__flecha span, .r-plano__ventanas rect, .r-plano__carga, .r-plano__cinta span, .r-prox__badge i, .r-prox__barra b, .r-prox-tarj__cinta { animation: none !important; }
    .r-plano__trazo path { animation: none; stroke-dashoffset: 0; }
}

/* ── ronda 3 ── */
.r-calc__escala { display: flex; justify-content: space-between; margin-top: 6px; font: 700 12px/1 var(--t); color: var(--suave); }
.r-calc__escala span:nth-child(2) { margin-left: auto; margin-right: 10px; }
.r-calc__inf { color: var(--azul); }
.r-calc__incluye { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.r-calc__incluye span { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--t); }
.r-calc__incluye svg { width: 21px; height: 21px; color: var(--verde); flex: none; }
.r-nota--centro { max-width: 760px; margin: 20px auto 0; text-align: center; }
.r-nota a { color: var(--azul); font-weight: 600; text-decoration: underline; }
.r-opc { margin-top: 48px; padding: 28px; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 var(--borde); }
.r-opc__cab h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
.r-opc__rejilla { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 900px) { .r-opc__rejilla { grid-template-columns: repeat(3, 1fr); } }
.r-opc__tarj { position: relative; padding: 22px; border-radius: 20px; background: var(--fondo); }
.r-opc__tarj::after { content: 'Opcional'; position: absolute; top: 20px; right: 20px; padding: 4px 9px; border-radius: 999px; background: #fdf6d8; color: #8a6c00; font: 800 10.5px/1 var(--t); text-transform: uppercase; letter-spacing: .04em; }
.r-opc__tarj h4 { font-size: 18px; margin: 14px 0 12px; padding-right: 70px; }
.r-opc__tarj ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.r-opc__tarj li { display: flex; gap: 8px; font-size: 14.5px; color: var(--suave); line-height: 1.45; }
.r-opc__tarj li svg { width: 17px; height: 17px; flex: none; color: var(--verde); margin-top: 2px; stroke-width: 2.4; }
/* páginas legales */
.r-cabpag--legal { padding-bottom: 54px; }
.r-migas { font-size: 14px; color: rgba(255,255,255,.65) !important; margin: 0 auto 6px !important; }
.r-migas a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.r-legal-sec { padding-top: 56px; }
.r-legal { display: grid; gap: 36px; }
@media (min-width: 1024px) { .r-legal { grid-template-columns: 250px minmax(0, 1fr); gap: 64px; } .r-legal__indice { position: sticky; top: 100px; align-self: start; } }
.r-legal__indice { font-size: 14px; }
.r-legal__indice b { display: block; font: 700 13px/1 var(--t); letter-spacing: .04em; color: var(--suave); margin-bottom: 12px; text-transform: uppercase; }
.r-legal__indice ol { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 8px; color: var(--suave); }
.r-legal__indice a { color: var(--texto); }
.r-legal__indice a:hover { color: var(--azul); }
.r-legal__otros { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--borde); }
.r-legal__otros a { color: var(--azul); font-weight: 600; }
@media (max-width: 1023px) { .r-legal__indice ol { display: none; } }
.r-legal__texto { max-width: 74ch; font-size: 16.5px; line-height: 1.75; }
.r-legal__texto h2 { font-size: 22px; margin: 44px 0 12px; scroll-margin-top: 96px; }
.r-legal__texto h3 { font-size: 17px; margin: 22px 0 8px; }
.r-legal__texto p, .r-legal__texto ul, .r-legal__texto ol, .r-legal__texto table { margin: 0 0 14px; }
.r-legal__texto ul, .r-legal__texto ol { padding-left: 22px; }
.r-legal__texto li { margin-bottom: 6px; }
.r-legal__texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.r-legal__intro { font-size: 18px; padding: 20px 24px; background: var(--fondo); border-radius: 16px; }
.r-legal__aviso { background: #fdf6d8; color: #5c4700; border-radius: 14px; padding: 14px 18px; }
.r-legal__texto table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.r-legal__texto th, .r-legal__texto td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.r-legal__texto th { font: 700 13px/1.3 var(--t); color: var(--suave); }
.r-legal__contacto { margin-top: 40px !important; padding-top: 20px; border-top: 1px solid var(--borde); color: var(--suave); }

/* ════════ Ronda 4 (2026-10-04): portada viva, residencial, flujo y móvil ════════ */
/* portada más viva */
.r-hero__fondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.r-hero__fondo span { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(70px); opacity: .45; animation: r-mancha 18s ease-in-out infinite alternate; }
.r-hero__fondo span:first-child { background: #009cdf; top: -160px; right: -120px; }
.r-hero__fondo span:last-child { background: #ecc31d; bottom: -220px; left: -160px; opacity: .22; animation-duration: 22s; }
@keyframes r-mancha { to { transform: translate(-120px, 80px) scale(1.15); } }
.r-rota { display: inline-block; background: linear-gradient(90deg, var(--oro), #fff2a8, var(--oro)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: r-brillo 4s linear infinite; transition: opacity .35s, transform .35s; }
.r-rota.r-sale { opacity: 0; transform: translateY(-14px); }
.r-rota.r-entra { opacity: 0; transform: translateY(14px); transition: none; }
@keyframes r-brillo { to { background-position: -200% 0; } }
.r-tel { animation: r-flotar-tel 7s ease-in-out infinite; }
@keyframes r-flotar-tel { 50% { transform: translateY(-10px) rotate(-1deg); } }
.r-tel__toast { position: absolute; left: 12px; right: 12px; top: 38px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 16px 30px -12px rgba(6,22,44,.45); transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .3s; }
.r-tel__toast.r-si { transform: none; opacity: 1; }
.r-tel__toast b { display: block; font: 700 13px/1.2 var(--t); }
.r-tel__toast small { display: block; font-size: 11.5px; color: var(--suave); }
.r-tel__toast .r-ic { width: 32px; height: 32px; border-radius: 10px; }
.r-tel__toast .r-ic svg { width: 17px; height: 17px; }
.r-tel { position: relative; }
.r-tel__brillo { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); background-size: 250% 100%; animation: r-barrido 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes r-barrido { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* móvil: el teléfono más chico y las tarjetas flotantes también se ven */
@media (max-width: 639px) {
    .r-hero { padding-top: 104px; }
    .r-hero h1 { font-size: clamp(32px, 9.4vw, 40px); }
    .r-hero__sub { font-size: 16px; }
    .r-hero__conf { gap: 8px 14px; font-size: 13.5px; }
    .r-hero__vis { padding: 10px 0 0; margin-inline: -8px; }
    .r-tel { width: 236px; border-radius: 34px; padding: 12px 11px 10px; }
    .r-tel__saldo b { font-size: 23px; }
    .r-tel__fila:nth-of-type(3) { display: none; }
    .r-flota { display: flex; font-size: 11.5px; padding: 7px 10px 7px 7px; gap: 7px; border-radius: 13px; }
    .r-flota small { font-size: 10.5px; }
    .r-flota .r-ic { width: 28px; height: 28px; border-radius: 9px; }
    .r-flota .r-ic svg { width: 15px; height: 15px; }
    .r-flota--1 { left: 0; top: 10%; }
    .r-flota--2 { right: 0; top: 48%; }
    .r-flota--3 { left: 2%; bottom: 4%; }
    .r-datos__in { grid-template-columns: 1fr 1fr; }
    .r-dato { padding: 20px 10px; }
    .r-sec { padding: 60px 0; }
    .r-cabsec { margin-bottom: 32px; }
    .r-cabsec h2 { font-size: 28px; }
    .r-comp { padding-bottom: 70px; }
    .r-comp__admin { left: 50%; right: auto; transform: translateX(-50%) translateY(12px); width: max-content; }
    .r-comp[data-paso="2"] .r-comp__admin, .r-comp[data-paso="3"] .r-comp__admin { transform: translateX(-50%); }
    .r-pasos-nav button { padding: 7px 11px 7px 7px; font-size: 12.5px; }
    .r-acc__tipos { gap: 6px; }
    .r-acc__tipos button { padding: 8px 11px; font-size: 12.5px; }
    .r-calc__total span { font-size: 44px; }
}

/* cifras que cuentan */
.r-dato b { font-variant-numeric: tabular-nums; }

/* "Deja de perseguir cuotas": tachado y flujo vivo */
.r-tacha { position: relative; color: var(--suave); white-space: nowrap; }
.r-tacha::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 5px; border-radius: 3px; background: var(--rojo); transform: rotate(-3deg); transform-origin: left center; }
.r-tacha.r-anim::after { transform: rotate(-3deg) scaleX(0); transition: transform .8s cubic-bezier(.6,0,.2,1) .3s; }
.r-tacha.r-anim.r-visto::after { transform: rotate(-3deg) scaleX(1); }
.r-flujo { position: relative; }
.r-flujo__pista { display: none; }
.r-flujo__paso { transition: transform .4s, box-shadow .4s; }
.r-flujo__num { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); color: var(--suave); font: 800 13px/1 var(--t); transition: background .3s, color .3s; }
.r-flujo__paso .r-ic { transition: transform .4s; }
.r-flujo__vivo { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: var(--fondo); font-size: 13px; min-height: 48px; position: relative; overflow: hidden; }
.r-flujo__vivo b { font: 700 13px/1.25 var(--t); }
.r-flujo[data-activo="0"] .r-flujo__paso:nth-of-type(1), .r-flujo[data-activo="1"] .r-flujo__paso:nth-of-type(2),
.r-flujo[data-activo="2"] .r-flujo__paso:nth-of-type(3), .r-flujo[data-activo="3"] .r-flujo__paso:nth-of-type(4) { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--oro), 0 24px 44px -26px rgba(6,22,44,.5); }
.r-flujo[data-activo="0"] .r-flujo__paso:nth-of-type(1) .r-flujo__num, .r-flujo[data-activo="1"] .r-flujo__paso:nth-of-type(2) .r-flujo__num,
.r-flujo[data-activo="2"] .r-flujo__paso:nth-of-type(3) .r-flujo__num, .r-flujo[data-activo="3"] .r-flujo__paso:nth-of-type(4) .r-flujo__num { background: var(--oro); color: var(--noche); }
.r-flujo[data-activo="0"] .r-flujo__paso:nth-of-type(1) .r-ic, .r-flujo[data-activo="1"] .r-flujo__paso:nth-of-type(2) .r-ic,
.r-flujo[data-activo="2"] .r-flujo__paso:nth-of-type(3) .r-ic, .r-flujo[data-activo="3"] .r-flujo__paso:nth-of-type(4) .r-ic { transform: scale(1.12) rotate(-6deg); }
/* 1: hojas que salen volando */
.r-vivo-fact__hoja { position: relative; width: 14px; height: 18px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #c9d4e4; flex: none; margin-right: -14px; }
.r-vivo-fact__hoja:nth-child(3) { margin-right: 4px; }
.r-flujo[data-activo="0"] .r-vivo-fact__hoja { animation: r-hoja 1.2s ease-in-out infinite; }
.r-flujo[data-activo="0"] .r-vivo-fact__hoja:nth-child(2) { animation-delay: .3s; }
.r-flujo[data-activo="0"] .r-vivo-fact__hoja:nth-child(3) { animation-delay: .6s; }
@keyframes r-hoja { 0% { transform: none; opacity: 1; } 70% { transform: translate(26px, -16px) rotate(18deg); opacity: 0; } 100% { opacity: 0; } }
/* 2: barra que sube */
.r-vivo-sube__barra { flex: none; width: 64px; height: 8px; border-radius: 99px; background: #e3e8f1; overflow: hidden; }
.r-vivo-sube__barra i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cielo), var(--azul)); border-radius: inherit; }
.r-flujo[data-activo="1"] .r-vivo-sube__barra i { animation: r-llenar 1.6s ease-in-out both; }
.r-vivo-sube b { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); }
.r-vivo-sube b svg { width: 15px; height: 15px; stroke-width: 2.6; }
/* 3: campana que suena */
.r-vivo-aviso__campana { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #e9f8ef; color: #0d6b34; }
.r-vivo-aviso__campana svg { width: 17px; height: 17px; }
.r-flujo[data-activo="2"] .r-vivo-aviso__campana { animation: r-campana .9s ease-in-out infinite; }
@keyframes r-campana { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -14deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
/* 4: barras que crecen */
.r-vivo-cuentas { align-items: flex-end; }
.r-vivo-cuentas span { flex: none; width: 9px; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--cielo), var(--azul)); transform-origin: bottom; }
.r-flujo[data-activo="3"] .r-vivo-cuentas span { animation: r-crecer .7s cubic-bezier(.2,.9,.3,1.2) both; }
.r-flujo[data-activo="3"] .r-vivo-cuentas span:nth-child(2) { animation-delay: .1s; } .r-flujo[data-activo="3"] .r-vivo-cuentas span:nth-child(3) { animation-delay: .2s; } .r-flujo[data-activo="3"] .r-vivo-cuentas span:nth-child(4) { animation-delay: .3s; }
@keyframes r-crecer { from { transform: scaleY(0); } }
.r-vivo-cuentas b { margin-left: 6px; align-self: center; }
/* la pista: horizontal en escritorio, vertical en el celular */
@media (min-width: 1080px) {
    .r-flujo { padding-top: 34px; }
    .r-flujo__pista { display: block; position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 4px; border-radius: 4px; background: var(--borde); }
    .r-flujo__pista i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--oro), var(--oro-2)); transition: width .6s ease; width: 100%; }
    .r-flujo__pista b { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 5px rgba(236,195,29,.25); transition: left .6s ease; left: 100%; }
    .r-flujo[data-activo="0"] .r-flujo__pista i { width: 0; } .r-flujo[data-activo="0"] .r-flujo__pista b { left: 0; }
    .r-flujo[data-activo="1"] .r-flujo__pista i { width: 33.33%; } .r-flujo[data-activo="1"] .r-flujo__pista b { left: 33.33%; }
    .r-flujo[data-activo="2"] .r-flujo__pista i { width: 66.66%; } .r-flujo[data-activo="2"] .r-flujo__pista b { left: 66.66%; }
    .r-flujo__paso:not(:last-child)::after { display: none; }
}
@media (max-width: 1079px) {
    .r-flujo { padding-left: 26px; }
    .r-flujo__pista { display: block; position: absolute; left: 6px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--borde); }
    .r-flujo__pista i { position: absolute; left: 0; right: 0; top: 0; border-radius: inherit; background: linear-gradient(180deg, var(--oro), var(--oro-2)); transition: height .6s ease; height: 100%; }
    .r-flujo__pista b { position: absolute; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 5px rgba(236,195,29,.25); transition: top .6s ease; top: 100%; }
    .r-flujo[data-activo="0"] .r-flujo__pista i { height: 0; } .r-flujo[data-activo="0"] .r-flujo__pista b { top: 0; }
    .r-flujo[data-activo="1"] .r-flujo__pista i { height: 33.33%; } .r-flujo[data-activo="1"] .r-flujo__pista b { top: 33.33%; }
    .r-flujo[data-activo="2"] .r-flujo__pista i { height: 66.66%; } .r-flujo[data-activo="2"] .r-flujo__pista b { top: 66.66%; }
}
@media (min-width: 720px) and (max-width: 1079px) { .r-flujo { padding-left: 0; } .r-flujo__pista { display: none; } }

/* panel de la administración: barras que crecen al verse */
.r-panel.r-anim .r-panel__barras span { transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.9,.3,1.1); }
.r-panel.r-anim.r-visto .r-panel__barras span { transform: none; }
.r-panel.r-anim.r-visto .r-panel__barras span:nth-child(2) { transition-delay: .08s; } .r-panel.r-anim.r-visto .r-panel__barras span:nth-child(3) { transition-delay: .16s; }
.r-panel.r-anim.r-visto .r-panel__barras span:nth-child(4) { transition-delay: .24s; } .r-panel.r-anim.r-visto .r-panel__barras span:nth-child(5) { transition-delay: .32s; } .r-panel.r-anim.r-visto .r-panel__barras span:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    .r-hero__fondo span, .r-rota, .r-tel, .r-tel__brillo { animation: none !important; }
}
.r-campo__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.r-campo__olvido { font: 600 13.5px/1 var(--t); color: var(--azul); margin-bottom: 7px; }
.r-reg__otros { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); text-align: center; }
.r-reg__otros a { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1 var(--t); color: var(--suave); }
.r-reg__otros a:hover { color: var(--azul); }
.r-reg__otros svg { width: 16px; height: 16px; }
.r-reg--entrar .r-reg__caja { max-width: 460px; }

/* ── ronda 5: carruseles en el celular ── */
.r-desliza { display: none; }
@media (max-width: 639px) {
    .r-desliza { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -18px 0 12px; font: 700 13px/1 var(--t); color: var(--azul); }
    .r-desliza svg { width: 16px; height: 16px; animation: r-empuje 1.4s ease-in-out infinite; }
    @keyframes r-empuje { 50% { transform: translateX(5px); } }
    .r-carrusel { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .r-carrusel::-webkit-scrollbar { display: none; }
    .r-carrusel > * { scroll-snap-align: start; }
    #r-funciones { grid-template-rows: auto auto; }
    .r-fun { padding: 18px; }
    .r-fun p { font-size: 14px; }
    .r-opc { padding: 22px 16px; }
    .r-opc__rejilla.r-carrusel { margin-inline: -16px; }
    .r-carrusel-puntos { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
    .r-carrusel-puntos i { width: 7px; height: 7px; border-radius: 99px; background: #c9d4e4; transition: width .25s, background .25s; }
    .r-carrusel-puntos i.r-si { width: 20px; background: var(--azul); }
}

/* ── login y registro: foto real de fondo + escena de casitas al pie (2026-10-04) ──
   Foto: Lia Angg en Unsplash (licencia Unsplash), assets/resi_web/residencial.* */
.r-reg__lado--foto { background-color: var(--noche);
    background-image: linear-gradient(180deg, rgba(6,22,44,.82) 0%, rgba(6,22,44,.9) 28%, rgba(6,22,44,.93) 50%, rgba(6,22,44,.9) 74%, rgba(6,22,44,.62) 100%), url(residencial.jpg);
    background-image: linear-gradient(180deg, rgba(6,22,44,.82) 0%, rgba(6,22,44,.9) 28%, rgba(6,22,44,.93) 50%, rgba(6,22,44,.9) 74%, rgba(6,22,44,.62) 100%), image-set(url(residencial.webp) type("image/webp"), url(residencial.jpg) type("image/jpeg"));
    background-size: cover; background-position: center 40%; }
@media (min-width: 960px) { .r-reg__lado--foto { padding-bottom: 36px; } }
@media (max-width: 959px) {
    .r-reg__lado--foto { background-image: linear-gradient(180deg, rgba(6,22,44,.9), rgba(6,22,44,.78) 60%, rgba(6,22,44,.95)), url(residencial-800.webp); }
}
.r-reg__lado--foto .r-reg__lado-txt, .r-reg__lado--foto .r-reg__ayuda { text-shadow: 0 2px 14px rgba(3,10,22,.75); }