*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --azul: #13386d;
  --azul-escuro: #0d2847;
  --azul-claro: #54b8ea;
  --azul-pastel: #e8f4fd;
  --branco: #fff;
  --fundo: #f2f4f7;
  --borda: #dce2e8;
  --texto: #263241;
  --cinza: #677180;
  --font-head: "Barlow Condensed", sans-serif;
  --font-body: "Barlow", sans-serif;
  --shadow: 0 12px 35px rgba(13,40,71,.12);
}
html { scroll-behavior: smooth; }
body { background: var(--fundo); color: var(--texto); font-family: var(--font-body); line-height: 1.75; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.top-bar { min-height: 34px; display: flex; align-items: center; background: var(--azul); border-bottom: 2px solid var(--azul-claro); color: rgba(255,255,255,.78); font-family: var(--font-head); font-size: .76rem; letter-spacing: .06em; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar i { margin-right: 6px; color: var(--azul-claro); }
.top-social { display: flex; gap: 14px; }
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); box-shadow: 0 2px 14px rgba(0,0,0,.08); backdrop-filter: blur(10px); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo img { display: block; width: 215px; max-height: 48px; object-fit: contain; }
nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
nav ul { display: flex; align-items: center; gap: 2px; list-style: none; flex-wrap: nowrap; }
nav a { display: block; padding: 7px 8px; border-radius: 6px; color: #4b5563; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
nav a:hover, nav a.active { background: var(--azul-pastel); color: var(--azul); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; background: #25d366; color: #fff; font-family: var(--font-head); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.menu-btn { display: none; border: 0; background: transparent; color: var(--azul); font-size: 1.4rem; cursor: pointer; }
.breadcrumb { padding: 22px 0; color: var(--cinza); font-size: .82rem; }
.breadcrumb a { color: var(--azul); font-weight: 600; }
.article-shell { display: grid; grid-template-columns: minmax(0, 780px) 300px; gap: 42px; align-items: start; padding-bottom: 80px; }
.article { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.article-head { padding: 42px 48px 30px; }
.category { display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 4px; background: var(--azul-claro); color: var(--azul); font-family: var(--font-head); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { color: var(--azul); font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: -.025em; line-height: .98; text-transform: uppercase; }
.subtitle { max-width: 680px; margin-top: 18px; color: var(--cinza); font-size: 1.08rem; line-height: 1.65; }
.meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; color: #7a8491; font-size: .78rem; }
.meta i { margin-right: 6px; color: var(--azul-claro); }
.cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-body { padding: 42px 48px 52px; }
.article-body p { margin-bottom: 20px; font-size: 1.02rem; }
.article-body h2 { margin: 34px 0 14px; color: var(--azul); font-family: var(--font-head); font-size: 1.7rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.article-body ul { margin: 4px 0 24px 22px; }
.article-body li { margin-bottom: 8px; padding-left: 5px; }
.lead { color: #334155; font-size: 1.14rem !important; font-weight: 500; }
.quote { margin: 32px 0; padding: 25px 28px; border-left: 4px solid var(--azul-claro); background: var(--azul-pastel); color: var(--azul); font-family: var(--font-head); font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.source-box { margin: 34px 0 10px; padding: 20px 22px; border: 1px solid #cfe5f5; border-radius: 8px; background: #f5fbff; }
.source-box strong { display: block; margin-bottom: 5px; color: var(--azul); font-family: var(--font-head); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.source-box p { margin: 0 0 12px; color: var(--cinza); font-size: .88rem; }
.source-box a { display: inline-flex; align-items: center; gap: 7px; color: var(--azul); font-family: var(--font-head); font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.article-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 38px; padding-top: 25px; border-top: 1px solid var(--borda); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font-family: var(--font-head); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.share { display: flex; gap: 8px; }
.share a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--azul); color: #fff; }
.sidebar { display: grid; gap: 20px; }
.widget { overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 6px 22px rgba(13,40,71,.08); }
.widget-title { padding: 11px 16px; background: var(--azul); color: #fff; font-family: var(--font-head); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.widget-body { padding: 18px; }
.related { display: grid; gap: 15px; }
.related a { display: block; padding-bottom: 15px; border-bottom: 1px solid var(--borda); color: var(--texto); font-family: var(--font-head); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.related a:last-child { padding-bottom: 0; border: 0; }
.related a:hover { color: var(--azul); }
.profile { text-align: center; }
.profile img { width: 92px; height: 92px; margin: 0 auto 12px; border: 3px solid var(--azul-claro); border-radius: 50%; object-fit: cover; object-position: center 28%; }
.profile strong { display: block; color: var(--azul); font-family: var(--font-head); font-size: 1.05rem; text-transform: uppercase; }
.profile p { margin: 6px 0 13px; color: var(--cinza); font-size: .82rem; }
.profile a { display: block; padding: 8px; border-radius: 5px; background: var(--azul); color: #fff; font-family: var(--font-head); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
footer { padding: 38px 0; background: #091d35; color: rgba(255,255,255,.68); font-size: .8rem; }
footer .container { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
footer a { color: var(--azul-claro); }
@media (max-width: 1050px) {
  nav, .nav-cta { display: none; }
  nav.open { position: absolute; top: 76px; left: 0; right: 0; display: block; padding: 12px 24px 20px; background: #fff; box-shadow: 0 12px 25px rgba(0,0,0,.12); }
  nav.open ul { display: block; }
  .menu-btn { display: block; }
  .article-shell { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .container { width: min(100% - 28px, 1160px); }
  .top-social { display: none; }
  .logo img { width: 185px; }
  .article-head, .article-body { padding-left: 23px; padding-right: 23px; }
  .article-head { padding-top: 30px; }
  .article-body { padding-top: 30px; }
  h1 { font-size: 2.45rem; }
  .sidebar { grid-template-columns: 1fr; }
  .article-footer, footer .container { align-items: flex-start; flex-direction: column; }
}