/* ══════════════════════════════
   NEWSLETTER (Mailchimp) -- mobile-first, tokens del sitio.
   Tres piezas: .newsletter-form (los campos en sí, reutilizada
   dentro de la sección expuesta y del modal), .newsletter-section
   (expuesta, antes del footer) y .newsletter-teaser + modal
   (compacta, con botón que abre el formulario).
══════════════════════════════ */

/* ── Form (campos) -- compartido entre sección expuesta y modal ── */
.newsletter-fields {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.newsletter-field { display: flex; flex-direction: column; gap: 0.35rem; }
.newsletter-field label { font-size: 0.78rem; font-weight: 600; color: var(--ink-mid); }
.newsletter-asterisk { color: var(--fuchsia); }
.newsletter-field input {
  font-family: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--border-md);
  border-radius: 6px; padding: 0.65rem 0.8rem;
}
.newsletter-field input:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--cyan-pale);
  border-color: var(--cyan-dark);
}
.newsletter-submit-row { margin-bottom: 0.9rem; }
.newsletter-submit {
  display: inline-block; font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--white); background: var(--fuchsia); border: none; border-radius: 8px;
  padding: 0.75rem 1.5rem; cursor: pointer; width: 100%;
  transition: background .15s ease;
}
.newsletter-submit:hover { background: var(--fuchsia-dark); }
.newsletter-referral { margin: 0; text-align: center; opacity: 0.6; }
.newsletter-referral img { width: 100px; height: auto; margin-top: 20px; display: inline-block; }

/* ── Sección expuesta -- antes del footer (home + blog) ──
   .newsletter-section es el fondo full-bleed de siempre, sin ningún
   cambio. .newsletter-section-wrapper es el contenedor real adentro:
   hereda flex-direction/align-items/justify-content/gap de
   .newsletter-section (vía "inherit"), así que en mobile y tablet se
   comporta exactamente igual que si sus hijos estuvieran directo
   adentro de .newsletter-section. Tiene max-width: 1200px siempre,
   pero no hace nada por debajo de ese ancho -- recién se nota en
   laptop.css (1024px+), donde además se pisa justify-content para
   centrar las dos columnas de 50%. */
.newsletter-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--off);
  padding: 2.5rem 6vw;
}
.newsletter-section-wrapper {
  display: flex;
  flex-direction: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.newsletter-section-title, .newsletter-teaser-title, .newsletter-modal-title {
  font-family: var(--font-d); font-size: 1.3rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em; margin: 0 0 0.6rem;
}
.newsletter-section-blurb {
  font-size: 0.9rem; line-height: 1.7; color: var(--ink-mid); font-weight: 300;
  max-width: 600px;
}
.newsletter-section-form { max-width: 440px; }

/* ── Teaser -- compacta, con botón que abre el modal. Full-bleed como
   .newsletter-section (mismo padding), con .newsletter-teaser-wrapper
   adentro acotando a 1200px con el mismo truco de "inherit" ── */
.newsletter-teaser {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--off);
  padding: 2.5rem 6vw;
  margin-top: 3rem;
}
.newsletter-teaser-wrapper {
  display: flex;
  flex-direction: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.newsletter-teaser-phrase { font-size: 0.95rem; color: var(--ink-mid); font-weight: 300; margin: 0; }
.newsletter-teaser-btn {
  flex-shrink: 0;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--white); background: var(--fuchsia); border: none; border-radius: 8px;
  padding: 0.75rem 1.5rem; cursor: pointer; white-space: nowrap;
  transition: background .15s ease;
}
.newsletter-teaser-btn:hover { background: var(--fuchsia-dark); }

/* ── Modal -- mobile: casi pantalla completa. Centrado en tablet.css+ ── */
.newsletter-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13,13,13,0.55);
  z-index: 100;
  padding: 0;
}
.newsletter-modal-overlay.is-open { display: block; }
.newsletter-modal {
  position: fixed; inset: 0;
  background: var(--white);
  overflow-y: auto;
  padding: 2rem 1.5rem;
}
.newsletter-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; color: var(--ink-mid);
  background: var(--off); border: none; border-radius: 50%;
  cursor: pointer;
}
.newsletter-modal-close:hover { color: var(--ink); }
.newsletter-modal-phrase { font-size: 0.9rem; color: var(--ink-mid); font-weight: 300; margin: 0 0 1.25rem; }

body.newsletter-modal-locked { overflow: hidden; }

/* ── Estado del envío (js/newsletter.js) ── */
.newsletter-status { margin: 0 0 0.9rem; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.newsletter-status:empty { display: none; }
.newsletter-status.is-error { color: var(--fuchsia-dark); }
/* Enviado: se ocultan campos y botón, queda el mensaje (y la insignia de Mailchimp) */
.newsletter-form.is-sent .newsletter-fields,
.newsletter-form.is-sent .newsletter-submit-row { display: none; }
.newsletter-form.is-sent .newsletter-status { font-size: 1rem; padding: 0.75rem 0; }