:root{
  --page-bg:#FBFAF7;
  --hero-bg:#F5F3EE;
  --paper:#FFFFFF;
  --paper-2:#F1EEE6;
  --ink:#1A1A1A;
  --ink-soft:#5B564C;
  --blue:#0000CC;
  --maroon:#3B0A0A;
  --maroon-soft:#EADCDA;
  --navy:#1F4E5F;
  --navy-soft:#D8E3E6;
  --orange:#C1622E;
  --orange-soft:#EFD9C9;
  --rust:#A63D2F;
  --line:#DFDACD;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}   /* que "hidden" gane siempre, aunque el elemento tenga display:flex */
html{scroll-behavior:smooth;}
body{margin:0; background:var(--page-bg); color:var(--ink); font-family:Georgia,'Times New Roman',serif; line-height:1.6;}
.page{background:var(--paper); max-width:1360px; margin:0 auto; box-shadow:0 0 40px rgba(0,0,0,0.06); min-height:100vh;}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif; font-weight:700; color:var(--ink);}
a{color:var(--blue);}
.mono{font-family:'Courier New',monospace;}

/* ---------- brand bar ---------- */
/* Fondo blanco y tonos grises: logo gris, "Blog", buscador limpio y redes. */
.brand-bar{display:flex; align-items:center; gap:18px; padding:12px 4vw; background:#fff; border-bottom:1px solid #E4E2DD; min-height:66px;}
.brand-logo{display:block; flex-shrink:0;}
.brand-logo img{height:42px; width:auto; display:block;}
.brand-sep{width:1px; height:34px; background:#D9D6CF; flex-shrink:0;}
.brand-blog{font-size:21px; color:#9C9891; text-decoration:none; letter-spacing:.01em; white-space:nowrap;}
.brand-blog:hover{color:var(--ink-soft);}
.brand-spacer{flex:1;}
.search-wrap{position:relative; flex:0 1 250px; display:flex; align-items:center; border:1px solid #D9D6CF; border-radius:3px; background:#fff; padding:0 6px 0 0;}
.search-wrap input{flex:1; min-width:0; padding:7px 8px 7px 12px; border:0; font-family:Georgia,serif; font-size:13px; background:transparent; color:var(--ink); outline:0;}
.search-wrap input::placeholder{color:#A19D95;}
.search-wrap:focus-within{border-color:var(--ink-soft);}
.search-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; background:none; padding:0; color:#6B675F; cursor:pointer;}
.search-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.social{display:flex; align-items:center; gap:14px;}
.social a{display:block; color:#4A4740; line-height:0;}
.social a:hover{color:var(--blue);}
.social svg{width:18px; height:18px; fill:currentColor;}

/* ---------- hero ---------- */
/* --accent lo define cada post (su "color de acento"); si no está, azul institucional. */
.hero{position:relative; padding:56px 4vw 44px calc(4vw + 26px); border-left:26px solid var(--accent, var(--blue)); background:var(--hero-bg);}
.hero .eyebrow{text-transform:uppercase; letter-spacing:0.14em; font-size:12px; color:var(--accent, var(--blue)); font-weight:700; margin-bottom:16px;}
.hero h1{font-size:clamp(28px,3.6vw,44px); line-height:1.16; margin:0 0 18px; max-width:42ch;}
.hero p.lede{color:var(--ink-soft); font-size:16.5px; margin:0;}

/* ---------- layout ---------- */
main{max-width:1240px; margin:0 auto; padding:0 4vw;}
section{padding:26px 0 58px; border-bottom:1px solid var(--line);}   /* poco aire arriba: el encabezado del post ya separa */
section:last-of-type{border-bottom:none;}
.section-marker{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.section-marker .num{background:var(--accent, var(--blue)); color:#fff; font-size:20px; font-weight:700; padding:7px 15px; line-height:1; flex-shrink:0;}
.section-marker .tag{font-variant:small-caps; letter-spacing:0.05em; font-size:15px; color:var(--ink-soft); text-transform:uppercase; font-weight:700;}
h2{font-size:clamp(22px,2.4vw,29px); margin:0 0 14px; font-weight:700;}
.section-intro, .block-p{color:var(--ink); font-size:16px; margin-bottom:22px;}   /* a todo el ancho, como las tarjetas de gráficos */

/* ---------- encabezado del post (dentro del cuerpo; la banda beige es solo de la portada) ---------- */
/* Encabezado del post: número en caja a la izquierda del título; etiqueta,
   título y firma a su derecha; el copete debajo, a todo el ancho. */
.post-head{padding:34px 0 18px; margin-bottom:0; border-bottom:1px solid var(--line);}
.post-head-row{display:flex; align-items:flex-start; gap:20px;}
.post-num{background:var(--accent, var(--blue)); color:#fff; font-size:24px; font-weight:700; padding:8px 16px; line-height:1; flex-shrink:0; margin-top:8px;}
.post-num.num-draft{background:var(--line); color:var(--ink-soft);}
.post-head-main{flex:1; min-width:0;}
.post-head .eyebrow{font-variant:small-caps; text-transform:uppercase; letter-spacing:0.05em; font-size:14px; color:var(--ink-soft); font-weight:700; margin-bottom:2px;}
.post-head .eyebrow a{color:inherit; text-decoration:none;}
.post-head .eyebrow a:hover{color:var(--accent, var(--blue));}
/* Número del post en caja, como los numerales de sección (más grande). */
.post-head h1{font-size:clamp(28px,3.6vw,44px); line-height:1.16; margin:0 0 8px; max-width:42ch;}
.post-head .byline{font-size:13px; color:var(--ink-soft); margin:0;}
.post-head .lede{color:var(--ink-soft); font-size:17px; line-height:1.55; margin:16px 0 0;}

/* ---------- chart card ---------- */
.chart-card{position:relative; background:#fff; border:1px solid var(--line); padding:18px 22px 10px; margin-bottom:28px;}
/* Encabezado de la tarjeta: título y subtítulo a la izquierda, el logo gris
   del Instituto arriba a la derecha (forma parte de la tarjeta, así también
   sale en el PNG). */
.chart-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; min-height:60px;}
.chart-head .chart-titles{flex:1; min-width:0;}
.chart-logo{width:104px; height:auto; flex:0 0 auto; opacity:.9;}   /* apenas más chico */
.chart-card h3{font-size:19px; line-height:1.25; margin:0 0 3px; color:var(--ink); font-weight:700;}   /* título más grande */
.chart-card .sub{font-size:12.5px; color:var(--ink-soft); font-style:italic;}
.chart-note{font-size:11px; color:var(--ink-soft); margin-top:10px; line-height:1.45;}
/* Figura: varios gráficos lado a lado, con título, nota y fuente en común. */
.figure-grid{display:grid; gap:24px; grid-template-columns:1fr;}
.figure-grid.cols-2{grid-template-columns:1fr 1fr;}
.figure-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.figure-panel{min-width:0;}
.figure-panel + .figure-panel{border-left:1px solid var(--line); padding-left:24px;}
.panel-title{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.figure-panel .chart-wrap{height:clamp(220px, 40vw, 320px);}
.chart-wrap{position:relative; height:clamp(240px, 55vw, 380px);}   /* más bajo en pantallas chicas */
.chart-wrap.auto{height:auto !important; min-height:0;}   /* gráficos en SVG/HTML: altura propia */
.chart-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.chart-tools{display:flex; gap:10px; margin-top:12px; font-size:11px;}
.chart-tools button{font:inherit; font-size:11px; color:var(--ink-soft); background:none; border:1px solid var(--line); padding:3px 8px; cursor:pointer; border-radius:2px;}
.chart-tools button:hover{color:var(--blue); border-color:var(--blue);}
.chart-wrap svg{display:block;}
.legend-row{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); margin-bottom:8px;}
.legend-row span{display:inline-flex; align-items:center; gap:5px;}
.legend-row .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.chart-source{font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-top:12px;}   /* fuente más chica */

/* Destacado dentro de la tarjeta del gráfico: la lectura clave, en un recuadro beige. */
.chart-box{background:var(--paper-2); border-left:3px solid var(--accent, var(--blue)); padding:10px 14px; margin:12px 0 4px; font-size:14px; line-height:1.5; color:var(--ink);}
.chart-box p{margin:0 0 6px;}
.chart-box p:last-child{margin:0;}
.chart-box b{color:var(--accent, var(--blue));}

/* ---------- "videos": gráficos con play (carrera de barras, líneas que se dibujan) ---------- */
.race-ctl{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-family:'Courier New',monospace; font-size:12px; color:var(--ink-soft);}
.race-play{width:36px; height:30px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:13px; color:var(--ink); border-radius:3px; flex-shrink:0;}
.race-play:hover{border-color:var(--accent, var(--blue)); color:var(--accent, var(--blue));}
.race-slider{flex:1; min-width:80px; accent-color:var(--accent, var(--blue));}
.race-cur{min-width:5ch; font-weight:700; color:var(--ink);}
.race-speed{font:inherit; font-size:11px; border:1px solid var(--line); background:#fff; padding:3px 4px;}
.race-bars{position:relative; overflow:hidden;}
.race-row{position:absolute; left:0; right:0; height:28px; opacity:0; transition:top .7s ease, opacity .4s;}
.race-bar{height:100%; width:0; min-width:2px; border-radius:0 3px 3px 0; transition:width .7s ease;}
.race-lbl{position:absolute; top:0; left:0; line-height:28px; font-size:12.5px; white-space:nowrap; color:var(--ink); padding-left:8px; transition:left .7s ease, width .7s ease;}
.race-lbl.in{color:#fff; text-align:right; padding-left:0; padding-right:8px; overflow:hidden; text-overflow:ellipsis;}
.race-lbl b{font-weight:700;}
.race-period{position:absolute; right:10px; bottom:2px; font-size:46px; font-weight:700; color:#DAD5C8; line-height:1; pointer-events:none;}
.race-stage{position:relative;}

/* ---------- embed: HTML o dirección en un iframe ---------- */
.embed-frame{width:100%; border:0; display:block; background:#fff;}

/* ---------- callouts ---------- */
.callout{background:var(--paper-2); border-left:3px solid var(--orange); padding:16px 22px; font-size:15px; color:var(--ink); margin:18px 0 28px;}   /* mismo ancho que las tarjetas de gráficos */
.callout.navy{border-left-color:var(--navy);}
.callout.maroon{border-left-color:var(--rust); background:var(--maroon-soft);}

/* ---------- portada: tarjetas resumen de cada post ---------- */
.home-band{background:var(--page-bg); padding:30px 0 52px; border-top:1px solid var(--line);}
.post-list{display:grid; grid-template-columns:1fr; gap:18px;}
.post-card{background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.05); padding:22px 26px 24px;}
.post-card .card-cat{font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.post-card .card-cat a{color:var(--accent, var(--blue)); text-decoration:none;}
.post-card .card-cat a:hover{text-decoration:underline;}
.post-card h2{display:flex; align-items:flex-start; gap:12px; font-size:23px; line-height:1.25; margin:0 0 8px;}
.post-card h2 a{color:var(--ink); text-decoration:none;}
.post-card h2 a:hover{color:var(--accent, var(--blue));}
.post-card .post-num{font-size:15px; padding:5px 10px; margin-top:3px;}
.post-card .card-meta{display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px;}
.post-card .card-meta span{display:inline-flex; align-items:center; gap:5px;}
.post-card .card-meta svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.post-card .card-excerpt{color:var(--ink); font-size:15px; margin:0 0 16px;}
.btn-read{display:inline-block; background:var(--accent, var(--blue)); color:#fff; text-decoration:none; font-size:13.5px; padding:8px 16px; border-radius:4px;}
.btn-read:hover{filter:brightness(1.15);}

/* ---------- pie: banda gris con el logo blanco y el texto legal ---------- */
footer.site-foot{background:#595959; color:#fff; padding:28px 4vw 24px; margin-top:0;}   /* pegado al contenido, sin franja blanca */
.foot-inner{display:flex; align-items:center; gap:32px; max-width:1240px; margin:0 auto;}
.foot-logo{height:104px; width:auto; flex:0 0 auto; display:block;}
.foot-legal{font-family:'Helvetica Neue',Arial,sans-serif; font-size:12.5px; line-height:1.5; margin:0; color:#fff;}
.foot-admin{max-width:1240px; margin:14px auto 0; font-size:12px; color:#D5D5D5; font-family:'Helvetica Neue',Arial,sans-serif;}
.foot-admin a{color:#fff;}

mark.search-hit{background:var(--orange-soft); color:var(--ink); border-radius:1px;}
mark.search-hit.current{background:var(--orange);}
.search-count{font-size:11px; color:var(--ink-soft); position:absolute; right:8px; top:50%; transform:translateY(-50%);}

/* ---------- firma, compartir y comentarios ---------- */
/* Compartir: el logo de cada red en un círculo; "copiar link" con ícono y texto. */
.share{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); padding:18px 0 0; margin-top:28px; border-top:1px solid var(--line);}
.share > span{margin-right:4px;}
.share a, .share button{display:inline-flex; align-items:center; justify-content:center; gap:6px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; padding:0; cursor:pointer; transition:color .12s, border-color .12s;}
.share svg{width:16px; height:16px; fill:currentColor; display:block;}
.share svg.stroke{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.share a:hover, .share button:hover{color:var(--blue); border-color:var(--blue);}
.share a[data-net=x]:hover{color:#000; border-color:#000;}
.share a[data-net=linkedin]:hover{color:#0A66C2; border-color:#0A66C2;}
.share a[data-net=whatsapp]:hover{color:#1DA851; border-color:#1DA851;}
.share .copy-link{width:auto; padding:0 12px 0 10px; border-radius:17px; font:inherit; font-size:12px; color:var(--ink);}
.comments h2{display:flex; align-items:baseline; gap:10px;}
.comments h2 .count{font-size:15px; font-weight:400; color:var(--ink-soft);}
.comments-intro{font-size:14px; color:var(--ink-soft); max-width:80ch; margin:0 0 18px;}
/* Todos los comentarios con el mismo fondo gris claro; las respuestas, adentro y un poco más claras. */
.comment{background:#F5F4F1; border:1px solid var(--line); padding:14px 18px 12px; margin-bottom:12px; border-radius:2px;}
.comment.reply{margin:10px 0 0 32px; background:#FBFAF8; border-left:3px solid var(--line);}
.comment.pending{background:#FFF8E6;}
.comment-head{font-size:12.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.comment-head b{color:var(--ink); font-size:14.5px;}
.badge{font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:1px 7px; border:1px solid var(--accent, var(--blue)); color:var(--accent, var(--blue)); border-radius:10px;}
.badge.pending{border-color:#B8860B; color:#8A6508;}
.comment-body{font-size:15px; max-width:80ch; margin-top:6px;}
.comment-body p{margin:0 0 8px;}
.comment-actions{display:flex; gap:14px; font-size:12px; margin-top:2px;}
.linklike{font:inherit; font-size:12px; color:var(--blue); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline;}
.linklike.danger{color:var(--rust);}
form.inline{display:inline;}
.comment-form{margin-top:28px; padding-top:22px; border-top:2px solid var(--line);}   /* ancho completo */
.comment-form label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px;}
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea{display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--line); font:inherit; font-size:15px; background:#fff; color:var(--ink);}
.comment-form textarea{resize:vertical; min-height:130px;}   /* se estira arrastrando la esquina */
.comment-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.comment-form .hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
.btn-comment{background:var(--accent, var(--blue)); color:#fff; border:0; padding:10px 18px; font:inherit; font-size:14px; cursor:pointer;}
.replying{font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.flash{padding:10px 14px; margin-bottom:16px; font-size:14px;}
.flash.ok{background:#DCEFE0; color:#1B6B33;}
.flash.error{background:#F3E7E4; color:#A63D2F;}

@media (max-width:860px){
  .brand-bar{flex-wrap:wrap; padding:10px 4vw; gap:12px;}
  .brand-logo img{height:34px;}
  .search-wrap{flex:1 1 100%; order:9;}
  .hero{padding-left:6vw; border-left-width:14px;}
  .post-head-row{gap:12px;}
  .post-num{font-size:18px; padding:6px 11px; margin-top:4px;}
  .post-card{padding:18px 16px 20px;}
  .foot-inner{flex-direction:column; align-items:flex-start; gap:18px;}
  .foot-logo{height:80px;}
  .chart-logo{width:80px;}
  .figure-grid.cols-2, .figure-grid.cols-3{grid-template-columns:1fr;}
  .figure-panel + .figure-panel{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:16px;}
  .comment-form .row{grid-template-columns:1fr;}
  .comment.reply{margin-left:12px;}
}