/* Modelo KRIA — segurança eletrônica · "O nome como monumento" (estilo autoral taste, movimento cinematográfico)
   Escrito para 360 px e ampliado em 560, 900 e 1100 px. O nome da empresa é a placa presa no muro de cada imóvel
   protegido: de ponta a ponta, embaixo da foto das câmeras com a hora correndo no canto. Depois do topo, a página
   fica pequena e calma. Um fundo azul da noite corre a página inteira; o amarelo das placas de advertência faz todo o
   resto (nome, títulos, texto e o botão cheio). Uma família só, Chivo: preta 900 em caixa alta no que é grande, 400
   e 700 no texto. Cantos retos. As fotos em preto e branco, como a visão noturna da câmera.
   O recurso vivo é o "Monte seu sistema": a planta do imóvel, em que cada parte tocada vira uma zona.
   As cores mudam pelo "cores" do site.json. */

/* Fonte servida pelo próprio site (Chivo variável 400 a 900, subconjunto latino do Google Fonts, licença SIL OFL) */
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/chivo.woff2') format('woff2'); }

:root {
  --c-fundo: #121A2E;
  --c-superficie: #1A2541;
  --c-superficie-2: #22304F;
  --c-tinta: #F4CD3D;
  --c-suave: #B9AE84;          /* 7:1 no fundo, 6:1 na superfície */
  --c-destaque: #F4CD3D;
  --c-destaque-tinta: #121A2E;

  --f: 'Chivo', 'Arial Narrow', Arial, sans-serif;

  /* cinco tamanhos: o pequeno, o do texto, o das seções, o grande e o do nome (que se ajusta ao comprimento) */
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-head: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --step-display: clamp(2.375rem, 1.5rem + 4vw, 5.25rem);
  /* largura média de uma letra em caixa alta na Chivo preta com -0.05em, em em */
  --k: 0.64;

  --topo: 64px;
  --margem: clamp(16px, 2.2vw, 32px);
  --secao: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  accent-color: var(--c-tinta);
  caret-color: var(--c-tinta);
  scrollbar-color: var(--c-suave) var(--c-fundo);
  background: var(--c-fundo);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--step-body)/1.5 var(--f);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label, select, input { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 700; color: inherit; }
p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--c-tinta); color: var(--c-fundo); }

/* Foco em anel duplo: amarelo com uma volta azul, visível no fundo, nas fotos e nos blocos amarelos */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: o anel duplo do foco é regra da casa */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para o leitor de tela */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--c-tinta); color: var(--c-fundo); font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* Fotos: preto e branco, como a imagem da câmera à noite (o site do cliente pode pedir as fotos coloridas) */
.foto { filter: grayscale(1) contrast(1.08) brightness(0.94); }
.fotos-coloridas .foto, .fotos-coloridas .onde__mapa iframe { filter: none; }

/* botões: cheios em amarelo, cantos retos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 0;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  font: 700 var(--step-body)/1.2 var(--f); letter-spacing: -0.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--pequeno { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
.btn--largo { width: 100%; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 200ms ease;
}

/* títulos: o das seções é modesto de propósito; o grande é para o que a seção afirma */
.titulo-pequeno, .titulo-medio { font: 900 var(--step-head)/0.98 var(--f); letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }
.titulo-grande { font: 900 var(--step-display)/0.95 var(--f); letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }

.secao { padding: var(--secao) var(--margem); }

/* ---------- faixa do modelo de demonstração ---------- */
body:has(> .faixa-demo) { --faixa: 52px; }
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 4px var(--margem);
  background: var(--c-tinta); color: var(--c-fundo);
  font-size: var(--step-small); line-height: 1.4;
}
.faixa-demo span { padding-block: 8px; }
.faixa-demo a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.faixa-demo :focus-visible { outline-color: var(--c-fundo); box-shadow: 0 0 0 3px var(--c-tinta); } /* taste-skill-ignore: anel duplo do foco */

/* ---------- topo: uma barra simples ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 8px; height: var(--topo); padding-inline: var(--margem); }
/* o nome pequeno só aparece quando o nome grande do início sai da tela (o nome é a marca) */
.marca {
  display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none;
  opacity: 0; transition: opacity 300ms var(--ease-out);
}
.topo--nome .marca, .marca:focus-visible, html:not(.js) .marca, .menu-aberto .marca { opacity: 1; }
.marca img { height: 36px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font: 900 var(--step-body)/1 var(--f); letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font-size: var(--step-body); font-weight: 700; line-height: 1;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.menu-btn__fechar, .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }

/* Sem JavaScript: os links viram uma linha logo abaixo do nome, num topo que não flutua */
html:not(.js) .topo { position: relative; }
html:not(.js) .topo__barra { flex-wrap: wrap; height: auto; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia, links grandes em caixa alta */
@media (max-width: 1099px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 16px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-fundo);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 260ms var(--ease-out), visibility 0s 260ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
  .js .menu li a { display: flex; align-items: center; min-height: 64px; font: 900 var(--step-display)/1 var(--f); letter-spacing: -0.045em; text-transform: uppercase; }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(14px); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acoes { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu__acoes { transition-delay: 200ms; }
  .menu__acoes { margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; }
  .js .marca, .js .topo__cta, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- início: a foto, a frase e o botão, e o nome de ponta a ponta ---------- */
.inicio {
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--topo) - var(--faixa, 0px));
  container-type: inline-size;
}
.inicio__quadro { position: relative; flex: 1 1 auto; min-height: 34svh; overflow: hidden; background: var(--c-superficie); }
.inicio__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
/* a hora da câmera, no canto, sobre um bloco do fundo */
.osd {
  position: absolute; left: var(--margem); top: 14px;
  display: flex; flex-wrap: wrap; gap: 0 12px; padding: 6px 10px;
  background: var(--c-fundo); color: var(--c-tinta);
  font: 700 var(--step-small)/1.3 var(--f); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.osd span:empty { display: none; }
/* No celular e no tablet: a frase, o nome e, embaixo do nome, os botões (nada pequeno fica em cima do nome) */
.inicio__faixa { display: contents; }
.inicio__titulo { order: 1; max-width: 34ch; margin: 20px var(--margem) 0; font: 700 var(--step-body)/1.35 var(--f); letter-spacing: -0.015em; text-wrap: balance; }
.inicio__acoes { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 4px var(--margem) 20px; }
.inicio--sem-foto .inicio__titulo { margin-top: auto; padding-top: clamp(48px, 10vh, 120px); }

/* O nome: a largura útil dividida pelo número de letras da linha mais larga. No celular, uma palavra por linha. */
.monumento {
  --tam: min(calc((100cqw - 2 * var(--margem)) / (var(--letras-cel) * var(--k))), 30cqw);
  margin: 0; padding-inline: var(--margem);
  font: 900 var(--tam)/0.86 var(--f); letter-spacing: -0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.monumento__linha, .monumento__palavra { display: block; }
/* as linhas do celular (a palavra mais larga manda) só aparecem abaixo de 900 px */
.monumento__cel { display: none; }
.inicio__nome { order: 2; margin-top: 18px; padding-bottom: 14px; transform-origin: 0 100%; }

/* ---------- O que instalamos ---------- */
.servicos { padding-block: clamp(88px, 16vh, 200px); }
/* a frase de abertura (o subtítulo): um parágrafo, nunca maior que 24 px no celular e 36 px no computador */
.abertura { max-width: 46ch; font: 700 var(--step-head)/1.2 var(--f); letter-spacing: -0.025em; text-wrap: pretty; }
.servicos__titulo { margin-top: clamp(72px, 10vw, 120px); }
.servicos__grade { display: grid; gap: 40px; margin-top: 48px; }
.grupo { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.grupo__nome { font: 700 var(--step-body)/1.25 var(--f); letter-spacing: -0.01em; }
.grupo__itens { display: grid; gap: 4px; padding: 0; list-style: none; color: var(--c-suave); line-height: 1.4; }
.grupo__itens li { transition: color 180ms ease; }
.grupo__itens li.e-ativo { color: var(--c-tinta); }
.grupo__resumo { max-width: 34ch; color: var(--c-suave); }
/* o link com seta pode quebrar em duas linhas: a seta segue a última palavra */
.grupo__orcar { display: inline-block; padding-block: 10px; line-height: 1.5; }
.servicos__painel { display: none; }

/* ---------- Do portão à central: a faixa de fotos ---------- */
.galeria { padding-top: var(--secao); }
.galeria__titulo { padding-inline: var(--margem); margin-bottom: 32px; }
.galeria__faixa { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
/* no celular, um bloco dois por dois sem espaço: 64/36 em cima, 36/64 embaixo */
.galeria__painel { position: relative; height: 42svh; min-height: 220px; overflow: hidden; background: var(--c-superficie); }
.galeria__painel:nth-child(4n+1), .galeria__painel:nth-child(4n) { width: 64%; }
.galeria__painel:nth-child(4n+2), .galeria__painel:nth-child(4n+3) { width: 36%; }
.galeria__painel:last-child:nth-child(odd) { width: 100%; }
.galeria__painel img { width: 100%; height: 100%; object-fit: cover; }
.galeria__destaque {
  position: absolute; left: 12px; top: 12px; z-index: 2; max-width: 15ch;
  padding: 6px 10px; background: var(--c-fundo);
  font: 900 var(--step-head)/1 var(--f); letter-spacing: -0.035em; text-transform: uppercase;
}
.galeria__legenda { max-width: 62ch; padding: 16px var(--margem) 0; color: var(--c-suave); }

/* ---------- Monte seu sistema ---------- */
.sistema__cabeca { display: grid; gap: 20px; }
.sistema__texto { max-width: 52ch; }
.sistema__grade { display: grid; gap: 40px; margin-top: 40px; }
.sistema__escolhas { display: grid; gap: 28px; align-content: start; min-width: 0; }
.campo { display: grid; gap: 10px; align-content: start; min-width: 0; }
.campo > span, .campo legend, .planta__legenda { font-weight: 700; }
.campo legend { margin-bottom: 10px; }
.campo input[type="text"] {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--c-suave); border-radius: 0;
  background: var(--c-superficie);
  font-size: 1.0625rem; line-height: 1.4;
}
.campo input[type="text"]:focus-visible { border-color: var(--c-tinta); }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcao { position: relative; display: inline-flex; cursor: pointer; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--c-superficie); color: var(--c-tinta);
  font-size: var(--step-small); font-weight: 700;
  transition: background-color 180ms ease, color 180ms ease;
}
.opcao input:checked + span { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.opcao input:focus-visible + span { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: anel duplo do foco */

/* a planta: o lote visto de cima, em blocos da cor do fundo; a casa um tom acima; a parte tocada fica amarela */
.planta { min-width: 0; }
.planta__legenda { display: block; margin-bottom: 12px; }
.planta__lote {
  display: grid; gap: 6px;
  grid-template-columns: 1fr 1fr 0.72fr;
  grid-template-rows: 1fr 1.45fr 1.15fr 0.8fr auto;
  grid-template-areas:
    "fundos fundos fundos"
    "interna interna lateral"
    "garagem entrada lateral"
    "frente frente frente"
    "rua rua rua";
  aspect-ratio: 5 / 6;
}
.zona {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  min-width: 0; min-height: 64px; padding: 10px 12px; overflow: hidden;
  background: var(--c-superficie); cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.zona--fundos { grid-area: fundos; }
.zona--interna { grid-area: interna; background: var(--c-superficie-2); }
.zona--lateral { grid-area: lateral; }
.zona--garagem { grid-area: garagem; }
.zona--entrada { grid-area: entrada; background: var(--c-superficie-2); }
.zona--frente { grid-area: frente; }
.zona input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zona__nome { font-size: var(--step-small); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.zona__numero { font: 900 var(--step-head)/1 var(--f); letter-spacing: -0.03em; text-transform: uppercase; }
.zona--marcada { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.zona:has(input:focus-visible) { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); z-index: 1; } /* taste-skill-ignore: anel duplo do foco */
/* a rua: o nome e a faixa tracejada do meio da pista */
.planta__rua { grid-area: rua; display: flex; align-items: center; gap: 12px; padding-top: 8px; color: var(--c-suave); font-size: var(--step-small); font-weight: 700; }
.planta__rua::after { content: ''; flex: 1; border-top: 4px dashed var(--c-suave); }

.sistema__envio { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sistema__resumo { min-height: 3em; font-weight: 700; }
.sistema__simples { justify-self: start; font-size: var(--step-small); }
.sistema__nota { color: var(--c-suave); font-size: var(--step-small); }

/* ---------- Como funciona o monitoramento: a escada ---------- */
.escada { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.degrau { min-width: 0; }
.degrau:nth-child(2) { padding-left: 6vw; }
.degrau:nth-child(3) { padding-left: 12vw; }
.degrau:nth-child(4) { padding-left: 18vw; }
.degrau:nth-child(n+5) { padding-left: 24vw; }
.degrau__frase { font: 900 var(--step-display)/0.98 var(--f); letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }
.degrau__texto { max-width: 34ch; margin-top: 12px; color: var(--c-suave); }

/* ---------- O plano numa frase ---------- */
.planos {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 80svh; padding: var(--secao) var(--margem);
  background: var(--c-superficie);
}
/* no celular a frase do plano usa o tamanho das seções, para caber em duas linhas */
.planos__frase { max-width: 24ch; font: 900 var(--step-head)/1.05 var(--f); letter-spacing: -0.045em; text-transform: uppercase; }
/* o preço fica num bloco amarelo da altura da linha: um objeto na frase */
.preco { position: relative; display: inline-block; padding: 0 0.15em; color: var(--c-destaque-tinta); white-space: nowrap; }
.preco__bloco { position: absolute; inset: 0; background: var(--c-destaque); transform-origin: 0 50%; }
.preco__valor { position: relative; }
.planos__base { display: grid; gap: 28px; margin-top: 48px; }
.planos__inclui { max-width: 46ch; font-size: var(--step-body); }
.planos__acoes { display: grid; gap: 8px; }
.planos__outros { display: grid; margin: 0; padding: 0; list-style: none; }
.planos__aviso { margin-top: 32px; color: var(--c-suave); font-size: var(--step-small); }

/* ---------- Assistência técnica: o título largo e a tabela empurrada para a direita ---------- */
.assistencia__grade { display: grid; gap: 32px; margin-top: 48px; }
.assistencia__lado { display: grid; gap: 28px; min-width: 0; }
.assistencia__texto { max-width: 46ch; }
.assistencia__rotulo { display: none; }
.defeitos { margin: 0; padding: 0; list-style: none; }
.defeito a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tipo acao" "nome nome"; gap: 2px 16px;
  padding-block: 12px; text-decoration: none;
}
.defeito--grupo { margin-top: 28px; }
.defeito__tipo { grid-area: tipo; color: var(--c-suave); }
.defeito__nome { grid-area: nome; font-weight: 700; }
.defeito__acao { grid-area: acao; text-align: right; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); white-space: nowrap; }
.assistencia__foto { position: relative; justify-self: end; width: 60%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-superficie); order: 2; }
.assistencia__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Onde fica: linhas grandes, em faixas de dois tons ---------- */
.linhas { margin: 0; padding: 0; list-style: none; }
.linha {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px;
  min-height: 88px; padding: 16px var(--margem) 14px;
  background: var(--c-fundo);
}
.linha:nth-child(even) { background: var(--c-superficie); }
.linha__texto { min-width: 0; font: 900 var(--step-display)/0.98 var(--f); letter-spacing: -0.045em; text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
a.linha__texto { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.linha--horario .linha__dias { display: block; }
.linha__agora { font-weight: 700; }
.linha__agora:empty { display: none; }
.linha.e-hoje .linha__agora { padding: 4px 10px; background: var(--c-destaque); color: var(--c-destaque-tinta); }
.linha.e-hoje.e-fechada .linha__agora { background: transparent; color: var(--c-suave); padding-inline: 0; }

/* Atende no meu bairro? */
.linha--bairro { display: grid; align-items: start; gap: 20px; padding-block: 28px; }
.bairro { display: grid; gap: 12px; min-width: 0; }
.bairro__rotulo { font-weight: 700; }
.bairro__linha { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.bairro__campo {
  flex: 1; width: 0; min-width: 0; padding: 4px 0 6px;
  border: 0; border-bottom: 3px solid var(--c-suave); border-radius: 0; background: transparent;
  font: 900 var(--step-display)/1 var(--f); letter-spacing: -0.045em; text-transform: uppercase;
}
.bairro__campo::placeholder { color: var(--c-suave); opacity: 0.55; }
.bairro__campo:focus-visible { border-bottom-color: var(--c-tinta); }
.bairro__ir {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: var(--c-destaque); color: var(--c-destaque-tinta); cursor: pointer;
}
.bairro__ir svg { width: 26px; height: 26px; }
.bairro__veredito { font: 700 var(--step-head)/1.15 var(--f); letter-spacing: -0.02em; }
.bairro__veredito:empty { display: none; }
.bairro__botao { justify-self: start; }
.bairro__botao[hidden] { display: none; }
.bairro__todos { display: grid; gap: 6px; color: var(--c-suave); }
.bairro__todos ul { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.bairro__todos li:not(:last-child)::after { content: ',\00a0'; }
.bairro__todos li.area__achado { color: var(--c-tinta); font-weight: 700; }

.onde__base { display: grid; gap: 16px; padding: 0 var(--margem) var(--secao); }
.onde__mapa { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-superficie); }
.onde__mapa iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.onde__mapa--reservado { display: grid; place-items: center; padding: 24px; color: var(--c-suave); text-align: center; }
.onde__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; }
.onde__rotas { display: flex; flex-wrap: wrap; column-gap: 24px; }

/* ---------- Dúvidas: perguntas grandes, respostas ao lado, todas abertas ---------- */
.duvidas { display: grid; gap: 56px; }
.duvidas__linha { display: grid; gap: 12px; }
.duvidas__titulo, .duvidas__pergunta { font: 700 var(--step-head)/1.12 var(--f); letter-spacing: -0.025em; text-wrap: balance; }
.duvidas__titulo { color: var(--c-suave); }
.duvidas__resposta { max-width: 42ch; line-height: 1.55; }

/* ---------- Chamar: a faixa inteira é o botão ---------- */
.chamar {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 46svh; padding: 20px var(--margem) 18px;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  text-decoration: none; container-type: inline-size; overflow: hidden;
}
.chamar__frase { max-width: 20ch; padding-right: 48px; font-weight: 700; }
.chamar__seta { position: absolute; right: var(--margem); top: 20px; width: 32px; height: 32px; }
.chamar__palavra {
  --tam: calc((100cqw - 2 * var(--margem)) / (var(--letras-fim, 6) * var(--k)));
  font: 900 var(--tam)/0.8 var(--f); letter-spacing: -0.05em; text-transform: uppercase; white-space: nowrap;
}
.chamar:focus-visible { background: var(--c-fundo); color: var(--c-tinta); }
.chamar:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: -10px; box-shadow: none; } /* taste-skill-ignore */

/* ---------- rodapé: o nome primeiro ---------- */
/* embaixo, espaço para o WhatsApp flutuante não cobrir a última linha */
.rodape { padding: 28px 0 calc(88px + env(safe-area-inset-bottom)); background: var(--c-superficie); container-type: inline-size; overflow-x: clip; }
.rodape__nome { transform-origin: 0 100%; }
.rodape__meio { display: grid; gap: 36px; margin-top: 56px; padding-inline: var(--margem); }
.rodape__contatos, .rodape__links { display: grid; margin: 0; padding: 0; list-style: none; }
.rodape__contatos a { display: inline-flex; align-items: center; min-height: 48px; font: 700 var(--step-head)/1.1 var(--f); letter-spacing: -0.025em; text-decoration: none; overflow-wrap: anywhere; }
.rodape__links { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 64px; padding-inline: var(--margem); color: var(--c-suave); font-size: var(--step-small); }
.rodape__legal > p:first-child { flex: 1 1 100%; padding-block: 8px; }
.rodape__mais[open] { flex: 1 1 100%; order: 2; }
.rodape__legal p a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__mais summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.28em; }
.rodape__privacidade { display: grid; gap: 10px; max-width: 70ch; padding-bottom: 12px; }
.rodape__privacidade a { min-height: 0; text-underline-offset: 0.2em; }
.rodape__creditos { display: grid; gap: 0; margin: 0; padding: 0 0 8px; list-style: none; }
.rodape__creditos li a { display: inline-block; padding-block: 12px; }
.rodape__creditos .credito__licenca { min-width: 44px; text-align: center; }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
html:not(.js) .flutuante { opacity: 1; visibility: visible; transform: none; }

/* ---------- página 404 ---------- */
.perdido { display: grid; gap: 24px; justify-items: start; align-content: center; min-height: calc(100svh - var(--topo) - 92px); padding: 48px var(--margem); }
.perdido__titulo { max-width: 14ch; }
.perdido__texto { max-width: 46ch; }
.perdido__rodape { padding: 24px var(--margem); color: var(--c-suave); font-size: var(--step-small); }
.perdido__rodape a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 559.98px) {
  /* no celular o topo leva o nome e o "Menu"; a ação fica nos botões do início e no WhatsApp flutuante */
  .topo__cta { display: none; }
}

/* ---------- celular e tablet em pé (até 899 px): a composição própria do celular ---------- */
@media (max-width: 899.98px) {
  /* a foto do início tem um recorte próprio no celular ("foco_celular" no site.json) */
  .inicio__foto { object-position: var(--foco-cel, var(--foco, 50% 50%)); }
  .monumento > .monumento__linha { display: none; }
  .monumento__cel { display: block; }
  /* sem foto, o início começa no alto da tela (nada de vazio empurrando o botão para baixo) */
  .inicio--sem-foto { min-height: 0; }
  .inicio--sem-foto .inicio__titulo { margin-top: 0; padding-top: 48px; }
}
/* toque: as linhas de contato que são links ganham altura de dedo */
@media (pointer: coarse) {
  a.linha__texto { display: inline-block; padding-block: 4px; }
}

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .servicos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .opcao span { padding: 0 16px; }
  .linha--horario { flex-wrap: nowrap; }
  /* o "aberto agora" no alto da própria faixa, à direita: nunca logo acima da linha seguinte */
  .linha__agora { flex: none; align-self: flex-start; max-width: 11em; text-align: right; }
  .rodape__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 900 px: a página do computador ---------- */
@media (min-width: 900px) {
  :root { --topo: 72px; }
  .inicio__quadro { min-height: 26svh; }
  .inicio__faixa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: end; padding: 22px var(--margem) 0; }
  .inicio__titulo { grid-column: 1 / span 6; margin: 0; }
  .inicio__acoes { grid-column: 8 / -1; justify-self: end; flex-direction: row-reverse; padding: 0; }
  .inicio--sem-foto .inicio__titulo { margin: 0; padding-top: 0; }
  .inicio--sem-foto .inicio__faixa { margin-top: auto; padding-top: clamp(48px, 10vh, 120px); }
  .osd { top: 18px; }
  /* no computador, o nome em linhas inteiras (até três), e nunca mais alto que metade do primeiro quadro */
  .monumento {
    --tam: min(calc((100cqw - 2 * var(--margem)) / (var(--letras) * var(--k))), 22cqw, calc((100svh - var(--topo) - var(--faixa, 0px)) * 0.47 / var(--n-linhas, 1) / 0.86));
  }
  .monumento__palavra { display: inline; }
  .inicio__nome { margin-top: 14px; padding-bottom: 20px; }

  .servicos__titulo { margin-top: 96px; }
  .servicos__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); row-gap: 64px; }
  .grupo:nth-of-type(3n+1) { grid-column: 1 / span 3; }
  .grupo:nth-of-type(3n+2) { grid-column: 4 / span 3; }
  .grupo:nth-of-type(3n) { grid-column: 7 / span 3; }
  .grupo__itens { gap: 2px; line-height: 1.3; }
  .servicos__painel { display: block; grid-column: 10 / -1; grid-row: 1; align-self: start; padding-top: 2.6em; color: var(--c-tinta); line-height: 1.4; transition: opacity 200ms ease; }
  .servicos__painel:empty { opacity: 0; }

  .galeria__titulo { padding-left: calc(var(--margem) + (100% - 2 * var(--margem)) * 2 / 12); margin-bottom: 56px; }
  .galeria__faixa { flex-wrap: nowrap; height: 68svh; min-height: 420px; }
  .galeria__painel, .galeria__painel:nth-child(n), .galeria__painel:last-child:nth-child(odd) { width: auto; height: auto; flex: var(--peso) 1 0; min-width: 0; transition: flex-grow 500ms var(--ease-out); }
  .galeria__destaque { left: 24px; top: 24px; max-width: 15ch; }

  .sistema__cabeca { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: end; }
  .sistema__cabeca h2 { grid-column: 1 / span 5; }
  .sistema__texto { grid-column: 7 / -1; }
  .sistema__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); row-gap: 40px; margin-top: 64px; align-items: start; }
  .sistema__escolhas { grid-column: 1 / span 5; grid-row: 1; }
  .sistema__envio { grid-column: 1 / span 5; grid-row: 2; }
  .planta { grid-column: 7 / -1; grid-row: 1 / span 2; position: sticky; top: calc(var(--topo) + 24px); }
  .planta__lote { aspect-ratio: 6 / 5; max-height: calc(100svh - var(--topo) - 120px); }
  .zona { padding: 14px 16px; }
  .zona__nome { font-size: var(--step-body); }

  .escada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); row-gap: 56px; }
  .degrau, .degrau:nth-child(n) { padding-left: 0; grid-column: 1 / -1; }
  .degrau:nth-child(2) { grid-column: 3 / -1; }
  .degrau:nth-child(3) { grid-column: 5 / -1; }
  .degrau:nth-child(4) { grid-column: 7 / -1; }
  .degrau:nth-child(n+5) { grid-column: 9 / -1; }

  .planos__base { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: start; margin-top: 64px; }
  .planos__frase { font-size: var(--step-display); }
  .planos__inclui { grid-column: 1 / span 6; line-height: 1.45; }
  .planos__acoes { grid-column: 9 / -1; justify-items: end; text-align: right; }

  .assistencia__titulo { max-width: 22ch; text-indent: 3vw; }
  .assistencia__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); margin-top: 96px; align-items: end; }
  .assistencia__foto { grid-column: 1 / span 4; grid-row: 1; width: auto; justify-self: stretch; order: 0; }
  .assistencia__rotulo { display: block; grid-column: 7; grid-row: 1; align-self: start; padding-top: 12px; color: var(--c-suave); font-size: var(--step-small); font-weight: 700; }
  .assistencia__lado { grid-column: 8 / -1; grid-row: 1; }
  .defeito a { grid-template-columns: 30% 1fr auto; grid-template-areas: "tipo nome acao"; align-items: baseline; padding-block: 13px; }
  .defeito--grupo { margin-top: 44px; }

  .linha { min-height: 150px; padding: 20px calc(var(--margem) + 4px) 18px; }
  .linha--horario .linha__dias { display: inline; }
  .linha--bairro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); padding-block: 40px; }
  .bairro { grid-column: 1 / span 8; }
  .bairro__todos { grid-column: 10 / -1; align-self: end; }
  .bairro__ir { width: 0.9em; height: 0.9em; min-width: 64px; min-height: 64px; font-size: var(--step-display); }
  .bairro__ir svg { width: 30px; height: 30px; }
  .onde__base { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); padding-top: 0; }
  .onde__mapa { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
  .onde__rotas { grid-column: 1 / -1; }

  .duvidas { gap: 80px; }
  .duvidas__linha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: baseline; }
  .duvidas__titulo, .duvidas__pergunta { grid-column: 1 / span 6; }
  .duvidas__resposta { grid-column: 8 / -1; }

  .chamar { min-height: 60svh; padding: 24px var(--margem) 22px; }
  .chamar__seta { width: 48px; height: 48px; top: 24px; }
  .chamar__palavra { --tam: min(calc((100cqw - 2 * var(--margem)) / (var(--letras-fim, 6) * var(--k))), 30cqw); }

  .rodape__meio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); margin-top: 72px; }
  .rodape__contatos { grid-column: 1 / span 5; }
  .rodape__links { grid-column: 7 / -1; align-content: start; }
  .rodape__legal { margin-top: 96px; }
  .rodape__legal > p:first-child { flex: 1 1 auto; }
}

/* ---------- 1100 px: menu em linha ---------- */
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; margin-right: 20px; }
  .menu ul { display: flex; gap: 4px 28px; }
  .menu li a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    font-size: var(--step-small); font-weight: 700;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.35em;
    transition: text-decoration-color 200ms ease;
  }
  .menu__acoes, .menu-btn { display: none; }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in srgb, var(--c-destaque) 84%, #FFFFFF); }
  .link:hover, .menu li a:hover, .defeito a:hover .defeito__acao { text-decoration-color: currentColor; }
  .menu-btn:hover { text-decoration-thickness: 3px; }
  .grupo__itens li:hover { color: var(--c-tinta); }
  .galeria__painel:hover { flex-grow: 6; }
  .opcao:hover input:not(:checked) + span, .zona:not(.zona--marcada):hover { background: var(--c-superficie-2); }
  .zona--interna:not(.zona--marcada):hover, .zona--entrada:not(.zona--marcada):hover { background: color-mix(in srgb, var(--c-superficie-2) 80%, var(--c-tinta)); }
  .defeito a:hover .defeito__nome { color: var(--c-tinta); }
  a.linha__texto:hover { text-decoration-color: currentColor; }
  .bairro__ir:hover { background: color-mix(in srgb, var(--c-destaque) 84%, #FFFFFF); }
  .rodape__contatos a:hover, .rodape__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .chamar:hover { background: var(--c-fundo); color: var(--c-tinta); }
  .chamar:hover .chamar__seta { transform: translate(4px, -4px); }
  .chamar__seta { transition: transform 300ms var(--ease-out); }
}

/* ---------- movimento (só com a classe .movimento, que respeita "reduzir movimento") ----------
   A foto do início assenta devagar (aparece já no primeiro quadro), o nome e a frase só deslizam: nada do topo
   começa escondido. O resto é feito pelo GSAP no main.js, com opacidade e deslocamento (o conteúdo nunca sai da
   ordem do Tab). */
.movimento .inicio__foto { animation: assentar 1800ms var(--ease-out) backwards; }
.movimento .inicio__nome .monumento__linha { animation: deslizar 1100ms var(--ease-out) 80ms backwards; }
.movimento .inicio__nome .monumento__linha + .monumento__linha { animation-delay: 160ms; }
.movimento .inicio__titulo { animation: deslizar-curto 900ms var(--ease-out) 200ms backwards; }
.movimento .inicio__acoes, .movimento .osd { animation: subir 900ms var(--ease-out) 320ms backwards; }
.movimento .inicio__acoes:focus-within { animation: none; }
@keyframes assentar { from { transform: scale(1.06); } }
@keyframes deslizar { from { transform: translateY(0.14em); } }
@keyframes deslizar-curto { from { transform: translateY(10px); } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }

/* palavras divididas pelo main.js: cada uma sobe de dentro de uma máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.palavra__in { display: inline-block; }
/* o recuo da primeira linha do título não vale para cada palavra dividida */
.palavra, .palavra__in { text-indent: 0; }
/* a porta de enrolar: uma folha da cor do fundo cobre a foto e sobe (só com o GSAP rodando) */
.porta { position: absolute; inset: 0; z-index: 1; background: var(--c-fundo); transform-origin: 50% 0; pointer-events: none; }

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