header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(223,231,233,.8)}
header nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
header .logo{width:230px;max-width:48vw;height:auto}
header .navlinks{display:flex;gap:20px;align-items:center;font-size:14px}
header .btn,footer .btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:12px;font-weight:700;border:1px solid var(--ink);transition:.2s}
header .btn:hover,footer .btn:hover{transform:translateY(-1px)}
header .btn.primary,footer .btn.primary{border:0;color:#06151a;background:linear-gradient(110deg,var(--cyan),var(--teal),var(--green))}
header .grad,footer .grad{background:linear-gradient(90deg,#079ee9,#12cfc3,#20d982);-webkit-background-clip:text;background-clip:text;color:transparent}
footer{border-top:1px solid var(--line);padding:32px 0 42px;color:var(--muted);font-size:14px}
.footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-logo{width:170px}
@media(max-width:850px){header .navlinks a:not(.btn):not(.blog-link){display:none}}
@media(max-width:480px){.footer-row{align-items:flex-start;flex-direction:column}}
header .utility-link{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;font-size:12px;font-weight:700;color:#33444d;background:#f5f8f8;border:1px solid var(--line);white-space:nowrap}
header .utility-link:hover{border-color:#9ddbd9;background:#eefafa}
@media(max-width:1100px){header nav{height:auto;min-height:78px;padding:12px 0;flex-wrap:wrap}
header .navlinks{margin-left:auto}}
header > .wrap{width:min(1440px,calc(100% - 80px))}
.header-brand{display:flex;align-items:center;gap:22px;flex-shrink:0}
.header-brand > a{display:flex;align-items:center}
.header-tagline{font-size:14px;white-space:nowrap;font-weight:400}
.header-tagline .grad{font-weight:800}
header nav{gap:20px}
@media(max-width:1250px){header > .wrap{width:calc(100% - 40px)}
.header-brand{gap:14px}
.header-brand .logo{width:210px}
.header-tagline{font-size:13px}
header .navlinks{gap:12px}}
@media(max-width:1100px){header nav{justify-content:space-between;row-gap:10px}
.header-brand{flex-wrap:wrap}}
@media(max-width:650px){header nav{gap:12px}
.header-brand{flex-direction:column;align-items:flex-start;gap:5px;flex-shrink:1}
.header-brand .logo{width:190px;max-width:100%}
.header-tagline{font-size:11px;white-space:normal}
header .navlinks{flex-wrap:wrap;margin-left:0;gap:8px}
header .navlinks .btn{font-size:12px;padding:10px 12px}}
.footer-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px}
.footer-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0}
.footer-social,.footer-direct{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.footer-contacts a{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#33444d;min-height:40px}
.footer-social a{justify-content:center;width:40px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.footer-contacts svg{width:19px;height:19px;flex-shrink:0}
.footer-contacts a:hover{color:#087d8e}
.footer-contacts a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.footer-copyright{font-size:12px;text-align:right;max-width:360px}
@media(max-width:1250px){.footer-row{grid-template-columns:auto minmax(0,1fr)}
.footer-copyright{grid-column:1/-1;max-width:none;text-align:left}}
@media(max-width:650px){.footer-row{grid-template-columns:1fr;gap:20px}
.footer-contacts{align-items:flex-start;flex-direction:column}
.footer-direct{align-items:flex-start;flex-direction:column}
.footer-copyright{grid-column:auto}}
/* Largura comum e capas dos cards, sem mudar os estilos do texto do blog. */
main > .wrap:not(.admin){width:min(1440px,calc(100% - 80px));max-width:none}
main .card img.art{background:#fff;background-image:none;padding:0;object-fit:contain;object-position:center}
@media(max-width:1250px){main > .wrap:not(.admin){width:calc(100% - 40px)}}

header > .wrap,footer > .wrap{width:min(1440px,calc(100% - 80px));max-width:none;margin-left:auto;margin-right:auto}
@media(max-width:1250px){header > .wrap,footer > .wrap{width:calc(100% - 40px)}}