/* ============================================================
   Panificadora da Vila II
   estilo.css - base, componentes e paginas

   Referencia visual: site anterior. Montserrat nos titulos,
   Lato no texto, banner panoramico contido, cardapio em duas
   colunas com linha pontilhada entre produto e preco.
   ============================================================ */

/* ------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------ */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--altura-cabecalho) + 16px); }

body{
	margin:0;
	background:var(--cor-fundo);
	color:var(--cor-texto);
	font-family:var(--fonte-texto);
	font-size:var(--txt-corpo);
	font-weight:400;
	line-height:var(--altura-texto);
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
}

h1,h2,h3,h4{
	font-family:var(--fonte-titulo);
	text-wrap:balance;
	color:var(--cor-marca);
	line-height:var(--altura-titulo);
	font-weight:var(--peso-titulo);
	letter-spacing:-.01em;
	margin:0 0 var(--esp-3);
}

h1{ font-size:var(--txt-t1); }
h2{ font-size:var(--txt-t2); }
h3{ font-size:var(--txt-t3); }
h4{ font-size:var(--txt-t4); }

p{ margin:0 0 var(--esp-3); }
p:last-child{ margin-bottom:0; }

a{ color:var(--cor-acento-forte); text-underline-offset:3px; }
a:hover{ color:var(--cor-marca-escura); }

img{ max-width:100%; height:auto; display:block; }

ol,ul{ padding-left:1.2em; }
li{ margin-bottom:var(--esp-2); }

:focus-visible{
	outline:2px solid var(--cor-acento-forte);
	outline-offset:3px;
	border-radius:var(--raio);
}

.pular{
	position:absolute; left:-9999px; top:0;
	background:var(--cor-marca); color:#fff;
	padding:var(--esp-2) var(--esp-3); z-index:100;
}
.pular:focus{ left:var(--esp-3); top:var(--esp-2); }

/* ------------------------------------------------------------
   2. ESTRUTURA E RITMO
   ------------------------------------------------------------ */

.area{
	width:100%;
	max-width:var(--largura-conteudo);
	margin:0 auto;
	padding:0 var(--esp-4);
}

/* respiro entre secoes reduzido de 64px para 48px em 01/08/2026 */
.secao{ padding:var(--esp-6) 0; }
.secao--compacta{ padding:var(--esp-5) 0; }
/* depois do topo o respiro ja veio da propria secao de topo */
.topo + .secao{ padding-top:var(--esp-5); }
.secao--faixa{ background:var(--cor-faixa); }

/* linha fina separa secoes de mesmo fundo, para nao virarem um bloco so */
.secao + .secao:not(.secao--faixa){ border-top:1px solid var(--cor-borda); }
.secao--faixa + .secao--faixa{ border-top:1px solid var(--cor-borda); }

/* cabecalho de secao: sempre centralizado, como no site anterior */
.titulo-secao{ text-align:center; margin:0 auto var(--esp-5); max-width:var(--largura-texto); }
.titulo-secao h2{ margin-bottom:var(--esp-2); }
.titulo-secao p{ color:var(--cor-texto-suave); margin:0; }
/* quando o titulo e a ultima coisa da secao, a margem de baixo dele somava com
   o padding da secao e abria um vazio grande antes do proximo bloco */
.titulo-secao:last-child{ margin-bottom:0; }

/* ornamento discreto abaixo do titulo, no lugar do divisor do tema antigo */
.titulo-secao h2::after{
	content:"";
	display:block;
	width:56px; height:1px;
	background:var(--cor-bege);
	margin:var(--esp-3) auto 0;
}

.texto{ max-width:var(--largura-texto); }
.centro{ text-align:center; }
.centro .botao{ margin:var(--esp-1) var(--esp-1) 0; }
.espaco-topo{ margin-top:var(--esp-5); }

/* ------------------------------------------------------------
   3. CABECALHO
   ------------------------------------------------------------ */

.cabecalho{
	position:sticky; top:0; z-index:50;
	background:rgba(255,255,255,.96);
	backdrop-filter:saturate(180%) blur(8px);
	border-bottom:1px solid var(--cor-borda);
}

.cabecalho__area{
	display:flex; align-items:center; justify-content:space-between;
	gap:var(--esp-4);
	min-height:var(--altura-cabecalho);
	max-width:var(--largura-conteudo); margin:0 auto;
	padding:var(--esp-2) var(--esp-4);
}

.marca{ display:flex; align-items:center; gap:var(--esp-3); text-decoration:none; }
.marca img{ width:56px; height:56px; flex:0 0 auto; }
.marca__nome{
	font-family:var(--fonte-titulo);
	font-weight:var(--peso-titulo);
	color:var(--cor-marca);
	font-size:var(--txt-t4);
	line-height:1.15;
	letter-spacing:-.01em;
}
.marca__nome span{
	display:block;
	font-family:var(--fonte-texto); font-weight:400;
	font-size:var(--txt-micro); color:var(--cor-texto-suave);
	letter-spacing:.14em; text-transform:uppercase;
	margin-top:2px;
}

.menu{ display:flex; align-items:center; gap:var(--esp-1); }
.menu a{
	display:block; padding:var(--esp-2) var(--esp-3);
	color:var(--cor-texto); text-decoration:none;
	font-size:var(--txt-corpo); font-weight:700;
	letter-spacing:.02em;
	border-bottom:2px solid transparent;
}
.menu a:hover{ color:var(--cor-acento-forte); }
.menu a[aria-current="page"]{ color:var(--cor-acento-forte); border-bottom-color:var(--cor-acento); }

.menu__botao{
	display:none; background:none; border:1px solid var(--cor-borda);
	border-radius:var(--raio); width:48px; height:48px; cursor:pointer;
	color:var(--cor-marca); font-size:22px; line-height:1;
}

@media (max-width: 899px){
	.marca img{ width:48px; height:48px; }
	.menu__botao{ display:block; }
	.menu{
		position:absolute; left:0; right:0; top:100%;
		flex-direction:column; align-items:stretch; gap:0;
		background:#fff; border-bottom:1px solid var(--cor-borda);
		padding:var(--esp-2); display:none;
		box-shadow:var(--sombra-alta);
	}
	.menu[data-aberto="sim"]{ display:flex; }
	.menu a{ padding:var(--esp-3); font-size:var(--txt-corpo); border-bottom:1px solid var(--cor-borda); }
	.menu a:last-child{ border-bottom:0; }
}

/* ------------------------------------------------------------
   4. BOTOES
   ------------------------------------------------------------ */

.botao{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-2);
	min-height:var(--altura-toque);
	padding:var(--esp-2) var(--esp-5);
	background:var(--cor-acento-forte); color:#fff;
	border:1px solid var(--cor-acento-forte); border-radius:var(--raio);
	font-family:var(--fonte-texto); font-size:var(--txt-corpo); font-weight:700;
	letter-spacing:.04em; text-transform:uppercase;
	text-decoration:none; cursor:pointer;
	transition:background .2s, border-color .2s, color .2s;
}
.botao:hover{ background:var(--cor-marca-escura); border-color:var(--cor-marca-escura); color:#fff; }

.botao--vazado{ background:transparent; color:var(--cor-marca); border-color:var(--cor-bege); }
.botao--vazado:hover{ background:var(--cor-marca); border-color:var(--cor-marca); color:#fff; }

.botao--claro{ background:#fff; color:var(--cor-marca); border-color:#fff; }
.botao--claro:hover{ background:var(--cor-borda); border-color:var(--cor-borda); color:var(--cor-marca-escura); }

.botao--zap{ background:var(--cor-sucesso); border-color:var(--cor-sucesso); }
.botao--zap:hover{ background:#33512f; border-color:#33512f; }

.botao--massas{ background:var(--cor-massas-vermelho); border-color:var(--cor-massas-vermelho); }
.botao--massas:hover{ background:var(--cor-massas-verde); border-color:var(--cor-massas-verde); }

.botao--largo{ width:100%; }

.acoes{ display:flex; flex-wrap:wrap; gap:var(--esp-2); justify-content:center; }
.acoes--esquerda{ justify-content:flex-start; }
/* no celular os botoes empilham e ocupam uma largura confortavel de toque */
@media (max-width: 599px){
	.acoes .botao{ width:100%; max-width:340px; }
}

/* botao flutuante de WhatsApp */
.zap-flutuante{
	position:fixed; right:20px; bottom:20px; z-index:60;
	width:54px; height:54px; border-radius:var(--raio-redondo);
	background:var(--cor-whatsapp); color:#fff;
	display:flex; align-items:center; justify-content:center;
	box-shadow:var(--sombra-alta); text-decoration:none;
}
.zap-flutuante:hover{ background:#1da851; color:#fff; }
.zap-flutuante svg{ width:29px; height:29px; fill:currentColor; }

/* ------------------------------------------------------------
   5. TOPO DE PAGINA
   Banner panoramico contido no container, na mesma proporcao
   do banner do site anterior. Titulo abaixo, centralizado.
   ------------------------------------------------------------ */

.topo{ padding:var(--esp-6) 0 var(--esp-6); }

.topo__banner{
	max-width:var(--largura-conteudo);
	margin:0 auto var(--esp-5);
	padding:0 var(--esp-4);
}
.topo__banner img{
	width:100%;
	aspect-ratio:940/217;
	object-fit:cover;
	border-radius:var(--raio-imagem);
}

/* O titulo acompanha a foto e por isso usa a largura do conteudo, e nao a
   largura de leitura. Assim ele cabe em uma linha so no computador. O tamanho
   e fluido: encolhe junto com a tela ate a largura em que a quebra e inevitavel. */
.topo__texto{ text-align:center; max-width:var(--largura-conteudo); margin:0 auto; padding:0 var(--esp-4); }
.topo__texto h1{
	font-size:min(var(--txt-display), 3.85vw);
	margin-bottom:var(--esp-3);
	text-wrap:balance;
}
@media (max-width: 899px){
	.topo__texto h1{ font-size:var(--txt-display); }
	/* nessa largura o titulo nao cabe em uma linha, entao a leitura volta a
	   mandar e o texto fica na largura de leitura */
	.topo__texto{ max-width:var(--largura-texto); }
}
.topo__texto p{ max-width:var(--largura-texto); margin-left:auto; margin-right:auto; }
.topo__texto p{ color:var(--cor-texto-suave); font-size:var(--txt-grande); margin-bottom:var(--esp-5); }
.topo__texto p:last-child{ margin-bottom:0; }

/* topo de pagina interna, sem foto */
.topo-simples{ background:var(--cor-faixa); padding:var(--esp-6) 0; text-align:center; border-bottom:1px solid var(--cor-borda); }
.topo-simples h1{ font-size:var(--txt-t1); margin-bottom:var(--esp-2); }
.topo-simples p{ color:var(--cor-texto-suave); max-width:60ch; margin:0 auto; }

/* ------------------------------------------------------------
   6. FAIXA DE INFORMACAO
   ------------------------------------------------------------ */

.faixa{ background:var(--cor-faixa); border-top:1px solid var(--cor-borda); border-bottom:1px solid var(--cor-borda); }
.faixa__area{
	display:grid; grid-template-columns:repeat(3,1fr);
	max-width:var(--largura-conteudo); margin:0 auto;
	padding:var(--esp-5) var(--esp-4);
	text-align:center;
}
.faixa__item{ padding:0 var(--esp-3); }
.faixa__item + .faixa__item{ border-left:1px solid var(--cor-borda); }
.faixa__item strong{
	display:block; font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.12em;
	color:var(--cor-acento-forte); margin-bottom:var(--esp-1);
}
.faixa__item span{ font-size:var(--txt-peq); color:var(--cor-texto); }
.faixa a{ color:var(--cor-texto); font-weight:500; }

@media (max-width: 899px){
	.faixa__area{ grid-template-columns:1fr; gap:var(--esp-4); }
	.faixa__item + .faixa__item{ border-left:0; border-top:1px solid var(--cor-borda); padding-top:var(--esp-4); }
}

/* ------------------------------------------------------------
   7. CARTOES E BLOCOS
   ------------------------------------------------------------ */

.grade{ display:grid; gap:var(--esp-5); align-items:stretch; }
.grade--2{ grid-template-columns:repeat(2,1fr); }
.grade--3{ grid-template-columns:repeat(3,1fr); }
.grade--4{ grid-template-columns:repeat(4,1fr); }

@media (max-width: 899px){ .grade--3,.grade--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 599px){ .grade--2,.grade--3,.grade--4{ grid-template-columns:1fr; } }

.cartao{
	background:#fff;
	border:1px solid var(--cor-borda);
	border-radius:var(--raio-imagem);
	overflow:hidden;
	display:flex; flex-direction:column;
	text-decoration:none; color:inherit;
	transition:box-shadow .25s, transform .25s, border-color .25s;
}
a.cartao:hover{ box-shadow:var(--sombra-alta); transform:translateY(-3px); border-color:var(--cor-bege); color:inherit; }
.cartao img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.cartao__corpo{ padding:var(--esp-4); flex:1; display:flex; flex-direction:column; text-align:center; }
.cartao__corpo h3{ margin-bottom:var(--esp-2); font-size:var(--txt-t3); }
.cartao__corpo p{ font-size:var(--txt-corpo); color:var(--cor-texto-suave); flex:1; }
.cartao__marca{
	display:block; margin-top:var(--esp-3);
	font-size:var(--txt-micro); font-weight:700; color:var(--cor-acento-forte);
	text-transform:uppercase; letter-spacing:.12em;
}

/* bloco de duas colunas com foto */
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:var(--esp-7); align-items:center; }
.dupla img{ border-radius:var(--raio-imagem); width:100%; }
.dupla--texto-primeiro > :first-child{ order:-1; }
.dupla--topo{ align-items:start; }
/* Na Localizacao a coluna do mapa terminava bem antes da coluna de dados e
   sobrava um vazio grande a direita. A coluna do mapa passa a esticar ate o
   fim da linha. So no desktop: abaixo de 900px as colunas viram uma so. */
@media (min-width: 900px){
	.dupla--topo{ align-items:stretch; }
	.coluna-mapa{ display:flex; flex-direction:column; }
	.coluna-mapa .mapa{ flex:1; aspect-ratio:auto; }
}
.dupla img.retrato{ aspect-ratio:4/5; object-fit:cover; max-height:560px; }
/* Historia: a linha do tempo e bem mais alta que a foto, e com o alinhamento
   central sobrava uma faixa vazia acima e abaixo da imagem. A foto passa a
   ocupar a altura inteira da coluna e fica presa no topo enquanto a pessoa
   rola a linha do tempo. So no desktop: abaixo de 900px vira uma coluna so. */
/* Nossa Casa: o texto da historia mora dentro da propria faixa de topo.
   O titulo fica centralizado e os paragrafos justificados, na largura util do
   conteudo, com hifenizacao automatica: sem hifenizar, o portugues abre
   buracos entre as palavras em linha com palavra longa. */
.topo-simples--historia{ text-align:left; }
.topo-simples--historia h1{ text-align:center; }
.topo-simples--historia p{
	max-width:none; margin:0 0 var(--esp-3);
	color:var(--cor-texto);
	font-size:var(--txt-corpo);
	text-align:justify; hyphens:auto;
}
/* a caixa da frase de enfase nao segue a regra dos paragrafos: ela fica
   centralizada, estreita e sem hifenizacao */
.topo-simples--historia p.historia__enfase{
	max-width:var(--largura-texto);
	margin:var(--esp-5) auto 0;
	text-align:center; hyphens:manual;
	font-size:var(--txt-t3);
}

.historia__enfase{
	margin:var(--esp-5) auto 0; max-width:var(--largura-texto);
	background:var(--cor-fundo); border:1px solid var(--cor-borda);
	border-radius:var(--raio-imagem);
	padding:var(--esp-4) var(--esp-5);
	text-align:center;
	font-family:var(--fonte-titulo); font-style:italic;
	font-size:var(--txt-t3); line-height:1.35;
	color:var(--cor-marca);
	text-wrap:balance;
}

@media (min-width: 900px){
	/* 45 por cento para a foto, o resto para a linha do tempo */
	.dupla--historia{ align-items:stretch; grid-template-columns:45% 1fr; }
	.dupla--historia > .dupla__foto{ position:relative; }
	.dupla--historia > .dupla__foto img{
		position:sticky;
		top:calc(var(--altura-cabecalho) + var(--esp-4));
		width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
	}
}
@media (max-width: 899px){
	.dupla{ grid-template-columns:1fr; gap:var(--esp-5); }
	.dupla img{ order:-1; }
}

/* arte panoramica dentro de uma secao, na proporcao nativa */
.faixa-imagem{ margin:0 auto var(--esp-5); max-width:900px; }
.faixa-imagem img{ width:100%; border-radius:var(--raio-imagem); }

/* preco em destaque dentro de um bloco de texto */
.precos{ list-style:none; padding:0; margin:0 0 var(--esp-4); }
.precos li{
	display:flex; align-items:baseline; gap:var(--esp-2);
	padding:var(--esp-2) 0; border-bottom:1px solid var(--cor-borda);
	margin:0;
}
.precos .pontos{ flex:1 1 auto; border-bottom:1px dotted var(--cor-bege); transform:translateY(-4px); min-width:16px; }
.precos strong{ font-family:var(--fonte-titulo); font-weight:700; font-size:var(--txt-peq); }
.precos span:last-child{ font-weight:700; color:var(--cor-marca); white-space:nowrap; }

/* ------------------------------------------------------------
   8. QUADRO COM TEXTO POR CIMA
   Componente unico, usado nos destaques e na agenda da semana.
   A foto ocupa o quadro inteiro e o texto fica por cima, no
   mesmo desenho das artes que a casa ja publicava.
   Camadas: foto nitida no topo, a mesma foto desfocada
   preenchendo a base, veu marrom em degrade e o texto.
   ------------------------------------------------------------ */

.quadros{ display:grid; gap:var(--esp-4); grid-template-columns:repeat(3,1fr); align-items:stretch; }
@media (max-width: 899px){ .quadros{ grid-template-columns:1fr; } }

.quadro{
	position:relative; isolation:isolate; overflow:hidden;
	aspect-ratio:4/5;
	border-radius:var(--raio-imagem);
	background:var(--cor-escura);
	display:block; text-decoration:none; color:inherit;
	transition:transform .25s, box-shadow .25s;
}

a.quadro:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); color:inherit; }

/* a propria foto, desfocada, preenche a parte de baixo do quadro,
   para o fundo escuro nascer da imagem e nao de um bloco chapado */
.quadro::before{
	content:"";
	position:absolute; inset:0; z-index:0;
	background-image:var(--foto);
	background-size:cover; background-position:center top;
	transform:scale(1.2);
	filter:blur(22px) saturate(.85) brightness(.7);
}

.quadro img{
	position:absolute; top:0; left:0; z-index:1;
	width:100%; aspect-ratio:3/2; object-fit:cover;
	/* a base da foto dissolve no fundo, sem linha de corte */
	-webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
	        mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}

/* o veu escuro que faz o texto ficar legivel */
.quadro::after{
	content:"";
	position:absolute; inset:0; z-index:2;
	background:linear-gradient(180deg,
		rgba(58,42,32,0) 24%,
		rgba(58,42,32,.42) 40%,
		rgba(58,42,32,.86) 58%,
		rgba(58,42,32,.96) 100%);
}

.quadro__corpo{
	position:absolute; z-index:3;
	left:0; right:0; bottom:0;
	padding:var(--esp-5) var(--esp-4);
	text-align:left;
}
.quadro__corpo h3{ color:#fff; margin-bottom:var(--esp-2); font-size:var(--txt-t3); }
.quadro__corpo p{ color:#F1E7DD; margin:0; font-size:var(--txt-peq); }

.quadro__etiqueta{
	display:inline-block;
	font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.12em;
	color:#E8A87C;
	padding-bottom:var(--esp-2); margin-bottom:var(--esp-2);
	border-bottom:1px solid rgba(255,255,255,.28);
}

.quadro__marca{
	display:inline-block; margin-top:var(--esp-3);
	font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.12em;
	color:#E8A87C;
	padding-bottom:2px; border-bottom:1px solid rgba(232,168,124,.5);
}
a.quadro:hover .quadro__marca{ color:#fff; border-bottom-color:rgba(255,255,255,.7); }

/* a foto de cada quadro, em classe propria, sem style em atributo */
.quadro--sanduiches{ --foto:url("../img/loja/vitrine-paes.jpg"); }
.quadro--cafe{       --foto:url("../img/loja/balcao-cafe.jpg"); }
.quadro--padaria{    --foto:url("../img/loja/vitrine-doces.jpg"); }
.quadro--almoco{     --foto:url("../img/produtos/almoco.jpg"); }
.quadro--piano{      --foto:url("../img/produtos/piano.jpg"); }
.quadro--cucas{      --foto:url("../img/produtos/cucas.jpg"); }
.quadro--croissants{ --foto:url("../img/produtos/croissants.jpg"); }
.quadro--tortas{     --foto:url("../img/loja/vitrine-doces.jpg"); }

@media (max-width: 899px){
	.quadro{ aspect-ratio:4/3; }
	.quadro img{ aspect-ratio:16/9; }
}
@media (max-width: 599px){
	.quadro{ aspect-ratio:3/4; }
	.quadro img{ aspect-ratio:3/2; }
}

/* ------------------------------------------------------------
   8b. CARTAO SIMPLES, SO TEXTO
   ------------------------------------------------------------ */

.agenda{ display:grid; gap:var(--esp-4); grid-template-columns:repeat(3,1fr); align-items:stretch; }
@media (max-width: 899px){ .agenda{ grid-template-columns:1fr; } }

.agenda__item{
	background:#fff; border:1px solid var(--cor-borda);
	border-radius:var(--raio-imagem); overflow:hidden;
	display:flex; flex-direction:column;
}
.agenda__corpo{ padding:var(--esp-4); text-align:center; flex:1; }
.agenda__dia{
	display:inline-block;
	font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.12em;
	color:var(--cor-acento-forte);
	padding-bottom:var(--esp-2); margin-bottom:var(--esp-2);
	border-bottom:1px solid var(--cor-borda);
}
.agenda__corpo h3{ margin-bottom:var(--esp-2); font-size:var(--txt-t3); }
.agenda__corpo p{ margin:0; font-size:var(--txt-peq); color:var(--cor-texto-suave); }

/* ------------------------------------------------------------
   9. CARDAPIO
   Duas colunas com linha pontilhada, no mesmo desenho do
   cardapio do site anterior.
   ------------------------------------------------------------ */

.topo + .cardapio-barra{ margin-top:calc(var(--esp-5) * -1); }

.cardapio-barra{
	position:sticky; top:var(--altura-cabecalho); z-index:40;
	background:rgba(255,255,255,.97);
	backdrop-filter:saturate(180%) blur(8px);
	border-bottom:1px solid var(--cor-borda);
	padding:var(--esp-3) 0;
}
.abas{
	display:flex; gap:var(--esp-2); overflow-x:auto;
	justify-content:flex-start;
	padding:0 var(--esp-4) var(--esp-2);
	margin:0 auto var(--esp-2);
	max-width:var(--largura-conteudo);
	scrollbar-width:thin;
}
@media (min-width: 1100px){ .abas{ justify-content:center; flex-wrap:wrap; overflow:visible; } }

.aba{
	flex:0 0 auto; border:1px solid var(--cor-borda); background:#fff;
	color:var(--cor-marca); padding:var(--esp-2) var(--esp-4);
	border-radius:var(--raio-redondo); cursor:pointer;
	font-family:var(--fonte-titulo); font-size:var(--txt-peq); font-weight:600;
	letter-spacing:.01em; white-space:nowrap; min-height:40px;
	transition:background .2s, border-color .2s, color .2s;
}
.aba:hover{ border-color:var(--cor-bege); background:var(--cor-faixa); }
.aba[aria-selected="true"]{ background:var(--cor-marca); border-color:var(--cor-marca); color:#fff; }

.busca{ max-width:640px; margin:0 auto; padding:0 var(--esp-4); }
.busca input{
	width:100%; min-height:var(--altura-toque);
	padding:var(--esp-2) var(--esp-4);
	border:1px solid var(--cor-borda); border-radius:var(--raio-redondo);
	font-family:var(--fonte-texto); font-size:var(--txt-corpo);
	color:var(--cor-texto); background:#fff; text-align:center;
}
.busca input::placeholder{ color:var(--cor-texto-suave); opacity:.8; }

.cardapio__secao{ margin-bottom:var(--esp-7); }
.cardapio__secao > h2{
	text-align:center; font-size:var(--txt-t2);
	margin-bottom:var(--esp-2);
}
.cardapio__secao > h2::after{
	content:""; display:block; width:56px; height:1px;
	background:var(--cor-bege); margin:var(--esp-3) auto var(--esp-5);
}
.cardapio__grupo{
	text-align:center;
	font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.16em;
	color:var(--cor-acento-forte);
	margin:var(--esp-6) 0 var(--esp-4);
}
.cardapio__grupo::before,
.cardapio__grupo::after{
	content:""; display:inline-block; width:28px; height:1px;
	background:var(--cor-borda); vertical-align:middle;
	margin:0 var(--esp-3);
}

.cardapio__lista{
	display:grid;
	grid-template-columns:repeat(2, minmax(0,1fr));
	column-gap:var(--esp-8);
	row-gap:0;
}
@media (max-width: 899px){ .cardapio__lista{ grid-template-columns:1fr; column-gap:0; } }

.item{ padding:var(--esp-3) 0; border-bottom:1px solid var(--cor-borda); }
.item__linha{ display:flex; align-items:baseline; gap:var(--esp-2); }
.item__nome{
	font-family:var(--fonte-titulo);
	font-weight:var(--peso-nome); font-style:italic;
	font-size:var(--txt-peq);
	color:var(--cor-texto); flex:0 1 auto;
}
.item__codigo{ font-style:normal; font-weight:400; color:var(--cor-texto-suave); font-size:var(--txt-legenda); }
.item__pontos{ flex:1 1 auto; min-width:16px; border-bottom:1px dotted var(--cor-bege); transform:translateY(-4px); }
.item__preco{ font-weight:700; white-space:nowrap; color:var(--cor-marca); flex:0 0 auto; }
.item__desc{ margin:var(--esp-1) 0 0; font-size:var(--txt-peq); line-height:1.5; color:var(--cor-texto-suave); }

.vazio{ text-align:center; color:var(--cor-texto-suave); padding:var(--esp-8) var(--esp-4); }

/* aviso: caixa de recado, sempre alinhada a esquerda para leitura corrida.
   Definida uma unica vez e usada no cardapio, nas encomendas e nas politicas. */
.aviso{
	background:#fff; border:1px solid var(--cor-borda);
	border-left:4px solid var(--cor-acento);
	border-radius:var(--raio); padding:var(--esp-4);
	font-size:var(--txt-peq); color:var(--cor-texto-suave);
	margin-bottom:var(--esp-6); text-align:left;
}
.aviso strong{ color:var(--cor-texto); }
.aviso + .aviso{ margin-top:0; }

/* ------------------------------------------------------------
   10. MASSAS DA VILA
   ------------------------------------------------------------ */

.massas__logo{ max-width:340px; width:100%; margin:0 auto var(--esp-4); }
.massas__assinatura{
	font-family:var(--fonte-texto); font-style:italic; font-weight:400;
	color:var(--cor-massas-verde); font-size:var(--txt-t3);
	margin-bottom:var(--esp-4);
}

/* ------------------------------------------------------------
   11. PAGINA DE LINKS
   ------------------------------------------------------------ */

.links{ max-width:480px; margin:0 auto; padding:var(--esp-7) var(--esp-4) var(--esp-8); text-align:center; }
.links h1{ font-size:var(--txt-t1); margin-bottom:var(--esp-2); }
.links__subtitulo{ color:var(--cor-texto-suave); margin-bottom:var(--esp-8); }
.links__bloco{ margin-bottom:var(--esp-8); }
.links__bloco img{ margin:0 auto var(--esp-4); max-width:220px; }
.links__bloco h2{ font-size:var(--txt-t3); margin-bottom:var(--esp-4); }
.links .botao{ width:100%; margin-bottom:var(--esp-2); }
.links__rodape{ font-size:var(--txt-legenda); color:var(--cor-texto-suave); line-height:1.8; }

/* ------------------------------------------------------------
   12. CONTATO
   ------------------------------------------------------------ */

.dados{ list-style:none; margin:0 0 var(--esp-5); padding:0; }
.dados li{ padding:var(--esp-3) 0; border-bottom:1px solid var(--cor-borda); margin:0; }
.dados li:first-child{ padding-top:0; }
.dados strong{
	display:block; font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.12em;
	color:var(--cor-acento-forte); margin-bottom:var(--esp-1);
}

/* O mapa carrega direto, sem capa de clique. A busca no Google e feita pelo
   nome da casa, entao o quadro ja abre com o cartao do estabelecimento, com
   nota e numero de avaliacoes. A altura precisa acomodar esse cartao. */
.mapa{
	position:relative; background:var(--cor-faixa);
	border:1px solid var(--cor-borda);
	border-radius:var(--raio-imagem); overflow:hidden;
	aspect-ratio:4/3; min-height:320px;
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* a altura minima aqui e zero de proposito: combinada com a proporcao, ela
   empurrava a largura do bloco para fora da pagina entre 768 e 899px.
   A proporcao subiu de 21/6 para 21/7 para caber o cartao do estabelecimento. */
.mapa--largo{ aspect-ratio:21/7; min-height:0; }

/* Em tela estreita a altura minima combinada com a proporcao empurrava a
   largura do bloco para fora da pagina. No celular a proporcao sai e fica
   so a altura. */
@media (max-width: 767px){
	.mapa, .mapa--largo{ aspect-ratio:auto; width:100%; height:340px; min-height:0; }
}

.horarios{ width:100%; border-collapse:collapse; margin-bottom:var(--esp-4); }
.horarios th,.horarios td{
	text-align:left; padding:var(--esp-2) 0;
	border-bottom:1px solid var(--cor-borda); font-size:var(--txt-peq);
}
.horarios th{ font-weight:700; color:var(--cor-texto-suave); }

/* ------------------------------------------------------------
   13. RODAPE
   ------------------------------------------------------------ */

.rodape{ background:var(--cor-escura); color:#E7DDD4; padding:var(--esp-8) 0 var(--esp-5); }
.rodape a{ color:#E7DDD4; text-decoration:none; }
.rodape a:hover{ color:#fff; text-decoration:underline; }
.rodape h3{
	color:#fff; font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.14em;
	margin-bottom:var(--esp-3);
}

.rodape__grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--esp-6); }
@media (max-width: 899px){ .rodape__grade{ grid-template-columns:1fr 1fr; gap:var(--esp-5); } }
@media (max-width: 599px){ .rodape__grade{ grid-template-columns:1fr; text-align:center; } }

.rodape__marca img{ width:88px; margin-bottom:var(--esp-3); }
@media (max-width: 599px){ .rodape__marca img{ margin-left:auto; margin-right:auto; } }
.rodape__grade ul{ list-style:none; margin:0; padding:0; }
.rodape__grade li{ margin-bottom:var(--esp-2); font-size:var(--txt-peq); }
.rodape p{ font-size:var(--txt-peq); line-height:1.7; }

.rodape__horario{
	margin-top:var(--esp-6); padding-top:var(--esp-4);
	border-top:1px solid rgba(255,255,255,.14);
	display:flex; flex-wrap:wrap; gap:var(--esp-2) var(--esp-4); align-items:baseline;
	font-size:var(--txt-peq);
}
.rodape__horario strong{
	color:#fff; font-family:var(--fonte-titulo);
	font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.14em;
}
@media (max-width: 599px){ .rodape__horario{ justify-content:center; text-align:center; } }

.rodape__fim{
	margin-top:var(--esp-5); padding-top:var(--esp-4);
	border-top:1px solid rgba(255,255,255,.14);
	display:flex; flex-wrap:wrap; gap:var(--esp-2); justify-content:space-between;
	font-size:var(--txt-legenda); color:#C4B6AA;
}
@media (max-width: 599px){ .rodape__fim{ justify-content:center; text-align:center; } }


/* ------------------------------------------------------------
   15. CATALOGO DE ENCOMENDAS
   ------------------------------------------------------------ */

.catalogo-barra{
	position:sticky; top:var(--altura-cabecalho); z-index:40;
	background:var(--cor-fundo); border-bottom:1px solid var(--cor-borda);
	padding:var(--esp-4) 0;
}
.catalogo-barra .area{ display:grid; gap:var(--esp-3); }
/* item de grid com margem automatica perde o stretch, entao a largura vai explicita */
.catalogo-barra .busca{ width:100%; }

.filtros{ display:flex; flex-wrap:wrap; gap:var(--esp-2); justify-content:center; }
.filtro{
	font-family:var(--fonte-titulo); font-size:var(--txt-micro); font-weight:600;
	padding:8px 16px; border-radius:999px; cursor:pointer;
	border:1px solid var(--cor-borda); background:var(--cor-fundo); color:var(--cor-texto);
	transition:background .18s, color .18s, border-color .18s;
}
.filtro:hover{ border-color:var(--cor-marca); color:var(--cor-marca); }
.filtro[aria-pressed="true"]{ background:var(--cor-marca); border-color:var(--cor-marca); color:#fff; }

.catalogo{
	display:grid; grid-template-columns:repeat(3,1fr); gap:var(--esp-5);
	margin-top:var(--esp-6);
}
@media (max-width: 899px){ .catalogo{ grid-template-columns:repeat(2,1fr); gap:var(--esp-4); } }
@media (max-width: 559px){ .catalogo{ grid-template-columns:1fr; } }

.torta{
	display:flex; flex-direction:column;
	border:1px solid var(--cor-borda); border-radius:var(--raio-imagem);
	background:var(--cor-fundo); overflow:hidden;
}
.torta__foto{ position:relative; aspect-ratio:1/1; background:var(--cor-faixa); }
.torta__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.torta__selo{
	position:absolute; top:10px; left:10px;
	background:var(--cor-escura); color:#fff;
	font-family:var(--fonte-titulo); font-size:var(--txt-legenda); font-weight:700;
	text-transform:uppercase; letter-spacing:.1em;
	padding:5px 10px; border-radius:var(--raio);
}
.torta__corpo{ padding:var(--esp-4); display:flex; flex-direction:column; gap:var(--esp-3); flex:1; }
.torta__corpo h3{ font-size:var(--txt-t4); margin:0; }
.torta__descricao{ font-size:var(--txt-peq); color:var(--cor-texto-suave); margin:0; flex:1; }

.torta__tamanhos{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.torta__tamanhos li{
	display:flex; align-items:baseline; gap:8px;
	font-size:var(--txt-peq); padding-bottom:5px;
	border-bottom:1px dotted var(--cor-borda);
}
.torta__tamanhos li:last-child{ border-bottom:0; }
.torta__tamanho{ font-weight:700; color:var(--cor-texto); white-space:nowrap; }
.torta__porcao{ color:var(--cor-bege); font-size:var(--txt-legenda); }
.torta__valor{ margin-left:auto; font-weight:700; color:var(--cor-acento-forte); white-space:nowrap; }
.torta__valor--sem{ color:var(--cor-bege); font-weight:400; font-size:var(--txt-legenda); }

.catalogo__vazio{ grid-column:1 / -1; text-align:center; padding:var(--esp-7) 0; color:var(--cor-texto-suave); }

.botao--pequeno{ min-height:44px; padding:10px var(--esp-4); font-size:var(--txt-corpo); }

/* endereco em bloco, na pagina de Localizacao */
.endereco{ font-size:var(--txt-t4); line-height:1.7; color:var(--cor-texto); }

/* linha do tempo da pagina Nossa Casa */
.tempo{ list-style:none; margin:0; padding:0; display:grid; gap:var(--esp-5); }
.tempo__item{
	position:relative; padding-left:var(--esp-5);
	border-left:2px solid var(--cor-borda);
}
.tempo__item::before{
	content:""; position:absolute; left:-7px; top:6px;
	width:12px; height:12px; border-radius:50%;
	background:var(--cor-acento); border:2px solid var(--cor-fundo);
}
.tempo__ano{
	display:block; font-family:var(--fonte-titulo); font-weight:700;
	font-size:var(--txt-micro); letter-spacing:.14em; text-transform:uppercase;
	color:var(--cor-acento-forte); margin-bottom:4px;
}
.tempo__item h2, .tempo__item h3{ font-size:var(--txt-t3); margin-bottom:var(--esp-2); }
.tempo__item p{ margin-bottom:var(--esp-2); text-align:justify; hyphens:auto; }
.tempo__item p:last-child{ margin-bottom:0; }

/* faixa com a frase institucional. SEM USO desde 01/08/2026: a frase
   `Sua melhor companhia esta na Vila` saiu da Nossa Casa a pedido do cliente e
   nao aparece em nenhuma outra pagina. Fica guardada aqui. */
.assinatura{
	background:var(--cor-marca); color:#fff;
	padding:var(--esp-7) 0; text-align:center;
}
.assinatura p{
	margin:0; max-width:var(--largura-texto); margin-left:auto; margin-right:auto;
	font-family:var(--fonte-titulo); font-weight:700; font-style:italic;
	font-size:var(--txt-t2); line-height:1.35;
	/* sem o balance a frase quebrava depois do hifen de Sinta-se, deixando
	   uma segunda linha comecando com se */
	text-wrap:balance;
}

/* galeria simples, tres colunas no computador e duas no celular */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--esp-3); }
@media (max-width: 899px){ .galeria{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 599px){ .galeria{ grid-template-columns:1fr; gap:var(--esp-3); } }
.galeria figure{ margin:0; }
.galeria a{ display:block; }
.galeria a:focus-visible{ outline:3px solid var(--cor-acento); outline-offset:3px; }
.galeria img{
	width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
	border-radius:var(--raio-imagem); border:1px solid var(--cor-borda);
}
.galeria figcaption{
	margin-top:6px; font-size:var(--txt-legenda); color:var(--cor-texto-suave); text-align:center;
}
.torta__selecionar{ width:100%; margin-top:auto; }

/* formulario de solicitacao */
.pedido{ display:grid; gap:var(--esp-4); max-width:var(--largura-texto); margin:0 auto; }
.pedido__linha{ display:grid; gap:var(--esp-4); grid-template-columns:1fr 1fr; }
@media (max-width: 599px){ .pedido__linha{ grid-template-columns:1fr; } }
.campo{ display:grid; gap:6px; }
.campo label{ font-family:var(--fonte-titulo); font-size:var(--txt-micro); font-weight:600; color:var(--cor-texto); }
.campo input, .campo select, .campo textarea{
	font-family:var(--fonte-texto); font-size:var(--txt-corpo); color:var(--cor-texto);
	padding:12px 14px; border:1px solid var(--cor-borda); border-radius:var(--raio);
	background:var(--cor-fundo); width:100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
	outline:2px solid var(--cor-acento); outline-offset:1px; border-color:var(--cor-acento);
}
.campo textarea{ min-height:96px; resize:vertical; }
.campo__ajuda{ font-size:var(--txt-legenda); color:var(--cor-texto-suave); }
.campo__erro{ font-size:var(--txt-legenda); color:var(--cor-acento-forte); font-weight:700; }

/* tabela de tamanhos */
.tabela-tamanhos{ width:100%; border-collapse:collapse; font-size:var(--txt-peq); }
.tabela-tamanhos th, .tabela-tamanhos td{
	text-align:left; padding:12px 10px; border-bottom:1px solid var(--cor-borda);
}
.tabela-tamanhos th{
	font-family:var(--fonte-titulo); font-size:var(--txt-micro); font-weight:700;
	text-transform:uppercase; letter-spacing:.1em; color:var(--cor-marca);
}

/* texto legal das politicas */
.legal{ max-width:var(--largura-texto); margin:0 auto; }
.legal h2{ font-size:var(--txt-t3); margin-top:var(--esp-7); }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ font-size:var(--txt-corpo); color:var(--cor-texto-suave); }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-bottom:var(--esp-2); }

/* ------------------------------------------------------------
   16. UTILITARIOS
   ------------------------------------------------------------ */

.oculto{ display:none !important; }
.so-leitor{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.destaque{ color:var(--cor-marca); font-weight:700; }

/* paragrafo de apoio, centralizado e com a largura de leitura */
.linha-apoio{
	max-width:var(--largura-texto);
	margin:0 auto var(--esp-5);
	text-align:center;
	color:var(--cor-texto-suave);
}
.linha-apoio--solta{ margin-bottom:0; }
.texto--centrado{ margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------
   17. FAIXA DE CONSENTIMENTO
   Aparece so na primeira visita, montada por js/consentimento.js.
   Fica presa no rodape da tela, acima do botao de WhatsApp, e
   some assim que a pessoa responde.
   ------------------------------------------------------------ */

.consentimento{
	position:fixed; left:0; right:0; bottom:0; z-index:70;
	background:var(--cor-fundo);
	border-top:1px solid var(--cor-borda);
	box-shadow:var(--sombra-alta);
}
.consentimento__area{
	max-width:var(--largura-conteudo);
	margin:0 auto;
	padding:var(--esp-3) var(--esp-4);
	display:flex; align-items:center; gap:var(--esp-4);
}
.consentimento__texto{
	margin:0; flex:1;
	font-size:var(--txt-peq); color:var(--cor-texto-suave);
}
.consentimento__texto a{ color:var(--cor-acento-forte); }
.consentimento__acoes{ display:flex; gap:var(--esp-2); flex-shrink:0; }

/* A faixa ocupa a base da tela, entao o botao flutuante sobe.
   Quem preenche `--altura-faixa` e o js/consentimento.js, que mede a
   faixa depois de montada. O valor de reserva cobre o caso raro de a
   medicao nao acontecer. */
body[data-consentimento="perguntando"] .zap-flutuante{
	bottom:calc(var(--altura-faixa, 120px) + var(--esp-3));
}

@media (max-width: 767px){
	.consentimento__area{ flex-direction:column; align-items:stretch; gap:var(--esp-3); }
	.consentimento__acoes .botao{ flex:1; }
}

@media print{
	.cabecalho,.zap-flutuante,.cardapio-barra,.rodape,.busca,.consentimento{ display:none !important; }
	body{ background:#fff; font-size:11pt; }
	.cardapio__lista{ grid-template-columns:repeat(2,1fr); }
	.item{ break-inside:avoid; }
}