/* ==========================================================================
   theme-onepay.css — Tema OnePay unificado (Grupo 5E)
   Un solo archivo para el Home (index.html) y las 9 páginas internas.
   Estructura:
     1) BASE — variables y fondo global (compartido)
     2) HOME — reglas del index.html (section.jp-naranja / section.jp-blanca)
     3) INTERNAS — reglas de las páginas internas (brand-*, bg-white/5, gradient-*)
   ========================================================================== */

/* ==========================================================================
   1) BASE COMPARTIDA — variables, fondo naranja global, scrollbar
   ========================================================================== */
:root{
  --jp-naranja:#ea580c;
  --jp-naranja2:#c2410c;
  --jp-naranja-claro:#fdba74;
  --jp-blanco:#ffffff;
}
html, body { margin:0; padding:0; }
html, body { background-color:var(--jp-naranja); }
body {
  background-image:linear-gradient(180deg,#f97316 0%,#ea580c 50%,#c2410c 100%);
  color:var(--jp-blanco);
  overscroll-behavior:none;
}
main{ background-color:transparent; }
main > :first-child { margin-top:0 !important; }
main > :last-child { margin-bottom:0 !important; }
::-webkit-scrollbar { display:none; }

/* ==========================================================================
   2) HOME (index.html) — header sticky + secciones naranja/blanca + footer
   ========================================================================== */
/* Header sticky naranja translúcido con difuminado */
header{
  background-color:rgba(194,65,12,.35) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(253,186,116,.4) !important;
}
header a, header span, header button{ color:var(--jp-blanco) !important; }
header .text-orange-700{ color:#ffedd5 !important; }
/* Header: pills/botones con fondo claro -> texto oscuro para contraste */
header .bg-orange-50, header [class*="bg-orange-50"],
header .bg-orange-50\/80, header .bg-slate-100, header [class*="bg-slate-100"],
header .bg-white, header [class*="bg-white"] {
  color:#7c2d12 !important;
}
header .bg-orange-50 *, header [class*="bg-orange-50"] *,
header .bg-slate-100 *, header [class*="bg-slate-100"] *,
header .bg-white *, header [class*="bg-white"] * {
  color:#7c2d12 !important;
}
/* Botones ES/EN/中文: el activo lleva bg-white */
header button.bg-white{ color:#ea580c !important; }
header button.text-slate-600, header button.text-slate-900{ color:#7c2d12 !important; }

/* ==== SECCIÓN NARANJA (impar) ==== */
section.jp-naranja{
  background-color:var(--jp-naranja) !important;
  background-image:linear-gradient(180deg,#f97316,#c2410c) !important;
}
section.jp-naranja h1, section.jp-naranja h2, section.jp-naranja h3,
section.jp-naranja p, section.jp-naranja li, section.jp-naranja a,
section.jp-naranja span, section.jp-naranja div, section.jp-naranja button{
  color:var(--jp-blanco) !important;
}
section.jp-naranja .text-slate-300, section.jp-naranja .text-slate-400,
section.jp-naranja .text-slate-500{ color:#ffe4cc !important; }
section.jp-naranja .text-emerald-400, section.jp-naranja .text-emerald-500,
section.jp-naranja .text-emerald-600, section.jp-naranja .text-emerald-700{ color:#bbf7d0 !important; }
section.jp-naranja .text-rose-500, section.jp-naranja .text-rose-600{ color:#fecaca !important; }
section.jp-naranja [class*="bg-white"], section.jp-naranja [class*="bg-slate-50"]{
  background-color:#ffffff !important;
  border-color:#e2e8f0 !important;
}
section.jp-naranja [class*="bg-white"] *, section.jp-naranja [class*="bg-slate-50"] *{
  color:#000000 !important;
}
section.jp-naranja button.bg-white,
section.jp-naranja button[class*="bg-white"]{
  color:#000000 !important;
  border-color:#e2e8f0 !important;
}
section.jp-naranja button.bg-white *,
section.jp-naranja button[class*="bg-white"] *{
  color:#000000 !important;
}
section.jp-naranja [class*="bg-white"] .text-orange-600,
section.jp-naranja [class*="bg-slate-50"] .text-orange-600,
section.jp-naranja [class*="bg-white"] .text-orange-700,
section.jp-naranja [class*="bg-slate-50"] .text-orange-700{ color:#000000 !important; }
section.jp-naranja [class*="bg-white"] .text-emerald-700,
section.jp-naranja [class*="bg-slate-50"] .text-emerald-700,
section.jp-naranja [class*="bg-white"] .text-emerald-600,
section.jp-naranja [class*="bg-slate-50"] .text-emerald-600{ color:#000000 !important; }

/* ==== SECCIÓN BLANCA (par) ==== */
section.jp-blanca{
  background-color:#fff !important;
  background-image:none !important;
}
section.jp-blanca h1, section.jp-blanca h2, section.jp-blanca h3,
section.jp-blanca p, section.jp-blanca li, section.jp-blanca a,
section.jp-blanca span, section.jp-blanca div, section.jp-blanca button{
  color:#7c2d12 !important;
}
section.jp-blanca .text-slate-900, section.jp-blanca .text-slate-800,
section.jp-blanca .text-slate-700, section.jp-blanca .text-slate-600,
section.jp-blanca .text-slate-500{ color:#7c2d12 !important; }
section.jp-blanca .text-orange-600, section.jp-blanca .text-orange-700,
section.jp-blanca .text-amber-600, section.jp-blanca .text-amber-700{ color:#ea580c !important; }
section.jp-blanca .text-emerald-600, section.jp-blanca .text-emerald-700{ color:#047857 !important; }
section.jp-blanca .text-rose-600{ color:#be123c !important; }
section.jp-blanca [class*="bg-slate-50"], section.jp-blanca [class*="bg-slate-100"]{
  background-color:#f8fafc !important;
}
section.jp-blanca .border-slate-200, section.jp-blanca [class*="border-slate-200"]{
  border-color:#e2e8f0 !important;
}
/* Marquee FX: porcentajes (banderas) -> gris oscuro legible */
section.jp-blanca .bg-rose-50 .text-rose-600,
section.jp-blanca [class*="bg-rose-50"] .text-rose-600,
section.jp-blanca .text-rose-600,
section.jp-blanca .bg-emerald-50 .text-emerald-700,
section.jp-blanca [class*="bg-emerald-50"] .text-emerald-700,
section.jp-blanca .text-emerald-700 {
  color:#374151 !important;
}
/* Métodos de pago (PIX, Boleto, PicPay, TED) -> texto negro sólido */
section.jp-blanca .bg-slate-50 .text-slate-900,
section.jp-blanca .bg-slate-50 .text-slate-800,
section.jp-blanca .bg-slate-50 .text-slate-500,
section.jp-blanca .bg-slate-50 .text-slate-600,
section.jp-blanca .bg-slate-50 .text-slate-700,
section.jp-blanca [class*="bg-slate-50"] .text-slate-900,
section.jp-blanca [class*="bg-slate-50"] .text-slate-800,
section.jp-blanca [class*="bg-slate-50"] .text-slate-700,
section.jp-blanca [class*="bg-slate-50"] .text-slate-600,
section.jp-blanca [class*="bg-slate-50"] .text-slate-500 {
  color:#000000 !important;
}
section.jp-blanca .bg-slate-50 .text-orange-600,
section.jp-blanca [class*="bg-slate-50"] .text-orange-600{ color:#000000 !important; }
section.jp-blanca .bg-slate-50 .text-emerald-700,
section.jp-blanca [class*="bg-slate-50"] .text-emerald-700{ color:#000000 !important; }

/* ==== CIERRES DE CONTRASTE (Home) ==== */
/* Naranja: resaltados strong (PIX/SPEI/UPI...) -> blanco */
section.jp-naranja strong, section.jp-naranja .text-slate-900,
section.jp-naranja .text-slate-800, section.jp-naranja .text-slate-700,
section.jp-naranja .text-slate-600{ color:var(--jp-blanco) !important; }
/* Naranja: pills claros (verde/crema/rosa -> texto oscuro) */
section.jp-naranja .bg-emerald-50, section.jp-naranja [class*="bg-emerald-50"],
section.jp-naranja .bg-orange-50, section.jp-naranja [class*="bg-orange-50"],
section.jp-naranja .bg-rose-50, section.jp-naranja [class*="bg-rose-50"],
section.jp-naranja .bg-amber-50, section.jp-naranja [class*="bg-amber-50"] {
  color:#7c2d12 !important;
}
section.jp-naranja .bg-emerald-50 *, section.jp-naranja [class*="bg-emerald-50"] *,
section.jp-naranja .bg-orange-50 *, section.jp-naranja [class*="bg-orange-50"] *,
section.jp-naranja .bg-rose-50 *, section.jp-naranja [class*="bg-rose-50"] *,
section.jp-naranja .bg-amber-50 *, section.jp-naranja [class*="bg-amber-50"] * {
  color:#7c2d12 !important;
}
/* Blanco: bloque de código oscuro (npm install) -> texto claro */
section.jp-blanca .bg-slate-900, section.jp-blanca [class*="bg-slate-900"] {
  color:#fdba74 !important;
}
section.jp-blanca .bg-slate-900 *, section.jp-blanca [class*="bg-slate-900"] * {
  color:#fdba74 !important;
}
/* ==== FINAL: cards blancas en sección naranja -> texto NEGRO sólido ==== */
section.jp-naranja [class*="bg-white"] *,
section.jp-naranja [class*="bg-slate-50"] * {
  color:#000000 !important;
}
section.jp-naranja [class*="bg-white"] .text-slate-900,
section.jp-naranja [class*="bg-white"] .text-slate-800,
section.jp-naranja [class*="bg-white"] .text-slate-700,
section.jp-naranja [class*="bg-white"] .text-slate-600,
section.jp-naranja [class*="bg-white"] .text-slate-500,
section.jp-naranja [class*="bg-slate-50"] .text-slate-900,
section.jp-naranja [class*="bg-slate-50"] .text-slate-800,
section.jp-naranja [class*="bg-slate-50"] .text-slate-700,
section.jp-naranja [class*="bg-slate-50"] .text-slate-600,
section.jp-naranja [class*="bg-slate-50"] .text-slate-500,
section.jp-naranja [class*="bg-white"] .text-orange-600,
section.jp-naranja [class*="bg-white"] .text-orange-700,
section.jp-naranja [class*="bg-slate-50"] .text-orange-600,
section.jp-naranja [class*="bg-slate-50"] .text-orange-700,
section.jp-naranja [class*="bg-white"] .text-emerald-600,
section.jp-naranja [class*="bg-white"] .text-emerald-700,
section.jp-naranja [class*="bg-slate-50"] .text-emerald-600,
section.jp-naranja [class*="bg-slate-50"] .text-emerald-700 {
  color:#000000 !important;
}
/* Menú móvil desplegable: links en blanco */
#jp-mobile-menu a,
#jp-mobile-menu a:hover {
  color:#ffffff !important;
}

/* Footer naranja con texto blanco (Home) */
footer{
  background-color:var(--jp-naranja2) !important;
  color:var(--jp-blanco) !important;
  border-color:var(--jp-naranja-claro) !important;
}
footer h1, footer h2, footer h3, footer h4, footer p, footer li, footer a,
footer span, footer div{ color:var(--jp-blanco) !important; }
footer .text-slate-500, footer .text-slate-600, footer .text-slate-700{ color:#ffe4cc !important; }
footer .text-orange-600, footer .text-orange-700{ color:#ffedd5 !important; }
/* Footer: bloques con fondo blanco (API Status, badges) -> texto oscuro */
footer .bg-white, footer [class*="bg-white"] {
  color:#7c2d12 !important;
}
footer .bg-white *, footer [class*="bg-white"] * {
  color:#7c2d12 !important;
}
footer .bg-white .text-emerald-700, footer [class*="bg-white"] .text-emerald-700{ color:#047857 !important; }
footer .bg-white .text-orange-600, footer [class*="bg-white"] .text-orange-600{ color:#ea580c !important; }
/* Footer: badge naranja claro (256-Bit...) -> texto oscuro */
footer .bg-orange-50, footer [class*="bg-orange-50"] {
  color:#7c2d12 !important;
}
footer .bg-orange-50 *, footer [class*="bg-orange-50"] * {
  color:#7c2d12 !important;
}

/* ==========================================================================
   3) INTERNAS — estilos base + tema de las 9 páginas internas
   ========================================================================== */
.glow-cyan {
  box-shadow: 0 0 25px -5px rgba(0, 242, 254, 0.35);
}
.glow-card:hover {
  box-shadow: 0 0 30px -5px rgba(0, 242, 254, 0.15);
}
.text-gradient-cyan {
  background: linear-gradient(135deg, #ffffff 40%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-green {
  background: linear-gradient(135deg, #00f2fe 0%, #00ffa3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grid-mesh {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==== THEMA NARANJA INTERNAS ==== */
/* (header y footer ya cubiertos en la base compartida; aquí lo específico) */
header .bg-emerald-950\/60, header [class*="bg-emerald-950"] { color:#7c2d12 !important; }
/* Bloques con fondo claro (tarjetas, pills) -> fondo blanco + texto negro */
.bg-brand-surface, .bg-brand-surface\/70, [class*="bg-brand-surface"],
.bg-brand-card, [class*="bg-brand-card"] {
  background-color:#ffffff !important;
  color:#000000 !important;
}
.bg-brand-surface *, .bg-brand-surface\/70 *,
[class*="bg-brand-surface"] *, [class*="bg-brand-card"] * {
  color:#000000 !important;
}
.bg-brand-surface .text-slate-300, .bg-brand-surface .text-slate-400,
.bg-brand-surface .text-slate-200, .bg-brand-surface .text-slate-500,
[class*="bg-brand-surface"] .text-slate-300, [class*="bg-brand-surface"] .text-slate-400,
[class*="bg-brand-surface"] .text-slate-200, [class*="bg-brand-surface"] .text-slate-500 {
  color:#1f2937 !important;
}
/* Tarjetas/pills con bg-white/5 o bg-white/10 -> blanco sólido */
.bg-white\/5, .bg-white\/10 { background-color:#ffffff !important; color:#000000 !important; }
.bg-white\/5 *, .bg-white\/10 * { color:#000000 !important; }
/* Texto de acento cyan -> naranja */
.text-brand-cyan { color:#ea580c !important; }
.text-brand-neonGreen { color:#fdba74 !important; }
.text-brand-darkBg { color:#c2410c !important; }
.text-brand-dark { color:#c2410c !important; }
.text-brand-dark\/80 { color:#c2410c !important; }
/* Títulos blancos (eran blancos sobre oscuro, ahora oscuros sobre naranja) */
.text-gradient-cyan, .text-gradient-green {
  background:none !important;
  -webkit-text-fill-color:#ffffff !important;
  color:#ffffff !important;
}
h1, h2, h3 { color:#ffffff; }
/* Footer internas: variantes */
footer .text-slate-400, footer .text-slate-500 { color:#ffe4cc !important; }
footer .bg-white\/5, footer .bg-white\/10 { background-color:#ffffff !important; color:#7c2d12 !important; }
footer .bg-white\/5 *, footer .bg-white\/10 * { color:#7c2d12 !important; }
footer .px-2 { color:#7c2d12 !important; }
/* Botones CTA gradiente cyan -> naranja */
.from-brand-cyan, .from-brand-neonGreen { --jpx:1; }