/* ── NewsPress Suscripciones — frontend ───────────────
   Usa los tokens --np-* del tema, con fallbacks neutros. */

/* ══════════ MURO (teaser + caja) ══════════ */
.np-sub-teaser {
  position: relative;
}
.np-sub-muro {
  position: relative;
  margin: 0 0 var(--sp-6, 28px);
}
.np-sub-muro__fade {
  height: 90px;
  margin-top: -90px;
  position: relative;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--np-bg, #fff));
  pointer-events: none;
}
:root[data-theme="dark"] .np-sub-muro__fade,
[data-theme="dark"] .np-sub-muro__fade {
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--np-bg, #16181c));
}
.np-sub-muro__caja {
  border: 1px solid var(--np-border-str, #ccc);
  border-top: 3px solid var(--np-accent, #c8102e);
  border-radius: var(--r-lg, 12px);
  background: var(--np-surface, #fafafa);
  padding: var(--sp-6, 28px);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.np-sub-muro__lock { font-size: 26px; }
.np-sub-muro__titulo {
  font-family: var(--f-head, inherit);
  font-size: var(--t-xl, 22px);
  font-weight: 800;
  margin: 8px 0;
  color: var(--np-text, #111);
}
.np-sub-muro__texto {
  color: var(--np-text-sec, #555);
  margin: 0 0 var(--sp-4, 16px);
}
.np-sub-muro__botones {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════ BOTONES ══════════
   Alineados al botón canónico del tema (.np-btn): radio editorial (--r-md,
   4px), fuente sans, peso 600. Se prefijan con el contenedor (.np-sub-muro /
   .np-sub-cuenta) para ganarle a las reglas de enlace del tema dentro del
   contenido (.np-noticia-cuerpo a / .np-page__content a). */
.np-sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  padding: 12px 24px;
  font-family: var(--f-sans, inherit);
  font-size: var(--t-sm, 14px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  border-radius: var(--r-md, 4px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.np-sub-btn:active { transform: translateY(1px); }

/* Texto/colores/borde: scoped para superar los enlaces del tema. */
.np-sub-muro .np-sub-btn,
.np-sub-cuenta .np-sub-btn,
.np-sub-btn { text-decoration: none; }

.np-sub-muro .np-sub-btn--primary,
.np-sub-cuenta .np-sub-btn--primary,
.np-sub-btn--primary {
  background: var(--np-accent, #c8102e);
  color: #fff;
  border-color: var(--np-accent, #c8102e);
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.np-sub-muro .np-sub-btn--primary:hover,
.np-sub-cuenta .np-sub-btn--primary:hover,
.np-sub-btn--primary:hover {
  background: var(--np-accent-dk, #9c0c23);
  border-color: var(--np-accent-dk, #9c0c23);
  color: #fff;
  box-shadow: 0 4px 12px rgba(200,16,46,.30);
}

.np-sub-muro .np-sub-btn--ghost,
.np-sub-cuenta .np-sub-btn--ghost,
.np-sub-btn--ghost {
  background: var(--np-surface, transparent);
  color: var(--np-text, #111);
  border-color: var(--np-border-str, #c6cbd2);
}
.np-sub-muro .np-sub-btn--ghost:hover,
.np-sub-cuenta .np-sub-btn--ghost:hover,
.np-sub-btn--ghost:hover {
  border-color: var(--np-accent, #c8102e);
  color: var(--np-accent, #c8102e);
  background: var(--np-surface, transparent);
}

/* ══════════ CUENTA (formularios) ══════════ */
.np-sub-cuenta {
  max-width: 420px;
  margin: var(--sp-7, 36px) auto;
  padding: 0 var(--sp-4, 16px);
}
.np-sub-cuenta h2 {
  font-family: var(--f-head, var(--f-serif, inherit));
  font-size: var(--t-2xl, 26px);
  margin: 0 0 var(--sp-4, 16px);
  color: var(--np-text, #111);
}
.np-sub-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
}
.np-sub-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--t-sm, 14px);
  font-weight: 600;
  color: var(--np-text, #111);
}
.np-sub-form input[type="text"],
.np-sub-form input[type="email"],
.np-sub-form input[type="password"] {
  padding: 11px 14px;
  font-size: var(--t-base, 16px);
  border: 1px solid var(--np-border-str, #bbb);
  border-radius: var(--r-md, 8px);
  background: var(--np-surface, #fff);
  color: var(--np-text, #111);
}
.np-sub-form input:focus { outline: none; border-color: var(--np-accent, #c8102e); }
.np-sub-check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-weight: 400 !important;
}
.np-sub-form .np-sub-btn { margin-top: 6px; }
.np-sub-form__sub {
  font-family: var(--f-head, inherit);
  font-size: var(--t-lg, 18px);
  font-weight: 800;
  margin: var(--sp-6, 28px) 0 var(--sp-2, 8px);
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--np-border, #e3e3e3);
  color: var(--np-text, #111);
}
.np-sub-nota {
  font-size: var(--t-xs, 12.5px);
  color: var(--np-text-muted, #777);
  margin: 0 0 var(--sp-3, 12px);
}
.np-sub-alt {
  margin-top: var(--sp-5, 20px);
  font-size: var(--t-sm, 14px);
  color: var(--np-text-sec, #555);
}
.np-sub-alt a { color: var(--np-accent, #c8102e); font-weight: 700; }

/* ══════════ AVISOS ══════════ */
.np-sub-aviso {
  padding: 12px 16px;
  border-radius: var(--r-md, 8px);
  margin-bottom: var(--sp-4, 16px);
  font-size: var(--t-sm, 14px);
}
.np-sub-aviso--error { background: #fde8e8; color: #8a1c1c; border: 1px solid #f3c0c0; }
.np-sub-aviso--ok    { background: #e7f6ec; color: #14602c; border: 1px solid #b6e0c4; }

/* ══════════ PLANES (/suscribete/) ══════════ */
.np-sub-planes {
  max-width: 880px;
  margin: var(--sp-7, 36px) auto;
  padding: 0 var(--sp-4, 16px);
}
.np-sub-planes__intro {
  text-align: center;
  color: var(--np-text-sec, #555);
  max-width: 560px;
  margin: 0 auto var(--sp-6, 28px);
}
.np-sub-planes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5, 20px);
  align-items: start;
}
@media (max-width: 720px) {
  .np-sub-planes__grid { grid-template-columns: 1fr; }
}
.np-sub-plan {
  background: var(--np-surface, #fff);
  border: 1px solid var(--np-border, #e3e3e3);
  border-radius: var(--r-lg, 10px);
  padding: var(--sp-6, 28px);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.np-sub-plan--destacado {
  border-color: var(--np-accent, #c8102e);
  box-shadow: 0 8px 28px rgba(200,16,46,.14);
}
.np-sub-plan__titulo {
  font-family: var(--f-head, inherit);
  font-size: var(--t-xl, 22px);
  font-weight: 800;
  margin: 0 0 var(--sp-2, 8px);
  padding-bottom: var(--sp-2, 8px);
  border-bottom: 2px solid var(--np-accent, #c8102e);
  color: var(--np-text, #111);
}
.np-sub-plan__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: var(--sp-4, 16px) 0 2px;
}
.np-sub-plan__cifra {
  font-family: var(--f-head, inherit);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--np-accent, #c8102e);
  line-height: 1;
}
.np-sub-plan__periodo { color: var(--np-text-sec, #555); font-weight: 600; }
.np-sub-plan__anual {
  font-size: var(--t-sm, 14px);
  color: var(--np-text-muted, #777);
  margin-bottom: var(--sp-2, 8px);
}
.np-sub-plan__lista {
  list-style: none;
  margin: var(--sp-4, 16px) 0 var(--sp-5, 20px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.np-sub-plan__lista li { font-size: var(--t-sm, 14px); color: var(--np-text, #111); font-weight: 600; }
.np-sub-plan__lista li.no { color: var(--np-text-muted, #999); font-weight: 400; }
.np-sub-plan__cta { width: 100%; }
.np-sub-plan__cta--pronto {
  background: var(--np-surface-dim, #eceef0);
  color: var(--np-text-muted, #888);
  border-color: var(--np-border, #e3e3e3);
  cursor: default;
  pointer-events: none;
}
.np-sub-plan__nota {
  font-size: var(--t-xs, 12.5px);
  color: var(--np-text-muted, #888);
  text-align: center;
  margin: var(--sp-2, 8px) 0 0;
}

/* ══════════ AVATAR ══════════ */
.np-sub-avatar {
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  vertical-align: middle;
  background: var(--np-surface-dim, #e8e8e8);
}
.np-sub-avatar--ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--np-accent, #c8102e);
  color: #fff;
  font-family: var(--f-head, inherit);
  font-weight: 800;
  line-height: 1;
}
.np-sub-cuenta__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  margin-bottom: var(--sp-4, 16px);
}
.np-sub-cuenta__cab h2 { margin: 0; }
.np-sub-avatar-campo {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  padding: var(--sp-4, 16px);
  background: var(--np-surface-alt, #f5f6f7);
  border: 1px solid var(--np-border, #e3e3e3);
  border-radius: var(--r-md, 8px);
}
.np-sub-avatar--lg { width: 88px; height: 88px; flex-shrink: 0; }
.np-sub-avatar-campo__acc { display: flex; flex-direction: column; gap: 6px; }
.np-sub-avatar-campo__btn {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid var(--np-border-str, #bbb);
  border-radius: var(--r-md, 8px);
  font-size: var(--t-sm, 14px);
  font-weight: 700;
  color: var(--np-text, #111);
  background: var(--np-surface, #fff);
  cursor: pointer;
}
.np-sub-avatar-campo__btn:hover { border-color: var(--np-accent, #c8102e); color: var(--np-accent, #c8102e); }
.np-sub-avatar-campo__hint { font-size: var(--t-xs, 12px); color: var(--np-text-muted, #777); }
.np-sub-avatar-campo__quitar { font-size: var(--t-xs, 12.5px) !important; color: var(--np-text-sec, #555); }

/* ══════════ MI CUENTA ══════════ */
.np-sub-datos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--np-text, #111);
}
.np-sub-datos li {
  padding: 10px 14px;
  background: var(--np-surface, #fafafa);
  border: 1px solid var(--np-border, #e3e3e3);
  border-radius: var(--r-md, 8px);
}

/* ══════════ HONEYPOT ANTI-BOT ══════════ */
/* Fuera de la vista y del foco: invisible para humanos, cebo para bots.
   El !important y las coordenadas absolutas evitan que un tema lo "rescate". */
.np-sub-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile (Capa 2): el iframe de Cloudflare se estiliza solo; solo espaciado. */
.np-sub-turnstile { margin: 4px 0 14px; }