sigue SIEMPRE en el HTML: se oculta con CSS, no se saca del markup, porque es el H1 que indexa el crawler y lo que ve el 99% anonimo. */ html.nv-paga .oc-hero { display: none; }


/* ============ HERO trending (migrado desde beta 2026-05-10) ============ */
.oc-hero { background: linear-gradient(180deg, #2d5a9e 0%, #1b3a6b 100%); color: white; padding: 36px 24px 30px; text-align: center; position: relative; overflow: hidden; margin-top: -1px; }
.oc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.08), transparent 55%); pointer-events: none; }
.oc-hero-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.oc-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(219,228,243,0.12); border: 1px solid rgba(219,228,243,0.35); color: #dbe4f3; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 16px; }
.oc-hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.6); animation: nv-pulse 2s infinite; }
@keyframes nv-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.oc-hero h1 { margin: 0 0 12px; font-family: var(--font-serif, var(--oc-font-serif)); font-size: clamp(1.45rem, 3.2vw, 1.85rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.022em; color: white; font-optical-sizing: auto; }
.oc-hero h1 .accent { color: #dbe4f3; font-weight: 700; }
.oc-hero-lead { margin: 0 auto; max-width: 680px; font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.6; color: #dbeafe; font-family: var(--font, var(--oc-font-sans)); }
@media (max-width: 720px) {
  .oc-hero { padding: 28px 18px 24px; }
  /* El lead de cifras se oculta en mobile (2026-08-16): son 3 cifras + una frase
     que en pantalla angosta se parten en 6-7 líneas y empujan el buscador bajo el fold. */
  .oc-hero-lead { display: none; }
}

/* Suscriptor con plan: el hero de marca no se le pinta (decision founder
   2026-09-05). Es pitch para quien no paga; al que ya pago le come medio fold
   sin decirle nada. La clase la pone el script nv-paga-early en <head>, ANTES
   del primer paint, asi que no hay parpadeo. El <h1> sigue SIEMPRE en el HTML:
   se oculta con CSS, no se saca del markup, porque es el H1 que indexa el
   crawler y lo que ve el 99% anonimo. */
html.nv-paga .oc-hero { display: none; }