/* ==========================================================================
   Antigravity Magazine Engine — Mobile-First Redesign
   ========================================================================== */

:root {
    --text-dark:  #1e293b;
    --text-body:  #475569;
    --text-muted: #94a3b8;
    --bg-white:   #ffffff;
    --bg-gray:    #f1f5f9;
    --accent:     #0284c7;
    --accent-dark:#0369a1;
    --border:     #e2e8f0;
    --font-main:  'Inter', sans-serif;
    --container:  1200px;
    --radius:     12px;
    --header-h-desktop: 72px;
    --header-h-mobile:  112px; /* topbar 56 + search 56 */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-main);
    background: var(--bg-white);
    color: var(--text-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; transition: opacity .2s; }

/* ====================================================
   CONTAINERS
==================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.row         { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.col-main    { flex: 1 1 68%; min-width: 0; }
.col-sidebar { flex: 1 1 28%; }

@media (max-width: 1024px) {
    .col-main, .col-sidebar { flex: 1 1 100%; }
    .col-sidebar { margin-top: 2.5rem; }
}

/* ====================================================
   HEADER — DESKTOP (≥ 769px)
==================================================== */
.site-header--desktop {
    display: flex;
    background: #fff;
    border-bottom: 2px solid var(--border);
    position: sticky; top: 0; z-index: 200;
    height: var(--header-h-desktop);
    align-items: center;
}
.site-header--mobile { display: none; }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
}

.logo            { font-size: 1.8rem; font-weight: 900; color: #000; letter-spacing: -2px; display: flex; align-items: center; }
.logo span       { color: var(--accent); }
.site-logo-img   { max-height: 56px; width: auto; display: block; object-fit: contain; }



.nav-menu      { display: flex; gap: 1.25rem; align-items: center; }
.nav-menu a    { font-weight: 700; font-size: .82rem; color: #334155; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.nav-menu a:hover { color: var(--accent); }

/* ====================================================
   HEADER — MOBILE (≤ 768px)
==================================================== */
@media (max-width: 768px) {
    .site-header--desktop { display: none; }
    .site-header--mobile  {
        display: block;
        background: #fff;
        border-bottom: 2px solid var(--border);
        position: sticky; top: 0; z-index: 200;
        box-shadow: 0 2px 12px rgba(0,0,0,.07);
    }

    /* Linha topo: logo + hambúrguer */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        height: 56px;
    }

    .logo--mobile         { font-size: 1.4rem; }
    .site-logo-img--mobile{ max-height: 40px; }

    /* Hambúrguer */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 8px;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 2.5px;
        background: #334155;
        border-radius: 4px;
        transition: transform .3s, opacity .3s;
        transform-origin: center;
    }
    /* Animação X quando aberto */
    .hamburger--open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .hamburger--open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger--open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }



    /* Menu Sanfona */
    .mobile-nav {
        max-height: 0;
        overflow: hidden;
        background: #fff;
        border-top: 1px solid var(--border);
        transition: max-height .35s cubic-bezier(.4,0,.2,1);
    }
    .mobile-nav--open {
        max-height: 80vh;
        overflow-y: auto;
    }
    .mobile-nav__item {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .95rem 1.25rem;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-dark);
        border-bottom: 1px solid var(--bg-gray);
        letter-spacing: -.01em;
    }
    .mobile-nav__item svg   { color: var(--accent); flex-shrink: 0; }
    .mobile-nav__item:hover { background: var(--bg-gray); color: var(--accent); }
    .mobile-nav__item:active{ background: #dbeafe; }

    /* offset body para o header sticky */
    body { padding-top: 0; }
}

/* ====================================================
   MAGAZINE GRID (1 LARGE + 4 SMALL)
==================================================== */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 240px);
    gap: 1rem;
    margin: 1.5rem 0 3rem;
}
.magazine-item         { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.magazine-item img     { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s; }
.magazine-item:hover img { opacity: .6; }
.magazine-content      { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); color: #fff; z-index: 2; }
.magazine-title        { font-size: 1rem; font-weight: 800; line-height: 1.15; margin-top: .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.magazine-large        { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.magazine-large .magazine-title { font-size: 2rem; -webkit-line-clamp: 4; }

.badge-cat {
    position: absolute; top: .875rem; left: .875rem; z-index: 10;
    background: var(--accent); color: #fff;
    font-size: .62rem; font-weight: 900;
    padding: 3px 9px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 1px;
}

@media (max-width: 900px) {
    .magazine-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .magazine-large { grid-column: 1 / span 2; aspect-ratio: 16/9; }
    .magazine-item  { aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
    /* Mobile: vira lista vertical */
    .magazine-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
        margin: 1rem 0 2rem;
    }
    .magazine-large,
    .magazine-item  {
        grid-column: auto; grid-row: auto;
        aspect-ratio: 16/9;
        border-radius: 10px;
    }
    .magazine-large .magazine-title { font-size: 1.25rem; }
    .magazine-title { font-size: .95rem; }
    .magazine-content { padding: .875rem 1rem; }
}

/* ====================================================
   SECTION TITLES
==================================================== */
.section-block  { margin-bottom: 4rem; }
.section-title  { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; color: #000; margin-bottom: 1.75rem; border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: .4rem; }

@media (max-width: 600px) {
    .section-title  { font-size: 1.1rem; margin-bottom: 1.25rem; }
    .section-block  { margin-bottom: 2.5rem; }
}

/* ====================================================
   NEWS CARD G1
==================================================== */
.news-card-g1 {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}
.news-card-thumb {
    flex: 0 0 220px;
    height: 148px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--bg-gray);
}
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card-g1:hover .news-card-thumb img { transform: scale(1.04); }
.news-card-body  { flex: 1; min-width: 0; }
.news-card-meta  { font-size: .72rem; font-weight: 900; color: var(--accent); text-transform: uppercase; margin-bottom: .6rem; }
.news-card-title { font-size: 1.3rem; font-weight: 900; color: #000; line-height: 1.2; margin-bottom: .75rem; }
.news-card-excerpt { font-size: .95rem; color: var(--text-body); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Mobile news card — imagem em cima */
@media (max-width: 600px) {
    .news-card-g1 {
        flex-direction: column;
        gap: .75rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .news-card-thumb {
        flex: none;
        width: 100%;
        height: 200px;
        border-radius: 10px;
    }
    .news-card-title   { font-size: 1.15rem; margin-bottom: .5rem; }
    .news-card-excerpt { font-size: .9rem; -webkit-line-clamp: 3; }
}

/* ====================================================
   SIDEBAR RANKING
==================================================== */
.sidebar-rank { display: flex; flex-direction: column; gap: 1.25rem; }
.rank-item    { display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; }
.rank-number  { font-size: 2rem; font-weight: 900; color: #e2e8f0; line-height: 1; min-width: 36px; text-align: center; }
.rank-title   { font-size: .95rem; font-weight: 800; color: #334155; line-height: 1.3; }
.rank-item:hover .rank-number { color: var(--accent); }

/* ====================================================
   ADS
==================================================== */
.ads-wrapper { margin: 2.5rem 0; width: 100%; text-align: center; }
@media (max-width: 600px) { .ads-wrapper { margin: 1.5rem 0; } }

/* ====================================================
   ARTIGO (noticia.php)
==================================================== */
.ag-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

.ag-article-header { text-align: center; margin-bottom: 3rem; max-width: 860px; margin-left: auto; margin-right: auto; }
.ag-article-h1 {
    font-size: 2.6rem; font-weight: 900; line-height: 1.1;
    color: var(--text-dark); margin-bottom: 1.25rem; letter-spacing: -1.5px;
}
.ag-article-lead {
    font-size: 1.2rem; color: var(--text-body); font-weight: 500;
    margin-bottom: 1.75rem; max-width: 760px; margin-left: auto; margin-right: auto;
}
.ag-article-hero {
    width: 100%; aspect-ratio: 16/9;
    border-radius: 16px; overflow: hidden;
    margin-bottom: 3.5rem;
    background: #f8fafc; border: 1px solid var(--border);
}
.ag-article-hero img { width: 100%; height: 100%; object-fit: cover; }

.ag-article-content { font-size: 1.15rem; line-height: 1.85; color: #1e293b; max-width: 780px; margin: 0 auto; }
.ag-article-content p  { margin-bottom: 1.75rem; }
.ag-article-content h2 { font-size: 1.65rem; font-weight: 800; color: #000; margin: 3rem 0 1.25rem; }
.ag-article-content h3 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 1rem; }
.ag-article-content ul, .ag-article-content ol { padding-left: 1.5rem; margin-bottom: 1.75rem; }
.ag-article-content li { margin-bottom: .5rem; }
.ag-article-content a  { color: var(--accent); text-decoration: underline; }
.ag-article-content strong { color: var(--text-dark); }

.ag-row        { display: flex; flex-wrap: wrap; gap: 3rem; }
.ag-col-main   { flex: 1 1 680px; }
.ag-col-sidebar{ flex: 1 1 280px; }

.breadcrumb    { font-size: .78rem; font-weight: 800; color: var(--text-muted); margin: 1.5rem 0; text-transform: uppercase; }
.breadcrumb a  { color: var(--accent); }

.ag-widget-title { font-size: .88rem; font-weight: 900; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: .4rem; margin-bottom: 1.25rem; }

/* MOBILE — artigo */
@media (max-width: 768px) {
    .ag-article-header { margin-bottom: 1.75rem; }
    .ag-article-h1 { font-size: 1.75rem; letter-spacing: -.5px; margin-bottom: 1rem; text-align: left; }
    .ag-article-lead { font-size: 1.05rem; text-align: left; }
    .ag-article-hero { border-radius: 10px; margin-bottom: 2rem; }
    .ag-article-content { font-size: 1.05rem; line-height: 1.8; }
    .ag-article-content h2 { font-size: 1.35rem; }
    .ag-article-content h3 { font-size: 1.15rem; }
    .ag-col-sidebar { display: none; } /* sidebar oculta no mobile do artigo */
    .breadcrumb { text-align: left; font-size: .72rem; }
    .ag-article-header { text-align: left; }
}

/* ====================================================
   SHARING BAR
==================================================== */
.ag-sharing-bar { display: flex; gap: .75rem; align-items: center; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.ag-share-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: #fff; transition: transform .2s, opacity .2s, box-shadow .2s;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.ag-share-btn svg   { width: 20px; height: 20px; fill: currentColor; }
.ag-share-btn:hover { transform: scale(1.1); opacity: .9; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-whatsapp { background: #25d366; }
.btn-facebook { background: #1877f2; }
.btn-x        { background: #000; }
.btn-linkedin { background: #0077b5; }
.btn-telegram { background: #0088cc; }

/* ====================================================
   FOOTER
==================================================== */
.site-footer   { background: #000; color: #fff; padding: 3.5rem 0; margin-top: 4rem; font-size: .85rem; }
.footer-links  { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.footer-links a{ font-weight: 700; color: #cbd5e1; }
.copyright     { opacity: .5; text-align: center; }

@media (max-width: 600px) {
    .site-footer { padding: 2.5rem 0; }
    .footer-links{ gap: 1rem; font-size: .8rem; }
}

/* ====================================================
   UTILITÁRIOS GERAIS
==================================================== */
main.container, main.ag-container { padding-top: 1.5rem; }
@media (max-width: 600px) { main.container, main.ag-container { padding-top: 1rem; } }
body.no-scroll { overflow: hidden; }

/* ====================================================
   GLOBAL SEARCH OVERLAY (GLOBO.COM STYLE)
==================================================== */
.btn-search-trigger {
    background: none; border: none; cursor: pointer; color: var(--text-dark);
    display: flex; align-items: center; justify-content: center;
    padding: 0.25rem; transition: color 0.2s;
}
.btn-search-trigger:hover { color: var(--accent); }
.mobile-trigger { padding: 8px; }

.search-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}
.search-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; }

.search-overlay__content { width: 100%; max-width: 900px; text-align: left; position: relative; padding: 0 1.5rem; transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.search-overlay[aria-hidden="false"] .search-overlay__content { transform: translateY(0); }

.search-overlay__close {
    position: absolute; top: -60px; right: 1.5rem;
    background: none; border: none; cursor: pointer;
    color: var(--text-dark); transition: transform 0.2s, color 0.2s;
}
.search-overlay__close:hover { transform: scale(1.15) rotate(90deg); color: var(--accent); }

.search-overlay__label { display: block; font-size: .85rem; font-weight: 800; color: var(--accent); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; }

.search-overlay__form { display: flex; align-items: center; border-bottom: 4px solid var(--text-dark); padding-bottom: 0.5rem; }
.search-overlay__form input {
    flex: 1; border: none; background: transparent; outline: none;
    font-size: 4rem; font-weight: 900; font-family: var(--font-main);
    color: var(--text-dark); padding: 0; height: 100%; letter-spacing: -2px;
}
.search-overlay__form input::placeholder { color: #cbd5e1; font-weight: 800; }
.search-overlay__form button {
    background: none; border: none; cursor: pointer; color: var(--text-dark);
    margin-left: 1rem; transition: transform 0.2s;
}
.search-overlay__form button:hover { color: var(--accent); transform: scale(1.1); }

@media (max-width: 768px) {
    .search-overlay__close { top: -80px; right: 1rem; }
    .search-overlay__form input { font-size: 2.2rem; letter-spacing: -1px; }
    .search-overlay__label { font-size: 0.75rem; letter-spacing: 1px; }
}

/* ====================================================
   COOKIE BANNER
==================================================== */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #1e293b; color: #f8fafc; z-index: 10000;
    transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-banner[aria-hidden="false"] { transform: translateY(0); }
.cookie-banner__content {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.25rem 1rem;
}
.cookie-banner__text { font-size: 0.9rem; line-height: 1.5; color: #cbd5e1; margin: 0; flex: 1; text-align: left; }
.cookie-banner__text a { color: #38bdf8; text-decoration: underline; font-weight: 700; transition: color 0.2s; }
.cookie-banner__text a:hover { color: #7dd3fc; }
.cookie-banner__btn {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 0.75rem 1.5rem; font-weight: 800; font-size: 0.9rem;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
    white-space: nowrap; flex-shrink: 0;
}
.cookie-banner__btn:hover { background: var(--accent-dark); }
.cookie-banner__btn:active{ transform: scale(0.96); }

@media (max-width: 768px) {
    .cookie-banner__content { flex-direction: column; text-align: center; gap: 1rem; padding: 1.25rem; }
    .cookie-banner__text { text-align: center; }
    .cookie-banner__btn { width: 100%; padding: 1rem; }
}