@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,900&family=Just+Another+Hand&display=swap');

/* tokens/fonts.css */
/* ============================================================
   Pablo Gil — Webfonts
   Syne (display/headings), DM Sans (body), Just Another Hand
   (handwritten accent, used in the "Dinero Claro" sub-brand).
   All three are the brand's real fonts and are served from
   Google Fonts. Consumers linking styles.css inherit these.
   ============================================================ */



/* tokens/colors.css */
/* ============================================================
   Pablo Gil — Color tokens
   Source of truth: brandkit_pablogiltrader_v1.pdf
   The palette is the Tailwind "slate" family + a signature
   burnt-orange accent. Orange is reserved for small strategic
   highlights and actions — never large fills.
   ============================================================ */

:root {
  /* ---- Base brand palette (brand kit COLOR 01–06) ---- */
  --pg-orange:        #E35014; /* 01 · accent, keywords, primary actions */
  --pg-navy:          #1E293B; /* 02 · titles, dark section backgrounds  */
  --pg-blue:          #235683; /* 03 · mid-blue section backgrounds      */
  --pg-slate:         #475569; /* 04 · body copy on light backgrounds    */
  --pg-cloud:         #F1F5F9; /* 05 · light section backgrounds         */
  --pg-white:         #FFFFFF; /* 06 · text on dark, secondary buttons   */

  /* ---- Extended ramp (harmonious, for borders/hover/depth) ---- */
  --pg-orange-hover:  #C7440F; /* orange pressed/darker                  */
  --pg-orange-tint:   #FBEAE1; /* faint orange wash for highlight blocks */
  --pg-navy-900:      #131C2B; /* deepest navy — overlays, footers       */
  --pg-slate-400:     #94A3B8; /* muted text, captions, disabled         */
  --pg-slate-300:     #CBD5E1; /* hairline borders on light              */
  --pg-slate-200:     #E2E8F0; /* card borders, dividers                 */

  /* ---- Dinero Claro sub-brand ---- */
  --dc-cream:         #FFF7EA; /* warm paper background                  */
  --dc-orange:        #E35014;
  --dc-navy:          #1E293B;

  /* ---- Semantic aliases ---- */
  --color-accent:            var(--pg-orange);
  --color-accent-hover:      var(--pg-orange-hover);
  --text-heading:            var(--pg-navy);
  --text-body:               var(--pg-slate);
  --text-muted:              var(--pg-slate-400);
  --text-on-dark:            var(--pg-white);
  --text-on-dark-muted:      #B9C4D4;

  --surface-page:            var(--pg-white);
  --surface-subtle:          var(--pg-cloud);
  --surface-card:            var(--pg-white);
  --surface-dark:            var(--pg-navy);
  --surface-dark-alt:        var(--pg-blue);
  --surface-warm:            var(--dc-cream);

  --border-subtle:           var(--pg-slate-200);
  --border-strong:           var(--pg-slate-300);
  --border-on-dark:          rgba(255,255,255,0.16);

  --focus-ring:              rgba(227,80,20,0.35);
}

/* tokens/typography.css */
/* ============================================================
   Pablo Gil — Typography tokens
   Headings/UI: Syne Bold  ·  Body: DM Sans Regular
   Accent script: Just Another Hand (Dinero Claro only)
   Base sizes from brand kit: título 38px, subtítulo 22px,
   párrafo 16px. Scale below extends around those anchors.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Syne", "Trebuchet MS", sans-serif;   /* headings, buttons, labels */
  --font-body:    "DM Sans", system-ui, sans-serif;      /* body copy, UI text        */
  --font-script:  "Just Another Hand", "Bradley Hand", cursive; /* Dinero Claro accent */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-bold:    700; /* @kind other */ /* Syne headings + primary buttons — Syne caps at 700 */
  --fw-black:   900; /* @kind other */ /* DM Sans Black — Dinero Claro headlines ONLY (never Syne) */

  /* ---- Type scale (px anchors from brand kit) ---- */
  --fs-display: 3.5rem;   /* 56 · hero */
  --fs-h1:      2.375rem; /* 38 · brand-kit título */
  --fs-h2:      1.75rem;  /* 28 */
  --fs-h3:      1.375rem; /* 22 · brand-kit subtítulo */
  --fs-lg:      1.125rem; /* 18 · lead paragraph */
  --fs-body:    1rem;     /* 16 · brand-kit párrafo */
  --fs-sm:      0.875rem; /* 14 · captions, meta */
  --fs-xs:      0.75rem;  /* 12 · labels, eyebrows */

  /* ---- Line heights ---- */
  --lh-tight:   1.08;  /* @kind other */ /* display */
  --lh-heading: 1.18;  /* @kind other */ /* headings */
  --lh-body:    1.65;  /* @kind other */ /* paragraphs */
  --lh-snug:    1.4;   /* @kind other */ /* UI */

  /* ---- Tracking ---- */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-normal:    0;      /* @kind other */
  --ls-eyebrow:   0.14em;  /* @kind other */ /* uppercase eyebrows / labels */
}

/* tokens/spacing.css */
/* ============================================================
   Pablo Gil — Spacing, radius, shadow, layout tokens
   8px base rhythm. Radii are moderate (web/course-platform
   feel) — pills for buttons/chips, soft rounding for cards.
   ============================================================ */

:root {
  /* ---- Spacing (8px rhythm, 4px half-steps) ---- */
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  3rem;    /* 48 */
  --space-8:  4rem;    /* 64 */
  --space-9:  6rem;    /* 96 */

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;   /* inputs */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   24px;   /* feature panels */
  --radius-pill: 999px;  /* buttons, chips */

  /* ---- Border widths ---- */
  --bw-hairline: 1px;    /* @kind other */
  --bw-regular:  1.5px;  /* @kind radius */

  /* ---- Elevation — cool slate-tinted shadows, never black ---- */
  --shadow-xs: 0 1px 2px rgba(30,41,59,0.06);
  --shadow-sm: 0 2px 8px rgba(30,41,59,0.08);
  --shadow-md: 0 8px 24px rgba(30,41,59,0.10);
  --shadow-lg: 0 20px 48px rgba(30,41,59,0.14);
  --shadow-accent: 0 10px 28px rgba(227,80,20,0.28); /* orange CTA lift */

  /* ---- Layout ---- */
  --container:      1200px; /* @kind other */
  --container-text: 720px;  /* @kind spacing */
  --control-h:      40px;   /* @kind spacing */
  --control-h-lg:   48px;   /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */
}

/* styles.css */
/* ============================================================
   Pablo Gil — Design System · global entry point
   Consumers link THIS file only. Keep it @import lines only.
   ============================================================ */






/* página */

  html { scroll-padding-top: 132px; }
  body { margin: 0; background: #fff; font-family: var(--font-body); color: var(--pg-slate); }
  a { color: var(--pg-orange); text-decoration: none; }
  a:hover { color: var(--pg-orange-hover); text-decoration: underline; text-underline-offset: 3px; }
  img { display: block; max-width: 100%; }
  h1, h2, h3, h4 { font-family: var(--font-display); color: var(--pg-navy); margin: 0; letter-spacing: -0.02em; text-wrap: pretty; }
  p { margin: 0; line-height: 1.65; text-wrap: pretty; }
  strong { color: var(--pg-navy); font-weight: 700; }
  @keyframes pgUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes pgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (max-width: 1024px) {
    [data-hero] { padding: 24px 20px 40px !important; }
    [data-hero-col] { gap: 12px !important; }
    [data-hero-lead] { font-size: 17px !important; }
    [data-hero] h1 { font-size: clamp(28px, 6.2vw, 38px) !important; }
    [data-hero-sub] { display: none !important; }
    [data-hero-kicker] { font-size: 16px !important; }
    [data-hero-stats] { order: 3; padding-top: 18px !important; margin-top: 0 !important; gap: 20px !important; }
    [data-hero-stats] div > div:first-child { font-size: 22px !important; }
    [data-hero-media] { order: 4; }
  }
  @keyframes pgSpin { to { transform: rotate(360deg); } }
  @keyframes pgSpinBack { to { transform: rotate(-360deg); } }
  @keyframes pgPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
  @media (prefers-reduced-motion: reduce) { [data-orbit], [data-orbit] * { animation: none !important; } }
  [data-anim] { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    [data-anim] { animation: pgUp 520ms cubic-bezier(0.22,1,0.36,1) forwards; }
  }
  body { overflow-x: hidden; }
  @media (max-width: 640px) {
    html { scroll-padding-top: 72px; }
    [data-pgheader] > div { padding: 8px 14px !important; gap: 10px !important; flex-wrap: nowrap !important; }
    [data-pgheader] img { height: 24px !important; }
    [data-pgheader] [data-esc="barraEtiqueta"], [data-pgheader-cta] { display: none !important; }
    [data-pgcd] { gap: 5px !important; }
    [data-pgcd] > div { min-width: 38px !important; padding: 4px 6px !important; border-radius: 8px !important; }
    [data-pgcd] [data-cd] { font-size: 16px !important; }
    [data-pgcd] > div > span:last-child { font-size: 9px !important; }
    [data-hero] { padding: 20px 16px 36px !important; }
    [data-hero] h1 { font-size: clamp(26px, 7.4vw, 34px) !important; }
    [data-hero-kicker] { font-size: 14px !important; padding-left: 12px !important; }
    [data-hero-lead] { font-size: 16px !important; }
    [data-orbit-box] { width: calc(100% - 96px) !important; min-width: 0 !important; }
    [data-orbit] [style*="height: 34px"] { height: 28px !important; padding: 0 10px !important; font-size: 11px !important; }
  }
  summary::-webkit-details-marker { display: none; }
  details[open] > summary > span:last-child { background: var(--pg-orange); color: #fff; }

/* estados */
[data-pgs="s1"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s2"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s3"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s4"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s5"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s6"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s7"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}
[data-pgs="s8"]:hover{background: var(--pg-navy) !important; color: #fff !important; text-decoration: none !important}
[data-pgs="s9"]:hover{background: var(--pg-navy) !important; color: #fff !important; text-decoration: none !important}
[data-pgs="s10"]:hover{background: transparent !important; color: var(--pg-orange) !important; text-decoration: none !important}