/* ============================================================
   BLOGWISP — hoja de estilos principal
   Paleta: papel #FBFAF7 · tinta #1F2A24 · verde hoja #1B7A4D
           ámbar #E8A33D · línea de cuadrícula #D9D2C2 · gris #6B6558
   Tipografía: Fraunces (display) · Inter (texto) · IBM Plex Mono (utilidad)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#FBFAF7;
  --paper-dim:#F3F1EA;
  --ink:#1F2A24;
  --green:#1B7A4D;
  --green-dark:#145C3A;
  --amber:#E8A33D;
  --grid:#D9D2C2;
  --muted:#6B6558;
  --radius:10px;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2rem,4.5vw,3.1rem); font-weight:700;}
h2{font-size:clamp(1.4rem,3vw,2rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1.1em;}
a{color:var(--green-dark); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
ul,ol{padding-left:1.3em;}
li{margin-bottom:.5em;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---------- cabecera / barra de fórmula ---------- */
.site-header{
  border-bottom:1px solid var(--grid);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.formula-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 24px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  color:var(--muted);
  border-bottom:1px solid var(--grid);
  letter-spacing:.02em;
  overflow-x:auto;
  white-space:nowrap;
}
.formula-bar .cellref{
  background:var(--paper-dim); border:1px solid var(--grid);
  padding:2px 8px; border-radius:4px; color:var(--green-dark); font-weight:600;
}
.formula-bar .fx{color:var(--amber); font-weight:600;}

.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--max); margin:0 auto; gap:20px; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:baseline; gap:6px;
  font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:var(--ink);
}
.brand span{color:var(--green);}
.nav-links{display:flex; gap:22px; flex-wrap:wrap; font-size:.93rem; font-weight:500;}
.nav-links a{color:var(--ink);}
.nav-links a:hover{color:var(--green-dark);}

/* ---------- hero: rejilla de categorías ---------- */
.hero{padding:56px 0 40px; border-bottom:1px solid var(--grid);}
.hero-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem;
  color:var(--green-dark); text-transform:uppercase; letter-spacing:.08em;
  display:inline-block; margin-bottom:14px;
}
.hero p.lead{font-size:1.15rem; color:var(--muted); max-width:640px;}

.sheet-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px; background:var(--grid); border:1px solid var(--grid);
  border-radius:var(--radius); overflow:hidden; margin-top:32px;
}
.sheet-cell{
  background:var(--paper); padding:20px; transition:background .15s ease;
  display:flex; flex-direction:column; gap:6px;
}
.sheet-cell:hover{background:var(--paper-dim);}
.sheet-cell .ref{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted);
}
.sheet-cell h3{margin:0; font-size:1.05rem;}
.sheet-cell .icon{font-size:1.4rem;}
.sheet-cell a.cell-link{color:var(--ink); font-weight:600;}
.sheet-cell a.cell-link:hover{color:var(--green-dark); text-decoration:none;}
.sheet-cell .desc{color:var(--muted); font-size:.88rem; margin:0;}

/* ---------- secciones generales ---------- */
section{padding:44px 0;}
.section-title-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.section-title-row .ref{font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:.85rem;}

.article-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;}
.article-card{
  border:1px solid var(--grid); border-radius:var(--radius); padding:20px;
  background:var(--paper); display:flex; flex-direction:column; gap:8px;
}
.article-card .tag{
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--green-dark);
  text-transform:uppercase; letter-spacing:.06em;
}
.article-card h3{font-size:1.05rem; margin:0;}
.article-card p{color:var(--muted); font-size:.9rem; margin:0;}
.article-card .readmore{font-weight:600; font-size:.88rem; margin-top:4px;}
.article-card.soon{opacity:.55;}
.article-card.soon .readmore{color:var(--muted);}

/* ---------- CTA curso ---------- */
.cta-box{
  background:var(--green); color:#fff; border-radius:var(--radius);
  padding:34px 30px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-box h3{color:#fff; margin-bottom:6px;}
.cta-box p{color:#E7F3EC; margin:0; max-width:480px;}
.btn{
  display:inline-block; background:var(--amber); color:var(--ink);
  font-weight:700; padding:12px 22px; border-radius:8px; white-space:nowrap;
}
.btn:hover{text-decoration:none; background:#d6922e;}

/* ---------- artículo ---------- */
.article-header{border-bottom:1px solid var(--grid); padding:40px 0 30px;}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--muted); margin-bottom:16px;}
.breadcrumb a{color:var(--muted);}
.meta-row{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.85rem; margin-top:14px;}
.meta-row .pill{background:var(--paper-dim); border:1px solid var(--grid); padding:3px 10px; border-radius:20px;}

.article-body{padding:36px 0; max-width:740px;}
.article-body h2{margin-top:1.6em; border-bottom:2px solid var(--grid); padding-bottom:.25em;}
.article-body h3{margin-top:1.3em; color:var(--green-dark);}
.article-body table{width:100%; border-collapse:collapse; margin:1em 0; font-size:.92rem;}
.article-body th,.article-body td{border:1px solid var(--grid); padding:8px 10px; text-align:left;}
.article-body th{background:var(--paper-dim); font-family:'IBM Plex Mono',monospace; font-size:.78rem;}
.article-body code{
  background:var(--paper-dim); border:1px solid var(--grid); border-radius:4px;
  padding:1px 6px; font-family:'IBM Plex Mono',monospace; font-size:.88em; color:var(--green-dark);
}
.callout{
  background:var(--paper-dim); border-left:4px solid var(--amber);
  padding:14px 18px; border-radius:6px; margin:1.3em 0; font-size:.95rem;
}
.article-nav-links{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--grid);}

/* ---------- páginas legales ---------- */
.legal{max-width:760px; padding:44px 0;}
.legal h2{margin-top:1.5em;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--grid); background:var(--paper-dim); margin-top:60px;}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding:44px 24px 24px;
  max-width:var(--max); margin:0 auto;
}
.footer-grid h4{font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px;}
.footer-grid ul{list-style:none; padding:0; margin:0;}
.footer-grid a{color:var(--ink); font-size:.9rem;}
.footer-grid a:hover{color:var(--green-dark);}
.footer-bottom{
  border-top:1px solid var(--grid); text-align:center; padding:16px 24px;
  font-size:.8rem; color:var(--muted); font-family:'IBM Plex Mono',monospace;
}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
  .nav-row{flex-direction:column; align-items:flex-start;}
}

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}