/* ══════════════════════════════════════════════════════════════════
   blog.css — hoja compartida por todas las páginas del blog.
   Reutiliza exactamente los mismos tokens de diseño que index.html
   (mismos colores, radios, sombras, tipografías) para que el blog se
   sienta parte de la misma web, no una sección aparte.
   Un solo archivo cacheable: con decenas/cientos de artículos, esto
   se descarga una vez y el navegador lo reutiliza en todo el blog,
   en vez de repetir el mismo <style> en cada página generada.
   ══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --azul:#1a56db;--azul-h:#1648c0;--azul-bg:#eff6ff;--azul-borde:#bfdbfe;
  --gris-0:#f8fafc;--gris-1:#f1f5f9;--gris-2:#e2e8f0;--gris-3:#cbd5e1;
  --gris-5:#64748b;--gris-7:#334155;--gris-9:#0f172a;
  --verde:#059669;--verde-bg:#ecfdf5;
  --amarillo:#d97706;--amarillo-bg:#fffbeb;
  --radio:10px;--radio-lg:18px;
  --sombra:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --sombra-lg:0 12px 32px rgba(15,23,42,.1),0 2px 8px rgba(15,23,42,.05);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--gris-9);background:#fff;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--azul-borde);color:var(--gris-9)}
.contenedor{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.contenedor-sm{max-width:800px;margin:0 auto;padding:0 1.5rem}
.contenedor-articulo{max-width:1080px;margin:0 auto;padding:0 1.5rem}

/* ── NAV (mismo patrón que index.html) ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(10px) saturate(1.5);border-bottom:1px solid rgba(226,232,240,.8);padding:0 1.5rem}
.nav-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.logo-icono{background:linear-gradient(135deg,var(--azul),#3b82f6);color:#fff;border-radius:9px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 8px rgba(26,86,219,.35);flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a:not(.btn-nav){font-size:14px;font-weight:500;color:var(--gris-5);transition:color .15s}
.nav-links a:not(.btn-nav):hover,.nav-links a.activo{color:var(--gris-9)}
.btn-nav{font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;background:var(--gris-9);color:#fff;transition:all .18s}
.btn-nav:hover{background:var(--azul);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,86,219,.3)}

/* ── SECCIONES ── */
.seccion{padding:4.5rem 1.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--azul);margin-bottom:.9rem}
.eyebrow .punto{width:5px;height:5px;border-radius:50%;background:var(--azul)}
.titulo-seccion{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;line-height:1.18;color:var(--gris-9);margin-bottom:1rem;letter-spacing:-.02em}
.subtitulo-seccion{font-size:1rem;color:var(--gris-5);max-width:560px;line-height:1.7}
.centrado{text-align:center}
.centrado .subtitulo-seccion{margin:0 auto}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,.8,.3,1),transform .5s cubic-bezier(.2,.8,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* ── HERO DEL BLOG ── */
.blog-hero{background:linear-gradient(180deg,var(--gris-0),#fff);padding:4rem 1.5rem 3rem;text-align:center;border-bottom:1px solid var(--gris-1)}
.blog-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4.5vw,3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem;color:var(--gris-9)}
.blog-hero p{font-size:1.05rem;color:var(--gris-5);max-width:560px;margin:0 auto 2rem;line-height:1.65}

/* ── BUSCADOR ── */
.buscador-wrap{max-width:520px;margin:0 auto;position:relative}
.buscador-wrap input{width:100%;padding:14px 44px 14px 18px;border:1.5px solid var(--gris-2);border-radius:999px;font-size:15px;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff}
.buscador-wrap input:focus{border-color:var(--azul);box-shadow:0 0 0 4px rgba(26,86,219,.1)}
.buscador-icono{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--gris-5);pointer-events:none}
#buscador-resultados{max-width:680px;margin:1rem auto 0;text-align:left}
#buscador-resultados:empty{margin:0}
.resultado-item{display:block;padding:.7rem 1rem;border-radius:10px;transition:background .15s}
.resultado-item:hover{background:var(--gris-0)}
.resultado-titulo{font-weight:600;font-size:14px;color:var(--gris-9)}
.resultado-cat{font-size:12px;color:var(--gris-5)}
.buscador-vacio{text-align:center;color:var(--gris-5);font-size:14px;padding:1rem}

/* ── CATEGORÍAS ── */
.categorias-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2.5rem}
.categoria-card{--acc:var(--azul);--acc-bg:var(--azul-bg);background:#fff;border:1.5px solid var(--gris-2);border-radius:16px;padding:1.25rem;transition:all .2s cubic-bezier(.2,.8,.3,1);display:flex;align-items:center;gap:.9rem}
.categoria-card:hover{border-color:var(--acc);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--acc) 35%,transparent);transform:translateY(-3px)}
.categoria-icono{width:40px;height:40px;border-radius:10px;background:var(--acc-bg);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.categoria-nombre{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14.5px;color:var(--gris-9)}
.categoria-count{font-size:12px;color:var(--gris-5);margin-top:2px}

/* ── TARJETAS DE ARTÍCULO ── */
.articulos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2.5rem}
.articulo-card{--acc:var(--azul);background:#fff;border:1.5px solid var(--gris-2);border-radius:16px;overflow:hidden;transition:all .2s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column}
.articulo-card:hover{box-shadow:0 10px 28px -8px color-mix(in srgb,var(--acc) 35%,transparent);transform:translateY(-4px);border-color:var(--acc)}
.articulo-card-img{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.articulo-card-img img{width:100%;height:100%;object-fit:cover}
/* Portada de marca: cuando el artículo no tiene imagen de portada propia,
   se usa el icono y el color del oficio (el mismo sistema que ya usan las
   tarjetas de "Oficios" en la landing) en vez de un icono gris genérico. */
.portada-marca{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
.articulo-card:hover .portada-marca{transform:scale(1.04)}
.articulo-card-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.articulo-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;width:fit-content;margin-bottom:.75rem}
.articulo-card-titulo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--gris-9);margin-bottom:.5rem}
.articulo-card-desc{font-size:13.5px;color:var(--gris-5);line-height:1.6;margin-bottom:1rem;flex:1}
.articulo-card-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gris-5);padding-top:.85rem;border-top:1px solid var(--gris-1)}
.articulo-card-meta .punto-sep{width:3px;height:3px;border-radius:50%;background:var(--gris-3)}
.articulo-destacado{grid-column:span 2}
@media(max-width:680px){.articulo-destacado{grid-column:span 1}}

/* ── PAGINACIÓN ── */
.paginacion{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:3rem}
.paginacion a,.paginacion span{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--gris-5);border:1.5px solid var(--gris-2);transition:all .15s}
.paginacion a:hover{border-color:var(--azul);color:var(--azul)}
.paginacion .activa{background:var(--gris-9);border-color:var(--gris-9);color:#fff}
.paginacion .deshabilitada{opacity:.4;pointer-events:none}

/* ── BREADCRUMBS ── */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--gris-5);margin-bottom:1.5rem}
.breadcrumbs a{color:var(--gris-5);transition:color .15s}
.breadcrumbs a:hover{color:var(--azul)}
.breadcrumbs .sep{color:var(--gris-3)}
.breadcrumbs .actual{color:var(--gris-9);font-weight:500}

/* ── CABECERA DE ARTÍCULO ── */
.articulo-header{padding:2.5rem 1.5rem 2rem;max-width:800px;margin:0 auto}
.articulo-header h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--gris-9);margin:.75rem 0 1.1rem}
.articulo-desc-larga{font-size:1.05rem;color:var(--gris-5);line-height:1.65;margin-bottom:1.5rem}
.articulo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:1.25rem;border-top:1px solid var(--gris-1)}
.autor-avatar{width:38px;height:38px;border-radius:50%;background:var(--azul-bg);color:var(--azul);font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.autor-nombre{font-size:13.5px;font-weight:600;color:var(--gris-9)}
.articulo-meta-sub{font-size:12.5px;color:var(--gris-5)}
.articulo-cover{max-width:1080px;margin:0 auto 2.5rem;padding:0 1.5rem}
.articulo-cover img{border-radius:var(--radio-lg);width:100%;aspect-ratio:16/8;object-fit:cover;background:var(--gris-1)}
.articulo-cover .portada-marca{border-radius:var(--radio-lg);aspect-ratio:16/8}

/* ── LAYOUT DE ARTÍCULO (contenido + índice) ── */
.articulo-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:3rem;align-items:start;max-width:1080px;margin:0 auto;padding:0 1.5rem 4rem}
@media(max-width:900px){.articulo-layout{grid-template-columns:1fr}}

/* Tipografía del contenido markdown renderizado */
.prosa{font-size:1.05rem;line-height:1.75;color:var(--gris-7)}
.prosa > *+*{margin-top:1.35em}
.prosa h2{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--gris-9);letter-spacing:-.01em;margin-top:2.2em;scroll-margin-top:90px}
.prosa h3{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:var(--gris-9);margin-top:1.8em;scroll-margin-top:90px}
.prosa p{}
.prosa ul,.prosa ol{padding-left:1.4em}
.prosa li+li{margin-top:.4em}
.prosa a{color:var(--azul);text-decoration:underline;text-decoration-color:var(--azul-borde);text-underline-offset:2px}
.prosa a:hover{text-decoration-color:var(--azul)}
.prosa strong{color:var(--gris-9);font-weight:600}
.prosa blockquote{border-left:3px solid var(--azul);background:var(--azul-bg);padding:1rem 1.25rem;border-radius:0 10px 10px 0;color:var(--gris-7);font-size:.98rem}
.prosa blockquote p{margin:0}
.prosa code{background:var(--gris-1);padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,Menlo,monospace}
.prosa pre{background:var(--gris-9);color:#e2e8f0;padding:1rem 1.25rem;border-radius:12px;overflow-x:auto;font-size:.88rem}
.prosa pre code{background:none;padding:0;color:inherit}
.prosa img{border-radius:12px;margin:1.5em 0}
.prosa hr{border:none;border-top:1px solid var(--gris-2);margin:2.5em 0}
.prosa table{width:100%;border-collapse:collapse;font-size:.95rem}
.prosa th,.prosa td{border:1px solid var(--gris-2);padding:8px 12px;text-align:left}
.prosa th{background:var(--gris-0);font-weight:600}

/* ── ÍNDICE (TOC) ── */
.toc{position:sticky;top:88px}
.toc-titulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gris-5);margin-bottom:.9rem}
.toc-lista{list-style:none;border-left:2px solid var(--gris-2);display:flex;flex-direction:column;gap:2px}
.toc-lista a{display:block;padding:6px 0 6px 14px;font-size:13px;color:var(--gris-5);border-left:2px solid transparent;margin-left:-2px;transition:color .15s,border-color .15s}
.toc-lista a:hover{color:var(--gris-9)}
.toc-lista a.activo{color:var(--azul);border-left-color:var(--azul);font-weight:600}
.toc-lista .nivel-3{padding-left:26px;font-size:12.5px}
@media(max-width:900px){.toc{position:static;border:1px solid var(--gris-2);border-radius:14px;padding:1rem 1.25rem;margin-bottom:2rem}}

/* ── COMPARTIR ── */
.compartir{display:flex;align-items:center;gap:10px;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--gris-1)}
.compartir-label{font-size:12.5px;font-weight:600;color:var(--gris-5);margin-right:4px}
.btn-compartir{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--gris-2);display:flex;align-items:center;justify-content:center;color:var(--gris-5);transition:all .15s;cursor:pointer;background:#fff}
.btn-compartir:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)}

/* ── RELACIONADOS ── */
.relacionados{background:var(--gris-0);padding:3.5rem 1.5rem;border-top:1px solid var(--gris-1)}

/* ── CTA (mismo patrón que index.html) ── */
.cta-articulo{background:radial-gradient(ellipse 70% 100% at 50% 0%,#1e3a5f,#0f172a 60%);color:#fff;padding:3.5rem 2rem;text-align:center;border-radius:var(--radio-lg);max-width:800px;margin:0 auto}
.cta-articulo h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;margin-bottom:.75rem;letter-spacing:-.02em}
.cta-articulo p{color:#94a3b8;font-size:.98rem;max-width:440px;margin:0 auto 1.75rem}
.btn-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:.98rem;font-weight:700;padding:14px 28px;border-radius:12px;background:#fff;color:var(--gris-9);transition:all .2s;box-shadow:0 4px 24px rgba(0,0,0,.2)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.cta-seccion{margin-top:3.5rem}

/* ── NEWSLETTER ── */
.newsletter-box{max-width:560px;margin:0 auto;background:#fff;border:1.5px solid var(--gris-2);border-radius:var(--radio-lg);padding:2rem;text-align:center;box-shadow:var(--sombra)}
.newsletter-box h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--gris-9);margin-bottom:.4rem}
.newsletter-box p{font-size:13.5px;color:var(--gris-5);margin-bottom:1.25rem}
.newsletter-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.newsletter-form input{flex:1;padding:11px 14px;border:1.5px solid var(--gris-2);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;outline:none;min-width:0}
.newsletter-form input:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.newsletter-form button{background:var(--azul);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s;white-space:nowrap}
.newsletter-form button:hover{background:var(--azul-h)}
.newsletter-form button:disabled{opacity:.6;cursor:not-allowed}
.newsletter-msg{font-size:12.5px;margin-top:.75rem;min-height:16px}
.newsletter-msg.exito{color:var(--verde)}
.newsletter-msg.error{color:#dc2626}
@media(max-width:480px){.newsletter-form{flex-direction:column}}

/* ── ESTADO VACÍO ── */
.vacio{text-align:center;padding:3rem 1.5rem;color:var(--gris-5)}
.vacio-icono{width:52px;height:52px;border-radius:14px;background:var(--gris-1);color:var(--gris-3);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}

/* ── FOOTER (mismo patrón que index.html) ── */
footer{background:#0b1220;color:#fff;padding:3rem 1.5rem 2rem}
.footer-inner{max-width:1160px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.25rem;padding-bottom:1.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
footer .logo{color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.footer-links a{font-size:13.5px;color:#94a3b8;transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.5rem}
.footer-copy{font-size:12.5px;color:#475569}

/* ── RESPONSIVE GENERAL ── */
@media(max-width:680px){
  .nav-links a:not(.btn-nav){display:none}
  .seccion{padding:3.25rem 1.25rem}
  .articulo-header{padding:2rem 1.25rem 1.5rem}
}
@media(max-width:380px){
  .nav{padding:0 .85rem}
  .logo{font-size:1.05rem;gap:6px}
  .logo-icono{width:28px;height:28px;font-size:14px}
  .btn-nav{padding:7px 12px;font-size:12.5px;white-space:nowrap}
}