/*
 * VIRTU4L Design System
 * Based on The Verge 2024 DESIGN.md — exact tokens
 *
 * Canvas: #131313 (Canvas Black — near-black, no blue tint, no light mode)
 * Accent: #3cffd0 (Jelly Mint) + #5200ff (Verge Ultraviolet)
 * No gradient backgrounds. No gradient text on non-wordmark elements.
 * Elevation = 1px solid borders. Zero box-shadow.
 * Display: Barlow Condensed 900 (Manuka substitute, +0.10 line-height)
 * Body: Space Grotesk (PolySans substitute)
 * Mono: Space Mono (PolySans Mono substitute) — ALWAYS UPPERCASE
 */

/* ─── Google Fonts (Manuka / PolySans / PolySans Mono substitutes) ───────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ─── Design Tokens — The Verge exact palette ───────────────────────────── */
:root {
  /* ── Canvas & Surfaces ─────────────────────────────────────────────── */
  --canvas:       #131313;  /* The Verge Canvas Black */
  --surface-slate:#2d2d2d;  /* Secondary card surface */
  --surface-frame:#313131;  /* Image frame border, deep-nested */
  --surface-950:  #0a0a0a;  /* Footer deepest */

  /* ── The Verge Brand Hazards ──────────────────────────────────────── */
  --tv-mint:          #3cffd0;  /* Jelly Mint — primary CTA, active state */
  --tv-mint-border:   #309875;  /* Console Mint Border — card outlines */
  --tv-violet:        #5200ff;  /* Verge Ultraviolet — secondary hazard */
  --tv-violet-soft:   rgba(82,0,255,0.90); /* 0.9 alpha version */
  --tv-violet-dark:   #3d00bf;  /* Purple Rule — timeline rail */
  --tv-link-blue:     #3860be;  /* Deep Link Blue — all hover states */
  --tv-focus:         #1eaedb;  /* Focus Cyan — keyboard focus rings only */

  /* ── Semantic Tile Colors (saturated story blocks) ─────────────────── */
  --tile-mint:    #3cffd0;  /* Jelly Mint tile */
  --tile-violet:  #5200ff;  /* Ultraviolet tile */
  --tile-yellow:  #f5f500;  /* Hazard Yellow tile */
  --tile-pink:    #ff00a0;  /* Hot Pink tile */
  --tile-orange:  #ff6b00;  /* Electric Orange tile */
  --tile-white:   #ffffff;  /* White spotlight tile */
  --tile-slate:   #2d2d2d;  /* Quiet dark tile */

  /* ── VIRTU4L Brand Moments (red/purple — kept for brand-only use) ─── */
  --vr-red:      #ff2d20;
  --vr-red-deep: #e02216;
  --vr-purple:   #7c3aed;
  --vr-pink:     #be185d;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text-primary:   #ffffff;    /* Hazard White — headlines on canvas */
  --text-secondary: #949494;    /* Bylines, timestamps, metadata */
  --text-muted:     #e9e9e9;    /* Button text on slate — slightly off-white */
  --text-inverted:  #131313;    /* Text on mint / yellow / white tiles */
  --text-absolute:  #000000;    /* Absolute black on bright tiles (AA contrast) */

  /* ── Borders — 1px hairlines ARE the elevation system ─────────────── */
  --border-quiet:  rgba(255,255,255,0.12);  /* canvas card default */
  --border-mid:    rgba(255,255,255,0.20);
  --border-strong: #ffffff;                 /* Hazard White hairline */
  --border-mint:   #3cffd0;                 /* Jelly Mint hairline — Level 3 */
  --border-violet: #5200ff;                 /* Ultraviolet — Level 4 */
  --border-frame:  #313131;                 /* Image frame */
  --border-rule:   #3d00bf;                 /* Timeline rail (Purple Rule) */
  --border-atm:    rgba(0,0,0,0.33);        /* Level 5 atmospheric ring */

  /* ── Brand gradient — 1px promo BORDER only, never fill ───────────── */
  --gradient-brand: linear-gradient(135deg, var(--vr-red), var(--vr-pink), var(--tv-violet));

  /* ── Typography — The Verge font stack ────────────────────────────── */
  --font-display: 'Barlow Condensed', Impact, Helvetica, Arial, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', Helvetica, Arial, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', Courier, monospace;
  --font-serif:   Georgia, 'Times New Roman', serif; /* FK Roman substitute */

  /* ── Radius Scale (The Verge's 8-step system) ──────────────────────── */
  --radius-tag:    2px;     /* typewriter tag / input */
  --radius-img:    3px;     /* inline images */
  --radius-nested: 4px;     /* nested card images, small buttons */
  --radius-sm:     8px;
  --radius-card:   20px;    /* standard story tile */
  --radius-feature:24px;    /* feature tile / primary CTA pill */
  --radius-promo:  30px;    /* large promotional buttons */
  --radius-pill:   40px;    /* outlined CTA — loudest pill */
  --radius-circle: 9999px;  /* avatars, icon buttons */

  /* ── Spacing (8px base unit) ─────────────────────────────────────── */
  --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;
}

/* ─── Global Reset ────────────────────────────────────────────────────────── */

body {
  background-color: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* ─── Typography — The Verge scale ───────────────────────────────────────── */

/* Display — Barlow Condensed (Manuka substitute) */
/* Note: add ~0.10 extra line-height vs Manuka spec due to metric differences */
.vr-display-hero { /* Manuka hero 107px → 900, line-height 0.90 */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 8vw, 107px);
  line-height: 0.90;
  letter-spacing: 1.07px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.vr-display-xl { /* 90px secondary */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6.5vw, 90px);
  line-height: 0.90;
  text-transform: uppercase;
  color: var(--text-primary);
}

.vr-display-lg { /* 60px tertiary */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 0.90;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* PolySans substitutes — Space Grotesk */
.vr-headline-lg   { font-family: var(--font-body); font-size: 34px; font-weight: 700; line-height: 1.00; color: var(--text-primary); }
.vr-headline-md   { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.00; color: var(--text-primary); }
.vr-headline-sm   { font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.00; color: var(--text-primary); }
.vr-eyebrow       { font-family: var(--font-body); font-size: 19px; font-weight: 300; line-height: 1.20; letter-spacing: 1.9px; text-transform: uppercase; color: var(--text-primary); }
.vr-kicker-xl     { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.10; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-primary); }
.vr-body          { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.60; color: var(--text-primary); }
.vr-body-compact  { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.60; color: var(--text-secondary); }

/* PolySans Mono substitute — Space Mono — ALWAYS UPPERCASE */
.vr-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 2.00;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.vr-label-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.vr-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tv-mint);
}

.vr-timestamp {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ─── Section Pill Badge — dark + mint text ──────────────────────────────── */
.vr-section-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--canvas);
  border: 1px solid var(--border-quiet);
  color: var(--tv-mint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: var(--radius-circle);
  line-height: 1;
}

/* ─── Override: strip gradient text from titles ──────────────────────────── */
/* The Verge: gradient ONLY on brand wordmark, never section headlines */
.text-gradient-virtual,
.text-gradient-vr {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background-clip: unset !important;
  color: var(--text-primary) !important;
}

/* Explicit brand gradient class — logo/wordmark use only */
.tv-brand-gradient {
  background: var(--gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── Strip gradient backgrounds — The Verge: solid blocks only ──────────── */

section[class*="bg-gradient"] {
  background: var(--canvas) !important;
  background-image: none !important;
}

section[class*="bg-gray-800"],
section[class*="bg-gray-900"] {
  background-color: var(--canvas) !important;
}

/* Cards with purple/pink gradient fills → surface-slate */
div[class*="from-purple"],
div[class*="from-pink"],
div[class*="via-purple"],
div[class*="via-pink"],
div[class*="from-gray-800"][class*="to-gray-900"],
div[class*="from-gray-900"][class*="to-gray-800"],
div[class*="from-gray-800/60"] {
  background: var(--surface-slate) !important;
  background-image: none !important;
}

/* CTA buttons with purple/pink gradients → slate pill */
a[class*="bg-gradient"][class*="from-purple"],
button[class*="bg-gradient"][class*="from-purple"],
a[class*="bg-gradient"][class*="via-purple"],
button[class*="bg-gradient"][class*="via-purple"],
a[class*="bg-gradient"][class*="from-pink"],
button[class*="bg-gradient"][class*="from-pink"] {
  background: var(--surface-slate) !important;
  background-image: none !important;
  color: var(--text-muted) !important;
}

/* Red gradient CTAs → solid red */
a[class*="bg-gradient"][class*="from-red"],
button[class*="bg-gradient"][class*="from-red"],
a[class*="bg-gradient"][class*="from-orange"],
button[class*="bg-gradient"][class*="from-orange"] {
  background-color: var(--vr-red) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Decorative blur blobs → hide */
div[class*="blur-xl"][class*="from-purple"],
div[class*="blur-xl"][class*="from-blue"],
div[class*="blur-xl"][class*="from-pink"],
div[class*="animate-pulse"][class*="bg-gradient"] {
  display: none !important;
}

/* ─── HEADER — The Verge clean nav ──────────────────────────────────────── */
/*
 * Nav: thin #131313 bar, white links, mono UPPERCASE category labels,
 * mint pill CTA right, link hover → Deep Link Blue #3860be
 */

.vr-header {
  background-color: var(--canvas) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--border-quiet) !important;
  box-shadow: none !important;
}

/* Nav links: white → Deep Link Blue on hover */
.vr-header .nav-link,
.vr-header .text-white {
  color: var(--text-primary) !important;
  transition: color 150ms ease;
}

.vr-header .nav-link:hover {
  color: var(--tv-link-blue) !important;
  text-decoration: none;
}

/* Active nav link → mint underline inset */
.vr-header .nav-link.active,
.vr-header a.text-red-400,
.vr-header a.vr-nav-active {
  color: var(--text-primary) !important;
  box-shadow: 0px -1px 0px 0px inset var(--tv-mint);
}

/* Header phone number */
.vr-header [class*="text-white"] {
  color: var(--text-primary) !important;
}

/* Mobile menu border */
.vr-header .border-gray-800 {
  border-color: var(--border-quiet) !important;
}

/* Mobile toggle button */
.vr-header button.text-white {
  color: var(--text-primary) !important;
}

/* CTA in header: red → Jelly Mint pill */
.vr-header a.bg-red-600,
.vr-header .bg-red-600 {
  background-color: var(--tv-mint) !important;
  background-image: none !important;
  color: var(--text-absolute) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.vr-header a.bg-red-600:hover,
.vr-header .bg-red-600:hover {
  background-color: rgba(60, 255, 208, 0.80) !important;
}

/* Language toggle */
.vr-header .border-white\/30 {
  border-color: var(--border-quiet) !important;
}

/* ─── Elevation — The Verge 7-level border system ────────────────────────── */
/* Level 0: no border, no shadow — default canvas text */
/* Level 2: 1px #313131 hairline — image frames */
/* Level 3: 1px #3cffd0 — active state */
/* Level 4: 1px #5200ff — promo state */
/* Level 5: rgba(0,0,0,0.33) 1px ring — atmospheric stacked cards */
/* Level 7: Saturated accent fill — loudest elevation */

.vr-card {
  background-color: var(--canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  transition: color 150ms ease; /* The Verge: hover = text color only, no lift */
  box-shadow: none;
}

.vr-card:hover {
  box-shadow: none !important;
  /* Title inside transitions to Deep Link Blue — set on child headline */
}

.vr-card:hover .vr-card-headline {
  color: var(--tv-link-blue);
}

.vr-card.active,
.vr-card.selected {
  border-color: var(--tv-mint); /* Level 3 */
  box-shadow: none !important;
}

.vr-card-feature {
  background-color: var(--canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-feature);
  box-shadow: none;
}

/* Promo card: gradient as 1px BORDER only (Level 4 variant) */
.vr-card-promo {
  position: relative;
  border-radius: var(--radius-feature);
  padding: 1px;
  background: var(--gradient-brand); /* gradient only as border shell */
}
.vr-card-promo-inner {
  background: var(--canvas);
  border-radius: calc(var(--radius-feature) - 1px);
  padding: 24px;
}

/* ─── Story Tiles — saturated color-block elevation (Level 7) ────────────── */
.vr-tile-mint   { background-color: var(--tile-mint);   border-radius: var(--radius-card); color: var(--text-absolute); }
.vr-tile-violet { background-color: var(--tile-violet); border-radius: var(--radius-card); color: #ffffff; }
.vr-tile-yellow { background-color: var(--tile-yellow); border-radius: var(--radius-card); color: var(--text-absolute); }
.vr-tile-pink   { background-color: var(--tile-pink);   border-radius: var(--radius-card); color: #ffffff; }
.vr-tile-orange { background-color: var(--tile-orange); border-radius: var(--radius-card); color: #ffffff; }
.vr-tile-white  { background-color: var(--tile-white);  border-radius: var(--radius-card); color: var(--text-absolute); border: 1px solid var(--border-frame); }
.vr-tile-slate  { background-color: var(--tile-slate);  border-radius: var(--radius-card); color: #ffffff; border: 1px solid var(--border-strong); }
.vr-tile-ink    { background-color: #000000;             border-radius: var(--radius-card); color: #ffffff; }

/* ─── Buttons — The Verge 2024 exact spec ────────────────────────────────── */

/* Primary — Jelly Mint Pill (#3cffd0, black text, Mono UPPERCASE) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--tv-mint);
  color: var(--text-absolute);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  border-radius: var(--radius-feature); /* 24px */
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease;
  box-shadow: none;
}

.btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.20);
  color: var(--text-absolute);
  box-shadow: 0 0 0 1px #c2c2c2;
}

/* Secondary — Dark Slate Pill (#2d2d2d, muted text) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--surface-slate);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  border: none;
  border-radius: var(--radius-feature);
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease;
  box-shadow: none;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.20);
  color: var(--text-absolute);
  box-shadow: 0 0 0 1px #c2c2c2;
}

/* Ghost / Outlined Mint — Tertiary CTA */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--tv-mint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid var(--tv-mint);
  border-radius: var(--radius-pill); /* 40px — loudest outlined pill */
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  box-shadow: none;
}

.btn-ghost:hover {
  background-color: var(--tv-mint);
  color: var(--text-absolute);
}

/* Calendar CTA (same intent as primary) */
.btn-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--tv-mint);
  color: var(--text-absolute);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  border-radius: var(--radius-feature);
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease;
  box-shadow: none;
}

.btn-calendar:hover {
  background-color: rgba(60, 255, 208, 0.80);
}

/* ─── Non-interactive pill tags ──────────────────────────────────────────── */
.vr-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  border-radius: 20px;
  padding: 4px 10px;
  line-height: 1;
}

.vr-badge-mint   { background-color: var(--tv-mint);    color: var(--text-absolute); }
.vr-badge-violet { background-color: var(--tile-violet); color: #ffffff; }
.vr-badge-red    { background-color: var(--vr-red);      color: #ffffff; }
.vr-badge-slate  { background-color: var(--surface-slate); color: var(--text-muted); border: 1px solid var(--border-quiet); }
.vr-badge-outline-mint { background: transparent; color: var(--tv-mint); border: 1px solid var(--tv-mint); }

/* ─── Eventos Especiales Cards ───────────────────────────────────────────── */

.vr-event-card {
  background-color: var(--canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: color 150ms ease;
  color: var(--text-primary);
}

.vr-event-card:hover .vr-event-title {
  color: var(--tv-link-blue);
}

.vr-event-card:hover {
  border-color: var(--tv-mint); /* Level 3 on hover */
}

.vr-event-icon {
  width: 44px;
  height: 44px;
  background-color: var(--tv-mint);
  border-radius: var(--radius-nested);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vr-event-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--tv-mint);
}

.vr-event-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.10;
  transition: color 150ms ease;
}

.vr-event-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.60;
  flex: 1;
}

/* ─── Nav Links (outside header) ─────────────────────────────────────────── */
.vr-nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 150ms ease;
}

.vr-nav-link:hover { color: var(--tv-link-blue); text-decoration: none; }
.vr-nav-link.active {
  color: var(--text-primary);
  box-shadow: 0px -1px 0px 0px inset var(--tv-mint);
}

/* ─── Step Indicator ─────────────────────────────────────────────────────── */

.step-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--border-quiet);
  margin: 0 6px;
  transition: background-color 250ms ease, transform 250ms ease;
}

.step-dot.active    { background-color: var(--tv-mint); transform: scale(1.3); }
.step-dot.completed { background-color: #10b981; }

/* ─── WhatsApp Float ─────────────────────────────────────────────────────── */

.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  left: auto;
  width: max-content;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  background-color: #25d366;
  color: #ffffff;
  border-radius: var(--radius-circle);
  padding: 12px 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 200ms ease, filter 200ms ease;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: none;
}

.whatsapp-float:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.whatsapp-notification-badge {
  position: absolute; top: -10px; right: -10px;
  background-color: var(--vr-red);
  color: white; border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--canvas);
}

/* ─── Cotizador Components ───────────────────────────────────────────────── */

.option-card           { transition: border-color 200ms ease, transform 200ms ease; box-shadow: none !important; }
.option-card:hover     { box-shadow: none !important; transform: translateY(-2px); }
.option-card.selected  { box-shadow: none !important; border-color: var(--tv-mint) !important; }

.step-card             { transition: border-color 200ms ease; box-shadow: none !important; }
.step-card.active      { box-shadow: none !important; border-color: var(--tv-mint) !important; }

.price-display {
  background-color: var(--canvas);
  border: 1px solid var(--tv-mint);
  color: var(--tv-mint);
  padding: 1rem 2rem;
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  box-shadow: none !important;
}

/* Gotcha package cards */
.gotcha-card-basico     { background: rgba(255,45,32,0.08)  !important; border: 1px solid rgba(255,45,32,0.30)  !important; }
.gotcha-card-intermedio { background: rgba(245,158,11,0.08) !important; border: 1px solid rgba(245,158,11,0.30) !important; }
.gotcha-card-max        { background: rgba(82,0,255,0.10)   !important; border: 1px solid rgba(82,0,255,0.35)   !important; }

/* ─── Game Cards (juegos.html) ───────────────────────────────────────────── */

.game-card {
  box-shadow: none !important;
  transition: color 150ms ease, border-color 150ms ease;
  border: 1px solid var(--border-strong);
}

.game-card:hover {
  border-color: var(--tv-mint);
  box-shadow: none !important;
}

.game-card:hover .game-card-title {
  color: var(--tv-link-blue);
}

/* ─── Global Shadow Strip ────────────────────────────────────────────────── */
*[class*="shadow"] {
  box-shadow: none !important;
}

/* ─── Info Banner ────────────────────────────────────────────────────────── */
.vr-banner-warning {
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--radius-sm);
  color: #fbbf24;
}

/* ─── Footer — stays #131313, not pure black ──────────────────────────────── */
footer {
  background-color: var(--surface-950) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-quiet);
  color: var(--text-primary);
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--surface-slate); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tv-mint); }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL RED → MINT SWEEP
   All bg-red-* buttons and links in sections become Jelly Mint primary.
   Exceptions: slider arrows (#heroPrevBtn, #heroNextBtn) stay dark.
   ═══════════════════════════════════════════════════════════════════════════ */

section button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn),
section a[class*="bg-red"],
.page button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn),
.page a[class*="bg-red"],
main  button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn),
main  a[class*="bg-red"] {
  background-color: var(--tv-mint) !important;
  background-image: none !important;
  color: var(--text-absolute) !important;
  border-radius: var(--radius-feature) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  box-shadow: none !important;
  border: none !important;
  transition: background-color 180ms ease !important;
}

section button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn):hover,
section a[class*="bg-red"]:hover,
.page  button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn):hover,
.page  a[class*="bg-red"]:hover,
main   button[class*="bg-red"]:not(#heroPrevBtn):not(#heroNextBtn):hover,
main   a[class*="bg-red"]:hover {
  background-color: rgba(60, 255, 208, 0.82) !important;
  transform: none !important;
}

/* Slider navigation arrows — keep dark/subtle, they are not primary CTAs */
button#heroPrevBtn,
button#heroNextBtn {
  background-color: rgba(0, 0, 0, 0.55) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 9999px !important;
}
button#heroPrevBtn:hover,
button#heroNextBtn:hover {
  background-color: rgba(60, 255, 208, 0.18) !important;
  border: 1px solid var(--tv-mint) !important;
}

/* Slider dots — active mint, inactive subtle */
button.slider-dot {
  background-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}
button.slider-dot[class*="ring-"],
button.slider-dot.active {
  background-color: var(--tv-mint) !important;
}

/* Package card avatar circles (w-20 bg-red-500 rounded-full) → surface-frame */
section div[class*="bg-red-5"][class*="rounded-full"],
section div[class*="bg-red-6"][class*="rounded-full"] {
  background-color: var(--surface-frame) !important;
  background-image: none !important;
}

/* Feature icon boxes inside sections (w-12 bg-red-600 rounded-lg) → mint */
section div[class*="bg-red-6"][class*="rounded-lg"],
section div[class*="bg-red-5"][class*="rounded-lg"] {
  background-color: var(--tv-mint) !important;
  background-image: none !important;
}
section div[class*="bg-red-6"][class*="rounded-lg"] i,
section div[class*="bg-red-5"][class*="rounded-lg"] i {
  color: var(--text-absolute) !important;
}

/* Package/section accent text (text-red-400 headings, price labels) → mint */
section .text-red-400,
.page   .text-red-400 {
  color: var(--tv-mint) !important;
}

/* "MÁS POPULAR" and similar inline badges: red pill → mint */
section div[class*="bg-red-6"][class*="rounded-full"],
.page   div[class*="bg-red-6"][class*="rounded-full"] {
  background-color: var(--tv-mint) !important;
  color: var(--text-absolute) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* Hero large play icon circle (bg-red-600 rounded-full pointer-events-none) → canvas */
section div[class*="bg-red-6"][class*="rounded-full"][class*="pointer-events-none"] {
  background-color: var(--canvas) !important;
  border: 1px solid var(--border-quiet) !important;
}

/* ─── SPRINT 3: Verge + Tailwind + shadcn pattern merge ─────────────────── */

/* GCS-1: Nav links — Space Mono UPPERCASE, mint hover */
.vr-header .nav-link {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.vr-header .nav-link:hover,
.vr-header a.nav-link:hover {
  color: var(--tv-mint) !important;
  text-decoration: none;
}
.vr-header .nav-link.active {
  color: var(--tv-mint) !important;
}
/* Kill red hover on any lingering Tailwind hover:text-red-* in header */
.vr-header a[class*="text-red"],
.vr-header a[class*="hover:text-red"] {
  color: var(--text-secondary) !important;
}
.vr-header a[class*="hover:text-red"]:hover {
  color: var(--tv-mint) !important;
}
/* Phone number — mono */
.vr-header span.font-medium {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* GCS-2: Card border-radius — Verge 20px standard (Tailwind rounded-xl = 12px, not enough) */
section .rounded-xl,
.page .rounded-xl,
main .rounded-xl {
  border-radius: 20px !important;
}
/* Keep icon boxes at a tighter radius — don't over-round small squares */
section .rounded-xl.w-10,
section .rounded-xl.w-12,
.page .rounded-xl.w-10,
.page .rounded-xl.w-12,
main .rounded-xl.w-10,
main .rounded-xl.w-12 {
  border-radius: 12px !important;
}

/* GCS-2b: Default card padding — content cards without Tailwind p-* on the card root */
section .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not([class*="min-w-"]):not([class*="w-["]):not(.cotizador-xbox-mini-price-card),
.page .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not(.cotizador-xbox-mini-price-card),
main .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not(.cotizador-xbox-mini-price-card) {
  padding: 1.25rem;
}
@media (min-width: 1024px) {
  section .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not([class*="min-w-"]):not([class*="w-["]):not(.cotizador-xbox-mini-price-card),
  .page .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not(.cotizador-xbox-mini-price-card),
  main .rounded-xl:not(.overflow-hidden):not(.h-full):not([class*="p-"]):not(.w-10):not(.w-12):not(.w-16):not(.cotizador-xbox-mini-price-card) {
    padding: 1.5rem;
  }
}

/* Split cards (image + body): generous text block padding */
section .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
.page .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
main .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
.game-card.rounded-xl > div:not(.absolute):not(.age-badge) {
  padding: 1.25rem 1.25rem !important;
}
@media (min-width: 640px) {
  section .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
  .page .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
  main .rounded-xl.overflow-hidden > div:not(.absolute):not(.age-badge):not([class*="aspect-"]),
  .game-card.rounded-xl > div:not(.absolute):not(.age-badge) {
    padding: 1.5rem 1.5rem !important;
  }
}

/* GCS-3: Footer — full Verge restyle */
.vr-footer {
  background: var(--canvas) !important;
  border-top: 1px solid var(--border-quiet) !important;
}
.vr-footer-heading {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  margin-bottom: 16px !important;
}
.vr-footer p,
.vr-footer li {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.vr-footer a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  transition: color 150ms ease;
}
.vr-footer a:hover {
  color: var(--tv-mint) !important;
}
/* Kill any remaining red/orange hover in footer */
footer a[class*="hover:text-red"],
footer a[class*="hover:text-orange"] {
  color: var(--text-secondary) !important;
}
footer a[class*="hover:text-red"]:hover,
footer a[class*="hover:text-orange"]:hover {
  color: var(--tv-mint) !important;
}

/* GCS-4: shadcn-pattern form inputs (used in cotizador) */
.vr-input {
  background: var(--canvas);
  border: 1px solid var(--border-quiet);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 150ms ease;
  outline: none;
}
.vr-input::placeholder { color: var(--text-secondary); }
.vr-input:focus { border-color: var(--tv-mint); }
.vr-input:hover:not(:focus) { border-color: #3d3d3d; }

/* GCS-5: Slider caption overlay — display font */
#centerImageTitle {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 5vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
#centerImageDesc {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}

/* ─── A11y: focus, motion, theme (Vercel / AccessLint pass) ───────────────── */
html {
  color-scheme: dark;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 100;
  padding: 8px 16px;
  background: var(--tv-mint);
  color: var(--text-absolute);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.nav-link:focus-visible,
.catalog-tab:focus-visible,
.genre-filter:focus-visible,
.xbox-genre-filter:focus-visible,
.finder-option:focus-within,
.vr-input:focus-visible,
.option-card:focus-visible {
  outline: 2px solid var(--tv-mint);
  outline-offset: 2px;
}

.vr-header a[aria-label="WhatsApp"] {
  background: var(--tv-mint) !important;
  color: var(--text-absolute) !important;
}
.vr-header a[aria-label="WhatsApp"]:hover {
  background: rgba(60, 255, 208, 0.85) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .game-card:hover {
    transform: none !important;
  }
}

/* Cotizador: option cards as buttons */
button.option-card {
  display: block;
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
button.option-card.option-card--toggle {
  text-align: center;
}

.game-card .text-gray-400 {
  color: var(--text-secondary) !important;
}

#tab-xbox .xbox-genre-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Cotizador — Xbox walk-in row (image + 2 price tiles, equal height) */
.cotizador-xbox-mini-row {
  --xbox-mini-h: 196px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 56rem;
  margin: 0 auto 2rem;
}

.cotizador-xbox-mini-media {
  border: 1px solid var(--border-quiet);
  max-height: 200px;
  min-height: 0;
}

.cotizador-xbox-mini-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  object-position: center center;
}

.cotizador-xbox-mini-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  min-height: 148px;
  background: var(--surface-slate);
  border: 1px solid var(--border-quiet);
}

.cotizador-xbox-mini-price-card--featured {
  border-color: var(--tv-mint);
}

.cotizador-xbox-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.35rem;
  border-radius: 0.5rem;
  background: var(--tv-mint);
  color: var(--text-absolute);
  flex-shrink: 0;
}

.cotizador-xbox-mini-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
}

.cotizador-xbox-mini-icon--vr {
  flex-direction: column;
  gap: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.2rem 0 0;
}

.cotizador-xbox-mini-icon-vr {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}

.cotizador-xbox-mini-icon--vr svg {
  width: 1rem;
  height: 1rem;
}

.cotizador-xbox-mini-label {
  margin: 0;
  line-height: 1.2;
}

.cotizador-xbox-mini-label--mint {
  color: var(--tv-mint);
}

.cotizador-xbox-mini-price {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.cotizador-xbox-mini-price--mint {
  color: var(--tv-mint);
}

.cotizador-xbox-mini-duration {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--text-secondary);
}

@media (min-width: 640px) {
  .cotizador-xbox-mini-row {
    grid-template-columns: 1fr 1fr;
  }

  .cotizador-xbox-mini-media {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .cotizador-xbox-mini-row {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0.75rem;
    height: var(--xbox-mini-h);
    max-height: var(--xbox-mini-h);
  }

  .cotizador-xbox-mini-media {
    grid-column: auto;
    height: 100%;
    max-height: var(--xbox-mini-h);
  }

  .cotizador-xbox-mini-media img {
    max-height: none;
    min-height: 100%;
  }

  .cotizador-xbox-mini-price-card {
    height: 100%;
    max-height: var(--xbox-mini-h);
    min-height: 0;
    padding: 1rem 0.875rem;
  }
}

.cotizador-xbox-mini .btn-primary,
.cotizador-xbox-mini .btn-ghost {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  padding: 14px 24px;
  width: 100%;
}

@media (min-width: 640px) {
  .cotizador-xbox-mini .btn-primary,
  .cotizador-xbox-mini .btn-ghost {
    width: auto;
    min-width: 220px;
  }
}

/* ─── Juegos catalog — Hub layout (tabs → sticky filters → compact grid) ─── */
.juegos-page-catalog {
  background: color-mix(in srgb, var(--surface-slate) 94%, transparent) !important;
}

.catalog-tabs-panel.juegos-hub-shell {
  padding-top: 1.25rem;
}

@media (max-width: 639px) {
  .catalog-tabs-panel.juegos-hub-shell {
    padding-top: 0;
  }
}

.juegos-hub-sticky {
  position: sticky;
  top: 4rem;
  z-index: 25;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
  border-bottom: 1px solid var(--border-quiet);
}

.juegos-hub-sticky .genre-filter-panel,
.juegos-hub-sticky .juegos-catalog-toolbar {
  margin: 0;
  border-radius: 14px;
}

.juegos-hub-sticky .vr-footer-heading {
  margin-bottom: 0.625rem;
  font-size: 10px;
}

.juegos-hub .juegos-hub-grid {
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .juegos-hub .juegos-hub-grid {
    gap: 1rem;
  }
}

.juegos-hub .game-card:hover {
  border-color: var(--tv-mint);
}

.juegos-hub .game-card.juegos-scroll-card:hover {
  transform: translateY(-3px);
  border-color: var(--tv-mint);
}

@media (prefers-reduced-motion: reduce) {
  .juegos-hub .game-card.juegos-scroll-card:hover {
    transform: none;
  }
}

.juegos-hub .game-card.rounded-xl > div.aspect-square {
  padding: 0 !important;
}

.juegos-hub .game-card.rounded-xl > div:not(.absolute):not(.age-badge):not(.aspect-square) {
  padding: 0.5rem !important;
}

.juegos-hub .game-card .p-3 {
  padding: 0.5rem !important;
}

.catalog-tabs-shell .age-badge,
.juegos-hub .age-badge,
.game-card .age-badge {
  padding: 0.25rem 0.45rem !important;
  font-size: 9px;
  line-height: 1;
  border-radius: 4px;
  top: 6px;
  right: 6px;
}

.juegos-hub .game-card h4 {
  font-size: 0.75rem;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}

.juegos-hub .game-card p.text-xs {
  font-size: 0.65rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.juegos-hub .category-title {
  padding: 0.625rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: 12px;
}

.juegos-hub .category-title h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.juegos-hub .juegos-hub-block {
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .juegos-hub .juegos-hub-block {
    margin-bottom: 2.5rem;
  }
}

.juegos-xbox-pricing .cotizador-xbox-mini-row {
  margin-bottom: 0;
}