/* Newsletter (banda, opt-in, strip y footer) para páginas que NO cargan /styles.css
   (las guías del blog con estilos inline). Copia del bloque «Newsletter opt-in» de
   styles.css: si cambias uno, cambia el otro.
   Los tokens van limitados a los contenedores para no pisar los estilos de la guía. */
.newsletter-band,.newsletter-optin,.newsletter-strip,.footer-newsletter{
  --primary:#53ddfc; --secondary:#7c3aed;
  --bg:#08080d; --bg-elevated:#0e0e15;
  --text:#f4f0fb; --text-secondary:#8a8899; --text-muted:#6b7280;
  --border:rgba(255,255,255,.08);
  --gradient:linear-gradient(135deg,var(--primary),var(--secondary));
  --font-body:'Inter',sans-serif; --font-display:'Space Grotesk',sans-serif;
  --font-accent:'Newsreader',serif;
  --glow:0 0 30px rgba(83,221,252,.25);
  --radius:16px; --container:1180px; --transition-fast:.15s ease;
  box-sizing:border-box;
}
.newsletter-band *,.newsletter-optin *,.newsletter-strip *,.footer-newsletter *{box-sizing:border-box;}

.newsletter-optin{
  background:var(--bg-elevated);
  border:1px solid rgba(83,221,252,.15);
  border-radius:var(--radius);
  padding:32px 36px;
  max-width:640px;
  margin:48px auto;
}
.newsletter-eyebrow{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);margin:0 0 8px;
}
.newsletter-optin h3{
  font-family:var(--font-accent);
  font-size:26px;font-weight:600;line-height:1.2;
  color:var(--text);margin:0 0 8px;
}
.newsletter-optin h3 em{font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--primary);}
.newsletter-lede{
  font-family:var(--font-body);
  font-size:15px;color:var(--text-secondary);line-height:1.5;margin:0 0 20px;
}
.newsletter-lede b{color:var(--text);font-weight:600;}
/* Honeypot anti-spam: fuera de pantalla, nunca visible ni tabulable. */
.newsletter-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.newsletter-fields{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.newsletter-form input[type="email"]{
  flex:1;min-width:220px;
  background:var(--bg);
  border:1px solid rgba(244,240,251,.2);
  border-radius:10px;
  padding:12px 16px;
  color:var(--text);
  font-family:var(--font-body);font-size:15px;
}
.newsletter-form input[type="email"]::placeholder{color:var(--text-muted);}
.newsletter-form input[type="email"]:focus{outline:none;border-color:var(--primary);}
.newsletter-form button[type="submit"]{
  background:var(--gradient);
  color:#08080d;border:none;border-radius:10px;
  padding:12px 24px;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  cursor:pointer;box-shadow:var(--glow);
  transition:transform var(--transition-fast);
}
.newsletter-form button[type="submit"]:hover{transform:translateY(-1px);}
.newsletter-form button[type="submit"]:disabled{opacity:.6;cursor:default;transform:none;}
.newsletter-fineprint{font-family:var(--font-body);font-size:12px;color:var(--text-muted);margin:12px 0 0;}
.newsletter-status{font-family:var(--font-body);font-size:14px;margin:12px 0 0;}
.newsletter-status[data-state="ok"]{color:#4ade80;}
.newsletter-status[data-state="error"]{color:#f87171;}

/* Icono de sobre (Lucide "mail"): trazo claro con glow cyan sutil. */
.newsletter-icon{color:var(--text);filter:drop-shadow(0 0 8px rgba(83,221,252,.4));flex:0 0 auto;}
.footer-newsletter .newsletter-icon{width:22px;height:22px;}
.newsletter-band .newsletter-icon{width:32px;height:32px;display:block;margin:0 auto 16px;}
.newsletter-optin .newsletter-icon{width:32px;height:32px;display:block;margin:0 0 14px;}
.newsletter-strip .newsletter-icon{width:20px;height:20px;}

/* ===== Franja slim: un susurro a mitad de pagina, no una seccion =====
   Una sola linea (icono + texto + form). section.* para ganar a
   `.home section{padding:110px 0}`, igual que la banda. */
section.newsletter-strip{
  background:var(--bg-elevated);
  border-top:1px solid rgba(83,221,252,.18);
  border-bottom:1px solid rgba(83,221,252,.18);
  padding:20px 24px;
  /* La seccion de arriba ya deja su padding-bottom (el ritmo de .home section:
     110px / 70px), pero #sectores lleva padding-top:0 inline y la franja se
     quedaba pegada abajo. Igualamos ese aire para que respire simetrica. */
  margin:0 0 110px;
}
.newsletter-strip-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:12px 20px;flex-wrap:wrap;
}
.newsletter-strip-text{
  font-family:var(--font-body);font-size:14.5px;color:var(--text-secondary);margin:0;
  display:flex;align-items:center;gap:10px;
}
.newsletter-strip-text b{color:var(--text);font-weight:600;}
.newsletter-strip .newsletter-form{flex:0 1 380px;min-width:260px;}
.newsletter-strip .newsletter-fields{flex-wrap:nowrap;}
.newsletter-strip .newsletter-status{width:100%;text-align:center;margin-top:8px;}
@media (max-width:760px){
  .newsletter-strip-inner{flex-direction:column;align-items:stretch;text-align:center;}
  .newsletter-strip-text{justify-content:center;}
  .newsletter-strip .newsletter-form{flex:1 1 auto;}
}
@media (max-width:900px){
  section.newsletter-strip{margin-bottom:70px;}
}
@media (max-width:600px){
  section.newsletter-strip{padding:18px 20px;}
  .newsletter-strip .newsletter-fields{flex-wrap:wrap;}
  .newsletter-strip .newsletter-form input[type="email"],
  .newsletter-strip .newsletter-form button[type="submit"]{flex:1 1 100%;width:100%;}
}

/* ===== Banda newsletter a ancho completo =====
   Componente protagonista para paginas donde el visitante viene a aprender
   (home, blog, indice de recursos). En las paginas de venta no aparece: alli
   el unico CTA es el diagnostico y solo queda el opt-in del footer. */
/* section.* para ganar a `.home section{padding:110px 0}`, que empata en
   especificidad con .newsletter-band y se aplicaria por orden. */
section.newsletter-band{
  background:var(--bg-elevated);
  border-top:1px solid rgba(83,221,252,.18);
  padding:64px 24px;
  text-align:center;
}
.newsletter-band-inner{max-width:720px;margin:0 auto;}
.newsletter-band .newsletter-eyebrow{font-size:12px;letter-spacing:.14em;margin:0 0 12px;}
.newsletter-band h2{
  font-family:var(--font-accent);
  font-size:34px;font-weight:600;line-height:1.15;letter-spacing:0;
  color:var(--text);margin:0 0 12px;
}
.newsletter-band h2 em{font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--primary);}
.newsletter-band .newsletter-lede{font-size:16px;max-width:600px;margin:0 auto 28px;}
.newsletter-band .newsletter-form{max-width:520px;margin:0 auto;}
.newsletter-band .newsletter-fields{flex-wrap:nowrap;}
.newsletter-band .newsletter-fineprint{text-align:center;margin-top:14px;}
.newsletter-band .newsletter-status{text-align:center;}
@media (max-width:600px){
  section.newsletter-band{padding:40px 20px;}
  .newsletter-band h2{font-size:26px;}
  .newsletter-band .newsletter-lede{font-size:15px;margin-bottom:22px;}
  /* Apilados en movil: input y boton a ancho completo. */
  .newsletter-band .newsletter-fields{flex-wrap:wrap;}
  .newsletter-band .newsletter-form input[type="email"],
  .newsletter-band .newsletter-form button[type="submit"]{flex:1 1 100%;width:100%;}
}

/* ===== Opt-in compacto: primera franja DENTRO del footer =====
   Va antes de las columnas de enlaces y se separa del sitemap con un borde
   inferior. Claim y campo van juntos y centrados para que se lean como una
   unidad (antes colgaban sueltos y separados por space-between).
   :has() deja la banda a ras del borde superior del footer anulando su
   padding-top; si el navegador no lo soporta solo queda algo mas de aire. */
footer:has(> .footer-newsletter){padding-top:0;}
.footer-newsletter{
  background:rgba(83,221,252,.03);
  border-bottom:1px solid var(--border);
  padding:26px 24px;
  margin-bottom:36px;
}
.footer-newsletter-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 24px;
}
.footer-newsletter-claim{
  font-family:var(--font-body);font-size:14.5px;line-height:1.45;
  color:var(--text-secondary);margin:0;max-width:480px;
  display:flex;align-items:center;gap:12px;text-align:left;
}
.footer-newsletter-claim b{color:var(--text);font-weight:600;}
.footer-newsletter .newsletter-form{flex:0 1 420px;min-width:280px;}
.footer-newsletter .newsletter-fields{flex-wrap:nowrap;}
.footer-newsletter .newsletter-status{width:100%;text-align:center;margin-top:10px;}
@media (max-width:760px){
  .footer-newsletter-inner{flex-direction:column;align-items:stretch;text-align:center;}
  .footer-newsletter .newsletter-form{flex:1 1 auto;}
  .footer-newsletter-claim{justify-content:center;max-width:none;}
}
@media (max-width:600px){
  .newsletter-optin{padding:24px 22px;}
  .footer-newsletter{padding:22px 20px;margin-bottom:28px;}
  .footer-newsletter .newsletter-fields{flex-wrap:wrap;}
  .footer-newsletter .newsletter-form input[type="email"],
  .footer-newsletter .newsletter-form button[type="submit"]{flex:1 1 100%;width:100%;}
}

/* Las guías del blog fuerzan Space Grotesk en todos los h2 con !important;
   el titular de la banda va en Newsreader, como en el resto de la web. */
.newsletter-band h2,.newsletter-optin h3{font-family:var(--font-accent) !important;letter-spacing:0;}