/* ==========================================================================
   PREMIUM UX/UI LAYER - "SaaS Product" Finish
   Se carga despues de tailwind-build.css (Fase 3: ya no existe css/index.css).
   ========================================================================== */

/* ==========================================================================
   1. PREMIUM TOKENS - FONTS, SURFACES, INK, ACCENTS
   ========================================================================== */
:root {
  /* --- Premium Fonts --- */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;

  --font-family-primary: var(--font-body);

  /* --- Refined Surfaces --- */
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-tertiary: #f1f5f9;
  --surface-elevated: #ffffff;
  --surface-sunken: #eef2f7;

  /* --- Refined Inks --- */
  --ink-strong: #0b1220;
  --ink-body: #334155;
  --ink-muted: #64748b;
  --ink-faint: #94a3b8;

  /* --- Refined Accents (brand continuity) --- */
  --accent: #0891b2;
  --accent-deep: #1a237e;
  --accent-bright: #06b6d4;
  --accent-glow: rgba(8, 145, 178, 0.55);

  /* --- Premium Gradients --- */
  --grad-brand: linear-gradient(
    128deg,
    var(--accent-deep) 0%,
    #4f46e5 32%,
    var(--accent-bright) 68%,
    var(--accent) 100%
  );
  --grad-cta: linear-gradient(128deg, #0e7490 0%, #0891b2 48%, #06b6d4 100%);
  --grad-text: linear-gradient(
    125deg,
    var(--accent-deep) 0%,
    #4f46e5 40%,
    var(--accent-bright) 100%
  );

  /* --- Premium Depth (soft diffused ambient shadows) --- */
  --shadow-soft: 0 2px 6px -2px rgba(15, 23, 42, 0.04),
    0 12px 28px -12px rgba(15, 23, 42, 0.10);
  --shadow-lift: 0 4px 12px -4px rgba(15, 23, 42, 0.06),
    0 24px 48px -16px rgba(15, 23, 42, 0.16);
  --shadow-float: 0 8px 24px -8px rgba(15, 23, 42, 0.10),
    0 40px 80px -24px rgba(26, 35, 126, 0.22);

  /* --- Radius Scale (squircle-leaning) --- */
  --radius-pill: 9999px;
  --radius-bevel-lg: 1.5rem;
  --radius-bevel-xl: 2rem;
}

/* ==========================================================================
   2. TYPOGRAPHY - HEADINGS USE SPACE GROTESK
   ========================================================================== */
body {
  font-family: var(--font-body);
  color: var(--ink-body);
  letter-spacing: -0.011em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.integrations-title,
.features-title,
.hero-title,
.hero-stat-num {
  font-family: var(--font-display);
}

/* Refined heading ink */
h1,
h2,
h3 {
  color: var(--ink-strong);
  letter-spacing: -0.03em;
}

/* ==========================================================================
   3. GLOBAL ATMOSPHERE - GRAIN, SELECTION, SCROLLBAR
   ========================================================================== */

/* --- Subtle film grain overlay (fixed, pointer-events-none) --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- Premium text selection --- */
::selection {
  background: rgba(8, 145, 178, 0.18);
  color: #0b1220;
}

/* --- Refined scrollbar --- */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 9999px;
  border: 3px solid #f8fafc;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), #06b6d4);
}

/* ==========================================================================
   4. FOCUS RINGS - Premium, soft, dual-layer
   ========================================================================== */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(8, 145, 178, 0.45);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(8, 145, 178, 0.45);
}

/* ==========================================================================
   5. HEADER - Floating Glass "Island" Refinement
   ========================================================================== */
.site-header {
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -12px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 16px 40px -16px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* --- Header brand mark: gentle breathing halo --- */
.site-header a img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header a:hover img {
  transform: scale(1.06) rotate(-2deg);
}

/* --- Header links: refined weight & ink --- */
.header-links {
  font-weight: 600;
  color: var(--ink-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* --- Language switch: glass chip --- */
.lang-switch {
  border-color: rgba(148, 163, 184, 0.35) !important;
  background: rgba(248, 250, 252, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   6. BUTTON SYSTEM - "Button-in-Button" + Gradient CTA
   ========================================================================== */

/* Primary CTA: gradient fill, inner highlight, soft brand glow.
   The trailing arrow sits inside its own circular chip (button-in-button). */
.premium-btn,
.pricing-card .premium-btn {
  background: linear-gradient(
    128deg,
    #0e7490 0%,
    var(--accent) 48%,
    #06b6d4 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 24px -10px rgba(8, 145, 178, 0.5),
    0 4px 8px -4px rgba(26, 35, 126, 0.28) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.premium-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 18px 32px -12px rgba(8, 145, 178, 0.58),
    0 6px 12px -6px rgba(26, 35, 126, 0.3) !important;
}

.premium-btn:active {
  transform: translateY(0) scale(0.97);
}

/* Icon chip inside CTA */
.premium-btn .bi-arrow-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-btn:hover .bi-arrow-right {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.3);
}

/* --- Outline button: premium ghost with gradient text on hover --- */
.outline-btn {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(26, 35, 126, 0.35) !important;
  color: var(--accent-deep) !important;
  font-weight: 700;
}
.outline-btn:hover {
  background: rgba(26, 35, 126, 0.04);
  border-color: rgba(8, 145, 178, 0.6) !important;
}

/* --- Hero primary CTA: elevated above everything --- */
.cta-hero-home {
  border-radius: var(--radius-pill);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* ==========================================================================
   7. SECTION BACKGROUNDS - Alternating refined surfaces
   ========================================================================== */

/* Hero: deep mesh gradient + faint grid */
.hero-section {
  background:
    radial-gradient(56rem 34rem at 86% -8%, rgba(6, 182, 212, 0.14), transparent 62%),
    radial-gradient(46rem 30rem at -12% 112%, rgba(26, 35, 126, 0.12), transparent 58%),
    radial-gradient(30rem 20rem at 45% 118%, rgba(99, 102, 241, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-secondary) 100%);
}

/* Features band: clean white with faint radial anchor */
body > main section#features,
section#features {
  background:
    radial-gradient(40rem 24rem at 12% 8%, rgba(8, 145, 178, 0.045), transparent 60%),
    linear-gradient(180deg, var(--surface-secondary) 0%, #ffffff 18%);
}

/* Integrations: rich indigo gradient with mesh */
section[class*="bg-[#1A237E]"] {
  background:
    radial-gradient(48rem 30rem at 82% -12%, rgba(6, 182, 212, 0.28), transparent 62%),
    radial-gradient(40rem 26rem at -10% 120%, rgba(79, 70, 229, 0.4), transparent 60%),
    linear-gradient(140deg, #0d1139 0%, #151b52 46%, #1a237e 100%) !important;
}
section[class*="bg-[#1A237E]"] .integrations-title {
  background: linear-gradient(120deg, #67e8f9 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  letter-spacing: 0.18em;
}

/* FAQ / contact: soft elevation band */
section#faq,
section#contact {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-secondary) 100%);
}

/* ==========================================================================
   8. EYEBROWS & BADGES - Premium kickers
   ========================================================================== */
.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.6875rem;
  color: var(--accent);
  text-transform: uppercase;
}

/* Badge pill used on About hero */
.badge-pill {
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* ==========================================================================
   9. GLOW CARDS - Double-Bevel + Refined Surfaces
   ========================================================================== */
.glow-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: var(--radius-bevel-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(148, 163, 184, 0.18),
    0 2px 6px -2px rgba(15, 23, 42, 0.05),
    0 24px 48px -20px rgba(26, 35, 126, 0.18);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.glow-card:hover {
  /* La tarjeta MANTIENE su color/superficie al hacer hover; solo se ilumina
     el borde (anillo ::before) y el humo exterior (::after). */
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  transform: translateY(-10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(8, 145, 178, 0.22),
    0 12px 24px -8px rgba(15, 23, 42, 0.10),
    0 40px 64px -24px rgba(26, 35, 126, 0.3),
    0 56px 90px -28px rgba(8, 145, 178, 0.32);
}

/* Icon ring: gradient chip with inner highlight */
.glow-card .icon-ring {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(79, 70, 229, 0.06)) !important;
  border: 1px solid rgba(8, 145, 178, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.glow-card:hover .icon-ring {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(79, 70, 229, 0.1)) !important;
  transform: scale(1.08);
}

/* Card content ink refinements */
.glow-card h3 {
  color: var(--ink-strong) !important;
  font-family: var(--font-display);
}

/* ==========================================================================
   10. PRICING CARDS - Premium depth + focused hierarchy
   ========================================================================== */
.pricing-card {
  border-radius: var(--radius-bevel-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(148, 163, 184, 0.18),
    0 2px 6px -2px rgba(15, 23, 42, 0.05),
    0 28px 54px -22px rgba(26, 35, 126, 0.2);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(8, 145, 178, 0.24),
    0 14px 28px -10px rgba(15, 23, 42, 0.10),
    0 44px 72px -26px rgba(26, 35, 126, 0.32);
}

/* Featured plan (Growth / Most Popular): full brand elevation */
.pricing-card[data-plan="growth"] {
  background: linear-gradient(180deg, #ffffff 0%, #f6feff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 2px rgba(6, 182, 212, 0.55),
    0 0 0 6px rgba(8, 145, 178, 0.06),
    0 20px 40px -14px rgba(26, 35, 126, 0.28),
    0 48px 80px -28px rgba(8, 145, 178, 0.32);
}

/* Plan name: display face, refined ink */
.pricing-card h3 span {
  font-family: var(--font-display);
  color: var(--ink-strong) !important;
  letter-spacing: -0.02em;
}

/* "Most Popular" badge: gradient + soft glow */
.pricing-badge {
  background: linear-gradient(128deg, #0e7490 0%, var(--accent) 55%, #06b6d4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px -6px rgba(8, 145, 178, 0.55) !important;
  font-family: var(--font-display);
}

/* Check icons with brand gradient */
.pricing-card .bi-check-lg {
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Divider refinement */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8, 145, 178, 0.35), transparent);
}

/* ==========================================================================
   11. HERO - Editorial Typography Scale
   ========================================================================== */
.hero-title,
.hero-section .tw-text-\[52px\] {
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem) !important;
  line-height: 1.02 !important;
}

/* Título del hero en español: el texto es más largo ("Negocio" + palabra
   rotativa), así que se escala con vw acercándose al tamaño del título en
   inglés (52px en desktop) pero con un tope menor (3.2rem ≈ 51px) y un vw
   calibrado (3.4vw) para que "Negocio Inmobiliario" siga cabiendo en la
   segunda línea en las anchuras intermedias (1024px) sin saltar a una
   tercera. */
html[lang="es"] .hero-title,
html[lang="es"] .hero-section .tw-text-\[52px\] {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem) !important;
}

/* Subtítulo en español: el texto es más largo, se reduce ligeramente la
   fuente respecto al inglés, pero sube un poco del 1rem original para ganar
   presencia sin romper el equilibrio visual. */
html[lang="es"] .hero-section .hero-rise-2 {
  font-size: 1.0625rem !important;
}

/* Palabra rotativa del hero: con background-clip:text y el line-height
   apretado del título, los descendentes de letras como la "g" de "Ágil"
   quedaban recortados (se dibujaban fuera de la caja del degradado).
   Se amplía la caja verticalmente y se compensa con margen negativo para
   no alterar la altura ocupada por la línea. */
.hero-rotator {
  padding: 0.06em 0.08em 0.16em;
  margin: -0.06em -0.08em -0.16em;
}

/* Hero subtitle: refined ink */
.hero-section p {
  color: var(--ink-muted) !important;
}

/* Hero stats: refined chips with separators */
.hero-stat-num {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--font-display);
}
.hero-stat-lbl {
  color: var(--ink-muted) !important;
  font-weight: 600;
}

/* Dashboard art: elevated glass bezel */
.hero-art img {
  border-radius: 1.25rem;
  box-shadow:
    0 30px 60px -25px rgba(26, 35, 126, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   12. FAQ - Premium cards
   ========================================================================== */
.faq-item {
  border-radius: var(--radius-bevel-lg);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px -4px rgba(15, 23, 42, 0.06);
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open {
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 40px -16px rgba(8, 145, 178, 0.28);
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.faq-ic {
  background: rgba(8, 145, 178, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   13. CONTACT - Form input premium
   ========================================================================== */
.input-premium,
#contact-email {
  border-color: rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font-weight: 500;
}
.input-premium:focus,
#contact-email:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12) !important;
}

/* ==========================================================================
   14. FOOTER - Clean editorial structure
   ========================================================================== */
footer {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-secondary) 100%);
}
footer h2 {
  font-family: var(--font-display);
  color: var(--ink-strong) !important;
}
footer a {
  font-weight: 500;
  color: var(--ink-muted) !important;
}

/* Social icons: soft glass chips */
footer .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
footer a:hover .bi {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(79, 70, 229, 0.1));
  border-color: rgba(8, 145, 178, 0.4);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ==========================================================================
   15. ABOUT PAGE - Team cards premium
   ========================================================================== */
.team-card {
  border-radius: var(--radius-bevel-xl);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 40px -20px rgba(15, 23, 42, 0.12);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 145, 178, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 32px 60px -24px rgba(26, 35, 126, 0.28);
}
.team-card img {
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.25) !important;
  border-radius: 1.25rem !important;
}

/* ==========================================================================
   16. SCROLL REVEALS - Soft blur-rise (premium entrance)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(6px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Feature words: refined pops */
.feature-word {
  font-family: var(--font-display);
  font-weight: 600 !important;
}

/* Hero kicker badge entrance (top-most element animates first) */
@media (prefers-reduced-motion: no-preference) {
  .hero-rise-0 {
    animation-delay: 0.02s;
  }
}

/* --- Dark mode toggle button (header island) --- */
#theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(15, 23, 42, 0.06);
  color: var(--ink-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#theme-toggle:hover {
  color: var(--accent);
  border-color: rgba(8, 145, 178, 0.45);
  transform: translateY(-1px);
}
#theme-toggle .bi-moon-stars {
  display: none;
}
html[data-theme="dark"] #theme-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
html[data-theme="dark"] #theme-toggle .bi-sun {
  display: none;
}
html[data-theme="dark"] #theme-toggle .bi-moon-stars {
  display: inline;
}

/* ==========================================================================
   17. DARK MODE - Premium OLED-inspired (opt-in via html[data-theme="dark"])
   ========================================================================== */
html[data-theme="dark"] {
  --surface-primary: #0d1117;
  --surface-secondary: #0a0e14;
  --surface-tertiary: #141a23;
  --ink-strong: #f1f5f9;
  --ink-body: #cbd5e1;
  --ink-muted: #94a3b8;
  --ink-faint: #64748b;

  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: #0a0e14;
  color: var(--ink-body);
}

html[data-theme="dark"] .site-header {
  background: rgba(13, 17, 23, 0.66);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 16px 40px -16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .header-links {
  color: #cbd5e1;
}

html[data-theme="dark"] .glow-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .team-card {
  background: linear-gradient(180deg, #141a23 0%, #11161f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 28px 54px -22px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .glow-card h3,
html[data-theme="dark"] .pricing-card h3 span,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: var(--ink-strong) !important;
}

html[data-theme="dark"] .glow-card p,
html[data-theme="dark"] .pricing-card p,
html[data-theme="dark"] .hero-stat-lbl {
  color: var(--ink-muted) !important;
}

html[data-theme="dark"] .faq-q {
  color: var(--ink-strong);
}
html[data-theme="dark"] .faq-a p {
  color: var(--ink-muted);
}

html[data-theme="dark"] footer {
  background: #0a0e14;
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] footer a {
  color: #94a3b8 !important;
}

/* Language switcher en dark mode: combina con colores del hero (cyan/indigo) */
html[data-theme="dark"] .lang-switch {
  border-color: rgba(34, 211, 238, 0.35) !important;
  background: rgba(10, 14, 20, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.15), 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .lang-btn {
  color: #94a3b8;
  background: transparent;
}
html[data-theme="dark"] .lang-btn:hover {
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.1);
}
html[data-theme="dark"] .lang-btn-active {
  color: #ffffff;
  background: linear-gradient(135deg, #06b6d4 0%, #4f46e5 100%) !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}
html[data-theme="dark"] .lang-btn-active:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #0891b2 0%, #4338ca 100%) !important;
}

html[data-theme="dark"] .hero-section {
  background:
    radial-gradient(56rem 34rem at 86% -8%, rgba(6, 182, 212, 0.16), transparent 62%),
    radial-gradient(46rem 30rem at -12% 112%, rgba(99, 102, 241, 0.18), transparent 58%),
    linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

html[data-theme="dark"] section#faq,
html[data-theme="dark"] section#contact {
  background: linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

/* Continuidad del "humo" de color en dark mode.
   Hero: cyan arriba-derecha.
   Services: cyan arriba-izquierda + morado abajo-derecha.
   Pricing: el morado que terminaba abajo-derecha reaparece arriba-derecha, y
   el cyan que comenzaba arriba-izquierda se mantiene arriba-izquierda.
   FAQ: sigue el mismo flujo (morado arriba-derecha + cyan arriba-izquierda).
   Contact: el color pasa al centro, justo detrás del texto. */
/* FAQ: sigue el mismo flujo (morado arriba-derecha + cyan arriba-izquierda).
   El morado usa el mismo tono (99,102,241) y el cyan la misma opacidad
   (0.12) que Services/Pricing para mantener la consistencia del "humo". */
html[data-theme="dark"] section#faq {
  background:
    radial-gradient(46rem 30rem at 90% 0%, rgba(99, 102, 241, 0.16), transparent 58%),
    radial-gradient(46rem 30rem at 10% 0%, rgba(6, 182, 212, 0.12), transparent 60%),
    radial-gradient(40rem 24rem at 92% 100%, rgba(99, 102, 241, 0.10), transparent 58%),
    linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

html[data-theme="dark"] section#contact {
  background:
    radial-gradient(46rem 30rem at 50% 45%, rgba(99, 102, 241, 0.16), transparent 58%),
    radial-gradient(40rem 26rem at 50% 45%, rgba(6, 182, 212, 0.12), transparent 60%),
    linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

html[data-theme="dark"] ::selection {
  background: rgba(6, 182, 212, 0.3);
  color: #ffffff;
}

/* ==========================================================================
   17B. DARK MODE - SERVICES & PRICING CARDS (consistency pass)
   Secciones blancas -> superficies oscuras; el anillo glow, la linterna del
   cursor y el borde conic de las tarjetas usan versiones mas claras de la
   paleta del proyecto (teal/cyan/indigo) para resaltar sobre lo oscuro.
   ========================================================================== */
/* Services: cyan arriba-izquierda + morado abajo-derecha */
/* Services: cyan arriba-izquierda + morado abajo-derecha.
   Nota: el cyan y el morado usan exactamente los mismos tonos y opacidades
   que Pricing/FAQ para que el "humo" se vea idéntico entre apartados
   (morado rgba(99,102,241,0.16), cyan rgba(6,182,212,0.12)). */
html[data-theme="dark"] section#features {
  background:
    radial-gradient(52rem 32rem at 10% 0%, rgba(6, 182, 212, 0.12), transparent 60%),
    radial-gradient(46rem 30rem at 92% 100%, rgba(99, 102, 241, 0.16), transparent 58%),
    linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

/* Pricing: continúa el flujo. El morado que terminaba abajo-derecha en
   services ahora ocupa la parte superior (mismo lado derecho) y el cyan
   que comenzaba arriba-izquierda se mantiene para dar continuidad.
   El cyan usa el mismo tono/opacidad (0.12) que en services para que el
   humito verde de la izquierda sea consistente en ambos apartados. */
html[data-theme="dark"] section#pricing {
  background:
    radial-gradient(46rem 30rem at 90% 0%, rgba(99, 102, 241, 0.16), transparent 58%),
    radial-gradient(52rem 32rem at 10% 0%, rgba(6, 182, 212, 0.12), transparent 60%),
    linear-gradient(180deg, #0a0e14 0%, #0d1117 100%);
}

/* Textos secundarios de ambas secciones: gris oscuro -> ink del tema */
html[data-theme="dark"] section#features .tw-text-gray-700,
html[data-theme="dark"] section#pricing .tw-text-gray-700,
html[data-theme="dark"] section#pricing .tw-text-gray-600 {
  color: var(--ink-muted) !important;
}

/* Eyebrow mas luminoso para brillar sobre la superficie oscura */
html[data-theme="dark"] section#features .section-eyebrow,
html[data-theme="dark"] section#pricing .section-eyebrow {
  color: #67e8f9;
}

/* Iconos de las palabra destacadas del titulo */
html[data-theme="dark"] .feature-word i {
  color: #22d3ee !important;
}

/* --- Tarjetas de servicio: superficie glass + ring/linterna brillantes --- */
html[data-theme="dark"] .glow-card {
  background: linear-gradient(
    180deg,
    rgba(20, 26, 35, 0.92) 0%,
    rgba(17, 22, 31, 0.96) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 28px 54px -22px rgba(0, 0, 0, 0.75);
}
html[data-theme="dark"] .glow-card:hover {
  /* Mantiene la misma superficie que en reposo: el hover solo activa el
     anillo de color y una bruma interna sutil, sin cambiar el color de la tarjeta. */
  background: linear-gradient(
    180deg,
    rgba(20, 26, 35, 0.92) 0%,
    rgba(17, 22, 31, 0.96) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(34, 211, 238, 0.28),
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 44px 90px -30px rgba(6, 182, 212, 0.28),
    /* Bruma interna sutil del color del anillo (usa --glow-c3 del tono) */
    inset 0 0 24px -4px rgba(var(--glow-c3), 0.15);
}

/* Icon ring: chip glass oscuro con borde cyan mas vivo */
html[data-theme="dark"] .glow-card .icon-ring {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.16),
    rgba(99, 102, 241, 0.1)
  ) !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .glow-card .icon-ring i {
  color: #67e8f9 !important;
}

/* Anillos glow por tono: versiones claras de la paleta para brillar en oscuro */
html[data-theme="dark"] .glow-card.tone-teal { --glow-c1: 6, 182, 212; --glow-c2: 34, 211, 238; --glow-c3: 129, 140, 248; }
html[data-theme="dark"] .glow-card.tone-cyan { --glow-c1: 34, 211, 238; --glow-c2: 165, 243, 252; --glow-c3: 6, 182, 212; }
html[data-theme="dark"] .glow-card.tone-indigo { --glow-c1: 99, 102, 241; --glow-c2: 129, 140, 248; --glow-c3: 199, 210, 254; }
html[data-theme="dark"] .glow-card.tone-emerald { --glow-c1: 6, 182, 212; --glow-c2: 45, 212, 191; --glow-c3: 34, 211, 238; }
html[data-theme="dark"] .glow-card.tone-blue { --glow-c1: 6, 182, 212; --glow-c2: 96, 165, 250; --glow-c3: 129, 140, 248; }
html[data-theme="dark"] .glow-card.tone-ocean { --glow-c1: 34, 211, 238; --glow-c2: 129, 140, 248; --glow-c3: 6, 182, 212; }

/* El anillo ::before usa la máscara XOR definida en index.css: solo dibuja el
   borde, nunca el interior. Los --glow-c claros de dark mode hacen que la
   línea sea nítida y brillante sobre la superficie oscura. */
html[data-theme="dark"] .glow-card::before {
  opacity: 0;
}
html[data-theme="dark"] .glow-card:hover::before {
  opacity: 1;
}

/* --- Tarjetas de precios: superficie oscura, listas legibles --- */
html[data-theme="dark"] .pricing-card {
  background: linear-gradient(180deg, #141a23 0%, #11161f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 28px 54px -22px rgba(0, 0, 0, 0.75);
}

/* Lista de features y horas: sobreescriben tw-text-gray-700 */
html[data-theme="dark"] .pricing-card ul,
html[data-theme="dark"] .pricing-card li,
html[data-theme="dark"] .pricing-card li span {
  color: var(--ink-muted) !important;
}

html[data-theme="dark"] .pricing-card[data-plan="growth"] {
  background: linear-gradient(180deg, #131a24 0%, #10161f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 2px rgba(34, 211, 238, 0.55),
    0 28px 54px -22px rgba(0, 0, 0, 0.8),
    0 44px 84px -28px rgba(6, 182, 212, 0.3);
}

/* Selected: glow cyan exterior en lugar de sombras negras invisibles */
html[data-theme="dark"] .pricing-card.selected {
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 28px 55px rgba(0, 0, 0, 0.65),
    0 12px 22px rgba(0, 0, 0, 0.4);
}

/* Borde conic animado: versiones claras de la paleta en oscuro */
html[data-theme="dark"] .pricing-card:nth-child(1) { --pc1: 129, 140, 248; --pc2: 34, 211, 238; --pc3: 199, 210, 254; }
html[data-theme="dark"] .pricing-card:nth-child(2) { --pc1: 34, 211, 238; --pc2: 129, 140, 248; --pc3: 99, 102, 241; }
html[data-theme="dark"] .pricing-card:nth-child(3) { --pc1: 199, 210, 254; --pc2: 34, 211, 238; --pc3: 129, 140, 248; }

/* Divisor sutil mas brillante para no perderse en oscuro */
html[data-theme="dark"] .divider-gradient {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, 0.4),
    transparent
  );
}

/* Texto con gradiente teal/indigo: versiones claras de la paleta en oscuro,
   para que la palabra final no se apague contra el fondo negro */
html[data-theme="dark"] .text-gradient-teal {
  background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtitulo del FAQ (tw-text-gray-600) y resto de textos secundarios */
html[data-theme="dark"] section#faq .tw-text-gray-600,
html[data-theme="dark"] section#faq .tw-text-gray-700 {
  color: var(--ink-muted) !important;
}

/* Textos secundarios del contacto */
html[data-theme="dark"] section#contact .tw-text-gray-700,
html[data-theme="dark"] section#contact .tw-text-gray-600 {
  color: var(--ink-muted) !important;
}

/* Footer: fondo y tintas coherentes (tw-bg-white / gray -> dark) */
html[data-theme="dark"] footer {
  color: var(--ink-muted);
}
html[data-theme="dark"] footer .tw-text-gray-600,
html[data-theme="dark"] footer .tw-text-gray-500 {
  color: var(--ink-muted) !important;
}
html[data-theme="dark"] footer div[style*="color: #1a237e"] {
  color: var(--ink-strong) !important;
}

/* ==========================================================================
   17C. DARK MODE - ABOUT US (legibilidad: subtítulo + tarjetas de equipo)
   El h1 ya se vuelve claro por la regla genérica h1. Aquí se aclaran el
   subtítulo del hero y los textos de las tarjetas de team (nombres en blanco,
   rol y bio en gris claro), igual que en services y packages.
   ========================================================================== */
html[data-theme="dark"] .about-hero p {
  color: var(--ink-muted) !important;
}

html[data-theme="dark"] .team-card {
  background: linear-gradient(180deg, #141a23 0%, #11161f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 28px 54px -22px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .team-card .tw-text-neutral-900,
html[data-theme="dark"] .team-card p[class*="tw-font-semibold"] {
  color: var(--ink-strong) !important;
}

html[data-theme="dark"] .team-card .tw-text-neutral-600,
html[data-theme="dark"] .team-card p[class*="tw-text-sm"] {
  color: var(--ink-muted) !important;
}

html[data-theme="dark"] .team-card svg.tw-text-neutral-300 {
  color: rgba(148, 163, 184, 0.35) !important;
}

/* ==========================================================================
   18. RESPONSIVE REFINEMENTS
   ========================================================================== */
@media (max-width: 640px) {
  .hero-title,
  .hero-section .tw-text-\[52px\] {
    font-size: clamp(2.15rem, 11vw, 3rem) !important;
  }

  .premium-btn .bi-arrow-right {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Pause grain while scrolling for performance on lower-end devices */
@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ==========================================================================
   19. PRODUCT WINDOW - CSS mockup (thematic mini-dashboard)
   Light-mode first, minimalist, premium SaaS finish.
   ========================================================================== */
.product-window {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  border-radius: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 34px 64px -28px rgba(26, 35, 126, 0.34),
    0 60px 110px -40px rgba(8, 145, 178, 0.28);
}

.product-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.875rem 1.125rem;
  position: relative;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
  border-radius: 1.125rem 1.125rem 0 0;
}

.pr-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  display: inline-block;
}
.pr-dot-red { background: #fca5a5; }
.pr-dot-amber { background: #fcd34d; }
.pr-dot-green { background: #86efac; }

.product-url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9999px;
  padding: 0.2rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-body {
  padding: 1.25rem 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* --- KPI row --- */
.product-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.kpi {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.kpi-accent {
  border-color: rgba(8, 145, 178, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(8, 145, 178, 0.05);
}

.kpi-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1;
}

.kpi-accent .kpi-num {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.kpi-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* --- Pipeline list --- */
.product-pipeline {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.125rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pipeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.875rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.pipeline-link {
  color: var(--accent);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}

.deal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.875rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.deal:last-child { border-bottom: none; }
.deal:hover { background: #f8fafc; }

.deal-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.av-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.av-cyan   { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.av-teal   { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.av-violet { background: linear-gradient(135deg, #1a237e, #4f46e5); }

.deal-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}
.deal-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.deal-street {
  font-size: 0.7rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-status {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.st-qualified { color: #4f46e5; background: rgba(79, 70, 229, 0.1); }
.st-showing   { color: #0891b2; background: rgba(8, 145, 178, 0.1); }
.st-offer     { color: #0d9488; background: rgba(13, 148, 136, 0.1); }
.st-closing   { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }

/* --- Floating activity cards --- */
.product-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 32px -12px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.pf-1 {
  top: -1.6rem;
  right: -2rem;
  animation: pf-float 7s ease-in-out infinite;
}
.pf-2 {
  bottom: -1.4rem;
  left: -2rem;
  animation: pf-float 9s ease-in-out infinite reverse;
}

.pf-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pf-1 .pf-ic { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.pf-2 .pf-ic { background: linear-gradient(135deg, #4f46e5, #6366f1); }

.pf-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.pf-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.pf-sub {
  font-size: 0.66rem;
  color: var(--ink-muted);
}

@keyframes pf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Responsive: keep it tidy on small screens */
@media (max-width: 640px) {
  .product-window { max-width: 100%; }
  .pf-1 { top: -0.9rem; right: -0.4rem; transform: scale(0.94); }
  .pf-2 { display: none; }
  .pf-cal-b,
  .pf-close-a,
  .pf-close-b { display: none; }
  .pf-cal-a { top: -0.9rem; left: -0.4rem; transform: scale(0.94); }
  .product-body { padding: 1rem; }
}

/* ==========================================================================
   20. PRODUCT WINDOW - DARK MODE (known palette, kept coherent)
   ========================================================================== */
html[data-theme="dark"] .product-window {
  background: #141a23;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 34px 64px -28px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .product-chrome,
html[data-theme="dark"] .pipeline-head {
  background: linear-gradient(180deg, #161d28 0%, #131a24 100%);
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .product-url {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
html[data-theme="dark"] .kpi {
  background: linear-gradient(180deg, #171e29 0%, #141a23 100%);
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .kpi-accent {
  border-color: rgba(6, 182, 212, 0.35);
}
html[data-theme="dark"] .product-pipeline {
  background: #11161f;
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .deal { border-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .deal:hover { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .pipeline-head,
html[data-theme="dark"] .pipeline-link {
  color: #cbd5e1;
}
html[data-theme="dark"] .kpi-num,
html[data-theme="dark"] .deal-name,
html[data-theme="dark"] .pf-title {
  color: #f1f5f9;
}
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .deal-street,
html[data-theme="dark"] .pf-sub {
  color: #94a3b8;
}
html[data-theme="dark"] .product-float {
  background: rgba(23, 30, 41, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   21. DARK MODE - hero title ink (readable on dark)
   ========================================================================== */
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .hero-section [data-i18n="hero_title2"] {
  color: #f1f5f9 !important;
}

/* ==========================================================================
   22. PRODUCT TOUR - Animated scenes (CRM → ShowingTime calendar → Closed)
   The window chrome stays constant; the scenes share one fixed-height stage
   so the page never grows/shrinks as the tour advances.
   ========================================================================== */
.product-scenes {
  position: relative;
  min-height: 340px;
}

.product-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.product-scene.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* El chrome (app.epia.com) vive dentro de la escena 1: queda arriba de la
   tarjeta del CRM, como una ventana de la app. */
.product-scene[data-scene="crm"] {
  justify-content: flex-start;
}
.product-scene[data-scene="crm"] .crm-body {
  margin: auto 0;
}

/* Las tres imágenes se muestran un poco más pequeñas (zoom reduce tamaño
   visual y de layout sin tocar los paddings del contenedor). */
.product-scene[data-scene="crm"] .crm-body {
  zoom: 0.76;
}
.product-scene[data-scene="calendar"] .cal-body {
  zoom: 0.92;
}
.product-scene[data-scene="closed"] .closed-body {
  zoom: 0.92;
}
.product-scene .product-kpis {
  margin-bottom: 1rem;
}

/* Schedule rows: same skeletal layout as .deal, plus a leading time column */
.deal-time {
  min-width: 3.1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  flex-shrink: 0;
}

/* --- ShowingTime calendar scene --- */
.pipeline-head {
  border-radius: 1.125rem 1.125rem 0 0;
}
.deal:last-child {
  border-radius: 0 0 1.125rem 1.125rem;
}

.cal-today-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: #065f73;
  background: rgba(8, 145, 178, 0.12);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 0.45rem;
  padding: 0 0.75rem;
}
.cal-weekdays span {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 0.35rem;
  padding: 0 0.75rem;
}
.cal-day {
  position: relative;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-muted);
  border-radius: 0.6rem;
}
.cal-day.cal-empty {
  visibility: hidden;
}
.cal-day.cal-today {
  background: linear-gradient(135deg, #0891b2, #4f46e5);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(8, 145, 178, 0.55);
}
.cal-day.cal-dot::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #0891b2;
}
.cal-day.cal-today::after {
  background: #fff;
}

.cal-agenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0 0.75rem 0.25rem;
}
.cal-agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-strong);
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9999px;
  padding: 0.26rem 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.cal-agenda-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0891b2, #4f46e5);
  flex-shrink: 0;
}

/* --- Handshake / closed-scene panel --- */
.handshake-panel {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 1.125rem;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(8, 145, 178, 0.12), transparent 55%),
    radial-gradient(120% 120% at 88% 100%, rgba(79, 70, 229, 0.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(8, 145, 178, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 24px -14px rgba(8, 145, 178, 0.35);
}

.hs-icon {
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(8, 145, 178, 0.14),
    rgba(79, 70, 229, 0.14)
  );
  border: 1px solid rgba(8, 145, 178, 0.25);
  flex-shrink: 0;
}
.hs-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.hs-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.hs-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hs-sub {
  font-size: 0.7rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #065f73;
  background: rgba(8, 145, 178, 0.12);
  border: 1px solid rgba(8, 145, 178, 0.18);
  border-radius: 9999px;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Closing scene: pop, pulse ring, confetti and stamp effects --- */
.handshake-panel {
  position: relative;
}
.product-scene.is-active .handshake-panel {
  animation: close-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes close-pop {
  0%   { opacity: 0; transform: scale(0.9) translateY(10px); }
  60%  { transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.hs-stage {
  position: relative;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hs-ring {
  position: absolute;
  inset: 0;
  border-radius: 1.125rem;
  border: 2px solid rgba(8, 145, 178, 0.4);
  animation: hs-ping 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes hs-ping {
  0%        { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(1.55); opacity: 0; }
}

.hs-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  opacity: 0;
}
.product-scene.is-active .hs-confetti {
  animation: confetti-burst 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
@keyframes confetti-burst {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx, 40px), var(--ty, -40px)) rotate(var(--rot, 180deg)) scale(0.5); opacity: 0; }
}
.hs-c1 { background: #0891b2; --tx: 34px;  --ty: -34px; --rot: 160deg; }
.hs-c2 { background: #4f46e5; --tx: 30px;  --ty: 6px;   --rot: 210deg; }
.hs-c3 { background: #f59e0b; --tx: -30px; --ty: -30px; --rot: -170deg; }
.hs-c4 { background: #14b8a6; --tx: 22px;  --ty: 34px;  --rot: 120deg; }
.hs-c5 { background: #ec4899; --tx: -28px; --ty: 8px;   --rot: -220deg; }
.hs-c6 { background: #facc15; --tx: -22px; --ty: 30px;  --rot: -130deg; }

.hs-stamp {
  position: absolute;
  top: -0.5rem;
  right: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
  border: 2px solid rgba(13, 148, 136, 0.55);
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  animation: stamp-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
@keyframes stamp-in {
  0%   { transform: rotate(14deg) scale(1.9); opacity: 0; }
  60%  { transform: rotate(-4deg) scale(0.94); opacity: 1; }
  100% { transform: rotate(-7deg) scale(1); opacity: 1; }
}

/* Closing summary stats */
.closing-summary {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.cs-item {
  flex: 1;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.875rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.cs-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.cs-lbl {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* --- Floats per scene (different position & meaning per scene) --- */
.pf-cal-a {
  top: -1.6rem;
  left: -2rem;
  animation: pf-float 7s ease-in-out infinite;
}
.pf-cal-b {
  bottom: -1.4rem;
  right: -2rem;
  animation: pf-float 9s ease-in-out infinite reverse;
}
.pf-close-a {
  top: -1.6rem;
  left: -2rem;
  animation: pf-float 8s ease-in-out infinite;
}
.pf-close-b {
  bottom: -1.4rem;
  right: -2rem;
  animation: pf-float 7.5s ease-in-out infinite reverse;
}

.pf-cal-a .pf-ic,
.pf-cal-b .pf-ic,
.pf-close-a .pf-ic,
.pf-close-b .pf-ic {
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
}
.pf-cal-a .pf-ic { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.pf-cal-b .pf-ic { background: linear-gradient(135deg, #0891b2, #06b6d4); }
.pf-close-a .pf-ic { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.pf-close-b .pf-ic { background: linear-gradient(135deg, #ec4899, #f472b6); }

/* --- Scene progress dots --- */
.scene-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.15rem;
}
.scene-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.35);
  transition:
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
  cursor: pointer;
}
.scene-dot:hover {
  background: rgba(8, 145, 178, 0.6);
}
.scene-dot.is-active {
  width: 22px;
  background: linear-gradient(90deg, #0891b2, #4f46e5);
}

/* --- New PNG brand marks (dark logo on transparent → invert in dark mode) --- */
.site-logo-img,
.footer-logo-img {
  border-radius: 0.875rem;
}
html[data-theme="dark"] .site-logo-img,
html[data-theme="dark"] .footer-logo-img {
  filter: invert(1);
}

/* Dark mode for the animated tour */
html[data-theme="dark"] .product-scene {
  background: #11161f;
  border-color: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .deal-time {
  color: #94a3b8;
}
html[data-theme="dark"] .handshake-panel {
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(34, 211, 238, 0.1), transparent 55%),
    radial-gradient(120% 120% at 88% 100%, rgba(99, 102, 241, 0.12), transparent 55%),
    linear-gradient(180deg, #161d28 0%, #131a24 100%);
  border-color: rgba(6, 182, 212, 0.22);
}
html[data-theme="dark"] .hs-icon {
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.14),
    rgba(99, 102, 241, 0.14)
  );
  border-color: rgba(6, 182, 212, 0.28);
}
html[data-theme="dark"] .hs-sub {
  color: #94a3b8;
}
html[data-theme="dark"] .hs-badge {
  color: #67e8f9;
  background: rgba(8, 145, 178, 0.18);
  border-color: rgba(6, 182, 212, 0.24);
}
html[data-theme="dark"] .scene-dot {
  background: rgba(148, 163, 184, 0.3);
}
html[data-theme="dark"] .scene-dot:hover {
  background: rgba(6, 182, 212, 0.65);
}
html[data-theme="dark"] .cal-weekdays span {
  color: #94a3b8;
}
html[data-theme="dark"] .cal-day {
  color: #cbd5e1;
}
html[data-theme="dark"] .cal-day.cal-dot::after {
  background: #06b6d4;
}
html[data-theme="dark"] .cal-today-chip {
  color: #67e8f9;
  background: rgba(8, 145, 178, 0.2);
  border-color: rgba(6, 182, 212, 0.3);
}
html[data-theme="dark"] .cal-agenda-chip {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
html[data-theme="dark"] .hs-stamp {
  color: #5eead4;
  background: rgba(13, 148, 136, 0.2);
  border-color: rgba(45, 212, 191, 0.5);
}
html[data-theme="dark"] .hs-ring {
  border-color: rgba(6, 182, 212, 0.45);
}
html[data-theme="dark"] .cs-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
html[data-theme="dark"] .cs-lbl {
  color: #94a3b8;
}

/* Reduced motion: keep scenes readable, minimal transition */
@media (prefers-reduced-motion: reduce) {
  .product-scene {
    transition: opacity 0.2s linear;
    transform: none;
  }
  .product-scene.is-active .handshake-panel,
  .product-scene.is-active .hs-confetti,
  .hs-ring,
  .hs-stamp {
    animation: none;
  }
}