/* ═══════════════════════════════════════════════════════════════════════
   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;
}

/* Excepción: documentos legales.
   `p:has(+ h2)` de arriba existe para las landings, donde ese párrafo es de
   verdad una volanta del título que sigue. En un documento legal numerado el
   ÚLTIMO párrafo de cada artículo cae justo antes del <h2> del siguiente, y
   salía en mayúsculas naranjas con tracking: 18 párrafos así en la página del
   Intensivo (detectado el 2026-10-09 al unificar los legales en /terms; el
   bug ya estaba publicado). Las volantas reales de estas páginas usan
   .section-label, que sigue tomando el estilo de arriba.
   El `body:not(#ds)` del principio NO es decorativo: `:not(#ds)` aporta
   especificidad de ID, así que la regla de arriba pesa (1,1,1) y sin repetirlo
   acá esta excepción perdía aunque fuera más específica en clases. */
body:not(#ds) :is(.legal-section, .legal-doc, .legal-anexo, .legal-main) p:has(+ h2):not(.section-label):not(.eyebrow) {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: inherit !important;
  margin-bottom: 12px !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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIRA DE LOGOS "+70 MARCAS" EN MOBILE — unificada (17/9/2026)
   ═══════════════════════════════════════════════════════════════════════
   Dos problemas que estaban repetidos en casi todas las landings:

   1) El lienzo del logo iba de 90px a 202px segun la pagina (2,2x de
      diferencia para el mismo componente), aunque kit.css ya define 160px
      como base: cada CSS de pagina lo venia pisando hacia abajo. Ademas los
      archivos de logos son lienzos con mucho margen transparente (el logo
      visible ocupa entre el 11% y el 44% del alto), asi que a 90px de lienzo
      el logo de Endeavor quedaba en 9,6px reales. Se vuelve a los 160px del
      kit, que es lo que ya usaban catalogo, empresas, formaciones, nosotros,
      combo extremo y ventas.

   2) El texto "+70 MARCAS Y EMPRESAS CONFIAN EN NOSOTROS" se cortaba en 10
      de las 20 paginas con tira de logos: en mayusculas mide mas que el
      ancho de un telefono y varias paginas lo dejaban en 14px o 16px fijos.
      Pasa a tamano fluido.

   Esta hoja se carga ultima en las 24 paginas, asi que con la misma
   especificidad que las reglas de pagina (.acmp-page .acmp-logos X) alcanza
   para ganarles por orden de aparicion. Solo aplica a mobile: desktop queda
   como esta. */
/* El texto solo necesita achicarse en mobile: de 769px para arriba entra sin
   problema y bajarlo ahi lo dejaria innecesariamente chico. */
@media (max-width: 768px) {
  .acmp-page .acmp-logos .label,
  .acmp-logos .label {
    white-space: nowrap !important;
    font-size: min(13px, 2.9vw) !important;
    letter-spacing: 0.02em !important;
    padding: 0 12px !important;
  }
}

/* El lienzo, en cambio, llega hasta 900px: las mismas 11 paginas que tenian
   90px en mobile lo mantienen en 90px (99px la home) en toda la banda
   769-900, y recien a partir de 901px saltan a 202px. Es el mismo logo de
   9,6px reales, en tablet y notebook chica. */
@media (max-width: 900px) {
  .acmp-page .acmp-logos .brand-logo,
  .acmp-logos .brand-logo,
  .acmp-page .brand-logo,
  .brand-logo {
    height: 160px !important;
  }
}