/* ════════════════════════════════════════════════════════════
   DRACO — CAPA DE MARCA
   Se carga la última. Solo toca los azules de texto y los
   botones; los fondos de cada sección se quedan como están.
   · Tipografía: Satoshi en toda la página.
   · Escala de texto común, tomando el hero como referencia.
   · Dos azules de texto, nunca en degradado:
       --c-deep  azul oscuro → palabras destacadas y botones
       --c-sky   azul claro  → etiquetas, checks, enlaces, detalles
   ════════════════════════════════════════════════════════════ */

:root{
  /* #2a62f0: blanco encima da 5.1:1 (AA en botones de 14px) */
  --c-deep:#2a62f0;
  --c-deep-hover:#3a6ef5;
  --c-deep-press:#2560eb;
  --c-sky:#3fb2ff;

  /* fondo oscuro único, ligeramente azulado, para que las secciones
     #0b0d10 y #050913 dejen de chocar entre sí */
  --bg:#080c16;

  /* texto terciario legible (5.2:1 sobre --bg; antes #666e79 = 3.8:1) */
  --text-3:#7d8592;

  /* ── RITMO COMÚN DE SECCIONES ──
     Todas las secciones usan el mismo ancho, margen lateral y aire
     vertical. Cada CSS de sección los consume en su contenedor. */
  --page-max:1176px;
  --page-gutter:32px;
  --section-pad:clamp(88px,10vw,128px);

  /* los tokens azules de landing.css apuntan a los dos azules */
  --blue:var(--c-deep);
  --blue-light:var(--c-sky);
  --blue-dark:var(--c-deep-press);
}
[data-theme="light"]{
  --c-deep:#1f56e0;
  --c-deep-hover:#3168ec;
  --c-deep-press:#1a4bc7;
  --c-sky:#066dba;
  --bg:#f7f8fa;
  --text-3:#646d7b;
}
@media(max-width:640px){:root{--page-gutter:16px}}
html:not([data-theme="light"]) :is(.wf,.tf){--wf-bg:#080c16;--tf-bg:#080c16}

/* Palabra destacada: azul oscuro plano */
.dh-text-accent,.tf-blue,.wf-blue,.footer-accent,
html:not([data-theme="light"]) .dh-hero-title .dh-text-accent{
  background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--c-deep)!important}
/* sobre el fondo azul del CTA final, el azul claro se lee mejor */
.fcta-accent{color:var(--c-sky)!important}
/* Precios y cifras destacadas */
.wf-price-free{color:var(--c-deep)!important}

/* ── AZUL CLARO: etiquetas, numeración y detalles ── */
.dh-eyebrow,.tf-eyebrow,.wf-eyebrow,.wf-tag,.fd-eyebrow,.cmp-eyebrow-num,.faq-eyebrow-num,.fd-eyebrow-num,
.tst-eyebrow-num,.fcta-eyebrow-num,.eco-closing-highlight,.faq-item.is-open .faq-num{color:var(--c-sky)!important}

/* ── BOTONES: un solo color, sin degradado ── */
.dh-btn--primary,.btn-next,.success-link,.eco-cta:not(.eco-cta--pending),.eco-td-btn,.fcta-submit,
.wf-cta,.help-step-num,.step-item.active .step-circle,.bts-card-badge,.wf-step-num,
html:not([data-theme="light"]) .dh-hero .dh-btn--primary{
  background:var(--c-deep)!important;background-image:none!important;color:#fff!important;filter:none!important;
  box-shadow:none!important}
.wf-cta{border-color:transparent!important}
.dh-btn,.btn-next,.success-link,.eco-cta,.fcta-submit,.wf-cta{
  transition:background-color .2s cubic-bezier(.22,.8,.24,1),transform .2s cubic-bezier(.22,.8,.24,1),border-color .2s!important}
.dh-btn--primary:hover,.btn-next:hover,.success-link:hover,.eco-cta:not(.eco-cta--pending):hover,.fcta-submit:hover,
.wf-cta:hover,
html:not([data-theme="light"]) .dh-hero .dh-btn--primary:hover{background:var(--c-deep-hover)!important;transform:translateY(-1px)}
.dh-btn:active,.btn-next:active,.success-link:active,.eco-cta:active,.fcta-submit:active,
.wf-cta:active{transform:scale(.98)!important}
.btn-create-shopify{background:#4f9a46!important;background-image:none!important}

/* Checks y puntos en azul claro */
.dh-pill-check,html:not([data-theme="light"]) .dh-pill-check,.dh-badge-dot{background:var(--c-sky)!important;border-color:var(--c-sky)!important;color:#fff!important}
/* pastilla activa con texto: azul oscuro (blanco sobre azul claro no llega a 4.5:1) */
.cmp-pill.is-active{background:var(--c-deep)!important;border-color:var(--c-deep)!important;color:#fff!important}

/* ── TIPOGRAFÍA: Satoshi en todo ── */
body,button,input,select,textarea,
.cmp,.faq,.cmp-draco-mark,.eco-icon-d{font-family:"Satoshi",system-ui,sans-serif}
body{-webkit-font-smoothing:antialiased;letter-spacing:-.003em}

/* ── ESCALA DE TEXTO (hero = título más grande de la página) ──
   H2 de sección 36px · H3 24px · entradillas 15.5px · texto 14.5–15px */
.dh-hero-title{font-weight:900!important;letter-spacing:-.035em!important}
.dh-stores-title,.tf-title,.bts-title,.wf-title,.eco-title,.fd-title,.cmp-title,.faq-title,.tst-title,.fcta-title{
  font-size:clamp(1.75rem,2.6vw,2.25rem)!important;font-weight:800!important;letter-spacing:-.03em!important;line-height:1.15!important}
.tf-slide-title,.fd-headline,.wf-offer-title{font-size:clamp(1.25rem,1.7vw,1.5rem)!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.2!important}
.wf-price-free{font-size:clamp(1.3rem,1.9vw,1.6rem)!important}
.tf-eyebrow,.wf-eyebrow{font-size:12px!important;letter-spacing:.14em!important;font-weight:800!important}
.tf-head{margin-bottom:48px!important}
.bts-desc,.tf-slide-text,.wf-lead,.wf-offer-text,.fcta-sub,.fd-sub,.eco-sub,.bts-sub,.tst-sub,.cmp-sub,.faq-sub{
  font-size:15px!important;line-height:1.65!important}
.wf-step-text{font-size:14px!important}
.wf-step-title{font-size:17px!important}
.faq-q-heading{font-size:15px!important}
.wf-cta{height:50px!important;padding:0 28px!important;font-size:14px!important;gap:12px!important}

/* ── LOS DOS AZULES EN LOS TÍTULOS, ALTERNANDO POR SECCIÓN (orden de la landing) ──
   oscuro: hero · built to sell · ecosistema · secciones top · FAQ · footer
   claro:  tiendas · por qué es gratis · funciones · comparativa · testimonios · CTA final */
:is(#stores,#why-free,#features-demo,#comparison,#testimonials) :is(h2,h3) :is(.dh-text-accent,.wf-blue,.tf-blue){color:var(--c-sky)!important}
:is(#stores,#why-free,#features-demo,#comparison,#testimonials) :is(.dh-eyebrow,.wf-eyebrow,.fd-eyebrow-num,.cmp-eyebrow-num,.tst-eyebrow-num){color:var(--c-deep)!important}
/* en claro el azul cielo pierde contraste sobre blanco: todos los acentos en el azul fuerte */
[data-theme="light"] :is(#stores,#why-free,#features-demo,#comparison,#testimonials) :is(h2,h3) :is(.dh-text-accent,.wf-blue,.tf-blue){color:var(--c-deep)!important}

/* ════════════════════════════════════════════════════════════
   FONDO CONTINUO
   Las secciones son transparentes y el fondo vive en UNA capa que
   cubre toda la página (body::before): así no hay cortes ni líneas
   entre secciones, porque no hay bordes de sección que pintar.
   · Rejilla de puntos solo en hero, "Hecho para vender" y comparativa.
   · Luces azules grandes, repartidas en vertical, que se solapan entre
     secciones en vez de quedarse dentro de cada una.
   ════════════════════════════════════════════════════════════ */
body{position:relative}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 700px at 50% 6%,rgba(47,109,255,.20),transparent 70%),
    radial-gradient(800px 900px at 88% 22%,rgba(63,178,255,.10),transparent 70%),
    radial-gradient(900px 900px at 8% 38%,rgba(47,109,255,.13),transparent 70%),
    radial-gradient(800px 900px at 92% 56%,rgba(47,109,255,.12),transparent 70%),
    radial-gradient(900px 800px at 10% 74%,rgba(63,178,255,.09),transparent 70%),
    radial-gradient(1000px 700px at 50% 96%,rgba(47,109,255,.16),transparent 70%)}
/* rejilla de puntos solo en hero, "Hecho para vender" y comparativa;
   se funde arriba y abajo (máscara) para no marcar el borde de la sección */
.dh-hero::after,.bts::before,.cmp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:block!important;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 95%);mask-image:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 95%)}
[data-theme="light"] .dh-hero::after,[data-theme="light"] .bts::before,[data-theme="light"] .cmp::before{background-image:radial-gradient(rgba(13,21,38,.08) 1px,transparent 1.2px)}
.dh-hero,.bts,.cmp{position:relative;isolation:isolate}
[data-theme="light"] body::before{opacity:.55}


/* secciones transparentes: el fondo de la página pasa por debajo */
.dh-hero,.dh-stores,.wf,.bts,.eco,.dapp,.cierre,.fd,.tf,.cmp,.ft,.faq,.tst,.footer{background:transparent!important}
.footer{border-top:0!important}
/* el hero ya no pinta su propio fondo ni el fundido inferior */
.dh-hero::before,.dh-hero-visual.hc::before{display:none}