/* ============================================================
   FOLHA DE PATROCÍNIO (.com) — Redesign v2 (03/09/2026)
   Carregado DEPOIS do style.css. Só acrescenta e sobrescreve o
   necessário: manchete dupla, grade com foto, miniatura em toda
   lista, ticker, cabeçalho de vidro, menu em faixa verde,
   publicidade (billboard, faixa fixa), cookies, revelação.
   Paleta clara intacta; escuro usa os tokens que o tema já tem.
   ============================================================ */
:root{
  --brand-soft:#E7EFEE;
  --ed-cultura:#6E4A9E; --ed-nacional:#1F5FA8;
  --nav-bg:#0A3F3D; --bar-bg:#072E2C; --on-bar:rgba(255,255,255,.84);
  --glass:rgba(255,255,255,.72); --glass-line:rgba(10,63,61,.12); --glass-soft:rgba(231,239,238,.65);
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:120px;
}
[data-theme="dark"]{
  --brand-soft:#123331;
  --ed-cultura:#B79BE8; --ed-nacional:#7EB3E8;
  --nav-bg:#0F2E2C; --bar-bg:#041412; --on-bar:#C9D6D4;
  --glass:rgba(18,23,22,.74); --glass-line:rgba(111,192,184,.20); --glass-soft:rgba(18,51,49,.55);
}

/* ---------- barra superior ---------- */
.utility{background:var(--bar-bg);color:var(--on-bar);font-size:.75rem}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;padding-top:5px;padding-bottom:5px}
.utility-left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.utility a{opacity:.9;font-weight:600}
.utility a:hover,.utility a:focus-visible{opacity:1;text-decoration:underline}
@media(max-width:720px){.utility-links{display:none}}

/* ---------- cabeçalho de vidro ---------- */
.site-header{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--glass-line);transition:box-shadow .35s var(--ease)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(10,63,61,.10)}
.logo-wrap{font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}
.header-tools{gap:8px;position:relative}
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 6px 0 14px;min-width:230px;height:40px;color:var(--ink-soft)}
.search-box:focus-within{border-color:var(--brand)}
.search-box svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;opacity:.6}
.search-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;height:100%;outline:none}
.search-box input::placeholder{color:var(--ink-soft)}
.search-box button{border:0;background:var(--brand);color:#fff;border-radius:999px;height:28px;padding:0 12px;font-size:.78rem;font-weight:700;cursor:pointer}
.search-toggle{display:none}
.tool-btn .ico-sun{display:none}
[data-theme="dark"] .tool-btn .ico-sun{display:block}
[data-theme="dark"] .tool-btn .ico-moon{display:none}
@media(max-width:720px){
  .search-box{display:none;position:absolute;right:0;top:calc(100% + 6px);width:min(92vw,360px);z-index:120;box-shadow:var(--shadow)}
  .site-header.search-open .search-box{display:flex}
  .search-toggle{display:grid}
}

/* ---------- menu em faixa verde ---------- */
.main-nav{background:var(--nav-bg);border-top:0}
.nav-link{color:rgba(255,255,255,.88);text-transform:none;letter-spacing:.01em;font-size:.86rem;border-bottom-width:2px;padding:11px 14px}
.nav-link:hover,.nav-link:focus-visible,.nav-link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.06);border-bottom-color:var(--accent)}
.nav-link[aria-current="page"]{border-bottom-color:var(--accent);color:#fff}
.nav-link--live{color:var(--accent)}
.live-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(213,175,79,.25)}
.nav-link:focus-visible{outline-color:var(--accent)}

/* ---------- ticker ---------- */
.ticker{position:sticky;top:var(--header-h);z-index:90;background:var(--glass-soft);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--glass-line);padding:6px 0;overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:12px;overflow:hidden}
.ticker-label{flex:none;display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.ticker-label .live-dot{width:6px;height:6px;background:#C9432F;box-shadow:none}
.ticker-viewport{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 60px),transparent 100%)}
.ticker-track{display:flex;gap:26px;font-size:.8rem;color:var(--ink);white-space:nowrap;width:max-content;animation:fdpMarquee 46s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker.is-paused .ticker-track{animation-play-state:paused}
@keyframes fdpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track a{opacity:.85;display:inline-block;padding:6px 0;min-height:24px;line-height:1.2}
.ticker-track a:hover,.ticker-track a:focus-visible{opacity:1;text-decoration:underline}
.ticker-sep{color:var(--ink-soft)}
.ticker-pause{flex:none;width:36px;height:36px;margin-left:6px;border-radius:50%;border:1px solid var(--glass-line);background:var(--paper);color:var(--brand);display:grid;place-items:center;position:relative;z-index:1}
.ticker-pause svg{width:12px;height:12px;fill:currentColor}
.ticker-pause .ico-play{display:none}
.ticker.is-paused .ticker-pause .ico-play{display:block}
.ticker.is-paused .ticker-pause .ico-pause{display:none}
@media(max-width:560px){.ticker-label .txt{display:none}}

/* ---------- home: anúncio do topo abaixo da manchete no celular ---------- */
.home main.wrap{display:flex;flex-direction:column}
.home .ad-top{order:0}
.home .hero{order:1}
.home .layout{order:2}
@media(max-width:879px){.home .ad-top{order:1}.home .hero{order:0;margin-top:16px}}
.ad-top .ad-live,.ad-top .ad-slot{margin:16px 0 0}
/* banner do topo: proporcional à manchete, nunca mais alto que ela (GIF 21:9 na largura toda passava de 490px) */
.ad-top .ad-live{display:flex;justify-content:center;align-items:center;background:var(--surface)}
.ad-top .ad-live img{max-width:100%;height:auto;border-radius:8px}
@media(min-width:880px){.ad-top .ad-live img{max-height:220px;width:auto}}

/* ---------- manchete dupla ---------- */
.hero-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:880px){.hero.hero-grid{grid-template-columns:1.55fr 1fr}}
.hero-side{display:flex;flex-direction:column;gap:16px}
.tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--surface);min-height:0}
.art{position:relative;overflow:hidden;background:var(--surface)}
.art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.art--empty{background:linear-gradient(135deg,#062423,#0A3F3D 60%,#145B58)}
.tile .art{aspect-ratio:16/10}
.hero-side .tile .art{aspect-ratio:16/9.3}
.tile .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,17,0) 35%,rgba(7,18,17,.86) 100%);pointer-events:none}
.tile:hover .art img{transform:scale(1.045)}
.tile .body{position:absolute;left:0;right:0;bottom:0;padding:18px;z-index:1;transition:transform .45s var(--ease)}
.tile:hover .body{transform:translateY(-3px)}
.tile h2,.tile h3{font-family:var(--font-title);color:#fff;line-height:1.2;text-wrap:balance}
.hero-main .tile h2{font-size:clamp(1.35rem,3vw,1.8rem);margin-bottom:6px}
.hero-side .tile h3{font-size:clamp(1rem,1.8vw,1.1rem)}
.tile:hover h2,.tile:hover h3{text-decoration:none}
.tile .badge{margin-bottom:9px}
.badge--cultura{background:var(--ed-cultura)}
.badge--nacional{background:var(--ed-nacional)}

/* ---------- grade de cards ---------- */
.card-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:880px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--glass-line)}
.card .art{aspect-ratio:16/10}
.card:hover .art img{transform:scale(1.04)}
.cbody{padding:12px 14px 16px}
.ekicker,.lc{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ed-locais);background:transparent;padding:0;margin:0;border-radius:0}
.ekicker.badge--politica,.lc.badge--politica{color:var(--ed-politica)}
.ekicker.badge--policial,.lc.badge--policial{color:var(--ed-policial)}
.ekicker.badge--esportes,.lc.badge--esportes{color:var(--ed-esportes)}
.ekicker.badge--agro,.lc.badge--agro{color:var(--ed-agro)}
.ekicker.badge--obituario,.lc.badge--obituario{color:var(--ed-obituario)}
.ekicker.badge--cultura,.lc.badge--cultura{color:var(--ed-cultura)}
.ekicker.badge--nacional,.lc.badge--nacional{color:var(--ed-nacional)}
.card h3{font-family:var(--font-title);font-size:1rem;line-height:1.3;margin-top:6px;font-weight:700;color:var(--ink);text-wrap:balance;transition:color .25s var(--ease)}
.card:hover h3{color:var(--brand)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .time{font-size:.75rem;color:var(--ink-soft);margin-top:8px;display:block}
.ad-infeed-wrap{grid-column:1 / -1}
.ad-infeed-wrap .ad-slot--infeed,.ad-infeed-wrap .ad-live{margin:0}

/* ---------- billboard central ---------- */
.ad-live.ad-slot--billboard,.ad-slot--billboard{margin:26px 0 4px;min-height:250px}
.section--world{margin-top:30px}

/* ---------- lista com miniatura (toda notícia tem foto) ---------- */
.list-feed{border-top:1px solid var(--line);margin-bottom:22px}
.list-feed li{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);transition:background .25s var(--ease)}
.list-feed li:hover{background:var(--glass-soft)}
.list-feed .thumb,.ranked .thumb{position:relative;inset:auto;display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--surface)}
.list-feed .thumb .art,.ranked .thumb .art{position:absolute;inset:0}
.list-feed li:hover .thumb img{transform:scale(1.04)}
.list-feed .lt{display:block;font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink)}
.list-feed li:hover .lt{color:var(--brand)}
.list-feed .lmeta{display:flex;gap:8px;align-items:center;margin-top:5px;font-size:.72rem;color:var(--ink-soft)}
@media(max-width:560px){.list-feed li{grid-template-columns:96px 1fr;gap:12px}}

/* ---------- ranking com miniatura ---------- */
.ranked li{display:grid;grid-template-columns:26px 72px 1fr;gap:10px;align-items:center}
.ranked .rank{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-family:var(--font-logo);font-size:.85rem;font-weight:700;opacity:1;display:grid;place-items:center;line-height:1}
.ranked li:nth-child(1) .rank{background:var(--accent);color:#072E2C}
.ranked li:nth-child(2) .rank{background:var(--brand);color:var(--paper)}
[data-theme="dark"] .ranked li:nth-child(1) .rank{color:#0c0e11}
.ranked .thumb{border-radius:5px}
@media(max-width:560px){.ranked li{grid-template-columns:26px 64px 1fr}}

/* ---------- faixa fixa do rodapé ---------- */
.ad-sticky{position:sticky;bottom:0;z-index:95;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--glass-line);padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:12px}
.ad-sticky[hidden]{display:none}
.ad-sticky .ad-live{width:100%;max-width:728px;min-height:50px}
.ad-sticky .ad-live img{margin:0 auto}
.ad-close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ad-close:hover{background:var(--surface)}
.ad-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
@media(max-width:720px){.ad-sticky{padding:6px 10px}.ad-sticky .ad-live{max-width:320px}}

/* ---------- aviso de cookies (LGPD), não bloqueante ---------- */
.cookie{position:fixed;left:16px;bottom:16px;z-index:250;max-width:360px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 12px 12px 16px;display:flex;gap:10px;align-items:center;font-size:.8rem;line-height:1.4}
.cookie[hidden]{display:none}
.cookie a{color:var(--brand);text-decoration:underline;font-weight:600}
.cookie .ok{flex:none;height:36px;border-radius:8px;padding:0 12px;font-size:.8rem;font-weight:700;background:var(--brand);color:#fff;border:0;cursor:pointer}
@media(max-width:720px){.cookie{left:8px;right:8px;bottom:8px;max-width:none}}

/* ---------- revelação ao rolar (classe aplicada só por JS; hero nunca entra) ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
  .ticker-viewport{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .ticker-pause{display:none}
  .tile:hover .art img,.card:hover .art img,.list-feed li:hover .thumb img{transform:none}
  .card:hover,.tile:hover .body{transform:none}
}
