@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@400;500;600;700&display=swap');
/* fonts */
/* ============================================================
   DIGITAL PREMIUM — WEBFONTS (línea gráfica oficial)
   ------------------------------------------------------------
   Matched to the official social creatives:
     • Montserrat — headlines (ExtraBold/Black ITALIC, uppercase)
                    and body copy (Regular / Italic).
     • Oswald     — condensed uppercase, wide-tracked labels in the
                    purple chips ("SERIES", "CADA MES",
                    "TEMPORADA 3"), stats and counters.
   Loaded from Google Fonts. Replace with licensed files if the
   brand supplies them.
   ============================================================ */



/* colors */
/* ============================================================
   DIGITAL PREMIUM — COLOR TOKENS  (línea gráfica oficial)
   Purple-dominant: deep plum backgrounds lit by orchid/fuchsia
   glows, with a yellow-lime highlight on key words and CTAs.
   Values sampled from the official social creatives.
   ============================================================ */

:root {
  /* ---- Brand purples (the signature family) ---- */
  --dp-plum-950:     #2E052B;   /* deepest background, vignettes        */
  --dp-plum-900:     #350941;   /* core background                      */
  --dp-plum-800:     #420A48;   /* background mid tone                  */
  --dp-grape:        #610978;   /* lit background / spotlight           */
  --dp-purple:       #6D1B99;   /* chip gradient start, core purple     */
  --dp-orchid:       #963395;   /* chip gradient end                    */
  --dp-fuchsia:      #9F30B8;   /* glow / neon highlight                */
  --dp-magenta:      #B620D0;   /* hot neon rim light                   */
  --dp-violet:       #5119C7;   /* electric violet (secondary)          */
  --dp-lavender:     #E6D6EE;   /* light variant tint                   */
  --dp-lavender-50:  #F7F1F9;   /* light variant page                   */
  --dp-plum-ink:     #2A0A3D;   /* headline ink on light backgrounds    */

  /* ---- Legacy spectrum (kept for compatibility) ---- */
  --dp-crimson:      #E4093B;   /* danger / expired                     */
  --dp-red:          #C8102E;
  --dp-blue:         #2536D8;
  --dp-indigo:       #1B1F66;

  /* ---- Accents ---- */
  --dp-lime:         #D4D32C;   /* brand yellow-lime — the highlight    */
  --dp-lime-bright:  #E2E13F;   /* hover / glow                         */
  --dp-gold:         #FFC400;   /* warning                              */
  --dp-whatsapp:     #25D366;   /* WhatsApp green (contact only)        */

  /* ---- Ink / neutrals (plum-black family) ---- */
  --dp-black:        #170620;   /* page black, plum                     */
  --dp-ink-900:      #210A2C;   /* deepest surface                      */
  --dp-ink-800:      #2C0F3B;   /* raised surface                       */
  --dp-ink-700:      #3A164D;   /* card on dark                         */
  --dp-ink-600:      #4C2263;   /* hairline / border on dark            */
  --dp-ink-500:      #653483;   /* muted stroke                         */
  --dp-navy:         #2A0A3D;   /* on-light headline (now plum ink)     */

  --dp-gray-400:     #B89CC9;   /* muted text on dark                   */
  --dp-gray-300:     #DCCAE6;   /* secondary text on dark               */
  --dp-gray-200:     #E6D6EE;
  --dp-gray-100:     #F2EAF6;
  --dp-white:        #FFFFFF;
  --dp-off-white:    #F7F1F9;   /* light page bg (lavender)             */

  /* ---- Semantic ---- */
  --dp-success:      #2ECC71;
  --dp-warning:      #FFC400;
  --dp-danger:       #E4093B;
  --dp-info:         #9F30B8;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* Surfaces (dark-first product) */
  --surface-page:        var(--dp-black);
  --surface-base:        var(--dp-ink-900);
  --surface-raised:      var(--dp-ink-800);
  --surface-card:        var(--dp-ink-700);
  --surface-overlay:     rgba(23, 6, 32, 0.74);
  --surface-light:       var(--dp-off-white);
  --surface-light-card:  var(--dp-white);

  /* Text */
  --text-strong:    var(--dp-white);
  --text-body:      var(--dp-gray-300);
  --text-muted:     var(--dp-gray-400);
  --text-on-light:  var(--dp-plum-ink);
  --text-on-light-muted: #6B4C7E;
  --text-accent:    var(--dp-lime);
  --text-link:      var(--dp-lime);

  /* Borders */
  --border-subtle:  var(--dp-ink-600);
  --border-strong:  var(--dp-ink-500);
  --border-accent:  var(--dp-lime);
  --border-glow:    var(--dp-fuchsia);
  --border-on-light: rgba(42, 10, 61, 0.14);

  /* Interactive (primary action = lime CTA) */
  --action-primary-bg:       var(--dp-lime);
  --action-primary-text:     var(--dp-plum-ink);
  --action-primary-hover:    var(--dp-lime-bright);
  --action-secondary-bg:     var(--dp-purple);
  --action-secondary-text:   var(--dp-white);
  --action-secondary-hover:  var(--dp-orchid);
  --action-ghost-border:     var(--dp-ink-500);
  --focus-ring:              var(--dp-lime);
}

/* typography */
/* ============================================================
   DIGITAL PREMIUM — TYPOGRAPHY TOKENS (línea gráfica oficial)
   Headlines: Montserrat heavy ITALIC, uppercase, one or two
   words flipped to lime. Labels: Oswald uppercase, wide tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display:   'Montserrat', system-ui, sans-serif;  /* headlines */
  --font-body:      'Montserrat', system-ui, sans-serif;  /* body copy */
  --font-condensed: 'Oswald', 'Montserrat', sans-serif;   /* labels, stats */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* ---- Display (marketing/hero): heavy italic ---- */
  --text-display-xl: italic 900 clamp(3rem, 6vw, 5rem)/0.98 var(--font-display);
  --text-display-lg: italic 800 clamp(2.4rem, 4.5vw, 3.6rem)/1.02 var(--font-display);
  --text-display-md: italic 800 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--font-display);
  --text-display-sm: italic 800 1.75rem/1.08 var(--font-display);

  /* ---- Headings (product UI): upright bold ---- */
  --text-h1: 800 2rem/1.12 var(--font-display);
  --text-h2: 700 1.5rem/1.18 var(--font-display);
  --text-h3: 700 1.2rem/1.25 var(--font-display);
  --text-h4: 600 1rem/1.3 var(--font-display);

  /* ---- Body ---- */
  --text-lg:   400 1.125rem/1.6 var(--font-body);
  --text-base: 400 1rem/1.6 var(--font-body);
  --text-sm:   400 0.875rem/1.55 var(--font-body);
  --text-xs:   500 0.75rem/1.5 var(--font-body);
  --text-quote: italic 500 1rem/1.5 var(--font-body);

  /* ---- Condensed label (chips, eyebrows, stats) ---- */
  --text-eyebrow: 500 0.8125rem/1 var(--font-condensed);
  --text-label:   600 0.875rem/1.1 var(--font-condensed);
  --text-chip:    500 1rem/1 var(--font-condensed);
  --text-stat:    700 clamp(2.4rem, 5vw, 4rem)/0.92 var(--font-condensed);

  /* ---- Letter-spacing ---- */
  --tracking-eyebrow: 0.16em; /* @kind other */
  --tracking-chip:    0.22em; /* @kind other */
  --tracking-tight:  -0.01em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:    0.04em; /* @kind other */
}

/* Convenience utility classes (optional for consumers) */
.dp-eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-accent);
}
.dp-display { font: var(--text-display-lg); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.dp-display em { color: var(--text-accent); font-style: inherit; }
.dp-stat { font: var(--text-stat); text-transform: uppercase; }

/* effects */
/* ============================================================
   DIGITAL PREMIUM — GRADIENT & EFFECT TOKENS (línea oficial)
   Deep plum grounds, orchid spotlights, purple label chips,
   neon fuchsia glow and lens-flare sparkles.
   ============================================================ */

:root {
  /* Signature diagonal brand gradient (plum → purple → orchid) */
  --grad-brand: linear-gradient(115deg,
      #2E052B 0%,
      #420A48 28%,
      #6D1B99 62%,
      #9F30B8 100%); /* @kind other */

  /* Radial "spotlight" — lit purple center, plum vignette */
  --grad-brand-radial: radial-gradient(120% 120% at 25% 15%,
      #9F30B8 0%,
      #610978 34%,
      #420A48 64%,
      #2E052B 100%); /* @kind other */

  /* Label chip / pill (SERIES · PELÍCULAS · CADA MES) */
  --grad-chip: linear-gradient(90deg, #6D1B99 0%, #963395 100%); /* @kind other */

  /* Light variant (lavender → orchid wash) */
  --grad-light: linear-gradient(180deg, #F7F1F9 0%, #E6D6EE 55%, #9F70B4 100%); /* @kind other */

  /* Lime CTA */
  --grad-lime: linear-gradient(100deg, #D4D32C 0%, #E2E13F 100%); /* @kind other */

  /* Dark surface gradient (cards / panels on dark) */
  --grad-surface: linear-gradient(160deg, #2C0F3B 0%, #210A2C 100%); /* @kind other */

  /* Image scrims */
  --grad-scrim-bottom: linear-gradient(to top,
      rgba(46,5,43,0.94) 0%,
      rgba(46,5,43,0.55) 40%,
      rgba(46,5,43,0) 100%); /* @kind other */
  --grad-scrim-top: linear-gradient(to bottom,
      rgba(46,5,43,0.85) 0%,
      rgba(46,5,43,0) 100%); /* @kind other */

  /* Lens-flare sparkle (corner glints on frames/cards) */
  --fx-sparkle: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.85) 12%, rgba(214,120,255,0.55) 32%, rgba(159,48,184,0) 70%); /* @kind other */

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 6px 18px rgba(20,0,25,0.5);
  --shadow-lg:   0 18px 44px rgba(20,0,25,0.6);
  --shadow-card: 0 10px 30px rgba(20,0,25,0.55);

  /* Brand glows */
  --glow-magenta: 0 12px 40px rgba(182, 32, 208, 0.45);
  --glow-purple:  0 0 0 1px rgba(159,48,184,0.55), 0 0 28px rgba(159,48,184,0.45);
  --glow-blue:    0 12px 40px rgba(81, 25, 199, 0.40);
  --glow-lime:    0 8px 26px rgba(212, 211, 44, 0.38);

  /* Shadow on light surfaces */
  --shadow-on-light: 0 14px 40px rgba(42, 10, 61, 0.16);

  /* ---- Blur ---- */
  --blur-panel: blur(18px); /* @kind other */
  --blur-chip:  blur(8px); /* @kind other */
}

/* layout */
/* ============================================================
   DIGITAL PREMIUM — SPACING, RADIUS, LAYOUT TOKENS
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- (brand uses generous, soft corners + full pills) */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;   /* big content cards (the white "Horarios" card) */
  --radius-2xl:  36px;
  --radius-pill: 999px;  /* chips, CTAs, stat capsules                    */
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind other */
  --container-narrow: 760px; /* @kind other */
  --gutter: clamp(16px, 4vw, 48px); /* @kind other */

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