/* Copia del styles.css real del proyecto de Claude Design (Welfi Design System) */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --v5-font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --v5-font-body:"DM Sans",system-ui,sans-serif;
  --v5-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --v5-text-2xs:0.625rem;
  --v5-text-xs:0.6875rem;
  --v5-text-sm:0.8125rem;
  --v5-text-base:0.875rem;
  --v5-text-md:1rem;
  --v5-text-lg:1.125rem;
  --v5-text-xl:1.375rem;
  --v5-text-2xl:1.75rem;
  --v5-text-3xl:2.25rem;
  --v5-text-4xl:3rem;

  --v5-bg-page:#ffffff;
  --v5-bg-page-accent:#ffffff;
  --v5-surface:#ffffff;
  --v5-surface-elevated:#ffffff;
  --v5-surface-muted:#f5f5f7;
  --v5-surface-dark:#0c0c1d;
  --v5-surface-dark-subtle:#12122a;
  --v5-surface-glass:rgba(255,255,255,.06);
  --v5-surface-glass-border:rgba(255,255,255,.1);

  --v5-brand:#3246ff;
  --v5-brand-light:#5c6dff;
  --v5-brand-subtle:rgba(50,70,255,.08);
  --v5-brand-glow:rgba(50,70,255,.25);
  --v5-teal:#80d4ce;
  --v5-teal-glow:rgba(128,212,206,.3);

  --welfi-blue:#3246ff;
  --welfi-green:#a8da92;
  --welfi-navy:#101b42;
  --welfi-light-blue:#b5c1ec;
  --welfi-teal:#80d4ce;
  --welfi-ink:#141219;
  --welfi-paper:#fafafa;

  --v5-text-primary:#0f0f1a;
  --v5-text-secondary:#6b6b80;
  --v5-text-tertiary:#9e9eb5;
  --v5-text-quaternary:#c4c4d4;
  --v5-text-inverse:#ffffff;
  --v5-text-inverse-muted:rgba(255,255,255,.55);

  --v5-border:rgba(0,0,0,.05);
  --v5-border-subtle:rgba(0,0,0,.03);

  --v5-positive:#00c896;
  --v5-positive-bg:rgba(0,200,150,.1);
  --v5-negative:#ff4757;
  --v5-negative-bg:rgba(255,71,87,.1);
  --v5-warning:#f59e0b;
  --v5-warning-bg:rgba(245,158,11,.1);
  --v5-warning-glow:rgba(245,158,11,.22);
  --welfi-success-text:#0d9a68;
  --welfi-error-text:#d60303;

  --product-pesos:#3246ff;      --product-pesos-bg:rgba(50,70,255,.08);
  --product-dolares:#6eccc5;    --product-dolares-bg:rgba(110,204,197,.08);
  --product-emergencia:#818cf8; --product-emergencia-bg:rgba(129,140,248,.08);
  --product-objetivos:#a8da92;  --product-objetivos-bg:rgba(168,218,146,.08);
  --product-packs:#f59e0b;      --product-packs-bg:rgba(245,158,11,.08);
  --product-retiro:#6ee7b7;     --product-retiro-bg:rgba(110,231,183,.08);
  --product-compartidos:#e5582f; --product-compartidos-bg:rgba(229,88,47,.08);

  --v5-space-1:.25rem; --v5-space-2:.5rem;  --v5-space-3:.75rem;
  --v5-space-4:1rem;   --v5-space-5:1.25rem;--v5-space-6:1.5rem;
  --v5-space-8:2rem;   --v5-space-10:2.5rem;--v5-space-12:3rem; --v5-space-16:4rem;

  --v5-radius-sm:8px; --v5-radius-md:12px; --v5-radius-lg:16px;
  --v5-radius-xl:20px;--v5-radius-2xl:24px;--v5-radius-round:9999px;

  --v5-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --v5-shadow-md:0 4px 12px -2px rgba(0,0,0,.08);
  --v5-shadow-lg:0 12px 32px -8px rgba(0,0,0,.12);
  --v5-shadow-glow-brand:0 8px 32px -8px var(--v5-brand-glow);

  --welfi-gradient-brand:linear-gradient(76deg,#80d4ce 2.85%,#3246ff 97.15%);
  --welfi-gradient-cta:linear-gradient(to right,#3246ff,#5568ff);
  --v5-hero-bg:linear-gradient(135deg,#f2f5ff 0%,#edf8f6 25%,#f5f1ff 50%,#eff8ee 75%,#edf2ff 100%);
  --v5-hero-shadow:0 20px 48px -12px rgba(50,70,255,.16),inset 0 1px 0 rgba(255,255,255,.9);
  --v5-hero-bg-size:350% 350%;

  --v5-ease-smooth:cubic-bezier(0.16,1,0.3,1);
  --v5-ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --v5-duration-fast:150ms;
  --v5-duration-normal:250ms;
  --v5-duration-slow:400ms;

  --theme-bg-page:var(--v5-bg-page);
  --theme-surface:var(--v5-surface);
  --theme-surface-muted:var(--v5-surface-muted);
  --theme-surface-dark:var(--v5-surface-dark);
  --theme-brand:var(--v5-brand);
  --theme-brand-light:var(--v5-brand-light);
  --theme-brand-subtle:var(--v5-brand-subtle);
  --theme-accent:var(--v5-teal);
  --theme-text-primary:var(--v5-text-primary);
  --theme-text-secondary:var(--v5-text-secondary);
  --theme-text-tertiary:var(--v5-text-tertiary);
  --theme-text-inverse:var(--v5-text-inverse);
  --theme-border:var(--v5-border);
  --theme-positive:var(--v5-positive);
  --theme-negative:var(--v5-negative);
  --theme-warning:var(--v5-warning);
  --theme-font-display:var(--v5-font-display);
  --theme-font-body:var(--v5-font-body);
  --theme-progress-gradient:linear-gradient(76deg,var(--v5-teal) 2.85%,var(--v5-brand) 97.15%);
}

body{margin:0;background:var(--theme-bg-page);color:var(--theme-text-primary);font-family:var(--theme-font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--theme-font-display);margin:0}
a{color:var(--v5-brand);text-decoration:none}
a:hover{color:var(--v5-brand-light);text-decoration:underline}
.welfi-tabular{font-variant-numeric:tabular-nums}

@keyframes v5-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes v5-fade-in{from{opacity:0}to{opacity:1}}
@keyframes v5-hero-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.v5-animate-in{animation:v5-fade-up var(--v5-duration-slow) var(--v5-ease-smooth) both}
@media (prefers-reduced-motion:reduce){.v5-animate-in{animation:none}}