/*
Theme Name: Zazul
Description: Tema em blocos do site Zazul (site único; cidades como conteúdo). Visual refeito a partir do site anterior.
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: zazul
*/

/* --zazul-fundo (imagem do topo) é definida em functions.php quando há imagem escolhida. */
:root { --zazul-escuro: #0b0d1c; --zazul-fundo: linear-gradient(120deg, #0b0d1c 0%, #1b2350 45%, #0b0d1c 100%); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1; }

:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--ciano); outline-offset: 2px; }

/* ---------- Cabeçalho: faixa escura com a imagem de fundo; na home fica sobre o topo ---------- */
.zazul-topo { position: relative; z-index: 50; background: var(--zazul-escuro) var(--zazul-fundo) center top / cover no-repeat; }
.zazul-topo > .wp-block-group { padding-top: 5.25rem; padding-bottom: 5.25rem; }
.zazul-home-cidade .zazul-topo,
.zazul-portal .zazul-topo { position: absolute; top: 0; left: 0; right: 0; background: none; }
.admin-bar.zazul-home-cidade .zazul-topo,
.admin-bar.zazul-portal .zazul-topo { top: var(--wp-admin--admin-bar--height, 0px); }

.zazul-menu { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.zazul-menu__marca { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.zazul-menu__marca img { display: block; width: 220px; max-width: 60vw; height: auto; }
.zazul-menu__nome { font-family: var(--wp--preset--font-family--titulo); font-size: 1.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zazul-menu__nav { flex: 1 1 0; min-width: 0; }
.zazul-menu__nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.zazul-menu__nav a { color: #fff; font-family: var(--wp--preset--font-family--titulo); font-size: .8125rem; font-weight: 400; text-decoration: none; text-transform: uppercase; }
.zazul-menu__nav a:hover,
.zazul-menu__nav a[aria-current] { color: #5bd4f0; }
.zazul-menu__nav .zazul-menu__voltar a::before { content: "\21A9"; margin-right: .6em; }
.zazul-menu__botao { display: none; padding: .5rem .9rem; border: 1px solid rgb(255 255 255 / .5); border-radius: 3px; background: none; color: #fff; font: 400 .8125rem var(--wp--preset--font-family--titulo); text-transform: uppercase; cursor: pointer; }

@media (max-width: 781px) {
	.zazul-topo > .wp-block-group { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.zazul-menu__botao { display: block; }
	.zazul-menu__nav { display: none; flex-basis: 100%; }
	.zazul-menu__nav.esta-aberto { display: block; }
	.zazul-menu__nav ul { flex-direction: column; gap: 0; }
	.zazul-menu__nav a { display: block; padding: .8rem 0; border-top: 1px solid rgb(255 255 255 / .15); }
}

/* ---------- Topo da home (e do portal) ---------- */
.zazul-hero { background: var(--zazul-escuro) var(--zazul-fundo) center top / cover no-repeat; color: #fff; text-align: center; }
.wp-block-group.zazul-hero { padding-top: 13.5rem !important; padding-bottom: 3rem !important; }
.zazul-hero h1 { margin: 0; color: #fff; font-family: var(--wp--preset--font-family--corpo); font-size: clamp(1.75rem, 3.3vw, 2.75rem); font-weight: 300; line-height: 1.2; text-transform: none; }
.zazul-hero .zazul-lema { margin: 1.9rem 0 0; font-family: var(--wp--preset--font-family--titulo); font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; }
.zazul-hero .wp-block-buttons { justify-content: center; gap: 1.4rem; margin-top: 2rem; }

/* Selos das lojas (desenhados em CSS; o texto do botão é o nome da loja). */
.zazul-loja .wp-block-button__link { display: block; min-width: 165px; padding: .45rem .9rem .45rem 3rem; border: 1px solid #a6a6a6; border-radius: 5px; background: #000 no-repeat .8rem center / 1.6rem; color: #fff; font-family: var(--wp--preset--font-family--apoio); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; text-align: left; text-transform: none; }
.zazul-loja .wp-block-button__link::before { display: block; font-size: .5625rem; font-weight: 600; letter-spacing: .02em; }
.zazul-loja .wp-block-button__link:hover { border-color: #fff; background-color: #000; }
.zazul-loja.is-android .wp-block-button__link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath fill='%2300d4ff' d='M2 1.5 13.5 13 2 24.5z'/%3E%3Cpath fill='%2300f076' d='M2 1.5 17 10l-3.5 3z'/%3E%3Cpath fill='%23ff3a44' d='M2 24.5 17 16l-3.5-3z'/%3E%3Cpath fill='%23ffd500' d='m17 10 5.5 3-5.5 3-3.5-3z'/%3E%3C/svg%3E"); }
.zazul-loja.is-android .wp-block-button__link::before { content: "DISPONÍVEL NO"; }
.zazul-loja.is-ios .wp-block-button__link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Crect x='5' y='1' width='14' height='24' rx='2.5' fill='%23fff'/%3E%3Crect x='7' y='4' width='10' height='15' fill='%23000'/%3E%3Ccircle cx='12' cy='22' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.zazul-loja.is-ios .wp-block-button__link::before { content: "Disponível na"; font-size: .6875rem; }

.zazul-hero__corpo { align-items: flex-start !important; gap: 2rem; margin-top: 4.5rem; }
.zazul-hero__corpo .wp-block-image { height: 395px; margin: 0; overflow: hidden; }
.zazul-hero__corpo .wp-block-image img { display: block; width: 330px; max-width: 100%; height: auto; margin: 0 auto; }
.zazul-recursos { margin: 0; padding: 4.25rem 0 0; list-style: none; font-size: .9375rem; line-height: 1.55; text-align: left; }
.zazul-recursos.is-esquerda { text-align: right; }
.zazul-recursos li { margin: 0 0 4.4rem; }
.zazul-recursos strong { display: block; margin-bottom: .6rem; font-size: 1.625rem; font-weight: 300; line-height: 1.05; color: #e9ecff; }
@media (max-width: 781px) {
	.wp-block-group.zazul-hero { padding-top: 11rem !important; padding-bottom: 0 !important; }
	.zazul-hero__corpo { margin-top: 3rem; }
	.zazul-hero__corpo > .wp-block-column:not(:has(.wp-block-image)) { display: none; }
}

/* ---------- Portal: logo, título e um cartão por cidade ---------- */
/* A cor fica na última camada; a primeira escurece a imagem, como no portal antigo. */
.zazul-portal__topo { background: linear-gradient(rgb(0 0 0 / .44), rgb(0 0 0 / .44)), #05060d var(--zazul-fundo-portal, var(--zazul-fundo)) center top / cover no-repeat; text-align: center; }
.wp-block-group.zazul-portal__topo { padding-top: 3.75rem; padding-bottom: 5.75rem; }
.zazul-portal__topo .wp-block-site-logo img { width: 285px; max-width: 70vw; height: auto; }
.zazul-portal__topo h1 { margin: 2.5rem 0 1.9rem; color: #fff; font-family: var(--wp--preset--font-family--corpo); font-size: clamp(1.6rem, 3.2vw, 2.375rem); font-weight: 300; text-transform: none; }
.zazul-cidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zazul-cidades a { display: flex; flex-direction: column; align-items: center; width: 200px; height: 340px; padding: 3.25rem .75rem 0; border-radius: 3px; background: #e9e9e9; color: #111; text-decoration: none; box-sizing: border-box; transition: background .2s; }
.zazul-cidades a:hover { background: #fff; }
.zazul-cidades__nome { font-size: 1rem; }
.zazul-cidades img { display: block; width: 130px; height: 130px; margin: 1.1rem 0 2rem; object-fit: contain; }
.zazul-cidades__botao { margin-top: auto; margin-bottom: 3.1rem; padding: .65rem .95rem; border-radius: 3px; background: #238e07; color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.zazul-portal .zazul-rodape { text-align: center; }
.zazul-portal .zazul-rodape__copy { margin: 0; font-size: .875rem; }

/* ---------- Seções da home ---------- */
.zazul-secao { text-align: center; }
.zazul-secao h2 { margin: 0; }
.zazul-subtitulo { margin: .6rem 0 0; color: var(--wp--preset--color--texto); font-family: var(--wp--preset--font-family--apoio); font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 300; line-height: 1.35; }
.zazul-subtitulo strong { font-weight: 300; color: #777; }
.zazul-apoio { max-width: 27rem; margin: .9rem auto 0 !important; color: #999; }

/* Imagem e botão logo abaixo do topo (ex.: "Acesso Web"). */
.zazul-destaque .wp-block-image img { width: 135px; height: auto; }
.zazul-destaque .wp-block-buttons { justify-content: center; margin-top: 2.5rem; }
.zazul-acesso .wp-block-button__link { min-width: min(360px, 80vw); padding: 1.05rem 1.5rem; border-radius: 0; background: var(--wp--preset--color--acesso); color: #fff; font-family: var(--wp--preset--font-family--corpo); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.zazul-acesso .wp-block-button__link::before { content: ""; display: inline-block; width: 1.4rem; height: 1.15rem; margin-right: .8rem; vertical-align: -.2rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 0h22a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8l.7 2H18v2H6v-2h2.3l.7-2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1.5 2.5v9h19v-9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 0h22a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8l.7 2H18v2H6v-2h2.3l.7-2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1.5 2.5v9h19v-9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.zazul-acesso .wp-block-button__link:hover { background: #2443d6; }

/* Sobre o app: três colunas de texto. */
.zazul-servicos { gap: 1.9rem; margin-top: 2.6rem; text-align: left; }
.zazul-servicos h3 { margin: 0 0 .7rem; }
.zazul-servicos p { margin: 0; color: #999; text-align: justify; }
.zazul-secao .zazul-logos { margin-top: 4.5rem; }
.zazul-secao .zazul-logos img { width: 360px; max-width: 100%; height: auto; }

/* Funcionalidades: imagem encostada no fim da seção + lista. */
.wp-block-group.zazul-funcionalidades { padding-bottom: 0 !important; text-align: left; }
.zazul-funcionalidades .wp-block-columns { align-items: stretch !important; gap: 2.5rem; margin: 0; }
.zazul-funcionalidades .wp-block-column:first-child { display: flex; align-items: flex-end; }
.zazul-funcionalidades .wp-block-image { margin: 0; }
.zazul-funcionalidades .wp-block-image img { display: block; width: 100%; height: auto; }
.zazul-funcionalidades .wp-block-column:last-child { padding: 1.75rem 0 4rem; }
.zazul-lista-marcada { margin: 3.4rem 0 0; padding: 0; list-style: none; color: #444; font-family: var(--wp--preset--font-family--titulo); font-size: .75rem; text-transform: uppercase; }
.zazul-lista-marcada li { position: relative; margin: 0 0 1rem; padding-left: 1.6rem; }
.zazul-lista-marcada li::before { content: ""; position: absolute; left: 0; top: .2em; width: .6rem; height: .6rem; border: 2px solid #222; border-radius: 50%; background: radial-gradient(#222 0 35%, transparent 40%); box-sizing: border-box; }

/* ---------- Como funciona: telas do aplicativo ---------- */
/* Sem script: fila de telas com rolagem horizontal. */
.zazul-telas { display: flex; gap: 2rem; overflow-x: auto; margin-top: 2.5rem; padding-bottom: 1rem; scroll-snap-type: x mandatory; text-align: center; }
.zazul-telas > .zazul-tela { flex: 0 0 15.5rem; margin: 0; scroll-snap-align: center; }
.zazul-tela h3 { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--titulo); font-size: .875rem; font-weight: 400; text-transform: uppercase; }
.zazul-tela .wp-block-image { display: block; margin: 0 auto 1rem; }
.zazul-tela .wp-block-image img { width: 246px; height: 428px; object-fit: cover; object-position: top; }
.zazul-chamada { margin: 0 0 .9rem; color: var(--wp--preset--color--texto); font-size: .75rem; line-height: 1.25; }
.zazul-chamada strong { display: block; font-family: var(--wp--preset--font-family--titulo); font-size: 1.125rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; }

/* Com script (site.js): palco com o celular no centro, telas vizinhas esmaecidas e chamadas nas laterais. */
.zazul-telas.tem-palco { display: block; position: relative; height: 680px; margin-top: 1.5rem; padding: 0; overflow: hidden; outline: none; }
/* O espaçamento automático entre blocos não vale dentro do palco. */
.tem-palco > * { margin-block-start: 0 !important; }
.tem-palco > .zazul-tela { position: absolute; inset: 0; pointer-events: none; }
.tem-palco .zazul-tela h3 { position: absolute; top: 0; left: 0; right: 0; margin: 0; opacity: 0; transition: opacity .4s; }
.tem-palco .zazul-tela .wp-block-image { display: block; position: absolute; top: 137px; left: 50%; width: 246px; height: 428px; margin: 0 0 0 -123px !important; opacity: .1; transform: translateX(calc(var(--pos, 0) * 235px)) scale(.82); transition: transform .6s ease, opacity .6s ease; }
.tem-palco .zazul-tela .wp-block-image img { display: block; width: 246px !important; height: 428px !important; max-width: none; }
.tem-palco .zazul-tela.esta-longe .wp-block-image { opacity: 0; }
.tem-palco .zazul-tela.esta-ativa { z-index: 4; }
.tem-palco .zazul-tela.esta-ativa h3 { opacity: 1; }
.tem-palco .zazul-tela.esta-ativa .wp-block-image { opacity: 1; transform: none; }

.zazul-telas__moldura { position: absolute; z-index: 3; top: 67px; left: 50%; width: 280px; height: 565px; margin-left: -140px; border: solid #fff; border-width: 70px 17px 67px; border-radius: 44px; box-shadow: 0 0 0 2px #d9c4a9, 0 18px 40px rgb(0 0 0 / .08), inset 0 0 0 1px #222; box-sizing: border-box; pointer-events: none; }
.zazul-telas__moldura::before { content: ""; position: absolute; top: -37px; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #333; }
.zazul-telas__moldura::after { content: ""; position: absolute; bottom: -57px; left: 50%; width: 44px; height: 44px; margin-left: -22px; border: 2px solid #d9c4a9; border-radius: 50%; box-sizing: border-box; }

.zazul-telas__seta { position: absolute; z-index: 5; top: 322px; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 3px solid #333; border-radius: 50%; background: none; color: #333; cursor: pointer; transition: background .2s, color .2s; }
.zazul-telas__seta:hover { background: #333; color: #fff; }
.zazul-telas__seta svg { width: 34px; height: 34px; }
.zazul-telas__seta.is-anterior { left: 0; }
.zazul-telas__seta.is-seguinte { right: 0; }

.tem-palco .zazul-chamada { position: absolute; width: 15rem; margin: 0; opacity: 0; transition: opacity .3s; }
.tem-palco .esta-ativa .zazul-chamada { opacity: 1; transition: opacity .5s .35s; }
.tem-palco .zazul-chamada.is-topo { top: 172px; }
.tem-palco .zazul-chamada.is-centro { top: 300px; }
.tem-palco .zazul-chamada.is-base { top: 440px; }
.tem-palco .zazul-chamada.is-esquerda { right: calc(50% + 190px); text-align: right; }
.tem-palco .zazul-chamada.is-direita { left: calc(50% + 190px); text-align: left; }
/* Linha e ponto que ligam a chamada ao celular. */
.tem-palco .zazul-chamada::before { content: ""; position: absolute; top: .65rem; width: 46px; height: 1px; background: #222; }
.tem-palco .zazul-chamada::after { content: ""; position: absolute; top: calc(.65rem - 8px); width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: #222; box-shadow: 0 0 0 1px #222; }
.tem-palco .zazul-chamada.is-esquerda::before { left: calc(100% + 14px); }
.tem-palco .zazul-chamada.is-esquerda::after { left: calc(100% + 58px); }
.tem-palco .zazul-chamada.is-direita::before { right: calc(100% + 14px); }
.tem-palco .zazul-chamada.is-direita::after { right: calc(100% + 58px); }

@media (max-width: 899px) {
	/* Sem espaço nas laterais: as chamadas descem para baixo do celular. */
	.zazul-telas.tem-palco { height: 880px; }
	.tem-palco .zazul-tela__chamadas { position: absolute; top: 660px; left: 0; right: 0; }
	.tem-palco .zazul-chamada { position: static; width: auto; margin: 0 0 .9rem; text-align: center !important; }
	.tem-palco .zazul-chamada::before,
	.tem-palco .zazul-chamada::after { content: none; }
	.zazul-telas__seta { width: 44px; height: 44px; border-width: 2px; }
	.zazul-telas__seta svg { width: 24px; height: 24px; }
}

/* ---------- Blog ---------- */
.zazul-blog-lista .wp-block-post-template { margin: 0; padding: 0; }
.zazul-blog-lista .wp-block-post { margin: 0; padding: 4.5rem 1.25rem 4.75rem; border-bottom: 1px solid #e7e7e7; text-align: center; }
.zazul-blog-lista .wp-block-post-title { margin: 0; }
.zazul-blog-lista .wp-block-post-title a:hover { color: var(--wp--preset--color--ciano-escuro); }
.zazul-assinatura { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; margin: .9rem 0 0; color: #999; font-size: .9375rem; }
.zazul-assinatura > * { margin: 0; color: inherit; font-size: inherit; }
.zazul-blog-lista .wp-block-query-pagination { justify-content: center; gap: .5rem; margin: 1.25rem 0; }
.zazul-blog-lista .wp-block-query-pagination a,
.zazul-blog-lista .wp-block-query-pagination .current { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; margin: 0 .15rem; padding: 0 .6rem; border: 3px solid #000; color: #000; font-size: .75rem; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.zazul-blog-lista .wp-block-query-pagination .current { border: 1px solid #ddd; color: #777; }
.zazul-titulo-lista { margin: 3.5rem 1.25rem 0; color: #777; font-size: 1.125rem; }

.zazul-post { text-align: center; }
.zazul-post > .wp-block-post-title { max-width: 37.5rem; }
.zazul-post > hr { max-width: 37.5rem; margin: 1.75rem auto 4rem; border: 0; border-top: 1px solid #ddd; }
.zazul-post .wp-block-post-content { color: #888; text-align: justify; }
.zazul-post .wp-block-post-content :where(h2, h3, h4, strong, b) { color: #444; }
.zazul-post .wp-block-post-content :where(h2, h3, h4) { font-family: var(--wp--preset--font-family--corpo); font-size: 1.125rem; font-weight: 500; text-align: left; text-transform: none; }
.zazul-post .wp-block-post-content a { color: #2a6fc9; text-decoration: none; }
.zazul-post .wp-block-post-content a:hover { text-decoration: underline; }
.zazul-post .wp-block-post-content img { max-width: 100%; height: auto; }
.wp-block-post-content .alignleft { float: left; margin: .3rem 1rem .5rem 0; }
.wp-block-post-content .alignright { float: right; margin: .3rem 0 .5rem 1rem; }
.wp-block-post-content img.aligncenter { display: block; margin-inline: auto; }
.zazul-etiquetas { margin-top: 2rem; padding: .75rem .9rem; background: #000; color: #fff; font-family: var(--wp--preset--font-family--titulo); font-size: .75rem; text-align: left; text-transform: uppercase; }
.zazul-etiquetas > * { margin: 0; }
.zazul-etiquetas a { color: #fff; text-decoration: none; }
.zazul-etiquetas a:hover { color: #5bd4f0; }

.zazul-blog-rodape :where(h2, h3) { font-size: 1rem; }
.zazul-blog-rodape ul { padding-left: 0; list-style: none; }
.zazul-blog-rodape li { padding: .35rem 0; border-bottom: 1px solid var(--wp--preset--color--borda); }
.zazul-blog-rodape .wp-block-post-title { margin: 0; font-family: inherit; font-size: inherit; font-weight: 400; text-transform: none; }

/* ---------- Localizador de pontos de venda (sem script: lista em colunas; com mapa: mapa + lista ao lado) ---------- */
.zazul-localizador { text-align: left; }
.zazul-localizador__busca { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.zazul-localizador__busca[hidden] { display: none; }
.zazul-localizador__busca label { font-weight: 500; }
.zazul-localizador__busca input { flex: 1 1 14rem; min-width: 0; padding: .65rem .9rem; border: 1px solid var(--wp--preset--color--borda); border-radius: 3px; font: inherit; }
.zazul-localizador__busca button { padding: .65rem 1.4rem; border: 0; border-radius: 3px; background: #333; color: #fff; font: inherit; cursor: pointer; }
.zazul-localizador__busca button:hover { background: #000; }
.zazul-localizador__busca button:disabled { opacity: .6; cursor: progress; }
.zazul-localizador__busca button.zazul-localizador__perto { border: 1px solid #333; background: none; color: #333; }
.zazul-localizador__busca button.zazul-localizador__perto:hover { background: var(--wp--preset--color--superficie); }
.zazul-localizador__aviso { min-height: 1.5em; margin: 0 0 .75rem; font-size: .875rem; color: var(--wp--preset--color--suave); }
/* isolation: as camadas do Leaflet (z-index até 1000) não passam por cima do cabeçalho. */
.zazul-localizador__mapa { height: 22rem; background: var(--wp--preset--color--superficie); isolation: isolate; font: inherit; }
.zazul-localizador__mapa .leaflet-popup-content { margin: .9rem 1rem; }
.zazul-localizador__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.zazul-localizador__lista li { padding: .9rem 0; border-bottom: 1px solid var(--wp--preset--color--borda); font-size: .875rem; color: #777; }
.zazul-localizador__lista :is(h3, p),
.zazul-localizador__balao :is(h3, p) { margin: 0 0 .2rem; }
.zazul-localizador__lista h3,
.zazul-localizador__balao h3 { font-family: var(--wp--preset--font-family--corpo); font-size: 1rem; font-weight: 500; color: var(--wp--preset--color--texto); }
.zazul-localizador__lista h3 button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.zazul-localizador__lista h3 button:hover { text-decoration: underline; }
.zazul-localizador__distancia { font-weight: 500; color: var(--wp--preset--color--ciano-escuro); }
.zazul-localizador__balao { max-width: 16rem; font-size: .875rem; color: var(--wp--preset--color--texto); }
.zazul-localizador__total { margin: 1rem 0 0; font-weight: 500; }
.zazul-localizador.tem-mapa .zazul-localizador__lista { display: block; }
main:has(.zazul-localizador.alignwide) > .wp-block-post-title { max-width: var(--wp--style--global--wide-size); }

@media (min-width: 782px) {
	.zazul-localizador.tem-mapa .zazul-localizador__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; height: 34rem; }
	.zazul-localizador.tem-mapa .zazul-localizador__mapa { height: 100%; }
	.zazul-localizador.tem-mapa .zazul-localizador__lista { overflow-y: auto; padding-right: .5rem; }
}

/* ---------- Páginas de texto da cidade ---------- */
.zazul-pagina > .wp-block-post-title { text-align: center; }
.zazul-pagina .wp-block-post-content { color: #888; }
.zazul-pagina .wp-block-post-content :where(h2, h3, h4, strong, b) { color: #444; }
.zazul-pagina .wp-block-post-content :where(h2, h3, h4) { font-size: 1.125rem; text-transform: none; }
.zazul-pagina .wp-block-post-content :where(p, li) { text-align: justify; }

/* ---------- Rodapé ---------- */
.zazul-rodape { color: #fff; text-align: left; }
.zazul-rodape a { color: #fff; text-decoration: none; }
.zazul-rodape a:hover { color: #bbb; }
.zazul-rodape__central { margin: 0 0 5rem; font-size: 1.125rem; line-height: 2.2; text-transform: uppercase; }
.zazul-rodape__central a { font-size: 1.25rem; font-weight: 700; }
.zazul-rodape__links { max-width: 61.5rem; margin: 0; padding: 0; list-style: none; }
.zazul-rodape__links a { display: block; padding: .85rem 0; border-bottom: 1px solid #555; }
.zazul-rodape__copy { margin: 6.5rem 0 0; color: #5a5a5a; font-size: .75rem; }