/* ============================================================
   Prepárate Conmigo — Design Tokens
   Colors & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lato:wght@400;700;900&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Neutrals
     Source: "Colores de marca.pdf"
     ---------------------------------------------------------- */
  --pc-white:            #FFFFFF;  /* Blanco puro */
  --pc-black:            #30302E;  /* Negro (off-black, warm) */
  --pc-gray:             #CED4DE;  /* Gris (cool light gray) */
  --pc-ink-strong:       #102A47;  /* Tinta intensa — deep navy for headings/strong text */

  /* ----------------------------------------------------------
     COLOR — Azules (signature highlighter blues)
     ---------------------------------------------------------- */
  --pc-blue-bg:          #EAF2FF;  /* Azul muy claro — backgrounds */
  --pc-blue-soft:        #A8C8FE;  /* Azul más claro — tints */
  --pc-blue-gray:        #97B5DB;  /* Azul grisáceo — muted (derived, not in brand palette) */
  --pc-blue-light:       #539EF9;  /* Logo claro — PRIMARY accent */
  --pc-blue:             #3A80F6;  /* Logo oscuro — PRIMARY */
  --pc-blue-dark:        #156ED0;  /* Azul más oscuro — text-on-light, deep accents */

  /* ----------------------------------------------------------
     COLOR — Verdes (calm / reassurance / success)
     ---------------------------------------------------------- */
  --pc-turquoise-light:  #C0DDE5;  /* Turquesa claro */
  --pc-green-light:      #C9DED4;  /* Verde claro */
  --pc-green-medium:     #86C9BC;  /* Verde intermedio — main green accent */
  --pc-green-leaf:       #B7CCAA;  /* Verde hoja */
  --pc-green-dark:       #75C696;  /* Verde oscuro */

  /* ----------------------------------------------------------
     COLOR — Beige / Tierra (warmth, paper, human)
     ---------------------------------------------------------- */
  --pc-mist:             #EDE9E1;  /* Niebla */
  --pc-beige-light:      #FCF7F1;  /* Beige claro — page bg alt */
  --pc-beige-medium:     #ECE6E1;  /* Beige intermedio */
  --pc-terra-light:      #F2CAB9;  /* Tierra claro */
  --pc-terra-dark:       #DD9F81;  /* Tierra oscuro */
  --pc-butter:           #FBE2A0;  /* Mantequilla */

  /* ----------------------------------------------------------
     SEMANTIC COLOR
     ---------------------------------------------------------- */
  --pc-bg:               var(--pc-white);
  --pc-bg-alt:           var(--pc-beige-light);
  --pc-bg-tint:          var(--pc-blue-bg);
  --pc-surface:          var(--pc-white);
  --pc-surface-warm:     var(--pc-beige-light);

  --pc-fg:               var(--pc-black);          /* primary text */
  --pc-fg-strong:        var(--pc-ink-strong);     /* headings, key emphasis */
  --pc-fg-muted:         #6B6B68;                  /* secondary text — derived */
  --pc-fg-subtle:        #9A9A95;                  /* tertiary text — derived */
  --pc-fg-on-dark:       var(--pc-white);

  --pc-border:           var(--pc-gray);
  --pc-border-soft:      var(--pc-mist);
  --pc-divider:          #E6E6E1;

  --pc-primary:          var(--pc-blue);
  --pc-primary-hover:    var(--pc-blue-dark);
  --pc-primary-soft:     var(--pc-blue-bg);
  --pc-primary-fg:       var(--pc-white);

  --pc-accent:           var(--pc-terra-dark);     /* warm contrast accent */
  --pc-success:          var(--pc-green-medium);
  --pc-info:             var(--pc-blue-light);

  /* Highlighter "marker" stroke — the signature gesture */
  --pc-marker:           var(--pc-blue-light);
  --pc-marker-soft:      rgba(83, 158, 249, 0.35);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --pc-font-display:     'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pc-font-body:        'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pc-font-script:      'Caveat', cursive;

  /* Weight scale */
  --pc-w-regular:        400;
  --pc-w-medium:         500;
  --pc-w-semibold:       600;
  --pc-w-bold:           700;
  --pc-w-extrabold:      800;
  --pc-w-black:          900;

  /* Type scale (fluid-ish) */
  --pc-text-xs:          12px;
  --pc-text-sm:          14px;
  --pc-text-base:        16px;
  --pc-text-md:          18px;
  --pc-text-lg:          20px;
  --pc-text-xl:          24px;
  --pc-text-2xl:         30px;
  --pc-text-3xl:         38px;
  --pc-text-4xl:         48px;
  --pc-text-5xl:         64px;
  --pc-text-6xl:         84px;

  --pc-leading-tight:    1.15;
  --pc-leading-snug:     1.3;
  --pc-leading-normal:   1.55;
  --pc-leading-relaxed:  1.7;

  --pc-tracking-tight:   -0.01em;
  --pc-tracking-normal:  0;
  --pc-tracking-wide:    0.04em;
  --pc-tracking-caps:    0.08em;   /* for ALL-CAPS labels mirroring "PREPÁRATE" */

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --pc-space-1:          4px;
  --pc-space-2:          8px;
  --pc-space-3:          12px;
  --pc-space-4:          16px;
  --pc-space-5:          24px;
  --pc-space-6:          32px;
  --pc-space-7:          48px;
  --pc-space-8:          64px;
  --pc-space-9:          96px;
  --pc-space-10:        128px;

  /* ----------------------------------------------------------
     RADIUS
     ---------------------------------------------------------- */
  --pc-radius-sm:        4px;
  --pc-radius:           8px;
  --pc-radius-md:        12px;
  --pc-radius-lg:        20px;
  --pc-radius-xl:        28px;
  --pc-radius-pill:      999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, paper-like (no hard drop shadows)
     ---------------------------------------------------------- */
  --pc-shadow-xs:        0 1px 2px rgba(48, 48, 46, 0.06);
  --pc-shadow-sm:        0 2px 6px rgba(48, 48, 46, 0.06), 0 1px 2px rgba(48, 48, 46, 0.04);
  --pc-shadow:           0 6px 18px rgba(48, 48, 46, 0.08), 0 2px 4px rgba(48, 48, 46, 0.04);
  --pc-shadow-lg:        0 18px 40px rgba(48, 48, 46, 0.10), 0 6px 12px rgba(48, 48, 46, 0.05);
  --pc-shadow-focus:     0 0 0 4px rgba(83, 158, 249, 0.30);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --pc-ease:             cubic-bezier(0.2, 0.6, 0.2, 1);
  --pc-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --pc-dur-fast:         140ms;
  --pc-dur:              220ms;
  --pc-dur-slow:         380ms;
}

/* ==============================================================
   SEMANTIC TYPE STYLES
   Use the *style* (h1, lead, etc.) — not the family directly.
   ============================================================== */

.pc-display {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-black);
  font-size: var(--pc-text-6xl);
  line-height: var(--pc-leading-tight);
  letter-spacing: var(--pc-tracking-tight);
  text-transform: uppercase;
  color: var(--pc-fg);
}

.pc-h1 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-extrabold);
  font-size: var(--pc-text-5xl);
  line-height: var(--pc-leading-tight);
  letter-spacing: var(--pc-tracking-tight);
  color: var(--pc-fg);
}

.pc-h2 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-bold);
  font-size: var(--pc-text-4xl);
  line-height: var(--pc-leading-tight);
  letter-spacing: var(--pc-tracking-tight);
  color: var(--pc-fg);
}

.pc-h3 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-bold);
  font-size: var(--pc-text-3xl);
  line-height: var(--pc-leading-snug);
  color: var(--pc-fg);
}

.pc-h4 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-semibold);
  font-size: var(--pc-text-2xl);
  line-height: var(--pc-leading-snug);
  color: var(--pc-fg);
}

.pc-h5 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-semibold);
  font-size: var(--pc-text-xl);
  line-height: var(--pc-leading-snug);
  color: var(--pc-fg);
}

.pc-eyebrow {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-w-bold);
  font-size: var(--pc-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--pc-tracking-caps);
  color: var(--pc-blue-dark);
}

.pc-lead {
  font-family: var(--pc-font-body);
  font-weight: var(--pc-w-regular);
  font-size: var(--pc-text-lg);
  line-height: var(--pc-leading-relaxed);
  color: var(--pc-fg-muted);
}

.pc-body {
  font-family: var(--pc-font-body);
  font-weight: var(--pc-w-regular);
  font-size: var(--pc-text-base);
  line-height: var(--pc-leading-relaxed);
  color: var(--pc-fg);
}

.pc-small {
  font-family: var(--pc-font-body);
  font-weight: var(--pc-w-regular);
  font-size: var(--pc-text-sm);
  line-height: var(--pc-leading-normal);
  color: var(--pc-fg-muted);
}

.pc-caption {
  font-family: var(--pc-font-body);
  font-weight: var(--pc-w-bold);
  font-size: var(--pc-text-xs);
  letter-spacing: var(--pc-tracking-wide);
  text-transform: uppercase;
  color: var(--pc-fg-muted);
}

.pc-script {
  font-family: var(--pc-font-script);
  font-weight: var(--pc-w-regular);
  font-size: var(--pc-text-4xl);
  line-height: 1;
  color: var(--pc-black);
}

.pc-quote {
  font-family: var(--pc-font-body);
  font-weight: var(--pc-w-regular);
  font-style: italic;
  font-size: var(--pc-text-xl);
  line-height: var(--pc-leading-relaxed);
  color: var(--pc-fg);
}

/* The signature highlighter stroke under a word — used SPARINGLY,
   typically under a single keyword inside a headline. */
.pc-highlight {
  background-image: linear-gradient(180deg, transparent 62%, var(--pc-marker-soft) 62%, var(--pc-marker-soft) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}