/* =========================================================================
   LAVAND'S EXPRESS — folha única.
   Ordem: variáveis, base, botões, e depois os blocos na ordem da página.
   ====================================================================== */

:root{
	/* Marca: o azul e o rosa saem do logo. Tudo o mais é derivado deles, para
	   o site parecer uma família e não uma colagem. */
	--azul-500:#0560C9;
	--azul-700:#044FA6;
	--azul-800:#053E80;
	--azul-900:#04295C;
	--azul-300:#8CBDF6;

	--rosa:#EE428A;
	--rosa-fraco:#FDECF4;

	/* Tons de fundo, na FAMÍLIA DO PINK. Nada de plum ou vinho: escurecer rosa
	   puxando para o roxo é o erro clássico, e foi o que aconteceu na primeira
	   tentativa. O `--rosa-900` é escuro o bastante para texto branco (5,8:1) e
	   ainda lê como pink; a faixa clareia para o pink vivo onde não há texto. */
	--rosa-900:#C2185B;
	--rosa-800:#DB2E77;
	--rosa-700:#F0559C;

	/* As três cores de estado. São as únicas que carregam significado — por
	   isso nem o azul nem o rosa da marca aparecem no painel de máquinas: onde
	   a cor informa, cor de enfeite vira ruído. */
	--livre:#12B76A;
	--livre-fraco:#E7F8F0;
	--ocupada:#F79009;
	--ocupada-fraco:#FEF4E6;
	--indisponivel:#98A2B3;
	--indisponivel-fraco:#EEF1F5;

	--zap:#25D366;
	--zap-escuro:#1EBE5B;

	--fundo:#FBF5F9;
	--branco:#FFFFFF;
	--tinta:#101828;
	--tinta-2:#475467;
	--tinta-3:#667085;
	--borda:#EFE3EA;

	--r-sm:10px;
	--r:16px;
	--r-lg:22px;

	--sombra:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.14);
	--sombra-alta:0 2px 4px rgba(16,24,40,.05), 0 20px 44px -18px rgba(194,24,91,.28);

	--fonte:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

/* O `display:none` do atributo `hidden` vem da folha do navegador, então
   qualquer `display` declarado aqui embaixo ganha dele. Sem esta linha, o
   alerta vazio e a legenda aparecem desenhados mesmo marcados como hidden. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
	margin:0;
	font-family:var(--fonte);
	color:var(--tinta);
	background:var(--fundo);
	line-height:1.55;
	-webkit-font-smoothing:antialiased;

	/* Rodapé colado no fim da tela, e não logo abaixo do conteúdo: numa página
	   curta — a de "pedido não encontrado" é o caso — o bloco rosa subia para o
	   meio do celular e sobrava fundo vazio embaixo dele.
	   `dvh` e não só `vh` por causa da barra de endereço do celular, que entra e
	   sai da conta da altura; o `vh` fica como reserva para quem não conhece a
	   unidade nova. */
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
}

/* Quem estica é o miolo, não o cabeçalho nem o rodapé. `flex:1 0 auto` e não
   `flex:1`: com `1 1 0` a base vira zero e uma página longa encolheria o main
   até caber na tela, cortando o conteúdo. */
body > main{flex:1 0 auto}

h1,h2{line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--azul-500)}

:focus-visible{outline:3px solid var(--azul-500);outline-offset:2px;border-radius:4px}

.container{width:min(880px,100% - 2rem);margin-inline:auto}


/* ============================================================ BOTÕES */

.botao{
	display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.75rem 1.35rem;border-radius:999px;
	font-family:inherit;font-size:.9375rem;font-weight:650;text-decoration:none;
	border:1.5px solid transparent;cursor:pointer;
	transition:transform .15s ease, background-color .15s ease;
	white-space:nowrap;
}
.botao:hover{transform:translateY(-1px)}
.botao:active{transform:translateY(0)}

.botao--escuro{background:var(--azul-900);color:#fff}
.botao--escuro:hover{background:var(--azul-800)}

.botao--zap{background:var(--zap);color:#06301A}
.botao--zap:hover{background:var(--zap-escuro)}

/* Um tom menor que o botão de contato do rodapé: aqui ele divide a linha com
   o logotipo, e um botão do tamanho cheio brigaria com a marca. */
.botao--zap-topo{padding:.5rem 1rem;font-size:.875rem}

/* Abaixo de 420px sobra o ícone. Com a palavra, o botão empurra o logotipo
   contra a borda e os dois ficam apertados — e o ícone verde do WhatsApp é
   reconhecido sem legenda.
   A palavra é ESCONDIDA, não removida: recortada a 1px ela sai do desenho mas
   continua sendo o nome que o leitor de tela anuncia. Com `display:none` o
   link ficaria sem nome nenhum. */
@media (max-width:420px){
	/* .botao--zap-topo{padding:.5rem;gap:0;border-radius:50%}
	.botao--zap-topo .botao__rotulo{
		position:absolute;width:1px;height:1px;overflow:hidden;
		clip-path:inset(50%);white-space:nowrap;
	} */
	.botao--zap-topo{padding: 0.5rem 0.5rem;}
}

/* Aparência do botão discreto de cabeçalho. Continua sendo uma regra de
   APARÊNCIA só, sem posição: a `pedido.php` veste com ela o "← Máquinas", que
   mora no cabeçalho e precisa do `margin-left:auto` para encostar na direita.
   Quem flutua é a `--flutua` aqui embaixo. */
.botao--instalar{
	margin-left:auto;padding:.5rem 1rem;font-size:.875rem;
	background:var(--rosa-fraco);color:var(--azul-900);border-color:#F8C9DE;
}
.botao--instalar:hover{background:#FBDCE9}

/* O canto que era da bolha do WhatsApp. Instalar só nasce quando o navegador
   confirma que o app é instalável — o que na maioria das visitas não acontece,
   e é por isso que ele não ganhou lugar fixo no cabeçalho. */
.botao--flutua{
	position:fixed;right:1rem;bottom:1rem;z-index:50;
	padding:.6rem 1.1rem;
	box-shadow:0 10px 28px -8px rgba(120,14,55,.4);
}
.botao--instalar svg{
	width:17px;height:17px;fill:none;stroke:var(--rosa);stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
}

.ico-zap{width:19px;height:19px;fill:currentColor}


/* ============================================================ CABEÇALHO */

/* Gruda no topo do documento em vez de `position:fixed`. Com `fixed` o
   cabeçalho sai do fluxo e o <body> passa a precisar de um `padding-top` do
   tamanho exato dele — que muda de 64px para 56px no celular, e errar essa
   conta come o topo da página. `sticky` prende igual e continua ocupando o
   espaço que ocupa.
   O z-index precisa passar do painel, que é `position:relative` para subir por
   cima da faixa rosa, e ficar abaixo do modal (100). */
.cabecalho{
	position:sticky;top:0;z-index:60;
	background:var(--branco);border-bottom:1px solid var(--borda);
}
.cabecalho__linha{display:flex;align-items:center;justify-content: space-between;;gap:.75rem;min-height:64px}

/* Com o cabeçalho grudado, âncora sem folga rola até o alvo e o deixa por
   baixo dele. A folga é a altura da linha mais um respiro. */
#status,#unidade{scroll-margin-top:5rem}

/* Logotipo oficial (símbolo + texto num arquivo só). Altura fixa e largura em
   `auto`: o lockup é 1780x498, e travar as duas dimensões o achata. */
.marca{display:flex;align-items:center}
.marca__logo{height:38px;width:auto}

@media (max-width:420px){
	.marca__logo{height:32px}
}


/* ============================================================ FAIXA DO TOPO */

.topo{position:relative;color:#fff;padding:1.75rem 0 4.5rem;isolation:isolate}

/* Degradê inteiro dentro do pink. O brilho do canto é pink CLARO, não azul:
   azul sobre magenta mistura para roxo, que foi como a primeira versão saiu.
   O 150deg deixa o tom escuro em cima à esquerda, que é onde fica o texto. */
.topo__fundo{
	position:absolute;inset:0;z-index:-1;
	background:
		radial-gradient(620px 320px at 88% 0%, rgba(255,150,200,.55), transparent 64%),
		linear-gradient(150deg, var(--rosa-900), var(--rosa-700));
}
.topo h1{font-size:clamp(1.5rem,5vw,2rem);font-weight:800}
.topo__linha{margin-top:.3rem;color:#F6D2E4;font-size:.9375rem}


/* ============================================================ PAINEL */

/* Sobe por cima da faixa rosa: a resposta que a pessoa veio buscar começa
   acima da dobra, sem rolar. */
.painel{
	position:relative;margin-top:-3.25rem;margin-bottom:2.5rem;
	background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);
	box-shadow:var(--sombra-alta);padding:clamp(1rem,3vw,1.5rem);
}

.painel__topo{
	display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.5rem;
	padding-bottom:.75rem;border-bottom:1px solid var(--borda);margin-bottom:.75rem;
}

/* Largura de base em vez de `flex:1`: esticado pelo cartão inteiro, o botão
   fica com um rótulo curto boiando num campo enorme. */
.campo{flex:0 1 360px;min-width:min(260px,100%)}
.campo__rotulo{
	display:block;font-size:.6875rem;font-weight:700;text-transform:uppercase;
	letter-spacing:.09em;color:var(--tinta-3);margin-bottom:.35rem;
}

/* Botão que mostra a unidade e abre o modal. Substituiu o <select>: a escolha
   carrega endereço, preço e WhatsApp junto, e uma lista com endereço à vista
   decide melhor do que uma linha de texto. */
.troca{
	display:flex;align-items:center;gap:.2rem;width:100%;
	padding:.35rem .35rem .35rem .45rem;
	background:var(--fundo);border:1.5px solid var(--borda);border-radius:var(--r-sm);
	font-family:inherit;text-align:left;cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease;
}
.troca:hover{border-color:var(--azul-300);background:#fff}
.troca__pin{width:17px;height:17px;flex:none;fill:none;stroke:var(--azul-500);stroke-width:1.9}
.troca__nome{
	flex:1;font-size:.9375rem;font-weight:700;color:var(--tinta);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.troca__acao{
	flex:none;font-size:.75rem;font-weight:700;color:var(--azul-500);
	background:#fff;border:1.5px solid var(--azul-300);border-radius:999px;padding:.3rem .75rem;
}
.troca:hover .troca__acao{background:var(--azul-500);border-color:var(--azul-500);color:#fff}

.frescor{display:flex;align-items:center;align-self: center;gap:.45rem;
	/* margin-left:auto; */
	font-size:.8125rem;color:var(--tinta-3)}
/* @media (max-width:520px){
	.frescor{margin-right: auto;}
} */
.frescor__ponto{width:8px;height:8px;border-radius:50%;background:var(--indisponivel);flex:none}
.frescor--vivo .frescor__ponto{background:var(--livre);animation:pulsa 2.4s ease-in-out infinite}
.frescor--velho .frescor__ponto{background:var(--ocupada)}
.frescor--velho{color:#B54708;font-weight:600}

@keyframes pulsa{50%{box-shadow:0 0 0 6px rgba(18,183,106,0)}}

/* Alerta — só aparece quando há algo errado de verdade. */
.alerta{
	display:flex;gap:.7rem;align-items:flex-start;
	padding:.85rem 1rem;border-radius:var(--r-sm);margin-bottom:1.25rem;
	font-size:.9rem;line-height:1.45;
	background:var(--ocupada-fraco);border:1px solid #F5C77E;color:#93370D;
}
/* Herda a cor do alerta (âmbar ou vermelho) em vez de ter a sua própria: aqui
   a cor da caixa já é o aviso, e um ícone destoando dela viraria um terceiro
   recado na mesma linha. */
.alerta__icone{font-size:1.05rem;line-height:1.35;flex:none}
.alerta strong{display:block;margin-bottom:.1rem}
.alerta--grave{background:#FEF0EF;border-color:#F5A9A2;color:#912018}

/* Resumo */
.resumo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}
.resumo__cartao{
	display:grid;grid-template-columns:1fr auto;column-gap:.75rem;
	background:linear-gradient(160deg,var(--fundo),#fff);
	border:1px solid var(--borda);border-radius:var(--r);padding:1rem 1.15rem;
}
/* Texto todo na coluna da esquerda e o ícone na direita, ao lado das três
   linhas. A barra é a exceção: atravessa o cartão inteiro, porque ela mede o
   cartão — pará-la na borda do ícone a faria parecer uma barra menor cheia. */
.resumo__cartao > *{grid-column:1}
.resumo__cartao .maq-ico{grid-column:2;grid-row:1 / span 3;align-self:center}
.resumo__cartao .barra{grid-column:1 / -1}
.resumo__rotulo{
	font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
	color:var(--tinta-3);margin-bottom:.25rem;
}
.resumo__numero{
	display:flex;align-items:baseline;gap:.4rem;
	font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--azul-900);
	font-variant-numeric:tabular-nums;line-height:1.05;
}
.resumo__numero small{font-size:.875rem;font-weight:600;color:var(--tinta-3);letter-spacing:0}
.resumo__nota{margin:.05rem 0 .75rem;font-size:.8125rem;color:var(--tinta-2)}
.resumo__cartao--vazio .resumo__numero,
.resumo__cartao--esqueleto .resumo__numero{color:var(--indisponivel)}

.barra{height:7px;border-radius:99px;background:var(--indisponivel-fraco);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--livre);transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* Ícone de máquina */
/* Guarda-roupa dos símbolos: fora da pintura, mas SEM `display:none` — o
   `<use>` instancia assim mesmo, só que zerar a caixa é o caminho que nenhum
   navegador discute. `hidden` também não serve, que aí cairia na regra de
   `display:none !important` lá de cima. */
.desenhos{position:absolute;width:0;height:0;overflow:hidden}

/* 320x370 é o viewBox do desenho; a altura acompanha, senão a máquina achata.
   As cores são as mesmas variáveis da marca que o POS usa em hexa. */
.maq-ico{width:2.25rem;height:2.6rem;flex:none}
.maq-ico__azul{fill:var(--azul-500)}
.maq-ico__rosa{fill:var(--rosa)}
.maq-ico__casco{fill:none;stroke-width:19}
.maq-ico__casco--azul{stroke:var(--azul-500)}
.maq-ico__casco--rosa{stroke:var(--rosa)}
.maq-ico__calor{fill:none;stroke:var(--azul-500);stroke-width:20;stroke-linecap:round}

/* Sem dado o número já fica cinza; ícone em cor cheia ao lado de um "—"
   gritaria mais alto que o próprio número que ele acompanha. */
.resumo__cartao--vazio .maq-ico,
.resumo__cartao--esqueleto .maq-ico{opacity:.4}

/* Grade de máquinas */
/* Empilhado no celular; lavadoras e secadoras lado a lado quando cabe.
   `auto-fit` em vez de `1fr 1fr` para a loja que só tem um dos dois tipos: a
   coluna vazia colapsa e o grupo ocupa a largura toda, em vez de deixar metade
   do cartão em branco. */
.grade{display:grid;gap:1.25rem}

@media (max-width:659.99px){
	.grade > :nth-child(2){
		order: -1
	}
}
@media (min-width:660px){
	.grade{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem 2rem}
}
.grupo__titulo{
	display:flex;align-items:baseline;gap:.5rem;
	font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
	color:var(--tinta-3);margin:0 0 .6rem;
}
.grupo__titulo span{font-size:.75rem;font-weight:600;letter-spacing:0;text-transform:none}

/* Flex com quebra, e não grade: assim os quadradinhos ESTICAM para preencher
   a linha inteira em vez de pararem na largura da coluna — inclusive a última
   linha, que numa grade ficaria com sobra à direita. O `1 1 74px` mantém o
   mesmo mínimo de antes; abaixo disso o desenho da máquina com a plaquinha do
   número não cabe mais.
   Vale em qualquer largura de propósito: manter grade no desktop e flex no
   celular seriam dois sistemas de layout para o mesmo bloco. */
.tiles{
	display:flex;flex-wrap:wrap;gap:.5rem;
	list-style:none;margin:0;padding:0;
}
/* O quadradinho vive DENTRO do <li>, e não é o <li>: quando a máquina é
   pagável ele vira <button>, e um <li> não pode ser botão. O <li> some da
   pintura e vira só a célula da grade. */
.tiles > li{display:flex;flex:1 1 74px}
.tile{
	flex:1;border-radius:var(--r-sm);padding:.5rem .4rem .55rem;text-align:center;
	border:1.5px solid transparent;font-family:inherit;
	transition:background-color .3s ease, border-color .3s ease, transform .15s ease;
}
button.tile{cursor:pointer;-webkit-appearance:none;appearance:none}
/* O desenho da máquina entrou no lugar do número grande, e o número virou
   plaquinha montada no ombro dele. Sozinho, "1" não identificava nada numa
   loja que tem lavadora 1 E secadora 1: quem varre a grade de longe vê os
   quadradinhos, não o título do grupo em cima deles. */
.tile__maq{position:relative;display:inline-block}
.tile__maq .maq-ico{display:block;width:2.5rem;height:2.9rem}

/* Sobrepõe por fora do canto, e a borda branca a descola do traçado que passa
   por baixo — sem ela, a plaquinha encosta na carcaça e as duas viram uma
   mancha só no tamanho em que este quadradinho é lido. */
.tile__n{
	position:absolute;top:-.2rem;right:-.5rem;
	min-width:1.2rem;padding:0 .2rem;
	border:2px solid #fff;border-radius:.4rem;
	font-size:.75rem;font-weight:800;line-height:1.15rem;color:#fff;
	font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
/* A cor é a do ESTADO, no tom ESCURO de cada um — não na cor cheia. Branco
   sobre o verde `--livre` dá 2,8:1 e sobre o âmbar `--ocupada` dá 2,1:1, e
   isto aqui é um número de 12px. O tom escuro é o mesmo que o quadradinho já
   usa no texto, então ele inteiro fica numa família de cor só.
   O tipo perde a cor nesta plaquinha, mas não perde a leitura: a carcaça do
   desenho continua azul na lavadora e rosa na secadora. */
.tile__n--livre{background:#05603A}
.tile__n--ocupada{background:#93370D}
.tile__n--indisponivel{background:var(--tinta-3)}
.tile__s{display:block;font-size:.625rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;margin-top:.05rem}
/* Preço não é rótulo: caixa alta e espaçamento de letra em cima de número só
   atrapalham a leitura do valor. Tabular para os preços alinharem coluna a
   coluna quando a loja cobra igual em todas. */
.tile__s--preco{
	font-size:.6875rem;font-weight:700;text-transform:none;letter-spacing:0;
	font-variant-numeric:tabular-nums;
}

/* Tempo restante da máquina em uso: frase, não rótulo — sem caixa alta, que
   em 10px e duas linhas vira borrão. */
.tile__t{display:block;font-size:.625rem;font-weight:600;line-height:1.2;margin-top:.15rem}

.tile--livre{background:var(--livre-fraco);border-color:#A9E6C9;color:#05603A}
.tile--ocupada{background:var(--ocupada-fraco);border-color:#F5D9A8;color:#93370D}
.tile--indisponivel{background:var(--indisponivel-fraco);border-color:#D6DCE5;color:var(--tinta-3)}

/* Pagável: continua verde — a cor informa "livre", e trocá-la por cor de marca
   quebraria a leitura da grade inteira. O que muda é o CONVITE: borda cheia,
   sombra e o PREÇO no lugar da palavra "Livre" — que o convite já está na cor
   e na borda, e o que falta para decidir é quanto custa esta máquina. */
.tile--pagavel{
	border-color:var(--livre);box-shadow:0 1px 0 rgba(5,96,58,.12);
}
.tile--pagavel:hover{background:#D6F2E4;transform:translateY(-2px)}
.tile--pagavel:active{transform:translateY(0)}
.tile--pagavel .tile__s{color:#05603A}

.painel__pe{
	display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;gap:.75rem 1.5rem;
	margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--borda);
}
@media (max-width:420px){
	.painel__pe{justify-content: center}
}
.legenda{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0;font-size:.8125rem;color:var(--tinta-2)}
.legenda li{display:flex;align-items:center;gap:.2rem}
.pt{width:10px;height:10px;border-radius:3px;display:block}
.pt--livre{background:var(--livre)}
.pt--ocupada{background:var(--ocupada)}
.pt--indisponivel{background:var(--indisponivel)}


/* Sem dado confiável: os números somem e entra texto. */
.vazio{
	text-align:center;padding:2rem 1rem;color:var(--tinta-2);font-size:.9375rem;
	background:var(--fundo);border:1px dashed var(--borda);border-radius:var(--r);
}
.vazio strong{display:block;color:var(--tinta);font-size:1rem;margin-bottom:.3rem}
.vazio__zap{margin-top:1.1rem}

/* Ícone em cinza, e não em vermelho: ele diz "olha aqui", e quem diz o que
   aconteceu é o texto. Vermelho num painel onde verde e âmbar já significam
   estado de máquina competiria com a informação que importa. */
.vazio__icone{
	display:block;font-size:1.75rem;color:var(--indisponivel);
	margin-bottom:.7rem;line-height:1;
}

@media (max-width:520px){
	.resumo{grid-template-columns:1fr}
}


/* ============================================================ FATOS */

.fatos{padding:.5rem 0 2.5rem}
.fatos__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.fatos__grade div{text-align:center}
.fatos svg{
	width:22px;height:22px;margin:0 auto .4rem;
	fill:none;stroke:var(--azul-500);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.fatos strong{display:block;font-size:.875rem;font-weight:700}
.fatos span{display:block;font-size:.75rem;color:var(--tinta-3)}

@media (max-width:560px){
	.fatos__grade{grid-template-columns:1fr 1fr;gap:1.25rem}
}


/* ============================================================ CONTATO */

.contato{padding-bottom:3rem}
.contato__caixa{
	display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
	background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);
	box-shadow:var(--sombra);padding:clamp(1.15rem,3vw,1.6rem);
}
.contato__dados{flex:1;min-width:min(240px,100%)}
.contato__dados h2{font-size:1.25rem;margin-bottom:.3rem}
.contato__end{font-size:.9375rem;color:var(--tinta-2)}
.contato__tel{font-size:.9375rem;color:var(--tinta-2);margin-top:.1rem}
.contato__obs{
	margin-top:.65rem;padding:.6rem .8rem;border-radius:var(--r-sm);
	background:var(--fundo);border-left:3px solid var(--azul-500);
	font-size:.875rem;color:var(--tinta-2);
}
.contato__acoes{display:flex;flex-wrap:wrap;gap:.6rem}
.contato__pin{width:17px;height:17px;flex:none;fill:none;stroke:#fff;stroke-width:1.9}
.contato__acoes .botao{padding:.75rem .95rem}

@media (max-width:420px){
	.contato__acoes .botao > span{
		position:absolute;width:1px;height:1px;overflow:hidden;
		clip-path:inset(50%);white-space:nowrap;
	}
}


/* ============================================================ RODAPÉ */

.rodape{background:var(--rosa-900);color:#FBD9E8;padding:1.75rem 0;text-align:center}
.rodape__marca{color:#fff;font-weight:800;letter-spacing:-.01em}
/* Sobre o rodapé rosa, o "EXPRESS" em rosa sumiria. Vai em rosa BEM claro,
   que mantém a distinção do logo sem brigar com o fundo. */
.rodape__marca em{font-style:italic;font-weight:900;font-size:.875rem;color:#FFD9EA}
.rodape__nota{font-size:.8125rem;margin-top:.2rem}


/* ============================================================ DICA DO iOS */

.ios-dica{
	/* Acima do botão flutuante de instalar, não em cima dele.
	   `max-width` + `margin auto`: é um aviso de uma linha, e esticado numa
	   tela de tablet ou desktop ele vira uma tarja atravessando a página. No
	   celular o limite não é alcançado e ele ocupa a largura toda, como deve. */
	position:fixed;left:1rem;right:1rem;bottom:5.25rem;z-index:60;
	max-width:26rem;margin-inline:auto;
	background:var(--rosa-900);color:#FBECF3;border-radius:var(--r);
	padding:.9rem 2.5rem .9rem 1rem;font-size:.875rem;line-height:1.45;
	box-shadow:0 16px 36px -12px rgba(120,14,55,.62);
	animation:sobe .3s ease;
}
.ios-dica strong{color:#fff}
.ios-dica__x{
	position:absolute;top:.5rem;right:.5rem;
	width:30px;height:30px;border-radius:50%;border:none;
	background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
}


/* ============================================================ MODAL */

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem}
.modal__fundo{position:absolute;inset:0;background:rgba(120,14,55,.62);backdrop-filter:blur(4px);animation:aparece .2s ease}

.modal__caixa{
	position:relative;width:min(480px,100%);max-height:min(86vh,680px);overflow:auto;
	background:#fff;border-radius:var(--r-lg);padding:clamp(1.25rem,4vw,1.75rem);
	box-shadow:0 32px 64px -16px rgba(120,14,55,.42);
	animation:sobe .26s cubic-bezier(.2,.8,.3,1);
}
.modal__caixa h2{font-size:1.375rem;margin-bottom:.3rem}
.modal__caixa > p{color:var(--tinta-2);font-size:.9rem;margin-bottom:1.25rem}

.modal__x{
	position:absolute;top:.85rem;right:.85rem;width:34px;height:34px;border-radius:50%;
	border:none;background:var(--fundo);color:var(--tinta-2);font-size:1.2rem;line-height:1;cursor:pointer;
}
.modal__x:hover{background:var(--indisponivel-fraco);color:var(--tinta)}

.modal__lista{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.modal__item{
	display:flex;align-items:center;gap:.8rem;width:100%;
	padding:.85rem .9rem;text-align:left;font-family:inherit;cursor:pointer;
	background:#fff;border:1.5px solid var(--borda);border-radius:var(--r);
	transition:border-color .15s ease, background-color .15s ease;
}
.modal__item:hover{border-color:var(--azul-500);background:#F4F9FF}
.modal__item[aria-current="true"]{border-color:var(--azul-500);background:#F0F6FF}

.modal__pin{width:34px;height:34px;flex:none;border-radius:11px;background:var(--rosa-fraco);display:grid;place-items:center}
.modal__pin svg{width:18px;height:18px;fill:none;stroke:var(--rosa);stroke-width:1.9}
.modal__item[aria-current="true"] .modal__pin{background:#E1EDFD}
.modal__item[aria-current="true"] .modal__pin svg{stroke:var(--azul-500)}

.modal__dados{flex:1;min-width:0}
.modal__nome{display:block;font-size:1rem;font-weight:750;color:var(--tinta)}
.modal__end{display:block;font-size:.8125rem;color:var(--tinta-2);margin-top:.05rem}
.modal__marca-atual{flex:none;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--azul-500)}

@keyframes aparece{from{opacity:0}}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}}


/* ============================================================ PIX

   Duas telas: a confirmação (dentro do painel) e a página do pedido.

   O verde do painel NÃO é reaproveitado aqui. Lá ele significa "máquina
   livre"; numa tela de pagamento ele passaria a significar "deu certo", e as
   duas leituras na mesma sessão confundem. O que carrega estado aqui é o
   próprio bloco de estado, com ícone e texto.
   ====================================================================== */

.botao--pix{
	width:100%;background:var(--azul-500);color:#fff;
}
.botao--pix:hover{background:var(--azul-700)}
.botao--pix:disabled{
	background:#D6DCE5;color:var(--tinta-3);cursor:not-allowed;transform:none;
}
.ico-pix{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}


/* ---------------------------------------------- faixa de pedido em andamento */

.retomar{
	display:flex;align-items:center;gap:.75rem;text-decoration:none;
	margin-bottom:1rem;padding:.75rem .9rem;
	background:#EEF6FF;border:1.5px solid #C7E0FB;border-radius:var(--r);
	color:var(--azul-900);
}
.retomar:hover{background:#E4F0FF}
.retomar > i:first-child{font-size:1.1rem;color:var(--azul-500)}
.retomar span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.retomar strong{font-size:.9375rem;font-weight:750}
.retomar span span{font-size:.8125rem;color:var(--tinta-2)}
.retomar__seta{margin-left:auto;color:var(--azul-500);font-size:.875rem}


/* ---------------------------------------------- confirmação antes de cobrar */

.pagar__resumo{
	display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
	padding:.85rem 1rem;margin-bottom:1rem;
	background:var(--indisponivel-fraco);border-radius:var(--r);
}
.pagar__maquina{font-size:.9rem;font-weight:750}
.pagar__valor{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* O aviso é texto de contrato: precisa caber inteiro na tela sem empurrar o
   botão para fora, e sem virar uma parede que ninguém lê. Rola dentro da
   própria caixa. */
.pagar__aviso{
	font-size:.8125rem;line-height:1.5;color:var(--tinta-2);
	max-height:9.5rem;overflow-y:auto;
	padding:.75rem .85rem;margin-bottom:.85rem;
	background:#fff;border:1px solid var(--borda);border-radius:var(--r-sm);
}

/* Área de toque grande e o texto inteiro clicável: um checkbox de 13px num
   celular é o campo que mais falha em formulário nenhum. */
.aceite{
	display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;
	padding:.6rem .2rem;margin-bottom:.85rem;
	font-size:.875rem;line-height:1.45;color:var(--tinta);
}
.aceite input{
	flex:none;width:22px;height:22px;margin:0;accent-color:var(--azul-500);cursor:pointer;
}

.pagar__erro{
	font-size:.875rem;color:#B42318;background:#FEF3F2;
	border:1px solid #FECDCA;border-radius:var(--r-sm);
	padding:.65rem .8rem;margin-bottom:.75rem;
}
.pagar__pe{font-size:.75rem;color:var(--tinta-3);text-align:center;margin-top:.75rem}


/* ---------------------------------------------- página do pedido */

.corpo-pedido main{padding:1.5rem 0 3rem}

.pedido{
	background:#fff;border:1px solid var(--borda);border-radius:var(--r-lg);
	box-shadow:var(--sombra);padding:1.25rem;
}
@media (min-width:600px){ .pedido{padding:1.75rem} }

.pedido__vazio{text-align:center;padding:2rem 1rem;display:grid;gap:.5rem;justify-items:center}
.pedido__vazio i{font-size:2rem;color:var(--indisponivel)}
.pedido__vazio strong{font-size:1.125rem}
.pedido__vazio p{color:var(--tinta-2);font-size:.9375rem;max-width:38ch;margin-bottom:.5rem}

/* Os quatro passos. Sem números e sem porcentagem: o que a pessoa quer saber é
   se o dinheiro já saiu, e isso é um NOME de etapa, não uma barra. */
.passos{
	display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;
	list-style:none;margin:0 0 1.25rem;padding:0;
}
.passos li{
	font-size:.6875rem;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
	color:var(--tinta-3);text-align:center;
}
.passos li span{
	display:block;height:4px;border-radius:999px;background:var(--indisponivel-fraco);
	margin-bottom:.4rem;transition:background-color .3s ease;
}
.passos li.feito span{background:var(--livre)}
.passos li.feito{color:var(--tinta-2)}
.passos li.agora span{background:var(--azul-500)}
.passos li.agora{color:var(--azul-900)}

.pedido__topo{
	display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
	padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--borda);
}
.pedido__topo .text-right{text-align:right}
.pedido__rotulo{
	font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	color:var(--tinta-3);
}
.pedido__maquina{font-size:1.125rem;font-weight:750}
.pedido__valor{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.pedido__estado{
	display:flex;align-items:flex-start;gap:.85rem;
	padding:.9rem 1rem;border-radius:var(--r);
	background:var(--indisponivel-fraco);color:var(--tinta-2);
}
.pedido__estado i{font-size:1.35rem;line-height:1.4;flex:none;color:var(--tinta-3)}
.pedido__estado div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pedido__estado strong{font-size:1rem;font-weight:750;color:var(--tinta)}
.pedido__estado span{font-size:.875rem;line-height:1.45}

.pedido__estado.ok{background:var(--livre-fraco)}
.pedido__estado.ok i{color:var(--livre)}
.pedido__estado.ok strong{color:#05603A}
.pedido__estado.erro{background:#FEF3F2}
.pedido__estado.erro i{color:#D92D20}
.pedido__estado.erro strong{color:#912018}
.pedido__estado.neutro{background:var(--ocupada-fraco)}
.pedido__estado.neutro i{color:var(--ocupada)}
.pedido__estado.neutro strong{color:#93370D}

/* ---- o QR e o copia-e-cola ---- */

.pix{margin-top:1.25rem;text-align:center}

.pix__qr{
	display:grid;place-items:center;
	padding:.75rem;margin:0 auto 1rem;width:fit-content;
	background:#fff;border:1px solid var(--borda);border-radius:var(--r);
}
/* SEM `image-rendering:pixelated` aqui, e a ausência é deliberada.
   Ele servia quando a imagem vinha pronta do provedor, pequena, e era AMPLIADA
   na tela. Agora o QR é desenhado no navegador em ~520 px e REDUZIDO para 230 —
   e no sentido da redução o `pixelated` descarta linhas inteiras de pixels, o
   que engorda uns módulos e some com outros. A interpolação suave do navegador
   é o que mantém os módulos uniformes, que é o que o leitor precisa. */
.pix__qr img{width:min(230px,60vw);height:auto}
.pix__semqr{font-size:.875rem;color:var(--tinta-2);padding:1.5rem 1rem;max-width:30ch}

.pix__prazo{
	font-size:.8125rem;font-weight:650;color:var(--tinta-2);
	font-variant-numeric:tabular-nums;margin-bottom:1rem;
}

.pix__rotulo{
	font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	color:var(--tinta-3);margin-bottom:.35rem;text-align:left;
}

/* O código inteiro na tela, e não truncado com reticências: quem não conseguir
   usar o botão de copiar precisa poder selecionar tudo à mão. Rola dentro da
   caixa para não esticar a página. */
.pix__codigo{
	max-height:5.5rem;overflow:auto;text-align:left;
	padding:.65rem .75rem;margin-bottom:.75rem;
	background:var(--indisponivel-fraco);border-radius:var(--r-sm);
}
.pix__codigo code{
	font-size:.75rem;line-height:1.5;word-break:break-all;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--tinta-2);
}

.pix__dica{font-size:.8125rem;color:var(--tinta-2);margin-top:.85rem;line-height:1.5}

.pedido__acoes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.pedido__acoes .botao{flex:1;min-width:11rem}

.pedido__ref{
	margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--borda);
	font-size:.75rem;color:var(--tinta-3);text-align:center;
}
.pedido__ref code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:.75rem;color:var(--tinta-2);
	background:var(--indisponivel-fraco);padding:.1rem .4rem;border-radius:5px;
}


/* ---------------------------------------------- escolher as máquinas */

/* A entrada do pagamento. Largura cheia e abaixo da grade: quem chega ainda
   está respondendo "tem máquina livre?", e oferecer a venda acima do painel
   empurraria a cobrança antes da informação que a pessoa veio buscar. */
.botao--pagar{
	width:100%;margin-top:1.25rem;
	background:var(--azul-500);color:#fff;
}
.botao--pagar:hover{background:var(--azul-700)}

.escolha{
	list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem;
	/* Seis máquinas cabem; acima disso rola dentro da caixa em vez de empurrar
	   o botão de pagar para fora da tela do celular. */
	max-height:17rem;overflow-y:auto;
}

.escolha__item{
	display:flex;align-items:center;gap:.75rem;cursor:pointer;
	padding:.65rem .8rem;
	background:#fff;border:1.5px solid var(--borda);border-radius:var(--r);
	transition:border-color .15s ease, background-color .15s ease;
}
.escolha__item:hover{border-color:var(--azul-300)}
.escolha__item.marcado{border-color:var(--azul-500);background:#F4F9FF}

/* 22px: o alvo de toque de um checkbox padrão num celular é o campo que mais
   falha em formulário — e a etiqueta inteira também é clicável. */
.escolha__item input{
	flex:none;width:22px;height:22px;margin:0;accent-color:var(--azul-500);cursor:pointer;
}

/* Menor que no resumo: aqui ele acompanha duas linhas de texto, e no tamanho
   do cartão passaria a mandar mais que o nome da máquina. */
.escolha__item .maq-ico{width:1.6rem;height:1.85rem}

.escolha__dados{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.escolha__dados strong{font-size:.9375rem;font-weight:700;color:var(--tinta)}
.escolha__tipo{font-size:.75rem;color:var(--tinta-3)}
.escolha__preco{
	flex:none;font-size:.9375rem;font-weight:700;
	font-variant-numeric:tabular-nums;color:var(--tinta-2);
}

.pagar__vazio{
	font-size:.875rem;color:var(--tinta-2);text-align:center;
	padding:1.5rem 1rem;margin-bottom:1rem;
	background:var(--indisponivel-fraco);border-radius:var(--r);
}


/* ---------------------------------------------- as máquinas de um pedido */

.itens{
	list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem;
}
.item{
	display:grid;grid-template-columns:1fr auto auto;align-items:center;
	gap:.35rem .75rem;
	padding:.6rem .8rem;border-radius:var(--r-sm);
	background:var(--indisponivel-fraco);
	border-left:3px solid var(--indisponivel);
}
.item__nome{font-size:.9375rem;font-weight:700;min-width:0}
.item__estado{
	font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
	color:var(--tinta-3);
}
.item__preco{font-size:.875rem;font-weight:650;font-variant-numeric:tabular-nums;color:var(--tinta-2)}

/* O motivo ocupa a linha inteira, abaixo do nome: espremido numa coluna ele
   quebraria em três palavras por linha e ninguém leria. */
.item__motivo{grid-column:1 / -1;font-size:.8125rem;color:#B42318;line-height:1.4}

.item--liberada{background:var(--livre-fraco);border-left-color:var(--livre)}
.item--liberada .item__estado{color:#05603A}
.item--liberando{background:#EEF6FF;border-left-color:var(--azul-500)}
.item--liberando .item__estado{color:var(--azul-700)}
.item--falhou{background:#FEF3F2;border-left-color:#D92D20}
.item--falhou .item__estado{color:#B42318}


/* ============================================================ MOVIMENTO */

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{
		animation-duration:.001ms !important;animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
	}
}