:root{
  --navy:#0a1633; --navy2:#101f45; --red:#e63229; --red2:#b91f18;
  --white:#ffffff; --ink:#161616; --mut:#5b6472; --line:#e6e8ee; --bg:#f5f6f9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
h1,h2,h3,.anton{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.12}

/* ======= MASTHEAD ======= */
.topbar{background:var(--navy);color:#fff;font-size:12.5px;padding:7px 0;letter-spacing:.3px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.topbar .date{opacity:.75}
.topbar .social a{margin-left:14px;opacity:.85;font-weight:600}
.topbar .social a:hover{opacity:1;color:#ff8a80}
.masthead{background:linear-gradient(rgba(7,13,32,.45),rgba(7,13,32,.62)),url('img/header-bg.jpg') center 30%/cover no-repeat,var(--navy);padding:36px 0 30px;border-bottom:5px solid var(--red)}
.masthead .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{background:#fff;border-radius:12px;padding:10px 18px;display:inline-block;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.brand img{height:92px;width:auto}
.brand-tag{color:#fff;border-left:3px solid var(--red);padding-left:16px}
.brand-tag strong{display:block;font-family:'Anton',sans-serif;font-size:21px;letter-spacing:1.5px}
.brand-tag span{font-size:13px;opacity:.72;letter-spacing:.4px}
nav.mainnav{background:#070d20;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.35)}
nav.mainnav .wrap{display:flex;gap:4px;overflow-x:auto;padding:0 18px}
nav.mainnav a{color:#dfe4f2;font-weight:700;font-size:14px;letter-spacing:.8px;text-transform:uppercase;padding:14px 16px;white-space:nowrap;border-bottom:3px solid transparent}
nav.mainnav a:hover,nav.mainnav a.on{color:#fff;border-bottom-color:var(--red);background:rgba(230,50,41,.12)}
.ticker{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;font-size:14px;font-weight:600}
.ticker .tk{display:inline-block;padding:9px 0;animation:tick 28s linear infinite}
.ticker b{background:#070d20;padding:9px 16px;margin-right:18px;letter-spacing:1px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ======= AD SLOTS (invisibles hasta pegar código AdSense) ======= */
.ad-slot{display:none}
.ad-slot.filled{display:block;margin:26px auto;text-align:center;overflow:hidden}

/* ======= HERO ======= */
.hero{padding:30px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:22px}
.hero-main{position:relative;border-radius:14px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;background:#000;box-shadow:0 12px 34px rgba(7,13,32,.28)}
.hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,20,0) 30%,rgba(5,8,20,.55) 62%,rgba(5,8,20,.94) 100%)}
.hero-txt{position:relative;z-index:2;padding:30px;color:#fff}
.kicker{display:inline-block;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;padding:6px 14px;border-radius:4px;margin-bottom:14px;box-shadow:0 4px 14px rgba(230,50,41,.5)}
.kicker.live::before{content:"● ";animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.hero-txt h1{font-size:clamp(30px,4.4vw,52px);color:#fff;text-transform:uppercase;text-shadow:0 3px 18px rgba(0,0,0,.6);margin-bottom:12px}
.hero-txt p{font-size:16.5px;opacity:.92;max-width:640px}
.hero-txt .meta{margin-top:14px;font-size:13px;opacity:.75;letter-spacing:.4px}
.hero-side{display:flex;flex-direction:column;gap:18px}
.side-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(7,13,32,.12);border-top:4px solid var(--red);flex:1;display:flex;flex-direction:column}
.side-card img{height:150px;object-fit:cover;width:100%}
.side-card .pad{padding:16px 18px}
.side-card h3{font-size:19px;text-transform:uppercase;margin:8px 0 6px}
.side-card h3:hover{color:var(--red2)}
.side-card p{font-size:14px;color:var(--mut)}
.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}
.meta{font-size:12.5px;color:var(--mut);letter-spacing:.3px}

/* ======= SECTIONS ======= */
.section{padding:34px 0 6px}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-head h2{font-size:clamp(24px,3vw,34px);text-transform:uppercase;letter-spacing:1px}
.sec-head .rule{flex:1;height:4px;background:linear-gradient(90deg,var(--red),transparent);border-radius:2px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(7,13,32,.10);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(7,13,32,.20)}
.card .ph{height:190px;background:linear-gradient(135deg,var(--navy2),#1b2f6b);position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Anton';font-size:64px;color:rgba(255,255,255,.16);letter-spacing:2px}
.card .pad{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:20px;text-transform:uppercase;margin:8px 0 8px}
.card h3:hover{color:var(--red2)}
.card p{font-size:14.5px;color:var(--mut);flex:1}
.card .meta{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* ======= ARTICLE ======= */
.article{background:#fff;max-width:820px;margin:30px auto;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(7,13,32,.12)}
.article .a-hero{max-height:460px;overflow:hidden;background:#000}
.article .a-hero img{width:100%;height:100%;object-fit:cover}
.article .a-body{padding:34px 38px}
.article h1{font-size:clamp(28px,4vw,44px);text-transform:uppercase;margin:12px 0 10px}
.article .a-meta{color:var(--mut);font-size:13.5px;margin-bottom:22px;letter-spacing:.3px}
.article .a-body p{font-size:17.5px;margin-bottom:20px;color:#232323}
.article .a-body p.lead{font-size:20px;font-weight:600;color:var(--navy)}
.share{display:flex;gap:10px;margin:26px 0;flex-wrap:wrap}
.share a{background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:8px;letter-spacing:.4px}
.share a:hover{background:var(--red)}
.related{background:var(--bg);border-radius:12px;padding:22px;margin-top:8px}
.related h3{font-size:20px;text-transform:uppercase;margin-bottom:14px;color:var(--navy)}
.related a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600}
.related a:hover{color:var(--red2)}
.back{display:inline-block;margin:26px 0 40px;color:var(--red2);font-weight:700}

/* ======= PAGES ======= */
.page{background:#fff;max-width:820px;margin:30px auto;border-radius:14px;padding:38px;box-shadow:0 10px 30px rgba(7,13,32,.12)}
.page h1{font-size:clamp(28px,4vw,40px);text-transform:uppercase;margin-bottom:18px;color:var(--navy)}
.page h2{font-size:20px;margin:26px 0 10px;color:var(--navy);font-family:'Inter';font-weight:800;letter-spacing:0}
.page p{font-size:16.5px;margin-bottom:16px;color:#2a2a2a}
.page ul{margin:0 0 16px 22px;font-size:16.5px}

/* ======= FOOTER ======= */
footer{background:#070d20;color:#cfd6ea;margin-top:50px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:44px 0 30px}
footer h4{color:#fff;font-family:'Anton';letter-spacing:1.2px;font-size:18px;margin-bottom:14px;text-transform:uppercase}
footer h4 i{color:var(--red);font-style:normal}
footer p,footer a{font-size:14.5px}
footer a{display:block;padding:5px 0;opacity:.85}
footer a:hover{opacity:1;color:#ff8a80}
.fbottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;opacity:.75}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr}
  .brand img{height:58px}
  .article .a-body,.page{padding:24px 20px}
}

/* ======= HOUSE ADS (Mr Cat Advertising como patrocinador) ======= */
.house-ad{display:block;position:relative;overflow:hidden;margin:26px auto;max-width:970px;color:#fff;border-radius:10px;
  background:linear-gradient(135deg,#0c0c0e 0%,#050506 60%);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .15s ease;text-decoration:none}
.house-ad::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(440px 210px at 16% 50%,rgba(11,95,255,.17),transparent 70%)}
.house-ad:hover{transform:translateY(-2px)}
.house-leaderboard{display:flex;align-items:center;gap:26px;padding:28px 36px}
.ha-badge{position:relative;flex:none;width:98px;height:98px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#000;
  border:1px solid rgba(255,255,255,.14)}
.ha-badge img{height:66px;width:auto}
.ha-txt{position:relative;flex:1;min-width:0}
.ha-brand{display:block;font-size:11px;font-weight:700;letter-spacing:4px;color:#5b8cff;margin-bottom:9px}
.ha-txt strong{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(20px,2.6vw,29px);letter-spacing:.5px;line-height:1.18;color:#fff}
.ha-txt strong em{color:#5b8cff;font-style:normal}
.ha-sub{display:block;margin-top:9px;font-size:13px;color:#8b93a5;letter-spacing:.5px}
.ha-cta{position:relative;flex:none;font-size:12.5px;font-weight:700;letter-spacing:2px;color:#fff;
  border:1px solid rgba(91,140,255,.55);border-radius:999px;padding:14px 28px;white-space:nowrap;transition:background .15s ease}
.house-ad:hover .ha-cta{background:rgba(11,95,255,.92);border-color:transparent}
.ha-tag{position:absolute;top:12px;right:18px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);z-index:2}
.house-native{border-top:1px solid rgba(47,123,255,.4) !important}
.house-native .hn-img{background:radial-gradient(340px 160px at 50% 45%,rgba(11,95,255,.20),transparent 70%),#08080a;display:flex;justify-content:center;padding:30px 18px 24px}
.house-native .hn-img img{height:88px;width:auto}
.house-native .ha-cta2{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:2px;color:#fff;background:var(--navy);
  border:1px solid var(--navy);border-radius:999px;padding:12px 24px}
.house-inarticle{display:flex;align-items:center;gap:22px;padding:24px 30px;margin:26px 0}
.house-inarticle .ha-badge{width:74px;height:74px}
.house-inarticle .ha-badge img{height:50px}
.house-inarticle .ha-txt strong{font-size:clamp(17px,2.2vw,22px)}
@media(max-width:900px){
  .house-leaderboard{flex-direction:column;text-align:center;gap:16px;padding:34px 24px 30px}
  .ha-tag{position:static;order:-1;align-self:center;margin:0}
  .house-inarticle{flex-direction:column;text-align:center;gap:14px;padding:30px 22px}
  .house-inarticle .ha-tag{position:static;order:-1}
}

/* ======= CLIMA ======= */
.wx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.wx-card{background:#fff;border-radius:12px;padding:16px 12px;text-align:center;box-shadow:0 6px 18px rgba(7,13,32,.10);border-top:4px solid var(--navy)}
.wx-card.wx-here{border-top:4px solid var(--red);background:linear-gradient(180deg,#fff 60%,#ffe9e7)}
.wx-card .wx-city{font-weight:800;font-size:13.5px;letter-spacing:.3px}
.wx-card .wx-ico{font-size:34px;margin:8px 0 4px}
.wx-card .wx-temp{font-family:'Anton',sans-serif;font-size:26px;color:var(--navy)}
.wx-card .wx-desc{font-size:12px;color:var(--mut)}
.wx-note{font-size:12.5px;color:var(--mut);margin-top:12px}
@media(max-width:900px){
  .wx-grid{grid-template-columns:repeat(3,1fr)}
  .house-leaderboard{flex-wrap:wrap;justify-content:center;text-align:center}
  .ha-tag{position:static;margin-bottom:6px}
}
@media(max-width:560px){.wx-grid{grid-template-columns:repeat(2,1fr)}}

.fdisclaimer{max-width:1200px;margin:14px auto 0;padding:0 22px 18px;font-size:12px;line-height:1.6;color:#7c8494}