/*
Theme Name: São José
Theme URI: https://github.com/
Author: Kakau Comunicação
Description: Tema do Supermercado e Atacarejo São José, de Tibau do Sul/RN. Lojas e textos em Aparência > Personalizar, encarte da semana no menu Ofertas.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sao-jose
*/

/* =========================================================
   TOKENS
   Verde e amarelo vêm da logo. O verde agora aparece só em
   detalhes (selo da logo, botões e rótulos). A base é branca
   e areia, e quem dá cor à página são as fotos da Pipa.
   ========================================================= */
:root {
  --verde: #018B00;
  --verde-escuro: #0F4A12;
  --amarelo: #FCD202;
  --papel: #FFFFFF;
  --areia: #F5F2EC;          /* tom de areia tirado das fotos, usado só no fundo das lojas */
  --tinta: #1B2A1E;
  --tinta-suave: #54645A;
  --linha: #E4E0D6;

  --fonte-titulo: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --largura: 1120px;
  --raio: 14px;
  --altura-topo: 72px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-topo) + 8px + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.1; margin: 0; }
p { margin: 0; }

.container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.4rem;
  border: 0; border-radius: 999px;
  font: 600 1rem/1.2 var(--fonte-texto);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-whats { background: var(--amarelo); color: var(--tinta); }
.btn-whats:hover { background: #FFE04A; }
.btn-contorno { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.btn-contorno:hover { background: rgba(255,255,255,.14); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: #017400; }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-escuro:hover { background: #2B3D2F; }
.btn-claro { background: var(--areia); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-claro:hover { background: #ECE7DC; }

/* =========================================================
   CAMPOS PENDENTES (só aparecem enquanto houver [colchetes] no CONFIG)
   ========================================================= */
.pendente {
  background: #FFF3B0 !important;
  color: #6B5200 !important;
  outline: 2px dashed #D9A900;
  outline-offset: 1px;
  border-radius: 4px;
  padding: 0 .25em;
}
.aviso-rascunho {
  position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: 300px; padding: .75rem 1rem;
  background: #FFF3B0; color: #5A4500;
  border: 2px dashed #D9A900; border-radius: 12px;
  font-size: .85rem; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.aviso-rascunho strong { display: block; font-size: .9rem; }
.aviso-rascunho button { margin-top: .4rem; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* =========================================================
   CABEÇALHO (branco, logo em selo verde)
   ========================================================= */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--linha);
}
.topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--altura-topo); }
.topo-logo img { height: 50px; width: auto; border-radius: 10px; }
.topo-nav { display: flex; align-items: center; gap: 1.6rem; }
.topo-nav a { text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--tinta); }
.topo-nav a:hover { color: var(--verde); }
.topo .btn { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }
@media (max-width: 760px) {
  .topo-nav a { display: none; }
  .topo-logo img { height: 44px; }
}

/* =========================================================
   HERO COM FOTO DA PIPA
   ========================================================= */
.hero {
  position: relative;
  color: #fff;
  min-height: clamp(560px, 86vh, 800px);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.hero-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 60%;
}
/* escurece o lado do texto sem apagar a praia */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(12,24,16,.82) 0%, rgba(12,24,16,.55) 42%, rgba(12,24,16,.05) 75%),
    linear-gradient(0deg, rgba(12,24,16,.55) 0%, rgba(12,24,16,0) 45%);
}
.hero-grade {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end;
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -.01em;
  max-width: 12ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.hero-sub { margin-top: 1.25rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 44ch; color: rgba(255,255,255,.94); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-historia { margin-top: 1.5rem; font-size: .95rem; color: rgba(255,255,255,.85); }

/* Cartão branco com as lojas, apoiado sobre a foto */
.hero-lojas-caixa {
  background: #fff; color: var(--tinta);
  border-radius: 20px;
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.hero-lojas-caixa h2 { font-size: 1.2rem; font-weight: 600; color: var(--verde-escuro); margin-bottom: .5rem; }
.hero-lojas-caixa ul { list-style: none; margin: 0; padding: 0; }
.hero-lojas-caixa li + li { border-top: 1px solid var(--linha); }
.hero-lojas-caixa a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; text-decoration: none;
}
.hero-lojas-caixa .nome-loja { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 600; }
.hero-lojas-caixa .bairro-loja { display: block; font-size: .9rem; color: var(--tinta-suave); margin-top: .05rem; }
.hero-lojas-caixa svg { width: 22px; height: 22px; color: var(--verde); flex: none; }
.hero-lojas-caixa a:hover .nome-loja { color: var(--verde); }

@media (max-width: 860px) {
  /* no celular a foto fica no alto e se funde num fundo escuro, pra o texto branco nunca cair no branco */
  .hero { min-height: 0; display: block; background: var(--tinta); }
  .hero-foto { height: 460px; object-position: 25% 70%; }
  .hero::before {
    height: 460px;
    background: linear-gradient(0deg, rgba(27,42,30,1) 0%, rgba(27,42,30,.55) 40%, rgba(27,42,30,.1) 100%);
  }
  .hero-grade { grid-template-columns: 1fr; gap: 2rem; padding-top: 12rem; padding-bottom: 2rem; }
}

/* =========================================================
   SEÇÕES
   ========================================================= */
.secao { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.secao-cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.secao-cabeca h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; color: var(--tinta); }
.secao-cabeca p { color: var(--tinta-suave); max-width: 52ch; }

/* =========================================================
   OFERTAS: cada produto é uma etiqueta de preço de gôndola
   ========================================================= */
.ofertas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.etiqueta {
  position: relative;
  background: var(--amarelo);
  color: var(--tinta);
  border-radius: 10px;
  padding: 1.15rem 1.2rem 1.1rem 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  min-height: 190px;
}
.etiqueta::before {
  content: ""; position: absolute; left: .55rem; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--papel);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.etiqueta-produto { font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.etiqueta-detalhe { font-size: .9rem; margin-top: .15rem; opacity: .85; }
.etiqueta-de { font-size: .88rem; text-decoration: line-through; opacity: .75; }
.etiqueta-preco {
  display: flex; align-items: flex-start; gap: .15rem;
  font-family: var(--fonte-titulo); font-weight: 700; line-height: .9;
  color: var(--verde-escuro);
}
.etiqueta-preco .rs { font-size: 1.1rem; margin-top: .35rem; margin-right: .2rem; }
.etiqueta-preco .reais { font-size: 3.6rem; letter-spacing: -.02em; }
.etiqueta-preco .centavos { font-size: 1.6rem; margin-top: .25rem; }
.etiqueta-preco .unid { font-size: .9rem; font-family: var(--fonte-texto); font-weight: 600; align-self: flex-end; margin-left: .3rem; margin-bottom: .3rem; }
@media (max-width: 520px) {
  .ofertas-grade { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .etiqueta { min-height: 160px; padding: .9rem .8rem .9rem 1.2rem; }
  .etiqueta::before { left: .4rem; width: 8px; height: 8px; margin-top: -4px; }
  .etiqueta-produto { font-size: .98rem; }
  .etiqueta-preco .reais { font-size: 2.6rem; }
  .etiqueta-preco .centavos { font-size: 1.2rem; }
  .etiqueta-preco .rs { font-size: .9rem; }
}
.ofertas-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.ofertas-rodape p { font-size: .92rem; color: var(--tinta-suave); max-width: 60ch; }

/* =========================================================
   FAIXA DE FOTO (falésias)
   ========================================================= */
.faixa-foto { margin: 0; }
.faixa-foto img {
  width: 100%;
  max-width: none;
  height: clamp(240px, 40vw, 520px);
  object-fit: cover; object-position: 50% 55%;
}

/* =========================================================
   LOJAS
   ========================================================= */
.lojas { background: var(--areia); }
.lojas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.loja {
  background: #fff;
  border-radius: var(--raio);
  padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: inset 0 0 0 1px var(--linha);
}
.loja h3 { font-size: 1.6rem; font-weight: 600; color: var(--tinta); }
.loja-bairro { font-size: .95rem; color: var(--tinta-suave); margin-top: .2rem; }
.loja dl { margin: 0; display: grid; gap: .9rem; }
.loja dt { font-weight: 700; font-size: .9rem; color: var(--verde); }
.loja dd { margin: .1rem 0 0; }
.loja dd ul { list-style: none; margin: 0; padding: 0; }
.loja-acoes { margin-top: auto; display: grid; gap: .6rem; padding-top: .4rem; }
.loja-acoes .btn { width: 100%; }
@media (max-width: 900px) { .lojas-grade { grid-template-columns: 1fr; } }

/* =========================================================
   ATACAREJO (bloco amarelo da marca)
   ========================================================= */
.atacado { background: var(--amarelo); color: var(--tinta); }
.atacado-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 4rem; align-items: center; }
.atacado h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; color: var(--verde-escuro); }
.atacado-texto p { max-width: 50ch; }
.atacado-regra {
  margin-top: 1.5rem; padding: 1rem 1.2rem;
  background: #fff;
  border-radius: 10px;
  font-weight: 600;
}
.atacado .btn { margin-top: 1.75rem; }
@media (max-width: 860px) { .atacado-grade { grid-template-columns: 1fr; } }

/* =========================================================
   INSTAGRAM COM FOTOS
   ========================================================= */
.insta-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.insta-fotos { display: grid; grid-template-columns: .8fr 1fr; gap: .9rem; align-items: end; }
.insta-fotos img { width: 100%; height: auto; object-fit: cover; border-radius: var(--raio); }
.insta-fotos .alta { aspect-ratio: 9 / 15; }
.insta-fotos .larga { aspect-ratio: 4 / 5; object-position: 30% 50%; }
.insta h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; }
.insta p { color: var(--tinta-suave); margin-top: .6rem; max-width: 42ch; }
.insta .arroba { font-weight: 700; color: var(--tinta); margin-top: 1rem; }
.insta .btn { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .insta-grade { grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape { background: var(--tinta); color: #fff; padding: 2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.rodape-interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.rodape img { height: 56px; width: auto; border-radius: 10px; }
.rodape p { font-size: .9rem; color: rgba(255,255,255,.8); }

/* =========================================================
   BOTÃO FLUTUANTE + ESCOLHA DE LOJA
   ========================================================= */
.flutuante {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.flutuante svg { width: 32px; height: 32px; }

dialog.escolha {
  width: min(100% - 2rem, 420px);
  border: 0; border-radius: 20px; padding: 1.6rem;
  color: var(--tinta);
}
dialog.escolha::backdrop { background: rgba(12, 24, 16, .55); }
dialog.escolha h2 { font-size: 1.5rem; font-weight: 600; }
dialog.escolha p { color: var(--tinta-suave); margin-top: .3rem; font-size: .95rem; }
.escolha-lista { display: grid; gap: .6rem; margin: 1.25rem 0 1rem; }
.escolha-lista a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 1.1rem; border-radius: 12px;
  background: var(--areia); text-decoration: none;
  font-weight: 700; color: var(--tinta);
}
.escolha-lista a:hover { background: #ECE7DC; }
.escolha-lista small { display: block; font-weight: 500; color: var(--tinta-suave); }
.escolha-fechar { background: none; border: 0; color: var(--tinta-suave); font: 600 .95rem var(--fonte-texto); cursor: pointer; padding: .5rem 0; }

/* =========================================================
   MENU: item da página atual
   ========================================================= */
.topo-nav a[aria-current="page"] { color: var(--verde); }

.link-sobre { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.link-sobre:hover { color: var(--amarelo); }

/* =========================================================
   INSTAGRAM ESPELHADO (feed do Behold)
   Enquanto o feed não estiver configurado, ou se falhar,
   a colagem de fotos da Pipa continua no lugar.
   ========================================================= */
.insta-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: var(--raio);
  overflow: hidden;
}
.insta-feed[hidden] { display: none; }
.insta-post {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  background: var(--areia);
  overflow: hidden;
}
.insta-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.insta-post:hover img { transform: scale(1.04); }
.insta-post .tipo {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.insta-perfil { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.insta-perfil img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--amarelo); }
.insta-perfil[hidden] { display: none; }
.insta-perfil .arroba { margin-top: 0; }
.insta-perfil small { display: block; color: var(--tinta-suave); font-size: .88rem; }

/* =========================================================
   PÁGINA SOBRE
   ========================================================= */
.pagina-topo {
  position: relative; isolation: isolate;
  color: #fff;
  min-height: clamp(360px, 56vh, 520px);
  display: flex; align-items: flex-end;
}
.pagina-topo > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 40% 50%;
}
.pagina-topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(12,24,16,.85) 0%, rgba(12,24,16,.35) 60%, rgba(12,24,16,.1) 100%);
}
.pagina-topo .container { padding: 6rem 0 3rem; }
.pagina-topo h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; }
.pagina-topo p { margin-top: 1rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 46ch; color: rgba(255,255,255,.92); }

.sobre-historia { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem 4rem; align-items: start; }
.sobre-texto h2 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 1.5rem; }
.sobre-texto p { font-size: 1.1rem; line-height: 1.75; max-width: 60ch; }
.sobre-texto p + p { margin-top: 1.1rem; }
.sobre-foto { margin: 0; position: sticky; top: calc(var(--altura-topo) + 24px); }
.sobre-foto img { width: 100%; height: auto; border-radius: var(--raio); }
.sobre-foto figcaption { font-size: .9rem; color: var(--tinta-suave); margin-top: .6rem; }
.sobre-foto-vazia {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center; text-align: center;
  padding: 2rem;
  border: 2px dashed #D9A900; border-radius: var(--raio);
  background: #FFF8D6; color: #6B5200; font-weight: 600;
}
@media (max-width: 860px) {
  .sobre-historia { grid-template-columns: 1fr; }
  .sobre-foto { position: static; }
  .sobre-foto-vazia { aspect-ratio: 16 / 10; }
}

/* Linha do tempo: é uma sequência real (anos), por isso a numeração */
.linha-tempo-secao { background: var(--areia); }
.linha-tempo { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.linha-tempo li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--linha);
}
.linha-tempo li:last-child { border-bottom: 1px solid var(--linha); }
.linha-tempo .ano { font-family: var(--fonte-titulo); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--verde); }
.linha-tempo p { font-size: 1.05rem; padding-top: .25rem; }
@media (max-width: 560px) {
  .linha-tempo li { grid-template-columns: 1fr; gap: .4rem; }
}

.citacao { margin: 0; max-width: 820px; }
.citacao p {
  font-family: var(--fonte-titulo); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25;
  color: var(--verde-escuro);
}
.citacao footer { margin-top: 1.2rem; font-weight: 600; color: var(--tinta-suave); }

.cta-final { background: var(--amarelo); }
.cta-final .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-final h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; color: var(--verde-escuro); max-width: 18ch; }
.cta-final .acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* =========================================================
   FOTO DO PRODUTO NA ETIQUETA
   ========================================================= */
.etiqueta.com-foto { min-height: 0; }
.etiqueta-foto {
  margin: 0 0 .8rem;
  background: #fff;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.etiqueta-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .5rem;
  mix-blend-mode: multiply; /* some com o fundo branco das fotos de produto */
}
@media (max-width: 520px) {
  .etiqueta-foto { margin-bottom: .55rem; }
}

/* =========================================================
   PAGINAS CRIADAS NO EDITOR DE BLOCOS
   ========================================================= */
.pagina-conteudo { max-width: 820px; }
.pagina-conteudo .sobre-texto > * { max-width: 100%; }
.pagina-conteudo h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 2.5rem 0 1rem; }
.pagina-conteudo h3 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.pagina-conteudo ul, .pagina-conteudo ol { padding-left: 1.3rem; }
.pagina-conteudo li { margin-bottom: .4rem; }
.pagina-conteudo img { border-radius: var(--raio); }
.pagina-conteudo figcaption { font-size: .9rem; color: var(--tinta-suave); margin-top: .5rem; }
.pagina-conteudo blockquote {
  border-left: 4px solid var(--amarelo);
  padding-left: 1.2rem; margin: 2rem 0;
  font-family: var(--fonte-titulo); font-size: 1.4rem; line-height: 1.3;
}
.pagina-conteudo table { width: 100%; border-collapse: collapse; }
.pagina-conteudo th, .pagina-conteudo td { border-bottom: 1px solid var(--linha); padding: .7rem .5rem; text-align: left; }
.pagina-conteudo .alignwide { width: min(100vw - 2.5rem, 1120px); margin-inline: calc(50% - min(50vw - 1.25rem, 560px)); }
.pagina-conteudo .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }

/* =========================================================
   AJUSTES DO WORDPRESS
   ========================================================= */
/* barra de admin não pode cobrir o cabeçalho fixo */
body.admin-bar .topo { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .topo { top: 46px; } }
.topo-logo .custom-logo { height: 50px; width: auto; border-radius: 10px; }
.topo-nav ul { list-style: none; display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; }
.topo-nav li a { text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--tinta); }
.topo-nav li a:hover { color: var(--verde); }
.topo-nav .current-menu-item > a { color: var(--verde); }
@media (max-width: 760px) { .topo-nav ul { display: none; } }
.ofertas-vazio { padding: 2rem; background: var(--areia); border-radius: var(--raio); color: var(--tinta-suave); }