/* Chetto · Banner superior de newsletter (5 %)
 * --------------------------------------------------------------------
 * Diseño: Figma FZbyOgIi0kIqXDwOiRs0gI, nodo 1:476.
 *   - 48 px de alto, fondo #ebd8c6, texto negro centrado.
 *   - Montserrat 12 px en mayúsculas: semibold, con el arranque en extrabold.
 *   - «Suscribirme» subrayado, al final de la frase.
 * Va a ancho completo, por encima de la barra oscura, y no es sticky.
 * En móvil (< 576 px) se quita el saludo para que ocupe dos líneas y no tres.
 */
.chetto-promo-bar {
  --chetto-promo-bg: #ebd8c6;
  --chetto-promo-ink: #000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--chetto-promo-bg);
  color: var(--chetto-promo-ink);
  text-align: center;
}

.chetto-promo-bar__text {
  margin: 0;
  font-family: 'Montserrat', var(--chetto-font-sans, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  /* Con hinting (Chromium en Linux y Android) el ancho de la «T» se redondea y deja huecos irregulares
     en texto pequeño; geometricPrecision lo evita (probado en móvil con las variantes de Playwright). */
  font-kerning: normal;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.chetto-promo-bar__lead {
  font-weight: 800;
}

.chetto-promo-bar__sep {
  margin-inline: 0.15em;
}

.chetto-promo-bar__cta {
  position: relative;
  margin-inline-start: 1.1em;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Zona táctil de unos 44 px sin cambiar cómo se ve el enlace */
.chetto-promo-bar__cta::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

.chetto-promo-bar__cta:hover {
  text-decoration-thickness: 2px;
}

.chetto-promo-bar__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 575.98px) {
  .chetto-promo-bar {
    padding: 7px 16px;
  }

  .chetto-promo-bar__lead,
  .chetto-promo-bar__sep {
    display: none;
  }
}