/* Modelo KRIA — pintura (pintor de paredes, fachadas, textura). Direção "A frase é o layout" (skill site-master,
   estilo autoral taste, seed 1396614683): o título é partido ao meio por uma moldura de fotos e a página é uma
   cartela de cores, com cada serviço numa faixa pintada de ponta a ponta. Escrito para 360 px e ampliado depois.
   Cores trocáveis pelo site.json do cliente (cores.*): fundo, superficie, texto, suave, destaque, destaque_tinta,
   escuro, escuro_tinta. As cores das faixas vêm de servicos[].cor (preparar.mjs). */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-bold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }

:root {
  --c-fundo: #EEF0F3;          /* cinza frio da parede pronta */
  --c-superficie: #E2E5EA;     /* um tom abaixo: o orçamento e o que abre */
  --c-tinta: #0B0C0E;          /* quase preto: texto e títulos */
  --c-suave: #5D6470;          /* texto secundário (5,2:1 no fundo) */
  --c-destaque: #1F2DE6;       /* azul cobalto: a ação */
  --c-destaque-forte: #1520B5;
  --c-destaque-tinta: #FFFFFF;
  --c-escuro: #0B0C0E;         /* a chamada final e o rodapé, com as cores invertidas */
  --c-escuro-tinta: #EEF0F3;
  --c-aberto: #12804A;

  --f-titulo: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* cinco degraus de letra */
  --t-pequeno: 1rem;
  --t-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-frase: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
  --t-titulo: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --t-cartaz: clamp(3.5rem, 0.6rem + 11.5vw, 10.5rem);

  --margem: clamp(16px, 2.4vw, 32px);
  --topo: 64px;
  --faixa: 0px;
  --raio: 4px;
  --secao: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 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) + 8px);
  /* 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-destaque);
  caret-color: var(--c-destaque);
  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(--t-corpo)/1.55 var(--f-texto);
  -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, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, select, input { font: inherit; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--c-destaque); color: var(--c-destaque-tinta); }

/* Foco em anel duplo, visível no fundo claro, nas faixas de cor e no fundo escuro */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); border-radius: 2px; } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.fim :focus-visible, .rodape :focus-visible, .faixa-demo :focus-visible, .painel :focus-visible { outline-color: var(--c-escuro-tinta); box-shadow: 0 0 0 3px var(--c-escuro); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.campo :focus-visible { outline-color: var(--campo-tinta); box-shadow: 0 0 0 3px var(--campo); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore: tira o anel do ponto de partida do Tab */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para leitor de tela, não é linha */
  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);
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* botões: cheios, de canto quase reto (o mesmo raio da moldura e dos campos) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--raio);
  font: 500 var(--t-corpo)/1.2 var(--f-texto); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--destaque { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.btn--contorno { background: var(--c-tinta); color: var(--c-fundo); }
.btn--pequeno { min-height: 44px; padding: 0 16px; }
.btn--largo { width: 100%; }
.btn--grande { min-height: 56px; padding: 0 28px; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
}

/* títulos que se dividem em palavras para entrar em cascata (main.js); sem o script ficam inteiros */
.palavra { display: inline-block; text-indent: 0; }

/* ---------- 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;
  min-height: 52px; padding: 4px var(--margem);
  background: var(--c-escuro); color: var(--c-escuro-tinta);
  font-size: 1rem; 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: 500; text-underline-offset: 4px; }

/* ---------- topo: o nome, os links e uma ação, numa barra simples ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 12px; height: var(--topo); padding-inline: var(--margem); }
.marca { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none; }
.marca img { height: 40px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font: 700 var(--t-frase)/1 var(--f-titulo); letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; display: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font-weight: 500; line-height: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
}
.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; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia */
@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)) + 24px) 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: 56px; font: 700 var(--t-titulo)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: -0.01em; }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(16px); 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: o título partido ao meio, com a moldura das fotos entre as metades ---------- */
/* overflow-x: clip segura as metades enquanto deslizam da borda (sem rolagem lateral no primeiro segundo) */
.inicio { padding: 20px var(--margem) clamp(40px, 8vw, 64px); overflow-x: clip; }
.inicio__palco { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; row-gap: 14px; }
.inicio__titulo {
  grid-row: 1 / 4; grid-column: 1;
  display: grid; grid-template-rows: subgrid; row-gap: 14px;
  font: 700 min(15vw, calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.43)))/0.92 var(--f-titulo);
  letter-spacing: -0.015em; text-transform: uppercase;
}
.inicio__metade { display: block; white-space: nowrap; }
.inicio__linha { display: inline; }
.inicio__metade--1 { grid-row: 1; }
.inicio__metade--2 { grid-row: 3; justify-self: end; text-align: right; }
.inicio__moldura { grid-row: 2; grid-column: 1; position: relative; height: calc((100vw - 2 * var(--margem)) * 0.75 + 40px); overflow: hidden; }
.inicio__fita { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.inicio__quadro { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--c-superficie); }
.inicio__quadro img { width: 100%; height: 100%; object-fit: cover; }
.inicio__base { grid-row: 4; display: grid; gap: 14px; justify-items: start; padding-top: 10px; }
.inicio__sub { max-width: 40ch; font-size: var(--t-corpo); }
.inicio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.inicio--sem-foto .inicio__titulo { grid-row: 1 / 4; }
.selo { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-weight: 500; }
.selo__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--c-aberto); }
.selo--fechado .selo__ponto { background: var(--c-suave); }

/* ---------- serviços: as faixas da cartela ---------- */
.campo {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-rows: auto 1fr; gap: 32px;
  min-height: 64svh; padding: 28px var(--margem);
  background: var(--campo); color: var(--campo-tinta);
}
.campo__texto { max-width: min(80%, 34ch); display: grid; gap: 12px; justify-items: start; font-size: var(--t-corpo); line-height: 1.5; }
.campo__preco { font-weight: 500; }
.campo__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
.campo__nome {
  align-self: end;
  font: 700 var(--t-cartaz)/0.9 var(--f-titulo); letter-spacing: -0.02em; text-transform: uppercase;
  overflow-wrap: anywhere; text-wrap: balance;
}
.campo--espelhado .campo__texto { justify-self: end; }
/* a demão: com movimento, a faixa começa na cor da página e a tinta passa como um rolo, por baixo do texto (main.js) */
.campo--a-pintar { background: var(--c-fundo); }
.campo__tinta { position: absolute; inset: 0; z-index: -1; background: var(--campo); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- obras: os nomes numa frase; a obra escolhida abre embaixo ---------- */
.obras { padding: var(--secao) var(--margem) 0; }
.obras__frase {
  max-width: 62rem;
  font: 700 var(--t-frase)/1.25 var(--f-titulo); letter-spacing: -0.005em;
  color: var(--c-suave);
}
.obras__abre { color: var(--c-tinta); }
.obra-nome {
  color: var(--c-suave); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.2em; min-height: 44px; vertical-align: baseline;
  transition: color 200ms ease;
}
.obra-nome.e-atual { color: var(--c-tinta); }
.obra-nome.e-atual { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
.obra-nome__quadro {
  display: inline-block; width: 1.4em; height: 0.92em; overflow: hidden; border-radius: 3px;
  background: var(--c-superficie); transform-origin: 0 50%;
  transition: transform 320ms var(--ease-out);
}
.obra-nome__quadro img { width: 100%; height: 100%; object-fit: cover; }
.obras__dica { margin-top: 14px; color: var(--c-suave); }
.obras__palco { margin-top: clamp(32px, 5vw, 72px); }
.obra { display: grid; gap: 18px; }
.js .obra:not(.e-atual) { display: none; }
html:not(.js) .obra + .obra { margin-top: 56px; }
.obra__legenda { display: grid; gap: 8px; align-content: start; }
.obra__nome { font: 700 var(--t-frase)/1.1 var(--f-titulo); text-transform: uppercase; }
.obra__info { font-weight: 500; }
.obra__nota { max-width: 44ch; color: var(--c-suave); }
.obra__foto { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--raio); background: var(--c-superficie); }
.obra__foto img { width: 100%; height: 100%; object-fit: cover; }
.js .obra.e-atual { animation: obra-entra 520ms var(--ease-out); }
@keyframes obra-entra { from { opacity: 0; transform: translateY(14px); } }

/* comparador: o antes à esquerda, o depois à direita; o controle é um range acessível por cima de tudo */
.comparador {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--raio);
  background: var(--c-superficie); user-select: none;
}
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparador__depois img { clip-path: inset(0 0 0 var(--corte)); }
.comparador__linha { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 4px; margin-left: -2px; background: var(--c-fundo); pointer-events: none; }
.comparador__linha::after {
  content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--raio);
  background: var(--c-fundo); color: var(--c-tinta); font: 700 1.375rem/1 var(--f-titulo); letter-spacing: 0.1em;
}
.comparador__rotulo { position: absolute; top: 12px; padding: 4px 10px; border-radius: var(--raio); background: var(--c-fundo); font-weight: 500; pointer-events: none; }
.comparador__rotulo--antes { left: 12px; }
.comparador__rotulo--depois { right: 12px; }
.comparador__controle {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.comparador:has(.comparador__controle:focus-visible) { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); } /* taste-skill-ignore: anel de foco do comparador */

/* ---------- como é o serviço: um verbo por tela ---------- */
.etapas { margin-top: var(--secao); }
.painel { position: relative; height: 100svh; min-height: 520px; overflow: clip; background: var(--c-escuro); color: #FFFFFF; }
.painel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgb(11 12 14 / 0.5); } /* taste-skill-ignore: véu neutro sob o verbo (a exceção da casa) */
/* o verbo fica preso só acima da frase: no fim da tela ele sai junto com a foto, sem passar por cima dela */
.painel__trilho { position: absolute; inset: 0 0 clamp(150px, 22svh, 210px) 0; z-index: 2; pointer-events: none; }
.painel__verbo {
  position: sticky; top: calc(50% - 0.425em);
  margin-top: 28px; padding-inline: var(--margem); text-align: center;
  font: 700 min(24vw, calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.46)))/0.85 var(--f-titulo);
  letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
}
.painel__frase {
  position: absolute; z-index: 3; left: var(--margem); right: var(--margem); bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: 38ch; padding: 14px 16px; border-radius: var(--raio);
  background: rgb(11 12 14 / 0.82); font-size: var(--t-corpo); line-height: 1.45;
}

/* ---------- bairros: título largo e a tabela empurrada para a direita ---------- */
.bairros { padding: var(--secao) var(--margem) 0; }
.bairros__titulo { max-width: 15ch; font: 700 var(--t-titulo)/0.98 var(--f-titulo); letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; }
.bairros__grade { display: grid; gap: 32px; margin-top: clamp(28px, 5vw, 96px); }
.bairros__lado { display: grid; gap: 24px; align-content: end; }
.bairros__texto { max-width: 36ch; }
.bairros__foto { width: 60%; margin-left: auto; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio); }
.bairros__foto img { width: 100%; height: 100%; object-fit: cover; }
.busca { display: grid; gap: 8px; margin-bottom: 32px; }
.busca__rotulo { font-weight: 500; }
.busca__campo {
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--c-suave); border-radius: var(--raio); background: #FFFFFF; font-size: 1rem;
  -webkit-appearance: none; appearance: none;
}
.busca__campo:focus-visible { border-color: var(--c-tinta); }
.busca__resposta { min-height: 1.55em; font-weight: 500; }
.busca__resposta a { text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
/* uma linha por bairro: a região no começo do grupo, o bairro e a cidade alinhada à direita */
.tabela__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 13px 0; }
.tabela__linha--grupo { padding-top: 44px; }
.tabela__regiao { grid-column: 1 / -1; color: var(--c-suave); font-size: var(--t-pequeno); font-weight: 500; }
.tabela__bairro { grid-column: 1; font-weight: 500; overflow-wrap: anywhere; }
.tabela__cidade { grid-column: 2; text-align: right; color: var(--c-suave); }
.tabela__linha.e-achado .tabela__bairro { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.28em; text-decoration-color: var(--c-destaque); }

/* ---------- orçamento: o pedido escrito e a conta dos metros ---------- */
.orcamento { margin-top: var(--secao); padding: clamp(56px, 9vw, 140px) var(--margem); background: var(--c-superficie); }
.orcamento__grade { display: grid; gap: 40px; }
.orcamento__lado { display: grid; gap: 18px; align-content: start; }
.orcamento__titulo { max-width: 12ch; font: 700 var(--t-titulo)/0.95 var(--f-titulo); letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; }
.orcamento__texto { max-width: 40ch; }
.orcamento__sem-js { max-width: 40ch; font-weight: 500; }
.js .orcamento__sem-js { display: none; }
html:not(.js) .pedido { display: none; }
.pedido { display: grid; gap: 36px; }
.pergunta { display: grid; gap: 12px; }
.pergunta legend { margin-bottom: 12px; font: 700 var(--t-frase)/1.1 var(--f-titulo); text-transform: uppercase; }
.pergunta__ajuda { max-width: 52ch; color: var(--c-suave); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  border-radius: var(--raio); background: var(--c-fundo); font-weight: 500;
  transition: background-color 180ms ease, color 180ms ease;
}
.opcao input:checked + span { background: var(--c-tinta); color: var(--c-fundo); }
.opcao input:focus-visible + span { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: foco da opção */
.campo-form { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo-form > span { font-size: var(--t-pequeno); font-weight: 500; color: var(--c-suave); }
.campo-form input, .campo-form select {
  width: 100%; min-height: 48px; padding: 8px 12px;
  border: 2px solid transparent; border-radius: var(--raio); background: #FFFFFF;
  font-size: 1rem; line-height: 1.3;
}
.campo-form select { padding-right: 36px; -webkit-appearance: none; appearance: none; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0C0E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px; }
.campo-form input:focus-visible, .campo-form select:focus-visible { border-color: var(--c-tinta); }
.campo-form--largo { max-width: 32rem; }
.comodos { display: grid; gap: 14px; counter-reset: comodo; }
.comodo {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; align-items: end;
  padding: 16px; border-radius: var(--raio); background: var(--c-fundo);
}
.comodo .campo-form--nome { grid-column: 1 / -1; }
.comodo .campo-form:nth-of-type(2), .comodo .campo-form:nth-of-type(3) { grid-column: span 3; }
.comodo .campo-form:nth-of-type(4), .comodo .campo-form:nth-of-type(5), .comodo .campo-form:nth-of-type(6) { grid-column: span 2; }
/* caixa de marcar desenhada: a área de toque é a linha inteira (o input cobre o rótulo) */
.marcar { position: relative; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; }
.marcar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.marcar span { display: inline-flex; align-items: center; gap: 10px; }
.marcar span::before {
  content: ''; flex: none; width: 22px; height: 22px; border: 2px solid var(--c-tinta); border-radius: 3px; background: #FFFFFF;
  background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}
.marcar input:checked + span::before { background-color: var(--c-tinta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4'/%3E%3C/svg%3E"); }
.marcar input:focus-visible + span::before { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: foco da caixa de marcar */
.comodo__area { grid-column: 1 / 5; font-weight: 500; }
.comodo__tirar {
  grid-column: 5 / -1; justify-self: end; min-height: 44px; padding: 0 4px;
  border: 0; background: none; cursor: pointer; color: var(--c-suave);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
}
.comodo:only-child .comodo__tirar { display: none; }
.comodo:only-child .comodo__area { grid-column: 1 / -1; }
[data-mais-comodo] { justify-self: start; }
/* a parede aberta: as quatro paredes de cada cômodo lado a lado, com portas e janelas recortadas */
.parede-aberta { min-height: 8px; margin-top: 8px; }
.parede-aberta svg { display: block; width: 100%; height: auto; }
.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-top: 4px; }
.total__numero { font: 700 var(--t-titulo)/0.9 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total__unidade { font-size: var(--t-frase); font-weight: 500; }
.total__tinta { max-width: 52ch; font-weight: 500; }
.pedido__fim { display: grid; gap: 14px; justify-items: start; }
.pedido__resumo { max-width: 52ch; white-space: pre-line; }
.pedido__nota { max-width: 52ch; color: var(--c-suave); }

/* ---------- dúvidas: título largo e perguntas recuadas ---------- */
.duvidas { padding: var(--secao) var(--margem) 0; }
.duvidas__titulo { max-width: 16ch; font: 700 var(--t-titulo)/0.98 var(--f-titulo); letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; }
.duvidas__lista { display: grid; gap: 6px; margin-top: clamp(32px, 5vw, 80px); }
.duvida { position: relative; }
.duvida summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 10px 0;
  font-size: var(--t-frase); font-weight: 400; line-height: 1.2; cursor: pointer; list-style: none;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: ''; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; /* taste-skill-ignore: a seta de dois traços do acordeão */
  transform: translateY(-3px) rotate(45deg); transition: transform 240ms var(--ease-out);
}
.duvida[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.duvida[open] { margin-inline: calc(-1 * var(--margem)); padding: 6px var(--margem) 24px; background: var(--c-superficie); }
.duvida p { max-width: 48ch; padding-top: 6px; }

/* ---------- atendimento: frase, foto pequena e os caminhos ---------- */
.atendimento { padding: var(--secao) var(--margem) clamp(72px, 9vw, 120px); }
.atendimento__faixa { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px 18px; align-items: start; }
.atendimento__frase { grid-column: 1 / -1; max-width: 26ch; font-size: var(--t-frase); font-weight: 500; line-height: 1.18; }
.atendimento__foto { width: 96px; aspect-ratio: 1; overflow: hidden; }
.atendimento__foto img { width: 100%; height: 100%; object-fit: cover; }
.atendimento__contatos { display: grid; gap: 4px; align-content: start; }
.atendimento__pergunta { font-weight: 500; }
.atendimento__contatos a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
.atendimento__cidade { grid-column: 1 / -1; color: var(--c-suave); font-size: var(--t-pequeno); }
.atendimento__faixa > .atendimento__cidade { display: none; }
.atendimento__contatos .atendimento__cidade { margin-top: 4px; }
.atendimento__mais { display: grid; gap: 32px; margin-top: clamp(56px, 8vw, 120px); }
.atendimento__info { display: grid; gap: 10px; align-content: start; }
.atendimento__sub { font: 700 var(--t-frase)/1.1 var(--f-titulo); text-transform: uppercase; }
.atendimento__sub:not(:first-child) { margin-top: 24px; }
.horarios { display: grid; gap: 2px; max-width: 26rem; }
.horarios li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; margin-inline: -10px; border-radius: var(--raio); }
.horarios li.e-hoje { background: var(--c-superficie); font-weight: 500; }
.atendimento__hoje { color: var(--c-suave); }
.atendimento__rotas { display: flex; flex-wrap: wrap; gap: 0 24px; }
.atendimento__mapa { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--c-superficie); }
.atendimento__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.atendimento__mapa--reservado { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--c-suave); font-weight: 500; }
.atendimento__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: o mapa recebeu o foco pelo teclado */

/* ---------- chamada final e rodapé: as cores da página invertidas ---------- */
.fim {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: 80svh; padding: clamp(56px, 9vw, 120px) var(--margem) 40px;
  background: var(--c-escuro); color: var(--c-escuro-tinta);
}
.fim__titulo { max-width: 100%; font: 700 var(--t-cartaz)/0.9 var(--f-titulo); letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.fim__base { display: grid; gap: 22px; }
.fim__texto { max-width: 36ch; font-size: var(--t-corpo); }
.fim .btn { width: 100%; }

.rodape {
  position: relative; overflow: clip; margin-top: -1px;
  padding: clamp(64px, 10vw, 160px) var(--margem) 0;
  background: var(--c-escuro); color: var(--c-escuro-tinta);
}
.rodape a { text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.rodape__topo { display: grid; gap: 28px; }
.rodape__links, .rodape__contatos { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape__links a, .rodape__contatos a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.rodape__legal { display: grid; gap: 10px; justify-items: start; margin-top: 48px; font-size: var(--t-pequeno); color: var(--c-escuro-tinta); }
.rodape__legal 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-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.rodape__privacidade, .rodape__creditos { display: grid; gap: 8px; max-width: 70ch; padding: 4px 0 12px; }
.rodape__creditos a, .rodape__privacidade a { display: inline; min-height: 0; }
.rodape__nome {
  margin: 28px 0 0; white-space: nowrap;
  font: 700 min(30vw, calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.43)))/0.8 var(--f-titulo);
  letter-spacing: -0.02em; text-transform: uppercase;
  transform: translateY(18%); transform-origin: 0 100%;
}

/* ---------- 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: var(--raio);
  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; }

/* ---------- celular grande e tablet ---------- */
@media (min-width: 420px) {
  .topo__cta { display: inline-flex; }
}
@media (min-width: 600px) {
  .inicio__moldura { height: calc((100vw - 2 * var(--margem)) * 0.5625 + 40px); }
  .inicio__quadro { aspect-ratio: 16 / 9; }
  .atendimento__faixa { grid-template-columns: 150px minmax(0, 1fr); }
  .atendimento__foto { width: 150px; }
  .comodo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .comodo .campo-form--nome { grid-column: 1 / 5; }
  .comodo .campo-form:nth-of-type(2), .comodo .campo-form:nth-of-type(3) { grid-column: span 4; }
  .comodo .campo-form:nth-of-type(4), .comodo .campo-form:nth-of-type(5), .comodo .campo-form:nth-of-type(6) { grid-column: span 4; }
  .comodo__area { grid-column: 1 / 9; }
  .comodo__tirar { grid-column: 9 / -1; }
  .fim .btn { width: auto; }
  .fim__base { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ---------- computador ---------- */
@media (min-width: 900px) {
  .campo { min-height: 72svh; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; padding: 28px var(--margem); }
  .campo__texto { grid-column: 8 / 12; max-width: 34ch; padding-top: 12px; }
  .campo__nome { grid-column: 1 / -1; grid-row: 2; max-width: 14ch; }
  .campo--espelhado .campo__texto { grid-column: 2 / 6; justify-self: start; }
  .campo--espelhado .campo__nome { justify-self: end; text-align: right; }

  .obras__palco { display: block; }
  .obra { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .obra__legenda { grid-column: 1 / 5; }
  .obra__foto, .comparador { grid-column: 5 / -1; }

  .painel__verbo { font-size: min(var(--t-cartaz), calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.46))); }
  .painel__frase { bottom: 32px; max-width: 34ch; }

  .bairros__titulo { max-width: none; text-indent: 3vw; }
  .bairros__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; margin-top: 96px; }
  .bairros__lado { grid-column: 1 / 6; }
  .bairros__foto { width: 22vw; margin-left: 0; }
  .bairros__tabela { grid-column: 8 / -1; }
  .tabela__linha { grid-template-columns: 34% minmax(0, 1fr) auto; }
  .tabela__regiao { grid-column: 1; }
  .tabela__bairro { grid-column: 2; }
  .tabela__cidade { grid-column: 3; }

  .orcamento__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .orcamento__lado { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--topo) + 32px); }
  .pedido { grid-column: 7 / -1; }

  .duvidas__lista { margin-left: calc((100% + 24px) / 3); }
  .duvida[open] { margin-inline: -24px; padding-inline: 24px; }

  .atendimento__faixa { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .atendimento__frase { grid-column: 1 / 6; max-width: none; }
  .atendimento__foto { grid-column: 8 / 10; width: auto; max-width: 170px; }
  .atendimento__contatos { grid-column: 10 / -1; }
  .atendimento__mais { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .atendimento__info { grid-column: 1 / 6; }
  .atendimento__mapa { grid-column: 7 / -1; aspect-ratio: 16 / 10; }

  .fim { min-height: 90svh; padding-bottom: 40px; }
  .fim__base { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .fim__texto { grid-column: 1 / 6; font-size: var(--t-frase); line-height: 1.3; max-width: 30ch; }
  .fim .btn { grid-column: 9 / -1; justify-self: end; }
  .rodape__topo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .rodape__links { grid-column: 1 / 8; }
  .rodape__contatos { grid-column: 10 / -1; flex-direction: column; }
  .rodape__legal { grid-template-columns: auto auto auto auto; justify-content: space-between; align-items: start; gap: 0 32px; margin-top: 72px; }
}

/* início no computador: as metades nas bordas, a moldura no meio e as fotos passando por ela */
@media (min-width: 1100px) and (min-height: 720px) {
  .inicio { height: calc(100svh - var(--topo) - var(--faixa)); min-height: 600px; padding: 0; }
  .inicio__palco {
    position: relative; display: block; height: 100%;
    --quadro-h: calc(35vw * 9 / 16);
    /* o espaço entre as fotos deixa 60 px da anterior e da próxima aparecendo nas bordas */
    --fita-gap: max(24px, calc((100svh - var(--topo)) / 2 - var(--quadro-h) / 2 - 60px));
  }
  .inicio__titulo {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; padding: 0 var(--margem);
    font-size: min(var(--t-cartaz), calc((32.5vw - var(--margem) - 40px) / (var(--letras-2) * 0.43)));
  }
  .inicio__linha { display: block; }
  .inicio__metade--1 { transform: translateY(-0.02em); }
  .inicio__moldura { position: absolute; top: 0; bottom: 0; left: 32.5vw; width: 35vw; height: auto; }
  .inicio__fita { position: absolute; left: 0; right: 0; top: calc(50% - var(--quadro-h) / 2); gap: var(--fita-gap); }
  .inicio__quadro { aspect-ratio: 16 / 9; }
  .inicio__base {
    position: absolute; z-index: 3; left: var(--margem); bottom: 32px;
    width: min(30vw, 30rem); padding: 0;
  }
  .inicio__base { gap: 12px; }
  .inicio__sub { max-width: 34ch; }
  /* sem fotos (prévia de quem ainda não mandou): o título em duas linhas de ponta a ponta, o texto embaixo */
  .inicio--sem-foto .inicio__palco { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 0 var(--margem); }
  .inicio--sem-foto .inicio__titulo {
    position: static; display: block; padding: 0;
    font-size: min(var(--t-cartaz), calc((100vw - 2 * var(--margem)) / (var(--letras) * 0.43)));
  }
  .inicio--sem-foto .inicio__linha { display: inline; }
  .inicio--sem-foto .inicio__metade--2 { text-align: left; }
  .inicio--sem-foto .inicio__base { position: static; width: auto; max-width: 40rem; }
}

/* entre 1100 e 1279 px o link de calcular sai do início (o menu já leva ao orçamento) e o texto cabe embaixo da metade */
@media (min-width: 1100px) and (max-width: 1279px) and (min-height: 720px) {
  .inicio__acoes .link { display: none; }
}

@media (min-width: 1100px) {
  .topo__barra { gap: 28px; }
  .menu { display: flex; align-items: center; gap: 28px; }
  .menu ul { display: flex; gap: 24px; }
  .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
  .menu__acoes { display: none; }
  .menu-btn { display: none; }
}

/* ---------- só com mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .obra-nome:hover { color: var(--c-tinta); }
  .menu a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
  .btn--destaque:hover { background: var(--c-destaque-forte); }
  .btn--contorno:hover { background: #2A2E35; }
  .obra-nome:hover { position: relative; z-index: 2; }
  .obra-nome:hover .obra-nome__quadro { transform: scale(1.6); }
  .link:hover, .campo__link:hover { text-decoration-thickness: 3px; }
  .opcao:hover span { background: #FFFFFF; }
  .opcao input:checked:hover + span { background: var(--c-tinta); }
}

/* ---------- toque: alvos de pelo menos 44 px (ergonomia, sem mudar o layout) ---------- */
@media (hover: none), (pointer: coarse) {
  .rodape__links a, .rodape__contatos a, .obra-nome { min-width: 44px; }
}

/* ---------- movimento (só sem "reduzir movimento"; o resto fica no main.js) ---------- */
/* o início se move só com CSS: a foto assenta, as metades do título deslizam e o texto sobe. Nada começa escondido. */
.movimento .inicio__quadro.e-atual img { animation: assenta 1.8s var(--ease-out) both; }
.movimento .inicio__metade--1 { animation: desliza-esq 1.1s var(--ease-out) both; }
.movimento .inicio__metade--2 { animation: desliza-dir 1.1s var(--ease-out) both; }
.movimento .inicio__base { animation: sobe 0.9s 0.25s var(--ease-out) both; }
.movimento .inicio__base:focus-within { animation: none; }
@keyframes assenta { from { transform: scale(1.08); } }
@keyframes desliza-esq { from { transform: translateX(-0.35em); } }
@keyframes desliza-dir { from { transform: translateX(0.35em); } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }

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