* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.6;
}
.container { width: 92.241vw; margin: 0 auto; }
.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;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Header — barra escura (telefone + redes) + faixa clara com logo e menu centralizados */
.site-header__top { background: #3F3F3F; color: #fff; position: relative; }
.site-header__top-inner { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; }
.site-header__phone {
  display: block; text-decoration: none; color: #fff; font-size: 1.32rem; font-weight: 400;
  background-image: url('/assets/images/icons/icon-phone.png'); background-position: left center; background-repeat: no-repeat;
  padding-left: 37px;
}
.site-header__social { display: flex; align-items: center; gap: 1rem; }
.site-header__social a { color: #fff; display: flex; font-size: 22px; line-height: 1; }
.site-header__divider { opacity: .5; }
.site-header__search-toggle { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 0; display: flex; }
.site-search {
  display: none; position: absolute; top: 100%; left: 0; right: 0; background: #3F3F3F; padding: .75rem 1.5rem;
  gap: .5rem; z-index: 20;
}
.site-search.is-open { display: flex; }
.site-search input { flex: 1; padding: .6rem 1rem; border: none; font-family: inherit; }
.site-search button { background: #000; color: #fff; border: none; padding: 0 1.2rem; cursor: pointer; }
.site-header__main {
  background: var(--cor-fundo-alt);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.5rem 0;
}
.site-header__logo { display: block; }
.site-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; justify-content: center; }
.site-nav a { text-decoration: none; font-size: .95rem; font-weight: 700; text-transform: uppercase; color: var(--cor-primaria-clara); }
.site-nav a:hover { opacity: .7; }
.site-nav-toggle { display: none; }

/* Hero — carrossel de banners pré-montados (imagem já traz texto/botão) */
.hero-carousel { position: relative; width: 100%; aspect-ratio: 2.864; background: #000; overflow: hidden; }
.hero-carousel__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: block;
}
.hero-carousel__slide.is-active { opacity: 1; z-index: 1; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; }
.hero-carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; padding: 0; }
.hero-carousel__dot.is-active { background: #fff; }

.btn { display: inline-block; padding: .8rem 1.8rem; border: 2px solid currentColor; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }
.btn--white { color: #fff; }
.btn--dark { color: #000; border-color: #000; }
.btn--white:hover { background: #fff; color: #000; }
.btn--dark:hover { background: #000; color: #fff; }

/* Seções gerais */
.section { padding: 4rem 0; }
.section--alt { background: var(--cor-fundo-alt); }
.section__title { font-size: 1.57rem; font-weight: 500; margin-bottom: 35px; text-align: center; text-transform: uppercase; letter-spacing: normal; }
.section__title--left { text-align: left; }
.section__title--white { color: #fff; }
.section__subtitle { text-align: center; font-size: 1.345rem; font-weight: 700; text-transform: uppercase; margin: 0 0 35px; color: #000; }

/* Serviços — cards com imagem de fundo + overlay (valores extraídos do site original) */
.servicos-grid--full { display: flex; flex-wrap: wrap; justify-content: space-between; }
.servico-card {
  position: relative; width: 22%; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.servico-card__overlay {
  background: #3F3F3FBB; color: #fff; min-height: 460px; text-align: center; padding: 39px 15px;
}
.servico-card__titulo { font-size: 1.13rem; font-weight: 700; margin-bottom: 5px; min-height: 42px; text-transform: uppercase; }
.servico-card__desc { line-height: 1.6; }
.servico-card__desc p { margin: 0; }
@media (max-width: 900px) {
  .servico-card { width: 48%; margin-bottom: 1.5rem; }
}
@media (max-width: 560px) {
  .servico-card { width: 100%; }
}

/* Sobre (home) — foto + logo de fundo */
.sobre-home {
  background: #000 url('/assets/images/hero/hero-justica.webp') top center/cover no-repeat;
  color: #fff;
  padding: 4rem 0;
}
.sobre-home__texto { max-width: 46%; }
.sobre-home__texto p { line-height: 1.7; }
@media (max-width: 900px) { .sobre-home__texto { max-width: 100%; } }

/* Porque Advocacia para Mulheres */
.porque {
  width: 655px; max-width: 100%; margin: 0 auto; line-height: 1.63;
  text-align: justify; text-align-last: center;
}
.porque__texto p { margin-bottom: 15px; color: #000; }
.porque__quote p { font-weight: 600; margin: 0; text-align: right; text-align-last: right; }

/* Separar para Viver */
.separar { text-align: center; }
.separar__title { margin-bottom: 10px; }
.separar__subtitulo { font-size: 1.27rem; font-weight: 400; color: #000; margin-bottom: 50px; text-align: center; }
.separar__video { display: block; aspect-ratio: 16 / 9; margin: 0 auto; max-width: 830px; padding: 0; position: relative; width: 100%; }
.separar__video video { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

/* Newsletter */
.newsletter { background: url('/assets/images/bg/bg-form-news.webp') center/cover no-repeat; padding: 3.5rem 0; text-align: center; margin-top: -35px; position: relative; }
.newsletter-form { display: flex; gap: 1rem; max-width: 700px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-form input { flex: 1; min-width: 200px; padding: .8rem 1rem; border: none; font-family: inherit; }

/* Consultar / Denunciar */
.consultar-denunciar { background-color: #3F3F3F; padding: 35px 0; }
.consultar-denunciar__grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 2rem; text-align: center; }
.consultar-denunciar__item {
  background-position: 50% 0; background-repeat: no-repeat; padding-top: 170px;
  text-transform: uppercase; font-size: 1.6rem;
}
.consultar-denunciar__item--consultar { background-image: url('/assets/images/icons/icon-consultar.png'); }
.consultar-denunciar__item--denunciar { background-image: url('/assets/images/icons/icon-denunciar.png'); }
.consultar-denunciar__item h3 { color: #fff; font-size: 1.2rem; font-weight: 500; margin: 0 0 22px; }
.consultar-denunciar__btn {
  display: block; background-color: #7F7F7F; color: #fff; font-weight: 700; width: 205px;
  padding: 10.5px 0; margin: 0 auto; text-transform: uppercase; text-align: center; transition: .2s;
}
.consultar-denunciar__btn:hover { background-color: #000; }
@media (max-width: 640px) { .consultar-denunciar__grid { flex-direction: column; } }

/* Mapa */
.mapa iframe { display: block; }

/* Busca */
.busca-lista { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.busca-item { border-bottom: 1px solid var(--cor-borda); padding-bottom: 1.5rem; }
.busca-item__tipo { font-size: .75rem; text-transform: uppercase; color: var(--cor-texto-claro); letter-spacing: .05em; }
.busca-item__titulo { display: block; font-size: 1.1rem; font-weight: 700; margin: .25rem 0 .5rem; text-decoration: none; }
.busca-item__titulo:hover { text-decoration: underline; }
.busca-item__trecho { color: var(--cor-texto-claro); font-size: .9rem; }

/* Blog */
.blog-secao { background-color: #D5D5D5; }
.blog-grid { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 35px; }
.blog-card { width: 26.826%; background-color: #3F3F3F; }
.blog-card img { height: auto; width: 100%; display: block; transition: 1s; }
.blog-card:hover img { transform: scale(1.1); }
.blog-card__body { color: #fff; padding: 16px 15px; text-align: center; overflow: hidden; }
.blog-card__titulo { font-size: 1.175rem; font-weight: 700; line-height: 1.2; margin-bottom: 5px; }
.blog-card__resumo { line-height: 1.56; margin-bottom: 19px; color: #fff; }
.blog-card__leiamais {
  display: block; font-size: 1.23rem; font-weight: 700; text-align: center; text-transform: uppercase;
  width: 142px; background-color: #BEBEBE; color: #fff; margin: 0 auto; padding: 16px 0; transition: 2s;
}
.blog-card__leiamais:hover { background-color: #000; }
@media (max-width: 900px) {
  .blog-card { width: 48%; margin-bottom: 1.5rem; }
}
@media (max-width: 560px) {
  .blog-card { width: 100%; }
}
.blog-post-layout { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0; }
.blog-post { flex: 1 1 60%; max-width: 60%; }
.blog-post img { margin-bottom: 2rem; }
.blog-post h1 { font-size: 24px; font-weight: 500; color: #000; line-height: 1.15; margin: 0 0 15px; }
.blog-post__meta { display: flex; align-items: center; color: #000; font-size: 16px; margin-bottom: 1rem; }
.blog-post__meta .fa-calendar { margin-right: 10px; }
.blog-post__corpo { font-size: 1rem; }
.blog-post__corpo p { margin-bottom: 1rem; }
.blog-post__corpo ul, .blog-post__corpo ol { margin: 0 0 15px 10px; padding: 0 0 0 16px; }
.blog-post__corpo li { margin: 0 0 10px; padding: 0; }
.blog-post__corpo h2 { font-size: 1.35rem; font-weight: 700; color: #000; margin: 2rem 0 1rem; line-height: 1.25; }
.blog-post__corpo h3 { font-size: 1.15rem; font-weight: 700; color: #000; margin: 1.5rem 0 .75rem; line-height: 1.25; }

.blog-sidebar { flex: 1 1 35%; max-width: 35%; }
.blog-sidebar__box { margin-bottom: 25px; }
.blog-sidebar__box h2 {
  background: #3F3F3F; color: #fff; font-size: 19.2px; font-weight: 500; text-transform: uppercase;
  text-align: center; padding: 10px 0; margin: 0 0 10px;
}
.blog-sidebar__box ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar__box a {
  display: block; background: #EFEFEF; color: #000; font-size: 16px; line-height: 1.15;
  text-decoration: none; padding: 10px; margin: 0 0 5px;
}
.blog-sidebar__box a:hover { text-decoration: underline; }
.blog-sidebar__search input {
  width: 100%; border: 1px solid #EFEFEF; padding: 15px 10.625px; font-family: inherit; font-size: 1rem;
}
@media (max-width: 900px) {
  .blog-post, .blog-sidebar { flex-basis: 100%; max-width: 100%; }
}

/* Página de conteúdo simples */
.pagina-conteudo { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem; }
.pagina-conteudo h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }

/* Barra de título de página interna */
.page-header { background-color: #3F3F3F; padding: 35px 0; }
.page-header h1, .page-header h2 { color: #fff; font-size: 1.7rem; font-weight: 500; margin: 0; text-align: center; }

.breadcrumbs { background: #F5F5F5; padding: .6rem 0; font-size: .8rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; color: #666; }
.breadcrumbs a { color: #666; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span[aria-current] { color: #3F3F3F; font-weight: 700; }
.breadcrumbs__sep { margin: 0 .5rem; opacity: .6; }

.pagina-404 { text-align: center; padding: 5rem 0; }
.pagina-404__texto { font-size: 1.1rem; color: var(--cor-texto-claro); margin-bottom: 2rem; }
.pagina-404__links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Página "Stella Bueno" — vem com as classes originais no próprio conteúdo migrado */
.qs-sobre {
  background-image: url('/assets/images/sobre/stella-bueno-escritorio.png'); background-position: right bottom; background-repeat: no-repeat;
  padding: 75px 0 260px; margin: 0 auto; max-width: 1160px; width: 92.241vw;
}
.qs-sobre__infos { margin: 0; max-width: 530px; width: 100%; }
.qs-sobre h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: 1rem; }
.qs-sobre p { text-align: left; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }

.qs-mvv {
  display: flex; flex-wrap: wrap; background-image: url('/assets/images/sobre/bg-mvv.png'); background-position: center top;
  background-repeat: no-repeat; background-size: cover; color: #fff; justify-content: space-around;
  margin-top: -250px; padding: 200px 0 50px;
}
.qs-mvv > div { background-position: center top; background-repeat: no-repeat; margin: 0; padding: 230px 0 0; width: 21%; }
.qs-mvv > div p { padding: 0 5px; text-align: center; font-size: 1rem; line-height: 1.5; }
.qs-missao { background-image: url('/assets/images/sobre/icon-missao.png'); }
.qs-visao { background-image: url('/assets/images/sobre/icon-visao.png'); }
.qs-valores { background-image: url('/assets/images/sobre/icon-valores.png'); }

.qs-estela {
  background-image: url('/assets/images/sobre/stella-bueno-quem-sou.png'); background-position: bottom left; background-repeat: no-repeat;
  padding: 75px 7% 69px 50%;
}
.qs-estela h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; }
.qs-estela ul { list-style: none; margin: 0 0 25px; padding: 0 0 0 10px; }
.qs-estela ul li {
  background-image: url('/assets/images/sobre/icon-stella-menu-gray.png'); background-position: left center; background-repeat: no-repeat;
  padding-left: 27px; font-size: 1rem; margin-bottom: 10px; color: #000;
}
@media (max-width: 900px) {
  /* .qs-sobre e .qs-estela reservavam um padding fixo em px pra foto de fundo aparecer sem
     sobrepor o texto — quebra sempre que o texto cresce mais que o previsto. Primeira tentativa
     (foto em tela cheia antes/depois do texto) resolveu a sobreposição mas ficou desconectada
     do conteúdo. Troca por um retrato pequeno (estilo foto de perfil, cantos arredondados),
     posicionado logo junto ao título de cada seção — lê como "é ela quem está falando", não
     como um banner solto. */
  .qs-sobre { background-image: none; padding: 40px 20px; text-align: center; }
  .qs-sobre__infos { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
  .qs-sobre__infos::before {
    content: ''; order: -1; display: block; width: 160px; aspect-ratio: 1 / 1; margin-bottom: 20px;
    border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.18);
    background: url('/assets/images/sobre/stella-bueno-escritorio.png') center top / cover no-repeat;
  }
  .qs-sobre__infos h2 { order: -1; }
  /* .qs-mvv usa uma imagem de fundo (onda clara -> escura) desenhada pra layout de 3 colunas
     lado a lado do desktop. No mobile os 3 itens empilham (seção fica bem mais alta), e o
     background-size:cover distorce a proporção da onda — a transição pro fundo escuro não bate
     mais com onde o conteúdo realmente começa, deixando o ícone da Missão (branco) sobre fundo
     ainda claro, quase invisível. Troca por fundo escuro sólido cobrindo os 3 itens por igual. */
  .qs-mvv { background-image: none; background-color: #3F3F3F; margin-top: 0; padding: 40px 20px; }
  .qs-mvv > div { width: 100%; margin-bottom: 2rem; }
  .qs-estela { background-image: none; padding: 40px 20px; text-align: center; }
  .qs-estela ul { text-align: left; }
}

/* Página "Palestras | Cursos | Seminários" — conteúdo já vem com estas classes */
.pcs-header {
  background-image: url('/assets/images/palestras/bg-pcs-header.png'); background-position: center top; background-repeat: no-repeat;
  background-size: cover; color: #fff; padding: 50px 0;
}
.pcs-header h1 { font-size: 1.3rem; font-weight: 500; margin-bottom: 15px; text-align: center; }
.pcs-header p, .pagina-palestras > p { margin: 0 auto; text-align: center; width: 70%; }

.psc-container {
  background-color: #3F3F3F; background-image: url('/assets/images/palestras/bg-palestras.png');
  background-position: center top; background-repeat: no-repeat; padding: 50px 3.25%;
}
.psc-container h3 { padding: 0; margin: 0; font-size: 1.1rem; font-weight: 700; }
.psc-container ul { list-style: none; margin: 0; padding: 10px 0 15px 15px; }
.psc-container ul li {
  background-image: url('/assets/images/sobre/icon-stella-menu-gray.png'); background-position: left center; background-repeat: no-repeat;
  padding-left: 27px; margin-bottom: 4px;
}
@media (max-width: 900px) {
  .pcs-header p, .pagina-palestras > p { width: 100%; padding: 0 1rem; }
  /* .psc-container tem background-color: #3F3F3F (escuro) só pra cobrir a sobra abaixo da
     imagem de fundo (que não repete e é mais baixa que o conteúdo). A imagem em si é cinza
     claro (~#d6d6d6) — é ela que dá contraste pro texto preto. No mobile a imagem é removida
     (não escala bem em telas estreitas), sobrando só o fundo escuro atrás de texto preto.
     Troca a cor pelo tom real da imagem, pra manter o texto legível. */
  .psc-container { background-image: none; background-color: #d6d6d6; }
}

/* Contato */
.contato-form { width: 63.81%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.contato-form input, .contato-form textarea {
  background-color: #D5D5D5; border: 1px solid #D5D5D5; font-family: inherit; font-size: .97rem;
  font-weight: 600; padding: 12.5px 17px; margin-bottom: 12px;
}
.contato-form__linha { display: contents; }
.contato-form__linha input { width: 48.7%; }
.contato-form textarea { width: 100%; height: 119px; }
.contato-form textarea:focus { background-color: transparent; }
.contato-form .button-bar { width: 161px; margin: 0 auto; }
.contato-form .button-bar .resposta { width: 100%; padding: 11.5px 0; text-align: center; margin-bottom: 0; }
.contato-form .button-bar button {
  background-color: #3F3F3F; color: #fff; font-size: .98rem; font-weight: 700;
  padding: 13.5px 0; text-align: center; text-transform: uppercase; width: 100%; border: none; cursor: pointer; transition: 2s;
}
.contato-form .button-bar button:hover { background-color: #000; }
.resposta-erro { color: var(--cor-erro); font-size: .85rem; text-align: center; margin-top: .5rem; }
@media (max-width: 700px) {
  .contato-form { width: 92.241vw; }
  .contato-form__linha input { width: 100%; }
}
.alert { padding: 1rem; margin-bottom: 1rem; text-align: center; }
.alert--success { background: #e6f4ea; color: var(--cor-sucesso); }
.alert--error { background: #fbeaea; color: var(--cor-erro); }

/* Footer */
.site-footer {
  background: #3F3F3F url('/assets/images/bg/bg-acesso-rapido.webp') top center / cover no-repeat;
  color: #fff; padding: 75px 0 50px; margin-top: 0;
}
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2rem; }
.site-footer__inner h2 { font-size: 1.22rem; font-weight: 700; margin: 0 0 17px; text-transform: uppercase; }

.site-footer__logo-col { width: 400px; max-width: 100%; }
.site-footer__logo-col figure { margin: 0 0 48px; }
.site-footer__logo-col img { width: 100%; height: auto; }
.site-footer__social { display: flex; align-items: center; justify-content: space-between; width: 95px; }
.site-footer__social a { color: #fff; font-size: 22px; line-height: 1; }
.site-footer__social a:hover { opacity: .8; }

.site-footer__nav { list-style: none; }
.site-footer__nav li {
  background-image: url('/assets/images/icons/icon-stella-menu.png'); background-position: left center; background-repeat: no-repeat;
  padding-left: 21px; margin-bottom: 8px;
}
.site-footer__nav a { text-decoration: none; font-size: 1rem; }
.site-footer__nav a:hover { text-decoration: underline; }

.site-footer__contato-col { width: 313px; max-width: 100%; }
.site-footer__contato-col p {
  background-position: left center; background-repeat: no-repeat; margin-bottom: 9px; padding-left: 36px; font-size: 1rem;
}
.site-footer__email { background-image: url('/assets/images/icons/icon-envelope.png'); }
.site-footer__email a { text-decoration: none; }
.site-footer__email a:hover { text-decoration: underline; }
.site-footer__phone { background-image: url('/assets/images/icons/icon-phone.png'); padding: 3px 0 3px 36px !important; }
.site-footer__ender { background-image: url('/assets/images/icons/icon-marker.png'); background-position: left top !important; }

.site-credito { padding: 24px 0; }
.site-credito p { font-size: 1.2rem; font-weight: 300; text-align: center; color: #000; }
.site-credito a { text-decoration: none; }
.site-credito a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .site-footer__inner { justify-content: center; text-align: center; }
  .site-footer__social { margin: 0 auto; }
  /* .site-footer__inner centraliza o TEXTO, mas o ícone de cada link (background-image no <li>,
     ancorado na borda esquerda) não acompanhava — ícone ficava fixo à esquerda, longe do texto
     centralizado. Vira flex-column com cada <li> encolhido ao seu próprio conteúdo (ícone+texto
     juntos), aí sim centralizado como bloco único. */
  .site-footer__nav { display: flex; flex-direction: column; align-items: center; }
  .site-footer__nav li { display: inline-block; text-align: left; }
  /* Mesmo problema dos ícones do menu, aqui nos ícones de contato (envelope/telefone/endereço):
     ícone ancorado na borda esquerda do <p>, texto centralizado independente dele. */
  .site-footer__contato-col { display: flex; flex-direction: column; align-items: center; }
  .site-footer__contato-col p { display: inline-block; text-align: left; }
}

/* WhatsApp flutuante */
.whatsapp-float {
  position: fixed; bottom: 2rem; right: 2rem; background: var(--cor-whatsapp); color: #fff;
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.8rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 50;
  animation: whatsapp-pulse 2.2s infinite;
}
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.6); }
  70% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width: 768px) {
  .site-header__top { display: none; }
  .site-header__main { position: relative; flex-direction: row; justify-content: center; padding: 0; }
  .site-nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    position: absolute; top: 0; left: 0; width: 56px; height: 56px;
    background: #3F3F3F; border: none; cursor: pointer; padding: 0; margin: 0; z-index: 5;
  }
  .site-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; }
  .site-header__logo { padding: 1.5rem 0; }
  .site-nav {
    display: none; position: absolute; top: 56px; left: 0; width: 300px; max-width: 100%;
    flex-direction: column; gap: 0; background: rgba(63, 63, 63, .933); z-index: 10;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    color: #fff; font-size: 15.2px; padding: 7px; border-bottom: 1px solid #fff;
  }
}

/* Espaçamento das seções no mobile — 64px (4rem) era o mesmo valor do desktop, deixando a
   rolagem mais longa que o necessário numa tela pequena. Fica no fim do arquivo de propósito:
   .section e .sobre-home têm padding declarado sem media query, então só uma regra que vem
   depois no CSS (não uma questão de especificidade, as duas são de classe única) consegue
   sobrescrever nos dois casos. */
@media (max-width: 900px) {
  .section, .sobre-home { padding: 40px 0; }

  /* .newsletter tem padding: 3.5rem + margin-top: -35px pra sobrepor levemente o card do blog
     no desktop (efeito proposital, mantido). No mobile isso deixava só 21px de respiro em cima
     contra 56px embaixo — bem torto. Zera a sobreposição e iguala ao padrão das outras seções. */
  .newsletter { margin-top: 0; padding: 40px 0; }
}