/* Marketing para Pymes — sistema de diseño
   Paleta derivada de la identidad de Lighthouse Marketing (navy + ámbar) a propósito:
   este blog es una marca de agencia separada, pero debe notarse desde el primer
   vistazo que es de Lighthouse (ver CLAUDE.md, mitigación del caso 40deFiebre). */
:root{
  --bg:#FBF7EF; --surface:#FFFFFF; --surface-2:#F1EAD8;
  --ink:#12202F; --ink-soft:#4B5A6B; --ink-faint:#7C8A99;
  --accent:#C77F1F; --accent-ink:#3A2607;
  --navy:#0E2A47; --navy-soft:#E4EBF4; --navy-soft-ink:#0E2A47;
  --line:#E4DCC9; --warn:#B23A29; --warn-soft:#FBE6E0;
  --shadow: 0 1px 2px rgba(18,32,47,0.06), 0 8px 24px -12px rgba(18,32,47,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101820; --surface:#161F29; --surface-2:#1C2732;
    --ink:#EFE9DC; --ink-soft:#B9C3CE; --ink-faint:#8593A1;
    --accent:#E3A54F; --accent-ink:#241A08;
    --navy:#8FB8E8; --navy-soft:#1B2A3C; --navy-soft-ink:#BFDAFA;
    --line:#2A3542; --warn:#F0897A; --warn-soft:#3A2118;
  }
}
:root[data-theme="dark"]{
  --bg:#101820; --surface:#161F29; --surface-2:#1C2732;
  --ink:#EFE9DC; --ink-soft:#B9C3CE; --ink-faint:#8593A1;
  --accent:#E3A54F; --accent-ink:#241A08;
  --navy:#8FB8E8; --navy-soft:#1B2A3C; --navy-soft-ink:#BFDAFA;
  --line:#2A3542; --warn:#F0897A; --warn-soft:#3A2118;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Public Sans',Arial,Helvetica,sans-serif;
  line-height:1.62; font-size:17px;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',Arial,sans-serif; font-weight:700;
  color:var(--ink); line-height:1.15; text-wrap:balance; margin:0 0 .5em;
}
h1{font-size:clamp(1.9rem,4vw,2.6rem);}
h2{font-size:1.5rem; letter-spacing:.2px;}
h3{font-size:1.15rem;}
p{margin:0 0 1.1em; max-width:70ch;}
a{color:var(--navy);}
:root[data-theme="dark"] a, @media (prefers-color-scheme: dark){ a{color:var(--accent);} }
img{max-width:100%; display:block;}
.container{max-width:1080px; margin:0 auto; padding:0 20px;}
.eyebrow{
  font-family:'Space Grotesk',Arial,sans-serif; text-transform:uppercase;
  letter-spacing:1.6px; font-size:.78rem; font-weight:700; color:var(--accent);
}

/* Header */
header.site{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;}
header.site .bar{max-width:1080px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:18px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; white-space:nowrap;}
.logo .dot{width:11px; height:11px; border-radius:3px; background:var(--accent); flex:none;}
.logo .by{display:block; font-size:.62rem; font-weight:500; letter-spacing:1px; color:var(--ink-faint); text-transform:uppercase; margin-top:1px;}
nav.primary{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap;}
nav.primary a{
  color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:600;
  padding:8px 12px; border-radius:7px; white-space:nowrap;
}
nav.primary a:hover, nav.primary a.active{background:var(--surface-2); color:var(--ink);}
.menu-toggle{display:none; appearance:none; border:none; background:transparent; width:40px; height:40px; padding:0; cursor:pointer; position:relative; border-radius:6px; flex:none;}
.menu-toggle span{position:absolute; left:9px; right:9px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.menu-toggle span:nth-child(1){top:14px;} .menu-toggle span:nth-child(2){top:19px;} .menu-toggle span:nth-child(3){top:24px;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
@media (max-width:860px){
  .menu-toggle{display:block;}
  header.site .bar{flex-wrap:wrap;}
  nav.primary{order:3; width:100%; flex-direction:column; align-items:stretch; gap:2px; max-height:0; overflow:hidden; transition:max-height .25s ease;}
  nav.primary.open{max-height:640px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}
  nav.primary a{padding:10px 12px;}
}

/* Hero */
.hero{padding:64px 0 52px; border-bottom:1px solid var(--line);}
.hero .eyebrow{margin-bottom:14px; display:block;}
.hero p.lead{font-size:1.15rem; color:var(--ink-soft); max-width:58ch;}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:.92rem; padding:11px 20px; border-radius:8px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--navy); color:#fff;}
:root[data-theme="dark"] .btn-primary, @media (prefers-color-scheme: dark){ .btn-primary{color:#0d1520;} }
.btn-primary:hover{opacity:.92;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--surface-2);}

/* Cards / grids */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:inherit; height:100%;
}
.card:hover{border-color:var(--accent);}
.card .tag{font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent);}
.card h3{margin:2px 0 4px;}
.card p{font-size:.94rem; color:var(--ink-soft); margin-bottom:0;}

.pillar-card{
  background:var(--navy); color:#fff; border-radius:14px; padding:26px;
  text-decoration:none; display:flex; flex-direction:column; gap:10px; min-height:190px;
}
:root[data-theme="dark"] .pillar-card, @media (prefers-color-scheme: dark){ .pillar-card{color:#0d1520;} }
.pillar-card .num{font-family:'Space Grotesk',sans-serif; font-weight:700; opacity:.55; font-size:.85rem;}
.pillar-card h3{color:#fff; margin:0;}
:root[data-theme="dark"] .pillar-card h3, @media (prefers-color-scheme: dark){ .pillar-card h3{color:#0d1520;} }
.pillar-card p{color:#CBDAEC; margin:0; font-size:.92rem;}
:root[data-theme="dark"] .pillar-card p, @media (prefers-color-scheme: dark){ .pillar-card p{color:#2c3f56;} }
.pillar-card:hover{outline:2px solid var(--accent);}

/* Section headings */
section{padding:52px 0;}
section.alt{background:var(--surface-2);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap;}
.section-head a{font-size:.9rem; font-weight:700; text-decoration:none;}

/* Article */
article.post{padding:48px 0 70px;}
article.post .meta{color:var(--ink-faint); font-size:.88rem; margin-bottom:6px;}
article.post h2{margin-top:1.6em;}
article.post ul, article.post ol{padding-left:1.3em;}
article.post li{margin-bottom:.5em;}
.callout{border-left:4px solid var(--accent); background:var(--navy-soft); border-radius:0 10px 10px 0; padding:16px 20px; margin:1.6em 0;}
.callout p{margin:0; color:var(--ink);}
.callout strong{color:var(--navy-soft-ink);}
.faq dt{font-weight:700; font-family:'Space Grotesk',sans-serif; margin-top:1.2em;}
.faq dd{margin:.3em 0 0;}
.related{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:14px;}
@media (max-width:640px){.related{grid-template-columns:1fr;}}

/* Footer */
footer.site{background:var(--navy); color:#CBDAEC; padding:44px 0 26px; margin-top:40px;}
:root[data-theme="dark"] footer.site, @media (prefers-color-scheme: dark){ footer.site{color:#33465e; background:var(--accent);} }
footer.site .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px;}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr;}}
footer.site h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px;}
:root[data-theme="dark"] footer.site h4, @media (prefers-color-scheme: dark){ footer.site h4{color:#0d1520;} }
footer.site a{color:#CBDAEC; text-decoration:none; font-size:.92rem; display:block; margin-bottom:7px;}
:root[data-theme="dark"] footer.site a, @media (prefers-color-scheme: dark){ footer.site a{color:#243348;} }
footer.site a:hover{color:#fff;}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:30px; padding-top:18px; font-size:.82rem; color:#9AB2CE; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
footer.site .bottom button{background:none;border:none;color:#9AB2CE;text-decoration:underline;cursor:pointer;font-size:.82rem;padding:0;font-family:inherit;}

/* Cookie banner */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 20px; z-index:80;}
.cookie-banner.hidden{display:none;}
.cookie-banner .wrap p{font-size:.88rem; margin:0 0 12px; color:var(--ink-soft);}
.cookie-banner .actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.cookie-banner button{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.85rem; padding:9px 16px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer;}
.cookie-banner button.primary{background:var(--navy); color:#fff; border-color:var(--navy);}

.skip-link{position:absolute; left:-999px; top:auto;}
.skip-link:focus{left:16px; top:16px; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; z-index:100;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}