/* ══════════════════════════════════════════════════════════
   DIGINCREASE — Sistema papel/tinta
   Misma gramática visual que posta.digincrease.com.ar e
   inmoby.ar: fondo de papel cálido, tinta cálida, UN acento
   plano, sombras neutras y display de tracking negativo.
   Se carga ÚLTIMA: redefine los tokens que ya usa el sitio,
   así el reskin alcanza a todo sin tocar cada regla.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Papel ── */
  --papel:        #f9f6f0;
  --papel-alto:   #fffdf9;
  --papel-bajo:   #f1ede5;
  --papel-hundido:#ece7dc;
  --linea:        #e2d9ce;
  --linea-suave:  #ece6da;

  /* ── Tinta ── */
  --tinta:        #1b1410;
  --tinta-media:  #5c4e42;
  --tinta-suave:  #6b5e52;
  --tinta-tenue:  #a09082;
  --palabra-off:  #cfc5b4;

  /* ── Acento único. #1e7a3c da 5.37:1 con blanco encima
        y 4.93:1 sobre el papel: sirve de relleno Y de texto. ── */
  --ac:       #1e7a3c;
  --ac-hover: #175f2f;
  --ac-dim:   rgba(30,122,60,.09);
  --ac-glow:  rgba(30,122,60,.22);
  --ac-deco:  #2f9e55;

  /* ── Remapeo de los tokens viejos: un solo verde mata
        todos los degradés sin tocar el markup ── */
  --g1: #1e7a3c;
  --g2: #1e7a3c;
  --g3: #1e7a3c;
  --dark:   #1b1410;
  --text:   #1b1410;
  --text-2: #6b5e52;
  --text-3: #a09082;
  --bg:     #f9f6f0;
  --bg-soft:#f1ede5;
  --border: #e2d9ce;

  /* ── Sombras neutras, nunca de color ── */
  --shadow-sm: 0 1px 3px rgba(27,20,16,.06), 0 1px 2px rgba(27,20,16,.04);
  --shadow-md: 0 4px 20px rgba(27,20,16,.08);
  --shadow-lg: 0 16px 48px rgba(27,20,16,.14);
  --ring: 0 0 0 3px rgba(30,122,60,.22);

  /* ── Movimiento: una curva, tres duraciones ── */
  --mov-rapido:  .15s;
  --mov-revelado:.5s;
  --mov-grande:  .7s;
  --curva: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.4,0,.2,1);

  --ff: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Una sola familia, como posta ── */
html, body, [class], button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, p, a, span, li, em, strong, label, small {
  font-family: var(--ff) !important;
}

/* ── Papel plano con dos manchas suaves. Sin trama de puntos. ── */
body {
  background: var(--papel) !important;
  background-image: none !important;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
body::before, body::after {
  content: ''; position: fixed; z-index: -1; border-radius: 50%;
  pointer-events: none; filter: blur(90px);
}
body::before { top: -20vh; right: -12vw; width: 54vw; height: 54vw; background: rgba(47,158,85,.10); }
body::after  { bottom: -28vh; left: -16vw; width: 50vw; height: 50vw; background: rgba(201,167,104,.13); }

/* ── Display: el gesto tipográfico que define a las dos refs ── */
.display, h1, h2 {
  letter-spacing: -.035em;
  line-height: 1.05;
  font-weight: 800;
  text-wrap: balance;
}
.display-aire { line-height: 1.16; }
.display em, h1 em, h2 em {
  color: var(--ac);
  font-style: italic;
}
/* El salto de linea solo donde lo diseñe: si no, la coma queda
   huerfana al principio de la linea siguiente. */
.hero-copy h1 em, .cyber-title em { display: block; }
h1 { font-size: clamp(2.4rem, 1.15rem + 3.7vw, 3.9rem); color: var(--tinta); }
h2 { font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3.05rem); color: var(--tinta); }
h3 { letter-spacing: -.02em; }

/* ── Antetítulo con guión, igual que las dos refs ── */
.antetitulo {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 22px;
}
.antetitulo::before { content: "\2014"; color: var(--tinta-tenue); margin-right: .55em; }

/* ── Cuerpo con aire: 16/28 como posta ── */
.sub-lead { font-size: 17px; line-height: 1.7; color: var(--tinta-suave); }

/* ── Frase revelada palabra por palabra ── */
.frase-lit > span { color: var(--palabra-off); transition: color var(--mov-revelado) ease-out; }
.frase-lit.visible > span { color: inherit; }

/* ── Botones planos. Sin degradé, sin sombra de color. ── */
.btn-primary, .btn-primary-nav, .btn-lg, .cy-btn, .btn-form-submit,
.btn-submit, .cta-wa-btn, .btn-wa, .dgpl-cta, .price-cta, .mobile-cta {
  background: var(--ac) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background var(--mov-rapido) var(--curva);
}
.btn-primary:hover, .btn-primary-nav:hover, .btn-lg:hover, .cy-btn:hover,
.btn-form-submit:hover, .btn-submit:hover, .cta-wa-btn:hover, .btn-wa:hover,
.dgpl-cta:hover, .price-cta:hover, .mobile-cta:hover {
  background: var(--ac-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-outline, .btn-ghost, .btn-demo, .btn-ver, .wa-alt {
  background: transparent !important;
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.btn-outline:hover, .btn-ghost:hover, .btn-demo:hover, .btn-ver:hover, .wa-alt:hover {
  background: var(--papel-bajo) !important;
  border-color: var(--tinta-tenue) !important;
}

/* ── Superficies: borde fino, sombra neutra, nada de glow ── */
.demo-card, .price-card, .dgpl-card, .integ-card, .faq-item,
.cta-form-box, .form-box, .cy-card, .carousel-item {
  background: var(--papel-alto) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: var(--shadow-sm) !important;
}
.demo-card:hover, .price-card:hover, .dgpl-card:hover, .cy-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--linea) !important;
  transform: translateY(-3px);
}

/* ── Nav sobre papel ── */
nav {
  background: rgba(249,246,240,.86) !important;
  border-bottom: 1px solid var(--linea) !important;
  backdrop-filter: saturate(150%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(16px) !important;
}
.nav-link { color: var(--tinta-suave) !important; }
.nav-link:hover { color: var(--tinta) !important; }
.nav-link.nav-promo { color: var(--ac) !important; background: var(--ac-dim) !important; }
.nav-link.nav-promo:hover { color: var(--ac-hover) !important; background: var(--ac-dim) !important; }

/* ── Chips y etiquetas: tintadas al 9%, nunca sólidas ── */
.pill-tag, .hero-tag, .cta-eyebrow, .demo-tag, .card-tag, .cyber-eyebrow {
  background: var(--ac-dim) !important;
  color: var(--ac) !important;
  border: none !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 700;
}

/* ── Formularios ── */
.fg input, .fg select, .cta-form-box input, .cta-form-box select,
.cta-form-box textarea, .form-group input, .form-group select {
  background: var(--papel-bajo) !important;
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
  border-radius: 10px !important;
}
.fg input:focus, .cta-form-box input:focus, .cta-form-box select:focus,
.cta-form-box textarea:focus, .form-group input:focus {
  background: var(--papel-alto) !important;
  border-color: var(--ac) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* ── Footer ── */
footer { background: var(--papel-bajo) !important; border-top: 1px solid var(--linea) !important; }

/* ── Foco accesible ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .frase-lit > span { color: inherit; }
}


/* ══════════════════════════════════════════════════════════
   Pasada 2 — colores que estaban hardcodeados fuera de tokens
   ══════════════════════════════════════════════════════════ */

/* Manchas de fondo: mas calidas, menos verdes */
body::before { background: rgba(30,122,60,.07) !important; }
body::after  { background: rgba(201,167,104,.16) !important; }

/* Barra de promo: tinta, no verde oscuro */
.cyber-bar { background: var(--tinta) !important; }
.cyber-bar b, .cyber-bar strong { color: #fff; }

/* Plan completo: carta de tinta solida, sin anillo ni glow */
.cy-full {
  background: var(--tinta) !important;
  background-image: none !important;
  border: 1px solid var(--tinta) !important;
  box-shadow: var(--shadow-lg) !important;
}
.cy-full::before { display: none !important; }
.cy-full h3, .cy-full .big { color: #fff !important; }
.cy-full p, .cy-full .cy-inc li { color: rgba(255,253,249,.72) !important; }
.cy-full-tag {
  background: var(--ac) !important; color: #fff !important;
  box-shadow: none !important; letter-spacing: .12em;
}
.cy-price-box {
  background: rgba(255,253,249,.06) !important;
  border: 1px solid rgba(255,253,249,.14) !important;
  box-shadow: none !important;
}
.cy-save {
  background: rgba(30,122,60,.22) !important;
  border: 1px solid rgba(255,253,249,.18) !important;
  color: #a7e0b8 !important;
}
.cy-full .sep, .cy-full .note { color: rgba(255,253,249,.5) !important; }

/* Superficies blancas frias -> papel alto */
.hero-chat, .hc-msg.in, .search-box, .carousel-item, .stat-card, .hero-chat-note {
  background: var(--papel-alto) !important;
  border-color: var(--linea) !important;
}
.carousel-section, .stats-section {
  background: transparent !important;
  backdrop-filter: none !important;
}
.carousel-track-wrapper::before { background: linear-gradient(to right, var(--papel), transparent) !important; }
.carousel-track-wrapper::after  { background: linear-gradient(to left,  var(--papel), transparent) !important; }

/* Burbuja saliente: acento plano */
.hc-msg.out { background: var(--ac) !important; background-image: none !important; }
.hc-avatar  { background: var(--tinta) !important; background-image: none !important; }

/* Nada de texto con degrade recortado: es el tic mas delator */
.cta-title em, .cyber-title em, .hero h1 em {
  background: none !important;
  -webkit-text-fill-color: var(--ac) !important;
  color: var(--ac) !important;
  background-clip: border-box !important;
}

/* Verde de WhatsApp fuera: un solo acento en toda la pagina */
.btn-wa, .cta-wa-btn, .wa-float, .btn-demo-wa {
  background: var(--ac) !important; background-image: none !important;
  color: #fff !important; box-shadow: none !important;
}

/* Tarjeta del chat del hero: la unica sombra grande de la pagina */
.hero-chat { box-shadow: var(--shadow-lg) !important; border-radius: 14px !important; }
.hero-chat-note { box-shadow: none !important; border-radius: 0 0 14px 14px !important; }

/* ══════════ Seccion de problema (frase revelada) ══════════ */
.problema {
  padding: clamp(80px, 11vw, 150px) 24px;
  position: relative;
}
.problema-inner { max-width: 940px; margin: 0 auto; }
.problema .frase-lit {
  font-size: clamp(1.75rem, .95rem + 2.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.16;
  color: var(--tinta);
  text-wrap: balance;
  margin: 0;
}
.problema-pie {
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14px; color: var(--tinta-suave);
}
.problema-pie span { display: inline-flex; align-items: center; gap: 8px; }
.problema-pie svg { width: 15px; height: 15px; stroke: var(--ac); fill: none; stroke-width: 2.4; flex-shrink: 0; }

/* Hero: aire y jerarquia como las refs */
.hero-copy .antetitulo { margin-bottom: 20px; }
.hero h1 { margin-bottom: 24px; }
.hero .sub-lead { max-width: 52ch; margin-bottom: 30px; }
.hero-trust strong { color: var(--tinta); font-weight: 800; letter-spacing: -.02em; }
.hero-trust > .ht-item > span { color: var(--tinta-tenue); }
.ht-sep { background: var(--linea) !important; }


/* ══════════ Popup promocional ══════════ */
.promo-overlay { background: rgba(27,20,16,.5) !important; }
.promo-popup {
  background: var(--papel-alto) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg) !important;
}
@media (max-width: 639px) { .promo-popup { border-radius: 16px 16px 0 0 !important; } }
.promo-header {
  background: var(--tinta) !important;
  background-image: none !important;
}
.promo-badge {
  background: var(--ac) !important;
  color: #fff !important;
  letter-spacing: .12em;
}
.promo-close { background: rgba(255,253,249,.14) !important; }
.promo-close:hover { background: rgba(255,253,249,.26) !important; }
.promo-header h2 { letter-spacing: -.03em; }
.promo-header .sub { color: rgba(255,253,249,.7) !important; }
.promo-check {
  background: var(--ac) !important;
  background-image: none !important;
}
.promo-price { background: var(--papel-bajo) !important; border: 1px solid var(--linea) !important; }
.promo-price .old { color: var(--tinta-tenue) !important; }
.promo-price .new { color: var(--tinta) !important; letter-spacing: -.03em; }
.promo-btn-main {
  background: var(--ac) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.promo-btn-main:hover { background: var(--ac-hover) !important; box-shadow: none !important; transform: none !important; }
.promo-btn-later { color: var(--tinta-tenue) !important; }
.promo-btn-later:hover { color: var(--tinta-suave) !important; }
.promo-timer { color: var(--tinta-tenue) !important; }
.promo-item { color: var(--tinta-media) !important; }
.promo-item b, .promo-item strong { color: var(--tinta) !important; }

/* Antetitulo del hero: una sola linea */
.hero-copy .antetitulo { white-space: nowrap; }
@media (max-width: 420px) { .hero-copy .antetitulo { white-space: normal; } }


/* ══════════ Contraste: tinta-tenue (2.83:1) solo decorativo ══════════
   Todo texto chico pasa a tinta-suave #6b5e52 = 5.75:1 sobre papel. */
.hero-trust > .ht-item > span,
.promo-timer, .promo-btn-later,
.carousel-label, .form-note, .cyber-when,
.footer-bottom, .footer-col h4 {
  color: var(--tinta-suave) !important;
}
.antetitulo { color: var(--tinta-suave); }

/* Antetitulo: no se estira en pantallas chicas */
@media (max-width: 560px) {
  .antetitulo { font-size: 11px; letter-spacing: .1em; }
}


/* ══════════════════════════════════════════════════════════
   Pasada 3 — chat sobre papel, iconos, hero y caja de precio
   ══════════════════════════════════════════════════════════ */

/* ── Iconos: nunca heredan --dark (quedaban negros sobre verde) ── */
.cy-btn svg, .cy-cta svg, .btn-wa svg, .cta-wa-btn svg,
.btn-primary svg, .nav-right .btn-primary svg, .promo-btn-main svg {
  fill: currentColor !important;
  stroke: none !important;
  width: 16px; height: 16px; flex-shrink: 0;
}
.hc-status .hc-wa { fill: var(--ac) !important; }

/* ── El chat se integra al papel ── */
.hero-chat {
  background: var(--papel-alto) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg) !important;
}
.hc-head {
  background: var(--papel-alto) !important;
  border-bottom: 1px solid var(--linea-suave) !important;
}
.hc-body {
  background: var(--papel-bajo) !important;
  gap: 14px !important;
}
.hc-name  { color: var(--tinta) !important; }
.hc-status, .hc-time, .hc-meta { color: var(--tinta-suave) !important; }

/* Avatar: tintado, no tinta plena. Las iniciales se leen. */
.hc-avatar {
  background: var(--ac-dim) !important;
  background-image: none !important;
  border: 1px solid var(--linea) !important;
  color: var(--ac) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

.hc-msg.in {
  background: var(--papel-alto) !important;
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
}
.hc-msg.out {
  background: var(--ac) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
}
.hc-auto { color: var(--ac) !important; }
.hc-auto svg { stroke: var(--ac) !important; fill: none !important; }

.hero-chat-note {
  background: var(--papel-alto) !important;
  border: 1px solid var(--linea) !important;
  border-top: 1px dashed var(--linea) !important;
  color: var(--tinta-suave) !important;
}

/* ── Burbujas que entran una por una, como inmoby ── */
@keyframes burbujaEntra {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.hero-chat .hc-row {
  animation: burbujaEntra .5s var(--curva) both !important;
}
.hero-chat .hc-row:nth-of-type(1) { animation-delay: .55s !important; }
.hero-chat .hc-row:nth-of-type(2) { animation-delay: 1.35s !important; }
.hero-chat .hc-row:nth-of-type(3) { animation-delay: 2.15s !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-chat .hc-row { animation: none !important; }
}

/* ── Hero a pantalla completa: SOLO la landing. En las demos el hero
      tiene un titulo y un parrafo, y el flex los ponia lado a lado. ── */
.hero-landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-bottom: clamp(60px, 8vh, 110px) !important;
}
.hero-inner { width: 100%; }
.hero-landing h1 {
  font-size: clamp(2.7rem, 1.2rem + 4.6vw, 4.5rem) !important;
  margin-bottom: 26px;
}
.hero .sub-lead { font-size: 17.5px; }
@media (max-width: 900px) {
  .hero-landing { min-height: auto; display: block; }
  .hero h1 { font-size: clamp(2.5rem, 1.1rem + 6.4vw, 3.4rem) !important; }
}

/* ── Caja de precio: una linea divisoria, no una tarjeta adentro ── */
.cy-price-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,253,249,.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 26px 0 0 !important;
}
.cy-save {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #8fd3a5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.cy-price-box .big { letter-spacing: -.04em; }
.cy-btn { margin-top: 18px; }


/* Barra de promo: nada de un tercer verde sobre tinta */
.cyber-bar .cb-cta { color: #8fd3a5 !important; }
.cyber-bar .cb-tag { background: var(--ac) !important; color: #fff !important; }
.cyber-bar .cb-txt { color: rgba(255,253,249,.92) !important; }
.cyber-bar .cb-time { color: rgba(255,253,249,.6) !important; }


/* El logo de WhatsApp tambien se ve en mobile (polish.css lo ocultaba) */
@media (max-width: 900px) {
  .nav-right .btn-primary svg { display: inline-block !important; width: 15px; height: 15px; }
}


/* ══════════ Menu mobile canonico (antes iba con estilos inline) ══════════ */
.mobile-menu-link {
  display: block;
  font-size: 15px; font-weight: 600;
  color: var(--tinta) !important;
  text-decoration: none;
  padding: 13px 14px; border-radius: 10px;
  transition: background var(--mov-rapido) var(--curva);
}
.mobile-menu-link:hover, .mobile-menu-link:focus-visible { background: var(--papel-bajo); }
.mobile-menu .mobile-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 14px;
  font-size: 15px; font-weight: 700;
  background: var(--ac) !important; color: #fff !important;
  border-radius: 12px; text-decoration: none;
}
.mobile-menu {
  background: var(--papel-alto) !important;
  border-bottom: 1px solid var(--linea) !important;
  padding: 14px 16px 20px !important;
}

/* ══════════ Promo extendida (cuando el contador llega a cero) ══════════ */
.promo-extendida .cb-time, .promo-extendida .cb-sep { display: none; }
.promo-extendida .cb-date { color: #8fd3a5 !important; }


/* ══════════ Cards de oferta: mas explicadas ══════════ */
.cy-detail {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--tinta-media) !important;
  margin-bottom: 22px !important;
  max-width: none !important;
}
.cy-para {
  margin: 18px 0 0;
  padding: 13px 15px;
  background: var(--papel-bajo);
  border-left: 2px solid var(--ac);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-media);
}
.cy-para b {
  display: block;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 5px;
}
.cy-cond {
  border-top: 1px solid var(--linea) !important;
  color: var(--tinta-suave) !important;
}
.cy-cond b {
  display: block;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-tenue); margin-bottom: 5px;
}


/* ══════════ Topbar mobile: los links viven en el hamburger ══════════ */
@media (max-width: 900px) {
  .nav-center { display: none !important; }
  nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .hamburger { display: block !important; }
}
@media (min-width: 901px) {
  .hamburger { display: none !important; }
}


/* ══════════ Nav: nunca mas ancha que la pantalla ══════════ */
nav { box-sizing: border-box; max-width: 100vw; }
nav * { min-width: 0; }
@media (max-width: 900px) {
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  .nav-right .btn-primary {
    font-size: 13px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }
  .hamburger-btn { flex-shrink: 0; }
}
@media (max-width: 400px) {
  .nav-right .btn-primary { font-size: 12.5px !important; padding: 9px 12px !important; }
}


/* ══════════ Fila de estadisticas: 3 columnas fijas desbordaban en mobile ══════════ */
@media (max-width: 760px) {
  .stats-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stats-inner > *, .stat-box, .stat-txt { min-width: 0 !important; }
  .stat-box { justify-content: flex-start !important; }
  .stat-desc, .stat-number { white-space: normal !important; }
}


/* ══════════ Tabla de integraciones: entraba por 2-22px de mas ══════════ */
.integ-table { max-width: 100%; }
@media (max-width: 760px) {
  .integ-table { table-layout: fixed; width: 100% !important; }
  .integ-table th, .integ-table td {
    font-size: 12px !important;
    padding: 10px 8px !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .integ-table img, .integ-table svg { max-width: 100%; height: auto; }
}


/* ══════════════════════════════════════════════════════════
   Barra de Cyber Monday: ahora vive en las 7 paginas
   ══════════════════════════════════════════════════════════ */
.cyber-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 260;
  height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 14px; background: var(--tinta); color: #fff; text-decoration: none;
  font-size: 13px; padding: 0 20px; white-space: nowrap; overflow: hidden;
}
.cyber-bar .cb-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ac); color: #fff; padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}
.cyber-bar .cb-txt { color: rgba(255,253,249,.9); }
.cyber-bar .cb-txt strong { color: #fff; font-weight: 700; }
.cyber-bar .cb-short { display: none; }
.cyber-bar .cb-sep { width: 1px; height: 16px; background: rgba(255,253,249,.18); }
.cyber-bar .cb-date { color: rgba(255,253,249,.6); font-size: 12px; }
.cyber-bar .cb-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #8fd3a5; }
.cyber-bar .cb-cta svg { width: 13px; height: 13px; transition: transform var(--mov-rapido) var(--curva); }
.cyber-bar:hover .cb-cta svg { transform: translateX(3px); }

/* La nav y el contenido bajan para dejarle lugar */
nav { top: 44px !important; }
.mobile-menu { top: 112px !important; }
.hero { padding-top: 156px !important; }
.hero-landing { padding-top: 172px !important; }

@media (max-width: 900px) {
  .cyber-bar { height: 40px; font-size: 12px; gap: 10px; }
  .cyber-bar .cb-txt, .cyber-bar .cb-sep, .cyber-bar .cb-date { display: none; }
  .cyber-bar .cb-short { display: inline; }
  nav { top: 40px !important; }
  .mobile-menu { top: 108px !important; }
  .hero { padding-top: 128px !important; }
  .hero-landing { padding-top: 150px !important; }
}

/* ══════════ Link activo: marca la pagina real, no "Ofertas" siempre ══════════ */
.nav-link.nav-activo {
  color: var(--tinta) !important;
  font-weight: 700;
  background: var(--papel-hundido);
}


/* ══════════════════════════════════════════════════════════
   BUG: el popup cerrado se comia los clicks
   En desktop su estado cerrado era solo opacity:0, asi que
   un panel invisible de 460px quedaba fijo en el centro con
   z-index 9999 y bloqueaba el formulario. Ahora, cerrado,
   no existe para el mouse.
   ══════════════════════════════════════════════════════════ */
.promo-popup { pointer-events: none; visibility: hidden; }
.promo-popup.show { pointer-events: auto; visibility: visible; }
.promo-overlay { pointer-events: none; }
.promo-overlay.show { pointer-events: auto; }

/* El unico campo obligatorio queda marcado */
.cta-form-box .req { color: var(--ac); font-weight: 800; }