/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO ACMP — manual del 13/9/2026 (caps 2, 4, 5 y 6)
   Sistema tipográfico unificado del 15/9/2026: pretítulo, título de sección,
   párrafos y botones IDÉNTICOS en todas las secciones y todas las landings.

   Cómo gana a lo viejo: cada landing trae su propio CSS, <style> dentro del
   body y estilos inline con valores distintos (y a veces !important). Las
   reglas tipográficas de acá usan el prefijo `body:not(#ds)` — suma
   especificidad de ID sin depender del markup — más !important, así se
   imponen a todas esas capas. Para cambiar un valor, tocá SOLO las
   variables de :root.
   ═══════════════════════════════════════════════════════════════════════ */

/* Satoshi no se cargaba en casi ninguna landing (caía a Poppins) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,700&display=swap');

:root {
  --ds-orange: #f74604;
  --ds-orange-hover: #c93702;
  --ds-navy: #222b49;
  --ds-navy-hover: #151c33;
  --ds-white: #ffffff;
  --ds-gray-text: #5A5F6E;

  --ds-font-text: 'Satoshi', 'Poppins', system-ui, sans-serif;
  --ds-font-button: 'Inter', system-ui, sans-serif;

  /* Pretítulo / volanta */
  --ds-eyebrow-size: 13px;
  --ds-eyebrow-line: 1.6;
  --ds-eyebrow-tracking: 0.2em;
  --ds-eyebrow-gap: 12px;          /* separación con el título de abajo */

  /* Título principal de sección */
  --ds-title-size: 34px;
  --ds-title-line: 1.15;
  --ds-title-tracking: -0.02em;

  /* Párrafos y bajadas */
  --ds-text-size: 17px;
  --ds-text-line: 1.5;

  /* Botones */
  --ds-btn-size: 16px;
  --ds-btn-radius: 10px;
  --ds-btn-pad-y: 18px;
  --ds-btn-pad-x: 36px;
}

/* ── 6. MOBILE (≤768px) — deriva de desktop, no se inventa ───────────── */
@media (max-width: 768px) {
  :root {
    --ds-title-size: 22px;
    --ds-title-line: 1.3;
    --ds-text-size: 13px;
    --ds-btn-size: 13px;
    --ds-btn-pad-y: 12px;
    --ds-btn-pad-x: 24px;
  }
}

/* ── 4. PRETÍTULO / VOLANTA ───────────────────────────────────────────── */
body:not(#ds) :is(
  .eyebrow,
  .acmp-quiz-eyebrow,
  .acmp-empresas-cta-eyebrow,
  .liq-resenas-pre,
  .home-producto-eyebrow,
  .acmp-testnivel-eyebrow,
  .acmp-featured-od-eyebrow,
  .section-label,
  p:has(+ h2)
) {
  font-family: var(--ds-font-text) !important;
  font-weight: 700 !important;
  font-size: var(--ds-eyebrow-size) !important;
  line-height: var(--ds-eyebrow-line) !important;
  letter-spacing: var(--ds-eyebrow-tracking) !important;
  text-transform: uppercase !important;
  color: var(--ds-orange) !important;
  margin-bottom: var(--ds-eyebrow-gap) !important;
}
/* Pretítulos sobre fondo naranja: blanco por contraste */
body:not(#ds) .acmp-manifiesto :is(.eyebrow, p:has(+ h2)),
body:not(#ds) .acmp-testnivel .acmp-testnivel-eyebrow { color: var(--ds-white) !important; }
/* La separación la da el pretítulo: el título no suma margen arriba */
body:not(#ds) :is(.eyebrow, .acmp-quiz-eyebrow, .acmp-empresas-cta-eyebrow, .liq-resenas-pre,
  .home-producto-eyebrow, .acmp-testnivel-eyebrow, .acmp-featured-od-eyebrow, .section-label,
  p:has(+ h2)) + h2 {
  margin-top: 0 !important;
}
/* Contenedores flex con gap propio: se descuenta el gap para que la
   distancia real pretítulo → título quede en 12px */
body:not(#ds) .home-producto-info > .home-producto-eyebrow {
  margin-bottom: calc(var(--ds-eyebrow-gap) - 20px) !important;
}
@media (min-width: 769px) {   /* en mobile .htest-simple no tiene gap */
  body:not(#ds) .htest-simple > .eyebrow {
    margin-bottom: calc(var(--ds-eyebrow-gap) - 20px) !important;
  }
}
body:not(#ds) :is([style*="gap:18px"], [style*="gap: 18px"]) > p:has(+ h2) {
  margin-bottom: calc(var(--ds-eyebrow-gap) - 18px) !important;
}

/* ── 4. TÍTULO PRINCIPAL DE SECCIÓN ───────────────────────────────────── */
body:not(#ds) :is(section, main, .acmp-page) :is(h2, [role="heading"][aria-level="2"]) {
  font-family: var(--ds-font-text) !important;
  font-weight: 700 !important;
  font-size: var(--ds-title-size) !important;
  line-height: var(--ds-title-line) !important;
  letter-spacing: var(--ds-title-tracking) !important;
  text-transform: none !important;
}
/* Palabras destacadas y cortes dentro del título heredan la métrica */
body:not(#ds) :is(section, main, .acmp-page) :is(h2, [role="heading"][aria-level="2"]) :is(span, b, strong, em, i) {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
/* Navy salvo que el título traiga blanco inline (secciones oscuras armadas con
   estilos inline). React reescribe los inline como "color: rgb(…)", por eso
   se matchea tanto el hex como el rgb. */
body:not(#ds) :is(section, main, .acmp-page) :is(h2, [role="heading"][aria-level="2"]):not(
  [style*="255, 255, 255"], [style*="#fff" i], [style*="acmp-white"], [style*="bg-surface"], [style*="fg-on-dark"]
) {
  color: var(--ds-navy) !important;
}
/* La palabra clave (.kw) sigue en naranja; sobre naranja, en blanco */
body:not(#ds) :is(section, main, .acmp-page) h2 .kw { color: var(--ds-orange) !important; }
body:not(#ds) :is(.acmp-manifiesto, .acmp-testnivel) h2 .kw { color: var(--ds-white) !important; }

/* ── 4. PÁRRAFOS Y BAJADAS ────────────────────────────────────────────── */
body:not(#ds) :is(
  .desc,
  .lead,
  .htest-simple-desc,
  .cc-sub,
  .acmp-para-quien-card,
  .acmp-module-bullets li,
  .acmp-test-text,
  .acmp-faq-a,
  .acmp-bio-lead,
  .acmp-certs-sub,
  .acmp-community-sub,
  .acmp-buy-subhead,
  .acmp-buy-feats li,
  .acmp-outcomes-list li,
  .acmp-quiz-lead,
  .acmp-quiz-list li,
  .acmp-empresas-cta-text,
  .acmp-featured-od-sub,
  .acmp-featured-od-desc,
  .acmp-ads-form-text,
  .acmp-ad-wrap p,
  .liq-ebook-inner p,
  .liq-ebook-desc,
  .liq-ebook-p,
  .liq-cert-desc,
  .liq-bono-desc,
  .liq-resenas-copy p,
  h2 + p
) {
  font-family: var(--ds-font-text) !important;
  font-weight: 400 !important;
  font-size: var(--ds-text-size) !important;
  line-height: var(--ds-text-line) !important;
}
body:not(#ds) :is(
  .desc, .lead, .htest-simple-desc, .cc-sub, .acmp-para-quien-card, .acmp-module-bullets li,
  .acmp-test-text, .acmp-faq-a, .acmp-bio-lead, .acmp-certs-sub, .acmp-community-sub,
  .acmp-buy-subhead, .acmp-buy-feats li, .acmp-outcomes-list li, .acmp-quiz-lead, .acmp-quiz-list li,
  .acmp-featured-od-sub, .acmp-featured-od-desc, .acmp-ads-form-text, .acmp-ad-wrap p,
  .liq-ebook-inner p, .liq-ebook-desc, .liq-ebook-p, .liq-cert-desc, .liq-bono-desc,
  .liq-resenas-copy p, h2 + p
):not([style*="255, 255, 255"], [style*="#fff" i], [style*="acmp-white"], [style*="bg-surface"], [style*="fg-on-dark"]) {
  color: var(--ds-navy) !important;
}

/* ── 4. SECCIONES DE FONDO OSCURO (navy / naranja): título y párrafo en blanco ─
   Lista medida en navegador (contenedor que pinta el fondo detrás del texto).
   `:not(#ds-light)` suma un ID para ganarle a la regla navy de arriba.
   curso-ventas-persuasion queda afuera: su CSS está vacío y ahí .acmp-quiz y
   .liq-ebook no tienen fondo navy. Las secciones oscuras armadas con estilos
   inline (empresas, webinar) ya traen blanco inline y se respeta. */
body:not(#ds) :is(.acmp-manifiesto, .acmp-empresas-cta, .acmp-testnivel, .acmp-ibanner, .sn-mv,
  .cc-combo.feat, .on-dark, .acmp-buy-card.is-combo):not(#ds-light)
  :is(h2, [role="heading"][aria-level="2"], .desc, .lead, .acmp-empresas-cta-text,
    .acmp-buy-feats li, h2 + p),
body:not(#ds):not([data-page-key="curso-ventas-persuasion"]) :is(.acmp-quiz, .liq-ebook):not(#ds-light)
  :is(h2, .desc, .lead, .acmp-quiz-lead, .acmp-quiz-list li, .liq-ebook-inner p,
    .liq-ebook-desc, .liq-ebook-p, h2 + p) {
  color: var(--ds-white) !important;
}

/* ── 4. BOTONES ───────────────────────────────────────────────────────── */
body:not(#ds) :is(
  /* primarios */
  .acmp-btn-primary, .acmp-buy-cta, .acmp-quiz-cta, .btn-level, .acmp-hhero-btn,
  .acmp-featured-od-cta, .liq-resenas-btn, .acmp-sb-cta, .acmp-upsell-cta, .acmp-btn-on-dark,
  .hpod-btn, a[style*="background:#f74604"], button[style*="background:#f74604"]:not([style*="width:8px"]),
  /* secundarios */
  .acmp-btn-ghost, .acmp-ibanner-btn, .acmp-testnivel-cta
) {
  font-family: var(--ds-font-button) !important;
  font-weight: 700 !important;
  font-size: var(--ds-btn-size) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ds-white) !important;
  border-radius: var(--ds-btn-radius) !important;
  padding: var(--ds-btn-pad-y) var(--ds-btn-pad-x) !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box;
  text-decoration: none !important;
}
body:not(#ds) :is(
  .acmp-btn-primary, .acmp-buy-cta, .acmp-quiz-cta, .btn-level, .acmp-hhero-btn,
  .acmp-featured-od-cta, .liq-resenas-btn, .acmp-sb-cta, .acmp-upsell-cta, .acmp-btn-on-dark,
  .hpod-btn, a[style*="background:#f74604"], button[style*="background:#f74604"]:not([style*="width:8px"])
) {
  background: var(--ds-orange) !important;
}
body:not(#ds) :is(
  .acmp-btn-primary, .acmp-buy-cta, .acmp-quiz-cta, .btn-level, .acmp-hhero-btn,
  .acmp-featured-od-cta, .liq-resenas-btn, .acmp-sb-cta, .acmp-upsell-cta, .acmp-btn-on-dark,
  .hpod-btn, a[style*="background:#f74604"], button[style*="background:#f74604"]:not([style*="width:8px"])
):hover {
  background: var(--ds-orange-hover) !important;
  color: var(--ds-white) !important;
}
body:not(#ds) :is(.acmp-btn-ghost, .acmp-ibanner-btn, .acmp-testnivel-cta) {
  background: var(--ds-navy) !important;
}
body:not(#ds) :is(.acmp-btn-ghost, .acmp-ibanner-btn, .acmp-testnivel-cta):hover {
  background: var(--ds-navy-hover) !important;
  color: var(--ds-white) !important;
}

/* ── 5. GRILLA: contenedor 1200 con laterales 80/20 ──────────────────── */
.acmp-page .acmp-outcomes-wrap,
.acmp-page .acmp-faq-wrap,
.acmp-page .acmp-buy-wrap,
.acmp-page .acmp-community-wrap,
.acmp-page .acmp-certs-head,
.acmp-page .liq-ebook-inner,
.acmp-page .acmp-ad-wrap,
.acmp-page .acmp-para-quien-inner,
.acmp-page .acmp-quiz-inner,
.acmp-page .acmp-modules-head,
.acmp-page .acmp-vsl-wrap > *,
.acmp-page .home-productos-inner,
.acmp-page .htest-inner,
.acmp-page .acmp-accion-head {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 80px;
  padding-right: 80px;
}

/* ── 5. SECCIONES: vertical 100/50 ───────────────────────────────────── */
.acmp-page .acmp-vsl-wrap,
.acmp-page .liq-ebook,
.acmp-page .acmp-ad,
.acmp-page .acmp-para-quien,
.acmp-page .acmp-quiz,
.acmp-page .acmp-modules-wrap,
.acmp-page .acmp-bonos-wrap,
.acmp-page .acmp-outcomes,
.acmp-page .acmp-bio-wrap,
.acmp-page .acmp-testimonial-wrap,
.acmp-page .acmp-certs,
.acmp-page .acmp-faq,
.acmp-page .acmp-buy,
.acmp-page .acmp-community,
.acmp-page .acmp-stats,
.acmp-page .liq-galeria,
.acmp-page .acmp-empresas-cta {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 768px) {
  .acmp-page .acmp-outcomes-wrap,
  .acmp-page .acmp-faq-wrap,
  .acmp-page .acmp-buy-wrap,
  .acmp-page .acmp-community-wrap,
  .acmp-page .acmp-certs-head,
  .acmp-page .liq-ebook-inner,
  .acmp-page .acmp-ad-wrap,
  .acmp-page .acmp-para-quien-inner,
  .acmp-page .acmp-quiz-inner,
  .acmp-page .acmp-modules-head,
  .acmp-page .acmp-vsl-wrap > *,
  .acmp-page .home-productos-inner,
  .acmp-page .htest-inner,
  .acmp-page .acmp-accion-head {
    padding-left: 20px;
    padding-right: 20px;
  }
  .acmp-page .acmp-vsl-wrap,
  .acmp-page .liq-ebook,
  .acmp-page .acmp-ad,
  .acmp-page .acmp-para-quien,
  .acmp-page .acmp-quiz,
  .acmp-page .acmp-modules-wrap,
  .acmp-page .acmp-bonos-wrap,
  .acmp-page .acmp-outcomes,
  .acmp-page .acmp-bio-wrap,
  .acmp-page .acmp-testimonial-wrap,
  .acmp-page .acmp-certs,
  .acmp-page .acmp-faq,
  .acmp-page .acmp-buy,
  .acmp-page .acmp-community,
  .acmp-page .acmp-stats,
  .acmp-page .liq-galeria,
  .acmp-page .acmp-empresas-cta {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}