/* Blog Colombia SOStenible. Base: maqueta v2 aprobada (2026-11-08). Solo tema claro. */
/* Fuentes alojadas en el sitio (OFL, ver /estatico/fuentes/OFL.txt). Sin Google Fonts. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/estatico/fuentes/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/estatico/fuentes/newsreader-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/estatico/fuentes/instrument-sans-latin.woff2) format("woff2")}
:root{color-scheme:light;--p:#F2EFE8;--i:#18261F;--m:#5E6A62;--l:#D8D3C7;--pino:#1F4D3A;--ter:#9B4F33;--serif:"Newsreader",Georgia,serif;--sans:"Instrument Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--p);color:var(--i);font:400 18px/1.62 var(--sans)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none;cursor:pointer}

/* Encabezado (dirección A) */
header{padding:22px 40px 0;text-align:center}
.marca{display:inline-flex;align-items:center;justify-content:center;gap:15px}
.marca img{width:64px;height:64px;flex:none}
.marca .sello-reducido{display:none}
.marca span{font:400 38px/1 var(--serif);letter-spacing:-.012em}
.lema{margin:8px 0 0;font:italic 400 18px/1.3 var(--serif);color:var(--m)}
header nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin-top:18px;padding:13px 0;border-top:1px solid var(--i);border-bottom:1px solid var(--l);font:500 13.5px/1.2 var(--sans)}
header nav a:hover,header nav a[aria-current]{color:var(--ter)}

/* Presentación (dirección C) */
.heroe{position:relative;display:block;margin:18px 16px 0;height:580px;overflow:hidden;border-radius:6px;background:#3b4a43}
.heroe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,17,.28) 0%,rgba(10,22,17,.08) 22%,rgba(10,22,17,.62) 58%,rgba(10,22,17,.9) 100%)}
.heroe.sinimg{height:420px;background:var(--pino)}
.heroe .txt{position:absolute;z-index:2;left:40px;right:40px;bottom:36px;color:#fff;max-width:940px}
.heroe .lab{color:#F1D9B8}
.heroe h1{font:400 58px/1.05 var(--serif);letter-spacing:-.018em;margin:12px 0 12px}
.heroe p{font-size:18px;line-height:1.42;margin:0;max-width:680px;opacity:.94}
.cred{position:absolute;z-index:2;right:12px;top:10px;color:#fff;font-size:11px;opacity:.85}
.lab{font:600 12px/1.2 var(--sans);letter-spacing:.015em;color:var(--ter)}
.meta{font-size:13px;line-height:1.3;color:var(--m)}
main{padding:38px 40px 48px;max-width:1280px;margin:0 auto}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ph{aspect-ratio:4/3;border-radius:4px;margin-bottom:13px;overflow:hidden;background:#cfd4cf}
.sinfoto{background:var(--pino);color:#EFEAE0;border-radius:4px;aspect-ratio:4/3;margin-bottom:13px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.sinfoto b{font:300 62px/1 var(--serif);letter-spacing:-.02em}
.sinfoto span{font-size:13px;line-height:1.3;margin-top:8px;opacity:.88}
.rejilla h2,.rejilla h3{font:400 27px/1.14 var(--serif);letter-spacing:-.01em;margin:8px 0 8px}
.rejilla a:hover h2,.rejilla a:hover h3,.heroe:hover h1{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.heroe-art:hover h1{text-decoration:none}
.invita{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:38px;padding:28px 32px;background:var(--pino);color:#EFEAE0;border-radius:6px}
.invita strong{font:400 30px/1.14 var(--serif);letter-spacing:-.01em}
.invita a{background:#EFEAE0;color:var(--pino);padding:12px 17px;border-radius:3px;font-weight:600;font-size:14px;white-space:nowrap}

/* Secciones de listas */
.seccion{font:400 30px/1.14 var(--serif);letter-spacing:-.01em;margin:0 0 6px;padding-top:14px;border-top:1px solid var(--i)}
.mas{margin-top:46px}
.lista{list-style:none;margin:0;padding:0}
.item a{display:block;padding:18px 0;border-bottom:1px solid var(--l)}
.item h3{font:400 23px/1.2 var(--serif);letter-spacing:-.008em;margin:6px 0 4px}
.item p{margin:0 0 6px;font-size:16px;line-height:1.45;color:#27352E}
.item a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.paginas{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-weight:600;font-size:14px;color:var(--pino)}
.paginas a:last-child{margin-left:auto}
.titulo-pag h1{font:400 46px/1.08 var(--serif);letter-spacing:-.016em;margin:0 0 28px}
.vacio{font:400 23px/1.36 var(--serif);color:var(--m);margin:0}
.relacionados{margin-top:56px}
.relacionados .rejilla{margin-top:20px}

/* Artículo */
.portadilla{margin:0}
.heroe-art{height:520px}
.credito{margin:6px 16px 0;text-align:right;font-size:12px;line-height:1.35;color:var(--m)}
.credito a{text-decoration:underline;text-underline-offset:2px}
.art{max-width:700px;margin:0 auto;overflow-wrap:break-word}
.cabeza h1{font:400 46px/1.08 var(--serif);letter-spacing:-.016em;margin:10px 0 16px}
.art .dek{font:400 23px/1.36 var(--serif);margin:0 0 8px}
.firma{margin:0 0 22px;font-size:13px;line-height:1.3;color:var(--m)}
.art p,.art li{color:#27352E}
.art h2{font:400 33px/1.12 var(--serif);letter-spacing:-.012em;margin:36px 0 8px}
.art h3{font:400 25px/1.18 var(--serif);margin:28px 0 6px}
.art ul,.art ol{padding-left:22px}
.art li{margin-bottom:7px}
.art p a,.art li a{color:var(--pino);text-decoration:underline;text-underline-offset:3px}
.art img{height:auto;border-radius:4px}
.art blockquote{margin:22px 0;padding-left:18px;border-left:3px solid var(--ter);font:italic 400 21px/1.4 var(--serif)}
.fuentes{display:block;margin-top:34px;padding-top:14px;border-top:1px solid var(--i);font-size:14px}
.fuentes a{text-decoration:underline;text-underline-offset:3px}
.volver{display:inline-block;margin-top:24px;font-weight:600;font-size:14px;color:var(--pino)}

/* Video: miniatura local; el reproductor se carga solo al hacer clic */
.video{position:relative;aspect-ratio:16/9;margin:26px 0;border-radius:4px;overflow:hidden;background:#cfd4cf}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:0;border-radius:50%;background:var(--pino);color:#EFEAE0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.video-play:hover,.video-play:focus-visible{background:var(--ter)}

footer{padding:22px 40px;border-top:1px solid var(--l);font-size:13px;line-height:1.45;color:var(--m);text-align:center}
footer a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:820px){
 header{padding:16px 16px 0}
 .marca{gap:10px}
 .marca .sello{display:none}
 .marca .sello-reducido{display:block;width:46px;height:46px}
 .marca span{font-size:25px}
 header nav{gap:6px 16px;font-size:13px}
 .heroe{height:480px;margin:12px 8px 0}
 .heroe.sinimg{height:380px}
 .heroe h1{font-size:35px}
 .heroe p{font-size:16px}
 .heroe .txt{left:18px;right:18px;bottom:20px}
 main{padding:26px 16px 36px}
 .rejilla{grid-template-columns:1fr;gap:26px}
 .invita{grid-template-columns:1fr;padding:22px 20px}
 .invita strong{font-size:26px}
 .invita a{justify-self:start}
 .titulo-pag h1,.cabeza h1{font-size:34px}
 .seccion{font-size:26px}
 .credito{margin:6px 8px 0}
 footer{padding:20px 16px}
}