/* ═══════════════════════════════════════════════════════════
   QLIC · Sistema de diseño compartido — TEMA OSCURO PREMIUM
   Estilo Surfer SEO: fondo navy con rejilla técnica, glows
   azul/violeta, tipografía degradada, cristal translúcido y
   micro-animaciones CSS puras.
   Se carga DESPUÉS del <style> propio de cada página para
   sobrescribirlo. El !important se usa solo donde la versión
   anterior ya lo llevaba, para mantener la cobertura sobre
   todas las páginas del sitio (landings, blog, comparativas).
   v2 · 13/08/2026 — sustituye por completo el tema claro v1
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#FFFFFF; --ink-2:#C9D0DE; --sub:#98A2B8; --dim:#6C7690;
  --bg:#0A0E1A; --bg-2:#10182A; --line:rgba(255,255,255,.10);
  --or:#00E39A; --or-ink:#3DFFC0; --or-soft:rgba(0,227,154,.12);
  --blue:#5B9DFF; --blue-soft:rgba(91,157,255,.12);
  --green:#4ADE80; --green-soft:rgba(74,222,128,.12);
  --violet:#A78BFA; --violet-soft:rgba(167,139,250,.12);
  --r:18px; --r-lg:28px;
  --glass:rgba(19,27,46,.4);
  /* alias de tokens antiguos, para que el CSS viejo de cada página herede el look nuevo */
  --primary:#3DFFC0; --primary-dark:#00E39A; --orange:#3DFFC0;
  --text:#FFFFFF; --text-sub:#98A2B8; --text-dim:#6C7690;
  --bg-alt:#10182A; --bg-dark:#0A0E1A; --border:rgba(255,255,255,.10); --border-warm:rgba(255,255,255,.10);
  --card:#141D33; --card-alt:#10182A; --radius:18px;
}

/* ── base: fondo oscuro premium + rejilla técnica + glows, todo como
   background-image ESTÁTICO en el propio body. Nada de position:fixed
   ni filter/backdrop-filter a nivel global: eso obliga al navegador a
   repintar toda la capa en cada frame de scroll y destroza el rendimiento
   en páginas largas. Los glows usan radial-gradient con su propio fade
   (transparent 70%) en vez de filter:blur, así que no cuestan nada extra. ── */
html{ -webkit-text-size-adjust:100%; background:var(--bg); scroll-behavior:smooth; }
body{
  background-color:var(--bg) !important; color:var(--ink-2) !important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  cursor:auto !important;
  position:relative; overflow-x:hidden;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
    radial-gradient(circle 480px at 6% 0%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(circle 460px at 96% 6%, rgba(139,92,246,.20), transparent 70%)
  !important;
  background-size:28px 28px, 44px 44px, 44px 44px, 100% 900px, 100% 900px !important;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat !important;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0 !important;
  background-attachment:scroll !important;
}
a, button, .btn{ cursor:pointer !important; }
#cd,#cr{ display:none !important; }

/* ── tipografía masiva compactada, degradado blanco → plata en H1/H2 ── */
h1,h2,h3,h4,h5,h6,.section-title,.hero h1,.card h3,.problem-card h3,
.paso h3,.step h3,.include-card h3,.zona-card h3,.feature-card h3,.problema-card h3{
  font-family:'Plus Jakarta Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  letter-spacing:-.035em; line-height:1.08;
}
h1,h2,.section-title{
  background:linear-gradient(100deg,#fff 8%,#DCEBFF 42%,#B8C4D9 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; font-weight:800 !important;
}
h3,h4,h5,h6{ color:var(--ink) !important; font-weight:700 !important; }
h1 span, h1 em{ background:none !important; -webkit-background-clip:initial !important;
  background-clip:initial !important; color:var(--or-ink) !important; font-style:normal; }
p,li,span:not([class]),td{ color:var(--ink-2); }
.section-sub,.hero p,.hero-sub,.card p,.problem-card p,.paso p,.step p{
  color:var(--sub) !important;
}
/* fondos base: navy en todo, navy-2 en las alternas */
.section,section,.includes,.ba,.proceso,.social-proof,.zonas,.diferencias,
.compare-section,.causas-section,.for-whom,.content-wrap{
  background:var(--bg) !important; color:var(--ink-2) !important;
}
.section-alt,.alt,.section-dark,section:nth-child(even){ background:var(--bg-2) !important; }

/* ── tarjetas: cristal translúcido, borde ultra-fino ── */
.card,.include-card,.zona-card,.feature-card,.problema-card,.check-card,
.step-card,.svc-card,.compare-box,.result-box,.cta-box,.cta-articulo,
.cta-inline,.second-cta,.math-box,.calculadora,.stat-callout,.question-item{
  background:var(--glass) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; color:var(--ink-2) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55) !important;
}
.section-alt .card,.alt .card,.section-alt .result-box,.section-alt .cta-box{ background:var(--glass) !important; }
table th{ background:var(--bg-2) !important; color:var(--ink) !important; }
table td{ border-color:var(--line) !important; color:var(--ink-2) !important; }
table tr:nth-child(even) td{ background:rgba(255,255,255,.02) !important; }
.foot-bottom{ border-top:1px solid var(--line) !important; }
.card-icon,.problem-icon,.include-icon,.zona-icon,.feature-icon{
  display:flex !important; align-items:center; justify-content:center;
  width:46px !important; height:46px !important; border-radius:13px !important;
  background:var(--or-soft) !important; color:var(--or-ink) !important; font-size:1.35rem !important;
  margin-bottom:18px !important; line-height:1 !important;
}
h1{ font-size:clamp(2.6rem,7vw,4.9rem) !important; font-weight:800 !important; letter-spacing:-.04em !important; }
h2{ font-size:clamp(2.1rem,5vw,3.4rem) !important; font-weight:800 !important; }
h3{ font-size:1.25rem !important; font-weight:700 !important; letter-spacing:-.018em; line-height:1.3; }
p{ line-height:1.6; }
strong,b{ color:var(--ink); font-weight:600; }

/* ── barra superior ── */
.banner,.alert-bar{
  position:static !important;
  background:var(--bg-2) !important; color:var(--ink-2) !important;
  text-align:center; padding:11px 20px !important;
  font-family:Inter,sans-serif !important; font-size:.8125rem !important;
  font-weight:400 !important; letter-spacing:-.005em !important; border:none !important;
}
.banner a,.alert-bar a{ color:var(--or-ink) !important; font-weight:500; text-decoration:none !important; }

/* ── navegación ── */
nav,#main-nav{
  position:sticky !important; top:0 !important; height:auto !important;
  background:rgba(10,14,26,.78) !important;
  backdrop-filter:saturate(180%) blur(20px) !important; -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important; mix-blend-mode:normal !important;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:32px clamp(20px,4vw,40px) !important; min-height:auto; z-index:200;
}
.nav-logo{ color:var(--ink) !important; text-decoration:none; display:flex; flex-direction:column; gap:0; }
.nav-logo .wm,.nav-logo>div:first-child{
  font-family:Inter,sans-serif !important; font-weight:900 !important;
  font-size:1.85rem !important; letter-spacing:-.045em !important; color:var(--ink) !important;
}
.nav-logo .wm span,.nav-logo span{ color:var(--or-ink) !important; }
.nav-logo .sub,.nav-logo-sub{
  font-size:.58rem !important; font-weight:500 !important; letter-spacing:1.4px !important;
  text-transform:uppercase; color:var(--sub) !important; font-family:Inter,sans-serif !important;
}
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
  font-size:.875rem !important; font-weight:500 !important; color:#94A3B8 !important;
  letter-spacing:0 !important; text-decoration:none; transition:color .16s;
}
.nav-links a:hover{ color:#fff !important; }
.nav-lang{ display:inline-flex; gap:2px; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:100px; padding:3px; }
.nav-lang a{ font-size:.68rem !important; font-weight:600 !important; letter-spacing:.04em !important; text-transform:uppercase; color:#6C7690 !important; padding:4px 9px !important; border-radius:100px; transition:color .16s,background .16s; text-decoration:none; }
.nav-lang a:hover{ color:#fff !important; background:rgba(255,255,255,.08); }
.nav-lang a.active{ color:#fff !important; background:rgba(255,255,255,.10); }
@media(max-width:960px){ .nav-lang{ display:none !important; } }
.nav-cta,.nav-links a.nav-cta{
  background:transparent !important; color:var(--or-ink) !important;
  border:1px solid var(--or-ink) !important;
  font-weight:700 !important; padding:13px 27px !important; border-radius:100px !important;
  animation:ctaPulse 3s ease-in-out infinite;
}
.nav-cta:hover{
  background:rgba(0,245,160,.12) !important; color:var(--or-ink) !important;
  opacity:1; animation-play-state:paused;
}
.nav-hamburger span{ background:var(--ink) !important; }
.nav-mobile{
  background:rgba(10,14,26,.98) !important; border-bottom:1px solid var(--line) !important;
  top:auto !important;
}
.nav-mobile a{ color:var(--ink-2) !important; border-bottom:1px solid var(--line) !important; }
.nav-mobile a:last-child{ color:var(--or-ink) !important; }

/* ── hero ── */
.hero,.page-hero,.hero-section{
  background:transparent !important; color:var(--ink) !important;
  padding:clamp(90px,14vw,140px) clamp(20px,5vw,40px) 64px !important; text-align:center;
}
.hero p,.hero-sub{ color:var(--sub) !important; font-size:clamp(1.05rem,1.9vw,1.3rem) !important;
  line-height:1.6; max-width:58ch; margin-left:auto; margin-right:auto; }
.hero-tag,.hero-eyebrow,.urgency-pill{
  display:inline-block; background:rgba(0,245,160,.12) !important; color:#5CFFC9 !important;
  border:1px solid rgba(0,245,160,.3) !important; border-radius:100px !important;
  padding:13px 24px !important; font-size:.875rem !important; font-weight:700 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  margin-bottom:22px !important;
}

/* ── secciones ── */
.section,section{ padding:112px clamp(20px,5vw,40px) !important; }
.section-alt,.alt{ background:var(--bg-2) !important; }
.section-dark{ background:var(--bg-2) !important; color:var(--ink) !important; }
.section-dark h2,.section-dark h3,.section-dark .section-title{ color:var(--ink) !important; }
.section-dark p{ color:var(--sub) !important; }
.section-inner,.inner{ max-width:1120px !important; margin:0 auto !important; }
.section-label,.sec-label,.eyebrow{
  display:inline-block; background:none !important; border:none !important; padding:0 !important;
  font-size:.8125rem !important; font-weight:600 !important; letter-spacing:.02em !important;
  text-transform:none !important; color:var(--or-ink) !important; margin-bottom:14px !important;
}
.section-title{ margin-bottom:14px !important; }
.section-sub{ color:var(--sub) !important; font-size:1.125rem !important; line-height:1.55;
  margin-bottom:40px !important; max-width:60ch; }

/* ── tarjetas: grid ── */
.cards,.card-grid,.problem-grid{ display:grid; gap:18px; }
.card,.problem-card,.pcard,.include-card,.t-card{
  padding:34px 30px 30px !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.card:hover,.problem-card:hover,.pcard:hover{ transform:translateY(-4px); }
.card h3,.problem-card h3{ color:var(--ink) !important; margin-bottom:9px; }
.card p,.problem-card p{ color:var(--sub) !important; font-size:.9375rem !important; line-height:1.55; }
.card-icon,.problem-icon{ font-size:1.5rem !important; margin-bottom:16px; }

/* ── botones: verde neón principal con latido premium, negro secundario ── */
.btn,.cta,a.btn{
  display:inline-flex !important; align-items:center; gap:7px;
  background:var(--ink) !important; color:#0A0E1A !important;
  font-family:Inter,sans-serif !important; font-size:1rem !important; font-weight:600 !important;
  letter-spacing:-.012em !important; padding:14px 28px !important; border-radius:100px !important;
  text-decoration:none; box-shadow:none !important;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.btn:hover,.cta:hover{ background:#fff !important; transform:scale(1.02); }
.btn-green,.btn-primary,.btn-or,
a.btn-green,a.btn-primary,a.btn-or,button.btn-green,button.btn-primary,button.btn-or{
  background:var(--or-ink) !important; color:var(--bg) !important;
  animation:ctaPulse 3s ease-in-out infinite;
}
.btn-green:hover,.btn-primary:hover,.btn-or:hover,
a.btn-green:hover,a.btn-primary:hover,a.btn-or:hover{
  background:#14FFAE !important; transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,245,160,.4) !important; animation-play-state:paused;
}
.btn-ghost,.btn-gh,.btn-secondary,
a.btn-ghost,a.btn-gh,a.btn-secondary,button.btn-ghost,button.btn-gh,button.btn-secondary{
  background:transparent !important; color:var(--or-ink) !important; border:none !important;
  padding:14px 10px !important; animation:none !important;
}
.btn-ghost:hover,.btn-gh:hover,a.btn-ghost:hover,a.btn-gh:hover{ background:transparent !important; opacity:.65; transform:none; }
.btn-pill{ border-radius:100px !important; }

/* latido neón verde — botones de acción principal */
@keyframes ctaPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 rgba(0,245,160,0); }
  50%{ transform:scale(1.02); box-shadow:0 0 15px rgba(0,245,160,.4); }
}

/* ── listas de comprobación ── */
.checklist{ list-style:none !important; padding:0 !important; display:grid; gap:11px; }
.checklist li{
  position:relative; padding-left:26px !important; font-size:1rem !important;
  color:var(--ink-2) !important; line-height:1.5; background:none !important; border:none !important;
}
.checklist li::before{
  content:'' !important; position:absolute; left:3px; top:8px;
  width:11px; height:6px; border-left:2px solid var(--or); border-bottom:2px solid var(--or);
  transform:rotate(-45deg); background:none !important;
}

/* ── pasos del proceso ── */
.proceso-grid,.proceso,.steps{ display:grid; gap:18px; }
.paso,.step{
  background:var(--glass) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important; padding:30px 26px !important;
}
.paso-num,.step-num{
  font-family:Inter,sans-serif !important; font-size:.75rem !important; font-weight:700 !important;
  color:var(--or-ink) !important; background:none !important; width:auto !important; height:auto !important;
  border-radius:0 !important; display:block !important; margin-bottom:14px !important;
}
.paso h3,.step h3{ margin-bottom:8px; }
.paso p,.step p{ color:var(--sub) !important; font-size:.9375rem !important; }

/* ── cifras y resultados ── */
.metrics-row,.metrics-inner,.result-stats,.stats,.case-metrics,.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px;
}
.metric,.result-box,.stat,.r-stat,.h-stat{
  background:var(--card) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; padding:32px 26px !important; text-align:center;
}
.section-alt .metric,.alt .metric,.section-dark .metric,.section-dark .result-box{ background:var(--card) !important; }
.metric-val,.result-stat,.stat-num,.r-num,.h-stat-n,.case-metric-val,.st-n{
  font-family:'Plus Jakarta Sans',Inter,sans-serif !important; font-weight:800 !important;
  font-size:clamp(2.4rem,5vw,3.4rem) !important; letter-spacing:-.045em !important;
  color:var(--or-ink) !important; line-height:1 !important; margin-bottom:10px !important;
}
.metric-label,.stat-label,.r-label,.h-stat-l,.case-metric-label,.st-l{
  font-size:.9375rem !important; color:var(--sub) !important; line-height:1.45 !important;
  text-transform:none !important; letter-spacing:0 !important;
}
.result-label,.result-label-mini{
  font-size:.8125rem !important; font-weight:600 !important; color:var(--or-ink) !important;
  text-transform:none !important; letter-spacing:.02em !important;
}

/* ── caja de llamada a la acción ── */
.cta-box,.ctaband,.cta-band{
  padding:60px 40px !important; text-align:center; color:var(--ink) !important;
}
.cta-box h2,.cta-box h3{ color:var(--ink) !important; margin-bottom:16px; }
.cta-box p{ color:var(--sub) !important; font-size:1.125rem !important; max-width:52ch;
  margin:0 auto 28px !important; }

/* ── preguntas frecuentes ── */
details{ border-bottom:1px solid var(--line) !important; padding:20px 0 !important;
  background:none !important; }
summary{ color:var(--ink) !important; font-family:Inter,sans-serif !important;
  font-size:1.0625rem !important; font-weight:600 !important; cursor:pointer !important; }
summary span{ color:var(--or-ink) !important; }
details p{ color:var(--sub) !important; font-size:1rem !important; line-height:1.65 !important;
  margin-top:12px !important; }

/* ── etiquetas / píldoras ── */
.pill,.sector-pill,.about-pill,.tag{
  background:rgba(255,255,255,.04) !important; color:var(--ink-2) !important;
  border:1px solid var(--line) !important;
  border-radius:100px !important; padding:8px 17px !important;
  font-size:.875rem !important; font-weight:500 !important;
}
.section-alt .pill,.alt .pill{ background:rgba(255,255,255,.04) !important; }

/* ── testimonios (solo los de clientes reales) ── */
.testimonial-box,.t-card{
  background:var(--glass) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important; padding:32px 28px !important;
}
.testimonial-text,.t-text{ color:var(--ink-2) !important; font-size:1.0625rem !important;
  line-height:1.6 !important; font-style:normal !important; }
.testimonial-name,.t-name{ color:var(--ink) !important; font-weight:600 !important; }
.testimonial-role,.t-biz{ color:var(--sub) !important; font-size:.875rem !important; }
.testimonial-avatar{ background:var(--or-soft) !important; color:var(--or-ink) !important; }

/* ── pie ── */
footer{
  background:#070A14 !important; color:var(--sub) !important;
  padding:72px clamp(20px,5vw,40px) 32px !important; border-top:1px solid var(--line) !important;
  font-size:.85rem;
}
.foot-top,.foot-grid,.f-grid{
  display:grid !important; grid-template-columns:1.6fr 1fr 1fr 1fr !important; gap:48px !important;
  max-width:1120px; margin:0 auto 44px !important; align-items:start;
}
.foot-logo,.foot-brand .foot-logo{
  font-family:Inter,sans-serif !important; font-weight:900 !important; font-size:1.5rem !important;
  color:var(--ink) !important; letter-spacing:-.045em !important; margin-bottom:8px !important;
}
.foot-logo span{ color:var(--or-ink) !important; }
.foot-tagline{ font-size:.6rem !important; font-weight:600 !important; letter-spacing:1.8px !important;
  text-transform:uppercase; color:var(--sub) !important; margin-bottom:12px !important; }
.foot-brand p{ color:#8891A3 !important; font-size:.8125rem !important; line-height:1.65 !important;
  max-width:30ch; }
.foot-mail,.foot-phone{ color:var(--or-ink) !important; font-size:.8125rem !important;
  display:block; margin-top:8px; }
.foot-col-ttl,.f-h{ font-size:.8125rem !important; font-weight:600 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink) !important; margin-bottom:14px !important; }
.foot-col a{ display:block; color:#8891A3 !important; font-size:.8125rem !important;
  margin-bottom:10px !important; transition:color .2s; }
.foot-col a:hover{ color:#fff !important; }
.foot-bottom{ max-width:1120px; margin:0 auto !important; padding-top:26px !important;
  border-top:1px solid var(--line) !important; color:var(--sub) !important; font-size:.8125rem !important; }
.foot-legal a{ color:var(--sub) !important; }
.foot-legal a:hover{ color:var(--or-ink) !important; }

/* ── selector de idioma ── */
.lang-sw{ display:inline-flex; align-items:center; gap:2px; margin-left:14px;
  background:rgba(255,255,255,.05); border-radius:100px; padding:3px; }
nav .lang-sw{ margin-left:16px; }
footer .lang-sw{ background:rgba(255,255,255,.05); margin-left:0; }
.lang-sw-i{ font-size:.75rem !important; font-weight:600 !important; letter-spacing:.02em;
  color:var(--sub) !important; padding:5px 10px !important; border-radius:100px;
  text-decoration:none !important; transition:color .16s,background .16s; line-height:1; }
.lang-sw-i:hover{ color:var(--ink) !important; background:rgba(255,255,255,.08); }
.lang-sw-i.on{ background:var(--or-ink) !important; color:#0A0E1A !important; cursor:default; }
@media(max-width:900px){
  nav .lang-sw{ display:inline-flex !important; margin-left:8px; }
}

/* ── botón flotante de WhatsApp ── */
#float-btn{
  background:var(--or-ink) !important; color:#0A0E1A !important; border:none !important;
  border-radius:100px !important; font-size:.8125rem !important; font-weight:600 !important;
  box-shadow:0 10px 30px rgba(0,245,160,.35) !important;
  animation:ctaPulse 3s ease-in-out infinite;
}
#float-btn:hover{ opacity:.9; animation-play-state:paused; }

/* ── cabecera de artículo (blog) ── */
.articulo-hero{ background:var(--bg-2) !important; color:var(--ink) !important;
  padding:64px clamp(20px,5vw,40px) 56px !important; }
.articulo-hero h1{ color:var(--ink) !important; }
.articulo-hero p,.articulo-meta{ color:var(--sub) !important; }
.articulo-tag{ background:rgba(0,245,160,.12) !important; color:#5CFFC9 !important;
  border:1px solid rgba(0,245,160,.3) !important; border-radius:100px !important; padding:7px 16px !important;
  font-size:.8125rem !important; font-weight:500 !important; }
.articulo-body{ max-width:760px !important; }
.articulo-body h2{ font-size:1.65rem !important; margin:48px 0 16px !important; }
.articulo-body p,.articulo-body li{ color:var(--ink-2) !important; font-size:1.0625rem !important;
  line-height:1.7 !important; }
.ba-arrow{ background:var(--or-ink) !important; color:#0A0E1A !important; }

/* ── contenido de artículo (blog) ── */
.destacado,.callout,.nota{
  background:rgba(0,245,160,.08) !important; border:none !important; border-left:3px solid var(--or) !important;
  border-radius:0 var(--r) var(--r) 0 !important; padding:22px 24px !important;
}
.destacado p{ color:var(--ink-2) !important; }
.strategy-box{
  background:var(--glass) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important; backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important; padding:28px 26px !important;
}

/* ── secciones oscuras heredadas de las landings antiguas ── */
.includes,.ba,.proceso,.social-proof,.zonas,.diferencias,.compare-section,
.causas-section,.for-whom,.content-wrap,.calc-resultado,.cta-articulo,
.hero-legal,.content,.math-box,.stat-callout,.dual-card.b,.prod-mark{
  background:var(--bg-2) !important; color:var(--ink) !important;
}
.includes h2,.ba h2,.social-proof h2,.zonas h2,.diferencias h2,.compare-section h2,
.causas-section h2,.for-whom h2,.content-wrap h2,.cta-articulo h2,.hero-legal h1,
.includes h3,.social-proof h3,.for-whom h3,.dual-card.b h3{ color:var(--ink) !important; }
.includes p,.ba p,.social-proof p,.zonas p,.diferencias p,.compare-section p,
.causas-section p,.for-whom p,.content-wrap p,.cta-articulo p,.dual-card.b p{
  color:var(--sub) !important;
}
.tabla-comp th,.tabla th,.compare-table th{
  background:var(--bg-2) !important; color:var(--ink) !important;
}
.qbrand-m,.qcta{ background:var(--or-ink) !important; color:#0A0E1A !important; }
.qburger span{ background:var(--ink) !important; }
.btn-p{ background:var(--or-ink) !important; color:#0A0E1A !important; }
.btn-p:hover{ background:#14FFAE !important; }
#loader{ background:var(--bg) !important; }

/* ── formularios: fondo integrado + foco azul eléctrico ── */
input,textarea,select,.chat-input-row input[type=text]{
  background:#060814 !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:12px !important;
  font-family:Inter,sans-serif !important; padding:14px 16px !important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
input::placeholder,textarea::placeholder{ color:#5B6478 !important; }
input:focus,textarea:focus,select:focus{
  outline:none !important; border-color:rgba(59,130,246,.6) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;
}
label{ color:var(--ink-2) !important; }

/* caja de captura ancha (hero) — borde translúcido con destello azul en bucle al enfocar el grupo */
.capture-bar,.capture-row{
  position:relative; display:flex; align-items:center; gap:8px;
  background:#131B2E !important; border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important; padding:8px !important;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.capture-bar:focus-within,.capture-row:focus-within{
  border-color:rgba(59,130,246,.55) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.14),0 0 34px rgba(59,130,246,.18) !important;
}
.capture-bar input,.capture-row input{ flex:1; min-width:0; background:transparent !important; border:none !important; }
.capture-bar button,.capture-bar .btn{ animation:ctaPulse 3s ease-in-out infinite; }
.capture-bar button:hover,.capture-bar .btn:hover{ animation-play-state:paused; }

/* ── reveal on scroll (requiere el observer de qlic.js/página) ── */
.rv{ opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in{ opacity:1; transform:none; }

/* ═══════════════════════════════════════════════════════════
   MICRO-ANIMACIONES CSS PURAS — se activan solo en las páginas
   cuyo HTML incluya el marcado correspondiente (igual que en
   index.html). Definirlas aquí las deja listas para reutilizar
   en cualquier página nueva sin repetir código.
   ═══════════════════════════════════════════════════════════ */

/* aceleración GPU: forzar compositing layer en todas las micro-animaciones */
.radar-blade, .gear-big, .gear-small, .chart-path, .btn-pulse, .text-slide {
  will-change: transform, opacity, stroke-dashoffset;
}

/* 1. radar giratorio de barrido continuo (badge / tarjetas de proceso) */
.radar-scan-active{ flex-shrink:0; }
.radar-blade{ transform-origin:12px 12px; animation:radarSweep 2.5s linear infinite; }
@keyframes radarSweep{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* 2. dos engranajes interconectados girando en sentidos opuestos */
.gear-big{ transform-origin:13px 16px; animation:spin-clock 6s linear infinite; }
.gear-small{ transform-origin:24px 10px; animation:spin-counter 4.2s linear infinite; }
@keyframes spin-clock{ to{ transform:rotate(360deg); } }
@keyframes spin-counter{ to{ transform:rotate(-360deg); } }

/* 3. línea verde neón de la gráfica GSC dibujándose en bucle */
.chart-path{ filter:drop-shadow(0 0 5px rgba(34,197,94,.75)); }
.chart-path.draw{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:chartDraw 3.6s ease-in-out infinite;
}
@keyframes chartDraw{
  0%{ stroke-dashoffset:100; opacity:0; }
  10%{ opacity:1; }
  55%{ stroke-dashoffset:0; opacity:1; }
  82%{ stroke-dashoffset:0; opacity:1; }
  96%{ opacity:0; }
  100%{ stroke-dashoffset:100; opacity:0; }
}

/* 4. switch de texto vertical (nichos: clínicas dentales / despachos de abogados) */
.text-switcher{ height:18px; overflow:hidden; position:relative; min-width:0; }
.text-slide{ position:absolute; left:0; animation:slideText 6s infinite ease-in-out; }
.text-slide div{ height:18px; font-size:.8125rem; color:var(--dim); line-height:18px; white-space:nowrap; }
@keyframes slideText{
  0%,45%{ top:0; opacity:1; filter:blur(0); }
  50%{ opacity:0; filter:blur(2px); }
  55%,95%{ top:-18px; opacity:1; filter:blur(0); }
  100%{ opacity:0; filter:blur(2px); }
}

/* 5. latido neón verde de los CTAs principales — declarado más arriba (@keyframes ctaPulse) */

@media(prefers-reduced-motion:reduce){
  .radar-blade,.gear-big,.gear-small,.chart-path.draw,.text-slide,
  .nav-cta,.btn-green,.btn-primary,.btn-or,#float-btn,.capture-bar button,.capture-bar .btn{
    animation:none !important;
  }
}

/* ── responsive ── */
@media(max-width:960px){
  .nav-links{ display:none !important; }
}
@media(max-width:900px){
  .section,section{ padding:60px clamp(18px,5vw,28px) !important; }
  .hero,.page-hero{ padding:52px 20px 44px !important; }
  .foot-top,.foot-grid,.f-grid{ grid-template-columns:1fr 1fr !important; gap:30px !important; }
}
@media(max-width:600px){
  .cards,.card-grid,.problem-grid,.proceso-grid,.proceso,.steps,
  .metrics-row,.metrics-inner,.result-stats,.stats,.case-metrics,.hero-stats{
    grid-template-columns:1fr !important;
  }
  .foot-top,.foot-grid,.f-grid{ grid-template-columns:1fr !important; }
  .cta-box{ padding:42px 22px !important; }
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   REBRAND OVERRIDES · Verde Neón #00F5A0
   Capa final de sobreescritura global. Se carga al final del
   archivo a propósito: en empate de especificidad CSS gana la
   última regla declarada, así que este bloque tiene la última
   palabra sobre cualquier <style> propio de cada landing/blog
   sin tener que tocar los 104 HTML uno a uno.
   v1 · 16/08/2026
   ═══════════════════════════════════════════════════════════ */

/* 1. Fondo oscuro premium forzado en tarjetas, bento grids y
   secciones informativas que aún quedaron con fondo claro */
.card,.problem-card,.pcard,.include-card,.t-card,
.zona-card,.feature-card,.problema-card,.check-card,
.step-card,.svc-card,.compare-box,.result-box,
.cta-box,.cta-articulo,.cta-inline,.second-cta,
.math-box,.calculadora,.stat-callout,.question-item,
.causas-section,.for-whom,.content-wrap,.dual-card,
.testimonial-box,.lg-card,.doc-box,.doc-pre,.f-doc,.f-mail,
.bento-card,.bento-l,.bento-n,.bento-stats,.cta-card,
[class*="-card"],[class*="card-"],[class*="-box"]:not(input):not(button):not(a),
[class*="bento"]{
  background-color:#090A0F !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:1px solid rgba(0,245,160,.15) !important;
}
.card h1,.card h2,.card h3,.card h4,
.problem-card h1,.problem-card h2,.problem-card h3,.problem-card h4,
.pcard h1,.pcard h2,.pcard h3,.pcard h4,
[class*="-card"] h1,[class*="-card"] h2,[class*="-card"] h3,[class*="-card"] h4,
[class*="card-"] h1,[class*="card-"] h2,[class*="card-"] h3,[class*="card-"] h4,
[class*="-box"] h1,[class*="-box"] h2,[class*="-box"] h3,[class*="-box"] h4,
[class*="bento"] h1,[class*="bento"] h2,[class*="bento"] h3,[class*="bento"] h4{
  color:#FFFFFF !important;
}
.card p,.problem-card p,.pcard p,
[class*="-card"] p,[class*="card-"] p,[class*="-box"] p,[class*="bento"] p,
[class*="-card"] li,[class*="card-"] li,[class*="-box"] li,[class*="bento"] li,
[class*="-card"] span:not([class*="pill"]):not([class*="badge"]):not([class*="tag"]),
[class*="-box"] span:not([class*="pill"]):not([class*="badge"]):not([class*="tag"])
{
  color:#E5E7EB !important;
}

/* 2. Badges / píldoras legibles sobre el nuevo fondo oscuro */
.pill,.sector-pill,.about-pill,.tag,.lg-badge,
.eyebrow,.eyebrow-badge,.hero-badge,.hero-tag,.hero-eyebrow,.urgency-pill,
[class*="badge"],[class*="pill"]{
  background-color:rgba(0,245,160,.12) !important;
  color:#00F5A0 !important;
  border:1px solid rgba(0,245,160,.3) !important;
  font-weight:600 !important;
  text-shadow:none !important;
}

/* 3. Botones con fondo sólido verde neón → texto negro puro y legible
   (incluye botones de reserva y de formularios: capture-bar, cta-form) */
.btn,.cta,a.btn,
.btn-green,.btn-primary,.btn-or,.btn-p,.nav-cta,
a.btn-green,a.btn-primary,a.btn-or,
button.btn-green,button.btn-primary,button.btn-or,
.capture-bar button,.cta-form button,.cta-btn-pulse,
button[type="submit"],input[type="submit"],
.btn-reserva,.btn-book,.btn-enviar,.btn-submit,.form-submit{
  background-color:#00F5A0 !important;
  color:#000000 !important;
  font-weight:bold !important;
  text-shadow:none !important;
}
.btn-ghost,.btn-gh,.btn-secondary,
a.btn-ghost,a.btn-gh,a.btn-secondary,button.btn-ghost,button.btn-gh,button.btn-secondary{
  background-color:transparent !important;
  color:#00F5A0 !important;
  font-weight:bold !important;
}

/* 4. Botones CTA centrales que quedaron con fondo blanco y texto
   neón invisible (p.ej. "Quiero mi diagnóstico gratis" en Alicante) */
.btn-white,.cta-central,.cta-diagnostico,.btn-diagnostico,
[class*="diagnostico"],[class*="diagnóstico"]{
  background-color:#00F5A0 !important;
  color:#000000 !important;
  font-weight:bold !important;
  border:none !important;
}

/* 5. Botón flotante de WhatsApp — se mantiene el verde neón de marca
   (coherente con el resto del rebrand) forzando texto/icono en negro
   puro para que se lea al 100% sobre el fondo neón */
#float-btn,.whatsapp-float,.wa-float,[id*="whatsapp"],[class*="whatsapp"]{
  background-color:#00F5A0 !important;
  color:#000000 !important;
  font-weight:bold !important;
}
#float-btn *,.whatsapp-float *,.wa-float *,[id*="whatsapp"] *,[class*="whatsapp"] *{
  color:#000000 !important;
  fill:#000000 !important;
}

/* 6. Tabla/caja comparativa "Agencia tradicional vs Qlic" — cubre las
   distintas variantes de clase usadas por landing (.diferencias/.dif-col,
   .compare-box.bad/.good, .compare-table, .comp-box) que se quedaron con
   fondo claro (#fff5f5, #f0faff, #FFF5F5, #F0FDF4) y texto ilegible */
.diferencias,.dif-col,
.dif-col:first-child,.dif-col:last-child,
.compare-box,.compare-box.bad,.compare-box.good,
.compare-table,.compare-table td,.compare-table th,
.compare-grid,.comparison-grid,.comp-box,
[class*="compare"],[class*="dif-col"],[class*="comp-box"]{
  background-color:#090A0F !important;
  background-image:none !important;
  color:#E5E7EB !important;
  border-color:rgba(0,245,160,.15) !important;
}
.diferencias,.compare-grid,.comparison-grid{
  border:1px solid rgba(0,245,160,.15) !important;
}
.dif-col,.compare-box,.comp-box{
  border:1px solid rgba(0,245,160,.15) !important;
}
.compare-table tr:nth-child(even) td{ background-color:#0F1119 !important; }
.dif-col h3,.compare-box h3,.comp-box h3,
.compare-table th{ color:#FFFFFF !important; }
.dif-col ul li,.compare-box p,.comp-box li,.compare-table td{
  color:#E5E7EB !important; border-color:rgba(255,255,255,.08) !important;
}
/* columna/estado positivo ("Qlic", ".good", ".cro") → verde neón nítido */
.dif-col:last-child ul li::before,
.compare-box.good .compare-label,.compare-label.good,
.comp-box.cro .comp-label{
  color:#00F5A0 !important;
}
/* columna/estado negativo ("Agencia tradicional", ".bad") → rojo legible sobre negro */
.dif-col:first-child ul li::before,
.compare-box.bad .compare-label,.compare-label.bad{
  color:#FF5C5C !important;
}

/* 7. Tarjeta de caso de éxito "Un ejemplo concreto" (.caso) — algunas
   landings la traen con style="background:#FFFFFF" inline y sin color
   de texto, heredando el gris claro del tema oscuro global → invisible.
   Solo un !important en la hoja de estilos gana a un style inline sin
   !important, así que forzamos aquí el fondo, borde y jerarquía de texto. */
.caso,[class*="caso-"],[class*="-caso"]{
  background-color:#090A0F !important;
  background-image:none !important;
  color:#E5E7EB !important;
  border:1px solid rgba(0,245,160,.15) !important;
}
.caso h1,.caso h2,.caso h3,.caso h4,.caso strong{ color:#FFFFFF !important; }
.caso p,.caso li,.caso span{ color:#E5E7EB !important; }
.caso a{ color:#00F5A0 !important; font-weight:600 !important; }
/* métricas dentro de .caso: cifra grande en neón, etiqueta inferior en gris legible */
.caso div[style*="2.2rem"],.caso .metric-val,.caso .st-n,.caso .case-metric-val{
  color:#00F5A0 !important;
}
.caso div[style*=".82rem"],.caso .metric-label,.caso .st-l,.caso .case-metric-label{
  color:#9CA3AF !important;
}
.caso .metrics-row,.caso .metric{ background:transparent !important; }

/* ==========================================================================
   CORRECCI�N GLOBAL: MODO OSCURO PREMIUM PARA LAS SECCIONES DEL BLOG
   ========================================================================== */

/* 1. Tarjetas de art�culos relacionados (Las 3 de arriba) y Tarjeta del Lead Magnet */
.blog-related-posts, 
.tambien-te-puede-interesar .card,
.recurso-gratuito-box,
[style*="background-color: white"], 
[style*="background: white"],
[style*="background-color: #ffffff"],
[style*="background: #ffffff"] {
    background: rgba(19, 27, 46, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
}

/* 2. Forzar que todos los textos internos pasen a blanco para que sean legibles */
.blog-related-posts h3, 
.blog-related-posts p, 
.blog-related-posts span,
.recurso-gratuito-box h2,
.recurso-gratuito-box p,
.recurso-gratuito-box h3,
main h2,
main p {
    color: #ffffff !important;
}

/* 3. Mantener los textos secundarios o descripciones con un gris suave elegante */
.blog-related-posts p,
.recurso-gratuito-box p {
    color: #94a3b8 !important;
}


/* ==========================================================================
   OPTIMIZACI�N LIGHTHOUSE: CONTRASTE Y MODO OSCURO EN BLOG
   ========================================================================== */

/* Arreglar el contenedor y las tarjetas inline que Lighthouse marca con poco contraste */
.tambien-te-puede-interesar, 
.blog-related-posts,
.recurso-gratuito-box,
div[style*="background-color: white"],
div[style*="background: white"],
section[style*="background-color: white"] {
    background: rgba(19, 27, 46, 0.4) !important;
    background-color: rgba(19, 27, 46, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Forzar que CUALQUIER texto dentro de estos bloques pase a Blanco Puro para solucionar la alerta de accesibilidad */
.tambien-te-puede-interesar *,
.blog-related-posts *,
.recurso-gratuito-box *,
div[style*="background-color: white"] *,
section[style*="background-color: white"] * {
    color: #ffffff !important;
}

/* Mantener las etiquetas de categor�a (Alternativa, Reflexi�n, Servicio) en su verde ne�n original */
.blog-related-posts span, 
.tambien-te-puede-interesar span,
[style*="color: #00ffaa"] {
    color: #00ffaa !important;
}


/* ==========================================================================
   OPTIMIZACIÓN LIGHTHOUSE: CONTRASTE Y MODO OSCURO EN BLOG
   ========================================================================== */
.tambien-te-puede-interesar, 
.blog-related-posts,
.recurso-gratuito-box,
div[style*="background-color: white"],
div[style*="background: white"],
section[style*="background-color: white"] {
    background: rgba(19, 27, 46, 0.4) !important;
    background-color: rgba(19, 27, 46, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tambien-te-puede-interesar *,
.blog-related-posts *,
.recurso-gratuito-box *,
div[style*="background-color: white"] *,
section[style*="background-color: white"] * {
    color: #ffffff !important;
}

.blog-related-posts span, 
.tambien-te-puede-interesar span,
[style*="color: #00ffaa"] {
    color: #00ffaa !important;
}

/* ==========================================================================
   ELIMINAR RECUADROS INDIVIDUALES EN LOS ENLACES DEL BLOG
   ========================================================================== */
.tambien-te-puede-interesar a,
.blog-related-posts a,
.card a {
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    display: inline-block;
}