@font-face{font-family:Poppins;src:url("Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --fonte:Poppins,Arial,Helvetica,sans-serif;
  --fonte-titulo:"Noto Serif",Georgia,serif;
  --cor-fundo:#fff;
  --cor-texto:#101010;
  --cor-texto-suave:#4d4d4d;
  --cor-azul:#0c273b;
  --cor-amarelo:#ffde59;
  --cor-foco:#b38b2d;
  --cor-borda:#dedede;
  --cor-card:#fff;
  --cor-creme:#fffdf2;
  --cor-creme-borda:#f4ecd0;
  --sombra-card:0 14px 32px rgba(0,0,0,.08);
  --raio:20px;
  --raio-imagem:18px;
  --largura-site:1320px;
  --site-gutter:clamp(2rem,4vw,4rem);
  --espaco-grid:clamp(3.6rem,5vw,5rem);
  --gap-grid:clamp(2.2rem,3vw,3rem);
  --padding-card:clamp(2.4rem,3vw,2.8rem) clamp(2rem,2.5vw,2.4rem);
}

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%;overflow-y:scroll;background:var(--cor-fundo)}
/* overflow-x:clip, nao hidden: com o html em overflow-y:scroll, o hidden
   promovia o body a conteiner de rolagem (que nunca rola) e o position:sticky
   dos artigos relacionados grudava nele em vez do viewport. */
body{margin:0;overflow-x:clip;background:var(--cor-fundo);color:var(--cor-texto);font-family:var(--fonte);font-size:1.6rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.22}
h1{font-size:clamp(3.52rem,2.64rem + 1.92vw,5.12rem)}
h2{font-size:clamp(1.82rem,1.45rem + .52vw,2.18rem)}
p{color:var(--cor-texto);font-size:clamp(1.62rem,1.5rem + .28vw,1.9rem)}
p+p{margin-top:2.4rem}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
main{display:block;width:100%}
h1,h2,h3,p,a,button{max-width:100%;overflow-wrap:break-word}

.site-page h1,
.site-page h2{
  color:#050505;
  font-family:var(--fonte-titulo);
  text-transform:none;
}

.site-page h1{font-weight:800}
.site-page h2{font-weight:600}

.site-header{
  display:flex;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  padding:4.8rem 0 3.6rem;
  align-items:center;
  justify-content:space-between;
  gap:4rem;
}

/* 12rem e o tamanho do desktop; abaixo de 992px o logo divide a barra
   com o botao de menu e encolhe no bloco de 991px. */
.site-logo{display:flex;width:12rem;align-items:center}
.site-logo img{width:100%;height:auto}

.site-menu-toggle{
  display:none;
  width:4.4rem;
  height:4.4rem;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.site-menu-toggle:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
  border-radius:6px;
}

.site-menu-toggle span,
.site-menu-toggle span:before,
.site-menu-toggle span:after{
  display:block;
  width:2.6rem;
  height:2px;
  background:#050505;
  content:"";
  transition:transform .2s ease,opacity .2s ease;
}

.site-menu-toggle span{position:relative;margin:0 auto}
.site-menu-toggle span:before,
.site-menu-toggle span:after{position:absolute;left:0}
.site-menu-toggle span:before{top:-8px}
.site-menu-toggle span:after{top:8px}
.site-menu-toggle.ativo span{background:transparent}
.site-menu-toggle.ativo span:before{top:0;transform:rotate(45deg)}
.site-menu-toggle.ativo span:after{top:0;transform:rotate(-45deg)}

/* O mesmo <nav> serve os dois tamanhos: aqui e a barra horizontal do
   desktop; abaixo de 992px vira o painel que sobe de baixo. As pecas que
   so existem no painel (alca, topo, icones e redes) ficam ocultas aqui. */
.site-nav{display:flex;align-items:center;gap:3.6rem}
/* Espaco menor que os 3.6rem de antes porque cada item agora tem
   preenchimento proprio, para poder virar pilula na pagina atual. */
.site-nav__lista{
  display:flex;
  margin:0;
  padding:0;
  align-items:center;
  gap:1.2rem;
  list-style:none;
}

.site-nav__alca,
.site-nav__topo,
.site-nav__redes,
.site-nav__icone{display:none}

.site-nav__item{
  display:inline-flex;
  padding:.6rem 1.4rem;
  border-radius:999px;
  font-size:1.86rem;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}

.site-nav__item:hover{background:#f0f1f3}
.site-nav__item:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
  border-radius:999px;
}

/* Pagina atual: apenas o rotulo em negrito, sem fundo. */
.site-nav__item[aria-current="page"]{font-weight:600}

/* overflow:clip, nao hidden: hidden transforma o main em contêiner de rolagem
   e mata o position:sticky dos artigos relacionados; clip corta igual sem
   criar contexto de rolagem. */
.site-main{width:100%;min-height:60vh;background:var(--cor-fundo);color:var(--cor-texto);overflow:clip}

/* ------------------------------------------------------------------
   Home (layout editorial aprovado): hero creme com foto orgânica,
   retratos das raças, destaque do guia de adestramento, artigos em
   lista numerada e faixa da autora.
   ------------------------------------------------------------------ */
.home-hero{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:1rem auto 0;
  grid-template-columns:minmax(0,1.05fr) minmax(30rem,.95fr);
  align-items:center;
  overflow:hidden;
  border:1px solid var(--cor-creme-borda);
  border-radius:32px;
  background:var(--cor-creme);
}

.home-hero__texto{padding:clamp(3.2rem,5vw,6.4rem)}
.home-hero h1{margin:0;font-size:clamp(3.8rem,2.8rem + 2.2vw,5.8rem);line-height:1.1}
.home-hero h1 em{font-style:italic;color:var(--cor-foco)}
.home-hero p{max-width:54rem;margin-top:2.4rem;font-size:clamp(1.7rem,1.5rem + .4vw,2rem);line-height:1.56}

.botao-home{
  display:inline-flex;
  min-height:5.4rem;
  margin-top:3.2rem;
  padding:1.2rem 3rem;
  border-radius:999px;
  background:var(--cor-azul);
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  font-weight:600;
  text-transform:uppercase;
  transition:filter .2s ease,transform .2s ease;
}
.botao-home:hover{filter:brightness(1.15);transform:translateY(-1px)}
.botao-home:focus-visible{outline:3px solid var(--cor-foco);outline-offset:3px}
.botao-home--amarelo{background:var(--cor-amarelo);color:#050505}
.botao-home--amarelo:hover{filter:brightness(.97)}

.home-hero__foto{margin:0;height:100%;min-height:38rem;clip-path:ellipse(95% 120% at 100% 50%)}
.home-hero__foto img{width:100%;height:100%;object-fit:cover}

.secao-home{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(6.5rem,8vw,9.5rem) auto 0;
}

.secao-home__rotulo{
  display:block;
  margin-bottom:1rem;
  color:var(--cor-foco);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Retratos das raças: grade em flex, um retrato redondo por raça. A base de
   13.5rem vem do menor tamanho em que foto redonda + nome em duas linhas
   ainda funcionam. */
.retratos{display:flex;flex-wrap:wrap;justify-content:center;gap:2.6rem;margin-top:3.2rem}
.retrato{flex:1 1 13.5rem;max-width:17rem;text-align:center;transition:transform .2s ease}
.retrato:hover{transform:translateY(-4px)}
.retrato:focus-visible{outline:3px solid var(--cor-foco);outline-offset:4px;border-radius:16px}
.retrato__foto{
  display:block;
  width:100%;
  max-width:15rem;
  margin:0 auto;
  aspect-ratio:1;
  border:4px solid var(--cor-card);
  border-radius:50%;
  background:#ead3bc;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(8,22,33,.16);
}
.retrato__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* As fotos das racas tem margem bege larga ao redor do rosto; o scale
     aproxima o cao e o overflow do circulo corta o excesso. */
  transform:scale(1.22);
}
.retrato__nome{
  display:block;
  margin-top:1.4rem;
  font-family:var(--fonte-titulo);
  font-size:1.6rem;
  font-weight:600;
  line-height:1.3;
}

/* Destaque do guia de adestramento: cartão horizontal com foto sangrada. */
.destaque-guia{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(6.5rem,8vw,9.5rem) auto 0;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid var(--cor-borda);
  border-radius:26px;
}
.destaque-guia img{width:100%;height:100%;object-fit:cover}
.destaque-guia>div{padding:clamp(3rem,4vw,5.5rem)}
.destaque-guia small{
  color:var(--cor-foco);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.destaque-guia h2{margin-top:1.2rem}
.destaque-guia p{max-width:100%;margin-top:1.6rem;color:var(--cor-texto-suave)}

/* Artigos recentes: lista editorial com número de ordem (mais novo primeiro). */
.lista-artigos{display:flex;flex-wrap:wrap;margin-top:3.2rem;border-top:1px solid var(--cor-borda)}
.item-artigo{
  display:flex;
  flex:1 1 46rem;
  padding:2.4rem 1rem;
  border-bottom:1px solid var(--cor-borda);
  align-items:center;
  gap:2rem;
  transition:background-color .2s ease;
}
.item-artigo:hover{background:#fafafa}
.item-artigo:focus-visible{outline:3px solid var(--cor-foco);outline-offset:-3px}
.item-artigo strong{flex:none;width:5rem;color:var(--cor-borda);font-family:var(--fonte-titulo);font-size:3.2rem}
.item-artigo img{flex:none;width:9.6rem;height:6.4rem;border-radius:10px;object-fit:cover}
.item-artigo h3{font-family:var(--fonte-titulo);font-size:1.8rem;font-weight:600;line-height:1.35}
.item-artigo small{color:var(--cor-texto-suave);font-size:1.3rem}

/* Autora em faixa azul de ponta a ponta. */
.autora-faixa{margin-top:clamp(7rem,9vw,10rem);background:var(--cor-azul);color:#fff}
.autora-faixa__conteudo{
  display:flex;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  padding:clamp(4rem,5vw,5.6rem) 0;
  align-items:center;
  gap:4rem;
}
.autora-faixa img{
  flex:none;
  width:15rem;
  height:15rem;
  border:5px solid var(--cor-amarelo);
  border-radius:50%;
  object-fit:cover;
}
.autora-faixa h2{color:#fff}
.autora-faixa p{max-width:74rem;margin-top:1.4rem;color:rgba(255,255,255,.8)}

/* Rodapé mínimo do site. */
.rodape-site{
  width:100%;
  min-width:0;
  padding:2.6rem max(2rem,env(safe-area-inset-right)) calc(2.6rem + env(safe-area-inset-bottom)) max(2rem,env(safe-area-inset-left));
  border-top:1px solid rgba(255,255,255,.12);
  background:var(--cor-azul);
  color:rgba(255,255,255,.55);
  font-size:1.35rem;
  text-align:center;
  overflow-wrap:anywhere;
}
.rodape-site strong{color:#fff;font-weight:600}

.page-hero{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:3rem auto 0;
  text-align:left;
}

.page-hero h1{margin:0 0 2rem}
.page-hero p{max-width:78rem;font-size:clamp(1.9rem,1.6rem + .5vw,2.2rem);line-height:1.6}

/* Índice público de raças. As medidas e a composição vêm do mockup aprovado
   em mockups/racas/indice-racas.html; só o cabeçalho e o rodapé são os
   componentes reais do site. */
.racas-indice{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:3rem auto 0;
}

.racas-hero{
  padding:clamp(3rem,4vw,4.5rem) clamp(2.4rem,4vw,5rem);
  border:1px solid var(--cor-creme-borda);
  border-radius:26px;
  background:var(--cor-creme);
}
.racas-hero h1{font-size:clamp(3.2rem,2.4rem + 1.8vw,4.6rem);font-weight:800;line-height:1.15}
.racas-hero p{max-width:64rem;margin-top:1.6rem;font-size:clamp(1.65rem,1.5rem + .35vw,1.9rem)}
.racas-hero strong{font-weight:600}

.racas-busca{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:2.8rem}
.racas-busca input{
  flex:1 1 30rem;
  min-width:0;
  max-width:100%;
  min-height:5.2rem;
  padding:1.2rem 2rem;
  border:1px solid var(--cor-borda);
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:1.6rem;
}
.racas-busca input:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}
.racas-filtros{display:flex;flex-wrap:wrap;gap:.8rem}
.racas-filtro{
  padding:.9rem 1.8rem;
  border:1px solid var(--cor-borda);
  border-radius:999px;
  background:#fff;
  color:var(--cor-texto);
  font:inherit;
  font-size:1.42rem;
  font-weight:500;
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.racas-filtro:hover{border-color:var(--cor-azul)}
.racas-filtro:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}
.racas-filtro[aria-pressed="true"]{border-color:var(--cor-azul);background:var(--cor-azul);color:#fff}

.racas-contagem{margin-top:2.4rem;color:var(--cor-texto-suave);font-size:1.45rem}
.racas-grade{
  display:grid;
  margin-top:1.6rem;
  padding-bottom:6rem;
  grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));
  gap:2.4rem;
}
.racas-card{
  display:flex;
  overflow:hidden;
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
  flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.racas-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(8,22,33,.12)}
.racas-card:focus-visible{outline:3px solid var(--cor-foco);outline-offset:3px}
.racas-card[hidden]{display:none}
.racas-card__foto{position:relative}
.racas-card__foto img{width:100%;border-radius:0;aspect-ratio:16/10;object-fit:cover}
.racas-card__texto{display:flex;flex:1;padding:1.8rem 2rem 2rem;flex-direction:column;gap:.8rem}
.racas-card h2{font-family:var(--fonte-titulo);font-size:1.95rem;font-weight:600;line-height:1.25}
.racas-card p{color:var(--cor-texto-suave);font-size:1.4rem;line-height:1.5}
.racas-card__porte{
  margin-top:auto;
  padding-top:1.2rem;
  color:var(--cor-foco);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.racas-vazio{grid-column:1/-1;padding:4rem 2rem;border:1px solid var(--cor-borda);border-radius:var(--raio);text-align:center}
.racas-vazio[hidden]{display:none}
.racas-vazio h2{font-size:2.1rem}
.racas-vazio p{margin-top:1rem;color:var(--cor-texto-suave)}

.page-grid{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:var(--espaco-grid) auto 0;
  padding-bottom:8rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-grid);
}

.card-paginas{
  display:flex;
  min-height:49rem;
  padding:var(--padding-card);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
  align-items:center;
  flex-direction:column;
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}

.card-paginas:hover{transform:translateY(-2px);box-shadow:var(--sombra-card)}
.card-paginas:focus-visible{outline:3px solid var(--cor-foco);outline-offset:4px}
.card-paginas img{
  width:100%;
  margin-bottom:2.2rem;
  border-radius:var(--raio-imagem);
  aspect-ratio:1;
  object-fit:cover;
}

.card-paginas--video img{aspect-ratio:16/9}
.card-paginas--video span{margin-top:0}

.card-paginas h2{
  display:block;
  margin:0 0 1.45rem;
  color:#050505;
  font-family:var(--fonte-titulo);
  font-size:clamp(1.82rem,1.45rem + .52vw,2.18rem);
  font-weight:600;
  line-height:1.25;
  text-align:center;
}

.card-paginas p{
  display:block;
  max-width:100%;
  margin:0 auto 2.2rem;
  color:#151515;
  font-size:1.46rem;
  line-height:1.55;
}

.card-paginas span{
  display:block;
  margin-top:auto;
  color:#050505;
  font-size:1.58rem;
  line-height:1.2;
}

.card-paginas--ebook{padding-right:1.8rem;padding-left:1.8rem}
.card-paginas--ebook img{
  width:min(100%,31rem);
  height:auto;
  border-radius:10px;
  aspect-ratio:auto;
  object-fit:contain;
}

.site-empty-state{
  grid-column:1/-1;
  width:100%;
  padding:3rem;
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
  text-align:center;
}

.site-empty-state h2{margin:0 0 1.2rem;color:#050505}
.site-empty-state p{max-width:62rem;margin:0 auto;color:var(--cor-texto-suave);font-size:1.58rem;line-height:1.6}

/* Entrada em cascata dos cartoes do menu do celular. */
@keyframes menu-cartao-entra{to{opacity:1;transform:none}}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion:reduce){
  .site-nav__item,
  .site-nav__fechar,
  .site-nav__fundo,
  .site-nav__redes a,
  .site-menu-toggle span,
  .site-menu-toggle span:before,
  .site-menu-toggle span:after,
  .site-nav,
  .card-paginas{transition:none}
}

/* Faixa estreita do desktop (notebooks de 992 a 1279px). Sem isto o menu
   fica mais largo que o header: o logo era espremido e o botao Area do
   Aluno saia da tela, cortado pelo overflow-x do body. Ja acontecia antes
   dos chips — com eles o menu cresceu mais 44px e passou a estourar ate
   perto de 1176px. O corte fica em 1280px, e nao em 1200px, para o menu
   em tamanho cheio ter folga de verdade (104px em vez de 9px). */
@media (min-width:992px) and (max-width:1279px){
  .site-nav{gap:1.8rem}
  .site-nav__lista{gap:.4rem}
  .site-nav__item{padding:.55rem .8rem;font-size:1.6rem}
}

@media (max-width:991px){
  .site-header{position:relative;padding:3rem 0;gap:2.4rem}
  .site-logo{width:8rem}
  .site-menu-toggle{display:block;margin-left:auto}
  /* ----------------------------------------------------------------
     Menu do celular: painel que sobe de baixo (bottom sheet), na area
     que o polegar alcanca. Os itens viram cartoes com icone em duas
     colunas, o botao Area do Aluno ocupa a largura toda e as redes
     ficam no rodape do painel.
     ---------------------------------------------------------------- */
  .site-nav__fundo{
    position:fixed;
    z-index:19;
    inset:0;
    background:rgba(8,22,33,.5);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:opacity .26s ease,visibility .26s ease;
  }

  .site-nav__fundo.ativo{opacity:1;visibility:visible}

  .site-nav{
    position:fixed;
    z-index:20;
    right:0;
    bottom:0;
    left:0;
    display:block;
    max-height:88vh;
    max-height:88dvh;
    padding:1rem 2rem calc(2.4rem + env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
    background:#fff;
    box-shadow:0 -18px 46px rgba(8,22,33,.24);
    transform:translateY(101%);
    /* Fechado sai do fluxo de foco: sem isto o Tab entraria no painel
       invisivel, que era o que acontecia com a gaveta antiga. */
    visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .site-nav.ativo{transform:none;visibility:visible}

  .site-nav__alca{
    display:block;
    width:4.4rem;
    height:4px;
    margin:0 auto 1.6rem;
    border-radius:999px;
    background:#dcdcdc;
  }

  .site-nav__topo{
    display:flex;
    margin-bottom:2rem;
    align-items:center;
    justify-content:space-between;
    gap:1.6rem;
  }

  .site-nav__titulo{
    color:#050505;
    font-family:var(--fonte-titulo);
    font-size:2rem;
    font-weight:600;
  }

  .site-nav__fechar{
    display:grid;
    width:3.8rem;
    height:3.8rem;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f2f2f2;
    color:#050505;
    cursor:pointer;
    transition:background-color .18s ease;
  }

  .site-nav__fechar:hover,
  .site-nav__fechar:focus-visible{background:var(--cor-amarelo)}
  .site-nav__fechar:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}

  .site-nav__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}

  .site-nav__item{
    display:flex;
    min-height:10.4rem;
    padding:1.6rem;
    flex-direction:column;
    justify-content:space-between;
    gap:1.2rem;
    border:1px solid var(--cor-borda);
    border-radius:18px;
    color:#101010;
    font-size:1.6rem;
    font-weight:500;
    line-height:1.25;
    text-transform:none;
    transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
  }

  .site-nav__item:hover,
  .site-nav__item:focus-visible{opacity:1;border-color:var(--cor-azul);background:#fbfbfb;transform:translateY(-2px)}
  .site-nav__item:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}

  .site-nav__icone{
    display:grid;
    width:4rem;
    height:4rem;
    place-items:center;
    border-radius:12px;
    background:rgba(12,39,59,.06);
    color:var(--cor-azul);
  }

  /* Pagina atual: cartao no azul da marca, icone amarelo. */
  .site-nav__item[aria-current="page"]{border-color:var(--cor-azul);background:var(--cor-azul);color:#fff}
  .site-nav__item[aria-current="page"] .site-nav__icone{background:rgba(255,255,255,.12);color:var(--cor-amarelo)}

  .site-nav__redes{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.8rem;
    margin-top:2.2rem;
    padding-top:2rem;
    border-top:1px solid var(--cor-borda);
  }

  .site-nav__redes a{
    display:grid;
    width:3.6rem;
    height:3.6rem;
    place-items:center;
    border:1px solid var(--cor-borda);
    border-radius:50%;
    color:#6a6a6a;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  }

  .site-nav__redes a:hover,
  .site-nav__redes a:focus-visible{background:var(--cor-azul);border-color:var(--cor-azul);color:#fff}

  /* Cartoes entram em cascata depois que o painel sobe. */
  .site-nav__lista li{opacity:0;transform:translateY(10px)}
  .site-nav.ativo .site-nav__lista li{animation:menu-cartao-entra .3s ease forwards}
  .site-nav.ativo .site-nav__lista li:nth-child(1){animation-delay:.12s}
  .site-nav.ativo .site-nav__lista li:nth-child(2){animation-delay:.16s}
  .site-nav.ativo .site-nav__lista li:nth-child(3){animation-delay:.20s}
  .site-nav.ativo .site-nav__lista li:nth-child(4){animation-delay:.24s}
  .site-nav.ativo .site-nav__lista li:nth-child(5){animation-delay:.28s}
  .site-nav.ativo .site-nav__lista li:nth-child(6){animation-delay:.32s}

  /* Trava a rolagem do fundo enquanto o painel esta aberto. */
  body.menu-aberto{overflow:hidden}

  .home-hero{grid-template-columns:1fr}
  .home-hero__foto{min-height:26rem;clip-path:none}
  .destaque-guia{grid-template-columns:1fr}
  .destaque-guia img{max-height:26rem}
  .autora-faixa__conteudo{flex-direction:column;text-align:center}
  .page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Movimento reduzido no menu do celular. Precisa vir DEPOIS do bloco de
   991px: media query nao aumenta especificidade, entao um reset declarado
   antes seria vencido pelas transicoes do painel — e os cartoes, que
   comecam com opacity:0, ficariam invisiveis para sempre. */
@media (max-width:991px) and (prefers-reduced-motion:reduce){
  .site-nav,
  .site-nav__fundo,
  .site-nav__item,
  .site-nav__fechar,
  .site-nav__redes a{transition:none}
  .site-nav__item:hover,
  .site-nav__item:focus-visible{transform:none}
  .site-nav__lista li,
  .site-nav.ativo .site-nav__lista li{animation:none;opacity:1;transform:none}
}

@media (max-width:478px){
  .site-header{width:calc(100% - (var(--site-gutter) * 2));padding:2.5rem 0 3.5rem}
  .site-logo{width:6.4rem}
  .home-hero,
  .page-hero,
  .page-grid,
  .secao-home,
  .destaque-guia,
  .autora-faixa__conteudo{
    width:calc(100% - (var(--site-gutter) * 2));
  }

  .home-hero,.page-hero{margin-top:2rem}
  .racas-indice{width:calc(100% - (var(--site-gutter) * 2));margin-top:2rem}
  .home-hero h1,.page-hero h1{font-size:3.06rem}
  .home-hero p,.page-hero p{font-size:1.62rem;line-height:1.52}
  .home-hero__texto{padding:2.6rem 2rem}
  .item-artigo strong{display:none}
  .retratos{gap:1.8rem}
  .page-grid{grid-template-columns:1fr;justify-items:center}
  .card-paginas{width:100%;min-height:auto;padding:2.6rem 2rem}
  .card-paginas h2{font-size:2.05rem}
  .card-paginas p{font-size:1.46rem}
  .site-main{padding-bottom:5rem}
  /* Na home a ultima secao e a faixa azul da autora: o respiro branco acima
     do rodape (tambem azul) virava uma faixa branca entre dois azuis. A
     margem negativa engole exatamente o padding do main. */
  .autora-faixa{margin-bottom:-5rem}
}