/* Blog de Sylence · estilos comunes (portada del blog y artículos) */
:root{
  color-scheme:light;
  --bg:#FFFFFF;--tint:#F6F7FB;--line:#E7E5F0;
  --ink:#14112B;--text:#4B4868;--muted:#817E9A;
  --violet:#5B27F2;--violet-hover:#4A1DD6;--lila:#C187F8;--aqua:#3CC6E6;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--violet)}
h1,h2,h3{color:var(--ink);letter-spacing:-.025em;line-height:1.15;margin:0;text-wrap:balance}
p,ul,ol{margin:0}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.container{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}

/* Cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.lockup{display:inline-flex;align-items:center;gap:11px}
.lockup img{height:28px;width:auto}
.lockup span{font-weight:800;font-size:15.5px;letter-spacing:.32em;color:var(--ink)}
.brand .tag{font-size:13px;font-weight:700;color:var(--violet);border-left:1px solid var(--line);padding-left:14px}
.top-nav{display:flex;align-items:center;gap:18px;font-weight:700;font-size:14.5px}
.top-nav a{color:var(--ink);text-decoration:none}
.top-nav a:hover{color:var(--violet)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--font);border-radius:999px;padding:11px 20px;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.btn-ink{background:var(--ink);color:#FFFFFF!important}
.btn-ink:hover{background:var(--violet)}
.btn-v{background:var(--violet);color:#FFFFFF!important}
.btn-v:hover{background:var(--violet-hover)}
@media (max-width:640px){.top-nav .web{display:none}.brand .tag{display:none}}

/* Portada del blog */
.b-hero{background:radial-gradient(60% 120% at 8% 0%,rgba(193,135,248,.5),transparent 70%),radial-gradient(50% 110% at 92% 0%,rgba(60,198,230,.32),transparent 70%),#F7F3FF;padding-block:clamp(48px,7vw,88px)}
.b-hero h1{font-size:clamp(36px,5vw,60px)}
.b-hero p{margin-top:14px;max-width:40em;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-block:clamp(40px,6vw,72px)}
.card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:22px;padding:26px;text-decoration:none;color:var(--text);background:#FFFFFF;transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--lila);box-shadow:0 30px 60px -40px rgba(91,39,242,.5)}
.card h2{font-size:22px}
.card p{font-size:15px;line-height:1.6;flex:1}
.card .more{font-weight:700;color:var(--violet);font-size:14.5px}

/* Filtros de la portada del blog */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-top:clamp(28px,4vw,40px)}
.filters button{font:700 14px var(--font);color:var(--ink);background:#FFFFFF;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.filters button:hover{border-color:var(--violet)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.filters + .grid,.count + .grid{padding-top:20px}
.count{font-size:14px;color:var(--muted);font-weight:600;margin-top:14px}

/* Etiquetas y metadatos */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:#F1ECFF;border-radius:999px;padding:5px 12px;align-self:flex-start;justify-self:start}
.meta{font-size:13.5px;color:var(--muted);font-weight:600}

/* Artículo */
.a-hero{background:radial-gradient(60% 120% at 8% 0%,rgba(193,135,248,.42),transparent 70%),radial-gradient(50% 110% at 92% 0%,rgba(60,198,230,.26),transparent 70%),#F8F5FF;padding-block:clamp(40px,6vw,72px)}
.a-hero .container{max-width:860px;display:grid;gap:16px}
.a-hero h1{font-size:clamp(32px,4.6vw,52px)}
.a-hero .lead{font-size:clamp(18px,1.6vw,20px);color:var(--ink);opacity:.85}
.crumbs{font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--violet)}
.article{max-width:760px;margin-inline:auto;padding:clamp(36px,5vw,64px) var(--gutter) 24px;display:grid;gap:22px}
.article h2{font-size:clamp(24px,2.6vw,30px);margin-top:18px}
.article h3{font-size:19px;margin-top:6px}
.article ul,.article ol{padding-left:22px;display:grid;gap:8px}
.article li::marker{color:var(--violet)}
.article strong{color:var(--ink)}
.toc{border:1px solid var(--line);border-radius:18px;padding:18px 22px;background:var(--tint)}
.toc b{display:block;color:var(--ink);font-size:14px;margin-bottom:8px}
.toc ol{font-size:15px;gap:4px}
.toc a{text-decoration:none}
.callout{border-radius:18px;padding:18px 22px;background:#F4EFFF;border-left:4px solid var(--violet);display:grid;gap:6px}
.callout b{color:var(--ink)}
.callout.aqua{background:#EAF8FC;border-left-color:var(--aqua)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;line-height:1.5}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--tint);color:var(--ink);font-size:13.5px}
tbody th{color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.steps{list-style:none;padding:0!important;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--violet);color:#FFFFFF;font-weight:800;display:grid;place-items:center;font-size:15px}
.sources{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;display:grid;gap:6px}
.sources ul{gap:4px}

/* Llamada a la acción */
.cta{max-width:760px;margin:16px auto clamp(40px,6vw,72px);padding-inline:var(--gutter)}
.cta-in{border-radius:26px;padding:clamp(24px,4vw,40px);display:grid;gap:14px;
  background:radial-gradient(60% 85% at 8% 12%,rgba(193,135,248,.9),transparent 70%),radial-gradient(55% 75% at 92% 8%,rgba(91,39,242,.45),transparent 70%),radial-gradient(60% 85% at 72% 100%,rgba(60,198,230,.55),transparent 70%),#F4EFFF;box-shadow:0 40px 90px -50px rgba(91,39,242,.55)}
.cta-in h2{font-size:clamp(24px,3vw,32px)}
.cta-in p{color:var(--ink);opacity:.85}
.cta-in .row{display:flex;gap:10px;flex-wrap:wrap}

/* Relacionados */
.related{max-width:1160px;margin-inline:auto;padding:0 var(--gutter) clamp(48px,6vw,80px)}
.related h2{font-size:22px;margin-bottom:16px}
.related .grid{padding-block:0}

/* Pie */
.foot{border-top:1px solid var(--line);padding-block:28px;font-size:14px;color:var(--muted)}
.foot .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--violet)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}