/*
Theme Name: GuimaÉFato
Theme URI: https://guimaefato.com.br
Author: OKTO
Author URI: https://okto-ag.com
Description: Portal de notícias dinâmico e ousado para GuimaÉFato. Header completo com clima ao vivo, busca, breaking news ticker, modo escuro, navegação editorial e layout impactante mobile-first. Construído do zero em PHP puro.
Version: 2.8.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guimaefato
Tags: news, editorial, magazine, dark-mode, custom-menu, featured-images, threaded-comments, two-columns
*/

/* ============================================================
   RESET + TOKENS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    /* light — base bege/creme sutil em vez de branco puro, mais editorial */
    --bg:#fbfaf7;
    --bg-alt:#f3f1ec;
    --bg-elev:#ffffff;
    --surface:#f7f5f0;
    --text:#0a0a0a;
    --text-soft:#3a3a3a;
    --text-muted:#6b6a65;
    --border:#e6e3dc;
    --border-strong:#0a0a0a;
    --accent:#e10600;
    --accent-2:#ff2d1f;
    --accent-dark:#a30400;
    --gold:#c9a227;
    --shadow-sm:0 2px 8px rgba(15,15,10,.06);
    --shadow:0 4px 24px rgba(15,15,10,.08);
    --shadow-lg:0 24px 80px rgba(15,15,10,.18);

    --font-display:'Space Grotesk','Inter',-apple-system,sans-serif;
    --font-sans:'Inter','Helvetica Neue',-apple-system,sans-serif;
    --font-mono:'JetBrains Mono','Courier New',monospace;

    --container:1320px;
    --radius-sm:6px;
    --radius:12px;
    --radius-lg:20px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"]{
    --bg:#0d0d0f;
    --bg-alt:#16161a;
    --bg-elev:#1a1a1f;
    --surface:#16161a;
    --text:#f5f5f3;
    --text-soft:#c5c5c0;
    --text-muted:#8a8a85;
    --border:#2a2a30;
    --border-strong:#f5f5f3;
    --shadow:0 4px 24px rgba(0,0,0,.4);
    --shadow-lg:0 20px 60px rgba(0,0,0,.6);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.65;
    color:var(--text);
    background:var(--bg);
    background-image:
        /* gradiente quente sutil nos cantos */
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(225,6,0,.035) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(201,162,39,.028) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(225,6,0,.02) 0%, transparent 60%),
        /* grid de linhas verticais sutis (estilo jornal) */
        linear-gradient(90deg, rgba(10,10,10,.018) 1px, transparent 1px),
        /* noise texturizado */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: auto, auto, auto, 120px 100%, 300px 300px;
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-feature-settings:"kern","liga","calt","ss01";
    transition:background-color .3s var(--ease),color .3s var(--ease);
    overflow-x:hidden;
    position:relative;
}
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        /* linhas horizontais decorativas super sutis (estilo guia de jornal) */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 119px,
            rgba(10,10,10,.012) 119px,
            rgba(10,10,10,.012) 120px
        );
    pointer-events:none;
    z-index:0;
}
body > *{position:relative;z-index:1}
[data-theme="dark"] body{
    background-image:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(225,6,0,.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(201,162,39,.04) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(225,6,0,.04) 0%, transparent 60%),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: auto, auto, auto, 120px 100%;
}
[data-theme="dark"] body::before{
    background:repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 119px,
        rgba(255,255,255,.015) 119px,
        rgba(255,255,255,.015) 120px
    );
}

/* Mobile: tira o grid decorativo pra não poluir telas pequenas */
@media (max-width:880px){
    body{
        background-image:
            radial-gradient(ellipse 80% 30% at 50% 0%, rgba(225,6,0,.03) 0%, transparent 60%),
            url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: auto, 300px 300px;
    }
    body::before{display:none}
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.025em;
    font-feature-settings:"ss01","ss02","kern","liga";
}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
    position:relative;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   TOPBAR — data, clima, redes, dark toggle
   ============================================================ */
.topbar{
    background:var(--text);
    color:var(--bg);
    font-size:12px;
    padding:10px 0;
    border-bottom:1px solid var(--text);
    transition:background .3s var(--ease);
}
[data-theme="dark"] .topbar{background:#000}
.topbar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}
.topbar-left{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topbar-date{
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:11px;
    color:#fff;
}
.topbar-date strong{color:var(--accent-2)}

.weather-widget{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#fff;
}
.weather-widget .icon{font-size:16px;line-height:1}
.weather-widget .temp{font-weight:700;color:var(--accent-2);font-size:13px}
.weather-widget .city{opacity:.7}

.topbar-right{display:flex;align-items:center;gap:18px}
.topbar-social{display:flex;gap:12px;align-items:center}
.topbar-social a{
    color:#fff;
    opacity:.75;
    transition:opacity .2s,transform .2s,color .2s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
}
.topbar-social a svg{display:block}
.topbar-social a:hover{opacity:1;color:var(--accent-2);transform:translateY(-2px)}

.theme-toggle{
    width:44px;height:24px;
    background:rgba(255,255,255,.15);
    border-radius:20px;
    position:relative;
    cursor:pointer;
    transition:background .3s var(--ease);
    padding:0;
    border:none;
}
.theme-toggle .theme-icon{
    position:absolute;
    top:50%;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    color:#0a0a0a;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    transition:all .3s var(--ease);
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.theme-toggle .theme-icon-sun{left:2px;opacity:1}
.theme-toggle .theme-icon-moon{left:2px;opacity:0;pointer-events:none}
[data-theme="dark"] .theme-toggle .theme-icon-sun{opacity:0;transform:translateY(-50%) translateX(20px)}
[data-theme="dark"] .theme-toggle .theme-icon-moon{
    opacity:1;
    transform:translateY(-50%) translateX(20px);
    background:#0a0a0a;
    color:#fff;
}
.theme-toggle .theme-icon svg{display:block}

/* ============================================================
   BREAKING NEWS TICKER
   ============================================================ */
.breaking-bar{
    background:var(--accent);
    color:#fff;
    overflow:hidden;
    position:relative;
    height:42px;
    display:flex;
    align-items:center;
}
.breaking-bar::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0%,transparent 90%,var(--accent) 100%);
    pointer-events:none;
    z-index:2;
}
.breaking-label{
    background:#0a0a0a;
    color:#fff;
    padding:0 18px;
    height:100%;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-family:var(--font-sans);
    white-space:nowrap;
    z-index:3;
    position:relative;
    flex-shrink:0;
}
.breaking-label .pulse{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--accent);
    animation:pulse 1.4s infinite;
    box-shadow:0 0 0 0 var(--accent);
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(225,6,0,.8)}
    70%{box-shadow:0 0 0 12px rgba(225,6,0,0)}
    100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}
}

.ticker-wrap{
    flex:1;
    overflow:hidden;
    position:relative;
}
.ticker-track{
    display:flex;
    gap:60px;
    animation:ticker 50s linear infinite;
    white-space:nowrap;
    width:max-content;
}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{
    font-size:13px;
    font-weight:600;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px;
}
.ticker-item::before{
    content:'●';
    color:#0a0a0a;
    font-size:8px;
}
.ticker-item a{color:#fff;transition:color .15s}
.ticker-item a:hover{color:#0a0a0a}
@keyframes ticker{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* ============================================================
   HEADER — logo + busca
   ============================================================ */
.site-header{
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:32px 0 0;
    position:relative;
    transition:background .3s var(--ease),border-color .3s var(--ease);
}
.header-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:40px;
}
/* No desktop o toggle fica escondido e não ocupa espaço */
.menu-toggle{display:none;}

/* Logo customizada — tamanho controlado em todos os breakpoints */
.custom-logo-wrap{display:flex;align-items:center;justify-content:center}
.custom-logo-wrap a{display:flex;align-items:center}
.custom-logo-wrap img,
.custom-logo{
    max-height:70px !important;
    max-width:280px !important;
    width:auto !important;
    height:auto !important;
    display:block !important;
    transition:max-height .35s var(--ease),max-width .35s var(--ease);
    will-change:max-height;
}
.header-meta{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:var(--text-muted);
    line-height:1.5;
}
.header-meta strong{display:block;color:var(--text);font-size:13px;letter-spacing:2px}

.site-logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(46px,7vw,86px);
    line-height:.9;
    letter-spacing:-.045em;
    text-align:center;
    color:var(--text);
    position:relative;
    transition:font-size .35s var(--ease);
    will-change:font-size;
}
.site-logo a{color:var(--text);display:inline-block;position:relative}
.site-logo .accent{
    color:var(--accent);
    display:inline-block;
    transform:rotate(-4deg);
    font-style:italic;
}
.site-logo::after{
    content:'EST. 2026';
    display:block;
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:400;
    letter-spacing:4px;
    color:var(--text-muted);
    margin-top:6px;
}

.header-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:16px;
}
.search-trigger{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border:1.5px solid var(--border-strong);
    background:var(--bg);
    color:var(--text);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    transition:all .25s var(--ease);
    cursor:pointer;
}
.search-trigger:hover{
    background:var(--text);
    color:var(--bg);
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.search-trigger svg{width:14px;height:14px}

/* MAIN NAV */
.main-nav{
    margin-top:28px;
    border-top:2px solid var(--text);
    border-bottom:2px solid var(--text);
    background:var(--bg);
}
.main-nav-inner{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}
.main-nav ul{
    display:flex;
    list-style:none;
    flex-wrap:wrap;
    justify-content:center;
}
.main-nav li{position:relative}
.main-nav a{
    display:block;
    padding:18px 24px;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.4px;
    color:var(--text);
    position:relative;
    transition:color .2s var(--ease);
}
.main-nav a::after{
    content:'';
    position:absolute;
    bottom:0;left:50%;
    width:0;height:3px;
    background:var(--accent);
    transition:all .3s var(--ease);
    transform:translateX(-50%);
}
.main-nav a:hover{color:var(--accent)}
.main-nav a:hover::after,
.main-nav .current-menu-item>a::after{width:60%}

/* menu-toggle base — visibilidade controlada por media queries */

/* SEARCH OVERLAY */
.search-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,10,10,.96);
    backdrop-filter:blur(20px);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease);
}
.search-overlay.is-open{opacity:1;pointer-events:all}
.search-overlay-inner{
    width:90%;
    max-width:780px;
    text-align:center;
    transform:translateY(20px);
    transition:transform .4s var(--ease);
}
.search-overlay.is-open .search-overlay-inner{transform:translateY(0)}
.search-overlay h2{
    color:#fff;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:30px;
    font-family:var(--font-mono);
    font-weight:400;
    opacity:.6;
}
.search-overlay form{
    display:flex;
    border-bottom:3px solid #fff;
    padding-bottom:14px;
}
.search-overlay input{
    flex:1;
    background:none;
    border:none;
    color:#fff;
    font-family:var(--font-display);
    font-size:clamp(28px,5vw,48px);
    font-weight:700;
    outline:none;
}
.search-overlay input::placeholder{color:rgba(255,255,255,.3)}
.search-overlay button[type="submit"]{
    color:#fff;
    font-size:32px;
}
.search-close{
    position:absolute;
    top:30px;right:30px;
    color:#fff;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:2px;
    border:1px solid rgba(255,255,255,.3);
    padding:10px 18px;
}
.search-close:hover{background:var(--accent);border-color:var(--accent)}

/* ============================================================
   HERO BLOCK — manchete + 3 cards
   ============================================================ */
.hero-block{padding:48px 0 24px}
.hero-grid{
    display:grid;
    grid-template-columns:1.85fr 1fr;
    gap:40px;
}

/* MANCHETE PRINCIPAL */
.hero-main{
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:#000;
    aspect-ratio:16/11;
    box-shadow:var(--shadow-lg);
    transition:transform .5s var(--ease);
}
.hero-main:hover{transform:translateY(-4px)}
.hero-main .thumb{
    position:absolute;
    inset:0;
}
.hero-main .thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease);
}
.hero-main:hover .thumb img{transform:scale(1.05)}
.hero-main .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.4) 60%,
        rgba(0,0,0,.95) 100%);
}
.hero-main .content{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:40px 44px;
    color:#fff;
    z-index:2;
}
.hero-main .category{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:8px 14px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.8px;
    margin-bottom:18px;
    border-radius:2px;
    transform:skew(-8deg);
}
.hero-main .category span{display:inline-block;transform:skew(8deg)}
.hero-main h2{
    font-size:clamp(28px,3.5vw,52px);
    line-height:1.05;
    color:#fff;
    margin-bottom:14px;
    text-shadow:0 2px 30px rgba(0,0,0,.5);
    max-width:90%;
}
.hero-main .excerpt{
    font-size:16px;
    color:rgba(255,255,255,.85);
    max-width:80%;
    margin-bottom:14px;
    line-height:1.5;
}
.hero-main .meta{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:rgba(255,255,255,.7);
}
.hero-main .meta strong{color:#fff}
.hero-main .read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:10px 18px;
    background:#fff;
    color:#0a0a0a;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.2px;
    border-radius:2px;
    transition:all .25s var(--ease);
}
.hero-main:hover .read-more{background:var(--accent);color:#fff;gap:14px}

/* 3 CARDS LATERAIS */
.hero-side{display:flex;flex-direction:column;gap:0}
.side-card{
    display:grid;
    grid-template-columns:1fr 130px;
    gap:18px;
    padding:22px 0;
    align-items:start;
    position:relative;
    transition:transform .25s var(--ease);
}
.side-card:first-child{padding-top:0}
.side-card:last-child{padding-bottom:0}
.side-card+.side-card{border-top:1px solid var(--border)}
.side-card:hover{transform:translateX(4px)}
.side-card .number{
    position:absolute;
    top:24px;
    left:-2px;
    font-family:var(--font-display);
    font-size:14px;
    font-weight:900;
    color:var(--accent);
}
.side-card .info{display:flex;flex-direction:column;padding-left:24px}
.side-card .category{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--accent);
    margin-bottom:8px;
}
.side-card h3{
    font-size:19px;
    line-height:1.2;
    margin-bottom:10px;
    color:var(--text);
}
.side-card h3 a:hover{color:var(--accent)}
.side-card .meta{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-top:auto;
}
.side-card .thumb{
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--bg-alt);
}
.side-card .thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease);
}
.side-card:hover .thumb img{transform:scale(1.08)}

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title{
    display:flex;
    align-items:center;
    gap:18px;
    margin:60px 0 30px;
    padding-bottom:14px;
    border-bottom:3px solid var(--text);
    position:relative;
}
.section-title::before{
    content:'';
    position:absolute;
    bottom:-3px;left:0;
    width:80px;
    height:3px;
    background:var(--accent);
}
.section-title h2{
    font-family:var(--font-display);
    font-size:clamp(26px,3vw,38px);
    font-weight:900;
    color:var(--text);
    letter-spacing:-.02em;
}
.section-title h2 em{
    color:var(--accent);
    font-style:italic;
    font-weight:400;
}
.section-title .more{
    margin-left:auto;
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:700;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
    transition:all .2s var(--ease);
}
.section-title .more:hover{color:var(--accent);gap:12px}

/* ============================================================
   CARDS GRID
   ============================================================ */
.cards-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
}
.cards-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.card{
    display:flex;
    flex-direction:column;
    transition:transform .3s var(--ease);
}
.card:hover{transform:translateY(-6px)}
.card .thumb{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--bg-alt);
    border-radius:var(--radius);
    margin-bottom:16px;
}
.card .thumb img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease);
}
.card:hover .thumb img{transform:scale(1.08)}
.card .thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.3));
    opacity:0;
    transition:opacity .3s;
}
.card:hover .thumb::after{opacity:1}
.card .category{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--accent);
    margin-bottom:8px;
}
.card h3{
    font-size:20px;
    line-height:1.2;
    margin-bottom:10px;
    color:var(--text);
}
.card h3 a:hover{color:var(--accent)}
.card .excerpt{
    font-size:14px;
    color:var(--text-soft);
    line-height:1.55;
    margin-bottom:12px;
}
.card .meta{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-top:auto;
    display:flex;
    gap:12px;
}
.card .meta::before{content:'';width:14px;height:1px;background:var(--text-muted);align-self:center}

/* CARDS RANKEADOS (Mais Lidas) */
.card-ranked{position:relative}
.card-ranked .rank-num{
    position:absolute;
    top:8px;left:8px;
    background:var(--accent);
    color:#fff;
    padding:6px 12px;
    font-family:var(--font-display);
    font-size:14px;
    font-weight:700;
    letter-spacing:-.02em;
    z-index:2;
    border-radius:4px;
    box-shadow:0 4px 12px rgba(225,6,0,.3);
}

/* ============================================================
   MAIN + SIDEBAR
   ============================================================ */
.main-with-sidebar{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:60px;
    padding:48px 0;
}

.sidebar .widget{
    margin-bottom:40px;
    padding:24px;
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border);
}
.widget-title{
    font-family:var(--font-display);
    font-size:22px;
    font-weight:900;
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:2px solid var(--text);
    color:var(--text);
}
.widget-title em{color:var(--accent);font-style:italic}
.widget ul{list-style:none}
.widget-popular li{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    align-items:start;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}
.widget-popular li:last-child{border-bottom:none;padding-bottom:0}
.widget-popular li:first-child{padding-top:0}
.widget-popular .num{
    font-family:var(--font-display);
    font-size:36px;
    font-weight:900;
    color:var(--accent);
    line-height:.8;
}
.widget-popular h4{
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    margin-bottom:6px;
    color:var(--text);
}
.widget-popular .meta{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post-content{max-width:780px}
.single-post-content .category-tag{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:8px 14px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:20px;
    border-radius:2px;
}
.single-post-content h1{
    font-size:clamp(34px,5vw,58px);
    line-height:1.05;
    margin-bottom:20px;
    color:var(--text);
}
.single-post-content .lede{
    font-family:var(--font-display);
    font-size:22px;
    font-weight:500;
    color:var(--text-soft);
    line-height:1.45;
    margin-bottom:24px;
    border-left:4px solid var(--accent);
    padding-left:18px;
}
.single-post-content .post-meta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:1px;
    padding-bottom:24px;
    border-bottom:1px solid var(--border);
    margin-bottom:32px;
}
.single-post-content .post-meta strong{color:var(--text)}
.single-post-content .featured-image{
    margin-bottom:32px;
    border-radius:var(--radius);
    overflow:hidden;
}
.single-post-content .post-body{
    font-size:18px;
    line-height:1.75;
    color:var(--text);
}
.single-post-content .post-body p{margin-bottom:1.3em}
.single-post-content .post-body h2{
    font-size:30px;margin:1.6em 0 .6em;
}
.single-post-content .post-body h3{
    font-size:24px;margin:1.4em 0 .5em;
}
.single-post-content .post-body blockquote{
    border-left:5px solid var(--accent);
    padding:12px 0 12px 28px;
    margin:1.8em 0;
    font-family:var(--font-display);
    font-size:24px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:-.01em;
}
.single-post-content .post-body a{color:var(--accent);text-decoration:underline}

/* ============================================================
   PAGE HEADER (archives)
   ============================================================ */
.page-header{
    padding:48px 0 24px;
    text-align:center;
    border-bottom:1px solid var(--border);
}
.page-header .kicker{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--accent);
    margin-bottom:12px;
}
.page-header h1{
    font-size:clamp(40px,6vw,72px);
    color:var(--text);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:50px 0;
    flex-wrap:wrap;
}
.pagination a,.pagination span{
    display:inline-block;
    padding:12px 18px;
    border:1.5px solid var(--border);
    font-size:13px;
    font-weight:700;
    color:var(--text);
    transition:all .2s var(--ease);
}
.pagination .current,.pagination a:hover{
    background:var(--text);
    color:var(--bg);
    border-color:var(--text);
    transform:translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    background:#0a0a0a;
    color:#c5c5c0;
    padding:70px 0 24px;
    margin-top:80px;
    position:relative;
}
.site-footer::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--accent) 0%,var(--gold) 50%,var(--accent) 100%);
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
    padding-bottom:40px;
    border-bottom:1px solid #2a2a30;
}

/* footer simplificado — só marca + contatos */
.footer-grid-simple{
    grid-template-columns:1.3fr 1fr;
    gap:60px;
    align-items:start;
}

.footer-contact h4{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    margin-bottom:18px;
}
.contact-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 20px;
    background:rgba(255,255,255,.03);
    border:1px solid #2a2a30;
    border-radius:12px;
    margin-bottom:12px;
    transition:all .3s var(--ease);
    color:#fff;
    text-decoration:none;
}
.contact-item:hover{
    transform:translateY(-3px);
    border-color:transparent;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.contact-wpp:hover{
    background:linear-gradient(135deg,#25d366,#128c7e);
}
.contact-ig:hover{
    background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.contact-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .3s var(--ease);
}
.contact-item:hover .contact-icon{background:rgba(255,255,255,.22)}
.contact-icon svg{display:block}
.contact-info{display:flex;flex-direction:column;min-width:0}
.contact-label{
    font-family:var(--font-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#8a8a85;
    margin-bottom:2px;
    transition:color .3s;
}
.contact-info strong{
    font-size:15px;
    font-weight:700;
    color:#fff;
    letter-spacing:-.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.contact-item:hover .contact-label{color:rgba(255,255,255,.85)}
.footer-brand .logo{
    font-family:var(--font-display);
    font-size:42px;
    font-weight:900;
    color:#fff;
    line-height:.9;
    margin-bottom:16px;
    letter-spacing:-.03em;
}
.footer-brand .logo .accent{color:var(--accent)}
.footer-brand p{
    font-size:14px;
    color:#8a8a85;
    line-height:1.6;
    max-width:380px;
    margin-bottom:16px;
}
.footer-social{display:flex;gap:12px}
.footer-social a{
    width:42px;height:42px;
    border:1px solid #2a2a30;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:all .25s var(--ease);
}
.footer-social a svg{display:block}
.footer-social a:hover{
    background:var(--accent);
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(225,6,0,.3);
}

.footer-col h4{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    margin-bottom:18px;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:#8a8a85;font-size:14px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}

.footer-bottom{
    padding-top:24px;
    text-align:center;
    font-family:var(--font-mono);
    font-size:11px;
    color:#666;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.footer-bottom a{color:var(--accent)}

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-area{
    margin-top:60px;
    padding-top:36px;
    border-top:3px solid var(--text);
    max-width:780px;
}
.comments-title{
    font-family:var(--font-display);
    font-size:28px;
    margin-bottom:28px;
    color:var(--text);
}
.comment-list{list-style:none}
.comment-list li{padding:20px 0;border-bottom:1px solid var(--border)}
.comment-list .comment-author{font-weight:700;font-size:15px}
.comment-list .comment-meta{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--text-muted);
    text-transform:uppercase;
    margin-bottom:10px;
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea{
    width:100%;
    padding:14px;
    border:1.5px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:14px;
    margin-bottom:14px;
    border-radius:var(--radius-sm);
}
#commentform input[type="submit"]{
    background:var(--text);
    color:var(--bg);
    padding:14px 32px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:800;
    cursor:pointer;
    border:none;
    transition:background .2s;
}
#commentform input[type="submit"]:hover{background:var(--accent)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
.hero-main,.side-card,.card{animation:fadeUp .6s var(--ease) both}
.side-card:nth-child(1){animation-delay:.05s}
.side-card:nth-child(2){animation-delay:.1s}
.side-card:nth-child(3){animation-delay:.15s}
.cards-grid .card:nth-child(1){animation-delay:.05s}
.cards-grid .card:nth-child(2){animation-delay:.1s}
.cards-grid .card:nth-child(3){animation-delay:.15s}
.cards-grid .card:nth-child(4){animation-delay:.2s}

/* ============================================================
   ANÚNCIOS / BANNERS — TAMANHOS TRAVADOS
   ============================================================ */
.ad-block,
.ad-placeholder{
    margin:32px auto;
    text-align:center;
    max-width:100%;
}
.ad-label{
    display:block;
    font-family:var(--font-mono);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--text-muted);
    margin-bottom:8px;
    font-weight:700;
}

/* WIDGET BANNER GUIMAÉFATO — força aspect ratio */
.guima-banner-link{
    display:block;
    width:100%;
    overflow:hidden;
    border-radius:var(--radius);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.guima-banner-link:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
}
.guima-banner-link img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Horizontais: preserva 970x250 como max, mas flexível */
.banner-horizontal .guima-banner-link{
    max-width:970px;
    margin:0 auto;
    background:var(--bg-alt);
    border-radius:var(--radius);
}
.banner-horizontal .guima-banner-link img{
    width:100%;
    height:auto;
    max-height:250px;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

/* Laterais: trava 300x250 */
.ad-side .guima-banner-link{
    max-width:300px;
    margin:0 auto;
    aspect-ratio:300/250;
    background:var(--bg-alt);
}
.ad-side .guima-banner-link img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ad-placeholder{
    border:2px dashed var(--border);
    padding:30px 20px;
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text-muted);
}
.ad-placeholder-public{
    background:var(--bg-alt);
    border-color:var(--border);
    opacity:.85;
}
.ad-placeholder p{
    font-size:13px;
    margin:6px 0 0;
}
.ad-placeholder strong{color:var(--text)}

.banner-horizontal{
    margin:40px 0;
    padding:0 24px;
}
.banner-horizontal .ad-block,
.banner-horizontal .ad-placeholder{
    max-width:970px;
}
.banner-horizontal .ad-placeholder{
    min-height:140px;
    aspect-ratio:970/250;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.banner-mobile-only{display:none}

.ad-side{margin:0 0 32px}
.ad-side.ad-placeholder{
    max-width:300px;
    aspect-ratio:300/250;
    min-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin:0 auto 32px;
}

/* ============================================================
   SHARE BUTTONS
   ============================================================ */
.share-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    padding:18px 0 24px;
    border-bottom:1px solid var(--border);
    margin-bottom:28px;
}
.share-label{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--text-muted);
    font-weight:700;
    margin-right:6px;
}
.share-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border:1.5px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:12px;
    font-weight:700;
    border-radius:8px;
    cursor:pointer;
    transition:all .2s var(--ease);
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1;
}
.share-btn svg{display:block;flex-shrink:0}
.share-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.share-wpp:hover{background:#25d366;color:#fff;border-color:#25d366}
.share-fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.share-tw:hover{background:#000;color:#fff;border-color:#000}
.share-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.share-copy.copied{background:#22c55e;color:#fff;border-color:#22c55e}

/* ============================================================
   POST TAGS
   ============================================================ */
.post-tags{
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid var(--border);
}
.post-tags strong{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:var(--text-muted);
}
.post-tags a{
    display:inline-block;
    padding:6px 12px;
    border:1.5px solid var(--border);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin:6px 6px 0 0;
    border-radius:4px;
    font-weight:600;
}
.post-tags a:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

/* ============================================================
   POSTS RELACIONADOS
   ============================================================ */
.related-posts{
    margin-top:50px;
    padding-top:36px;
    border-top:3px solid var(--text);
}
.related-title{
    font-family:var(--font-display);
    font-size:28px;
    font-weight:700;
    margin-bottom:24px;
    letter-spacing:-.02em;
}
.related-title em{color:var(--accent);font-style:italic;font-weight:500}
.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.related-grid .card h3{font-size:16px}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
    position:fixed;
    bottom:24px;
    right:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    border:2px solid #fff;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(225,6,0,.35),0 0 0 1px rgba(0,0,0,.05);
    opacity:0;
    pointer-events:none;
    transform:translateY(20px) scale(.9);
    transition:all .3s var(--ease);
    z-index:998;
    display:flex;
    align-items:center;
    justify-content:center;
}
.back-to-top svg{display:block}
.back-to-top.visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}
.back-to-top:hover{
    background:var(--accent-dark);
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 12px 28px rgba(225,6,0,.5);
}

/* ============================================================
   STICKY POST TAG (DESTAQUE)
   ============================================================ */
.sticky-tag{
    position:absolute;
    top:16px;
    left:16px;
    background:#fbbf24;
    color:#0a0a0a;
    padding:6px 12px;
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.5px;
    z-index:3;
    border-radius:4px;
    box-shadow:0 4px 12px rgba(251,191,36,.4);
}

/* ============================================================
   SCROLL REVEAL — cards aparecem conforme scroll
   ============================================================ */
.reveal{
    opacity:0;
    transform:translateY(32px);
    filter:blur(4px);
    transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);
    will-change:opacity,transform,filter;
}
.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
.reveal-stagger > *{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0)}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.40s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.54s}

@media (prefers-reduced-motion:reduce){
    .reveal,.reveal-stagger > *{opacity:1;transform:none;filter:none;transition:none}
}

/* ============================================================
   SKELETON LOADING — shimmer nas imagens
   ============================================================ */
.thumb{
    background:
        linear-gradient(90deg,
            var(--bg-alt) 0%,
            var(--surface) 50%,
            var(--bg-alt) 100%);
    background-size:200% 100%;
    animation:shimmer 1.8s linear infinite;
}
.thumb img{
    opacity:0;
    transition:opacity .6s var(--ease-out);
}
.thumb img.is-loaded,
.thumb img[src]{opacity:1}
@keyframes shimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}
/* quando a img terminou de carregar, remove o shimmer */
.thumb.img-loaded{animation:none;background:var(--bg-alt)}

/* ============================================================
   KEN BURNS — hero principal
   ============================================================ */
@keyframes kenBurns{
    0%{transform:scale(1) translate(0,0)}
    50%{transform:scale(1.08) translate(-1%,-1%)}
    100%{transform:scale(1.04) translate(1%,1%)}
}
.hero-main .thumb img{
    animation:kenBurns 22s ease-in-out infinite alternate;
}
.hero-main:hover .thumb img{animation-play-state:paused;transform:scale(1.06)}

/* ============================================================
   HEADER QUE ENCOLHE NO SCROLL
   ============================================================ */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    transition:padding .35s var(--ease),background .3s var(--ease);
}
.site-header.is-shrunk{
    padding:10px 0 0;
    box-shadow:0 4px 30px rgba(15,15,10,.08);
}
.site-header.is-shrunk .header-grid{gap:20px}
.site-header.is-shrunk .site-logo{font-size:clamp(24px,3.5vw,36px)}
.site-header.is-shrunk .site-logo::after{display:none}
.site-header.is-shrunk .header-meta{display:none}
.site-header.is-shrunk .custom-logo-wrap img{max-height:48px !important;max-width:190px !important}
.site-header.is-shrunk .main-nav{margin-top:10px}
.site-header.is-shrunk .main-nav a{padding:12px 20px;font-size:12px}

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA
   ============================================================ */
.reading-progress{
    position:fixed;
    top:0;left:0;
    width:0%;
    height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    z-index:9998;
    transition:width .1s linear;
    pointer-events:none;
    box-shadow:0 0 10px rgba(225,6,0,.5);
}

/* ============================================================
   MENU MOBILE DRAMÁTICO FULLSCREEN
   ============================================================ */
.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:#0a0a0a;
    z-index:9997;
    display:flex;
    flex-direction:column;
    padding:80px 30px 40px;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s var(--ease-out);
}
.mobile-menu-overlay.is-open{
    opacity:1;
    pointer-events:all;
}
.mobile-menu-overlay::before{
    content:'';
    position:absolute;
    top:-30%;right:-20%;
    width:80%;height:80%;
    background:radial-gradient(circle,rgba(225,6,0,.15) 0%,transparent 60%);
    pointer-events:none;
}
.mobile-menu-close{
    position:absolute;
    top:24px;right:24px;
    width:44px;height:44px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    font-size:22px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(10px);
}
.mobile-menu-close:hover{background:var(--accent);border-color:var(--accent)}

.mobile-menu-list{
    list-style:none;
    padding:0;
    margin:auto 0;
    display:flex;
    flex-direction:column;
    gap:0;
    position:relative;
    z-index:2;
}
.mobile-menu-list li{
    border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0;
    transform:translateX(-30px);
    transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.mobile-menu-overlay.is-open .mobile-menu-list li{opacity:1;transform:translateX(0)}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(1){transition-delay:.08s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(2){transition-delay:.14s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(3){transition-delay:.20s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(4){transition-delay:.26s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(5){transition-delay:.32s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(6){transition-delay:.38s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(7){transition-delay:.44s}
.mobile-menu-overlay.is-open .mobile-menu-list li:nth-child(8){transition-delay:.50s}

.mobile-menu-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 8px;
    font-family:var(--font-display);
    font-size:32px;
    font-weight:700;
    color:#fff;
    letter-spacing:-.03em;
    transition:color .2s,padding .3s var(--ease);
}
.mobile-menu-list a::after{
    content:'→';
    font-size:24px;
    color:var(--accent);
    opacity:0;
    transform:translateX(-10px);
    transition:all .3s var(--ease);
}
.mobile-menu-list a:hover,
.mobile-menu-list a:focus{
    color:var(--accent);
    padding-left:16px;
}
.mobile-menu-list a:hover::after,
.mobile-menu-list a:focus::after{opacity:1;transform:translateX(0)}

.mobile-menu-footer{
    margin-top:auto;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgba(255,255,255,.5);
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    position:relative;
    z-index:2;
}
.mobile-menu-footer .mm-social{display:flex;gap:12px}
.mobile-menu-footer .mm-social a{
    color:#fff;
    width:42px;height:42px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .25s var(--ease);
}
.mobile-menu-footer .mm-social a svg{display:block}
.mobile-menu-footer .mm-social a:hover{
    background:var(--accent);
    border-color:var(--accent);
    transform:translateY(-2px);
}

body.menu-open{overflow:hidden}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
    .cards-grid{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:2fr 1fr 1fr;gap:36px}
    .footer-col:last-child{grid-column:1/-1}
    .header-grid{grid-template-columns:auto 1fr auto;gap:20px}
    .menu-toggle{display:none}
    .header-meta{display:none}
}

@media (max-width:880px){
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .hero-main{aspect-ratio:4/3}
    .hero-main .content{padding:24px}
    .main-with-sidebar{grid-template-columns:1fr;gap:40px}
    .cards-grid{grid-template-columns:repeat(2,1fr);gap:24px}
    .cards-grid.cols-3{grid-template-columns:repeat(2,1fr)}

    .topbar-inner{justify-content:center;gap:14px}
    .topbar-left{justify-content:center;gap:18px}
    .topbar-date{font-size:10px}

    /* Mobile: hambúrguer | logo | busca */
    .header-grid{grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:center}
    .header-meta{display:none}
    .header-actions{justify-content:flex-end}

    .menu-toggle{
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding:10px 12px;
        background:transparent;
        color:var(--text);
        border:none;
        cursor:pointer;
    }
    .menu-toggle svg{display:block;flex-shrink:0}
    .menu-toggle span{font-size:9px;font-weight:800;letter-spacing:1.5px;line-height:1}
    .main-nav{display:none}

    .custom-logo-wrap img{max-height:52px !important;max-width:210px !important;width:auto !important;height:auto !important}
    .site-logo{font-size:clamp(26px,6vw,40px)}
    .site-logo::after{display:none}

    .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
    .footer-brand{grid-column:1/-1}
}

@media (max-width:560px){
    .container{padding:0 20px}

    /* ===== HERO MOBILE IMERSIVO FULLSCREEN ===== */
    .hero-block{padding:20px 0 12px}
    .hero-grid{gap:18px}
    .hero-main{
        aspect-ratio:auto;
        height:82vh;
        min-height:540px;
        max-height:720px;
        border-radius:var(--radius-lg);
    }
    .hero-main .overlay{
        background:linear-gradient(180deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.1) 35%,
            rgba(0,0,0,.75) 72%,
            rgba(0,0,0,.98) 100%);
    }
    .hero-main .content{padding:28px 24px 32px}
    .hero-main .category{
        font-size:10px;
        padding:7px 12px;
        margin-bottom:14px;
    }
    .hero-main h2{
        font-size:32px;
        line-height:1.02;
        letter-spacing:-.035em;
        margin-bottom:14px;
        max-width:100%;
    }
    .hero-main .excerpt{
        display:block;
        font-size:15px;
        line-height:1.5;
        max-width:100%;
        color:rgba(255,255,255,.88);
        margin-bottom:16px;
    }
    .hero-main .meta{font-size:10px}
    .hero-main .read-more{
        margin-top:14px;
        padding:12px 20px;
        font-size:11px;
    }

    /* ===== SIDE CARDS MOBILE ===== */
    .hero-side{gap:0}
    .side-card{
        grid-template-columns:1fr 110px;
        gap:16px;
        padding:20px 0;
    }
    .side-card .number{
        font-size:16px;
        top:22px;
    }
    .side-card .info{padding-left:26px}
    .side-card .category{font-size:9px;margin-bottom:6px}
    .side-card h3{
        font-size:18px;
        line-height:1.18;
        letter-spacing:-.02em;
    }
    .side-card .meta{font-size:10px}
    .side-card .thumb{border-radius:10px}

    /* ===== CARDS MOBILE — maiores, espaçados ===== */
    .cards-grid,.cards-grid.cols-3{grid-template-columns:1fr;gap:0}
    .cards-grid .card{
        padding:24px 0;
        border-bottom:1px solid var(--border);
        position:relative;
    }
    .cards-grid .card:first-child{padding-top:4px}
    .cards-grid .card:last-child{border-bottom:none}
    .cards-grid .card .thumb{
        margin-bottom:16px;
        border-radius:12px;
        aspect-ratio:16/10;
    }
    .card h3{
        font-size:22px;
        line-height:1.15;
        letter-spacing:-.025em;
        margin-bottom:10px;
    }
    .card .category{font-size:10px;letter-spacing:1.6px;margin-bottom:8px}
    .card .excerpt{
        font-size:14px;
        line-height:1.55;
        color:var(--text-soft);
    }
    .card .meta{font-size:10px;margin-top:12px}

    /* card rankeado */
    .card-ranked .rank-num{
        top:12px;left:12px;
        padding:8px 14px;
        font-size:16px;
    }

    /* ===== SECTIONS ===== */
    .section-title{
        margin:32px 0 16px;
        padding-bottom:12px;
        gap:12px;
    }
    .section-title h2{
        font-size:28px;
        letter-spacing:-.025em;
    }
    .section-title::before{width:60px}
    .section-title .more{font-size:10px}

    /* ===== TOPBAR ===== */
    .topbar{padding:8px 0}
    .topbar-inner{gap:10px}
    .topbar-left{gap:12px}
    .topbar-date{font-size:10px}
    .weather-widget{font-size:10px}
    .topbar-social{display:none}
    /* toggle menor no mobile */
    .theme-toggle{width:40px;height:22px}
    .theme-toggle .theme-icon{width:18px;height:18px}
    [data-theme="dark"] .theme-toggle .theme-icon-sun{transform:translateY(-50%) translateX(18px)}
    [data-theme="dark"] .theme-toggle .theme-icon-moon{transform:translateY(-50%) translateX(18px)}

    /* ===== HEADER ===== */
    .site-header{padding:14px 0 0}
    .header-grid{grid-template-columns:auto 1fr auto;gap:10px;text-align:center;align-items:center}
    .header-meta{display:none}

    /* Logo compacta */
    .site-logo{font-size:28px;text-align:center}
    .site-logo::after{display:none}
    .custom-logo-wrap{text-align:center}
    .custom-logo-wrap img{max-height:40px !important;max-width:160px !important;width:auto !important;height:auto !important;display:inline-block !important}

    /* Hambúrguer slim */
    .menu-toggle{
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:8px 10px;
        background:transparent;
        color:var(--text);
        border:none;
        cursor:pointer;
    }
    .menu-toggle svg{width:18px;height:18px;display:block}
    .menu-toggle span{font-size:8px;font-weight:800;letter-spacing:1.5px;line-height:1}

    .header-actions{justify-content:flex-end}
    .search-trigger{padding:8px;font-size:0;gap:0;border:none;background:transparent}
    .search-trigger svg{width:20px;height:20px}
    .search-trigger span{display:none}

    /* esconde nav normal */
    .main-nav{display:none}

    /* ===== BREAKING BAR ===== */
    .breaking-bar{height:38px}
    .breaking-label{padding:0 14px;font-size:10px;gap:8px}
    .breaking-label span:not(.pulse){display:none}
    .ticker-item{font-size:12px}

    /* ===== BANNERS MOBILE — tamanhos adequados ===== */
    .banner-horizontal{
        margin:28px 0;
        padding:0 20px;
    }
    .banner-horizontal .ad-block,
    .banner-horizontal .ad-placeholder{
        max-width:100%;
    }
    .banner-horizontal .ad-placeholder{
        min-height:90px;
        aspect-ratio:auto;
        padding:20px 16px;
    }
    .banner-horizontal .guima-banner-link{
        aspect-ratio:auto;
        max-width:100%;
    }
    .banner-horizontal .guima-banner-link img{
        width:100%;
        height:auto;
        object-fit:contain;
    }
    .ad-block,.ad-placeholder{margin:20px auto}
    .banner-mobile-only{display:block}

    /* ===== SINGLE POST ===== */
    .single-post-content h1{font-size:32px;letter-spacing:-.03em}
    .single-post-content .lede{font-size:18px;padding-left:14px}
    .single-post-content .post-body{font-size:17px;line-height:1.7}
    .single-post-content .post-meta{gap:10px;font-size:10px}
    .related-grid{grid-template-columns:1fr;gap:0}
    .related-grid .card{padding:20px 0;border-bottom:1px solid var(--border)}
    .related-grid .card:first-child{padding-top:0}
    .related-grid .card:last-child{border-bottom:none;padding-bottom:0}

    /* ===== SHARE BUTTONS ===== */
    .share-buttons{
        gap:8px;
        padding:16px 0 20px;
        flex-wrap:wrap;
    }
    .share-label{width:100%;margin-bottom:4px}
    .share-btn{
        padding:9px 13px;
        font-size:10px;
        gap:6px;
        flex:1 1 auto;
        justify-content:center;
        min-width:0;
    }
    .share-btn svg{width:13px;height:13px}

    /* ===== BACK TO TOP — não atrapalha mais ===== */
    .back-to-top{
        bottom:16px;
        right:16px;
        width:46px;
        height:46px;
    }
    .back-to-top svg{width:18px;height:18px}

    /* ===== MAIN + SIDEBAR ===== */
    .main-with-sidebar{
        grid-template-columns:1fr;
        gap:32px;
        padding:28px 0;
    }

    /* ===== FOOTER ===== */
    .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:30px}
    .footer-grid-simple{gap:32px}
    .contact-item{padding:14px 16px;gap:14px}
    .contact-icon{width:44px;height:44px}
    .contact-info strong{font-size:14px}
    .site-footer{padding:50px 0 20px;margin-top:50px}

    /* ===== HEADER MOBILE (sticky menor) ===== */
    .site-header{
        position:sticky;
        top:0;
        z-index:100;
    }
    .site-header.is-shrunk{padding:10px 0 0;box-shadow:0 2px 12px rgba(0,0,0,.08)}
    .site-header.is-shrunk .site-logo{font-size:22px}
    .site-header.is-shrunk .custom-logo-wrap img{max-height:30px !important;max-width:120px !important}
    .site-header.is-shrunk .site-logo::after{display:none}
    .site-header.is-shrunk .main-nav{display:none}
}

/* ===== EXTRA SMALL — celulares pequenos ===== */
@media (max-width:380px){
    .container{padding:0 16px}
    .hero-main{min-height:480px;height:78vh}
    .hero-main h2{font-size:28px}
    .hero-main .excerpt{font-size:14px}
    .card h3{font-size:20px}
    .side-card{grid-template-columns:1fr 92px;gap:12px}
    .side-card .info{padding-left:22px}
    .side-card h3{font-size:16px}
    .section-title h2{font-size:24px}
    .share-btn{font-size:9px;padding:8px 10px}
    .site-logo{font-size:28px}
    .back-to-top{width:42px;height:42px;bottom:14px;right:14px}
    .back-to-top svg{width:16px;height:16px}
}

/* ── CARROSSEL MOBILE ───────────────────────────────────── */
.hero-carousel {
    display: none;
    position: relative;
    width: 100%;
    height: 75vw;
    max-height: 420px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #111;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-thumb {
    position: absolute;
    inset: 0;
}

.carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
}

.carousel-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px;
    z-index: 2;
}

.carousel-content .category span {
    background: #e10600;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 8px;
}

.carousel-content h2 {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-content .meta {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    letter-spacing: .08em;
}

/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
    z-index: 3;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.carousel-dot.active {
    background: #e10600;
    transform: scale(1.3);
}

/* Barra de progresso */
.carousel-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.15);
    z-index: 3;
}

.carousel-bar {
    height: 100%;
    width: 0%;
    background: #e10600;
    transition: width linear;
}

/* Mostra carrossel só no mobile, esconde hero normal */
@media (max-width: 768px) {
    .hero-carousel { display: block; }
    .hero-block { display: none; }
}

/* ── COMMENTS CTA BANNER ────────────────────────────────── */
.comments-cta-banner {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 32px 0 8px;
    border-left: 4px solid #e10600;
}

.comments-cta-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.comments-cta-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.comments-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comments-cta-text strong {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.comments-cta-text span {
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.comments-cta-arrow {
    font-size: 22px;
    color: #e10600;
    flex-shrink: 0;
    animation: bounce 1.2s ease-in-out infinite;
}

@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}


/* ── OKTO MODAL POPUP ───────────────────────────────────── */
/* ============================================================
   OKTO MODAL — clean green
   ============================================================ */
.okto-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,18,12,.72);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:9999;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    animation:oktoFadeIn .3s ease;
}
.okto-modal-overlay.active{display:flex;}

@keyframes oktoFadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
@keyframes oktoSlideUp{
    from{transform:translateY(32px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}

.okto-modal{
    background:#fff;
    border-radius:24px 24px 0 0;
    padding:0;
    max-width:420px;
    width:100%;
    text-align:left;
    position:relative;
    animation:oktoSlideUp .38s cubic-bezier(.22,1,.36,1);
    overflow:hidden;
}

/* topo verde */
.okto-modal-header{
    background:#0d5c2e;
    padding:28px 24px 22px;
    position:relative;
}

/* pílula decorativa */
.okto-modal-header::before{
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:36px;
    height:4px;
    background:rgba(255,255,255,.25);
    border-radius:2px;
}

.okto-modal-close{
    position:absolute;
    top:14px;
    right:16px;
    background:rgba(255,255,255,.15);
    border:none;
    width:28px;
    height:28px;
    border-radius:50%;
    font-size:16px;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s;
    line-height:1;
}
.okto-modal-close:hover{background:rgba(255,255,255,.28);}

.okto-modal-logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}
.okto-modal-logo-badge{
    width:36px;
    height:36px;
    background:#fff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
    color:#0d5c2e;
    letter-spacing:-.02em;
}
.okto-modal-logo-name{
    font-size:13px;
    font-weight:700;
    color:rgba(255,255,255,.75);
    letter-spacing:.08em;
    text-transform:uppercase;
}

.okto-modal-title{
    font-size:20px;
    font-weight:800;
    color:#fff;
    line-height:1.25;
    margin:0;
    letter-spacing:-.02em;
}

/* corpo */
.okto-modal-body{
    padding:20px 24px 24px;
}

.okto-modal-text{
    font-size:14px;
    color:#555;
    line-height:1.65;
    margin:0 0 20px;
}
.okto-modal-text strong{color:#0d5c2e;font-weight:700;}

.okto-modal-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#0d5c2e;
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    padding:14px 20px;
    border-radius:12px;
    text-decoration:none;
    margin-bottom:10px;
    transition:background .2s,transform .15s;
}
.okto-modal-cta:hover{background:#0a4a24;color:#fff;transform:translateY(-1px);}
.okto-modal-cta svg{flex-shrink:0;}

.okto-modal-dismiss{
    display:block;
    width:100%;
    background:none;
    border:none;
    color:#aaa;
    font-size:13px;
    cursor:pointer;
    padding:4px;
    text-align:center;
    transition:color .2s;
    font-family:inherit;
}
.okto-modal-dismiss:hover{color:#444;}

@media(min-width:769px){
    .okto-modal-overlay{display:none !important;}
}