/* Ferreira Macedo — CSS crítico (acima da dobra). Injetado inline. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--fm-paper);color:var(--fm-ink);
 font-family:"Inter var","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 font-size:var(--fm-fs-0);line-height:1.65;
 font-feature-settings:"cv05" 1,"ss03" 1,"cv11" 1;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:var(--fm-peso-titulo);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h1{font-size:var(--fm-fs-4)}h2{font-size:var(--fm-fs-3)}h3{font-size:var(--fm-fs-2)}h4{font-size:var(--fm-fs-1)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--fm-accent-text);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.14em}

/* Foco: 2px sólidos + deslocamento. WCAG 2.4.11/2.4.13. */
:focus{outline:none}
:focus-visible{outline:3px solid var(--fm-focus);outline-offset:3px;border-radius:1px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Atalhos de acessibilidade (eMAG) --------------------------------- */
.fm-atalhos{background:var(--fm-ink);color:var(--fm-paper);font-size:var(--fm-fs--2)}
.fm-atalhos ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
.fm-atalhos li a{position:absolute;left:-9999px;top:0;padding:.75rem 1rem;background:var(--fm-ink);color:var(--fm-paper);z-index:999}
.fm-atalhos li a:focus{left:0}
.fm-atalhos kbd{font:inherit;border:1px solid currentColor;padding:0 .25em;margin-left:.35em}
.fm-atalhos__controles{display:flex;gap:.5rem;justify-content:flex-end;padding:.35rem clamp(1rem,4vw,3rem)}
.fm-atalhos__controles button{background:none;border:1px solid rgba(255,255,255,.45);color:inherit;font:inherit;
 padding:.35rem .75rem;cursor:pointer;min-height:2.75rem;min-width:2.75rem}
.fm-atalhos__controles button:hover{background:rgba(255,255,255,.14)}

/* --- Cabeçalho ---------------------------------------------------------- */
.fm-faixa{background:var(--fm-accent);color:#fff;text-align:center;font-size:var(--fm-fs--1)}
.fm-faixa p{margin:0;padding:.6rem 1rem}

.fm-cabecalho{background:var(--fm-paper);border-bottom:1px solid var(--fm-rule)}
.fm-cabecalho--sem-fio{border-bottom:0}
.fm-cab-fixo .fm-cabecalho{position:sticky;top:0;z-index:50}

.fm-cabecalho__interno{display:grid;align-items:center;gap:clamp(1rem,3vw,2.5rem);
 padding:1rem clamp(1rem,4vw,3rem);min-height:4.5rem;
 grid-template-areas:"marca nav acoes";grid-template-columns:auto 1fr auto}
.fm-cabecalho--contido .fm-cabecalho__interno{max-width:1280px;margin:0 auto}
.fm-cabecalho--total .fm-cabecalho__interno{max-width:none}

.fm-marca{grid-area:marca;display:flex;align-items:center;gap:.75rem;min-width:0}
.fm-nav{grid-area:nav;min-width:0}
.fm-cabecalho__acoes{grid-area:acoes;display:flex;align-items:center;gap:.75rem;justify-self:end}

/* Arranjo: marca à esquerda · menu · ações à direita. */
.fm-cabecalho--padrao .fm-nav__lista{justify-content:flex-start}

/* Arranjo: menu à esquerda · marca ao centro · ações à direita. */
@media(min-width:60rem){
 .fm-cabecalho--marca_central .fm-cabecalho__interno{
  grid-template-areas:"nav marca acoes";grid-template-columns:1fr auto 1fr}
 .fm-cabecalho--marca_central .fm-marca{justify-content:center;text-align:center}
 .fm-cabecalho--marca_central .fm-nav__lista{justify-content:flex-start}
}

/* Arranjo: marca à esquerda · menu e ações à direita. */
@media(min-width:60rem){
 .fm-cabecalho--menu_direita .fm-cabecalho__interno{grid-template-columns:auto 1fr auto}
 .fm-cabecalho--menu_direita .fm-nav__lista{justify-content:flex-end}
}

/* Arranjo: marca e ações em cima, menu em faixa abaixo. */
@media(min-width:60rem){
 .fm-cabecalho--empilhado .fm-cabecalho__interno{
  grid-template-areas:"marca acoes" "nav nav";grid-template-columns:1fr auto;row-gap:1rem}
 .fm-cabecalho--empilhado .fm-nav{border-top:1px solid var(--fm-rule);padding-top:.75rem}
 .fm-cabecalho--empilhado .fm-nav__lista{justify-content:flex-start}
}

/* Arranjo: tudo centralizado, em duas linhas. */
@media(min-width:60rem){
 .fm-cabecalho--centralizado .fm-cabecalho__interno{
  grid-template-areas:"marca" "nav" "acoes";grid-template-columns:1fr;
  justify-items:center;row-gap:1rem;text-align:center}
 .fm-cabecalho--centralizado .fm-marca{justify-content:center}
 .fm-cabecalho--centralizado .fm-nav__lista{justify-content:center}
 .fm-cabecalho--centralizado .fm-cabecalho__acoes{justify-self:center}
}

.fm-marca img,.custom-logo{width:auto;height:2.75rem;max-height:2.75rem;
 max-width:12rem;object-fit:contain}
.fm-marca--logo img,.fm-marca--logo .custom-logo{height:3rem;max-height:3rem}
.fm-marca--logo .fm-glifo{width:3rem;height:3rem}
.fm-marca__nome{margin:0;font-size:var(--fm-fs-0);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.fm-marca__nome a{color:var(--fm-ink);text-decoration:none}
.fm-marca__descritor{margin:0;font-size:var(--fm-fs--2);color:var(--fm-muted);
 text-transform:uppercase;letter-spacing:.14em}

/* Glifo: reprodução da moldura aberta com o canto vermelho da logomarca. */
.fm-glifo{display:block;width:2.5rem;height:2.5rem;position:relative;
 border:.375rem solid var(--fm-ink);border-top-color:transparent;border-right-color:transparent}
.fm-glifo::after{content:"";position:absolute;left:-.375rem;bottom:-.375rem;
 width:.75rem;height:.75rem;background:var(--fm-accent)}

.fm-btn{display:inline-flex;align-items:center;justify-content:center;
 min-height:2.75rem;padding:.65rem 1.25rem;font-size:var(--fm-fs--1);font-weight:600;
 letter-spacing:.01em;text-decoration:none;cursor:pointer;border:2px solid var(--fm-ink)}
.fm-btn--solido{background:var(--fm-ink);color:var(--fm-paper)}
.fm-btn--solido:hover{background:var(--fm-accent-text);border-color:var(--fm-accent-text)}
.fm-btn--fio{background:transparent;color:var(--fm-ink)}
.fm-btn--fio:hover{background:var(--fm-ink);color:var(--fm-paper)}

.fm-nav__gatilho{display:none}
.fm-nav__painel{display:contents}
.fm-nav__extras{display:none}
.fm-nav__lista{display:flex;flex-wrap:wrap;gap:clamp(.75rem,2vw,1.75rem);margin:0;padding:0;
 list-style:none;font-size:var(--fm-fs--1);font-weight:500}
.fm-nav__lista a{color:var(--fm-ink);text-decoration:none;padding:.5rem 0;display:inline-block}
.fm-nav__lista a:hover,.fm-nav__lista .current-menu-item>a{box-shadow:inset 0 -.14em 0 var(--fm-accent)}
.fm-cabecalho--versalete .fm-nav__lista{font-size:var(--fm-fs--2);text-transform:uppercase;
 letter-spacing:.14em;font-weight:600}

@media(max-width:59.99rem){
 /* Três colunas nomeadas. Deixar o menu em `grid-area:auto` entregava sua
    posição ao algoritmo de posicionamento automático — daí o botão Menu
    encavalar a marca. Agora cada peça tem lugar declarado. */
 .fm-cabecalho__interno{grid-template-areas:"marca acoes nav";
  grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;row-gap:0;align-items:center}
 .fm-nav{grid-area:nav;justify-self:end}
 .fm-marca{grid-area:marca;min-width:0;overflow:hidden}
 .fm-marca__nome{font-size:var(--fm-fs--1)}
 .fm-marca__descritor{font-size:.6875rem}
 .fm-cabecalho__acoes{grid-area:acoes;gap:.5rem}
 .fm-nav__gatilho{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  background:none;border:2px solid var(--fm-ink);font:inherit;font-size:var(--fm-fs--1);
  padding:.5rem 1rem;cursor:pointer;color:var(--fm-ink)}

 /* O painel do menu ocupa a tela e guarda também a busca e o botão.
    O `display:flex` aqui NÃO é enfeite: em tela larga o painel é
    `display:contents`, e um elemento sem caixa ignora position, background e
    transform. Sem esta redefinição, o menu inteiro vazaria para a barra. */
 .fm-nav__painel{display:flex;position:fixed;inset:0;flex-direction:column;
  background:var(--fm-paper);padding:5rem 1.5rem 2rem;overflow:auto;z-index:60;
  transform:translateY(-100%);visibility:hidden}
 .fm-nav[data-aberto="true"] .fm-nav__painel{transform:none;visibility:visible}
 .fm-nav__lista{flex-direction:column;flex-wrap:nowrap;gap:0}
 .fm-nav__lista li{border-bottom:1px solid var(--fm-rule);width:100%}
 .fm-nav__lista a{padding:1rem 0;font-size:var(--fm-fs-1);display:block}
 .fm-nav__lista .sub-menu{list-style:none;margin:0;padding:0 0 .5rem 1rem}
 .fm-nav__lista .sub-menu a{font-size:var(--fm-fs-0);padding:.6rem 0;border:0}
 .fm-nav__lista .sub-menu li{border-bottom:0}

 .fm-nav__extras{display:flex;flex-direction:column;gap:1.25rem;
  margin-top:auto;padding-top:2rem}
 .fm-nav__extras .fm-busca{max-width:none}
 .fm-nav__extras .fm-btn{width:100%}

 /* Na barra, sobram a marca e o gatilho: sem busca nem botão a encavalar. */
 .fm-cabecalho__acoes .fm-btn--solido,
 .fm-cabecalho__acoes .fm-busca__gatilho{display:none}
 .fm-busca__painel{display:none}
}

/* --- Herói da página inicial ------------------------------------------- */
.fm-principal{display:block}
.fm-heroi{position:relative}
.fm-heroi__interno{max-width:1280px;margin:0 auto;padding-inline:clamp(1rem,4vw,3rem)}
.fm-heroi--compacto .fm-heroi__interno{padding-block:clamp(2rem,5vw,3.5rem)}
.fm-heroi--medio .fm-heroi__interno{padding-block:clamp(3rem,9vw,7rem)}
.fm-heroi--alto .fm-heroi__interno{padding-block:clamp(4rem,13vw,10rem)}
.fm-heroi__moldura{max-width:56rem}
.fm-heroi__titulo{font-size:var(--fm-fs-5);letter-spacing:-.045em;margin:0 0 .15em}
.fm-heroi__subtitulo{font-size:var(--fm-fs-1);font-weight:500;margin:0 0 1rem}
.fm-heroi__selo{margin:0;font-size:var(--fm-fs--2);letter-spacing:.18em;text-transform:uppercase;
 color:var(--fm-muted);font-variant-numeric:tabular-nums}
.fm-heroi__acao{margin:1.75rem 0 0}

/* Moldura aberta — a assinatura da marca. */
.fm-heroi--moldura .fm-heroi__moldura{position:relative;border:.5rem solid var(--fm-ink);
 border-top-color:transparent;border-right-color:transparent;padding:clamp(1.5rem,5vw,3.5rem)}
.fm-heroi__canto{position:absolute;left:-.5rem;bottom:-.5rem;width:1.5rem;height:1.5rem;background:var(--fm-accent)}

/* Régua — só o fio embaixo. */
.fm-heroi--regua .fm-heroi__moldura{padding-bottom:1.75rem;border-bottom:2px solid var(--fm-ink)}

/* Faixa — tinta cheia de borda a borda. */
.fm-heroi--faixa{background:var(--fm-ink);color:var(--fm-paper)}
.fm-heroi--faixa .fm-heroi__selo{color:rgba(255,255,255,.7)}
.fm-heroi--faixa .fm-btn--solido{background:var(--fm-paper);color:var(--fm-ink);border-color:var(--fm-paper)}
.fm-heroi--faixa :focus-visible{outline-color:var(--fm-paper)}

/* Imagem de fundo, com véu. */
.fm-heroi--imagem{color:var(--fm-paper);background:var(--fm-ink);isolation:isolate}
.fm-heroi--imagem .fm-heroi__fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.fm-heroi--imagem .fm-heroi__fundo img{width:100%;height:100%;object-fit:cover}
.fm-heroi--imagem .fm-heroi__fundo::after{content:"";position:absolute;inset:0;
 background:rgba(0,0,0,var(--fm-veu,.55))}
.fm-heroi--imagem .fm-heroi__selo{color:rgba(255,255,255,.8)}
.fm-heroi--imagem .fm-btn--solido{background:var(--fm-paper);color:var(--fm-ink);border-color:var(--fm-paper)}
.fm-heroi--imagem :focus-visible{outline-color:var(--fm-paper)}

/* Partido — texto à esquerda, imagem à direita. */
@media(min-width:56rem){
 .fm-heroi--partido .fm-heroi__interno{display:grid;grid-template-columns:minmax(0,1fr) 45%;
  gap:clamp(2rem,5vw,4rem);align-items:center}
}
.fm-heroi--partido .fm-heroi__figura{margin:0}
.fm-heroi--partido .fm-heroi__figura img{width:100%;aspect-ratio:4/3;object-fit:cover;
 border:.5rem solid var(--fm-ink);border-top-color:transparent;border-right-color:transparent}

/* Alinhamento centralizado. */
.fm-heroi--centro{text-align:center}
.fm-heroi--centro .fm-heroi__moldura{margin-inline:auto}
.fm-heroi--centro.fm-heroi--partido .fm-heroi__interno{display:block}