/* ==========================================================================
   Uailava Express Bragança Paulista — design system

   DIREÇÃO: "Sítio moderno". Escolhida em 29/08/2026 contra duas alternativas
   (replicar as cores das paredes da loja; ou o verde-limão e azul-royal da logo
   em alta saturação). A primeira ficava apagada no celular sob sol; a segunda
   lia como página de venda de franquia, que é exatamente o que o briefing manda
   NÃO parecer — a franqueadora já tem esse site em uailava.com.br.

   DE ONDE VÊM AS CORES. Não foram escolhidas no olho: saíram de uma contagem de
   cores dominantes dos arquivos da marca e das fotos da unidade.

     macacão do mascote   #184848  ─┐  praticamente a mesma cor. É a ponte
     parede da loja       #284858  ─┘  entre personagem e ponto físico, e por
                                       isso o petróleo é a base do site.
     chapéu de palha      #F8B828 → #B85808   dá o acento quente
     verde da logo        #88C828
     azul da logo         #0858A8
     parede sálvia        #B8B898

   POR QUE NÃO SE PARECE COM O LEVE & LAVE. É o mesmo andaime técnico, e de
   propósito — mas ali a paleta é marinho + ciano com Nunito arredondada. Aqui é
   petróleo + palha + verde-limão com Plus Jakarta Sans, e o divisor de seção é
   uma serra, não uma curva. Nenhum token é compartilhado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonte

   Plus Jakarta Sans variável, 400–800 num arquivo só. Auto-hospedada: fonte de
   CDN custa uma conexão nova (DNS + TLS + HTTP) antes do primeiro glifo, e a
   meta é LCP < 2s em 4G ruim, que é como esta página vai ser aberta — na rua,
   procurando lavanderia.

   Uma família só, e não display + corpo. A alternativa avaliada foi Bricolage
   Grotesque nos títulos com Inter no corpo; foi descartada porque o segundo
   arquivo paga um round-trip que a página não tem para gastar. O caráter dos
   títulos vem do peso 800, do tracking negativo e do acento em palha — não de
   uma segunda fonte.

   `latin-ext` está declarada por correção, mas na prática nunca baixa: todo
   acento do português (ç ã õ á é í ó ú â ê ô) vive em U+0000–00FF, que é o
   subset `latin`. São 26 KB no caminho crítico, não 47.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens

   OS CONTRASTES ESTÃO MEDIDOS, NÃO ESTIMADOS. Cada par que a página usa foi
   calculado antes de o token existir, e três reprovaram na primeira rodada:

     caramelo #D97A17 como texto sobre areia .......... 2,83   reprovou
     branco sobre o verde da marca #88C828 ............ 3,29   reprovou
     branco sobre caramelo ............................ 3,11   reprovou

   A correção NÃO foi baixar a régua para os 3,0 de "texto grande" — o CTA desta
   página é lido na calçada, no sol, por quem está com um cesto na mão. Foram
   duas medidas:

   a) As cores vivas da marca viraram FUNDO, com petróleo por cima. O botão
      primário é verde-limão #88C828 com texto #12414E: 5,47. Mantém o verde
      exato da logo E passa em AA normal — melhor nos dois eixos que branco
      sobre verde escurecido.

   b) Onde a cor quente precisa ser TEXTO sobre fundo claro, existe uma variante
      escurecida só em luminosidade, com matiz e saturação preservados (por isso
      continua lendo como a mesma cor da marca):
        --caramelo-txt #9D5811  4,58
        --verde-txt    #507517  4,51

   Nunca use --verde-vivo, --palha ou --caramelo como cor de texto sobre fundo
   claro. É a regra mais fácil de quebrar deste arquivo.
   -------------------------------------------------------------------------- */
:root {
  /* Base escura — o macacão do mascote, que é a parede da loja */
  --petroleo:      #12414E;
  --petroleo-esc:  #0C303A;   /* rodapé */
  --petroleo-cla:  #1B5A6B;   /* borda e hover dentro do escuro */

  /* Fundos claros */
  --areia:         #F7F4EC;
  --salvia:        #E7EDE0;   /* a parede da loja, dessaturada */
  --branco:        #FFFFFF;

  /* Marca viva — SÓ como fundo, ou como texto sobre petróleo */
  --verde-vivo:    #88C828;   /* o verde exato da logo */
  --palha:         #F2B441;   /* o chapéu */
  --caramelo:      #D97A17;   /* o chapéu na sombra */

  /* Marca legível — para texto sobre fundo claro */
  --verde-txt:     #507517;
  --caramelo-txt:  #9D5811;
  --azul:          #0858A8;   /* o azul da logo passa sem ajuste: 5,92 */

  /* Texto */
  --tinta:         #12262B;
  --tinta-med:     #44585E;
  --tinta-inv:     #EAF2F0;   /* corpo sobre petróleo */

  /* Semânticos de estado — a pílula "aberto agora" */
  --aberto:        #88C828;
  --fechado:       #E8846B;

  --raio:          14px;
  --raio-g:        24px;
  --sombra:        0 2px 4px rgba(18, 65, 78, .06),
                   0 8px 24px rgba(18, 65, 78, .08);
  --sombra-alta:   0 4px 8px rgba(18, 65, 78, .10),
                   0 18px 48px rgba(18, 65, 78, .16);

  --col:           1180px;   /* largura máxima do conteúdo */
  --gutter:        clamp(1.15rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   3. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A barra fixa do mobile tem ~72px. Sem isto, clicar numa âncora do FAQ
     deixa o título da seção escondido atrás dela. */
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.62;
  color: var(--tinta);
  background: var(--areia);
  -webkit-font-smoothing: antialiased;
  /* A barra fixa do mobile cobre o fim da página; sem isto o rodapé fica
     debaixo dela e o link do Instagram não é clicável. */
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 719px) { body { padding-bottom: 4.9rem; } }

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

a { color: var(--azul); text-underline-offset: .18em; }

/* Foco visível em tudo que recebe teclado. O anel é palha porque ela é a única
   cor da paleta que tem contraste tanto sobre petróleo (6,02) quanto sobre
   areia — um anel de cor só, que funciona nas seções claras e nas escuras. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--palha);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--petroleo); color: #fff;
  padding: .8rem 1.2rem; z-index: 100; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; top: 0; }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--col));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4. Tipografia

   `text-wrap: balance` nos títulos evita a linha órfã de uma palavra, que é
   como "Lavanderia de autoatendimento em Bragança Paulista" quebra sozinho em
   telas de 390px. Ignorado em navegador antigo, sem fallback necessário.
   -------------------------------------------------------------------------- */
h1, h2, h3 { margin: 0 0 .55em; line-height: 1.12; text-wrap: balance; }

.display { font-weight: 800; letter-spacing: -.028em; }

.h1 { font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.65rem); }
.h2 { font-size: clamp(1.62rem, 1.2rem + 1.85vw, 2.5rem); }
.h3 { font-size: clamp(1.12rem, 1.02rem + .42vw, 1.3rem); font-weight: 700;
      letter-spacing: -.012em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.06rem, .99rem + .34vw, 1.25rem);
  line-height: 1.58;
  color: var(--tinta-med);
}
.lead b, .lead strong { color: var(--tinta); font-weight: 700; }

.rotulo {
  font-size: .8rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--caramelo-txt);
  margin: 0 0 .85rem;
}
:is(.hero, .secao--petroleo) .rotulo { color: var(--palha); }

.miudo { font-size: .82rem; line-height: 1.5; color: var(--tinta-med); }
:is(.hero, .secao--petroleo) .miudo { color: #A9C4C4; }

/* Números de preço e de tempo. `tabular-nums` mantém a coluna de preços
   alinhada quando os valores têm larguras de dígito diferentes (R$ 11,90 ao
   lado de R$ 9,90); `-.03em` fecha o rio que dígitos largos abrem em peso 800. */
.numero {
  font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. Botões

   Três níveis, na ordem que o briefing fixou para lavanderia de autosserviço —
   e que é o inverso do padrão da agência para lavanderia tradicional:

     1º  Como chegar   → rota no Maps. É a conversão que alimenta o Google Ads.
     2º  WhatsApp      → dúvida e venda de pacote.
     3º  Ligar         → só no mobile.

   Enquanto a loja não abrir, o modo pré-inauguração troca a ordem de 1 e 2:
   mandar alguém traçar rota até uma porta fechada é pior que não ter botão.
   Quem faz a troca é o JS, pela classe no <body>.

   ALTURA MÍNIMA 52px. Não é estética: é alvo de toque para quem está com um
   cesto de roupa embaixo do braço, de pé, na calçada.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.55rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__ico { width: 21px; height: 21px; flex: none; fill: currentColor; }

/* Primário: o verde exato da logo, com tinta petróleo. 5,47 — ver a nota
   longa nos tokens sobre por que NÃO é branco sobre verde. */
.btn--primario {
  background: var(--verde-vivo); color: var(--petroleo);
  box-shadow: 0 4px 14px rgba(136, 200, 40, .34);
}
.btn--primario:hover { background: #94D62E; box-shadow: 0 8px 22px rgba(136, 200, 40, .42); }

/* Rota, sobre fundo claro */
.btn--rota { background: var(--petroleo); color: #fff; }
.btn--rota:hover { background: var(--petroleo-cla); }

/* Rota, dentro de seção petróleo: inverte para não sumir */
:is(.hero, .secao--petroleo) .btn--rota,
.topo .btn--rota { background: var(--branco); color: var(--petroleo); }
:is(.hero, .secao--petroleo) .btn--rota:hover,
.topo .btn--rota:hover { background: var(--salvia); }

/* WhatsApp: sempre o verde da própria marca do WhatsApp, nunca o da Uailava —
   o reconhecimento do canal vale mais que a coerência de paleta, e é o padrão
   já validado nas outras LPs da agência. */
.btn--wa { background: #1FA855; color: #fff; }
.btn--wa:hover { background: #1B9149; }

/* Fantasma, para ação terciária */
.btn--fantasma {
  background: transparent; color: var(--petroleo); border-color: rgba(18, 65, 78, .28);
}
.btn--fantasma:hover { background: rgba(18, 65, 78, .06); border-color: var(--petroleo); }
:is(.hero, .secao--petroleo) .btn--fantasma { color: #fff; border-color: rgba(255, 255, 255, .38); }
:is(.hero, .secao--petroleo) .btn--fantasma:hover { background: rgba(255, 255, 255, .1); }

.btn-linha { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --------------------------------------------------------------------------
   6. Serra — o divisor de seção

   A assinatura gráfica do projeto, e o lugar onde ele mais se afasta do
   Leve & Lave (que usa uma curva de espuma).

   A serra tem duas origens que se encontram: é o horizonte de montanhas que
   aparece de verdade pelo janelão da sala de espera — a foto `lounge-vista`
   está no site — e é o traço que qualquer brasileiro lê como Minas. A marca se
   chama Uai Lava; o divisor não precisa explicar a piada.

   `preserveAspectRatio="none"` deixa a silhueta esticar na horizontal sem
   deformar percepção — montanha esticada continua lendo como montanha, ao
   contrário de um círculo. A altura é fixa em px justamente para que o estico
   seja só horizontal.
   -------------------------------------------------------------------------- */
.serra { display: block; width: 100%; height: 42px; margin-bottom: -1px; }
@media (min-width: 720px) { .serra { height: 62px; } }

/* --------------------------------------------------------------------------
   7. Seções e fundos

   Quatro fundos alternam para dar ritmo sem virar zebra: areia é o padrão,
   sálvia marca as seções de leitura longa (como funciona, FAQ), branco isola as
   que têm foto, e petróleo carrega as duas de maior peso comercial — a máquina
   de 18 kg e o clube de créditos.
   -------------------------------------------------------------------------- */
.secao { padding: clamp(3.2rem, 7vw, 5.6rem) 0; position: relative; }

.secao--areia   { background: var(--areia); }
.secao--branco  { background: var(--branco); }
.secao--salvia  { background: var(--salvia); }
.secao--petroleo {
  background: var(--petroleo); color: var(--tinta-inv);
  padding-top: 0;   /* a serra encosta no topo */
}
.secao--petroleo h2, .secao--petroleo h3, .secao--petroleo .h2, .secao--petroleo .h3 {
  color: #fff;
}
.secao--petroleo .lead { color: #B9D2D0; }
.secao--petroleo .lead b { color: #fff; }
.secao--petroleo a:not(.btn) { color: var(--verde-vivo); }

/* A trama do chapéu de palha, como textura de fundo da sálvia. Dois gradientes
   cruzados a 3% de opacidade: some no celular, aparece no desktop como uma
   variação de superfície que impede a seção grande de ler como bloco chapado.
   Custo zero — não é imagem. */
.secao--salvia::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(18, 65, 78, .028) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(18, 65, 78, .028) 0 1px, transparent 1px 9px);
}
.secao--salvia > * { position: relative; }

.secao__cabeca { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao__cabeca--centro { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.topo { background: var(--petroleo); color: #fff; }

.topo__grid {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; min-height: 70px;
}
.topo__logo { display: block; margin-right: auto; line-height: 0; }
/* A arte usada aqui é `logo-claro` — o logotipo com contorno branco, que veio
   pronto no material da rede. Não use `selo` no header: o selo tem campo branco
   interno e sobre o petróleo vira um disco claro flutuando. */
.topo__logo img { width: clamp(132px, 26vw, 190px); height: auto; }

.topo__horario { display: none; margin: 0; font-size: .87rem; line-height: 1.3;
                 color: #A9C4C4; text-align: right; }
.topo__horario b { display: block; color: #fff; font-size: .95rem; }
@media (min-width: 860px) { .topo__horario { display: block; } }

.topo .btn { min-height: 44px; padding: .5rem 1.15rem; font-size: .93rem; }
@media (max-width: 519px) { .topo .btn { display: none; } }

/* --------------------------------------------------------------------------
   9. Pílula de status "aberto agora"

   O estado real vem do JS, a partir de um objeto de horários — nunca do HTML.
   Enquanto o script não roda, a pílula fica invisível (`[hidden]`), porque uma
   pílula que diz "aberto" antes de conferir a hora é pior que nenhuma.

   O ponto pulsa só quando aberto, e para em prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem .42rem .8rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; letter-spacing: -.005em;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.status[hidden] { display: none; }
.status__ponto { width: 9px; height: 9px; border-radius: 50%; flex: none;
                 background: var(--fechado); }
.status--aberto .status__ponto { background: var(--aberto); animation: pulso 2.4s ease-in-out infinite; }
.status__extra { font-weight: 500; color: #B9D2D0; }

@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(136, 200, 40, .55); }
  60%      { box-shadow: 0 0 0 7px rgba(136, 200, 40, 0); }
}

/* Sobre fundo claro a pílula inverte */
.secao--areia .status, .secao--branco .status, .secao--salvia .status {
  background: rgba(18, 65, 78, .07); color: var(--petroleo);
  border-color: rgba(18, 65, 78, .16);
}
.secao--areia .status__extra, .secao--branco .status__extra,
.secao--salvia .status__extra { color: var(--tinta-med); }

/* --------------------------------------------------------------------------
   10. Herói
   -------------------------------------------------------------------------- */
.hero { background: var(--petroleo); color: var(--tinta-inv); position: relative;
        overflow: hidden; }

.hero__grid { padding: clamp(1.9rem, 5vw, 3.4rem) 0 clamp(2.4rem, 6vw, 4rem); }

.hero__h1 { color: #fff; }
.hero__h1 .destaque { color: var(--palha); }

.hero__sub { color: #BDD5D3; max-width: 34rem; }
.hero__sub b { color: #fff; }

.hero__ctas { margin-top: 1.7rem; }

/* Selo do sabão: a objeção nº 1 de quem nunca entrou numa self-service é "o que
   eu preciso levar?". Fica ACIMA do CTA de propósito — é ela que destrava o
   clique de quem nunca usou. */
.hero-selo {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-top: 1.5rem; padding: .95rem 1.15rem;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--raio); max-width: 33rem;
}
.hero-selo__ico { width: 30px; height: 30px; flex: none; color: var(--verde-vivo); }
.hero-selo b { display: block; color: #fff; font-size: 1rem; }
.hero-selo span { font-size: .92rem; line-height: 1.5; color: #A9C4C4; }

/* NAP no herói: endereço, referência e estacionamento na mesma dobra do H1.
   Geografia no herói é regra do blueprint e, aqui, é a pergunta nº 1 do
   cliente de autosserviço. */
.hero-nap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  margin-top: 1.4rem; font-size: .92rem; color: #A9C4C4;
}
.hero-nap__ico { width: 18px; height: 18px; flex: none; fill: var(--palha); }
.hero-nap b { color: #fff; }

/* A figura sangra até a borda direita a partir de 1080px; abaixo disso é uma
   foto de largura total sob o texto. */
.hero__figura { margin: 0; position: relative; }
.hero__figura img { border-radius: var(--raio-g); }

@media (min-width: 1080px) {
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: center;
  }
  .hero__figura img { border-radius: var(--raio-g); box-shadow: var(--sombra-alta); }
}

/* Balão de preço sobre a foto. `tabular-nums` vem do .numero. */
.balao {
  position: absolute; left: -.5rem; bottom: 1.4rem;
  background: var(--palha); color: var(--petroleo);
  padding: .85rem 1.35rem; border-radius: var(--raio);
  box-shadow: var(--sombra-alta); text-align: center;
}
.balao__topo { display: block; font-size: .78rem; font-weight: 700;
               text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.balao__valor { display: block; font-size: 2.3rem; line-height: 1.05; }
.balao__cifra { font-size: .52em; vertical-align: .42em; margin-right: .1em; }
.balao__base { display: block; font-size: .8rem; line-height: 1.35; margin-top: .18rem; }

/* --------------------------------------------------------------------------
   11. Barra de fatos

   Quatro itens numa faixa, logo abaixo do herói: horário, autoatendimento,
   lava-e-seca no mesmo lugar, pagamento. São as respostas curtas às cinco
   perguntas do cliente de autosserviço; o resto da página é o detalhamento.
   -------------------------------------------------------------------------- */
.fatos { background: var(--branco); border-bottom: 1px solid rgba(18, 65, 78, .09); }
.fatos__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(18, 65, 78, .09);
}
@media (min-width: 900px) { .fatos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A faixa do #ambiente tem TRÊS itens desde 31/08/2026 — o banheiro saiu
   porque a loja não tem. Três cards na grade de quatro deixa uma célula vazia
   com a cor da linha do grid; a dois por linha no celular, o terceiro fica
   sozinho com meia faixa em branco ao lado. Então: três colunas a partir de
   900px, e no celular o último ocupa a linha inteira. */
@media (max-width: 899px) { .fatos__grid--tres > :last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .fatos__grid--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fato {
  background: var(--branco); padding: 1.35rem 1.1rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .45rem;
}
.fato__ico { width: 28px; height: 28px; color: var(--verde-txt); }
.fato__chave { font-weight: 800; font-size: 1rem; letter-spacing: -.015em; line-height: 1.25; }
.fato__txt { font-size: .84rem; line-height: 1.4; color: var(--tinta-med); }

/* --------------------------------------------------------------------------
   12. A seção da 03 — texto de um lado, o edredom do outro

   A foto do edredom dentro da 03 chegou em 31/08/2026 e é a prova da seção de
   maior valor da loja: até então ela era só texto, com um marcador PENDENTE no
   rodapé. Foto vertical (1122x1402) ao lado de um bloco de texto largo é o
   mesmo problema que o herói já resolveu, então é o mesmo layout — não um
   padrão novo.

   Por que `grid-template-areas` e não a ordem do DOM: no celular a foto tem de
   entrar ENTRE a promessa e a ressalva, e não depois do CTA. Ela é o que faz
   "edredom king cabe" virar fato antes de o leitor ler a letra miúda de que a
   03 não seca; depois do botão ela chegaria tarde, num ponto de saída. As
   áreas deixam essa ordem explícita nos dois tamanhos, em vez de depender de
   `order` numérico, que se lê errado seis meses depois.

   O espaçamento vertical é 0 de propósito: a `.secao__cabeca` já traz o seu
   `margin-bottom` e o `.hero-selo` o seu `margin-top`. Um `row-gap` aqui
   somaria aos dois.
   -------------------------------------------------------------------------- */
.dezoito__grid {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3.6rem);
  grid-template-areas: "cabeca" "foto" "corpo";
}

.dezoito__cabeca { grid-area: cabeca; }
.dezoito__corpo  { grid-area: corpo; }

/* O teto de 26rem vale só enquanto a foto está empilhada. Sem ele, num tablet
   de 900px a coluna dá 828px de largura e a foto vertical fecha em 1035px de
   altura — mais que a tela inteira, para uma imagem que é prova, não âncora.
   (O herói pode ir a largura cheia porque lá a foto É a dobra.) A 390px a
   coluna já é menor que 26rem, então no celular o teto não faz nada. */
.dezoito__figura { grid-area: foto; margin: 0; max-width: 26rem; }
.dezoito__figura img { border-radius: var(--raio-g); }

@media (min-width: 1000px) {
  .dezoito__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
    grid-template-areas: "cabeca foto"
                         "corpo  foto";
    align-items: start;
  }
  .dezoito__figura { max-width: none; }
  .dezoito__figura img { box-shadow: var(--sombra-alta); }
}

/* --------------------------------------------------------------------------
   13. Tabela de preços

   Preço visível é regra do blueprint, e aqui é a 2ª das cinco perguntas. Nunca
   "sob consulta" — está na lista de anti-padrões.
   -------------------------------------------------------------------------- */
.precos { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.preco {
  background: var(--branco); border: 1px solid rgba(18, 65, 78, .12);
  border-radius: var(--raio-g); padding: 1.7rem 1.5rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.preco--destaque {
  border-color: var(--caramelo); border-width: 2px;
  box-shadow: var(--sombra); position: relative;
}
.preco__tarja {
  position: absolute; top: -.75rem; left: 1.4rem;
  background: var(--caramelo); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .28rem .8rem; border-radius: 999px;
}
.preco__nome { font-weight: 800; font-size: 1.16rem; letter-spacing: -.018em; }
.preco__valor { font-size: 2.65rem; line-height: 1.02; color: var(--caramelo-txt); }
.preco__cifra { font-size: .42em; vertical-align: .5em; margin-right: .12em; }
.preco__unid  { font-size: .95rem; font-weight: 700; color: var(--tinta-med); }
.preco__lista { list-style: none; margin: .7rem 0 0; padding: 0;
                display: grid; gap: .42rem; font-size: .93rem; }
.preco__lista li { display: flex; gap: .55rem; align-items: flex-start; }
.preco__lista li::before {
  content: ''; flex: none; width: 17px; height: 17px; margin-top: .17em;
  background: var(--verde-vivo); border-radius: 50%;
  /* O "confere" desenhado por clip-path, sem SVG e sem webfont de ícone. */
  clip-path: polygon(14% 47%, 0 61%, 38% 100%, 100% 26%, 86% 12%, 38% 72%);
}

/* --------------------------------------------------------------------------
   14. Passos — a seção onde o mascote trabalha

   Ele é anfitrião, não enfeite: a loja não tem atendente, e o mural pintado na
   parede já usa o personagem exatamente assim, com balão de fala. O site
   continua a linguagem que o ponto físico já fala.

   As poses são recortes e espelhamentos de UMA arte só (é o que veio no
   material da rede). Está registrado no LEIA-ME para ninguém procurar as
   ilustrações originais que não existem.
   -------------------------------------------------------------------------- */
.passos { display: grid; gap: 1.2rem; counter-reset: passo;
          grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.passo {
  background: var(--branco); border-radius: var(--raio-g); padding: 1.5rem;
  border: 1px solid rgba(18, 65, 78, .1);
  display: flex; flex-direction: column; gap: .5rem; position: relative;
}
.passo::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; top: -.85rem; left: 1.4rem;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--petroleo); color: var(--palha);
  font-weight: 800; font-size: 1.05rem;
}
.passo__titulo { margin: .55rem 0 0; }
.passo p { font-size: .95rem; color: var(--tinta-med); }

/* O balão de fala do mascote. O rabicho é um triângulo em ::after, para não
   custar uma imagem. */
.fala {
  display: grid; grid-template-columns: 62px 1fr; gap: .8rem; align-items: center;
  margin-top: 1.6rem;
}
.fala__mascote { width: 62px; height: auto; }
.fala__balao {
  position: relative; background: var(--palha); color: var(--petroleo);
  padding: .8rem 1.1rem; border-radius: var(--raio);
  font-weight: 700; font-size: .96rem; line-height: 1.4;
}
.fala__balao::after {
  content: ''; position: absolute; left: -9px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-right-color: var(--palha); border-left: 0;
}

/* --------------------------------------------------------------------------
   15. Pacotes do clube de créditos

   A ÚNICA seção da página com objetivo de lead. Todo o resto existe para o
   visitante resolver sozinho e ir — que é o que o cliente de autosserviço quer.
   -------------------------------------------------------------------------- */
.pacotes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.pacote {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-g); padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.pacote--ouro { border-color: var(--palha); background: rgba(242, 180, 65, .1); }
.pacote__nome { font-weight: 800; font-size: 1.1rem; color: #fff; letter-spacing: -.015em; }
.pacote__valor { font-size: 2.1rem; line-height: 1.05; color: var(--palha); }
.pacote__cifra { font-size: .45em; vertical-align: .5em; margin-right: .1em; }
.pacote__creditos { font-size: .95rem; color: #B9D2D0; }
.pacote__unitario { font-size: .84rem; color: #8FB0B0; margin-top: auto; padding-top: .7rem; }

/* --------------------------------------------------------------------------
   16. Galeria do ambiente

   Cinco fotos verticais numa grade que não corta nenhuma. As fotos da unidade
   são todas 900x1200 depois do `preparar-assets.py`, ou seja 3:4 — então a
   célula também é 3:4, e o `object-fit: cover` está aqui por seguro, não
   porque haja crop a fazer. Se entrar foto horizontal na grade um dia, ela
   passa a ser cortada pelo centro; a alternativa (`contain`) deixaria faixa
   vazia dentro da célula, que é pior.

   O destaque ocupa 2 colunas. No desktop ele também ocupa 2 linhas e larga o
   `aspect-ratio`, porque quem passa a definir a altura dele são as quatro
   células 1x1 que dividem as mesmas linhas: 2 x (c x 4/3) + gap. Contra a foto
   original isso dá 0,754 no lugar de 0,75 — meio por cento de corte.

   São 2 colunas até 719px e 4 de 720px em diante — nunca 3. Com 3 colunas o
   destaque de 2x2 deixa uma célula órfã, e a grade fecha com um buraco no
   canto.
   -------------------------------------------------------------------------- */
.galeria {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.galeria__item { margin: 0; aspect-ratio: 3 / 4; }

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--raio);
}

.galeria__item--destaque { grid-column: span 2; }
.galeria__item--destaque img { border-radius: var(--raio-g); }

@media (min-width: 720px) {
  .galeria { gap: .9rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galeria__item--destaque { grid-row: span 2; aspect-ratio: auto; }
}

/* --------------------------------------------------------------------------
   17. FAQ

   <details> nativo: sem JS, funciona com teclado e leitor de tela de graça, e
   o conteúdo está no HTML para o Google e para o schema FAQPage.
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; max-width: 50rem; }

.faq details {
  background: var(--branco); border: 1px solid rgba(18, 65, 78, .12);
  border-radius: var(--raio); overflow: hidden;
}
.faq summary {
  padding: 1.05rem 3rem 1.05rem 1.25rem; cursor: pointer; position: relative;
  font-weight: 700; font-size: 1.02rem; line-height: 1.4; letter-spacing: -.012em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 1.25rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--verde-txt); border-bottom: 2.5px solid var(--verde-txt);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details[open] summary { color: var(--petroleo); }
.faq__corpo { padding: 0 1.25rem 1.2rem; font-size: .97rem; color: var(--tinta-med); }

/* --------------------------------------------------------------------------
   18. Mapa e endereço
   -------------------------------------------------------------------------- */
.mapa {
  border: 0; width: 100%; aspect-ratio: 16 / 11; border-radius: var(--raio-g);
  box-shadow: var(--sombra); background: var(--salvia);
}
@media (min-width: 760px) { .mapa { aspect-ratio: 16 / 9; } }

.nap { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.nap li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; }
.nap__ico { width: 22px; height: 22px; color: var(--verde-txt); margin-top: .15em; }
.nap b { display: block; }

/* --------------------------------------------------------------------------
   19. Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--petroleo-esc); color: #A9C4C4; padding: 3rem 0 2.2rem;
          font-size: .93rem; }
.rodape__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rodape h3 { color: #fff; font-size: .82rem; text-transform: uppercase;
             letter-spacing: .08em; margin-bottom: .8rem; }
.rodape a { color: #CFE0DE; }
/* ALVO DE TOQUE nos links de texto do rodapé e do NAP.

   Uma auditoria do DOM pegou quatro links abaixo de 44px de altura: o telefone,
   o WhatsApp, o Instagram e a política. São links de TEXTO, não botões, e por
   isso escaparam do min-height de 52px do .btn — mas o telefone e o WhatsApp
   são contato primário desta página, e ela é tocada com o polegar, de pé, com
   um cesto embaixo do braço.

   `inline-block` com padding vertical em vez de min-height: em elemento inline
   o min-height é ignorado, e a altura continuaria a da linha de texto. Só no
   mobile — no desktop o cursor é preciso e o padding abriria buraco no bloco. */
@media (max-width: 719px) {
  .rodape a, .nap a {
    display: inline-block;
    /* .78rem, não um valor redondo: a linha de texto mede 20,2px, e
       (44 - 20,2) / 2 = 11,9px = .745rem é o mínimo. .62rem entregava 40px —
       medido, não estimado. Fica .78rem para ter folga de 1px. */
    padding-block: .78rem;
    line-height: 1.35;
  }
}

.rodape__legal { margin-top: 2.4rem; padding-top: 1.4rem;
                 border-top: 1px solid rgba(255, 255, 255, .12);
                 font-size: .82rem; color: #7E9C9C; }

/* --------------------------------------------------------------------------
   20. Barra fixa do mobile

   Os dois CTAs que resolvem 90% das visitas, sempre à mão. A ordem é trocada
   pelo modo pré-inauguração — ver a nota em §5.
   -------------------------------------------------------------------------- */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: .55rem; padding: .6rem var(--gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(18, 65, 78, .13);
}
.barra-fixa .btn { flex: 1; min-height: 48px; padding: .6rem .8rem; font-size: .95rem; }
@media (min-width: 720px) { .barra-fixa { display: none; } }

/* --------------------------------------------------------------------------
   21. Modo pré-inauguração

   Um estado, não uma segunda página. O JS põe `modo-pre` no <body> a partir de
   uma constante única; tirar a constante devolve a página ao estado normal sem
   editar HTML.

     .so-pre     aparece só antes de abrir  (contagem, "quero ser fundador")
     .so-aberto  aparece só depois de abrir (pílula de status, rota como 1º CTA)
   -------------------------------------------------------------------------- */
/* Só esconde, nunca restaura. `display: revert` devolvia o valor do
   user-agent — `inline` num <a> —, jogando fora o `inline-flex` do .btn e
   quebrando o alinhamento do ícone dentro do botão. */
body:not(.modo-pre) .so-pre { display: none !important; }
body.modo-pre .so-aberto { display: none !important; }

.faixa-pre {
  background: var(--caramelo); color: #fff; text-align: center;
  padding: .7rem var(--gutter); font-weight: 700; font-size: .95rem; line-height: 1.35;
}
.faixa-pre b { color: var(--petroleo); }

/* --------------------------------------------------------------------------
   22. PENDENTE — dado que o cliente ainda não confirmou

   Deliberadamente feio. "Placeholder de template esquecido no ar" é um
   anti-padrão registrado do blueprint, e a defesa aqui é dupla:

     1. visual  — este estilo é impossível de não ver numa revisão;
     2. deploy  — o publicar.ps1 aborta se a string PENDENTE chegar ao staging.

   A trava do deploy é a que vale. Esta regra é só para o revisor humano.
   -------------------------------------------------------------------------- */
.pendente {
  background: repeating-linear-gradient(45deg, #FF00A8 0 8px, #1A1A1A 8px 16px);
  color: #fff; font-weight: 800; font-size: .85em;
  padding: .1em .45em; border-radius: 4px;
  text-shadow: 0 1px 2px #000;
  /* SEM `white-space: nowrap`. Tinha, e custou 321px de estouro horizontal a
     390px de viewport: as frases de pendência são longas e empurravam o body
     inteiro. Pior que o estouro em si é o que ele esconde — com a página
     rolando de lado, qualquer overflow REAL some no meio do ruído. */
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   23. Utilitários
   -------------------------------------------------------------------------- */
.centro { text-align: center; }
.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;
}