/* ==========================================================================
   ENTRERIOS — FUNDAÇÃO DE ESTILO
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---- Tokens ---- */
:root {
  --font-display: 'Familjen Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --color-bg: #EAECEE;
  --color-surface: #FFFFFF;
  --color-ink: #12181F;
  --color-slate: #5B6570;
  --color-line: #D3D8DC;

  --color-azul: #1F4E79;
  --color-azul-bright: #2B6CA3;
  --color-azul-wash: #DEE9F1;
  --color-azul-mist: #DCEBF5;
  --color-azul-deep: #163C5E;

  --color-dark: #12181F;
  --color-dark-surface: #1B2530;
  --color-dark-line: #2C3947;
  --color-dark-text: #F2F4F6;
  --color-dark-slate: #96A3AF;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);

  --radius-sm: 3px;
  --radius-md: 6px;
  --content-max-width: 1240px;
  --focus-ring: 0 0 0 3px var(--color-azul-wash), 0 0 0 1px var(--color-azul);
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }

table { max-width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}
::selection { background: var(--color-azul-wash); color: var(--color-azul); }

.wrap { max-width: var(--content-max-width); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.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; }
.no-scroll { overflow: hidden; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }

.logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.logo img { max-height: 38px; width: auto; display: block; }

.topbar-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--color-line); border-radius: var(--radius-sm);
    padding: 9px 16px; font-family: var(--font-body);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
    background: none; color: var(--color-ink) !important; white-space: nowrap;
}
.topbar-btn:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.topbar-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-toggle { display: none; }
.topbar-icons-group { display: contents; }

/* ---- Subnav ---- */
.subnav { background: var(--color-dark); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 12px rgba(18, 24, 31, 0.15); }
.subnav-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); padding: 12px 0; }
.subnav-menu a {
    color: var(--color-dark-text) !important; font-family: var(--font-body);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.subnav-menu a:hover { color: var(--color-azul-mist) !important; }

/* ---- Header — mobile: icons only, hamburger left, search+magazine grouped right ---- */
@media (max-width: 680px) {
    .topbar { padding-top: 10px; padding-bottom: 10px; }
    .btn-label { display: none; }
    .topbar-btn { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; border: none; }
    .topbar-btn svg { width: 20px; height: 20px; }
    .logo img { max-height: 28px; }
    .nav-toggle { display: inline-flex; }
    .topbar-icons-group { display: flex; align-items: center; gap: 2px; }
    .btn-search { border-right: 1px solid var(--color-line); padding-right: 12px; margin-right: 4px; }

    .subnav { display: none; }
    .subnav.is-open { display: block; }
    .subnav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0; }
    .subnav-menu li { border-top: 1px solid var(--color-dark-line); }
    .subnav-menu li:first-child { border-top: none; }
    .subnav-menu a { display: block; padding: 14px var(--space-4); min-height: 44px; }
}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
    position: fixed; inset: 0; z-index: 600;
    display: flex; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__backdrop { position: absolute; inset: 0; background-color: rgba(18, 24, 31, 0.6); backdrop-filter: blur(3px); cursor: pointer; }
.search-overlay__panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 640px; max-height: min(600px, 80vh);
    margin: 8vh 1.25rem 0;
    display: flex; flex-direction: column;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px rgba(18, 24, 31, 0.28);
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform 0.2s ease;
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }

.search-overlay__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); flex-shrink: 0; }
.search-overlay__bar-icon { width: 20px; height: 20px; color: var(--color-slate); flex-shrink: 0; }
.search-overlay__bar input[type="search"] { flex: 1; min-width: 0; background: transparent; border: none; color: var(--color-ink) !important; font-family: var(--font-body); font-size: var(--text-lg); }
.search-overlay__bar input[type="search"]:focus { outline: none; }
.search-overlay__bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-overlay__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--color-slate) !important; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.search-overlay__close svg { width: 14px; height: 14px; }
.search-overlay__close:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }

.search-overlay__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-line); flex-shrink: 0; }
.search-overlay__filter {
    display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3);
    font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-slate) !important; border: 1px solid var(--color-line); border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.search-overlay__filter:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.search-overlay__filter.is-active { background-color: var(--color-azul); border-color: var(--color-azul); color: var(--color-dark-text) !important; }

.search-overlay__results { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-3); }
.search-overlay__results.is-loading { opacity: 0.5; }
.search-overlay__hint { margin: 0; padding: var(--space-6) var(--space-4); text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-slate); }

.search-overlay__section { padding: var(--space-2) var(--space-2) var(--space-1); }
.search-overlay__section-label { margin: 0 0 var(--space-2); padding: 0 var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-azul); }

.search-overlay__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); transition: background-color 0.12s ease; }
.search-overlay__item:hover, .search-overlay__item:focus-visible { background-color: var(--color-bg); outline: none; }
.search-overlay__item-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg); }
.search-overlay__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-overlay__item-thumb--empty { background: linear-gradient(135deg, var(--color-azul-bright), var(--color-bg)); }
.search-overlay__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-overlay__item-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-overlay__item-sub { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-slate) !important; }

.search-overlay__viewall { display: block; margin: var(--space-2) var(--space-1) var(--space-3); padding: var(--space-3); text-align: center; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-azul) !important; border-top: 1px solid var(--color-line); }
.search-overlay__viewall:hover { color: var(--color-azul-bright) !important; }

.search-overlay__footer { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-line); flex-shrink: 0; }
.search-overlay__footer span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-slate); }
.search-overlay__footer kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-family: var(--font-body); font-size: 11px; color: var(--color-slate); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 3px; }

@media (max-width: 640px) {
    .search-overlay__panel { margin-top: 0; max-height: 100vh; height: 100%; border-radius: 0; }
    .search-overlay__footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .search-overlay, .search-overlay__panel, .search-overlay__filter, .search-overlay__item,
    .topbar-btn, .subnav-menu a,
    .hvc-track, .hvc-dot, .hvc-dot::before, .rail-dot, .rail-dot::before { transition: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-dark); color: var(--color-dark-text); }

.footer-top {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-6); padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-dark-line);
}
.footer-brand .logo img,
.footer-brand img { max-height: 30px; width: auto; filter: brightness(0) invert(1); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--color-dark-line); border-radius: 50%;
    color: var(--color-dark-text) !important;
}
.footer-social a:hover { border-color: var(--color-azul-mist); color: var(--color-azul-mist) !important; }
.footer-social svg { width: 16px; height: 16px; }

.footer-links { padding-top: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-dark-line); }
.footer-menu { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.footer-menu a { font-size: var(--text-xs); color: var(--color-dark-slate) !important; }
.footer-menu a:hover { color: var(--color-dark-text) !important; }

.footer-bottom { padding-top: var(--space-4); padding-bottom: var(--space-6); }
.footer-bottom p { font-size: var(--text-xs); color: var(--color-dark-slate); }

@media (max-width: 680px) {
    .footer-top { flex-direction: column; gap: var(--space-4); text-align: center; padding-top: var(--space-5); }
    .footer-menu { justify-content: center; }
    .footer-bottom { text-align: center; }
}

/* ---- Subnav — active section ---- */
.subnav-menu li { position: relative; }
.subnav-menu .current-menu-item > a {
    color: var(--color-azul-mist) !important;
    font-weight: 700;
}
.subnav-menu .current-menu-item > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -12px;
    height: 2px;
    background: var(--color-azul-mist);
    border-radius: 2px;
}

/* ==========================================================================
   SINGLE ARTICLE
   ========================================================================== */
.article-container { max-width: 720px; }

.article-header { padding-top: var(--space-7); padding-bottom: var(--space-5); }
.article-eyebrow { margin-bottom: var(--space-3); }
.article-title { font-size: var(--text-4xl); line-height: 1.08; margin-bottom: var(--space-4); }
.article-dek { font-size: var(--text-lg); line-height: 1.5; color: var(--color-slate); margin-bottom: var(--space-5); }

.article-byline { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.byline-row-authors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.byline-author { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
/* On single posts the byline is a link to the author archive; keep it looking
   like the plain byline until hover/focus. Signatures without a user account
   stay a <span> and are unaffected. */
a.byline-author { text-decoration: none; color: inherit; }
a.byline-author:hover, a.byline-author:focus-visible { text-decoration: underline; }
.byline-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.byline-reading-time, .byline-meta { font-size: var(--text-xs); color: var(--color-slate); }
.byline-updated { font-weight: 700; color: var(--color-azul); }

.article-media { padding-bottom: var(--space-6); }
.article-image { width: 100%; border-radius: var(--radius-md); }
.article-caption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-slate); text-align: center; }

.article-body { padding-bottom: var(--space-8); font-size: var(--text-lg); line-height: 1.75; }
.article-body p { margin-bottom: var(--space-5); }
.article-body h2 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-4); }
.article-body h3 { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-3); }
.article-body a { color: var(--color-azul) !important; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--color-azul-bright) !important; }
.article-body strong { font-weight: 700; }
.article-body blockquote {
    margin: var(--space-6) 0; padding: var(--space-2) 0 var(--space-2) var(--space-5);
    border-left: 3px solid var(--color-azul);
    font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--color-ink);
}
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--space-2); }
.article-body img { border-radius: var(--radius-md); margin: var(--space-5) 0; }
.article-body figcaption { font-size: var(--text-xs); color: var(--color-slate); text-align: center; margin-top: var(--space-2); }

.revista-cta {
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--color-azul-wash);
    border-left: 3px solid var(--color-azul);
    border-radius: var(--radius-md);
}
.revista-cta p { font-family: var(--font-display); font-style: italic; font-size: var(--text-base); color: var(--color-ink); margin: 0 0 var(--space-4); }
.article-body .revista-cta-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-azul); color: #fff !important; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); text-decoration: none !important;
    transition: background 0.15s ease;
}
.article-body .revista-cta-btn:hover { background: var(--color-azul-bright); color: #fff !important; }

@media (max-width: 680px) {
    .article-title { font-size: var(--text-3xl); }
    .article-header { padding-top: var(--space-5); }
}

/* Legacy [caption] shortcode wrapper — WordPress writes a fixed inline width
   directly into old content, which needs !important to override */
.article-body .wp-caption { max-width: 100% !important; width: auto !important; }
.article-body .wp-caption img { width: 100%; height: auto; }
.article-body .wp-caption-text { font-size: var(--text-xs); color: var(--color-slate); text-align: center; margin-top: var(--space-2); font-style: normal; }

/* ---- Article share row ---- */
.article-share { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--color-line); border-radius: var(--radius-sm);
    color: var(--color-slate) !important;
}
.share-btn:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.share-btn svg { width: 16px; height: 16px; }
.share-btn i { font-size: 16px; }

/* Instagram embeds: the same soft panel as the LEIA MAIS card around
   Instagram's own card, which we cannot restyle, with the caption below. */
.article-body .instagram-frame {
    margin: var(--space-6) 0; padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-md);
}
.instagram-frame .instagram-media { margin: 0 auto !important; }
/* Before embed.js swaps in the card, the placeholder is a plain link, not a quote. */
.article-body blockquote.instagram-media {
    border-left: 0; padding: 0; font-family: var(--font-body); font-style: normal; font-size: var(--text-sm);
}
.article-body .instagram-frame figcaption { margin: var(--space-3) 0 0; }

.leia-tambem-card {
    display: flex; align-items: center; gap: var(--space-4);
    margin: var(--space-6) 0 !important; padding: var(--space-3);
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-md);
    text-decoration: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.leia-tambem-card:hover { border-color: var(--color-azul); background: var(--color-azul-wash); }
.leia-tambem-image-wrap { flex-shrink: 0; width: 88px; height: 88px; border-radius: var(--radius-sm); overflow: hidden; }
.leia-tambem-image-wrap img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.leia-tambem-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leia-tambem-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-azul) !important; }
.leia-tambem-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-ink) !important; line-height: 1.3; }

/* ---- Columnist banner ---- */
.columnist-banner-section { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.columnist-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.columnist-info { display: flex; align-items: center; gap: var(--space-4); }
.columnist-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.columnist-text { display: flex; flex-direction: column; gap: 4px; }
.columnist-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
.columnist-about { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-azul) !important; display: inline-flex; align-items: center; gap: 4px; }
.columnist-about:hover { color: var(--color-azul-bright) !important; }
.columnist-social { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.columnist-social-label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-slate); }
.columnist-social-icons { display: flex; gap: var(--space-2); }
.columnist-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink) !important; }
.columnist-social-icons a:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.columnist-social-icons i { font-size: 14px; }

@media (max-width: 680px) {
    .columnist-banner { flex-direction: column; align-items: flex-start; }
    .columnist-social { align-items: flex-start; }
}

/* ==========================================================================
   SECTION ARCHIVE
   ========================================================================== */
.section-masthead { position: relative; overflow: hidden; background-color: var(--color-azul-deep); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section-masthead .wrap { position: relative; }
.section-masthead-title { color: #fff; font-size: var(--text-4xl); }
.section-masthead-tagline { color: rgba(255,255,255,0.85); font-family: var(--font-body); font-size: var(--text-lg); margin-top: var(--space-2); }

.section-featured-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-line); }
.section-featured-card { display: block; }
.section-featured-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.section-featured-title { font-size: var(--text-2xl); line-height: 1.15; margin: var(--space-2) 0 var(--space-3); color: var(--color-ink); }
.section-featured-card:hover .section-featured-title { color: var(--color-azul); }
.section-featured-dek { font-size: var(--text-base); color: var(--color-slate); }

.section-mais-lidas { padding-top: var(--space-2); }
.mais-lidas-list { margin-top: var(--space-4); display: flex; flex-direction: column; }
.mais-lidas-item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.mais-lidas-item:first-child { border-top: none; }
.mais-lidas-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-line); flex-shrink: 0; }
.mais-lidas-title { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.mais-lidas-item:hover .mais-lidas-title { color: var(--color-azul); }

.section-grid-wrap { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }
.load-more-btn {
    padding: 12px 32px; border: 1px solid var(--color-line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.03em;
    color: var(--color-ink) !important; background: var(--color-surface);
}
.load-more-btn:hover:not(:disabled) { border-color: var(--color-azul); color: var(--color-azul) !important; }
.load-more-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 780px) {
    .section-featured-row { grid-template-columns: 1fr; }
}

.eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--color-azul) !important; text-transform: uppercase; }
/* Section headers on the homepage ("Entretenimento", "Mais lidas", ...). One
   step up from the base eyebrow so they read as section titles rather than as
   the article chapéu, which keeps the smaller .eyebrow size. */
.section-eyebrow { font-size: var(--text-sm); }
.tile-mark { display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 9px; height: 9px; gap: 1px; flex-shrink: 0; }
.tile-mark span { background: var(--color-azul); }
.tile-mark span:nth-child(2), .tile-mark span:nth-child(3) { background: var(--color-azul-bright); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.card {
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(18, 24, 31, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(18, 24, 31, 0.12); transform: translateY(-3px); }
/* Listing cards used to be one big <a>, which left no way to link the byline —
   a link cannot contain another link. The title's link is stretched over the
   whole card instead, so the card stays clickable, and .card-byline-link sits
   above that layer to take clicks on the author's name. */
.card, .colunista-card, .section-featured-card { position: relative; }
.card-stretch::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.card-byline-link { position: relative; z-index: 1; }
.card-byline-link:hover, .card-byline-link:focus-visible { text-decoration: underline; }
.card-image { aspect-ratio: 4/3; background: var(--color-bg); border-bottom: 1px solid var(--color-line); overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.card h4 { font-size: var(--text-base); line-height: 1.3; font-weight: 600; color: var(--color-ink) !important; margin: var(--space-3) var(--space-3) 0; }
.card h4:last-child { margin-bottom: var(--space-3); }
.card p { font-size: var(--text-xs); color: var(--color-slate); margin: 4px var(--space-3) var(--space-3); }
.card:hover h4 { color: var(--color-azul) !important; }
/* Colunas grid: the columnist's name as a solid navy tab flush with the
   image's bottom-left corner. A span, not a link, since the card is one <a>. */
#section-grid .card-image { position: relative; }
.card-columnist-tag {
    position: absolute; left: 0; bottom: 0; z-index: 1; max-width: calc(100% - var(--space-5));
    display: flex; padding: 4px 9px 3px;
    background: var(--color-azul); color: #fff; border-top-right-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em;
}
.card-columnist-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover .card-columnist-tag { background: var(--color-azul-deep); }

/* ==========================================================================
   AUTHOR / COLUMNIST PAGE
   ========================================================================== */
.author-masthead { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.author-masthead-inner { display: flex; align-items: flex-start; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.author-info { flex: 0 1 auto; min-width: 0; max-width: 480px; }
.author-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-name { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.author-meta { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-azul); font-weight: 600; margin-bottom: var(--space-2); }
.author-bio { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-slate); max-width: 60ch; margin-bottom: var(--space-3); }
.author-social { display: flex; gap: var(--space-2); }
.author-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink) !important; }
.author-social a:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.author-social i { font-size: 14px; }

.author-articles-wrap { padding-top: var(--space-6); padding-bottom: var(--space-7); }

.author-masthead-inner .columnist-social,
.author-masthead-inner .columnist-social-icons { align-items: flex-start !important; justify-content: flex-start !important; }
.columnist-social { margin-left: var(--space-6); }
.columnist-social-label { font-size: var(--text-sm) !important; font-weight: 700; }

@media (max-width: 680px) {
    .author-masthead-inner { flex-direction: column; text-align: center; }
    .author-bio { max-width: none; }
    .author-name { font-size: 1.7rem !important; }
}

/* ---- Author page grid: spacing + reinforced card style + sharper images ---- */
.author-articles-wrap .card-grid { margin-top: var(--space-6); }
.author-articles-wrap .card-image { aspect-ratio: 4/3 !important; background: var(--color-bg) !important; border: 1px solid var(--color-line) !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; }
.author-articles-wrap .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; image-rendering: auto; }
.author-articles-wrap .card h4 { margin-top: var(--space-2) !important; }

/* ---- Video display ---- */
.eyebrow-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: nowrap; }
.eyebrow-row .eyebrow { height: 22px; display: inline-flex; align-items: center; margin: 0; line-height: 1; }
.eyebrow-row .tile-mark { align-self: center; }
.video-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; background: var(--color-azul); color: var(--color-dark-text) !important; border-radius: 999px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; line-height: 1; box-sizing: border-box; }
.video-badge svg { display: block; flex-shrink: 0; }
.article-video-embed { border-radius: var(--radius-md); overflow: hidden; }
.article-video-embed iframe { width: 100% !important; border-radius: var(--radius-md); }

.article-video-poster { position: relative; cursor: pointer; border-radius: var(--radius-md); overflow: hidden; }
.article-video-poster img { display: block; }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(18,24,31,0.75); color: #fff; display: flex; align-items: center; justify-content: center; }
.video-play-btn svg { margin-left: 3px; }
.article-video-poster:hover .video-play-btn { background: var(--color-azul); }

/* ---- Video lightbox ---- */
.video-lightbox { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; }
.video-lightbox.is-open { opacity: 1; visibility: visible; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(18,24,31,0.92); backdrop-filter: blur(4px); cursor: pointer; }
.video-lightbox__panel { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 var(--space-5); }
.video-lightbox__frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.video-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-lightbox__close { position: absolute; top: -48px; right: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; }
.video-lightbox__close:hover { background: rgba(255,255,255,0.1); }
@media (max-width: 680px) {
    .video-lightbox__panel { margin: 0 var(--space-3); }
    .video-lightbox__close { top: -42px; }
}

/* ==========================================================================
   SEARCH RESULTS PAGE
   ========================================================================== */
.search-masthead { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding-top: var(--space-6); padding-bottom: var(--space-5); }
.search-masthead-title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.search-masthead-form { display: flex; align-items: center; gap: var(--space-3); max-width: 520px; padding: 10px var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.search-masthead-form svg { width: 18px; height: 18px; color: var(--color-slate); flex-shrink: 0; }
.search-masthead-form input { flex: 1; border: none; background: none; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink); }
.search-masthead-form input:focus { outline: none; }
.search-masthead-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-filter { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-slate) !important; border: 1px solid var(--color-line); border-radius: 999px; }
.search-filter:hover { border-color: var(--color-azul); color: var(--color-azul) !important; }
.search-filter.is-active { background: var(--color-azul); border-color: var(--color-azul); color: var(--color-dark-text) !important; }

.search-results-wrap { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.search-section-group { margin-bottom: var(--space-7); }
.search-section-group:last-child { margin-bottom: 0; }
.search-no-results { font-family: var(--font-body); color: var(--color-slate); padding: var(--space-6) 0; }

.search-section-eyebrow { margin-bottom: var(--space-5); }
.search-section-viewall { display: inline-block; margin-top: var(--space-5); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-azul) !important; }
.search-section-viewall:hover { color: var(--color-azul-bright) !important; }

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.error-404-wrap { padding-top: var(--space-8); padding-bottom: var(--space-8); display: flex; justify-content: center; }
.error-404-content { max-width: 520px; text-align: center; }
.error-404-code { display: block; font-size: 5rem; font-weight: 700; color: var(--color-azul-wash); line-height: 1; margin-bottom: var(--space-3); }
.error-404-title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.error-404-text { font-family: var(--font-body); color: var(--color-slate); margin-bottom: var(--space-6); }
.error-404-search { margin: 0 auto var(--space-5); }
.error-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.error-404-home { display: inline-block; padding: 12px 28px; background: var(--color-azul); color: var(--color-dark-text) !important; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); }
.error-404-home:hover { background: var(--color-azul-bright); }

.columnist-caption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-slate); display: block; margin-top: 2px; margin-bottom: 6px; }

/* ==========================================================================
   HOMEPAGE — HERO
   ========================================================================== */
.home-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding-top: var(--space-5); padding-bottom: var(--space-6); }
.home-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }

.hero-main { display: block; }
.hero-main-image { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/8; background: var(--color-bg); border: 1px solid rgba(18, 24, 31, 0.06); box-shadow: 0 1px 3px rgba(18, 24, 31, 0.06), 0 6px 16px rgba(18, 24, 31, 0.07); }
.hero-main-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-main-text { padding-top: var(--space-3); }
.hero-main-title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: var(--color-ink); margin-bottom: var(--space-2); }
.hero-main:hover .hero-main-title { color: var(--color-azul); }
.hero-main-dek { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-slate); line-height: 1.45; margin-bottom: var(--space-2); }
.hero-byline { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--color-slate); }

.hero-secondary { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-5); }
.hero-sec-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-4); align-items: stretch; height: 100%; }
/* Width from the column and height from the shape. Left to stretch, the box
   took its size from the row height instead: wider than the screen in Chrome,
   shrunk to a sliver in Safari. */
.hero-sec-image { display: block; width: 100%; align-self: start; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--color-bg); border: 1px solid rgba(18, 24, 31, 0.06); box-shadow: 0 1px 3px rgba(18, 24, 31, 0.06), 0 6px 16px rgba(18, 24, 31, 0.07); }
.hero-sec-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-sec-text { display: flex; flex-direction: column; }
.hero-sec-text-link { color: inherit; text-decoration: none; }
.hero-sec-title { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.2; color: var(--color-ink); margin: var(--space-2) 0 var(--space-2); }
.hero-sec-text-link:hover .hero-sec-title { color: var(--color-azul); }

.hero-sec-item { display: flex; flex-direction: column; }
.hero-sec-related { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.hero-sec-related-item { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink) !important; text-decoration: none !important; line-height: 1.35; }
.hero-sec-related-dot { color: var(--color-azul); font-size: 1.1em; line-height: 1; flex-shrink: 0; }
.hero-sec-related-item:hover { color: var(--color-azul) !important; }

@media (max-width: 900px) {
    .home-hero-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    /* Stacked under the main story, there is nothing to match heights with. */
    .hero-secondary { grid-template-rows: none; gap: var(--space-4); }
    .hero-main-image { aspect-ratio: 16/10 !important; }
}
@media (max-width: 560px) {
    .hero-sec-card { grid-template-columns: 1fr; }
    .hero-sec-image { aspect-ratio: 16/9; }
}

/* ==========================================================================
   HOMEPAGE — ENTRETENIMENTO
   ========================================================================== */
.home-entretenimento { background: var(--color-azul-wash); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.ent-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); margin-top: var(--space-5); }
.ent-featured-image { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/10; background: var(--color-surface); }
.ent-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.ent-featured-title { font-size: var(--text-xl); color: var(--color-ink); margin-top: var(--space-3); }
.ent-featured:hover .ent-featured-title { color: var(--color-azul); }

.ent-list { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.ent-list-item { display: flex; align-items: center; gap: var(--space-3); }
.ent-list-image { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.ent-list-image img { width: 100%; height: 100%; object-fit: cover; }
.ent-list-title { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.ent-list-item:hover .ent-list-title { color: var(--color-azul); }

@media (max-width: 780px) {
    .ent-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOMEPAGE — UTILITY ROW (Mais Lidas + Horóscopo + Radar Cultural)
   ========================================================================== */
.home-utility { background: var(--color-bg); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.home-utility-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-5); align-items: stretch; }

.home-mais-lidas { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); }

.util-box { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); height: 100%; }
.util-box-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--color-azul-wash); color: var(--color-azul); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.util-box-icon svg { width: 18px; height: 18px; }
.util-box-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-azul); margin-bottom: var(--space-2); }
.util-box-title { font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); }
.util-box:hover .util-box-title { color: var(--color-azul); }

@media (max-width: 900px) {
    .home-utility-grid { grid-template-columns: 1fr; }
}

/* ---- Fix: vertical image between label and title on utility boxes ---- */
.util-box-image { aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden; margin: var(--space-2) 0 var(--space-3); background: var(--color-bg); }
.util-box-image img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }

/* ---- Fix: constrain utility box image to a compact accent size, not full-width ---- */
.util-box-image { }

/* ---- Fix: grow Mais Lidas text on homepage specifically, to match the taller image boxes beside it ---- */
.home-mais-lidas .mais-lidas-title { font-size: var(--text-lg); }
.home-mais-lidas .mais-lidas-num { font-size: var(--text-2xl); }
.home-mais-lidas .mais-lidas-item { padding: var(--space-4) 0; }

/* ---- Fix: center-align number with title on homepage Mais Lidas (baseline looked off once sizes diverged) ---- */
.home-mais-lidas .mais-lidas-item { align-items: flex-start; }

/* ---- Fix: normalize line-height so top edges of number and title glyphs genuinely match ---- */
.home-mais-lidas .mais-lidas-num { line-height: 1.2; }
.home-mais-lidas .mais-lidas-title { line-height: 1.2; }

/* ---- Fix: rebalance the utility grid when Radar Cultural isn't showing (Mon-Wed) ---- */
@media (min-width: 901px) {
    .home-utility-grid.has-one .home-mais-lidas { grid-column: span 2; }
}
.home-utility-grid.has-none { grid-template-columns: 1fr; max-width: 640px; }

/* ==========================================================================
   HOMEPAGE — SECTION ROWS (Cultura, Economia, Gastronomia, Viagem, Geral)
   ========================================================================== */
.home-section-row { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.home-section-row.is-alt { background: var(--color-bg); }
.home-section-grid { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-5); margin-bottom: var(--space-5); }

@media (max-width: 900px) {
    .home-section-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Section row dividers: hairline on desktop, thick spacer band on mobile ---- */
.home-section-row { border-top: 1px solid var(--color-line); }

@media (max-width: 680px) {
    .home-section-row { border-top: 10px solid #C3C9CE; }
}

/* ==========================================================================
   HOMEPAGE — COLUNISTAS
   ========================================================================== */
.home-colunistas { background: var(--color-dark); padding-top: var(--space-7); padding-bottom: var(--space-7); }
.eyebrow-on-dark { color: var(--color-azul-mist) !important; }
.eyebrow-on-dark .tile-mark span { background: var(--color-azul-mist); }
.eyebrow-on-dark .tile-mark span:nth-child(2), .eyebrow-on-dark .tile-mark span:nth-child(3) { background: #fff; }

.colunistas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.colunista-card { display: flex; flex-direction: column; align-items: flex-start; }
.colunista-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-3); }
.colunista-avatar-empty { display: flex; align-items: center; justify-content: center; background: var(--color-azul); color: #fff; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.colunista-name { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-azul-mist); margin-bottom: 4px; }
.colunista-title { font-size: var(--text-lg); line-height: 1.3; color: var(--color-dark-text); }
.colunista-card:hover .colunista-title { color: var(--color-azul-mist); }

@media (max-width: 900px) {
    .colunistas-grid { grid-template-columns: repeat(2, 1fr); }
}

.colunas-viewall { display: inline-block; margin-top: var(--space-6); color: var(--color-azul-mist) !important; }
.colunas-viewall:hover { color: #fff !important; }

/* ==========================================================================
   HOMEPAGE — VIDEOS + MAGAZINE
   ========================================================================== */
.home-video-section { background: var(--color-dark); padding-top: var(--space-7); padding-bottom: var(--space-7); }

.video-magazine-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }

.home-video-featured .article-video-poster { border-radius: var(--radius-md); }

/* Special coverage row. The homepage already uses a full-bleed band to set the
   Vídeos section apart, so this one borrows the device in the opposite
   direction — pale instead of dark — and carries the weight in its title
   rather than decorating each card. Cards stay the standard .card so the row
   reads as part of the homepage, not a separate design. */
/* The brand navy at full strength. Nothing else on the homepage is a solid
   block of it — the hero is white, Entretenimento a pale wash of the same
   blue, Vídeos near-black — so the row stands out as the darkest thing above
   the fold while still reading as this site. */
.home-especial { background: var(--color-azul); padding: var(--space-7) 0; }
.especial-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.especial-title { font-size: var(--text-2xl); line-height: 1.1; color: #fff; margin: 0; }
.especial-title::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--color-azul-mist); margin-top: var(--space-2); }
/* Outlined until hover: a solid white pill would out-shout the headlines. */
.especial-viewall { flex-shrink: 0; padding: var(--space-2) var(--space-4); border: 1.5px solid rgba(255,255,255,0.7); border-radius: 999px; color: #fff !important; font-size: var(--text-sm); font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.especial-viewall:hover { background: #fff; border-color: #fff; color: var(--color-azul) !important; }
.especial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .especial-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Phones: the Especial, Editoria and Colunas rows become rails ----
   Cards sit side by side and the row scrolls under the finger, snapping to
   each card. The rail runs into the right-hand gutter so the next card peeks
   in at the screen edge, which says there is more without an arrow. The
   dashes underneath come from mobile-rail.js and are drawn like the video
   carousel's. */
.rail-dots { display: none; }
@media (max-width: 560px) {
    .especial-grid, .home-section-grid, .colunistas-grid {
        display: flex; gap: var(--space-4);
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
        /* Into the right gutter, with room above and below for card shadows. */
        margin-right: calc(-1 * clamp(16px, 3vw, 32px));
        padding: var(--space-1) clamp(16px, 3vw, 32px) var(--space-3) 0;
    }
    .especial-grid::-webkit-scrollbar, .home-section-grid::-webkit-scrollbar, .colunistas-grid::-webkit-scrollbar { display: none; }
    .especial-grid > *, .home-section-grid > *, .colunistas-grid > * { flex: 0 0 85%; scroll-snap-align: start; }
    .rail-dots { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
}
.rail-dot { display: flex; align-items: center; width: 10px; height: 16px; padding: 0; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.rail-dot::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--color-slate); opacity: 0.35; transition: opacity 0.25s ease, background 0.25s ease; }
.rail-dot.is-active { width: 30px; }
.rail-dot.is-active::before { background: var(--color-azul); opacity: 1; }
/* On the navy Especial and the dark Colunas block: the video carousel's colours. */
.home-especial .rail-dot::before, .home-colunistas .rail-dot::before { background: var(--color-dark-slate); opacity: 0.5; }
.home-especial .rail-dot.is-active::before, .home-colunistas .rail-dot.is-active::before { background: var(--color-azul-mist); opacity: 1; }

/* Destaque video carousel. The stage holds only the 16/9 poster, keeping the
   image free of navigation chrome; the titles sit outside it and swap with the
   slide, since their height varies. */
.hvc-stage { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16/9; touch-action: pan-y; }
.hvc-track { display: flex; height: 100%; transition: transform 0.4s ease; }
.hvc-stage .hvc-slide { flex: 0 0 100%; height: 100%; border-radius: 0; }
.hvc-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Only the current slide's title is shown; they live outside the stage because
   their height varies with the headline. */
.hvc-titles .home-video-title { display: none; }
.hvc-titles .home-video-title.is-active { display: block; }

/* Controls sit below the poster, not on it: on the image they read as a second
   play button. Bare chevrons, no button chrome — the dashes carry the weight. */
.hvc-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.hvc-arrow { display: flex; align-items: center; justify-content: center; padding: var(--space-2); color: var(--color-dark-slate); transition: color 0.2s ease; }
.hvc-arrow:hover { color: var(--color-dark-text); }
.hvc-arrow svg { width: 20px; height: 20px; }
.hvc-dots { display: flex; align-items: center; gap: var(--space-2); }
/* Each dot is a 16px-tall hit target around a 3px bar; the active one stretches
   into a dash, so position reads at a glance without needing a count. */
.hvc-dot { display: flex; align-items: center; width: 10px; height: 16px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.hvc-dot::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--color-dark-slate); opacity: 0.5; transition: opacity 0.25s ease, background 0.25s ease; }
.hvc-dot:hover::before { opacity: 1; }
.hvc-dot.is-active { width: 30px; }
.hvc-dot.is-active::before { background: var(--color-azul-mist); opacity: 1; }
.home-video-title { color: var(--color-dark-text); font-size: var(--text-xl); margin-top: var(--space-3); }
.home-video-featured:hover .home-video-title { color: var(--color-azul-mist); }

.magazine-box { background: var(--color-dark-surface); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; align-items: center; text-align: center; }
.magazine-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-azul-mist); margin-bottom: var(--space-4); }
.magazine-cover-link { display: block; width: 100%; max-width: 200px; }
.magazine-cover { width: 100%; border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,0.4); margin-bottom: var(--space-5); }
.magazine-cta { display: inline-block; padding: 12px 24px; background: var(--color-azul); color: #fff !important; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); }
.magazine-cta:hover { background: var(--color-azul-bright); }

.shorts-rail-wrap { margin-top: var(--space-7); }
.shorts-label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-azul-mist); margin-bottom: var(--space-4); }
.shorts-rail { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); scrollbar-width: thin; }
.short-card { position: relative; flex-shrink: 0; width: 160px; aspect-ratio: 9/16; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
.short-card img { width: 100%; height: 100%; object-fit: cover; }
.short-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(18,24,31,0.7); color: #fff; display: flex; align-items: center; justify-content: center; }
.short-card:hover .short-play-btn { background: var(--color-azul); }
.short-title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3); background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #fff; font-size: var(--text-xs); font-weight: 600; line-height: 1.3; }

@media (max-width: 780px) {
    .video-magazine-row { grid-template-columns: 1fr; }
    .magazine-cover-link { max-width: 240px; margin: 0 auto; }
}

/* ---- Fix: shorts as a real slider — hidden scrollbar, arrow nav, end card ---- */
.shorts-rail-container { position: relative; }
.shorts-rail { scrollbar-width: none; -ms-overflow-style: none; }
.shorts-rail::-webkit-scrollbar { display: none; }

.shorts-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; color: var(--color-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.shorts-arrow:hover { background: var(--color-azul-mist); }
.shorts-arrow-prev { left: -8px; }
.shorts-arrow-next { right: -8px; }
.shorts-arrow svg { width: 18px; height: 18px; }

.short-viewmore {
    flex-shrink: 0; width: 160px; aspect-ratio: 9/16; border-radius: var(--radius-md);
    background: var(--color-azul); color: #fff !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
    text-align: center; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
    padding: 0 var(--space-3);
}
.short-viewmore:hover { background: var(--color-azul-bright); }
.short-viewmore svg { width: 24px; height: 24px; }

@media (max-width: 680px) {
    .shorts-arrow { display: none; }
}

.shorts-viewmore-btn {
    display: block; width: fit-content; margin: var(--space-5) auto 0;
    padding: 12px 28px; border: 1px solid var(--color-dark-line); border-radius: var(--radius-sm);
    color: var(--color-dark-text) !important; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
}
.shorts-viewmore-btn:hover { border-color: var(--color-azul-mist); color: var(--color-azul-mist) !important; }

/* ==========================================================================
   VIDEOS PAGE
   ========================================================================== */
.video-editoria-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 3px 10px; background: rgba(18, 24, 31, 0.75); backdrop-filter: blur(2px);
    color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px;
}

.videos-destaques { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.videos-destaques-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.video-poster-card.is-secondary { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-5); }
.video-poster-card.is-secondary .video-poster-title { font-size: var(--text-base); }
.video-poster-title { font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); margin-top: var(--space-3); }
.video-poster-card:hover .video-poster-title { color: var(--color-azul); }

.videos-entrevistas { padding-top: var(--space-7); padding-bottom: var(--space-7); background: var(--color-bg); }
.videos-entrevistas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-6); }

.videos-shorts-page { padding-top: var(--space-7); padding-bottom: var(--space-7); }

@media (max-width: 900px) {
    .videos-destaques-grid { grid-template-columns: 1fr; }
    .video-poster-card.is-secondary { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .videos-entrevistas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .video-poster-card.is-secondary { grid-template-columns: 1fr; }
    .videos-entrevistas-grid { grid-template-columns: 1fr; }
}

/* ---- Fix: Destaques as 3 equal-size videos in one row ---- */
.videos-destaques-grid { grid-template-columns: repeat(3, 1fr) !important; }
.video-poster-card.is-secondary { display: block !important; }
.video-poster-card .article-video-poster { aspect-ratio: 16/9; }

/* ---- Fix: consistent aspect ratio across all Entrevistas thumbnails ---- */
.videos-entrevistas-grid .article-video-poster { aspect-ratio: 16/9; }
.videos-entrevistas-grid .article-video-poster img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Fix: spacing between section titles and their content ---- */
.videos-shorts-page .eyebrow { margin-bottom: var(--space-5); }
.section-grid-wrap .eyebrow { margin-bottom: var(--space-5); }

@media (max-width: 900px) {
    .videos-destaques-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
    .videos-destaques-grid { grid-template-columns: 1fr !important; }
}

/* ---- Fix: proper image cropping (object-fit) so nothing gets raw-clipped or stretched ---- */
.videos-destaques-grid .article-video-poster img,
.videos-entrevistas-grid .article-video-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ---- Fix: remove leftover font-size distinction between main/secondary Destaques ---- */
.video-poster-card.is-secondary .video-poster-title { font-size: var(--text-lg) !important; }

/* ---- Fix: real spacing between Utility row and the section after it ---- */
.home-utility { padding-bottom: var(--space-7) !important; }

/* ---- Fix: no divider line before the first section row (redundant next to the dark video section's own natural break) ---- */
.home-section-row.is-first { border-top: none !important; }

/* ==========================================================================
   GENERIC PAGE (Quem Somos, Contato, Política de Privacidade, etc.)
   ========================================================================== */
.generic-page-header { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding-top: var(--space-6); padding-bottom: var(--space-5); }
.generic-page-title { font-size: var(--text-3xl); }
.generic-page-body { padding-top: var(--space-6); padding-bottom: var(--space-8); font-size: var(--text-lg); line-height: 1.75; }
.generic-page-body p { margin-bottom: var(--space-5); color: var(--color-ink); }
.generic-page-body h2 { font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-4); }
.generic-page-body h3 { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-3); }
.generic-page-body a { color: var(--color-azul) !important; text-decoration: underline; text-underline-offset: 2px; }
.generic-page-body a:hover { color: var(--color-azul-bright) !important; }
.generic-page-body ul, .generic-page-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.generic-page-body ul { list-style: disc; }
.generic-page-body ol { list-style: decimal; }
.generic-page-body li { margin-bottom: var(--space-2); }
.generic-page-body strong { font-weight: 700; }
.generic-page-body img { max-width: 100%; border-radius: var(--radius-md); margin: var(--space-5) 0; }

/* ==========================================================================
   QUEM SOMOS
   ========================================================================== */
.quem-somos-tagline { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-slate); margin-top: var(--space-3); }

.quem-somos-team { padding-top: var(--space-7); padding-bottom: var(--space-7); border-top: 1px solid var(--color-line); }
.quem-somos-team-intro { font-family: var(--font-body); color: var(--color-slate); max-width: 60ch; margin-top: var(--space-3); }
.quem-somos-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.team-member-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.team-member-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-3); }
.team-member-photo-empty { display: flex; align-items: center; justify-content: center; background: var(--color-azul); color: #fff; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.team-member-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--color-ink); }
.team-member-role { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-slate); margin-top: 2px; }
.team-member-card:hover .team-member-name { color: var(--color-azul); }

.quem-somos-mv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-8); }
.mv-box { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-6); }
.mv-box h3 { font-size: var(--text-xl); color: var(--color-azul); margin-bottom: var(--space-3); }
.mv-box p { font-family: var(--font-body); color: var(--color-ink); line-height: 1.6; }

@media (max-width: 900px) {
    .quem-somos-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .quem-somos-mv { grid-template-columns: 1fr; }
}

/* ---- Quem Somos: intro text + team box, two columns ---- */
.quem-somos-intro-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.quem-somos-intro-text { padding: 0 !important; font-size: var(--text-lg); line-height: 1.75; }
.quem-somos-intro-text p { margin-bottom: var(--space-5); color: var(--color-ink); }
.quem-somos-team-box { background: var(--color-azul-wash); border-radius: var(--radius-md); padding: var(--space-6); }
.quem-somos-team-box p { font-family: var(--font-body); color: var(--color-ink); line-height: 1.6; margin: 0; }

@media (max-width: 780px) {
    .quem-somos-intro-row { grid-template-columns: 1fr; }
}
/* ==========================================================================
   FORMS (Anúncie, Contato)
   ========================================================================== */
.entrerios-form {
    margin-top: var(--space-6);
    max-width: 640px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.form-row { margin-bottom: var(--space-4); }
.form-row:last-of-type { margin-bottom: 0; }
.form-row-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-row-group .form-row { margin-bottom: 0; }

.form-row label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 0; line-height: 1.2;
}
.form-row input,
.form-row select,
.form-row textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-surface);
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row textarea { resize: vertical; min-height: 120px; }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-azul);
    box-shadow: var(--focus-ring);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--color-slate); opacity: 0.8; }

.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 32px;
    margin-top: var(--space-2);
    background: var(--color-azul);
    color: #fff !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
}
.form-submit-btn:hover:not(:disabled) { background: var(--color-azul-bright); }
.form-submit-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.form-submit-btn:disabled { opacity: 0.6; cursor: default; }

.form-message {
    margin-top: var(--space-4);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
}
.form-message:empty { display: none; padding: 0; margin: 0; }
.form-message.is-success { background: #E6F4EA; color: #1a7a3c; }
.form-message.is-error { background: #FCEAE9; color: #b3261e; }

@media (max-width: 560px) {
    .entrerios-form { padding: var(--space-5); }
    .form-row-group { grid-template-columns: 1fr; }
}

/* ---- Fix: eliminate remaining label-to-input gap on forms, real gap regardless of source ---- */
.form-row label { margin: 0 !important; padding: 0 !important; }
.form-row input, .form-row select, .form-row textarea { margin-top: 0 !important; }

/* ---- Fix: exact 0.75em gap between label and input, per feedback ---- */
.form-row label { margin-bottom: 0.75em !important; }

/* ==========================================================================
   SAPO ADS (where each one goes: docs/sapo-ad-map.md)
   ========================================================================== */
/* Every ad that takes room keeps it: a box sized to its format under a quiet
   label, so the place shows even when SAPO sends nothing, and the page does
   not jump when an ad arrives. The box is only a faint tint of whatever it
   sits on. OOP and Floorad take no room. */
.ad-slot { text-align: center; }
.ad-label { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; color: var(--color-slate); margin-bottom: 6px; }
.ad-box { margin: 0 auto; background: rgba(18, 24, 31, 0.04); }
.ad-slot--richmedia .ad-box { max-width: 970px; min-height: 250px; }
.ad-slot--mpu .ad-box { width: 300px; max-width: 100%; min-height: 250px; }
.ad-slot--halfpage .ad-box, .ad-slot--halfpage_btf .ad-box { width: 300px; min-height: 600px; }
.ad-slot--leaderboard .ad-box { max-width: 728px; min-height: 90px; }

/* Bands between blocks space the slot rather than themselves, so a slot
   hidden at this size leaves no gap. */
.ad-band .ad-slot:not(.ad-slot--oop) { padding: var(--space-5) 0; }

/* One layout per device. Slots for the other size are hidden, and SAPO's CPU
   never requests a hidden slot. */
@media (max-width: 1023px) {
    .ad-slot--desktop { display: none; }
    .ad-slot--richmedia .ad-box { min-height: 100px; }
    .ad-slot--leaderboard .ad-box { max-width: 320px; min-height: 50px; }
}
@media (min-width: 1024px) {
    .ad-slot--phone { display: none; }
}
/* The first phone MPU sits inside a block that stacks only below 900px (the
   hero) or 780px (an editoria's featured row). Wider, it is skipped. */
@media (min-width: 901px) { .hero-ad { display: none; } }
@media (min-width: 781px) { .featured-ad { display: none; } }
.grid-ad { grid-column: 1 / -1; }
.section-mais-lidas .ad-slot { margin-top: var(--space-5); }

/* Homepage: from 1024px Entretenimento makes room for an MPU. */
@media (min-width: 1024px) {
    .ent-grid { grid-template-columns: 1.3fr 1fr 300px; }
}

/* Articles. On phones the MPUs sit between the article's blocks. From 1024px
   the text keeps its 720px column and moves left, and a 300px column of ads
   runs beside it, starting level with the title. */
.article-main > .ad-slot { padding: 0 clamp(16px, 3vw, 32px) var(--space-6); }
.article-rail { display: none; }
@media (min-width: 1024px) {
    .article-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; column-gap: var(--space-5); justify-content: center; padding-right: clamp(16px, 3vw, 32px); }
    .article-rail { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-7); }
    .article-rail .ad-slot--halfpage_btf { margin-top: 700px; }
    /* The 728px Leaderboard overhangs the 720px column by 4px a side. */
    .article-main > .ad-slot--leaderboard { padding: 0 0 var(--space-6); }
    .article-main > .ad-slot--leaderboard .ad-box { width: 728px; max-width: calc(100% + 8px); margin-left: -4px; }
    /* The columnist banner and the related articles line up with the text. */
    .columnist-banner-section .article-container,
    .single-article ~ .section-grid-wrap.article-container {
        max-width: calc(720px + var(--space-5) + 300px + clamp(16px, 3vw, 32px));
        padding-right: calc(var(--space-5) + 300px + 2 * clamp(16px, 3vw, 32px));
    }
}