/* Suscripción al blog: franja CTA al pie del listado / de cada nota, y el popup
   que abre. Autónomo (define su propia paleta) porque se renderiza en páginas que
   usan CSS modules distintos; lo cargan los propios componentes. Misma paleta y
   lenguaje visual que pref-modal.css, para que los dos diálogos del blog se vean
   como uno solo. */

/* ---------- Franja CTA ---------- */
.susc-cta{--bs-navy:#04102d;--bs-celeste:#4bc3fe;--bs-blue:#3985ff;--bs-ink:#04102d;--bs-muted:#5b6480;--bs-line:#e3ebfa;--bs-soft:#f5f8ff;font-family:Poppins,system-ui,sans-serif;box-sizing:border-box;width:100%;padding:clamp(24px,4vw,40px) 20px;margin:clamp(40px,6vw,72px) 0 0}
.susc-cta *,.susc-cta *:before,.susc-cta *:after{box-sizing:border-box}
.susc-cta-inner{width:min(860px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--bs-soft);border:1px solid var(--bs-line);border-radius:18px;padding:clamp(20px,3vw,28px) clamp(22px,3.5vw,32px)}
.susc-cta-texto{flex:1 1 320px;min-width:0}
.susc-cta h2{font-size:clamp(1.35rem,2.6vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0 0 6px;color:var(--bs-ink)}
.susc-cta-texto p{font-size:15px;line-height:1.5;color:var(--bs-muted);margin:0}
/* CTA con la forma estándar del sitio (pill 2em, weight 500). */
.susc-cta-boton{font:inherit;font-size:16px;font-weight:500;padding:.4em 1em;border-radius:2em;border:0;background:var(--bs-blue);color:#fff;cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease}
.susc-cta-boton:hover{background:var(--bs-celeste);color:var(--bs-navy)}

/* ---------- Popup ---------- */
.susc-modal-overlay{--bs-navy:#04102d;--bs-celeste:#4bc3fe;--bs-blue:#3985ff;--bs-ink:#04102d;--bs-muted:#5b6480;--bs-line:#e3ebfa;--bs-soft:#f5f8ff;--bs-error:#c0392b;font-family:Poppins,system-ui,sans-serif;position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:#04102dcc;backdrop-filter:blur(4px)}
.susc-modal-overlay *,.susc-modal-overlay *:before,.susc-modal-overlay *:after{box-sizing:border-box}
.susc-modal{position:relative;width:min(560px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:clamp(24px,4vw,36px);box-shadow:0 20px 60px #04102d40}
.susc-modal-x{position:absolute;top:12px;right:14px;font:inherit;font-size:26px;line-height:1;padding:4px 8px;border:0;background:none;color:var(--bs-muted);cursor:pointer;border-radius:8px}
.susc-modal-x:hover{color:var(--bs-ink);background:var(--bs-soft)}
.susc-modal h2{font-size:clamp(22px,3vw,28px);font-weight:600;letter-spacing:-.01em;margin:0 8px 10px 0;color:var(--bs-ink)}
.susc-dek{color:var(--bs-muted);font-size:16px;line-height:1.5;margin:0 0 22px}
.susc-ok{color:var(--bs-ink);font-size:17px;font-weight:600;line-height:1.5;margin:0}

.susc-campos{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.susc-campo{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}
.susc-campo>span{font-size:14px;font-weight:600;color:var(--bs-ink)}
.susc-campo input{font:inherit;font-size:16px;padding:11px 14px;border:1px solid var(--bs-line);border-radius:10px;background:#fff;color:var(--bs-ink)}
.susc-campo input::placeholder{color:#98a2bd}
.susc-campo input:focus-visible{outline:2px solid var(--bs-blue);outline-offset:1px;border-color:var(--bs-blue)}

/* Honeypot: fuera de pantalla en vez de display:none, para que los bots que
   ignoran los ocultos igual lo completen. No es focusable (tabIndex -1). */
.susc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.susc-temas{margin-bottom:20px}
.susc-temas-titulo{font-size:14px;font-weight:600;color:var(--bs-ink);margin:0 0 10px}
.susc-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.susc-chip{font:inherit;font-size:14px;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--bs-line);background:#fff;color:var(--bs-ink);cursor:pointer;transition:all .15s ease}
.susc-chip:hover{border-color:var(--bs-celeste)}
.susc-chip.is-on{border-color:var(--bs-blue);background:var(--bs-blue);color:#fff}
.susc-ayuda{font-size:13px;color:var(--bs-muted);margin:0}

.susc-consent{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--bs-ink);cursor:pointer;margin-bottom:10px}
.susc-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--bs-blue);cursor:pointer;flex:0 0 auto}
.susc-legal{font-size:13px;color:var(--bs-muted);line-height:1.45;margin:0 0 18px}
.susc-legal a{color:var(--bs-blue);text-decoration:underline}
.susc-error{font-size:14px;color:var(--bs-error);font-weight:600;margin:0 0 14px}

.susc-acciones{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.susc-skip{font:inherit;font-size:15px;font-weight:500;padding:.4em 1em;border-radius:2em;border:0;background:none;color:var(--bs-muted);cursor:pointer}
.susc-skip:hover{color:var(--bs-ink)}
.susc-enviar{font:inherit;font-size:16px;font-weight:500;padding:.4em 1em;border-radius:2em;border:0;background:var(--bs-blue);color:#fff;cursor:pointer;transition:background .15s ease,color .15s ease}
.susc-enviar:hover{background:var(--bs-celeste);color:var(--bs-navy)}
.susc-enviar:disabled,.susc-skip:disabled{opacity:.6;cursor:default}

@media (max-width:560px){
  .susc-cta-inner{flex-direction:column;align-items:flex-start}
  .susc-cta-boton{width:100%}
  .susc-campos{flex-direction:column;gap:12px}
}