/* Estilo compartido de blog, artículos, implementación y legales (igual que la home). 2026-09-24 */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { --pv-primary: #1F48FF; --pv-violeta: #7c3aed; }
body { overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; }

/* Botón principal */
.pbtn { align-items: center; background: linear-gradient(180deg, #3b5bff 0%, #1F48FF 100%); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(31,72,255,.35), 0 6px 16px rgba(31,72,255,.18); color: #fff !important; display: inline-flex; font-size: 14px; font-weight: 800; justify-content: center; letter-spacing: -.01em; line-height: 1.2; padding: 11px 18px; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease; white-space: nowrap; }
.pbtn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(31,72,255,.3), 0 14px 32px rgba(31,72,255,.28); transform: translateY(-1px); }

/* Encabezado (flotante al bajar, como la home) */
.pnav { position: sticky; top: 0; z-index: 150; }
.pnav-in { align-items: center; -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); background: rgba(255,255,255,.82); border-bottom: 1px solid #e5e7eb; display: flex; gap: 18px; height: 68px; justify-content: space-between; margin: 0 auto; padding: 0 max(4vw, calc((100% - 1100px) / 2)); transition: all .35s cubic-bezier(.2,.7,.2,1); }
.pnav-logo img { display: block; height: 28px; width: auto; }
.pnav-links { align-items: center; display: flex; gap: 4px; margin-left: auto; }
.pnav-links a { border-radius: 10px; color: rgba(11,11,15,.72); font-size: 14px; font-weight: 650; padding: 8px 12px; text-decoration: none; transition: background .18s ease, color .18s ease; }
.pnav-links a:hover { background: rgba(15,23,42,.05); color: #0b0b0f; }
.pnav-links a.is-active { color: #0b0b0f; position: relative; }
.pnav-links a.is-active::after { background: var(--pv-primary); border-radius: 2px; bottom: 2px; content: ""; height: 2px; left: 12px; position: absolute; right: 12px; }
@media (min-width: 981px) {
  .pnav.is-scrolled .pnav-in { border: 1px solid rgba(15,23,42,.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.08); height: 58px; margin-top: 12px; padding: 0 10px 0 20px; width: min(1180px, 94%); }
}
@media (max-width: 860px) { .pnav-links { display: none; } .pnav-in { height: 60px; padding: 0 16px; } .pbtn { font-size: 13px; padding: 9px 14px; } }
#prog { background: linear-gradient(90deg, #1F48FF, #7c3aed) !important; height: 3px !important; z-index: 300 !important; }

/* Portada de cada página: cuadrícula tenue + luz */
.hero, .blog-hero { background: #fff !important; overflow: hidden; position: relative; }
.hero::before, .blog-hero::before { background-image: linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px); background-position: center -1px; background-size: 48px 48px; content: ""; inset: 0; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 20%, transparent 75%); pointer-events: none; position: absolute; }
.hero::after, .blog-hero::after { animation: pvAurora 16s ease-in-out infinite alternate; background: radial-gradient(closest-side, rgba(31,72,255,.12), transparent), radial-gradient(closest-side at 70% 60%, rgba(124,58,237,.10), transparent); content: ""; filter: blur(30px); height: 420px; left: 50%; pointer-events: none; position: absolute; top: -140px; transform: translateX(-50%); width: 900px; }
@keyframes pvAurora { to { transform: translateX(-46%) translateY(30px) scale(1.06); } }
.hero > *, .blog-hero > * { position: relative; z-index: 1; }

/* Etiquetas en pastilla, como la home */
.hero-tag, .blog-eyebrow, .partner-eyebrow { background: #fff !important; border: 1px solid rgba(15,23,42,.09) !important; box-shadow: 0 1px 2px rgba(15,23,42,.04); color: var(--pv-primary) !important; }
.hero-tag-dot, .blog-eyebrow-dot { animation: none !important; background: linear-gradient(135deg, #1F48FF, #7c3aed) !important; box-shadow: 0 0 0 3px rgba(31,72,255,.12); }
h1 .hl { background: linear-gradient(90deg, #1F48FF 0%, #7c3aed 60%, #1F48FF 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: pvBrillo 8s linear infinite; }
@keyframes pvBrillo { to { background-position: -200% center; } }

/* Listas con ✓: el texto en negrita ya no se parte en columnas */
.info-box ul li { display: block !important; padding-left: 1.35rem; position: relative; }
.info-box ul li::before { left: 0; position: absolute; top: 0; }

/* Tarjetas y bloques */
.article-card, .feature-item, .info-box, .partner-block, .related, .toc { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.article-card { position: relative; }
.article-card:hover { border-color: rgba(31,72,255,.26) !important; box-shadow: 0 16px 36px rgba(15,23,42,.08) !important; transform: translateY(-3px); }
.spot-glow { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(31,72,255,.075), transparent 60%); border-radius: inherit; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .35s ease; }
.article-card:hover .spot-glow { opacity: 1; }
.cat-pill { cursor: pointer; font-family: inherit; }
.cat-pill.is-on { background: #0b0b0f !important; border-color: #0b0b0f !important; color: #fff !important; }
.article-card.oculto { display: none !important; }

/* Cierre de cada artículo: borde de luz que gira */
.cta-final, .cta-banner { position: relative; }
.cta-final::after, .cta-banner::after { animation: pvBeam 8s linear infinite; background: conic-gradient(from var(--ang), transparent 0 62%, rgba(31,72,255,.85) 76%, rgba(124,58,237,.85) 85%, transparent 94%); border-radius: inherit; content: ""; inset: -1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px; pointer-events: none; position: absolute; }
@keyframes pvBeam { to { --ang: 360deg; } }

/* Aparición escalonada */
.rv:not(.rv-on) > * { opacity: 0; }
.rv.rv-on > * { animation: pvIn .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes pvIn { from { opacity: 0; transform: translateY(14px); } }

/* Pie de página (igual que la home) */
footer.pfoot { background: #fff; border-top: 1px solid #e5e7eb; color: #4b5563; font-size: 14px; line-height: 1.5; margin: 0; padding: 44px 0 22px; text-align: left; }
footer.pfoot a { color: rgba(11,11,15,.78); text-decoration: none; }
.pf-in { margin: 0 auto; width: min(1100px, 92%); }
.pf-top { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.pf-brand { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pf-brand img { display: block; height: 26px; width: auto; }
.pf-brand p { color: #4b5563; margin: 0; }
.pf-cta { align-items: center; display: flex; gap: 14px; }
.pf-badge img { display: block; height: 34px; width: auto; }
.pf-stack { align-items: center; border-bottom: 1px solid #eef0f3; border-top: 1px solid #eef0f3; display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; margin: 22px 0; padding: 14px 0; }
.pf-stack p { color: rgba(11,11,15,.6); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.pf-stack > div { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-stack span { align-items: center; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 10px; display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.pf-stack span img { height: 20px; width: 20px; }
.pf-cols { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.pf-cols > div { display: grid; gap: 4px; align-content: start; }
.pf-cols p { color: var(--pv-primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0 0 6px; text-transform: uppercase; }
.pf-cols a { align-items: center; border-radius: 8px; display: flex; font-weight: 650; gap: 7px; margin-left: -8px; padding: 6px 8px; transition: background .18s ease; width: fit-content; }
.pf-cols a:hover { background: rgba(15,23,42,.05); color: #0b0b0f; }
.pf-bottom { align-items: center; border-top: 1px solid #eef0f3; display: flex; flex-wrap: wrap; font-size: 13px; gap: 12px; justify-content: space-between; margin-top: 24px; padding-top: 16px; }
.pf-bottom div { display: flex; gap: 18px; }
.pf-bottom a { font-weight: 700; }
@media (max-width: 760px) {
  .pf-cols { grid-template-columns: 1fr 1fr; }
  .pf-top, .pf-brand { justify-content: center; text-align: center; }
  .pf-stack { justify-content: center; }
  .pf-bottom { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .blog-hero::after, h1 .hl, .cta-final::after, .cta-banner::after { animation: none; }
  .cta-final::after, .cta-banner::after { display: none; }
}
/* Neutraliza el estilo viejo "nav {…}" de cada página sobre el menú nuevo */
.pnav .pnav-links { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; border: 0; height: auto; justify-content: flex-start; padding: 0; position: static; z-index: auto; }

/* Botones de agendar con el mismo ícono; títulos sin brillo y con subrayado tipo marcador (2026-09-24) */
.ic-agenda { flex: 0 0 18px; }
a[href*="calendar.app.google"] { align-items: center; display: inline-flex; gap: 8px; justify-content: center; }
.hero::after, .blog-hero::after { display: none !important; }
h1 .hl, h2 .hl, .blog-hero h1 span { animation: none !important; background: linear-gradient(transparent 60%, #dbe3ff 60%, #dbe3ff 92%, transparent 92%) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #0b0b0f !important; padding: 0 .06em; -webkit-text-fill-color: #0b0b0f !important; }

.hero-tag-dot, .blog-eyebrow-dot { animation: enVivoP 1.8s ease-out infinite !important; }
@keyframes enVivoP { 0% { box-shadow: 0 0 0 0 rgba(31,72,255,.45); } 70% { box-shadow: 0 0 0 7px rgba(31,72,255,0); } 100% { box-shadow: 0 0 0 0 rgba(31,72,255,0); } }
@media (prefers-reduced-motion: reduce) { .hero-tag-dot, .blog-eyebrow-dot { animation: none !important; } }