
:root{--negro:#171717;--rojo:#DC0000;--fondo:#FCFCFC;--texto:#333;--gris:#6b6b6b;--linea:#e4e4e4;--azul:#1a5bc4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:#111;font-family:"Work Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.titular,.t{font-family:"Playfair Display",Georgia,serif;font-variant-numeric:lining-nums;font-weight:400;letter-spacing:-.012em;color:#222}
.geo{font-family:Georgia,serif}
.cab{background:var(--negro);height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;position:sticky;top:0;z-index:10}
.cab .logo-svg{height:46px;width:auto;display:block}
.cab .izq{color:#fff;display:flex;gap:18px;font-size:19px}
.cab .der{justify-self:end;display:flex;gap:12px;align-items:center}
.btn{background:var(--rojo);color:#fff;font:500 14px/21px "Work Sans";padding:9px 16px;border-radius:6px;white-space:nowrap}
.btn .c{display:none}
.nav{background:var(--negro);border-top:1px solid #2c2c2c;display:flex;justify-content:center;gap:28px;padding:13px 16px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#fff;font:500 16px "Work Sans";white-space:nowrap;opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.cont{max-width:1200px;margin:0 auto;padding:0 20px}
.trend{display:flex;gap:26px;align-items:center;padding:15px 0;white-space:nowrap;overflow-x:auto;scrollbar-width:none;font:400 15px "Work Sans";color:#333;border-bottom:1px solid var(--linea)}
.trend::-webkit-scrollbar{display:none}
.trend b{color:var(--azul);font-weight:600;font-size:12.5px;letter-spacing:.05em}
.trend a:hover{text-decoration:underline}
.ed{padding:12px 0 18px;font:500 15px "Work Sans"}
.etq{font:600 11.5px/18px "Work Sans";text-transform:uppercase;letter-spacing:.04em;color:#444;margin:12px 0 4px;display:block}
.etq.r{color:var(--rojo)}
.por{font:400 12.5px "Work Sans";color:#666}.por b{color:#111;font-weight:500}
.rej{display:grid;grid-template-columns:270px 1fr 280px;gap:26px}
.ci{border-right:1px solid var(--linea);padding-right:20px}
.cd{border-left:1px solid var(--linea);padding-left:20px}
.boletin{border:1px solid var(--linea);background:#fff;border-radius:6px;padding:18px}
.boletin h3{font:400 23px/1.2 "Playfair Display",serif;margin:0 0 8px}
.boletin p{font:400 14px/1.5 "Work Sans";margin:0 0 12px;color:#333}
.boletin .f{display:flex;gap:6px}.boletin .f span{flex:1;border:1px solid #ccc;border-radius:4px;padding:8px 10px;font-size:13px;color:#888}.boletin .f b{background:var(--negro);color:#fff;border-radius:4px;padding:8px 12px;font:500 13px "Work Sans"}
.pest{display:flex;gap:18px;margin:26px 0 6px;font:500 16px "Work Sans"}
.pest span:first-child{border-bottom:3px solid var(--rojo);padding-bottom:6px}
.pop{list-style:none;margin:0;padding:0}
.pop li{border-bottom:1px solid var(--linea)}
.pop a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:12px 0;font:400 14.5px/1.4 "Work Sans";color:#222}
.pop b{color:var(--rojo);font:600 17px "Work Sans"}
.pop a:hover span{text-decoration:underline}
.portada .foto{aspect-ratio:16/10;background:#ddd center/cover}
.portada h1{font-size:42px;line-height:1.14;margin:6px 0 10px}
.portada .dek{font:400 18px/1.6 Georgia,serif;color:#333;margin:0 0 10px}
.portada a:hover h1{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.lat{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--linea)}
.lat .foto{aspect-ratio:16/10;background:#ddd center/cover}
.lat h4{font:400 18px/1.4 Georgia,serif;color:#222;margin:4px 0 6px}
.lat a:hover h4{text-decoration:underline}
.bloque{margin-top:52px}
.bloque>header{display:flex;align-items:baseline;justify-content:space-between;border-top:3px solid var(--negro);padding-top:12px;margin-bottom:18px}
.bloque>header h2{font:400 30px/1.1 "Playfair Display",serif;margin:0}
.bloque>header a{font:500 13px "Work Sans";color:#555}
.cuatro{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tarj .foto{aspect-ratio:4/3;background:#ddd center/cover}
.tarj h3{font:400 20px/1.3 "Playfair Display",serif;font-variant-numeric:lining-nums;margin:4px 0 8px;color:#222}
.tarj p{font:400 14.5px/1.5 Georgia,serif;color:#444;margin:0 0 6px}
.tarj a:hover h3{text-decoration:underline;text-underline-offset:4px}
.guias{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.guia a{display:grid;grid-template-columns:56px 1fr 120px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--linea)}
.guia .n{font:400 46px/1 "Playfair Display",serif;color:var(--rojo);font-variant-numeric:lining-nums}
.guia h3{font:400 20px/1.3 "Playfair Display",serif;margin:2px 0 0;color:#222}
.guia .foto{aspect-ratio:4/3;background:#ddd center/cover}
.guia a:hover h3{text-decoration:underline}
.banda{background:var(--negro);color:#fff;margin-top:56px;padding:44px 0 50px}
.banda .bloque{margin-top:0}
.banda .bloque>header{border-top-color:#fff}
.banda .bloque>header h2,.banda .tarj h3{color:#fff}.banda .tarj p{color:#cfcfcf}.banda .etq{color:#ff5a5a}.banda .por{color:#aaa}.banda .por b{color:#fff}.banda .bloque>header a{color:#bbb}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.lista-simple a{display:block;padding:14px 0;border-bottom:1px solid var(--linea)}
.lista-simple h3{font:400 19px/1.35 Georgia,serif;margin:2px 0 0;color:#222}
.lista-simple a:hover h3{text-decoration:underline}
.suscribe{background:var(--rojo);color:#fff;margin-top:56px;padding:40px 0}
.suscribe .cont{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.suscribe h2{font:400 36px/1.15 "Playfair Display",serif;margin:0 0 8px}
.suscribe p{font:400 17px/1.5 Georgia,serif;margin:0;opacity:.95}
.suscribe .f{display:flex;gap:8px}.suscribe .f span{flex:1;background:#fff;color:#888;border-radius:6px;padding:14px;font:400 15px "Work Sans"}.suscribe .f b{background:var(--negro);border-radius:6px;padding:14px 20px;font:600 15px "Work Sans"}
.pie{background:var(--negro);color:#bbb;padding:40px 0 60px;margin-top:0;font:400 13.5px/1.7 "Work Sans"}
.pie .logo-svg{height:34px;width:auto;margin-bottom:14px}
.pie .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.pie h5{color:#fff;font:600 13px "Work Sans";text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.pie .nota{border-top:1px solid #333;margin-top:28px;padding-top:16px;color:#888;font-size:12.5px}
/* artículo */
.art{max-width:760px;margin:0 auto;padding:30px 20px 10px}
.art .etq{margin-top:0}
.art h1{font-size:46px;line-height:1.12;margin:6px 0 14px}
.art .dek{font:400 20px/1.55 Georgia,serif;color:#333;margin:0 0 16px}
.art .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 13px "Work Sans";color:#666;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:12px 0;margin-bottom:22px}
.art .meta b{color:#111;font-weight:600}
.art figure{margin:0 0 26px}
.art figure .foto{aspect-ratio:16/9;background:#ddd center/cover}
.art figcaption{font:400 12.5px "Work Sans";color:#777;margin-top:6px}
.claves{border-left:4px solid var(--rojo);background:#fff;padding:14px 18px;margin:0 0 26px;box-shadow:0 1px 0 var(--linea)}
.claves h2{font:600 12px "Work Sans";text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;color:var(--rojo)}
.claves ul{margin:0;padding-left:18px;font:400 16px/1.55 Georgia,serif}
.claves li{margin:4px 0}
.cuerpo p{font:400 19px/1.72 Georgia,serif;color:#222;margin:0 0 20px}
.cuerpo h2{font:400 29px/1.2 "Playfair Display",serif;margin:34px 0 12px;color:#111}
.cuerpo ul{font:400 18.5px/1.65 Georgia,serif;color:#222;padding-left:22px;margin:0 0 22px}
.cuerpo li{margin:6px 0}
.cita{border-top:3px solid var(--negro);border-bottom:1px solid var(--linea);margin:30px 0;padding:18px 0 20px;font:italic 400 28px/1.3 "Playfair Display",serif;color:#111}
.cita:before{content:"“";color:var(--rojo);font-size:54px;line-height:0;vertical-align:-18px;margin-right:4px}
.fuentes{margin-top:30px;border-top:1px solid var(--linea);padding-top:14px;font:400 13.5px/1.6 "Work Sans";color:#555}
.fuentes h3{font:600 12px "Work Sans";text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px;color:#333}
.fuentes a{color:var(--azul)}
.anuncio{margin:34px 0 0;border:1px solid var(--linea);background:#fff;border-radius:8px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.anuncio small{font:600 10.5px "Work Sans";text-transform:uppercase;letter-spacing:.1em;color:#888}
.anuncio b{display:block;font:500 17px/1.35 "Work Sans";margin:3px 0 2px}
.anuncio span{font:400 14px "Work Sans";color:#555}
.anuncio i{font-style:normal;background:#2fa82f;color:#fff;border-radius:6px;padding:10px 14px;font:600 14px "Work Sans";white-space:nowrap}
.sigue{max-width:1200px;margin:40px auto 60px;padding:0 20px}
@media(max-width:1000px){
 .rej{grid-template-columns:1fr}.ci,.cd{border:0;padding:0}.ci{order:3}.cd{order:2}
 .cuatro{grid-template-columns:1fr 1fr}.tres{grid-template-columns:1fr}.guias{grid-template-columns:1fr}.dos-col{grid-template-columns:1fr}
 .suscribe .cont{grid-template-columns:1fr}.pie .cols{grid-template-columns:1fr}
}
@media(max-width:640px){
 .cab{height:58px;padding:0 12px;grid-template-columns:40px 1fr auto}.cab .izq span+span{display:none}.cab .logo-svg{height:26px;margin:0 auto}
 .btn{padding:7px 11px;font-size:13px}.btn .l{display:none}.btn .c{display:inline}
 .nav{justify-content:flex-start;gap:20px;padding:12px 14px}.nav a{font-size:15px}
 .cont{padding:0 14px}
 .portada h1{font-size:30px}.portada .dek{font-size:17px}
 .cuatro{grid-template-columns:1fr}.tarj a{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start}.tarj .etq{margin-top:0}.tarj .foto{aspect-ratio:1/1}.tarj h3{font-size:17px}.tarj p{display:none}
 .guia a{grid-template-columns:40px 1fr 88px;gap:12px}.guia .n{font-size:34px}.guia h3{font-size:17px}
 .bloque>header h2{font-size:24px}
 .art h1{font-size:32px}.art .dek{font-size:18px}.cuerpo p{font-size:18px}.cuerpo h2{font-size:24px}.cita{font-size:23px}
 .suscribe h2{font-size:28px}.suscribe .f{flex-direction:column}
 .anuncio{grid-template-columns:1fr}
}
