/* ═══════════════════════════════════════════════════════════════
   KRECE DESIGN TOKENS — Single source of truth
   Linked from every HTML page BEFORE the page's inline <style>
   Per official Krece Brandbook.
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: "Standard";
  src: url("fonts/standard-book.otf") format("opentype"),
       url("fonts/standard-book-webfont.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Standard";
  src: url("fonts/standard-book-italic.otf") format("opentype"),
       url("fonts/standard-book-italic-webfont.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Standard";
  src: url("fonts/standard-bold.otf") format("opentype"),
       url("fonts/standard-bold-webfont.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Standard";
  src: url("fonts/standard-bold-italic.otf") format("opentype"),
       url("fonts/standard-bold-italic-webfont.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cal Sans";
  src: url("fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "CalSans";
  src: url("fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand font stacks ─────────────────────────────────────── */
  --font-display: "Cal Sans", "CalSans", "Standard", system-ui, -apple-system, sans-serif;
  --font-sans:    "Standard", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Brand tracking (Brandbook: Cal Sans -20, Standard -30) ── */
  --tracking-display: -0.02em;
  --tracking-body:    -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.08em;

  /* ── Primary: Navy (official Krece brand) ── */
  --navy-900: #0C1947;       /* premium dominant background */
  --navy-800: #15225A;       /* cards, elevation on navy */
  --navy-700: #1E2D6E;       /* hover states on navy */

  /* ── Primary: Cyan (official Krece brand) ── */
  --cyan-500: #00BBCE;       /* main accent */
  --cyan-600: #008C9C;       /* hover/dark variant; use over white */
  --cyan-400: #2DCEDD;       /* highlights on navy */
  --cyan-300: #2DCEDD;       /* legacy alias — keep for back-compat */
  --cyan-dark: #006B78;      /* legacy alias */

  /* ── Action: Orange (official Krece brand — primary CTAs) ── */
  --coral-500: #ED5F18;
  --coral-600: #C84D0E;      /* hover */
  --coral-100: #FCE3D2;      /* soft backgrounds (optional) */

  /* ── Neutrals ── */
  --white: #FFFFFF;
  --snow: #F8FAFC;
  --offwhite: #FAFAFC;
  --light-gray: #F4F6F8;

  /* ── Text on light backgrounds ── */
  --charcoal: #0F1024;
  --slate-600: #4A5568;
  --slate-400: #94A3B8;

  /* ── Legacy gray tokens (back-compat) ── */
  --gray-100: #E2E7EC;
  --gray-200: #C8D0D9;
  --gray-300: #9AA5B4;
  --gray-400: #6B7B8D;
  --gray-500: #4A5568;

  /* ── Dark-mode tokens (used in inline styles) ── */
  --dm-bg: #0C1947;
  --dm-surface: #15225A;
  --dm-card: #15225A;
  --dm-card-2: #1E2D6E;
  --dm-border: rgba(255, 255, 255, 0.08);
  --dm-border-2: rgba(255, 255, 255, 0.13);
  --dm-text: #E4EDFF;
  --dm-muted: #7A90A8;
  --dm-subtle: #506070;

  /* ── Semantic (UI states only — never marketing) ── */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;

  /* ── Coral/Orange glow shadow (CTA shadow) ── */
  --shadow-coral: 0 4px 24px rgba(237, 95, 24, 0.25);
  --shadow-coral-hover: 0 8px 32px rgba(237, 95, 24, 0.38);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Klarna-style cream ratio (DEFAULT)
   ~70% warm cream/off-white · ~25% navy · ~5% cyan/coral
   Override the existing --dm-* tokens so the whole site flips
   without rewriting any inline styles.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  /* Official Krece palette — navy, cyan, cream. NO peach. */
  --dm-bg: #FBFAF6;             /* very light cream — main page background */
  --dm-surface: #F4F4F0;        /* slightly tinted cream — alternate sections */
  --dm-card: #FFFFFF;           /* pure white cards */
  --dm-card-2: #F8F6F1;         /* secondary cards */
  --dm-border: rgba(12, 25, 71, 0.08);
  --dm-border-2: rgba(12, 25, 71, 0.14);

  /* Text on cream */
  --dm-text: #0C1947;           /* navy text */
  --dm-muted: #4A5568;          /* secondary copy */
  --dm-subtle: #94A3B8;         /* tertiary / placeholders */

  /* Cyan: brand #00BBCE preserved for backgrounds/masses (per brandbook).
     Darker variant available via --cyan-text for AA contrast on cream when used as type. */
  --cyan-500: #00BBCE;          /* brand cyan — use for backgrounds, surfaces, accents on navy */
  --cyan-text: #008C9C;         /* AA-darker for body text on cream */
  --cyan-300: #00BBCE;
  --cyan-400: #006B78;
}

/* Text uses of cyan on cream backgrounds: darken to ensure AA */
html[data-theme="light"] .section-eyebrow,
html[data-theme="light"] .page-hero-eyebrow,
html[data-theme="light"] .faq-category-title,
html[data-theme="light"] .product-link,
html[data-theme="light"] .press-link,
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
  color: var(--cyan-text) !important;
}

/* Klarna-like accent: subtle warm tint behind sections */
html[data-theme="light"] body {
  background: var(--dm-bg);
}

/* In light mode hide white logos and show dark logos */
html[data-theme="light"] .logo-dark { display: inline-block !important; }
html[data-theme="light"] .logo-light { display: none !important; }
.logo-dark { display: none; }
.logo-light { display: inline-block; }

/* Klarna-style: in light mode, big stats and prominent headings stay NAVY (not cyan).
   Cyan is reserved for small accents/eyebrows/links only. */
html[data-theme="light"] .stat-num,
html[data-theme="light"] .vende-stat-num {
  color: var(--dm-text) !important;        /* navy on cream */
}
html[data-theme="light"] .hero h1 .cyan,
html[data-theme="light"] .page-hero h1 .cyan,
html[data-theme="light"] .cta-section h2 .cyan,
html[data-theme="light"] .hero-left h1 .cyan,
html[data-theme="light"] .final-cta .tagline {
  color: var(--dm-text) !important;        /* prominent text always navy on cream */
}
/* Soften cyan eyebrows so they don't dominate visually — Klarna uses muted accents */
html[data-theme="light"] .section-eyebrow,
html[data-theme="light"] .page-hero-eyebrow,
html[data-theme="light"] .faq-category-title {
  color: var(--cyan-600) !important;
}

/* Homepage hero: NAVY background (per brandbook + contigo.krece.app reference) */
html[data-theme="light"] .hero,
html .hero {
  background: var(--navy-900) !important;
}
html[data-theme="light"] .hero-overlay,
html .hero-overlay {
  background: linear-gradient(to right, var(--navy-900) 0%, var(--navy-900) 32%, transparent 64%) !important;
}
@media (max-width: 768px) {
  html[data-theme="light"] .hero-overlay,
  html .hero-overlay {
    background: transparent !important;
  }
  html[data-theme="light"] .hero-img,
  html .hero-img { opacity: 1 !important; }
}
html[data-theme="light"] .hero h1,
html .hero h1 { color: var(--white) !important; }
html[data-theme="light"] .hero h1 .cyan,
html .hero h1 .cyan { color: var(--cyan-500) !important; }
html[data-theme="light"] .hero .subtitle,
html .hero .subtitle { color: rgba(255, 255, 255, 0.78) !important; }
html[data-theme="light"] .hero-badge,
html .hero-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--cyan-500) !important;
}
html[data-theme="light"] .hero-img { opacity: 1; }
html[data-theme="light"] .hero-scroll,
html .hero-scroll { color: rgba(255, 255, 255, 0.4) !important; }
html[data-theme="light"] .hero-glow,
html .hero-glow {
  background: radial-gradient(circle, rgba(0, 187, 206, 0.08) 0%, rgba(0, 187, 206, 0.02) 45%, transparent 70%) !important;
}

/* Dark sections that have HARDCODED navy gradients — keep them dark in BOTH modes
   for intentional Klarna-style contrast blocks. Just override the radial offset slightly. */
/* card-section already navy regardless — fine */
/* final-cta is now .section-energy (cyan) — fine */

/* Stats section, page-hero (sub-pages), benefits-section, steps-section, etc.
   all use var(--dm-bg) / var(--dm-surface) which now resolve to cream — should work */

/* Hero badge stays light card-style */
html[data-theme="light"] .hero-badge .dot { background: var(--cyan-500) !important; }

/* Fix #productos & #prensa hardcoded background overrides — they used dm-surface with !important */
/* Already use var(--dm-surface) which is now cream — should auto-flip */

/* Stat numbers still cyan-500 (overridden to #008C9C on light = AA) */

/* Subtle: section dividers / borders in light mode */
html[data-theme="light"] .marquee-strip {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="light"] .marquee-item { color: var(--dm-muted) !important; }

/* Trust section anchored to bg in both modes */
html[data-theme="light"] .trust-section { background: var(--dm-bg) !important; }

/* Dark-mode gradient mesh on .card-section,.final-cta — keep navy */
/* already navy in both modes via existing rules */

/* Remove navy-tinted backgrounds added inline to sections in dark mode */
html[data-theme="light"] .section#productos,
html[data-theme="light"] #productos {
  background: var(--dm-surface) !important;
}
html[data-theme="light"] #prensa { background: var(--dm-surface) !important; }
html[data-theme="light"] .testimonials-section { background: var(--dm-surface) !important; }

/* Final CTA legacy class (still in CSS but now unused — safety) */
html[data-theme="light"] .final-cta {
  background: var(--dm-bg) !important;
}

/* Page-hero radial-gradient before — fine since uses cyan-500 rgba */
/* On product sub-pages */
html[data-theme="light"] .page-hero { background: var(--dm-bg) !important; }
html[data-theme="light"] .stats-section { background: var(--dm-surface) !important; }
html[data-theme="light"] .steps-section { background: var(--dm-bg) !important; }
html[data-theme="light"] .benefits-section { background: var(--dm-bg) !important; }
html[data-theme="light"] .faq-section { background: var(--dm-surface) !important; }
html[data-theme="light"] .vende-section { background: var(--dm-surface) !important; }
html[data-theme="light"] .culture-section { background: var(--dm-surface) !important; }
html[data-theme="light"] .jobs-section { background: var(--dm-bg) !important; }
html[data-theme="light"] .careers-hero { background: var(--dm-bg) !important; }
html[data-theme="light"] .careers-hero::before {
  background: radial-gradient(ellipse at 70% 50%, rgba(0,170,170,.07) 0%, transparent 60%) !important;
}

/* CTA navy sections on sub-pages (.cta-section uses navy-900) — keep dark for contrast */
/* No override needed — intentional dark block */

/* Cards with navy backgrounds: float cards, testimonials, benefit cards, step cards
   all use --dm-card which resolves to white in light mode — auto-flip works */

/* Tienda store slides */
html[data-theme="light"] .store-slide {
  background: var(--white) !important;
  border-color: var(--gray-100) !important;
}

/* Press cards already use var(--dm-card) — auto-flip */

/* Rgba white-on-dark elements need fixing for contrast on cream */
html[data-theme="light"] .nav-dropdown {
  background: var(--white) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.12) !important;
}
html[data-theme="light"] .nav-dropdown a:hover {
  background: rgba(0, 170, 170, 0.08) !important;
}

/* Mobile menu drawer */
html[data-theme="light"] .nav-mobile-menu {
  background: var(--dm-bg) !important;
}

/* ── Sections w/ hardcoded navy-900 background → flip to cream in light mode ── */
html[data-theme="light"] .careers-hero,
html[data-theme="light"] .values-section,
html[data-theme="light"] .careers-final-cta,
html[data-theme="light"] .cta-section,
html[data-theme="light"] .card-cta-banner {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}
html[data-theme="light"] .careers-hero::before,
html[data-theme="light"] .values-section::before,
html[data-theme="light"] .careers-final-cta::before,
html[data-theme="light"] .cta-section::before,
html[data-theme="light"] .card-cta-banner::before {
  opacity: .35 !important;
}
html[data-theme="light"] .cta-section h2,
html[data-theme="light"] .careers-final-cta h2,
html[data-theme="light"] .card-cta-banner h2 {
  color: var(--dm-text) !important;
}
html[data-theme="light"] .cta-section p,
html[data-theme="light"] .careers-final-cta p,
html[data-theme="light"] .card-cta-banner p {
  color: var(--dm-muted) !important;
}
/* Value cards on careers — use light card */
html[data-theme="light"] .value-card {
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="light"] .value-card h3,
html[data-theme="light"] .value-card h4 {
  color: var(--dm-text) !important;
}
html[data-theme="light"] .value-card p {
  color: var(--dm-muted) !important;
}
html[data-theme="light"] .value-icon {
  background: rgba(0, 187, 206, 0.08) !important;
  border-color: rgba(0, 187, 206, 0.18) !important;
}

/* Mission/culture/jobs that might have hardcoded styling */
html[data-theme="light"] .mission-section,
html[data-theme="light"] .stats-careers-section {
  background: var(--dm-bg) !important;
}
html[data-theme="light"] .stats-careers-section .stat-num {
  color: var(--dm-text) !important;
}

/* Job cards */
html[data-theme="light"] .job-card {
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="light"] .job-card h3 { color: var(--dm-text) !important; }
html[data-theme="light"] .job-card p { color: var(--dm-muted) !important; }
html[data-theme="light"] .btn-ghost {
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}
html[data-theme="light"] .btn-ghost:hover {
  border-color: var(--cyan-500) !important;
  color: var(--cyan-500) !important;
}

/* Soporte hero & contact section if dark */
html[data-theme="light"] .contact-section { background: var(--dm-bg) !important; }
html[data-theme="light"] .contact-card {
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="light"] .contact-card h3 { color: var(--dm-text) !important; }
html[data-theme="light"] .contact-card p { color: var(--dm-muted) !important; }

/* Filter tabs on careers */
html[data-theme="light"] .filter-tab {
  border-color: var(--dm-border) !important;
  color: var(--dm-muted) !important;
}
html[data-theme="light"] .filter-tab:hover {
  border-color: var(--dm-border-2) !important;
  color: var(--dm-text) !important;
}
html[data-theme="light"] .filter-tab.active {
  background: var(--dm-text) !important;
  color: var(--dm-bg) !important;
  border-color: var(--dm-text) !important;
}

/* Hero ctas .btn-cyan on careers — keep dark on cream */
html[data-theme="light"] .btn-cyan {
  background: var(--dm-text) !important;
  color: var(--dm-bg) !important;
}
html[data-theme="light"] .btn-cyan:hover {
  background: var(--navy-700) !important;
  box-shadow: 0 8px 24px rgba(10,22,40,.18) !important;
}

/* Hero badge + eyebrow on careers in light */
html[data-theme="light"] .hero-eyebrow {
  background: var(--white) !important;
  border-color: var(--dm-border) !important;
  color: var(--cyan-600) !important;
}

/* SVG icons that use var(--dm-text) stroke — keep navy */

/* Features rows in card-section already white (intentional dark feature block) */

/* Hero image overlay sections that cover with rgba(8,13,24,...) — handle  */

/* Darken card section gradient on light */
html[data-theme="light"] .card-section {
  background: var(--navy-900) !important;
}
/* Card section already has white text — keep dark even in light mode (intentional contrast like Klarna's dark feature blocks) */
html[data-theme="light"] .card-section,
html[data-theme="light"] .card-section h2,
html[data-theme="light"] .card-section h4 {
  color: var(--white) !important;
}

/* Final SectionEnergy keeps cyan band */

/* Nav border on light */
html[data-theme="light"] .nav.scrolled {
  background: rgba(250, 247, 242, 0.92) !important;
  border-bottom-color: var(--dm-border) !important;
}
html[data-theme="light"] .nav {
  background: rgba(250, 247, 242, 0.7) !important;
}

/* Hamburger lines color */
html[data-theme="light"] .nav-hamburger span {
  background: var(--dm-text) !important;
}

/* Hero badge needs visible bg on cream */
html[data-theme="light"] .hero-badge {
  background: var(--white) !important;
  border-color: var(--dm-border) !important;
  color: var(--cyan-500) !important;  /* cyan-600 in light mode */
}

/* Floating cards already use --dm-card which is white in light = fine */

/* Footer stays dark navy regardless of theme — anchor at the bottom */
footer { background: var(--navy-900) !important; color: var(--white) !important; }

/* Social icon buttons in footer */
.footer-socials { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.footer-socials a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--cyan-500);
  color: var(--navy-900) !important;
  margin: 0 !important;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.footer-socials a:hover {
  transform: translateY(-2px);
  background: var(--cyan-500);
  color: var(--navy-900) !important;
  box-shadow: 0 8px 20px rgba(0,187,206,.35);
}
.footer-socials a svg { width: 20px; height: 20px; stroke: var(--navy-900); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--dm-border-2);
  cursor: pointer;
  color: var(--dm-text);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  padding: 0;
  margin-right: 8px;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(0, 212, 212, 0.08);
  border-color: var(--cyan-500);
  transform: translateY(-1px);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show sun in dark mode (suggests "switch to light"), moon in light mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (max-width: 768px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
    margin-right: 4px;
  }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND TYPOGRAPHY — override Google Fonts (Outfit/Manrope) with
   official Cal Sans (display) + Standard (body) per Brandbook.
   ═══════════════════════════════════════════════════════════════ */
html body,
html body[class] {
  font-family: var(--font-sans) !important;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html h1, html h2, html h3, html h4, html h5, html h6,
html .hero h1, html .page-hero h1, html .careers-hero h1, html .hero-left h1,
html .section-title, html .products-section-title,
html .section-energy-title, html .trust-headline,
html .stat-num, html .vende-stat-num, html .k-amount {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
html .nav-mobile-link, html .nav-mobile-toggle, html .nav-mobile-link.active {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-display);
}
/* Buttons and small UI keep Standard */
html .btn-coral, html .btn-coral--small, html .btn-cyan, html .btn-primary,
html .btn-secondary, html .btn-ghost, html .nav-cta, html .nav-mobile-cta,
html .nav-links a, html .nav-item-trigger, html .nav-dropdown a {
  font-family: var(--font-sans) !important;
  letter-spacing: var(--tracking-tight);
}
/* Section eyebrows — small uppercase Standard Bold */
html .section-eyebrow, html .page-hero-eyebrow, html .hero-eyebrow,
html .faq-category-title, html .section-energy-eyebrow {
  font-family: var(--font-sans) !important;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 700;
}
/* Tabular numerals for amounts */
html .stat-num, html .vende-stat-num, html .count-up, html .k-amount,
html .float-card .fc-value {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   PRIMARY CTA — Coral pill
   Use for "Descarga la App" and other primary actions.
   Rule: only ONE coral CTA per visible viewport.
   ═══════════════════════════════════════════════════════════════ */
.btn-coral,
a.btn-coral,
button.btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--coral-500) !important;
  color: var(--white) !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-coral);
  min-height: 44px;
  white-space: nowrap;
}
.btn-coral:hover,
a.btn-coral:hover,
button.btn-coral:hover {
  background: var(--coral-600) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-coral-hover);
  color: var(--white) !important;
}
.btn-coral:active {
  transform: translateY(0);
}
.btn-coral:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 3px;
}
.btn-coral--small {
  padding: 10px 22px;
  font-size: 14px;
  min-height: 40px;
}

/* Mobile sizing */
@media (max-width: 768px) {
  .btn-coral {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARDS — light mode (Klarna/Brandbook: white card on cream
   page with hairline border + soft shadow, navy text)
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .product-card {
  background: var(--white) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(12,25,71,0.06));
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, flex-grow .3s cubic-bezier(.25,.46,.45,.94) !important;
}
html[data-theme="light"] .product-card:hover {
  border-color: var(--cyan-500) !important;
  box-shadow: 0 18px 48px rgba(12, 25, 71, 0.10), 0 0 0 1px rgba(0,187,206,0.18) !important;
  transform: translateY(-2px);
}
html[data-theme="light"] .product-body h3 { color: var(--dm-text) !important; }
html[data-theme="light"] .product-body p { color: var(--dm-muted) !important; }
html[data-theme="light"] .product-link { color: var(--dm-text) !important; }
html[data-theme="light"] .product-link:hover { color: var(--coral-500) !important; }

/* Soon badge — cyan pill with navy text on light mode */
html[data-theme="light"] .soon-badge {
  background: var(--cyan-500) !important;
  color: var(--white) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(0, 187, 206, 0.32);
}

/* Products section: page should be cream, not muted surface */
html[data-theme="light"] #productos,
html[data-theme="light"] .section#productos {
  background: var(--dm-bg) !important;
}

/* Klarna-style hero on prestamos page — make sure dark mode still works */
html[data-theme="dark"] .page-hero--klarna {
  background: var(--dm-surface) !important;
}
html[data-theme="dark"] .page-hero--klarna h1 .hero-accent {
  color: var(--cyan-500) !important;
}
html[data-theme="light"] .page-hero--klarna .hero-phone-img {
  filter: drop-shadow(0 30px 60px rgba(12, 25, 71, 0.20));
}
html[data-theme="dark"] .page-hero--klarna .hero-phone-img {
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.5));
}

/* ═══════════════════════════════════════════════════════════════
   KLARNA-STYLE HERO — shared across product subpages
   Bold sans-serif headline, accent word in coral, floating
   transparent product photo on cream/peach surface.
   ═══════════════════════════════════════════════════════════════ */
.page-hero--klarna {
  text-align: left;
  padding: 140px clamp(20px, 6vw, 80px) 0;
  min-height: 640px;
  height: 640px;                     /* fixed — identical across all 3 product heroes */
  position: relative;
  overflow: hidden !important;
}
/* Hero on subpages: navy with cyan accent + white body (per brandbook + contigo.krece.app).
   Specificity bumped to beat the broader `html[data-theme="light"] .page-hero` rule. */
html[data-theme="light"] .page-hero.page-hero--klarna,
html .page-hero.page-hero--klarna { background: var(--navy-900) !important; color: var(--white) !important; text-align: left !important; }
html[data-theme="light"] .page-hero.page-hero--klarna .page-hero-eyebrow,
html .page-hero.page-hero--klarna .page-hero-eyebrow { color: var(--cyan-500) !important; opacity: 1 !important; }
html[data-theme="light"] .page-hero.page-hero--klarna h1,
html .page-hero.page-hero--klarna h1 { color: var(--white) !important; }
html[data-theme="light"] .page-hero.page-hero--klarna .hero-accent,
html .page-hero.page-hero--klarna .hero-accent { color: var(--cyan-500) !important; }
html[data-theme="light"] .page-hero.page-hero--klarna p,
html .page-hero.page-hero--klarna p { color: rgba(255,255,255,.78) !important; }
html .page-hero.page-hero--klarna .btn-coral {
  background: #FF8A5B !important;
  color: #FFFFFF !important;
  border-radius: 9999px;
  padding: 16px 36px;
  box-shadow: 0 8px 24px rgba(255, 138, 91, 0.32);
}
html .page-hero.page-hero--klarna .btn-coral:hover {
  background: #F37544 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 138, 91, 0.42);
}
.page-hero--klarna::before { display: none !important; }
.page-hero--klarna .page-hero-grid {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  height: 100%;
}
.page-hero--klarna .page-hero-text {
  position: relative;
  z-index: 3;
  max-width: 540px;
}
/* Fixed-dimension hand+phone — identical across celulares/prestamos/recargas.
   bottom: -20px → image extends 20px below section, clipped by overflow:hidden.
   Top edge of image gets 100px clearance from section top → clear of nav. */
.page-hero--klarna .page-hero-visual {
  position: absolute;
  right: 8%;
  bottom: -140px;                   /* hand extends 140px below section (hidden by overflow) */
  height: 560px;                    /* FIXED — same in all 3 product heroes */
  width: auto;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
  font-size: 0;
}
.page-hero--klarna .page-hero-eyebrow {
  font-family: 'Standard', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dm-text) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px;
  opacity: .9;
}
.page-hero--klarna h1 {
  font-family: 'Cal Sans', 'CalSans', sans-serif !important;
  font-size: clamp(40px, 4.6vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--dm-text) !important;
  margin-bottom: 24px;
  text-wrap: balance;
}
.page-hero--klarna .hero-accent { color: var(--cyan-500) !important; }
.page-hero--klarna p {
  font-family: 'Standard', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--dm-muted) !important;
  max-width: 520px;
  margin: 0 0 36px !important;
  letter-spacing: -0.01em !important;
}
.hero-phone-img {
  display: block;
  height: 100%;                 /* fills the fixed-560px container */
  width: auto;
  margin: 0;
  vertical-align: bottom;
}
html .hero-phone-img { filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.45)); }

/* Mobile: image anchored to section bottom centered, text above. Fixed image height 380px. */
@media (max-width: 900px) {
  .page-hero--klarna {
    height: auto !important;
    min-height: calc(110px + 360px + 40px);  /* nav clear + image + breathing room */
    padding: 110px 20px 0 !important;
    overflow: hidden;
  }
  .page-hero--klarna .page-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    gap: 32px;
  }
  .page-hero--klarna .page-hero-text {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    text-align: center !important;
  }
  .page-hero--klarna .page-hero-eyebrow,
  .page-hero--klarna h1,
  .page-hero--klarna p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .page-hero--klarna h1 {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.08 !important;
  }
  .page-hero--klarna .page-hero-cta { display: flex; justify-content: center; }
  /* Image: relative, anchored to section bottom via flex order, centered */
  .page-hero--klarna .page-hero-visual {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    height: 360px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    align-self: stretch;
    justify-content: center;
    overflow: hidden;
    order: 2 !important;             /* override legacy order:-1 from inline split CSS */
    max-width: 100% !important;
  }
  .page-hero--klarna .page-hero-text { order: 1 !important; }
  .page-hero--klarna .hero-phone-img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* Centered Klarna-hero variant — no image, headline + CTA centered (vende-con-krece, etc.) */
.page-hero--klarna.page-hero--centered .page-hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 880px;
}
.page-hero--klarna.page-hero--centered .page-hero-text {
  margin: 0 auto;
  max-width: 720px;
}
.page-hero--klarna.page-hero--centered .page-hero-eyebrow,
.page-hero--klarna.page-hero--centered h1,
.page-hero--klarna.page-hero--centered p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-hero--klarna.page-hero--centered p {
  max-width: 580px;
}
.page-hero--klarna.page-hero--centered .page-hero-cta {
  display: inline-block;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST COLLAGE — sand background with 7 scattered photos around
   centered text. Inspired by Común's hero.
   ═══════════════════════════════════════════════════════════════ */
html .trust-section.trust-collage {
  background: #F4EFE6 !important;        /* warm sand */
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) clamp(20px, 6vw, 80px) !important;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
html .trust-section.trust-collage .trust-collage-inner {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(16px, 4vw, 48px);
}
html .trust-section.trust-collage .trust-headline {
  font-family: 'Cal Sans', 'CalSans', sans-serif !important;
  color: #0C1947 !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5.6vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  max-width: 14ch;
}
html .trust-section.trust-collage .trust-subtitle {
  font-family: 'Standard', sans-serif !important;
  color: rgba(12, 25, 71, 0.65) !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.55 !important;
  max-width: 520px;
  margin: 0 !important;
}
html .trust-section.trust-collage .btn-coral {
  margin-top: 8px;
  background: #FF8A5B !important;          /* warmer orange for this Común-inspired section */
  color: #FFFFFF !important;
  border-radius: 9999px;
  padding: 16px 36px;
  box-shadow: 0 8px 24px rgba(255, 138, 91, 0.32);
}
html .trust-section.trust-collage .btn-coral:hover {
  background: #F37544 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 138, 91, 0.42);
}

/* Photos — scattered around the centered text. They live in the corners,
   never overlap the inner text area thanks to z-index + responsive sizes. */
.collage-photo {
  position: absolute;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(12, 25, 71, 0.10),
    0 2px 6px rgba(12, 25, 71, 0.06);
}
.collage-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cluster: top-left (2 photos) */
.collage-photo--tl1 { top: 8%;  left: 4%;  width: 14vw; aspect-ratio: 3/4;  max-width: 200px; }
.collage-photo--tl2 { top: 38%; left: 12%; width: 11vw; aspect-ratio: 4/3;  max-width: 170px; transform: rotate(-3deg); }

/* Cluster: top-right (1 photo) */
.collage-photo--tr1 { top: 10%; right: 6%; width: 16vw; aspect-ratio: 1/1;  max-width: 220px; transform: rotate(4deg); }

/* Cluster: bottom-left (2 photos) */
.collage-photo--bl1 { bottom: 8%;  left: 5%;  width: 15vw; aspect-ratio: 4/3; max-width: 220px; }
.collage-photo--bl2 { bottom: 35%; left: 1%;  width: 10vw; aspect-ratio: 1/1; max-width: 150px; transform: rotate(-5deg); }

/* Cluster: bottom-right (2 photos) */
.collage-photo--br1 { bottom: 9%;  right: 8%; width: 13vw; aspect-ratio: 3/4; max-width: 190px; transform: rotate(3deg); }
.collage-photo--br2 { bottom: 38%; right: 3%; width: 12vw; aspect-ratio: 4/3; max-width: 180px; }

/* Tablet: shrink + tighten */
@media (max-width: 1100px) {
  .collage-photo { border-radius: 18px; }
  .collage-photo--tl1 { width: 17vw; max-width: 170px; }
  .collage-photo--tl2 { width: 13vw; max-width: 140px; }
  .collage-photo--tr1 { width: 18vw; max-width: 180px; }
  .collage-photo--bl1 { width: 17vw; max-width: 180px; }
  .collage-photo--bl2 { width: 12vw; max-width: 120px; }
  .collage-photo--br1 { width: 15vw; max-width: 160px; }
  .collage-photo--br2 { width: 14vw; max-width: 150px; }
}

/* Mobile: rearrange into one row above + one row below the text */
@media (max-width: 760px) {
  html .trust-section.trust-collage {
    min-height: auto;
    padding: 64px 20px 72px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 12px;
    overflow: visible;
    align-items: start;
    justify-items: stretch;
  }
  html .trust-section.trust-collage .trust-collage-inner {
    padding: 28px 0 4px;
    max-width: 100%;
    grid-column: 1 / -1;
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  html .trust-section.trust-collage .trust-headline {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html .trust-section.trust-collage .trust-subtitle {
    font-size: 15px !important;
    margin: 0 !important;
  }
  /* All photos: identical treatment, no offsets/rotations, square aspect */
  .collage-photo {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(12, 25, 71, 0.08) !important;
  }
  /* 4 visible photos: 2 above the text, 2 below */
  .collage-photo--tl1 { order: 1; }
  .collage-photo--tr1 { order: 2; }
  .trust-collage-inner { order: 3; }
  .collage-photo--bl1 { order: 4; }
  .collage-photo--br1 { order: 5; }
  /* Hide the extra 3 photos on mobile for cleaner layout */
  .collage-photo--tl2,
  .collage-photo--bl2,
  .collage-photo--br2 { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   STEPS GRID — 3-column variant with proper mobile handling
   ═══════════════════════════════════════════════════════════════ */
.steps-grid.steps-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px) {
  .steps-grid.steps-grid--3 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}
@media (max-width: 520px) {
  .steps-grid.steps-grid--3 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CARRERAS — Product ladder mobile fix (5 items needs proper layout)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html .timeline { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding: 0 !important; }
  html .timeline::before { display: none !important; }
  html .tl-step { flex: 0 0 auto !important; width: auto !important; }
  html .tl-step:nth-child(5) { grid-column: 1 / -1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS STATES — accessibility baseline
   ═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 3px;
  border-radius: 4px;
}