/* ====== Tokens ====== */
:root{
  --bg:#0b0f1a;
  --ink:#0f1320;
  --muted:#6b7280;
  --brand:#2bb673;          /* verde de acento (ajústalo si quieres) */
  --brand-ink:#05160e;
  --paper:#ffffff;
  --paper-alt:#f7f9fb;
  --shadow:0 18px 40px rgba(0,0,0,.12);
  --radius:16px;
  --maxw:1050px;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9; text-underline-offset:2px}

/* Barra de progreso de lectura (encima de todo) */
.reading-progress{
  position:fixed;
  top:0; left:0;
  height:4px;
  width:0%;
  background:linear-gradient(90deg, var(--brand), #84e1b7);
  z-index:2147483647;          /* más alto que cualquier header */
  pointer-events:none;         /* no bloquea clics del menú */
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Contenedor */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:48px 24px;
}

/* Tipografía de artículo */
.prose h1,.prose h2,.prose h3{font-family:Poppins, Inter, system-ui, sans-serif}
.prose h1{font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin:0 0 18px}
.prose h2{font-size:clamp(22px,2.4vw,30px); margin:40px 0 12px}
.prose h3{font-size:clamp(18px,2vw,22px); margin:28px 0 10px}
.prose p{margin:0 0 16px; font-size:clamp(15px,1.2vw,17px)}
.prose strong{font-weight:700}

/* Secciones */
.section{padding:24px 0}
.section--alt{background:var(--paper-alt); border-radius:24px; padding:32px; margin:16px 0}

/* HERO del artículo */
.hero-article{
  position:relative;
  min-height:48vh;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)),
    var(--hero-img) center/cover no-repeat;
  color:#fff;
}
.hero-article__inner{
  text-align:center;
  max-width:900px;
  padding:64px 20px;
}
.eyebrow{
  display:inline-block;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:10px;
}
.hero-article h1{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(28px,4vw,48px);
  line-height:1.08;
  margin:0 0 18px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  font-weight:600; transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand); color:var(--brand-ink)}
.btn--dark{background:#111827; color:#fff}

/* Grid de beneficios */
.benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}
@media (max-width:980px){ .benefits{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .benefits{grid-template-columns:1fr} }

.card{
  background:#fff;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px rgba(0,0,0,.16) }
.card__icon{ font-size:28px; line-height:1; margin-bottom:10px }
.card h3{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-size:18px; margin:0 0 8px
}
.card p{ margin:0; color:#374151 }

/* Figura / imagen full */
.figure{
  margin:8px 0 0;
  text-align:center;
}
.figure img{
  width:100%;
  max-width:980px;
  height:auto;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.figure figcaption{
  font-size:13px; color:var(--muted); margin-top:8px
}

/* CTA caja final */
.cta-box{
  margin-top:28px;
  background:linear-gradient(135deg, var(--brand), #1f9d60);
  color:#fff;                 /* Texto en blanco sobre fondo oscuro */
  border-radius:20px;
  padding:22px;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.cta-box__content h3{
  font-family:Poppins, Inter, system-ui, sans-serif;
  margin:0 0 4px; font-size:20px; color:#fff
}
.cta-box__content p{ margin:0; opacity:.95; color:#fff }

/* Utilidades */
img{max-width:100%; height:auto; display:block}

/* Responsive extra para contenedor */
@media (max-width:500px){
  .container{padding:32px 18px}
  .section--alt{padding:24px}
}


/* ====== Layout de artículo con sidebar ====== */
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
}
@media (min-width:980px){
  .layout{
    grid-template-columns: minmax(0,1fr) 320px; /* main + sidebar */
    align-items:start;
  }
}
.main{ /* columna principal */ }
.sidebar{ /* columna lateral */ }

/* ====== TOC (tabla de contenidos) ====== */
.toc{
  position:sticky; top:90px;
  background:var(--paper-alt);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:16px 16px 8px;
  box-shadow: var(--shadow);
}
.toc h3{
  margin:0 0 8px 0;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.toc a{
  display:block;
  padding:8px 2px;
  font-size:15px;
  color:var(--ink);
}
.toc a:hover{ color:var(--brand) }

/* ====== Share bar ====== */
.share{
  position:sticky; top:90px;
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:16px;
}
.share a,.share button{
  border:1px solid rgba(0,0,0,.06);
  background:var(--paper);
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  box-shadow: var(--shadow);
  cursor:pointer;
  font-weight:600;
}
.share a:hover,.share button:hover{ opacity:.9 }

/* ====== Badges (tiempo de lectura, actualizado, tags) ====== */
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; justify-content:center}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.06);
  background:var(--paper);
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--ink);
  box-shadow: var(--shadow);
}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--brand)}

/* ====== Checklist pequeño (audiencia, medición, etc.) ====== */
.checklist{display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px}
.checklist .item{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--paper);
  border-radius:12px;
  padding:12px;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}
.checklist .emoji{font-size:20px; line-height:1}