/* ═══════════════════════════════════════════════════════════════════
   Promo −50 % en AndesIA Básico y Pro (las 3 primeras mensualidades)
   + instalación gratis, hasta el 30-nov-2026 23:59:59 hora de Ecuador.

   Solo lo cargan las páginas que la muestran, junto con assets/js/promo.js.
   Pasada la fecha, promo.js oculta todo [data-promo] y muestra [data-promo-off]
   (el precio de lista), así que el 1-dic nada queda mal aunque nadie revierta.
   Sin JS, el HTML muestra la promo. Condiciones: /legal/#promo-50.
   ═══════════════════════════════════════════════════════════════════ */

[data-promo][hidden], [data-promo-off][hidden] { display: none !important; }

/* ── Barra delgada arriba, sobre el menú fijo ───────────────────── */
:root { --promo-h0: 38px; }
.promo-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 210;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .45em;
  min-height: var(--promo-h0); padding: 9px var(--margin);
  background: var(--text); color: var(--ground);
  font-size: .84rem; line-height: 1.4; letter-spacing: .01em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.promo-bar b { font-weight: 600; color: #EE7A57; }  /* el bermellón sobre tinta, como .ground-ink */
.promo-bar .pb-go { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.promo-bar:hover .pb-go, .promo-bar:focus-visible .pb-go { color: #EE7A57; }
.promo-bar:focus-visible { outline: 2px solid #EE7A57; outline-offset: -4px; }

html:has(.promo-bar:not([hidden])) { scroll-padding-top: var(--promo-h, var(--promo-h0)); }
html:has(.promo-bar:not([hidden])) body { padding-top: var(--promo-h, var(--promo-h0)); }
html:has(.promo-bar:not([hidden])) .site-header { top: var(--promo-h, var(--promo-h0)); }
html:has(.promo-bar:not([hidden])) .mobile-menu { padding-top: calc(7.5rem + var(--promo-h, var(--promo-h0))); }

@media (max-width: 640px) {
  :root { --promo-h0: 52px; }
  .promo-bar { font-size: .76rem; padding-block: 7px; padding-inline: 16px; line-height: 1.45; }
  .promo-bar .pb-a, .promo-bar .pb-b { display: block; width: 100%; }
  .promo-bar .pb-go-wrap { display: none; }  /* toda la barra ya es el enlace */
}

/* ── Tarjetas de precio ─────────────────────────────────────────── */
.promo-head { display: flex; align-items: center; gap: .7rem; width: 100%; margin-bottom: 2px; }
.promo-tag {
  display: inline-block; background: var(--accent-text); color: var(--ground);
  font-size: var(--step--2); font-weight: 600; letter-spacing: .06em; line-height: 1.3;
  padding: 4px 9px 3px; white-space: nowrap;
}
.promo-head .plan-price-was { font-size: 1.15rem; }
.plan-price-now .promo-cents { font-size: .45em; vertical-align: .95em; margin-left: .04em; letter-spacing: 0; }
.promo-then { width: 100%; font-size: var(--step--1); color: var(--text); line-height: 1.45; }
.promo-then b { font-weight: 500; }
.plan-save.promo-save { color: var(--text); }
.plan-save.promo-save a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.svc-meta .promo-tag { margin-right: .5em; vertical-align: .1em; }

/* línea con la cuenta regresiva sobre la grilla de planes */
.promo-note { text-align: center; margin: 0 auto 2.4rem; max-width: 62ch; font-size: var(--step--1); color: var(--muted); line-height: 1.6; font-variant-numeric: tabular-nums; }
.promo-note b { color: var(--text); font-weight: 500; }
.promo-note .promo-tag { margin-right: .5em; vertical-align: .1em; }
.promo-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }