Machine Readiness
Stored receipt and evidence
24
80
0
0
0
Top Sites
Supefina | Plataforma de pagos en LATAM
Samples
Offer samples
No stored offer samples.
Samples
Action samples
No stored action samples.
Samples
Product samples
No stored product samples.
Document
robots.txt
Not stored for this site.
Document
llms.txt
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Supefina | Plataforma de pagos en LATAM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="canonical" href="https://supefina.net/" />
<meta name="description" content="Supefina es una plataforma de pagos para LATAM que permite recaudar, dispersar pagos y crear links de pago de forma simple, segura y eficiente." />
<meta name="keywords" content="Supefina, pagos LATAM, payins, payouts, link de pago, plataforma de pagos, pagos digitales, dispersión de pagos" />
<meta name="robots" content="index,follow" />
<meta name="audience" content="all" />
<meta name="author" content="JSCodigo" />
<meta name="copyright" content="© 2026 Supefina" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Supefina" />
<meta property="og:title" content="Supefina | Plataforma de pagos en LATAM" />
<meta property="og:description" content="Recauda y dispersa pagos en LATAM desde una sola plataforma. Payins, payouts y links de pago para empresas en expansión." />
<meta property="og:url" content="https://supefina.net/" />
<meta property="og:image" content="https://supefina.net/img/logo_original.png" />
<meta property="og:image:alt" content="Logo de Supefina" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Supefina | Plataforma de pagos en LATAM" />
<meta name="twitter:description" content="Plataforma de pagos para empresas que necesitan cobrar, dispersar y operar en LATAM con seguridad y trazabilidad." />
<meta name="twitter:image" content="https://supefina.net/img/logo_original.png" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" href="./css/styles.css" />
<link rel="stylesheet" href="./css/custom.css" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body class="bg-slate-50 text-slate-900 antialiased">
<header id="site-header" class="sticky top-0 z-50">
<div class="border-b border-white/10 bg-gradient-to-r from-[#2F3069] to-[#2967A9] shadow-lg shadow-black/20">
<div class="mx-auto max-w-6xl px-4">
<div class="flex h-20 items-center justify-between gap-4">
<a href="index.html" class="flex items-center gap-2"><img src="./img/logo.png" alt="Supefina" class="h-9 md:h-12 w-auto object-contain" /></a>
<nav class="hidden md:flex items-center gap-0 text-base">
<div class="relative group">
<button type="button" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-white/90 hover:text-white hover:bg-white/10 transition hover:ring-1 hover:ring-white/15" aria-haspopup="true">
<i class="bx bx-grid-alt text-lg text-[color:var(--brand-accent)]"></i><span>Nuestras soluciones</span><i class="bx bx-chevron-down text-base opacity-80 group-hover:opacity-100 transition"></i>
</button>
<div class="absolute left-0 top-full pt-2 opacity-0 translate-y-1 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0 group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-y-0 transition">
<div class="w-[320px] rounded-2xl border border-white/10 bg-slate-900/70 backdrop-blur shadow-2xl shadow-black/35 p-2">
<a href="payins.html" class="flex items-start gap-3 rounded-xl p-3 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><span class="mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--brand-primary)]/20 text-[color:var(--brand-primary)]"><i class="bx bx-wallet text-xl"></i></span><span><span class="block font-medium text-white">Payins</span><span class="block text-xs text-white/65">Cobros locales y digitales</span></span></a>
<a href="payouts.html" class="flex items-start gap-3 rounded-xl p-3 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><span class="mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--brand-accent)]/20 text-[color:var(--brand-accent)]"><i class="bx bx-transfer-alt text-xl"></i></span><span><span class="block font-medium text-white">Payout</span><span class="block text-xs text-white/65">Dispersión y pagos a terceros</span></span></a>
<!-- <a href="linkpago.html" class="flex items-start gap-3 rounded-xl p-3 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><span class="mt-0.5 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--brand-soft)]/20 text-[color:var(--brand-soft)]"><i class="bx bx-link-alt text-xl"></i></span><span><span class="block font-medium text-white">Link de pago</span><span class="block text-xs text-white/65">Cobra con un enlace seguro</span></span></a> -->
</div>
</div>
</div>
<div class="relative group">
<a href="paises.html" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-white/90 hover:text-white hover:bg-white/10 transition hover:ring-1 hover:ring-white/15" aria-haspopup="true">
<i class="bx bx-world text-lg text-[color:var(--brand-primary)]"></i><span>Países</span><i class="bx bx-chevron-down text-base opacity-80 group-hover:opacity-100 transition"></i>
</a>
<div class="absolute left-0 top-full pt-2 opacity-0 translate-y-1 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0 transition">
<div class="w-[360px] rounded-2xl border border-white/10 bg-slate-900/70 backdrop-blur shadow-2xl shadow-black/35 p-3">
<div class="grid grid-cols-2 gap-2">
<a href="paises.html#pais-mexico" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/mexico.svg" alt="México" class="h-5 w-5" /><span class="text-sm text-white">México</span></a>
<a href="paises.html#pais-peru" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/peru.svg" alt="Perú" class="h-5 w-5" /><span class="text-sm text-white">Perú</span></a>
<a href="paises.html#pais-colombia" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/colombia.svg" alt="Colombia" class="h-5 w-5" /><span class="text-sm text-white">Colombia</span></a>
<a href="paises.html#pais-brasil" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/brasil.svg" alt="Brasil" class="h-5 w-5" /><span class="text-sm text-white">Brasil</span></a>
<a href="paises.html#pais-chile" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/chile.svg" alt="Chile" class="h-5 w-5" /><span class="text-sm text-white">Chile</span></a>
<a href="paises.html#pais-argentina" class="flex items-center gap-3 rounded-xl p-2 hover:bg-white/10 hover:ring-1 hover:ring-white/10 transition"><img src="./img/flag/argentina.svg" alt="Argentina" class="h-5 w-5" /><span class="text-sm text-white">Argentina</span></a>
</div>
</div>
</div>
</div>
<a href="https://supefina.gitbook.io/es-v2" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-white/90 hover:text-white hover:bg-white/10 transition hover:ring-1 hover:ring-white/15"><i class="bx bx-code-alt text-lg text-[color:var(--brand-primary)]"></i><span>Desarrolladores</span></a>
<a href="blog.html" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-white/90 hover:text-white hover:bg-white/10 transition hover:ring-1 hover:ring-white/15"><i class="bx bx-news text-lg text-[color:var(--brand-soft)]"></i><span>Blog</span></a>
<a href="contacto.html" class="ml-1 inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold bg-[color:var(--brand-accent)] text-slate-950 border border-white/10 shadow-sm transition hover:bg-white hover:text-slate-900 hover:ring-1 hover:ring-white/25 focus:outline-none focus:ring-2 focus:ring-white/30"><i class="bx bx-message-rounded-dots text-lg"></i><span>Contáctanos</span></a>
</nav>
<button id="btn-mobile" class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg border border-white/15 bg-white/10 text-white hover:bg-white/15 hover:ring-1 hover:ring-white/20 transition" aria-label="Abrir menú" aria-expanded="false" aria-controls="mobile-menu"><i class="bx bx-menu text-2xl"></i></button>
</div>
</div>
<div id="mobile-menu" class="md:hidden hidden border-t border-white/10 bg-slate-900/65 backdrop-blur">
<div class="mx-auto max-w-6xl px-4 py-4 space-y-3">
<div class="rounded-xl border border-white/10 bg-white/5">
<button class="w-full flex items-center justify-between px-4 py-3 text-left text-white hover:bg-white/10 transition" data-acc-btn="soluciones" aria-expanded="false">
<span class="inline-flex items-center gap-2 font-medium"><i class="bx bx-grid-alt text-lg text-[color:var(--brand-accent)]"></i>Nuestras soluciones</span><i class="bx bx-chevron-down text-xl opacity-80 transition"></i>
</button>
<div class="hidden px-2 pb-2" data-acc-panel="soluciones">
<a href="payins.html" class="flex items-center gap-3 rounded-lg px-3 py-2 text-white/90 hover:bg-white/10 transition"><i class="bx bx-wallet text-xl text-[color:var(--brand-primary)]"></i><span>Payins</span></a>
<a href="payouts.html" class="flex items-center gap-3 rounded-lg px-3 py-2 text-white/90 hover:bg-white/10 transition"><i class="bx bx-transfer-alt text-xl text-[color:var(--brand-accent)]"></i><span>Payout</span></a>
<!-- <a href="linkpago.html" class="flex items-center gap-3 rounded-lg px-3 py-2 text-white/90 hover:bg-white/10 transition"><i class="bx bx-link-alt text-xl text-[color:var(--brand-soft)]"></i><span>Link de pago</span></a> -->
</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/5">
<button class="w-full flex items-center justify-between px-4 py-3 text-left text-white hover:bg-white/10 transition" data-acc-btn="paises" aria-expanded="false">
<span class="inline-flex items-center gap-2 font-medium"><i class="bx bx-world text-lg text-[color:var(--brand-primary)]"></i>Países</span><i class="bx bx-chevron-down text-xl opacity-80 transition"></i>
</button>
<div class="hidden px-4 pb-4" data-acc-panel="paises">
<div class="flex flex-wrap gap-3">
<a href="paises.html#pais-mexico" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="México"><img src="./img/flag/mexico.svg" alt="México" class="h-6 w-6" /></a>
<a href="paises.html#pais-peru" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="Perú"><img src="./img/flag/peru.svg" alt="Perú" class="h-6 w-6" /></a>
<a href="paises.html#pais-colombia" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="Colombia"><img src="./img/flag/colombia.svg" alt="Colombia" class="h-6 w-6" /></a>
<a href="paises.html#pais-brasil" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="Brasil"><img src="./img/flag/brasil.svg" alt="Brasil" class="h-6 w-6" /></a>
<a href="paises.html#pais-chile" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="Chile"><img src="./img/flag/chile.svg" alt="Chile" class="h-6 w-6" /></a>
<a href="paises.html#pais-argentina" class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-white/15 hover:bg-white/10 transition" aria-label="Argentina"><img src="./img/flag/argentina.svg" alt="Argentina" class="h-6 w-6" /></a>
</div>
</div>
</div>
<a href="https://supefina.gitbook.io/es-v2" target="_blank" rel="noopener noreferrer" class="block rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white hover:bg-white/10 hover:ring-1 hover:ring-white/15 transition"><span class="inline-flex items-center gap-2"><i class="bx bx-code-alt text-lg text-[color:var(--brand-primary)]"></i>Desarrolladores</span></a>
<a href="blog.html" class="block rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white hover:bg-white/10 hover:ring-1 hover:ring-white/15 transition"><span class="inline-flex items-center gap-2"><i class="bx bx-news text-lg text-[color:var(--brand-soft)]"></i>Blog</span></a>
<a href="contacto.html" class="block rounded-xl px-4 py-3 font-semibold text-sm bg-[color:var(--brand-accent)] text-slate-950 border border-white/10 shadow-sm transition hover:bg-white hover:text-slate-900 hover:ring-1 hover:ring-white/25 focus:outline-none focus:ring-2 focus:ring-white/30"><span class="inline-flex items-center gap-2"><i class="bx bx-message-rounded-dots text-lg"></i>Contáctanos</span></a>
</div>
</div>
</div>
</header>
<main>
<section id="hero" class="relative overflow-hidden text-white">
<img src="./img/hero_vertical.png" alt="" class="pointer-events-none absolute inset-0 h-full w-full object-cover object-center md:hidden" aria-hidden="true" />
<img src="./img/hero.png" alt="" class="pointer-events-none absolute inset-0 h-full w-full object-cover object-[82%_50%] md:object-center hidden md:block" aria-hidden="true" />
<div class="pointer-events-none absolute inset-0" aria-hidden="true">
<div class="absolute inset-x-0 top-0 h-[40%] md:hidden" style="background: linear-gradient(to bottom, rgba(17, 38, 99, 0.38) 0%, rgba(17, 38, 99, 0.20) 45%, rgba(9, 96, 164, 0.08) 75%, rgba(9, 96, 164, 0.00) 100%);"></div>
<div class="absolute inset-y-0 left-0 w-1/2 hidden md:block" style="background: linear-gradient(to right, rgba(17, 38, 99, 0.66) 0%, rgba(17, 38, 99, 0.68) 22%, rgba(9, 96, 164, 0.46) 52%, rgba(3, 190, 182, 0.16) 78%, rgba(3, 190, 182, 0.05) 92%, rgba(3, 190, 182, 0.00) 100%);"></div>
</div>
<div class="hero-wrap relative max-w-6xl mx-auto px-4 min-h-[88svh] md:min-h-0 flex items-center md:grid pt-4 md:pt-16 pb-8 md:pb-10">
<div class="w-full -translate-y-24 md:translate-y-0 grid gap-10 md:grid-cols-2 items-center">
<div class="reveal-card reveal-delay-1">
<p class="inline-flex items-center gap-2 text-xs font-medium text-white bg-white/15 border border-white/25 rounded-full px-3 py-1 mb-4">
<i class="bx bx-shield-quarter text-base text-white"></i>
<span>Pagos seguros</span>
</p>
<h1 class="text-3xl md:text-5xl font-semibold leading-snug mb-4 [text-shadow:0_2px_8px_rgba(0,0,0,0.35)]">
Somos la <span class="text-[color:var(--brand-accent)] font-semibold">Plataforma</span> de pagos de LATAM.
</h1>
<p class="text-white/85 mb-7 text-sm md:text-lg max-w-xl leading-snug">Recauda y dispersa pagos en LATAM desde una sola plataforma.</p>
<div class="flex flex-wrap items-center gap-4">
<a href="contacto.html" class="group relative inline-flex">
<span aria-hidden="true" class="pointer-events-none absolute -inset-1 rounded-full bg-[color:var(--brand-accent)]/25 blur-xl opacity-70 transition group-hover:opacity-100"></span>
<span class="relative inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-slate-950 bg-[color:var(--brand-accent)] shadow-lg shadow-black/35 border border-slate-950/20 transition hover:bg-[color:var(--brand-primary)] hover:text-white hover:ring-1 hover:ring-[color:var(--brand-accent)]/40 focus:outline-none focus:ring-2 focus:ring-[color:var(--brand-accent)]/55">
<i class="bx bx-message-rounded-dots text-lg transition-transform group-hover:-translate-y-[1px]"></i>
<span>Contáctanos</span>
<span aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden rounded-full">
<span class="absolute -left-10 top-0 h-full w-10 rotate-12 bg-white/25 blur-md opacity-0 transition group-hover:left-[120%] group-hover:opacity-100" style="transition-duration: 900ms;"></span>
</span>
</span>
</a>
</div>
</div>
<div class="relative reveal-card reveal-delay-2 hidden md:block">
<div class="relative"><div class="w-full h-[280px] md:h-[420px]"></div></div>
</div>
</div>
</div>
</section>
<section id="estadisticas" class="relative overflow-hidden text-slate-50 py-4 md:py-8" tabindex="0" style="background: linear-gradient(90deg, #2F3069 0%, #2967A9 100%);">
<div class="mx-auto max-w-6xl px-4 relative">
<div class="md:flex md:justify-end">
<div class="w-full md:w-3/5">
<div class="flex justify-center md:justify-start">
<div class="w-full max-w-[560px] md:max-w-none">
<div class="relative flex flex-col items-center gap-3 md:gap-4">
<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-3 md:gap-5 text-center">
<div class="flex flex-col items-center py-1 md:px-3 md:py-0">
<div class="inline-flex items-center justify-center text-2xl md:text-3xl mb-2 md:mb-2.5 text-white/95"><i class="bx bx-transfer-alt leading-none"></i></div>
<div class="text-4xl md:text-5xl font-bold tracking-wide leading-none" data-target="120" data-prefix="+" data-suffix="M">0</div>
<div class="mt-1 text-xs md:text-sm text-white/90">Transacciones procesadas</div>
</div>
<div class="flex flex-col items-center py-1 md:px-3 md:py-0">
<div class="inline-flex items-center justify-center text-2xl md:text-3xl mb-2 md:mb-2.5 text-white/95"><i class="bx bx-world leading-none"></i></div>
<div class="text-4xl md:text-5xl font-bold tracking-wide leading-none" data-target="6">0</div>
<div class="mt-1 text-xs md:text-sm text-white/90">Países disponibles</div>
</div>
<div class="flex flex-col items-center py-1 md:px-3 md:py-0">
<div class="inline-flex items-center justify-center text-2xl md:text-3xl mb-2 md:mb-2.5 text-white/95"><i class="bx bx-credit-card leading-none"></i></div>
<div class="text-4xl md:text-5xl font-bold tracking-wide leading-none" data-target="100" data-prefix="+">0</div>
<div class="mt-1 text-xs md:text-sm text-white/90">Medios de pago disponibles</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pointer-events-none absolute inset-y-0 left-4 hidden md:flex md:w-[34%] items-center justify-center" aria-hidden="true">
<div class="relative h-full w-full flex items-center justify-center">
<img src="./img/stats.png" alt="" class="h-1/2 md:h-full -ml-72 w-auto max-w-full object-contain opacity-95" loading="lazy" />
<div class="absolute inset-0 flex items-center justify-center px-6 text-center">
<p class="max-w-[240px] text-sm lg:text-base leading-relaxed text-white/95 font-medium [text-shadow:0_2px_10px_rgba(0,0,0,0.35)]">Unimos Latam a través de una sola plataforma. Bienvenido a una nueva experiencia.</p>
</div>
</div>
</div>
<div class="mt-4 md:hidden flex justify-center">
<div class="relative w-full flex justify-center">
<img src="./img/stats.png" alt="" class="h-auto w-[180px] object-contain opacity-95" loading="lazy" aria-hidden="true" />
<div class="absolute inset-0 flex items-center justify-center text-center">
<p class="w-[80%] text-[15px] leading-snug text-white/95 font-medium [text-shadow:0_2px_10px_rgba(0,0,0,0.35)]">Unimos Latam a través de una sola plataforma, bienvenido a una nueva experiencia.</p>
</div>
</div>
</div>
</div>
</section>
<section id="nuestras-soluciones" class="relative pt-10 md:pt-16 pb-0 md:pb-14 bg-white text-slate-900 overflow-hidden">
<div class="pointer-events-none absolute inset-y-0 left-0 hidden md:block w-[65%]">
<img src="./img/soluciones.png" alt="" class="h-full w-full object-cover object-left" aria-hidden="true" />
<div class="absolute inset-y-0 right-0 w-[40%]" style="background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.88) 72%, rgba(255,255,255,1) 100%);" aria-hidden="true"></div>
</div>
<div class="mx-auto max-w-6xl relative px-4 sm:px-6">
<div class="grid items-start gap-6 md:gap-5 lg:gap-6 md:grid-cols-[3fr_2fr]">
<div class="hidden md:block"></div>
<div class="relative">
<div class="mb-7 md:mb-9">
<h2 class="text-2xl md:text-3xl font-bold tracking-wide inline-flex items-center gap-3">
<span class="inline-block h-2 w-2 rounded-full bg-[var(--brand-accent)]"></span>
<span class="bg-gradient-to-r from-[var(--brand-primary)] via-[var(--brand-soft)] to-[var(--brand-accent)] bg-clip-text text-transparent">Nuestras soluciones</span>
</h2>
<p class="mt-3 text-sm md:text-[15px] text-slate-600 max-w-2xl font-thin">Payins y Payouts en LATAM con una experiencia simple, segura y sin fricciones.</p>
</div>
<div class="space-y-6">
<article class="reveal-card reveal-delay-1">
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-full bg-slate-100 ring-1 ring-slate-200"><i class="bx bx-credit-card text-[22px] text-[var(--brand-primary)]"></i></span>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-[var(--brand-primary)] leading-tight">Payins</h3>
<p class="mt-1 text-[13px] text-slate-600 leading-snug">
Recauda pagos con medios locales y digitales, procesando transacciones al instante para aumentar tu conversión.
<a href="payins.html" class="ml-1 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--brand-primary)] hover:text-[var(--brand-accent)] transition whitespace-nowrap">Ver más <i class="bx bx-right-arrow-alt text-lg leading-none"></i></a>
</p>
</div>
</div>
</article>
<article class="reveal-card reveal-delay-2">
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-full bg-slate-100 ring-1 ring-slate-200"><i class="bx bx-send text-[22px] text-[var(--brand-primary)]"></i></span>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-[var(--brand-primary)] leading-tight">Payouts</h3>
<p class="mt-1 text-[13px] text-slate-600 leading-snug">
Dispersa pagos en tiempo real a clientes y aliados, con alta cobertura regional y control total de tus operaciones.
<a href="payouts.html" class="ml-1 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--brand-primary)] hover:text-[var(--brand-accent)] transition whitespace-nowrap">Ver más <i class="bx bx-right-arrow-alt text-lg leading-none"></i></a>
</p>
</div>
</div>
</article>
<!-- <article class="reveal-card reveal-delay-3">
<div class="flex items-start gap-4">
<span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-full bg-slate-100 ring-1 ring-slate-200"><i class="bx bx-link text-[22px] text-[var(--brand-primary)]"></i></span>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-[var(--brand-primary)] leading-tight">Link de pago</h3>
<p class="mt-1 text-[13px] text-slate-600 leading-snug">
Genera enlaces de pago y cobra al instante, facilitando ventas en línea, redes sociales y servicios sin fricción.
<a href="linkpago.html" class="ml-1 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--brand-primary)] hover:text-[var(--brand-accent)] transition whitespace-nowrap">Ver más <i class="bx bx-right-arrow-alt text-lg leading-none"></i></a>
</p>
</div>
</div>
</article> -->
</div>
<div class="md:hidden -mx-4 mt-6">
<img src="./img/soluciones_vertical.png" alt="Soluciones" class="w-full h-auto object-cover" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
<section id="diferencia" class="py-14 md:py-18 border-b border-slate-200 bg-slate-50">
<div class="mx-auto max-w-6xl px-4">
<div class="text-center mb-8 md:mb-12">
<h2 class="text-2xl md:text-3xl font-bold tracking-wide inline-flex items-center justify-center gap-3">
<span class="inline-block h-2 w-2 rounded-full bg-[var(--brand-accent)]"></span>
<span class="bg-gradient-to-r from-[var(--brand-deep)] via-[var(--brand-primary)] to-[var(--brand-soft)] bg-clip-text text-transparent">¿Qué nos diferencia?</span>
</h2>
<p class="mt-3 text-sm md:text-base text-slate-600 max-w-2xl mx-auto">Cuatro capacidades que elevan tu operación de pagos en LATAM.</p>
</div>
<div class="rounded-3xl border border-slate-200 bg-white/70 overflow-hidden shadow-xl shadow-black/5">
<div class="grid md:grid-cols-2">
<article class="order-1 md:order-1 reveal-card reveal-delay-1 group relative p-7 md:p-8 bg-white border-b border-slate-200 md:border-r transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/5">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-[var(--brand-primary)]/[0.06] via-transparent to-transparent"></div>
<div class="relative flex items-start gap-4">
<div class="shrink-0 h-12 w-12 rounded-xl border border-slate-200 bg-slate-50 flex items-center justify-center transition-all duration-300 group-hover:border-[var(--brand-primary)]/35 group-hover:shadow-[0_0_0_6px_rgba(27,105,249,0.10)]"><i class="bx bx-layout text-3xl text-[var(--brand-primary)] transition-transform duration-300 group-hover:scale-105"></i></div>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-slate-900">Dashboard unificado</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">Payins y Payouts en una sola plataforma de gestión para trazabilidad y visibilidad de tus operaciones.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--brand-primary)]/35 to-transparent"></div>
</article>
<article class="order-2 md:order-2 reveal-card reveal-delay-2 group relative p-7 md:p-8 bg-slate-950/[0.04] border-b border-slate-200 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/5">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-[var(--brand-primary)]/[0.06] via-transparent to-transparent"></div>
<div class="relative flex items-start gap-4">
<div class="shrink-0 h-12 w-12 rounded-xl border border-slate-200 bg-white/70 flex items-center justify-center transition-all duration-300 group-hover:border-[var(--brand-primary)]/35 group-hover:shadow-[0_0_0_6px_rgba(27,105,249,0.10)]"><i class="bx bx-globe text-3xl text-[var(--brand-primary)] transition-transform duration-300 group-hover:scale-105"></i></div>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-slate-900">Pagos transfronterizos</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">Opera entre países con experiencia consistente y menos fricción.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--brand-primary)]/35 to-transparent"></div>
</article>
<article class="order-3 md:order-3 reveal-card reveal-delay-3 group relative p-7 md:p-8 bg-white md:bg-slate-950/[0.04] border-b border-slate-200 md:border-b-0 md:border-r transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/5">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-[var(--brand-primary)]/[0.06] via-transparent to-transparent"></div>
<div class="relative flex items-start gap-4">
<div class="shrink-0 h-12 w-12 rounded-xl border border-slate-200 bg-slate-50 md:bg-white/70 flex items-center justify-center transition-all duration-300 group-hover:border-[var(--brand-primary)]/35 group-hover:shadow-[0_0_0_6px_rgba(27,105,249,0.10)]"><i class="bx bx-timer text-3xl text-[var(--brand-primary)] transition-transform duration-300 group-hover:scale-105"></i></div>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-slate-900">Payouts Real Time</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">Dispersión al instante y disponible 24/7.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--brand-primary)]/35 to-transparent"></div>
</article>
<article class="order-4 md:order-4 reveal-card reveal-delay-1 group relative p-7 md:p-8 bg-slate-950/[0.04] md:bg-white border-b border-slate-200 md:border-b-0 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/5">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-[var(--brand-primary)]/[0.06] via-transparent to-transparent"></div>
<div class="relative flex items-start gap-4">
<div class="shrink-0 h-12 w-12 rounded-xl border border-slate-200 bg-white/70 md:bg-slate-50 flex items-center justify-center transition-all duration-300 group-hover:border-[var(--brand-primary)]/35 group-hover:shadow-[0_0_0_6px_rgba(27,105,249,0.10)]"><i class="bx bx-headphone text-3xl text-[var(--brand-primary)] transition-transform duration-300 group-hover:scale-105"></i></div>
<div class="min-w-0">
<h3 class="text-base md:text-lg font-semibold text-slate-900">Soporte 24/7</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">Respuesta continua y acompañamiento en operación, cumplimiento y gestión de riesgos.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--brand-primary)]/35 to-transparent"></div>
</article>
</div>
</div>
</div>
</section>
<section id="rubros" class="py-12 md:py-16 bg-white text-slate-900 relative overflow-hidden">
<div class="pointer-events-none absolute inset-0 z-0 bg-no-repeat bg-cover bg-center md:hidden" style="background-image: url('./img/rubros_vertical.png');" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-0 z-0 hidden md:block bg-no-repeat bg-cover bg-center" style="background-image: url('./img/rubros.png');" aria-hidden="true"></div>
<div class="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
<div class="absolute inset-y-0 left-0 w-2/5 bg-gradient-to-r from-white/18 via-white/7 to-transparent"></div>
</div>
<div class="pointer-events-none absolute -left-24 -top-24 z-0 h-[360px] w-[360px] rounded-full bg-[var(--brand-accent)]/10 blur-3xl"></div>
<div class="pointer-events-none absolute -right-24 -bottom-24 z-0 h-[360px] w-[360px] rounded-full bg-[var(--brand-primary)]/8 blur-3xl"></div>
<div class="mx-auto max-w-6xl px-4 relative z-10">
<div class="md:w-3/5">
<div class="text-left mb-8 md:mb-10 relative inline-block">
<div aria-hidden="true" class="pointer-events-none absolute -inset-x-6 -inset-y-4 rounded-[28px] bg-white/40 blur-xl"></div>
<h2 class="relative text-2xl md:text-3xl font-bold tracking-wide inline-flex items-center gap-3">
<span class="inline-block h-2 w-2 rounded-full bg-[var(--brand-accent)]"></span>
<span class="bg-gradient-to-r from-[#2F3069] to-[#2967A9] bg-clip-text text-transparent">Plataforma ideal para clientes del rubro</span>
</h2>
<p class="relative mt-3 text-sm md:text-base text-slate-800 max-w-2xl">Enfoques por industria con experiencias de pago optimizadas y control operativo.</p>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<article class="reveal-card reveal-delay-1 group rounded-2xl bg-white/70 backdrop-blur-sm p-5 shadow-md shadow-black/10 transition duration-300 hover:-translate-y-1 hover:bg-white/80 hover:shadow-lg">
<div class="flex items-start gap-4">
<i class="bx bx-joystick text-[32px] leading-none text-[var(--brand-accent)]"></i>
<div class="min-w-0">
<h3 class="text-sm font-semibold tracking-widest text-slate-900">GAMING</h3>
<p class="mt-2 text-sm leading-relaxed text-slate-700">Flujos de cobro rápidos para operaciones de alta frecuencia.</p>
</div>
</div>
</article>
<article class="reveal-card reveal-delay-2 group rounded-2xl bg-white/70 backdrop-blur-sm p-5 shadow-md shadow-black/10 transition duration-300 hover:-translate-y-1 hover:bg-white/80 hover:shadow-lg">
<div class="flex items-start gap-4">
<i class="bx bx-line-chart text-[32px] leading-none text-[var(--brand-primary)]"></i>
<div class="min-w-0">
<h3 class="text-sm font-semibold tracking-widest text-slate-900">LENDING</h3>
<p class="mt-2 text-sm leading-relaxed text-slate-700">Recaudación y dispersión con trazabilidad para créditos, cuotas y cobranzas.</p>
</div>
</div>
</article>
<article class="reveal-card reveal-delay-3 group rounded-2xl bg-white/70 backdrop-blur-sm p-5 shadow-md shadow-black/10 transition duration-300 hover:-translate-y-1 hover:bg-white/80 hover:shadow-lg">
<div class="flex items-start gap-4">
<i class="bx bx-buildings text-[32px] leading-none text-[var(--brand-soft)]"></i>
<div class="min-w-0">
<h3 class="text-sm font-semibold tracking-widest text-slate-900">EMPRESAS</h3>
<p class="mt-2 text-sm leading-relaxed text-slate-700">Pagos y cobros integrados para optimizar procesos internos y conciliación.</p>
</div>
</div>
</article>
<article class="reveal-card reveal-delay-1 group rounded-2xl bg-white/70 backdrop-blur-sm p-5 shadow-md shadow-black/10 transition duration-300 hover:-translate-y-1 hover:bg-white/80 hover:shadow-lg">
<div class="flex items-start gap-4">
<i class="bx bx-cart-alt text-[32px] leading-none text-[var(--brand-accent)]"></i>
<div class="min-w-0">
<h3 class="text-sm font-semibold tracking-widest text-slate-900">E-COMMERCE</h3>
<p class="mt-2 text-sm leading-relaxed text-slate-700">Checkout ágil y seguro para aumentar conversión y reducir abandono.</p>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<section id="asociaciones" class="py-14 md:py-20 text-slate-100 relative overflow-hidden" style="background: linear-gradient(90deg, #2F3069 0%, #2967A9 100%);">
<div class="pointer-events-none absolute -left-24 -top-24 h-[340px] w-[340px] rounded-full bg-[var(--brand-accent)]/10 blur-3xl"></div>
<div class="pointer-events-none absolute -right-24 -bottom-24 h-[340px] w-[340px] rounded-full bg-[var(--brand-primary)]/10 blur-3xl"></div>
<div class="mx-auto max-w-6xl px-4 relative">
<div class="text-center mb-10 md:mb-12">
<h2 class="text-2xl md:text-3xl font-bold tracking-wide inline-flex items-center justify-center gap-3">
<span class="inline-block h-2 w-2 rounded-full bg-[var(--brand-accent)]"></span>
<span class="bg-gradient-to-r from-[var(--brand-primary)] via-[var(--brand-soft)] to-[var(--brand-accent)] bg-clip-text text-transparent">Asociaciones a la que pertenece Supefina</span>
</h2>
<p class="mt-3 text-sm md:text-base text-slate-200 max-w-2xl mx-auto">Respaldos y alianzas que fortalecen nuestra operación y cumplimiento.</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6 place-items-center">
<div class="reveal-card reveal-delay-1 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio1.png" alt="Socio 1" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-accent)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
<div class="reveal-card reveal-delay-2 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio2.png" alt="Socio 2" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-primary)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
<div class="reveal-card reveal-delay-3 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio3.png" alt="Socio 3" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-soft)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
<div class="reveal-card reveal-delay-3 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio6.png" alt="Socio 6" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-soft)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
<div class="reveal-card reveal-delay-1 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio4.png" alt="Socio 4" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-accent)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
<div class="reveal-card reveal-delay-2 group w-[180px] h-[60px] flex items-center justify-center">
<img src="./img/socio5.png" alt="Socio 5" loading="lazy" class="h-[60px] w-auto max-w-[180px] object-contain rounded-xl ring-1 ring-slate-800 bg-slate-900/35 shadow-sm shadow-black/30 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:bg-slate-900/50 group-hover:ring-[var(--brand-primary)]/30 group-hover:shadow-md group-hover:shadow-black/40" />
</div>
</div>
</div>
</section>
</main>
<a href="contacto.html" aria-label="Contáctanos" class="fixed bottom-5 right-5 z-50 group md:hidden">
<span aria-hidden="true" class="pointer-events-none absolute -inset-2 rounded-full bg-[color:var(--brand-accent)] blur-lg opacity-35 transition group-hover:opacity-70"></span>
<span class="relative inline-flex items-center justify-center rounded-full h-14 w-14 text-slate-950 bg-[color:var(--brand-accent)] shadow-lg shadow-black/35 border border-slate-950/20 transition duration-300 ease-out hover:bg-[color:var(--brand-primary)] hover:text-white focus:outline-none focus:ring-2 focus:ring-[color:var(--brand-accent)]/50">
<i class="bx bx-message-rounded-dots text-2xl"></i>
</span>
</a>
<a href="contacto.html" aria-label="Contáctanos" id="fab-contact" class="fixed bottom-6 right-6 z-50 group hidden md:block">
<span aria-hidden="true" class="pointer-events-none absolute -inset-2 rounded-full bg-[color:var(--brand-accent)] blur-lg opacity-35 transition group-hover:opacity-70"></span>
<span id="fab-contact-inner" class="relative inline-flex items-center justify-center rounded-full h-12 w-12 text-slate-950 bg-[color:var(--brand-accent)] shadow-lg shadow-black/35 border border-slate-950/20 transition-all duration-300 ease-out hover:bg-[color:var(--brand-primary)] hover:text-white focus:outline-none focus:ring-2 focus:ring-[color:var(--brand-accent)]/50">
<i class="bx bx-message-rounded-dots text-xl transition-transform group-hover:-translate-y-[1px]"></i>
<span id="fab-contact-text" class="overflow-hidden whitespace-nowrap max-w-0 opacity-0 translate-x-[-4px] transition-all duration-300 ease-out">Contáctanos</span>
<span aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden rounded-full">
<span class="absolute -left-10 top-0 h-full w-10 rotate-12 bg-white/25 blur-md opacity-0 transition group-hover:left-[120%] group-hover:opacity-100" style="transition-duration: 900ms;"></span>
</span>
</span>
</a>
<footer id="site-footer" class="relative bg-slate-50">
<div class="h-px w-full bg-gradient-to-r from-transparent via-slate-300/70 to-transparent"></div>
<div class="mx-auto max-w-6xl px-4 py-12">
<div class="grid gap-10 lg:grid-cols-12">
<div class="lg:col-span-3 text-center lg:text-left">
<a href="#top" class="inline-flex items-center justify-center lg:justify-start gap-3"><img src="./img/logo_original.png" alt="Supefina" class="h-10 md:h-14 w-auto" /></a>
<div class="mt-2 flex items-center justify-center lg:justify-start"><img src="./img/pci.png" alt="Certificación PCI" class="h-9 md:h-12 w-auto object-contain" loading="lazy" /></div>
<div class="mt-2 flex items-center justify-center lg:justify-start gap-3">
<a href="#" aria-label="Facebook" class="hidden inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-100"><i class="bx bxl-facebook text-xl"></i></a>
<a href="#" aria-label="Twitter" class="hidden inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-100"><i class="bx bxl-twitter text-xl"></i></a>
<a href="#" aria-label="Instagram" class="hidden inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-100"><i class="bx bxl-instagram text-xl"></i></a>
<a href="https://www.linkedin.com/company/supefina/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-slate-100"><i class="bx bxl-linkedin text-xl"></i></a>
</div>
<div class="mt-4 flex justify-center lg:justify-start"><a href="/cdn-cgi/l/email-protection#0b6864657f6a687f644b787e7b6e6d62656a25656e7f" class="inline-flex items-center gap-2 text-sm text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-envelope text-lg"></i><span class="__cf_email__" data-cfemail="01626e6f756062756e417274716467686f602f6f6475">[email protected]</span></a></div>
</div>
<div class="lg:col-span-3">
<a href="paises.html" class="inline-flex items-center gap-2 font-semibold text-slate-900 hover:text-[#2199FA] transition">Países donde operamos<i class="bx bx-link-external text-lg opacity-70"></i></a>
<div class="mt-4 grid grid-cols-2 gap-3 text-sm">
<a href="paises.html#pais-mexico" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/mexico.svg" alt="México" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">México</span><span class="sm:hidden font-semibold tracking-widest">MEX</span></a>
<a href="paises.html#pais-peru" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/peru.svg" alt="Perú" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">Perú</span><span class="sm:hidden font-semibold tracking-widest">PER</span></a>
<a href="paises.html#pais-colombia" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/colombia.svg" alt="Colombia" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">Colombia</span><span class="sm:hidden font-semibold tracking-widest">COL</span></a>
<a href="paises.html#pais-brasil" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/brasil.svg" alt="Brasil" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">Brasil</span><span class="sm:hidden font-semibold tracking-widest">BRA</span></a>
<a href="paises.html#pais-chile" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/chile.svg" alt="Chile" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">Chile</span><span class="sm:hidden font-semibold tracking-widest">CHI</span></a>
<a href="paises.html#pais-argentina" class="flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><img src="./img/flag/argentina.svg" alt="Argentina" class="h-5 w-5 rounded-sm" /><span class="hidden sm:inline">Argentina</span><span class="sm:hidden font-semibold tracking-widest">ARG</span></a>
</div>
</div>
<div class="lg:col-span-3">
<p class="inline-flex items-center gap-2 font-semibold text-slate-900">Nuestras soluciones</p>
<ul class="mt-4 space-y-3 text-sm">
<li><a href="payins.html" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-credit-card text-lg text-[var(--brand-primary)]"></i><span>Payins</span></a></li>
<li><a href="payouts.html" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-send text-lg text-[var(--brand-accent)]"></i><span>Payouts</span></a></li>
<!-- <li><a href="linkpago.html" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-link text-lg text-[var(--brand-soft)]"></i><span>Link de pago</span></a></li> -->
</ul>
</div>
<div class="lg:col-span-3">
<h4 class="font-semibold text-slate-900">Recursos</h4>
<ul class="mt-4 space-y-3 text-sm">
<li><a href="./privacy.html" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-shield-quarter text-lg text-[var(--brand-primary)]"></i><span>Política de privacidad</span></a></li>
<li><a href="./terms.html" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-file text-lg text-[var(--brand-accent)]"></i><span>Términos y condiciones</span></a></li>
<li><a href="./trabaja.html" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-slate-700 hover:text-[#2199FA] transition"><i class="bx bx-briefcase-alt-2 text-lg text-[var(--brand-primary)]"></i><span>Trabaja con nosotros</span></a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-6 border-t border-slate-200 text-center"><p class="text-sm text-slate-600">© <span id="year">2026</span> Supefina. Todos los derechos reservados.</p></div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="./js/main.js"></script>
<script>
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = new Date().getFullYear();
</script>
<script src="./js/header.js"></script>
<script src="./js/fab.js"></script>
<script src="./js/reveal.js"></script>
</body>
</html>Document
llms-full.txt
Not stored for this site.