/* =====================================================================
   Ecosistemas Digitales · Sell-U — tokens de tema.
   Paleta EXACTA solicitada por el usuario, estructura (espaciado, sombras,
   radios, tipografía) heredada del Sell-U Design System.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Marca (hex exactos del usuario) ---- */
  --navy: #1B2A4A;
  --gold: #F5A623;
  --white: #FFFFFF;
  --gray: #F8F9FA;

  /* ---- Escala navy derivada ---- */
  --navy-900: #1B2A4A;
  --navy-800: #213354;
  --navy-700: #2a3f63;
  --navy-600: #344c75;
  --navy-300: #8a93a8;
  --navy-100: #dfe3ec;
  --navy-50:  #eef1f6;

  /* ---- Escala dorada derivada ---- */
  --gold-700: #b9760f;
  --gold-500: #F5A623;
  --gold-300: #f8c569;
  --gold-100: #fde9c5;
  --gold-50:  #fef6e9;

  /* ---- Superficies ---- */
  --paper:   #F8F9FA;
  --paper-2: #f1f3f7;
  --surface: #FFFFFF;

  /* ---- Texto ---- */
  --fg-primary:   #1B2A4A;
  --fg-secondary: #47506a;
  --fg-tertiary:  #6b7488;
  --fg-muted:     #98a0b1;
  --fg-on-navy:   #eef1f6;

  /* ---- Bordes ---- */
  --border:        #e4e7ee;
  --border-strong: #ccd1dd;
  --border-subtle: #eef0f5;

  /* ---- Semánticos (desaturados, fintech-quiet) ---- */
  --success:    #1f8a5b;
  --success-bg: #e7f3ec;
  --success-fg: #146647;
  --danger:     #c0432f;
  --danger-bg:  #fbeae7;
  --info:       #2a6fdb;
  --info-bg:    #e9f0fb;

  /* ---- Radios ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- Sombras suaves en dos capas ---- */
  --shadow-xs: 0 1px 2px rgba(27,42,74,0.05);
  --shadow-sm: 0 1px 2px rgba(27,42,74,0.06), 0 1px 3px rgba(27,42,74,0.05);
  --shadow-md: 0 2px 6px rgba(27,42,74,0.06), 0 6px 16px rgba(27,42,74,0.07);
  --shadow-lg: 0 4px 12px rgba(27,42,74,0.08), 0 16px 32px rgba(27,42,74,0.09);
  --shadow-xl: 0 8px 24px rgba(27,42,74,0.10), 0 28px 56px rgba(27,42,74,0.12);
  --ring-focus: 0 0 0 4px rgba(27,42,74,0.14);
  --ring-gold:  0 0 0 4px rgba(245,166,35,0.30);

  /* ---- Tipografía ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* ---- Layout ---- */
  --container: 1160px;
  --container-narrow: 760px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--fg-primary);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; color: var(--navy-900); margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-300); color: var(--navy-900); }

.ed-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.ed-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); }
.ed-tnum { font-variant-numeric: tabular-nums; }

/* ---- Botones ---- */
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 20px; border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ed-btn-gold    { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.ed-btn-gold:hover    { background: var(--gold-300); box-shadow: var(--shadow-md); }
.ed-btn-navy    { background: var(--navy-900); color: var(--white); box-shadow: var(--shadow-sm); }
.ed-btn-navy:hover    { background: var(--navy-700); box-shadow: var(--shadow-md); }
.ed-btn-ghost   { background: transparent; color: var(--navy-900); border-color: var(--border-strong); }
.ed-btn-ghost:hover   { background: var(--surface); border-color: var(--navy-300); box-shadow: var(--shadow-xs); }
.ed-btn-quiet   { background: transparent; color: var(--navy-900); }
.ed-btn-quiet:hover   { background: var(--paper-2); }
.ed-btn-lg { font-size: 16px; padding: 15px 26px; border-radius: 12px; }
.ed-btn-sm { font-size: 13.5px; padding: 9px 14px; }
.ed-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Inputs ---- */
.ed-input {
  font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; width: 100%;
  border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--fg-primary); outline: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ed-input::placeholder { color: var(--fg-muted); }
.ed-input:focus { border-color: var(--navy-700); box-shadow: var(--ring-focus); }

/* ---- Foco accesible ---- */
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-md); }

/* ---- Link con subrayado ---- */
.ed-link {
  color: var(--navy-900); font-weight: 600; cursor: pointer;
  border-bottom: 1.5px solid var(--gold-300); padding-bottom: 1px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.ed-link:hover { border-color: var(--gold); }

/* ---- Animaciones (transform-only: nunca ocultan si se pausan) ---- */
@keyframes ed-fade { from { transform: translateY(10px); } to { transform: none; } }
@keyframes ed-pop  { from { transform: translateY(8px) scale(0.985); } to { transform: none; } }
@keyframes ed-overlay { from { transform: none; } to { transform: none; } }
.ed-view { animation: ed-fade var(--dur-slow) var(--ease-out); }
.ed-stagger > * { animation: ed-fade var(--dur-slow) var(--ease-out) backwards; }
.ed-stagger > *:nth-child(1){animation-delay:0ms}
.ed-stagger > *:nth-child(2){animation-delay:50ms}
.ed-stagger > *:nth-child(3){animation-delay:100ms}
.ed-stagger > *:nth-child(4){animation-delay:150ms}
.ed-stagger > *:nth-child(5){animation-delay:200ms}

/* ---- Scroll suave del shell ---- */
.ed-scroll { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Responsive helpers ---- */
@media (max-width: 860px) {
  .ed-hide-mobile { display: none !important; }
}