/* TRUST SOLUTIONS AI BLOG — estilos (marca: gradiente #1e30f3 → #e21e80 · Plus Jakarta Sans) */

* { box-sizing: border-box; }
body { margin:0; font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:#ffffff; color:#1a2233; }

/* ── Cabecera de marca ─────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 26px;background:#0b1220;border-bottom:3px solid;border-image:linear-gradient(90deg,#1e30f3,#e21e80) 1}
.topbar .brand{font-size:21px;font-weight:800;color:#ffffff;text-decoration:none;letter-spacing:-0.3px}
.topbar .brand span{background:linear-gradient(90deg,#6d7bff,#ff5ea8);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topbar nav a{color:#c3cbdb;text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 13px;border-radius:8px;transition:color .15s,background .15s}
.topbar nav a:hover{color:#ffffff;background:rgba(255,255,255,0.07)}
.topbar nav a.active{color:#ffffff;background:linear-gradient(90deg,rgba(30,48,243,0.55),rgba(226,30,128,0.45))}
.topbar nav a.btn-primary-nav{background:linear-gradient(90deg,#1e30f3,#e21e80);color:#fff;border-radius:999px;padding:9px 18px;margin-left:6px}
.topbar nav a.btn-primary-nav:hover{filter:brightness(1.12)}

/* ── Home: hero ────────────────────────────────────────────── */
.blog-hero{padding:64px 22px 34px;max-width:1080px;margin:0 auto}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  background:linear-gradient(90deg,#1e30f3,#e21e80);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.blog-hero h1{font-size:clamp(30px,4vw,46px);color:#0b1220;font-weight:800;letter-spacing:-0.5px;margin:0 0 12px}
.blog-hero .lead{color:#5b6472;font-size:18px;max-width:680px;margin:0;line-height:1.6}

/* ── Selector de temáticas (chips) ─────────────────────────── */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 auto 36px;max-width:1080px;padding:0 22px}
.chip{background:#ffffff;border:1px solid rgba(15,23,42,0.12);color:#5b6472;
  padding:8px 18px;border-radius:999px;font:600 14px/1 "Plus Jakarta Sans",Arial,sans-serif;
  cursor:pointer;transition:all .15s ease;box-shadow:0 2px 10px rgba(15,23,42,0.05)}
.chip:hover{border-color:#1e30f3;color:#1e30f3}
.chip.active{background:linear-gradient(90deg,#1e30f3,#e21e80);color:#fff;border-color:transparent}

/* ── Grid de cards ─────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
  max-width:1080px;margin:0 auto;padding:0 22px 80px}
.post-card{display:block;background:#ffffff;border:1px solid rgba(15,23,42,0.09);
  border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  box-shadow:0 6px 22px rgba(15,23,42,0.06)}
.post-card:hover{transform:translateY(-4px);border-color:rgba(30,48,243,0.40);
  box-shadow:0 16px 40px rgba(15,23,42,0.13)}
.post-cover{height:150px;display:flex;align-items:center;justify-content:center;
  font-size:56px;background:linear-gradient(135deg,rgba(30,48,243,0.10),rgba(226,30,128,0.08));
  border-bottom:1px solid rgba(15,23,42,0.06)}
.post-body{padding:20px 22px 24px}
.post-tema{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;background:linear-gradient(90deg,#1e30f3,#e21e80);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.post-card h3{font-size:20px;font-weight:800;color:#0b1220;margin:0 0 10px;letter-spacing:-0.3px;line-height:1.3}
.post-card .excerpt{color:#5b6472;font-size:15px;line-height:1.55;margin:0 0 16px}
.post-meta{display:flex;gap:14px;color:#8a93a3;font-size:13px;font-weight:600}
.post-card .read{background:linear-gradient(90deg,#1e30f3,#e21e80);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* ── Artículo ─────────────────────────────────────────────── */
.post-wrap{max-width:760px;margin:0 auto;padding:56px 22px 80px}
.post-wrap h1{font-size:clamp(28px,3.6vw,42px);color:#0b1220;font-weight:800;
  letter-spacing:-0.5px;line-height:1.15;margin:14px 0 16px}
.post-meta-top{display:flex;flex-wrap:wrap;gap:14px;color:#8a93a3;font-size:14px;font-weight:600;margin-bottom:8px}
.post-content{color:#33405a;font-size:17px;line-height:1.75}
.post-content h2{color:#0b1220;font-size:26px;font-weight:800;letter-spacing:-0.3px;margin:38px 0 14px}
.post-content h3{color:#1a2233;font-size:20px;font-weight:700;margin:28px 0 10px}
.post-content p{margin:0 0 16px}
.post-content ul,.post-content ol{margin:0 0 18px;padding-left:24px}
.post-content li{margin-bottom:8px}
.post-content a{color:#1e30f3;text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:#e21e80}
.post-content strong{color:#0b1220}
.post-content blockquote{border-left:3px solid #e21e80;margin:22px 0;padding:6px 0 6px 18px;
  color:#5b6472;font-style:italic}
.post-content code{background:rgba(30,48,243,0.07);padding:2px 7px;border-radius:6px;
  font-size:14.5px;color:#1e30f3}
.post-content hr{border:none;border-top:1px solid rgba(15,23,42,0.08);margin:34px 0}

/* ── Caja de recursos ─────────────────────────────────────── */
.res-box{background:#f6f8ff;border:1px solid rgba(30,48,243,0.18);border-radius:16px;
  padding:22px 24px;margin:30px 0}
.res-box h3{margin-top:0 !important}
.res-box ul{margin-bottom:0 !important}

/* ── Checklist final ──────────────────────────────────────── */
.checklist{background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.28);
  border-radius:16px;padding:22px 24px;margin:30px 0}
.checklist h3{margin-top:0 !important;color:#15803d !important}
.checklist ul{list-style:none;padding-left:2px !important;margin-bottom:0 !important}
.checklist li{padding-left:28px;position:relative;margin-bottom:10px !important}
.checklist li::before{content:"✅";position:absolute;left:0;top:0}

/* ── CTA de contacto ──────────────────────────────────────── */
.cta-sai{margin:40px 0 0;background:linear-gradient(135deg,rgba(30,48,243,0.08),rgba(226,30,128,0.06));
  border:1px solid rgba(30,48,243,0.22);border-radius:20px;padding:30px 30px}
.cta-sai h3{margin:0 0 10px !important;color:#0b1220 !important;font-size:22px !important}
.cta-sai p{color:#5b6472;margin:0 0 18px;font-size:16px}
.cta-sai .btn{display:inline-block;background:linear-gradient(90deg,#1e30f3,#e21e80);
  color:#fff;font-weight:700;font-size:16px;padding:13px 28px;border-radius:999px;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.cta-sai .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(30,48,243,0.35)}

/* ── Disclaimer legal ─────────────────────────────────────── */
.legal-note{max-width:760px;margin:0 auto;padding:0 22px 40px;color:#8a93a3;font-size:13px;line-height:1.6}

/* ── Nav interna de artículo ──────────────────────────────── */
.post-nav{display:flex;justify-content:space-between;gap:14px;max-width:760px;
  margin:0 auto;padding:0 22px;flex-wrap:wrap}
.post-nav a{font-weight:700;font-size:15px;text-decoration:none;background:linear-gradient(90deg,#1e30f3,#e21e80);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.post-nav a:hover{opacity:.75}

/* ── Footer ───────────────────────────────────────────────── */
footer{border-top:1px solid rgba(15,23,42,0.08);margin-top:20px;padding:34px 22px;text-align:center;color:#8a93a3;font-size:13.5px;line-height:1.8}
footer .links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
footer .links a{color:#33405a;text-decoration:none;font-weight:600}
footer .links a:hover{color:#1e30f3}
footer a{color:#1e30f3}

@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .post-cover{height:120px;font-size:44px}
  .topbar{justify-content:center;text-align:center}
}