/* Faro° — estilos compartidos del blog (índice + posts). Mismos tokens que el resto del sitio. */
:root{
  --accent:#3D5AFE; --accent-2:#5B72FF; --accent-tint:#E4E8FF;
  --ground:#EEF1F7; --surface:#FFFFFF; --surface-2:#E6EAF2;
  --border:#D5DBE8; --ink:#111420; --muted:#59617A; --faint:#98A0B4; --good:#2F8F63;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#5B72FF; --accent-2:#7E90FF; --accent-tint:#171C33;
    --ground:#0A0D17; --surface:#131829; --surface-2:#1A2036;
    --border:#28304C; --ink:#EAEDF6; --muted:#9AA2BC; --faint:#5A6484; --good:#4FB98A;
  }
}
:root[data-theme="dark"]{
  --accent:#5B72FF; --accent-2:#7E90FF; --accent-tint:#171C33;
  --ground:#0A0D17; --surface:#131829; --surface-2:#1A2036;
  --border:#28304C; --ink:#EAEDF6; --muted:#9AA2BC; --faint:#5A6484; --good:#4FB98A;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.bar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(12px); background:color-mix(in srgb,var(--ground) 82%,transparent); border-bottom:1px solid var(--border)}
.bar .in{max-width:1080px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:24px}
.brand{font-weight:800; font-size:1.15rem; letter-spacing:-.04em; color:var(--ink); text-decoration:none}
.brand b{color:var(--accent)}
.bar nav{margin-left:auto; display:flex; gap:22px; font-size:.9rem}
.bar nav a{color:var(--muted); text-decoration:none}
.bar nav a:hover{color:var(--ink)}
@media (max-width:640px){ .bar nav a.hide-sm{display:none} }

.wrap{max-width:760px; margin:0 auto; padding:40px 20px 80px}
@media (max-width:520px){ .wrap{padding-inline:16px} }
.crumbs{font-family:var(--mono); font-size:.74rem; color:var(--faint)}
.crumbs a{color:var(--faint); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600}
h1,h2,h3{letter-spacing:-.03em; font-weight:800; line-height:1.1; text-wrap:balance}
h1{font-size:clamp(2.1rem,5.4vw,3.2rem); margin:14px 0 14px}
.meta{font-family:var(--mono); font-size:.78rem; color:var(--faint); display:flex; flex-wrap:wrap; gap:6px 14px}

/* respuesta corta: lo primero que lee la IA y el lector apurado */
.tldr{margin:28px 0; background:var(--surface); border:1px solid var(--accent); border-radius:14px; padding:18px 20px}
.tldr > strong{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.tldr p{margin:0; color:var(--ink)}
.tldr p strong{font-weight:700; color:var(--ink)}

.toc{margin:24px 0; padding:16px 20px; border-left:2px solid var(--accent); background:var(--surface-2); border-radius:0 12px 12px 0}
.toc > strong{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.toc ol{margin:8px 0 0; padding-left:20px}
.toc a{text-decoration:none}

.prose h2{font-size:1.6rem; margin:44px 0 12px; scroll-margin-top:80px}
.prose h3{font-size:1.2rem; margin:28px 0 8px}
.prose p,.prose li{color:var(--muted); font-size:1.04rem}
.prose strong{color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.94rem; display:block; overflow-x:auto}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted)}
.prose th{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.prose code{font-family:var(--mono); font-size:.9em; background:var(--surface-2); padding:1px 6px; border-radius:6px}
.prose blockquote{margin:20px 0; padding:4px 0 4px 18px; border-left:2px solid var(--accent); color:var(--ink)}

.faq{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 18px}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer; list-style:none; padding:14px 0; font-weight:700; display:flex; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--accent); font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0; padding-bottom:16px; color:var(--muted)}

.cta{margin-top:48px; background:var(--ink); color:var(--ground); border-radius:20px; padding:30px; text-align:center}
.cta h2{color:var(--ground); font-size:1.5rem; margin:0 0 8px}
.cta p{color:color-mix(in srgb,var(--ground) 66%,transparent); margin:0 auto 18px; max-width:46ch}
.cta a{display:inline-block; background:var(--accent); color:#fff; font-weight:700; padding:12px 24px; border-radius:999px; text-decoration:none; margin:4px}
.cta a.ghost{background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--ground)}

.author{margin-top:40px; display:flex; gap:14px; align-items:flex-start; padding-top:24px; border-top:1px solid var(--border)}
.author .av{flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800}
.author p{margin:2px 0 0; color:var(--muted); font-size:.9rem}

.related{margin-top:32px}
.related ul{list-style:none; padding:0; display:grid; gap:10px}
.related a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink); font-weight:600}
.related a:hover{border-color:var(--accent)}

/* índice */
.posts{list-style:none; padding:0; margin:32px 0 0; display:grid; gap:14px}
.posts a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; text-decoration:none; color:var(--ink); transition:border-color .18s, transform .18s}
.posts a:hover{border-color:var(--accent); transform:translateY(-2px)}
.posts h2{font-size:1.25rem; margin:6px 0 6px}
.posts p{margin:0; color:var(--muted); font-size:.95rem}

footer{border-top:1px solid var(--border); padding:28px 20px; text-align:center; font-size:.85rem; color:var(--muted)}
footer a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
.cover{display:block; width:100%; height:auto; aspect-ratio:1200/630; margin:24px 0 0; border-radius:16px; border:1px solid var(--border)}

/* páginas de servicio (/diseno-web, /seo-aeo-geo, /marketing-digital, /precios) */
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0}
.btn{display:inline-flex; align-items:center; font-weight:700; font-size:.94rem; padding:11px 20px; border-radius:999px; text-decoration:none; border:1px solid transparent}
.btn.primary{background:var(--accent); color:#fff}
.btn.ghost{border-color:var(--border); color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 6px}
.plans.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .plans,.plans.two{grid-template-columns:1fr} }
.plan{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px}
.plan.hot{border-color:var(--accent)}
.plan .pn{font-weight:800; font-size:1.1rem; letter-spacing:-.02em}
.plan .pp{font-family:var(--mono); font-weight:700; font-size:1.3rem}
.plan .pp small{display:block; font-size:.72rem; font-weight:400; color:var(--faint)}
.plan ul{margin:0; padding-left:18px; color:var(--muted); font-size:.92rem}
.note-mono{font-family:var(--mono); font-size:.78rem; color:var(--faint); margin-top:8px}