/*
Theme Name: STG Blog
Theme URI: https://stg-seguridad.com/
Author: Impacto SEO Marketing
Author URI: https://impactoseo.com/
Description: Tema mínimo y rápido para el blog de STG Seguridad. Sin page builders ni dependencias de temas/plugins de maquetación. Comparte la identidad visual del sitio (Astro) reutilizando su bundle CSS y las fuentes self-hosted. El SEO lo sigue gestionando Rank Math.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: stg-blog
*/

/* =========================================================================
   Base — reemplaza el reset global del Layout de Astro (los st-* del bundle
   asumen este reset). Se carga DESPUÉS de svc-core/svc-extra.
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:#0d0f14;color:#0d0f14;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
@media (pointer:fine){html,body{cursor:none}}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* =========================================================================
   Hero compacto del blog (banda oscura, sin foto a sangre)
   ========================================================================= */
/* El nav (mega-menú) va como HERMANO de la tarjeta dentro de un envoltorio
   overflow:visible → el desplegable no lo recorta el overflow:hidden que
   redondea el fondo. Mismo recuadro = posiciones absolutas del nav idénticas. */
.blog-hero-sec{padding:16px 24px 0}
.blog-hero-wrap{position:relative;max-width:1200px;margin:0 auto}
.blog-hero-card{position:relative;overflow:hidden;border-radius:28px;background:#0d0f14;background-image:radial-gradient(120% 100% at 85% -20%,rgba(47,74,216,.28),transparent 55%),radial-gradient(90% 80% at 0% 120%,rgba(47,74,216,.14),transparent 60%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:100% 100%,100% 100%,54px 54px,54px 54px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.blog-hero-inner{padding:132px 60px 52px;max-width:900px;position:relative;z-index:1}
@media (max-width:1024px){.blog-hero-inner{padding:110px 28px 48px}}
/* El hero del blog NO lleva la muesca blanca con el botón de teléfono (los títulos
   largos de los posts chocaban con ella). El nav compartido la emite; se oculta aquí.
   El teléfono sigue visible en la píldora de la cabecera y en el menú móvil. */
.blog-hero-wrap .hp-fill,.blog-hero-wrap .hp-box{display:none}
.bh-crumbs{font:600 12px/1 'Space Mono';letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bh-crumbs a{color:rgba(255,255,255,.55)}
.bh-crumbs a:hover{color:#aebfff}
.bh-crumbs .cur{color:rgba(255,255,255,.8)}
.bh-chip{display:inline-block;font:700 11px/1 'Space Mono';letter-spacing:.16em;text-transform:uppercase;color:#aebfff;background:rgba(174,191,255,.12);border:1px solid rgba(174,191,255,.28);padding:8px 15px;border-radius:999px;margin:0 0 18px}
/* Botón "Volver al blog" del hero (sustituye al chip informativo, misma píldora pero con función) */
.bh-back{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 'Space Mono';letter-spacing:.16em;text-transform:uppercase;color:#aebfff;background:rgba(174,191,255,.12);border:1px solid rgba(174,191,255,.28);padding:9px 16px;border-radius:999px;margin:0 0 18px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.bh-back:hover{background:rgba(174,191,255,.24);border-color:rgba(174,191,255,.55);color:#fff}
.bh-back span{font-size:13px;line-height:1}
/* Escala emparejada con los heros Astro (st-84g777: clamp(44px,6vw,94px)/0.92).
   Posts con títulos largos usan la base; el índice del blog lleva --xl. */
.bh-title{font:700 clamp(34px,4.6vw,62px)/1.02 'Space Grotesk';letter-spacing:-.03em;color:#fff;margin:0;max-width:20ch;text-wrap:balance}
.bh-title--xl{font:700 clamp(44px,6vw,94px)/0.92 'Space Grotesk';letter-spacing:-.045em;max-width:16ch}
.bh-meta{font:500 14px/1.6 'Manrope';color:rgba(255,255,255,.66);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 0}
.bh-meta strong{color:#fff;font-weight:700}
.bh-meta .sep{opacity:.4}
.bh-lead{font:400 17px/1.6 'Manrope';color:rgba(255,255,255,.72);margin:20px 0 0;max-width:60ch}

/* =========================================================================
   Layout a 2 columnas (single)
   ========================================================================= */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding:56px 24px 0;max-width:1200px;margin:0 auto}
@media (max-width:980px){.blog-layout{grid-template-columns:1fr;gap:44px}}
.blog-article{min-width:0;max-width:760px}
.article-feat{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:20px;margin:0 0 36px}

/* Contenido del post */
.prose{font:400 18px/1.75 'Manrope';color:#20242e}
.prose>p{margin:0 0 22px}
.prose h2{font:700 clamp(24px,3.4vw,31px)/1.18 'Space Grotesk';letter-spacing:-.01em;color:#0d0f14;margin:44px 0 16px;scroll-margin-top:100px}
.prose h3{font:600 21px/1.25 'Space Grotesk';color:#0d0f14;margin:32px 0 12px}
.prose h4{font:600 18px/1.3 'Space Grotesk';color:#0d0f14;margin:26px 0 10px}
.prose a{color:#2f4ad8;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(47,74,216,.35)}
.prose a:hover{text-decoration-color:#2f4ad8}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin:0 0 10px}
.prose li::marker{color:#2f4ad8}
.prose img{border-radius:16px;margin:28px 0;height:auto}
.prose figure{margin:28px 0}
.prose figcaption{font:500 13px/1.4 'Manrope';color:#6b7280;margin-top:8px;text-align:center}
.prose strong{font-weight:700;color:#0d0f14}
.prose blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid #2f4ad8;font:500 22px/1.5 'Space Grotesk';color:#0d0f14}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px}
.prose th,.prose td{border:1px solid #e7e9f0;padding:12px 14px;text-align:left}
.prose th{background:#f4f6fb;font-weight:700}
.prose h2:first-child,.prose>*:first-child{margin-top:0}

/* CTA inline (inyectado dentro de .prose por filtro the_content) */
.blog-cta{margin:40px 0;background:#0d0f14;border-radius:20px;padding:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.blog-cta-txt{flex:1 1 240px}
.blog-cta .k{font:700 11px/1 'Space Mono';letter-spacing:.16em;text-transform:uppercase;color:#aebfff;margin:0 0 10px}
.blog-cta .t{font:700 21px/1.2 'Space Grotesk';color:#fff;margin:0}
.blog-cta .s{font:400 15px/1.5 'Manrope';color:#c4c9d6;margin:7px 0 0}
.blog-cta .blog-cta-btn{flex:none;background:#2f4ad8;color:#fff;font:700 15px/1 'Manrope';padding:15px 24px;border-radius:999px;transition:filter .18s;text-decoration:none}
.blog-cta .blog-cta-btn:hover{filter:brightness(1.12);color:#fff}

/* Tags */
.blog-tags{margin:40px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.blog-tags a{font:600 13px/1 'Manrope';color:#4b5162;background:#f4f6fb;padding:9px 14px;border-radius:999px}
.blog-tags a:hover{color:#2f4ad8;background:rgba(47,74,216,.08)}

/* =========================================================================
   Sidebar
   ========================================================================= */
.blog-sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:24px}
@media (max-width:980px){.blog-sidebar{position:static}}
.sw{background:#fff;border:1px solid #e7e9f0;border-radius:18px;padding:22px}
.sw-h{font:700 11px/1 'Space Mono';letter-spacing:.14em;text-transform:uppercase;color:#2f4ad8;margin:0 0 16px}
.sw-search{display:flex;gap:8px}
.sw-search input[type=search]{flex:1;min-width:0;border:1px solid #dfe2ec;border-radius:11px;padding:12px 14px;font:500 15px 'Manrope';color:#0d0f14;background:#f7f8fc}
.sw-search input[type=search]:focus{outline:2px solid rgba(47,74,216,.4);outline-offset:1px;background:#fff}
.sw-search button{flex:none;width:46px;border:0;border-radius:11px;background:#2f4ad8;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sw-search button:hover{filter:brightness(1.1)}
.sw-cats{list-style:none}
.sw-cats li+li{border-top:1px solid #eef0f6}
.sw-cats a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font:600 15px 'Manrope';color:#2b2f3a}
.sw-cats a:hover{color:#2f4ad8}
.sw-cats .cnt{font:700 12px 'Space Mono';color:#9aa0ad;background:#f4f6fb;border-radius:999px;padding:3px 9px}
.sw-recent{list-style:none;display:flex;flex-direction:column;gap:14px}
.sw-recent a{display:flex;gap:12px;align-items:center}
.sw-recent img,.sw-recent .ph{width:58px;height:44px;flex:none;border-radius:9px;object-fit:cover;background:#eceef4}
.sw-recent .rt{font:600 14px/1.3 'Manrope';color:#2b2f3a}
.sw-recent a:hover .rt{color:#2f4ad8}
.sw-cta{background:#0d0f14;border-color:#0d0f14}
.sw-cta-k{font:700 10px/1 'Space Mono';letter-spacing:.16em;text-transform:uppercase;color:#aebfff;margin:0 0 10px}
.sw-cta-t{font:700 19px/1.25 'Space Grotesk';color:#fff;margin:0 0 16px}
.sw-cta .sw-cta-btn{display:inline-flex;align-items:center;gap:9px;background:#2f4ad8;color:#fff;font:700 15px 'Manrope';padding:13px 20px;border-radius:999px;text-decoration:none}
.sw-cta .sw-cta-btn:hover{filter:brightness(1.12);color:#fff}

/* =========================================================================
   Grid de tarjetas (listado / archivo / búsqueda / relacionados)
   ========================================================================= */
.blog-grid-wrap{padding:56px 24px 0;max-width:1200px;margin:0 auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}
.rc{display:flex;flex-direction:column;border:1px solid #e7e9f0;border-radius:18px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.rc:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(13,15,40,.08)}
.rc-imgwrap{aspect-ratio:16/10;overflow:hidden;background:#eceef4}
.rc-img{aspect-ratio:16/10;object-fit:cover;width:100%;height:100%}
.rc-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.rc-c{font:700 10px/1 'Space Mono';letter-spacing:.12em;text-transform:uppercase;color:#2f4ad8}
.rc-t{font:600 19px/1.28 'Space Grotesk';color:#0d0f14;margin:0}
.rc-e{font:400 14px/1.6 'Manrope';color:#545b66;margin:0}
.rc-d{font:500 13px/1 'Manrope';color:#6b7280;margin-top:auto}

.blog-related{border-top:1px solid #e7e9f0;margin:64px auto 0;padding:52px 24px 20px;max-width:1200px}
.blog-related .k{font:700 11px/1 'Space Mono';letter-spacing:.16em;text-transform:uppercase;color:#2f4ad8;margin:0 0 8px}
.blog-related h2{font:700 28px/1.15 'Space Grotesk';color:#0d0f14;margin:0 0 28px}

/* Paginación */
.blog-pagination{max-width:1200px;margin:0 auto;padding:44px 24px 0;display:flex;justify-content:center}
.blog-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid #e7e9f0;border-radius:11px;font:700 15px 'Manrope';color:#2b2f3a;background:#fff}
.blog-pagination a.page-numbers:hover{border-color:#2f4ad8;color:#2f4ad8}
.blog-pagination .page-numbers.current{background:#2f4ad8;border-color:#2f4ad8;color:#fff}
.blog-pagination .dots{border:0;background:transparent}

/* 404 / sin resultados */
.blog-empty{max-width:760px;margin:56px auto 0;padding:0 24px}
.blog-empty p{font:400 18px/1.7 'Manrope';color:#3a3f4a;margin:0 0 24px}

/* Botón "volver arriba" del footer no aplica; nada más */