// ── Simulador de Leasing Automotriz (tema automove) ────────────────────────── // Pegá todo este contenido en el campo "Código React" del CMS (sin imports). // useState/useEffect/useMemo/useRef y Recharts vienen del preamble. // El componente DEBE llamarse App (ya lo es). No usa Recharts. // ── Íconos SVG inline (reemplazan a lucide-react) ───────────────────────────── const RotateCw = ({size=16,strokeWidth=2,style,className}) => ; const Car = ({size=16,strokeWidth=2,style,className}) => ; const Wallet = ({size=16,strokeWidth=2,style,className}) => ; const CalendarDays = ({size=16,strokeWidth=2,style,className}) => ; const Percent = ({size=16,strokeWidth=2,style,className}) => ; const KeyRound = ({size=16,strokeWidth=2,style,className}) => ; const RefreshCw = ({size=16,strokeWidth=2,style,className}) => ; const Info = ({size=16,strokeWidth=2,style,className}) => ; const ChevronDown = ({size=16,strokeWidth=2,style,className}) => ; const Building2 = ({size=16,strokeWidth=2,style,className}) => ; const User = ({size=16,strokeWidth=2,style,className}) => ; const PlayCircle = ({size=16,strokeWidth=2,style,className}) => ; const AlertTriangle= ({size=16,strokeWidth=2,style,className}) => ; const Check = ({size=16,strokeWidth=2,style,className}) => ; const Pencil = ({size=16,strokeWidth=2,style,className}) => ; const Gauge = ({size=16,strokeWidth=2,style,className}) => ; const Calculator = ({size=16,strokeWidth=2,style,className}) => ; const TrendingDown = ({size=16,strokeWidth=2,style,className}) => ; const Sparkles = ({size=16,strokeWidth=2,style,className}) => ; /* ===== AutoMove · azul ===== */ const C = { bg: "#e9eff8", card: "#ffffff", ink: "#0c1a2e", body: "#3a4a5c", mut: "#6a7a8d", mut2: "#9aa7b6", line: "#e2e9f3", soft: "#f1f5fb", blue: "#2563eb", blueDeep: "#1d4ed8", navy: "#12305a", sky: "#dbe8ff", good: "#16a34a", amber: "#e08a1e", red: "#dc2626", }; const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const fmt = (n) => `$ ${Math.round(n).toLocaleString("es-AR")}`; const IVA = 0.21; const tips = { valor: "Precio del vehículo 0 km. El leasing puede financiar el 100% del valor.", anticipo: "Entrega inicial opcional. En leasing suele ser baja o cero (financia todo).", plazo: "Meses del contrato. Suele ir de 12 a 60. Cuanto más largo, menor la cuota pero más interés total.", tna: "Tasa Nominal Anual pactada con la entidad. Cambiala por la que te ofrezcan.", vr: "Valor residual = la opción de compra al final. Habitual: 10% a 20% del valor. Cuanto mayor, más baja la cuota mensual.", }; function useCount(target, dur = 700) { const [v, setV] = useState(target); const ref = useRef(target); useEffect(() => { const from = ref.current, start = performance.now(); let raf; const tick = (t) => { const p = Math.min(1, (t - start) / dur); const e = 1 - Math.pow(1 - p, 3); setV(from + (target - from) * e); if (p < 1) raf = requestAnimationFrame(tick); else ref.current = target; }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, dur]); return v; } function leaseCanon(cap, vr, i, n) { if (i === 0) return (cap - vr) / n; return (cap - vr / Math.pow(1 + i, n)) * i / (1 - Math.pow(1 + i, -n)); } function loanCuota(cap, i, n) { if (i === 0) return cap / n; return cap * i / (1 - Math.pow(1 + i, -n)); } function InfoTip({ text }) { const [o, setO] = useState(false); return setO(true)} onMouseLeave={() => setO(false)}> {o && {text}} ; } function EditNum({ value, set, fmt: f, min, max }) { const [ed, setEd] = useState(false); const [t, setT] = useState(""); const commit = () => { const n = parseFloat(String(t).replace(/[^\d.,-]/g, "").replace(/\./g, "").replace(",", ".")); if (!isNaN(n)) set(clamp(n, min, max)); setEd(false); }; return

{ed ? setT(e.target.value)} onBlur={commit} onKeyDown={e => { if (e.key === "Enter") commit(); if (e.key === "Escape") setEd(false); }} /> : }

; } function App() { const [valor, setValor] = useState(35000000); const [anticipo, setAnticipo] = useState(0); const [plazo, setPlazo] = useState(36); const [tna, setTna] = useState(0.35); const [vrPct, setVrPct] = useState(0.20); const [perfil, setPerfil] = useState("empresa"); const [ganancias, setGanancias] = useState(0.35); const [adv, setAdv] = useState(false); const [methodOpen, setMethodOpen] = useState(false); const roadRef = useRef(null); const dragRef = useRef(false); const [dragging, setDragging] = useState(false); const PMIN = 12, PMAX = 60; const setFromX = (x) => { const el = roadRef.current; if (!el) return; const r = el.getBoundingClientRect(); const pct = clamp((x - r.left) / r.width, 0, 1); setPlazo(clamp(Math.round(PMIN + pct * (PMAX - PMIN)), PMIN, PMAX)); }; const startDrag = (e) => { dragRef.current = true; setDragging(true); setFromX(e.clientX); }; const moveDrag = (e) => { if (dragRef.current) setFromX(e.clientX); }; const endDrag = () => { dragRef.current = false; setDragging(false); }; const R = useMemo(() => { const cap = Math.max(0, valor - anticipo); const vr = valor * vrPct; const i = tna / 12; const canonNeto = leaseCanon(cap, vr, i, plazo); const canonIva = canonNeto * IVA; const canonTotal = canonNeto + canonIva; const vrPagar = vr * (1 + IVA); const interes = canonNeto * plazo + vr - cap; const totalCanones = canonTotal * plazo; const totalIva = canonIva * plazo; const totalQuedarte = anticipo + totalCanones + vrPagar; // prendario equivalente (sin IVA, sin residual, mismo capital) const cuotaPrend = loanCuota(cap, i, plazo); const totalIntPrend = cuotaPrend * plazo - cap; // perfil const empresa = perfil === "empresa"; const g = empresa ? ganancias : 0; const ivaRecupMes = empresa ? canonIva : 0; const escudoMes = empresa ? canonNeto * g : 0; const efectivoMes = empresa ? canonNeto - escudoMes : canonTotal; // costo real mensual const ahorroMes = canonTotal - efectivoMes; const efectivoTotal = efectivoMes * plazo; const ahorroTotal = ahorroMes * plazo; const prendEfectMes = empresa ? cuotaPrend - (totalIntPrend / plazo) * g : cuotaPrend; const ganaLeasing = efectivoMes <= prendEfectMes; return { cap, vr, canonNeto, canonIva, canonTotal, vrPagar, interes, totalCanones, totalIva, totalQuedarte, cuotaPrend, totalIntPrend, empresa, g, ivaRecupMes, escudoMes, efectivoMes, ahorroMes, efectivoTotal, ahorroTotal, prendEfectMes, ganaLeasing }; }, [valor, anticipo, plazo, tna, vrPct, perfil, ganancias]); const aCanon = useCount(R.canonTotal); const aEfect = useCount(R.efectivoMes); const aAhorro = useCount(R.ahorroMes); const reset = () => { setValor(35000000); setAnticipo(0); setPlazo(36); setTna(0.35); setVrPct(0.20); setPerfil("empresa"); setGanancias(0.35); setAdv(false); }; const carPct = (plazo - 12) / (60 - 12); const carLeft = 6 + carPct * 88; // % return (

AutoMove · Herramientas

Simulador de leasing automotriz

Calculá tu canon mensual, la opción de compra final y compará leasing contra crédito prendario. Con el detalle del IVA y la deducción que casi nadie te explica.

{/* PERFIL */}

¿Para quién es el auto?

{/* INPUTS */}

Valor del vehículo Entrega inicial Tasa (TNA) setTna(v / 100)} fmt={(v) => `${v.toFixed(1).replace(/\.0$/, "")}%`} min={0} max={120} /> Valor residual setVrPct(v / 100)} fmt={(v) => `${Math.round(v)}%`} min={5} max={50} />

{/* RESULTADO HERO */}

Canon mensual {perfil === "empresa" ? "(con IVA, recuperable)" : "(IVA incluido)"}

{fmt(aCanon)}

Neto {fmt(R.canonNeto)} + IVA {fmt(R.canonIva)} · por {plazo} meses

Opción de compra final

{fmt(R.vrPagar)}

{Math.round(vrPct * 100)}% del valor + IVA

{/* COSTO REAL — cambia fuerte según el perfil */}

Tu costo real {R.empresa ? "como empresa" : "como consumidor final"}

Costo real por mes

{fmt(aEfect)}

{R.empresa ? `en caja pagás ${fmt(R.canonTotal)}` : "= lo que pagás en caja"}

Ahorro fiscal / mes

{R.ahorroMes > 1 ? fmt(aAhorro) : "$ 0"}

{R.empresa ? "IVA + Ganancias" : "no aplica"}

{R.empresa ? ( <>

IVA recuperado{fmt(R.ivaRecupMes)}/mes

Escudo de Ganancias{fmt(R.escudoMes)}/mes

Alícuota de Ganancias setGanancias(v / 100)} fmt={(v) => `${Math.round(v)}%`} min={0} max={45} />

Pagás {fmt(R.canonTotal)} en caja por mes, pero recuperás el IVA como crédito fiscal y deducís el canon de Ganancias. Tu costo real baja a {fmt(R.efectivoMes)} y en {plazo} meses ahorrás {fmt(R.ahorroTotal)}.

) : (

Como consumidor final, tu costo real es lo que pagás: el IVA no se recupera y no deducís de Ganancias. Si fueras empresa (RI), tu costo real bajaría a ~{fmt(R.canonNeto * 0.65)}/mes.

)}

{/* DIFERENCIAL: LA RUTA DEL LEASING */}

Elegí el plazo: arrastrá el auto

Te lo quedás + {fmt(R.vrPagar)}

Devolvés / renovás $0

{[12, 24, 36, 48, 60].map((m) => { const lp = 6 + ((m - 12) / 48) * 88; return

{m}

; })}
Hoy

{plazo} meses

Arrastrá el auto: cuanto más lejos llega, más cuotas y más baja la cuota mensual, pero más interés total. Al final del camino, la opción de compra.

{/* DESGLOSE + TOTALES */}

Cómo se compone el canon

Cuota neta (capital + interés){fmt(R.canonNeto)}

IVA (21%){fmt(R.canonIva)}{R.empresa ? " · recuperable" : ""}

Canon mensual{fmt(R.canonTotal)}

IVA total del plan ({plazo}){fmt(R.totalIva)}

Opción de compra{fmt(R.vrPagar)}

Total si te quedás el auto{fmt(R.totalQuedarte)}

{/* COMPARACIÓN */}

Leasing vs. prendario costo real/mes

Leasing
{fmt(R.efectivoMes)}
en caja {fmt(R.canonTotal)} + opción de compra

vs

Prendario
{fmt(R.prendEfectMes)}
en caja {fmt(R.cuotaPrend)} · ya sos dueño

{R.empresa ? Como empresa, el leasing gana por costo real: recuperás el IVA y deducís el canon completo de Ganancias (el prendario solo deja deducir los intereses). Diferencia: {fmt(Math.abs(R.efectivoMes - R.prendEfectMes))}/mes. : Como consumidor final, el prendario sale más barato: en el leasing el IVA es un costo que no recuperás. Diferencia: {fmt(Math.abs(R.efectivoMes - R.prendEfectMes))}/mes. El leasing igual te sirve por la cuota baja y la flexibilidad de devolver o renovar.}

{/* HONESTIDAD */}

Para tener en cuenta

El IVA del canon solo lo recuperás si sos responsable inscripto. Como consumidor final —o monotributista— es un costo más.

Mirá el CFT, no solo la TNA: incluye gastos, sellados y seguros que pueden no estar acá.

La opción de compra (valor residual) no es obligatoria: podés devolver el auto o renovar.

El leasing suele estar pensado para 0 km y para empresas; el seguro y la patente pueden ir aparte (a veces los gestiona la entidad).

Las tasas cambian seguido y según la entidad. Pedí el número final por escrito.

{methodOpen &&
El canon se calcula como un préstamo con cuota final (valor residual): las cuotas amortizan el valor financiado menos el residual, más los intereses a la tasa pactada, y se les suma el IVA del 21%. La opción de compra es el valor residual (más IVA). Comparamos contra un prendario por el mismo capital y plazo, sin residual ni IVA en la cuota. Es una estimación; el número final lo define la entidad.
}

); } function CanonBar({ segs }) { const tot = segs.reduce((s, x) => s + Math.max(0, x.v), 0) || 1; return <>
{segs.map((s, i) => s.v > 0 &&
)}

{segs.map((s, i) => {s.l})}
; } function MiniCar() { return ; } function CarHero() { return ; } const css = ` @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@500;600&display=swap'); * { box-sizing: border-box; } .root { min-height: 100%; width: 100%; background: ${C.bg}; color: ${C.ink}; font-family: 'Hanken Grotesk', sans-serif; } .band { position: relative; background: linear-gradient(120deg, ${C.blueDeep}, ${C.blue} 70%); color: #fff; padding: 34px 20px 120px; overflow: hidden; } .band-in { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; } .kick { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #bcd4ff; margin-bottom: 10px; } .band h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; } .band h1 span { color: #bcd4ff; } .sub { font-size: 15px; line-height: 1.55; color: #ffffff !important; opacity: 1; max-width: 560px; margin: 14px 0 0; } .car-hero { position: absolute; right: -10px; bottom: 14px; width: clamp(220px, 34vw, 380px); opacity: 0.95; z-index: 1; } .car-hero .wheel { transform-box: fill-box; transform-origin: center; } .wrap { max-width: 820px; margin: -92px auto 0; padding: 0 16px 56px; position: relative; z-index: 3; } .card { background: ${C.card}; border: 1px solid ${C.line}; border-radius: 18px; padding: 22px; box-shadow: 0 16px 40px -22px rgba(12,26,46,0.35); margin-bottom: 16px; } .ct { display: flex; align-items: center; gap: 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: ${C.ink}; margin-bottom: 16px; } .perfil { background: ${C.card}; border: 1px solid ${C.line}; border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 16px 40px -22px rgba(12,26,46,0.35); } .perfil-l { font-size: 12.5px; font-weight: 700; color: ${C.mut}; display: block; margin-bottom: 10px; } .perfil-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 520px) { .perfil-seg { grid-template-columns: 1fr; } } .perfil-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; background: ${C.soft}; border: 1.5px solid ${C.line}; color: ${C.mut}; border-radius: 11px; padding: 12px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: 0.16s; } .perfil-seg button.on { background: ${C.blue}; border-color: ${C.blue}; color: #fff; } .in-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .in-grid { grid-template-columns: 1fr; } } .in-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: ${C.mut}; font-weight: 600; margin-bottom: 7px; } .in-l svg { color: ${C.blue}; } .fld-box { display: flex; align-items: center; gap: 8px; background: ${C.soft}; border: 1.5px solid ${C.line}; border-radius: 12px; padding: 12px 14px; transition: 0.15s; } .fld-box:hover { border-color: ${C.blue}66; } .fld-box:focus-within { border-color: ${C.blue}; background: #fff; } .fld-v { flex: 1; min-width: 0; text-align: left; background: none; border: none; font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 600; color: ${C.ink}; cursor: text; padding: 0; } .fld-in { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 600; color: ${C.ink}; } .fld-pen { color: ${C.mut2}; flex-shrink: 0; } .itip { position: relative; display: inline-flex; vertical-align: middle; } .itip-b { width: 15px; height: 15px; border-radius: 50%; border: 1px solid ${C.blue}66; background: ${C.sky}; color: ${C.blue}; font-size: 9.5px; font-weight: 700; cursor: pointer; display: grid; place-items: center; font-family: 'Geist Mono', monospace; padding: 0; line-height: 1; } .itip-bub { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 210px; max-width: 60vw; background: ${C.ink}; color: #e7eefb; border-radius: 10px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; font-weight: 400; box-shadow: 0 12px 30px rgba(0,0,0,0.3); z-index: 60; text-transform: none; letter-spacing: normal; } .hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, ${C.navy}, ${C.blueDeep}); border: none; color: #fff; } .hero-lbl { font-size: 13px; color: #bcd4ff; font-weight: 600; } .hero-val { font-family: 'Geist Mono', monospace; font-size: clamp(34px, 7vw, 50px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 4px 0; } .hero-sub { font-size: 12.5px; color: #aac6f5; } .hero-opt { text-align: right; } .hero-opt-l { font-size: 12px; color: #bcd4ff; } .hero-opt-v { font-family: 'Geist Mono', monospace; font-size: 24px; font-weight: 600; margin-top: 2px; } .hero-opt-s { font-size: 11.5px; color: #aac6f5; } .route { position: relative; height: 150px; margin: 8px 0 2px; cursor: grab; user-select: none; } .route:active { cursor: grabbing; } .road { position: absolute; left: 0; right: 0; top: 88px; height: 16px; background: ${C.soft}; border-radius: 8px; border: 1px solid ${C.line}; } .road-line { position: absolute; top: 50%; left: 8px; right: 8px; border-top: 2px dashed ${C.mut2}; opacity: 0.45; } .tick { position: absolute; top: 82px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .tick i { width: 2px; height: 28px; background: ${C.line}; } .tick span { font-family: 'Geist Mono', monospace; font-size: 10px; color: ${C.mut}; margin-top: 4px; } .start-lbl { position: absolute; left: 6%; top: 118px; transform: translateX(-50%); font-size: 10px; color: ${C.mut2}; pointer-events: none; } .carwrap { position: absolute; top: 60px; transform: translateX(-50%); cursor: grab; touch-action: none; } .carwrap:active { cursor: grabbing; } .car { width: 66px; height: auto; display: block; filter: drop-shadow(0 4px 6px rgba(12,26,46,0.25)); pointer-events: none; } .car .wheel { transform-box: fill-box; transform-origin: center; } .carwrap.go .wheel { animation: spin 0.45s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .car-bubble { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: ${C.blue}; color: #fff; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 9px; white-space: nowrap; box-shadow: 0 4px 12px rgba(37,99,235,0.4); pointer-events: none; } .car-bubble small { font-size: 9.5px; opacity: 0.85; font-family: 'Hanken Grotesk'; } .car-bubble::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: ${C.blue}; } .fork { position: absolute; right: 1%; top: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; } .branch { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 6px 9px; border-radius: 9px; white-space: nowrap; } .branch b { font-family: 'Geist Mono', monospace; margin-left: 2px; } .branch.buy { background: #e6f6ec; color: ${C.good}; } .branch.ret { background: ${C.soft}; color: ${C.mut}; } .route-foot { font-size: 12px; color: ${C.body}; line-height: 1.5; margin-top: 8px; } .route-foot b { color: ${C.ink}; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 760px) { .duo { grid-template-columns: 1fr; } } .duo .card { margin-bottom: 0; } .real { background: linear-gradient(120deg, #0c1a2e, #163a76); border: none; color: #fff; } .real .ct { color: #fff; } .real-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; } @media (max-width: 560px) { .real-grid { grid-template-columns: 1fr; } } .real-tile { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 15px 16px; } .rt-l { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #bcd4ff; } .rt-v { font-family: 'Geist Mono', monospace; font-size: clamp(26px, 5vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 2px; } .rt-s { font-size: 11px; color: #9fbdec; } .real-tile.save .rt-v { color: #7ee2a8; } .real-break { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: flex-end; } .real-break > div { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 9px 13px; font-size: 11.5px; color: #cfe0ff; } .real-break > div b { display: block; font-family: 'Geist Mono', monospace; color: #fff; font-size: 14px; margin-top: 3px; } .real-break .ga { display: flex; flex-direction: column; gap: 6px; background: none; padding: 0; } .real-break .ga > span { font-size: 11.5px; color: #cfe0ff; } .real-break .ga .fld-box { background: rgba(255,255,255,0.95); border-color: transparent; padding: 8px 12px; } .real-break .ga .fld-v, .real-break .ga .fld-in { color: ${C.ink}; font-size: 15px; } .real-break .ga .fld-pen { color: ${C.mut}; } .real-note { font-size: 12.5px; color: #cfe0ff; line-height: 1.55; margin-top: 14px; } .real-note b { color: #fff; } .teaser-btn { background: #fff; color: ${C.blueDeep}; border: none; border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 4px; } .ct-tag { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; color: ${C.blue}; background: ${C.sky}; padding: 3px 8px; border-radius: 6px; } .row.sub { border-top: 1px solid ${C.line}; padding-top: 9px; font-weight: 600; } .row.sub b { color: ${C.blueDeep}; } .bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; margin-bottom: 10px; } .bar-lg { display: flex; gap: 14px; font-size: 11.5px; color: ${C.mut}; margin-bottom: 12px; } .bar-lg span { display: inline-flex; align-items: center; gap: 5px; } .bar-lg i { width: 9px; height: 9px; border-radius: 2px; } .rows { display: flex; flex-direction: column; gap: 9px; } .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: ${C.body}; } .row b { font-family: 'Geist Mono', monospace; color: ${C.ink}; } .row.total { border-top: 1px solid ${C.line}; padding-top: 9px; font-weight: 700; } .row.total b { font-size: 16px; color: ${C.blueDeep}; } .vs { display: flex; align-items: center; gap: 10px; } .vscard { flex: 1; background: ${C.soft}; border: 1.5px solid ${C.line}; border-radius: 13px; padding: 14px; text-align: center; } .vscard.on { background: #eef4ff; border-color: ${C.blue}; } .vs-h { font-size: 12px; font-weight: 700; color: ${C.mut}; } .vs-c { font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 600; color: ${C.ink}; margin: 4px 0; } .vs-s { font-size: 10.5px; color: ${C.mut}; line-height: 1.35; } .vs-x { font-family: 'Archivo'; font-weight: 800; color: ${C.mut2}; font-size: 13px; } .verdict { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; border-radius: 12px; padding: 13px 15px; margin-top: 14px; } .verdict svg { flex-shrink: 0; margin-top: 1px; } .verdict.g { background: #e6f6ec; color: #14663f; } .verdict.g svg { color: ${C.good}; } .verdict.p { background: #eef4ff; color: ${C.navy}; } .verdict.p svg { color: ${C.blue}; } .verdict b { font-weight: 700; } .risk { background: #fff7ec; border: 1px solid #f3dcb6; border-radius: 16px; padding: 18px 20px; margin: 16px 0; } .risk-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-family: 'Archivo'; font-size: 14px; color: ${C.amber}; margin-bottom: 12px; } .risk ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .risk li { font-size: 13px; color: ${C.body}; line-height: 1.45; } .risk b { color: ${C.ink}; font-weight: 700; } .method { width: 100%; display: flex; align-items: center; gap: 8px; background: ${C.card}; border: 1px solid ${C.line}; border-radius: 12px; color: ${C.mut}; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 13px 16px; cursor: pointer; } .method .rot { transform: rotate(180deg); } .method svg { transition: transform 0.25s; } .method-b { font-size: 12.5px; color: ${C.body}; line-height: 1.55; padding: 12px 16px 4px; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .band { padding: 28px 16px 92px; } .band h1 { font-size: clamp(24px, 7.5vw, 32px); line-height: 1.1; } .sub { font-size: 13.5px; } .car-hero { position: relative; right: auto; bottom: auto; display: block; width: 168px; height: auto; margin: 16px auto 0; opacity: 1; } .wrap { margin: -66px auto 0; padding: 0 12px 44px; } .card { padding: 16px; border-radius: 14px; } .hero { flex-direction: column; align-items: stretch; gap: 14px; } .hero-opt { text-align: left; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 12px; } .real-grid { grid-template-columns: 1fr; } .real-break { gap: 8px; } .real-break > div { flex: 1 1 100%; } .route { height: 138px; } .branch { font-size: 9.5px; padding: 5px 7px; } } @media (max-width: 380px) { .band h1 { font-size: 23px; } .vs { flex-direction: column; } .vs-x { transform: rotate(90deg); } } `;

Simulador de Leasing Automotor