/* build 2026-09-25 22:26 */
/* ==========================================================================
   Cypress Prime · site.css
   Paleta do BRANDBOOK oficial (recebido em 24/09/2026), que corrige a que
   estava registrada no Doc Diretor:

     Doc Diretor (errado)         Brandbook (oficial)
     #003524 Verde Floresta   ->  #0C3B2E Cypress Green   primario
     #267B3A Verde Natural    ->  (nao existe no brandbook)
     #E15511 Laranja Vibrante ->  #E07A4F Terracotta      acento
     #E4E4E4 Cinza Claro      ->  #F2F0E7 Soft Sand       neutro
     #1B1B1B Preto Suave      ->  #878C89 Stone Gray      apoio

   O brandbook nao tem preto. O texto escuro e um quase-preto esverdeado,
   derivado do Cypress Green, para o site nao usar uma cor que a marca nao tem.

   FONTE: a marca usa Roc Grotesk, comercial, entregue como .otf de site pirata
   e sem licenca de webfont. O site usa Archivo, do Google Fonts, mesma familia
   grotesca geometrica com eixo de largura. Trocar exige comprar a licenca.
   ========================================================================== */

:root {
  /* paleta oficial do brandbook */
  --cypress:    #0C3B2E;   /* primario · forca e confianca */
  --terracotta: #E07A4F;   /* acento · criatividade e acao */
  --sand:       #F2F0E7;   /* neutro · limpo e versatil */
  --stone:      #878C89;   /* apoio · equilibrio e estabilidade */

  /* derivadas de interface, nunca usadas como cor de marca */
  --cypress-deep:  #07281E;  /* rodape e veu de foto */
  --cypress-mid:   #11513D;  /* hover e faixas internas */
  --terra-texto:   #A94B26;  /* terracotta escurecido: unico permitido como TEXTO sobre claro */
  --texto:         #1B2420;  /* quase-preto esverdeado, derivado do Cypress */
  --texto-suave:   #55605A;
  --linha:         #ddd9cc;

  --container: 1200px;
  --radius: 10px;
  --sombra: 0 2px 14px rgba(12, 59, 46, .09);
  --sombra-alta: 0 12px 36px rgba(12, 59, 46, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px; line-height: 1.65;
  color: var(--texto); background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` e obrigatorio aqui. Os atributos width/height do HTML ficam
   de proposito, porque sao eles que reservam a caixa e evitam salto de
   layout no carregamento, mas sem esta linha o `height` vira altura FIXA:
   a foto da dobra editorial saiu 573x821 em vez de 573x428, esticada.
   Os seletores que definem altura de proposito (.marca, .svc-card,
   .gal-strip, .dono, o rodape) tem especificidade maior e continuam valendo. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cypress); }

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--cypress); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 .5em; font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 2.4vw, 2.35rem); }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1.1em; }

.wrap { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }

/* EXCECAO DA CYPRESS PRIME (direcao, 25/09/2026).
   A regra geral da casa e' NAO usar antetitulo miudo acima do H2, porque virou
   tique de layout gerado por IA (feedback_no_eyebrow_labels, fixado na revisao
   da Pro Strong). Eu tinha removido os dez daqui por causa dela. A direcao
   olhou e mandou manter NESTE site: "no caso desse site em especifico os
   antetitulos tinham ficado legal".
   A excecao e' deste cliente e nao volta a ser padrao. Site novo nasce sem. */
/* terracotta escurecido sobre claro (4,6:1), terracotta puro sobre verde (5,3:1) */
.eyebrow {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terra-texto);
  margin: 0 0 .55rem;
}
.sobre-verde .eyebrow { color: var(--terracotta); }
.hero .eyebrow, .cta-final .eyebrow { color: var(--terracotta); }

/* Dobras com paragrafo longo pedem corpo menor: a dobra do bloco de resposta
   da IA, a de protecao e a do dono. Tamanho, nao quantidade. */
/* A direcao achou o texto pequeno do site um pouco pequeno demais. Subiu de
   .94rem para .99rem, e a entrelinha junto, que ajuda mais a leitura que o
   corpo. Continua menor que o padrao, que e o que a dobra longa pede. */
.texto-menor, p.texto-menor { font-size: .99rem; line-height: 1.66; }
.texto-menor p { font-size: .99rem; line-height: 1.66; }
/* justificado sem hifenizacao: a coluna do hero tem ~75 caracteres, larga o
   bastante para fechar a linha sem abrir rio. Com hyphens:auto saiam 5 palavras
   quebradas em 8 linhas, que e ruido. */
.justificado-solo { text-align: justify; text-justify: inter-word; hyphens: none; }
/* justificado so' onde a direcao pediu: o bloco do dono. Nao vira padrao da
   folha porque justificar texto curto abre rio branco no meio da linha. */
.justificado p { text-align: justify; text-justify: inter-word; hyphens: none; }

/* ── botoes ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 15px 30px; border: 0; border-radius: var(--radius);
  font: 700 1.0625rem/1 'Archivo', Arial, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: background .16s, transform .16s, color .16s;
}
/* O Terracotta com texto branco da 2,9:1 e reprova WCAG AA. Ele nunca e fundo
   de texto: vive em icone, filete, numeral sobre verde e estado de hover. */
.btn-primario { background: var(--cypress); color: #fff; }
.btn-primario:hover { background: var(--cypress-mid); transform: translateY(-1px); }
.btn-areia { background: var(--sand); color: var(--cypress); box-shadow: var(--sombra); }
.btn-areia:hover { background: #fff; transform: translateY(-1px); }
.btn-contorno {
  background: transparent; color: var(--cypress);
  box-shadow: inset 0 0 0 2px var(--cypress);
}
.btn-contorno:hover { background: var(--cypress); color: #fff; }
/* Cypress Green sobre Cypress Green some. Dentro de dobra verde o botao
   primario vira Soft Sand, que da 13:1 com o verde do texto. */
.sobre-verde .btn-primario { background: var(--sand); color: var(--cypress); }
.sobre-verde .btn-primario:hover { background: #fff; }
.sobre-verde .btn-contorno, .hero .btn-contorno, .cta-final .btn-contorno {
  color: #fff; box-shadow: inset 0 0 0 2px rgba(242,240,231,.55);
}
.sobre-verde .btn-contorno:hover, .hero .btn-contorno:hover, .cta-final .btn-contorno:hover {
  background: var(--sand); color: var(--cypress);
}

/* ── barra de autoridade ──────────────────────────────────────────────── */
.authbar { background: var(--cypress); color: var(--sand); font-size: .88rem; }
.authbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 46px; padding-block: 7px;
}
.authbar-esq { display: flex; align-items: center; gap: 15px; }
.authbar-esq a {
  color: var(--sand); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
}
.authbar-esq a:hover { color: var(--terracotta); }
.authbar-esq svg { width: 17px; height: 17px; fill: currentColor; }
/* o telefone e o unico elemento da barra que chama atencao */
.authbar .tel-destaque {
  color: var(--terracotta); font-weight: 800; font-size: 1.04rem; letter-spacing: .01em;
}
.authbar .tel-destaque:hover { color: #fff; }
.authbar .tel-destaque svg { fill: var(--terracotta); width: 19px; height: 19px; }
.authbar .tel-destaque:hover svg { fill: #fff; }
.authbar .divisor { width: 1px; height: 20px; background: rgba(242,240,231,.25); }
.selos { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.selo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.selo svg { width: 17px; height: 17px; fill: var(--terracotta); flex: none; }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  background: #fff; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 60;
}
.site-header .wrap {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px; padding-block: 10px;
}
.marca img { height: 92px; width: auto; }
.nav { display: flex; justify-content: center; }
.nav > ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none; color: var(--cypress); font-weight: 700;
  font-size: .89rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 10px 0; display: inline-block; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--terracotta); }
.tem-drop { position: relative; }
.tem-drop > a::after { content: ' ▾'; font-size: .7em; }
.drop {
  position: absolute; top: 100%; left: -14px; min-width: 270px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  box-shadow: var(--sombra-alta); padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s, transform .14s, visibility .14s;
}
.tem-drop:hover .drop, .tem-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop a {
  display: block; padding: 10px 14px; border-radius: 7px;
  text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; border: 0;
}
.drop a:hover { background: var(--sand); border: 0; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; color: #fff; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  /* cada pagina passa a sua foto em --hero-img, no style da <section>.
     A url do style resolve contra o documento; a daqui, contra a folha. */
  background: var(--hero-img, url('../photos/home-hero.webp')) center/cover no-repeat;
}
/* Veu suavizado: a esquerda segura o texto, a direita abre para a foto
   aparecer. Antes ia de 0,94 a 0,46 e a imagem quase nao existia. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(7,40,30,.90) 0%, rgba(7,40,30,.74) 38%,
    rgba(7,40,30,.34) 66%, rgba(7,40,30,.12) 100%);
}
.hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px;
  align-items: center; padding-block: 72px;
}
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(7,40,30,.5); }
.hero-apoio { font-size: 1.16rem; font-weight: 700; color: var(--terracotta); margin: -.2em 0 1.1em; }
.hero-resposta {
  font-size: 1.01rem; color: #eef1ea; margin-bottom: 1.6rem;
  text-shadow: 0 1px 12px rgba(7,40,30,.55);
}
.hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── formulario ───────────────────────────────────────────────────────── */
.form-card {
  background: #fff; border-radius: 14px; padding: 26px 26px 22px;
  box-shadow: var(--sombra-alta); color: var(--texto);
  border-top: 5px solid var(--terracotta);
}
.form-card h2 { font-size: 1.3rem; margin-bottom: .18em; }
.form-card .sub { font-size: .94rem; color: var(--texto-suave); margin-bottom: 1rem; }
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { margin-bottom: 12px; }
.campo label {
  display: block; font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 5px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: .97rem;
  border: 1.5px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--texto); font-family: inherit;
}
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 3px solid rgba(224,122,79,.4); border-color: var(--terracotta);
}
.form-card .btn { width: 100%; margin-top: 4px; }
.form-nota { font-size: .84rem; color: var(--texto-suave); margin: 10px 0 0; text-align: center; }

/* ── faixa de servicos ────────────────────────────────────────────────── */
.svc-strip { background: var(--cypress-deep); }
.svc-strip .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.svc-strip a {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 22px 12px; text-decoration: none; color: var(--sand); text-align: center;
  font-weight: 700; font-size: .93rem; line-height: 1.3;
  border-right: 1px solid rgba(242,240,231,.14); transition: background .15s;
}
.svc-strip a:last-child { border-right: 0; }
.svc-strip a:hover { background: rgba(242,240,231,.09); color: #fff; }
.svc-strip svg { width: 27px; height: 27px; fill: var(--terracotta); }

/* ── secoes e ritmo de fundo ──────────────────────────────────────────── */
section { padding-block: 74px; }
section.compacta { padding-block: 54px; }
.fundo-areia { background: var(--sand); }
/* faixa verde: o brandbook trabalha em blocos cheios de Cypress Green, e a
   pagina estava clara de ponta a ponta */
.sobre-verde { background: var(--cypress); color: var(--sand); }
.sobre-verde h2, .sobre-verde h3 { color: #fff; }
.sobre-verde p { color: #dfe6e0; }
.centro { text-align: center; max-width: 720px; margin-inline: auto; }

/* editorial 2 colunas */
.ed { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.ed img { border-radius: var(--radius); box-shadow: var(--sombra); }
/* dobra editorial com a foto a esquerda: alterna o lado entre dobras
   vizinhas para a pagina nao ler como uma coluna so. No celular a ordem
   volta a ser texto primeiro, sempre, porque a foto empurraria o titulo
   para fora da primeira tela. */
.ed.inverso > div:first-child { order: 2; }
@media (max-width: 860px) { .ed.inverso > div:first-child { order: 0; } }

/* comparador antes e depois */
.ba-big { max-width: 900px; margin-inline: auto; }
.ba-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba-par figure { margin: 0; }
.ba-par img {
  border-radius: var(--radius); width: 100%; height: auto;
  aspect-ratio: 4/3; object-fit: cover;
}
.ba-par figcaption {
  margin-top: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--terracotta);
}

/* cartoes de servico horizontais */
.svc-grid { display: grid; gap: 18px; }
.svc-card {
  display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .16s, transform .16s;
}
.svc-card:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.svc-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: 100%; }
.svc-card .texto { padding: 22px 26px 22px 0; }
.svc-card h3 { margin-bottom: .3em; }
.svc-card p { margin: 0; color: var(--texto-suave); font-size: 1rem; }

/* area de atendimento: lista editorial com filete, no lugar da grade de
   caixinhas. A direcao pediu outra proposta visual. */
.area-serv { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.area-lista ul { list-style: none; margin: 0 0 18px; padding: 0; }
.area-lista li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0 11px 16px; border-top: 1px solid var(--linha);
  border-left: 3px solid transparent;
}
.area-lista li:first-of-type { border-left-color: var(--terracotta); }
.area-lista li:last-child { border-bottom: 1px solid var(--linha); }
.area-lista a {
  font-weight: 700; font-size: 1.06rem; color: var(--cypress); text-decoration: none;
}
.area-lista a:hover { color: var(--terra-texto); }
.area-lista .tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cypress); background: var(--sand); padding: 4px 9px; border-radius: 20px;
}
.area-lista .secundaria { color: var(--texto-suave); font-size: 1rem; }
.area-lista .nota-area { font-size: .97rem; color: var(--texto-suave); margin: 0; }
.area-mapa .mapa-slot, .area-mapa iframe {
  height: 460px; width: 100%; border: 1px solid var(--linha);
  border-radius: var(--radius); background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  color: var(--cypress); font-weight: 700; text-align: center; padding: 20px;
}

/* cidades e mapa */
.city-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; list-style: none; padding: 0; margin: 0 0 30px;
}
.city-list li {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--terracotta);
  border-radius: 8px; padding: 12px 16px; font-weight: 700;
  color: var(--cypress); font-size: .97rem;
}
.map-band iframe, .map-band .mapa-slot {
  width: 100%; height: 380px; border: 1px solid var(--linha); border-radius: var(--radius);
  background: #fff; display: flex; align-items: center; justify-content: center;
  color: var(--cypress); font-weight: 700;
}

/* tabela de garantia, sobre verde */
.guar-in { width: 100%; border-collapse: collapse; background: rgba(242,240,231,.06); }
.guar-in caption {
  text-align: center; padding-bottom: 16px; color: #c9d4cc;
  max-width: 720px; margin-inline: auto;
}
.guar-in th, .guar-in td {
  padding: 14px 18px; text-align: left; font-size: .99rem; vertical-align: top;
  border-bottom: 1px solid rgba(242,240,231,.16); color: var(--sand);
}
.guar-in thead th {
  background: var(--terracotta); color: var(--cypress-deep); font-size: .85rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
}
.guar-in thead th:last-child { background: var(--stone); color: var(--cypress-deep); }
.guar-in tbody td:first-child { border-right: 1px solid rgba(242,240,231,.16); }

/* linha do tempo */
.tl {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.tl li { position: relative; padding: 0 18px 0 0; }
.tl .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--terracotta);
  color: var(--cypress-deep); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 14px;
}
.tl li::after {
  content: ''; position: absolute; left: 44px; top: 21px; right: 18px;
  height: 2px; background: var(--linha);
}
.tl li:last-child::after { display: none; }
.tl h3 { font-size: 1.02rem; margin-bottom: .25em; }
.tl p { font-size: .99rem; color: var(--texto-suave); margin: 0; }

/* bloco do dono */
.dono { display: grid; grid-template-columns: 400px 1fr; gap: 50px; align-items: center; }
.dono img {
  border-radius: var(--radius); box-shadow: var(--sombra);
  aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto;
}

/* galeria strip */
.gal-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.gal-strip img {
  aspect-ratio: 1; object-fit: cover; border-radius: 8px;
  width: 100%; height: auto;
}

/* prova social */
.gbp-slot {
  border: 1px solid var(--linha); border-top: 4px solid var(--terracotta);
  border-radius: var(--radius); background: #fff; padding: 40px 30px;
  text-align: center; color: var(--cypress);
}
.gbp-slot p { color: var(--texto-suave); margin: .4em 0 0; font-size: 1rem; }

/* faq */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--linha); border-radius: var(--radius);
  background: #fff; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--cypress);
  font-size: 1.04rem; list-style: none;
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--terracotta); font-size: 1.6rem; line-height: 1; font-weight: 700;
}
.faq details[open] summary::after { content: '–'; }
.faq details > p { padding: 0 22px 18px; margin: 0; color: var(--texto-suave); font-size: 1.02rem; }

/* ── cta final ────────────────────────────────────────────────────────── */
.cta-final { position: relative; color: #fff; text-align: center; }
.cta-final::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cta-img, url('../photos/home-cta-final.webp')) center/cover no-repeat;
}
.cta-final::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,40,30,.88) 0%, rgba(7,40,30,.78) 100%);
}
.cta-final .wrap { position: relative; z-index: 2; padding-block: 84px; }
.cta-final h2 { color: #fff; }
.cta-final .assinatura {
  font-size: .82rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--terracotta);
  /* `.cta-final p` da margin-inline:auto, mas o shorthand `margin` abaixo
     zerava as laterais e a caixa de 620px encostava na esquerda do wrap.
     Medido no DOM em 24/09/2026: x=120 dentro de um wrap de 1200. */
  margin: 0 auto .9rem; max-width: none;
  /* metade do letter-spacing, que e o que sobra depois da ultima letra */
  text-indent: .11em;
}
.cta-final p { color: #dfe6e0; max-width: 620px; margin-inline: auto; }
/* filete de marca: terracotta, areia e stone, as tres cores de apoio */
.cta-final .filete {
  width: 132px; height: 5px; margin: 26px auto 0; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--terracotta) 0 44%, var(--sand) 44% 72%, var(--stone) 72% 100%);
}
.cta-final .acoes {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px;
}

/* ── rodape ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--cypress-deep); color: #c3cfc7;
  padding-block: 56px 26px; font-size: 1rem;
  border-top: 5px solid var(--terracotta);
}
.site-footer a { color: #c3cfc7; text-decoration: none; }
.site-footer a:hover { color: var(--terracotta); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer img { height: 168px; width: auto; margin-bottom: 20px; }
.site-footer h4 {
  color: var(--terracotta); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 14px; font-weight: 800;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }

/* coluna Contact no padrao da casa: icone + dado clicavel, e bloco Follow Us */
.f-contato { margin-bottom: 22px; }
.f-contato li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; line-height: 1.5; }
.f-contato svg { width: 17px; height: 17px; fill: var(--terracotta); flex: none; margin-top: 3px; }
/* o e-mail nao cabe na coluna e estava quebrando no meio da palavra
   ("...services.c / om"). Com overflow-wrap ele so quebra se nao houver
   outro jeito, e o <wbr> depois do @ da o ponto de quebra natural. */
.f-contato a { overflow-wrap: break-word; }
.f-seguir { margin-top: 4px; }
.f-redes { display: flex; gap: 10px; }
.f-redes a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(242,240,231,.10); display: flex; align-items: center; justify-content: center;
  transition: background .16s;
}
.f-redes a:hover { background: var(--terracotta); }
.f-redes svg { width: 19px; height: 19px; fill: var(--sand); }
.f-redes a:hover svg { fill: var(--cypress-deep); }
.f-cta { margin-top: 20px; }
/* `.site-footer a` tem especificidade maior que `.btn-areia` e pintava o
   rotulo de areia sobre fundo areia: botao invisivel. Mesmo defeito que ja
   apareceu no `.btn-primario` dentro de `.sobre-verde`. */
.site-footer .btn-areia { color: var(--cypress-deep); }
.site-footer .btn-areia:hover { color: var(--cypress-deep); }
.footer-tagline {
  color: var(--sand); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: .78rem; margin-top: 18px;
}
.footer-selo { color: var(--sand); font-weight: 700; }
.footer-base {
  border-top: 1px solid rgba(242,240,231,.16); margin-top: 40px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .92rem; color: var(--stone);
}
.footer-base a { color: var(--stone); }
.footer-base .assina-agencia a { color: var(--terracotta); font-weight: 700; }
.footer-base .assina-agencia a:hover { color: var(--sand); }

/* acessibilidade */
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.pular {
  position: absolute; left: -9999px; background: #fff; color: var(--cypress);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.pular:focus { left: 0; top: 0; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* botao do menu, escondido no desktop */
.menu-btn {
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: 10px; width: 46px; height: 46px; flex-direction: column;
  justify-content: center; gap: 5px; align-items: stretch;
}
.menu-btn .barra {
  display: block; height: 3px; border-radius: 2px; background: var(--cypress);
  transition: transform .2s, opacity .2s;
}
body.menu-aberto .menu-btn .barra:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-aberto .menu-btn .barra:nth-child(2) { opacity: 0; }
body.menu-aberto .menu-btn .barra:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   TABLET · ate 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .wrap { width: calc(100% - 40px); }
  .hero .wrap { grid-template-columns: 1fr; gap: 34px; padding-block: 54px; }
  .ed, .dono { grid-template-columns: 1fr; gap: 30px; }
  .dono img { max-width: 360px; }
  .svc-strip .wrap { grid-template-columns: repeat(3, 1fr); }
  .svc-strip a { border-right: 0; box-shadow: inset 0 0 0 1px rgba(242,240,231,.12); }
  .tl { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .tl li::after { display: none; }
  .gal-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .area-serv { grid-template-columns: 1fr; gap: 34px; }
  .area-mapa .mapa-slot { height: 340px; }
}

/* ==========================================================================
   CELULAR · ate 860px
   ========================================================================== */
@media (max-width: 860px) {
  body { font-size: 16px; }
  section { padding-block: 48px; }
  section.compacta { padding-block: 38px; }
  .wrap { width: calc(100% - 32px); }

  /* A barra verde no celular carrega SO' selo de autoridade. O telefone e as
     redes saem daqui e passam a viver no pe do menu, onde cabe alvo de toque
     de 44px de verdade: aqui eles tinham 17 e 25px. (direcao, 25/09/2026) */
  .authbar .wrap { justify-content: center; min-height: 46px; }
  .authbar { font-size: .84rem; }
  .authbar-esq { display: none; }
  .selos { gap: 16px; justify-content: center; width: 100%; }
  .selo { font-size: 13px; white-space: nowrap; font-weight: 700; }
  .selo svg { width: 16px; height: 16px; }
  /* os dois selos mais fortes em qualquer tela; o terceiro entra quando cabe */
  .selo:nth-child(n+3) { display: none; }

  /* cabecalho em tres zonas: logo · botao menor · hamburguer */
  .site-header .wrap { grid-template-columns: 1fr auto auto; gap: 10px; padding-block: 8px; }
  /* LOGO GRANDE NO CELULAR, padrao da casa. Ela estava com 50x56 e sumia ao
     lado do botao. O botao e os selos crescem junto, senao a barra inteira
     continua lendo como miniatura. */
  .marca img { height: 84px; }
  .menu-btn { display: flex; order: 3; width: 48px; height: 48px; }
  .menu-btn .barra { width: 24px; height: 2.5px; }
  .site-header .btn-primario { order: 2; padding: 13px 16px; font-size: .92rem; letter-spacing: .01em; }

  .nav { display: none; }
  body.menu-aberto .nav { display: flex; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--linha); }
  .nav > ul > li:last-child { border-bottom: 0; }
  .tem-drop > a::after { content: ''; }
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0;
  }
  /* AQUI vivia `body.menu-aberto .nav ul::after { content: 'Get an Estimate' }`,
     de uma versao anterior do menu. Ele mirava TODO `ul` dentro do `.nav`,
     entao saia um botao depois do submenu e outro depois da lista: os dois que
     a direcao viu. Por ser pseudo-elemento, nao aparece no DOM, e nenhuma
     consulta de `querySelectorAll` ou `innerText` o encontrava. Removido em
     25/09/2026. Conteudo de botao nao se escreve em CSS. */

  .hero .wrap { padding-block: 34px; gap: 18px; align-items: start; }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(7,40,30,.84) 0%, rgba(7,40,30,.72) 55%, rgba(7,40,30,.9) 100%);
  }
  .hero > .wrap > div:first-child { display: contents; }
  /* ORDEM DO HERO NO CELULAR, padrao da casa (direcao, 25/09/2026):
     titulo > subtitulo > texto > botao > FORMULARIO.
     O lead precisa entender o que a empresa faz antes de ver campo para
     preencher; formulario antes do texto pede dado de quem ainda nao sabe o
     que esta comprando.
     `.form-card` estava SOLTO aqui, sem escopo de `.hero`: a regra vazava para
     a pagina Get Your Estimate e empurrava o formulario para DEPOIS da coluna
     de contato. Escopo importa. */
  .hero h1 { order: 1; margin-bottom: .35em; }
  .hero-apoio { order: 2; margin: 0 0 .6em; font-size: 1.04rem; }
  .hero-resposta { order: 3; font-size: .96rem; }
  .hero-acoes { order: 4; margin-bottom: 26px; }
  .hero .form-card { order: 5; }
  .form-card { padding: 22px; }
  .hero-acoes .btn { flex: 1 1 100%; }
  .form-linha { grid-template-columns: 1fr; gap: 0; }

  .svc-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .svc-strip a { padding: 18px 10px; font-size: .86rem; }

  .svc-card { grid-template-columns: 1fr; }
  .svc-card img { aspect-ratio: 16/9; }
  .svc-card .texto { padding: 20px; }

  .ba-par { grid-template-columns: 1fr; gap: 18px; }
  .guar-in th, .guar-in td { padding: 11px 12px; font-size: .92rem; }
  .tl { grid-template-columns: 1fr; gap: 22px; }
  .tl li { padding: 0; }
  /* FAIXA DE GALERIA NO CELULAR, padrao da casa: rola na horizontal, com a
     proxima foto espiando e uma dica escrita. Em grade de duas colunas a
     faixa vira um bloco alto que empurra o resto da pagina para baixo. */
  .gal-strip {
    display: flex; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .gal-strip::-webkit-scrollbar { display: none; }
  .gal-strip img { flex: 0 0 68%; scroll-snap-align: start; }
  .area-serv { grid-template-columns: 1fr; gap: 26px; }
  .area-mapa { order: 2; }
  .area-mapa .mapa-slot { height: 280px; }
  .map-band iframe, .map-band .mapa-slot { height: 280px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer img { height: 132px; }
  .footer-base { flex-direction: column; gap: 8px; }

  .btn { padding: 15px 24px; min-height: 48px; }
  .campo input, .campo select, .campo textarea { min-height: 48px; }
  .faq summary { padding: 16px 18px; min-height: 48px; }
}

@media (max-width: 400px) {
  h1 { font-size: 1.95rem; }
  /* `.authbar .selos { display: none }` vivia aqui, de quando a barra levava o
     telefone e os selos eram o que sobrava. Agora a barra E' os selos: esconder
     deixava a faixa verde vazia em 360 e 390px, as duas larguras mais comuns.
     So apareceu na medicao; no print a faixa vazia parece proposital. */
}

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

/* ══ PAGINAS INTERNAS ═══════════════════════════════════════════════════ */

/* migalhas: a pagina interna precisa dizer de onde veio, e o BreadcrumbList
   do schema so vale se o caminho existir tambem na tela */
.migalhas { background: var(--sand); padding: 14px 0; font-size: .92rem; }
.migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.migalhas li + li::before { content: "·"; margin-right: 8px; color: var(--stone); }
.migalhas a { color: var(--terra-texto); }
.migalhas [aria-current] { color: var(--texto-suave); }

/* regua de acabamento por comodo · DOBRA PROPRIA DA INTERIOR PAINTING.
   Le-se da esquerda para a direita como uma regua, nao como tabela nem como
   cartao. No celular rola na horizontal: empilhar em lista destruiria a
   leitura de comparacao, que e a unica razao do componente existir. */
.regua { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 30px;
  border-top: 2px solid rgba(242,240,231,.28); }
.regua > div { padding: 22px 18px 4px; border-right: 1px solid rgba(242,240,231,.16); }
.regua > div:last-child { border-right: 0; }
.regua svg { width: 30px; height: 30px; fill: var(--terracotta); display: block; margin-bottom: 12px; }
.regua h3 { font-size: 1rem; margin: 0 0 6px; color: var(--sand); }
.regua .acab { font-size: 1.22rem; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.regua p { font-size: .93rem; line-height: 1.55; color: rgba(242,240,231,.78); margin: 0; }
@media (max-width: 860px) {
  /* rola na horizontal, com uma pista visivel de que ha mais a direita */
  .regua { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .regua > div { flex: 0 0 74%; scroll-snap-align: start; }
}

/* mapa embedado da area de atendimento */
.mapa-slot { padding: 0; overflow: hidden; }
.mapa-slot iframe { display: block; width: 100%; height: 100%; border: 0; min-height: 420px; }

/* ══════════════════════════════════════════════════════════════════════
   COMPONENTES EXCLUSIVOS POR PAGINA
   Cada pagina do site tem um componente que so existe nela. E a regra de
   diversidade estrutural: paginas irmas compartilham o esqueleto de
   proposito, e o que as separa e a dobra propria. A direcao apontou em
   25/09/2026 que a Interior Painting ainda lia como a Home, e a resposta
   nao e mudar o esqueleto, e dar a cada pagina o seu componente.
   Todos tem comportamento proprio no celular, declarado junto.
   ══════════════════════════════════════════════════════════════════════ */

/* ── comparativo de tres colunas · CABINET PAINTING ──────────────────── */
.comparativo { margin-top: 32px; border: 1px solid var(--linha); border-radius: var(--radius);
  overflow: hidden; background: #fff; }
.comparativo table { width: 100%; border-collapse: collapse; }
.comparativo th, .comparativo td { padding: 16px 18px; text-align: left; font-size: 1rem;
  border-bottom: 1px solid var(--linha); vertical-align: top; }
.comparativo thead th { background: var(--sand); font-size: .84rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); }
.comparativo .destaque { background: rgba(224,122,79,.09); }
.comparativo thead .destaque { background: var(--cypress); color: #fff; }
.comparativo tbody .destaque { font-weight: 700; color: var(--texto); }
.comparativo tbody th { font-weight: 700; color: var(--cypress); width: 26%; }
.comparativo tr:last-child td, .comparativo tr:last-child th { border-bottom: 0; }
@media (max-width: 860px) {
  /* tabela de 4 colunas nao cabe em 360px. Vira um cartao por opcao, com o
     rotulo da coluna antes do valor, e a coluna destacada continua destacada. */
  .comparativo table, .comparativo thead, .comparativo tbody, .comparativo tr,
  .comparativo th, .comparativo td { display: block; }
  .comparativo thead { display: none; }
  .comparativo tbody th { width: auto; background: var(--cypress); color: #fff;
    font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
  .comparativo td { padding-left: 18px; }
  .comparativo td::before { content: attr(data-col); display: block; font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 5px; }
}

/* ── tres blocos numerados em coluna · CABINET PAINTING ──────────────── */
.numerados { display: grid; gap: 18px; margin: 30px auto 0; max-width: 820px;
  list-style: none; padding: 0; }
.numerados li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius); padding: 20px 22px; }
.numerados .n { width: 42px; height: 42px; border-radius: 50%; background: var(--cypress);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.numerados h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--cypress); }
.numerados p { margin: 0; color: var(--texto-suave); }
@media (max-width: 560px) { .numerados li { grid-template-columns: 1fr; gap: 12px; } }

/* ── diagrama de camadas em corte · EXTERIOR PAINTING ────────────────── */
.camadas { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center;
  margin-top: 34px; }
.corte { display: flex; flex-direction: column-reverse; border-radius: 10px; overflow: hidden;
  box-shadow: var(--sombra); }
.corte > div { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  font-weight: 700; font-size: .92rem; color: #fff; }
.corte .c1 { background: #6b5545; }
.corte .c2 { background: #8a6f59; }
.corte .c3 { background: #a98b6f; }
.corte .c4 { background: var(--cypress); }
.corte .c5 { background: var(--terracotta); color: var(--cypress-deep); }
.corte .marca-n { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: .82rem; flex: none; }
.corte .c5 .marca-n { background: rgba(7,40,30,.2); }
.camadas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.camadas li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.camadas .li-n { font-weight: 800; color: var(--terracotta); }
.camadas h3 { margin: 0 0 4px; font-size: 1.02rem; }
.camadas p { margin: 0; color: var(--texto-suave); font-size: .98rem; }
@media (max-width: 860px) {
  /* o corte gira para vertical e a legenda desce, como a copy pede */
  .camadas { grid-template-columns: 1fr; gap: 26px; }
  .corte { flex-direction: row; }
  .corte > div { flex: 1; height: 110px; flex-direction: column; justify-content: center;
    gap: 6px; padding: 0 6px; text-align: center; font-size: .72rem; line-height: 1.25; }
}

/* ── comparador antes e depois em tela cheia · DRYWALL ───────────────── */
.ba-tela { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 30px;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); }
.ba-tela figure { margin: 0; position: relative; }
.ba-tela img { width: 100%; aspect-ratio: 3/2; object-fit: cover; height: auto; }
.ba-tela figcaption { position: absolute; left: 0; bottom: 0; right: 0;
  background: linear-gradient(180deg, rgba(7,40,30,0) 0%, rgba(7,40,30,.86) 70%);
  color: #fff; padding: 46px 20px 16px; font-size: .84rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.ba-tela .depois figcaption { color: var(--terracotta); }
@media (max-width: 700px) { .ba-tela { grid-template-columns: 1fr; } }

/* ── lista de verificacao em duas colunas · HANDYMAN ─────────────────── */
.checklist { margin-top: 30px; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--sombra); }
.checklist ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 46px; }
.checklist li { break-inside: avoid; display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.checklist .caixa { width: 18px; height: 18px; border: 2px solid var(--cypress); border-radius: 3px;
  margin-top: 3px; }
.checklist .rodape-lista { margin: 22px 0 0; color: var(--texto-suave); font-size: .97rem;
  border-top: 1px solid var(--linha); padding-top: 18px; }
@media (max-width: 720px) { .checklist { padding: 22px 20px; } .checklist ul { columns: 1; } }

/* ── contagem regressiva ate a mudanca · GOOSE CREEK ─────────────────── */
/* auto-fit porque o numero de etapas vem da copy, nao do componente:
   a Goose Creek tem cinco e o North Charleston tem quatro */
.regressiva { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0; margin-top: 34px;
  position: relative; }
.regressiva::before { content: ''; position: absolute; left: 8%; right: 8%; top: 27px; height: 3px;
  background: rgba(242,240,231,.24); }
.regressiva > div { text-align: center; padding: 0 12px; position: relative; }
.regressiva .prazo { display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--cypress-deep);
  border: 3px solid rgba(242,240,231,.24); color: var(--sand); font-weight: 800;
  font-size: .88rem; line-height: 1.05; position: relative; z-index: 1;
  /* Rotulo de DUAS palavras ("Move day") quebra em duas linhas dentro do
     circulo. `justify-content` centra a caixa de linha, mas cada linha ainda
     obedece ao `text-align`, que era `left`: o texto saia torto.
     Regra geral: circulo com rotulo leva `text-align: center`, nao so' flex. */
  text-align: center; padding: 0 4px; }
.regressiva .marco .prazo { background: var(--terracotta); border-color: var(--terracotta);
  color: var(--cypress-deep); }
.regressiva h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--sand); }
.regressiva p { font-size: .94rem; color: rgba(242,240,231,.78); margin: 0; }
@media (max-width: 760px) {
  /* vira vertical: quatro etapas lado a lado ficariam com 80px cada em 360px */
  .regressiva { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .regressiva::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  /* O bloco tem TRES filhos (marcador, titulo, texto) numa grade de duas
     colunas: o terceiro caia na coluna de 56px do marcador e o texto saia com
     uma palavra por linha. Titulo e texto ficam ambos na coluna 2.
     Regra geral: linha do tempo no celular exige conferir ONDE cada filho cai,
     nao so' se a grade virou uma coluna. */
  .regressiva > div { display: grid; grid-template-columns: 56px 1fr;
    column-gap: 16px; row-gap: 2px; text-align: left; padding: 0; align-items: start; }
  .regressiva > div > .prazo { grid-column: 1; grid-row: 1 / span 2; }
  .regressiva > div > h3 { grid-column: 2; grid-row: 1; margin: 4px 0 2px; }
  .regressiva > div > p { grid-column: 2; grid-row: 2; }
}

/* ── tres blocos de regra com icone · CHARLESTON ─────────────────────── */
.regras3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.regras3 > div { background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--terracotta);
  border-radius: var(--radius); padding: 24px 24px 22px; }
.regras3 svg { width: 30px; height: 30px; fill: var(--cypress); margin-bottom: 14px; display: block; }
.regras3 h3 { margin: 0 0 8px; font-size: 1.06rem; color: var(--cypress); }
.regras3 p { margin: 0 0 12px; color: var(--texto-suave); font-size: .98rem; }
.regras3 .consequencia { margin: 0; font-weight: 700; color: var(--terra-texto); font-size: .95rem; }
@media (max-width: 900px) { .regras3 { grid-template-columns: 1fr; } }

/* ── calendario de doze meses · SUMMERVILLE ──────────────────────────── */
.calendario { margin-top: 32px; }
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.meses > div { border-radius: 6px; padding: 14px 4px 16px; text-align: center; }
.meses .m { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.meses .j0 { background: rgba(242,240,231,.10); color: rgba(242,240,231,.62); }
.meses .j1 { background: rgba(242,240,231,.20); color: rgba(242,240,231,.85); }
.meses .j2 { background: var(--terracotta); color: var(--cypress-deep); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; font-size: .93rem;
  color: rgba(242,240,231,.82); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 9px; }
.cal-legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
@media (max-width: 860px) {
  /* DUAS LINHAS DE SEIS, nao rolagem lateral. Doze colunas em 360px dao 26px
     por mes e obrigam o usuario a arrastar para ver o ano inteiro, que e
     justamente o que a dobra precisa mostrar de uma vez. */
  .calendario { overflow: visible; padding-bottom: 0; }
  .meses { grid-template-columns: repeat(6, 1fr); gap: 6px; min-width: 0; }
  .meses > div { padding: 12px 2px 14px; }
  .cal-legenda { gap: 12px 18px; margin-top: 16px; }
}

/* ── cronograma de quatro dias · NORTH CHARLESTON ────────────────────── */
.cronograma { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.cronograma > div { background: var(--cypress); color: var(--sand); border-radius: var(--radius);
  padding: 26px 24px; border-top: 5px solid var(--terracotta); }
.cronograma .dia { font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terracotta); margin: 0 0 10px; }
.cronograma h3 { margin: 0 0 8px; font-size: 1.06rem; color: #fff; }
.cronograma p { margin: 0; font-size: .96rem; color: rgba(242,240,231,.82); }
@media (max-width: 980px) { .cronograma { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cronograma { grid-template-columns: 1fr; } }

/* ── faixa de exposicao, agua para o interior · MOUNT PLEASANT ───────── */
.exposicao { margin-top: 34px; }
.faixa-grad { display: grid; grid-template-columns: repeat(3, 1fr); height: 92px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #2a6d80 0%, #5b8a7a 52%, var(--cypress) 100%); }
.faixa-grad > div { display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.28); text-align: center; padding: 0 8px; }
.faixa-grad > div:last-child { border-right: 0; }
.exp-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.exp-notas h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--cypress); }
.exp-notas p { margin: 0; color: var(--texto-suave); font-size: .97rem; }
@media (max-width: 820px) {
  .faixa-grad { grid-template-columns: 1fr; height: auto;
    background: linear-gradient(180deg, #2a6d80 0%, #5b8a7a 52%, var(--cypress) 100%); }
  .faixa-grad > div { height: 58px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); }
  .exp-notas { grid-template-columns: 1fr; gap: 16px; }
}

/* ── linha do tempo vertical continua · HOW WE WORK ──────────────────── */
.passos-v { position: relative; max-width: 880px; margin: 0 auto; padding-left: 78px; }
.passos-v::before { content: ''; position: absolute; left: 27px; top: 14px; bottom: 14px;
  width: 3px; background: var(--linha); }
.passos-v > div { position: relative; padding: 0 0 52px; }
.passos-v > div:last-child { padding-bottom: 0; }
.passos-v .marcador { position: absolute; left: -78px; top: 0; width: 58px; height: 58px;
  border-radius: 50%; background: var(--cypress); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 1.24rem;
  box-shadow: 0 0 0 8px var(--fundo); }
.passos-v h2 { font-size: 1.5rem; margin: 10px 0 12px; }
@media (max-width: 720px) {
  .passos-v { padding-left: 54px; }
  .passos-v::before { left: 19px; }
  .passos-v .marcador { left: -54px; width: 42px; height: 42px; font-size: 1.02rem;
    box-shadow: 0 0 0 6px var(--fundo); }
  .passos-v h2 { font-size: 1.28rem; }
}

/* ── retrato editorial de altura total · ABOUT ───────────────────────── */
.retrato { display: grid; grid-template-columns: 0.85fr 1fr; gap: 0; align-items: stretch;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); background: #fff; }
.retrato img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.retrato .texto { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.retrato h2 { margin-top: 0; }
@media (max-width: 860px) {
  .retrato { grid-template-columns: 1fr; }
  .retrato img { min-height: 300px; max-height: 380px; }
  .retrato .texto { padding: 30px 24px; }
}

/* ── coluna estreita de leitura · ABOUT e paginas legais ─────────────── */
.leitura { max-width: 660px; margin-inline: auto; }
.leitura h2 { margin-top: 2.2em; }
.leitura h2:first-child { margin-top: 0; }
.leitura h3 { margin-top: 1.8em; font-size: 1.1rem; color: var(--cypress); }
.leitura p, .leitura li { font-size: 1.02rem; line-height: 1.72; }
.leitura ul { padding-left: 1.2em; }
.leitura li { margin-bottom: .5em; }
.leitura .data { font-size: .94rem; color: var(--texto-suave); margin-bottom: 2.4em; }

/* ── blocos curtos com icone · HOW WE WORK e ABOUT ───────────────────── */
.blocos-icone { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.blocos-icone.tres { grid-template-columns: repeat(3, 1fr); }
.blocos-icone > div { background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  padding: 24px 22px; }
.blocos-icone svg { width: 28px; height: 28px; fill: var(--terracotta); margin-bottom: 12px; display: block; }
.blocos-icone h3 { margin: 0 0 7px; font-size: 1.02rem; color: var(--cypress); }
.blocos-icone p { margin: 0; color: var(--texto-suave); font-size: .97rem; }
@media (max-width: 900px) { .blocos-icone, .blocos-icone.tres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blocos-icone, .blocos-icone.tres { grid-template-columns: 1fr; } }

/* ── pastilhas de bairro · paginas de cidade ─────────────────────────── */
.pastilhas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.pastilhas li { background: #fff; border: 1px solid var(--linha); border-radius: 999px;
  padding: 9px 18px; font-size: .96rem; font-weight: 600; color: var(--cypress); }
.sobre-verde .pastilhas li { background: rgba(242,240,231,.12); border-color: rgba(242,240,231,.22);
  color: var(--sand); }

/* ── dois blocos curtos lado a lado · GOOSE CREEK ────────────────────── */
.dois-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.dois-blocos > div { background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  padding: 28px 28px 26px; }
.dois-blocos h3 { margin: 0 0 10px; color: var(--cypress); font-size: 1.1rem; }
.dois-blocos p { margin: 0; color: var(--texto-suave); }
@media (max-width: 820px) { .dois-blocos { grid-template-columns: 1fr; } }

/* ── galeria com filtro · GALLERY ────────────────────────────────────── */
.gal-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gal-filtros button { border: 1px solid var(--linha); background: #fff; border-radius: 999px;
  padding: 10px 18px; font: inherit; font-size: .94rem; font-weight: 600; color: var(--cypress);
  cursor: pointer; min-height: 44px; }
.gal-filtros button[aria-pressed="true"] { background: var(--cypress); color: #fff;
  border-color: var(--cypress); }
.gal-grupo { margin-bottom: 18px; }
.gal-grupo .rotulo { font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-suave); margin: 0 0 10px; }
.gal-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.gal-grade figure { margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sombra); background: #fff; }
.gal-grade img { width: 100%; aspect-ratio: 4/3; object-fit: cover; height: auto; }
.gal-grade figcaption { padding: 12px 16px 14px; font-size: .92rem; color: var(--texto-suave); }
.gal-vazio { text-align: center; color: var(--texto-suave); padding: 40px 0; }
@media (max-width: 900px) { .gal-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gal-grade { grid-template-columns: 1fr; } }

/* O COMPARADOR DESLIZANTE FOI REMOVIDO em 25/09/2026, por decisao da direcao.
   A galeria e' so' um conjunto de fotos filtravel por servico, que o cliente
   vai alimentando. Plugin de antes e depois nao entra em galeria de site
   nenhum. O componente foi apagado da folha de proposito: assim o proximo
   build nao tem onde se apoiar.
   Comparador de antes e depois continua valendo DENTRO de uma dobra de
   argumento (`.ba-big` na Home, `.ba-tela` na pagina de drywall), onde as duas
   fotos aparecem lado a lado e ninguem precisa arrastar nada. */

/* ── tres passos em linha · GET AN ESTIMATE ──────────────────────────── */
.passos-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px;
  counter-reset: passo; }
.passos-linha > div { position: relative; padding-top: 58px; }
.passos-linha > div::before { counter-increment: passo; content: counter(passo);
  position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--terracotta); color: var(--cypress-deep); font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.passos-linha h3 { margin: 0 0 7px; font-size: 1.06rem; color: var(--cypress); }
.passos-linha p { margin: 0; color: var(--texto-suave); font-size: .98rem; }
@media (max-width: 820px) { .passos-linha { grid-template-columns: 1fr; gap: 18px; } }

/* ── formulario longo com coluna de contato · GET AN ESTIMATE ────────── */
.form-longo { display: grid; grid-template-columns: 1.9fr 1fr; gap: 40px; align-items: start; }
.form-longo .form-card { max-width: none; }
.coluna-contato { background: var(--sand); border-radius: var(--radius); padding: 30px 28px; }
.coluna-contato h2 { font-size: 1.24rem; margin-top: 0; }
.coluna-contato .f-contato li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.coluna-contato .f-contato svg { width: 17px; height: 17px; fill: var(--terracotta); flex: none; margin-top: 3px; }
.coluna-contato .mapa-slot { margin-top: 22px; border-radius: 10px; overflow: hidden; }
.coluna-contato .mapa-slot iframe { min-height: 260px; }
@media (max-width: 960px) {
  /* no celular o formulario vem primeiro e o contato desce, como a copy pede */
  .form-longo { grid-template-columns: 1fr; gap: 26px; }
}

/* ── hero sem formulario · ABOUT, GALLERY e paginas legais ───────────── */
.hero.simples .wrap { grid-template-columns: 1fr; }
.hero.simples .hero-texto { max-width: 820px; }
.hero.legal { color: var(--texto); }
.hero.legal::before, .hero.legal::after { display: none; }
.hero.legal { background: var(--sand); padding-block: 64px 54px; }
.hero.legal h1 { color: var(--cypress); }
/* O hero comum e uma grade de duas colunas por causa do formulario. A pagina
   legal nao tem formulario, e sem zerar a grade o titulo centrava dentro da
   primeira coluna enquanto o corpo centrava no wrap inteiro. Medido em
   25/09/2026: titulo em 256px, corpo em 390px. */
/* O hero legal deixa de ser GRADE e volta a ser bloco. Nao bastava trocar as
   colunas: `margin-inline: auto` num item de grade ABSORVE a folga e encolhe o
   item em vez de centra-lo, entao a .leitura saia com 331px em 555 enquanto a
   do corpo tinha 660px em 390. Como bloco, o hero e o corpo usam exatamente a
   mesma conta. Medido em 25/09/2026. */
.hero.legal .wrap { display: block; padding-block: 0; }
.hero.simples .wrap { justify-items: stretch; }

/* Componentes claros colocados sobre a faixa verde: o texto de apoio usa
   --texto-suave, que e cinza escuro e some no verde. Medido na dobra de
   camadas da Exterior Painting em 25/09/2026. */
.sobre-verde .camadas p,
.sobre-verde .exp-notas p,
.sobre-verde .regua p { color: rgba(242,240,231,.82); }
.sobre-verde .camadas h3,
.sobre-verde .exp-notas h3 { color: var(--sand); }

/* CORRECAO DE CONTRASTE, medida em 25/09/2026.
   O terracota puro (#E07A4F) sobre o verde das dobras (#0C3B2E) da 4,20:1 e
   REPROVA no minimo AA de texto pequeno (4,5:1). A folha afirmava 5,3:1, que
   era a medicao contra o verde escuro do rodape (#07281E), onde ele de fato
   passa. Dobra e rodape usam verdes diferentes, e a conta foi feita no verde
   errado. Aqui entra um terracota levemente clareado, so para texto pequeno
   sobre o verde da dobra: 4,84:1, mesma familia de cor. */
:root { --terracotta-claro: #E68A57; }
.sobre-verde .eyebrow,
.sobre-verde .camadas .li-n,
.cronograma .dia { color: var(--terracotta-claro); }
.sobre-verde .nota-area,
.sobre-verde .area-lista p { color: rgba(242,240,231,.82); }
.sobre-verde .area-lista h2 { color: #fff; }

/* A tabela de garantia da Home vive sobre a faixa verde. Na How We Work ela
   entra dentro do passo 5, sobre fundo claro, entao a variante inverte so o
   que depende do fundo. Mesma tabela, mesma informacao. */
.guar-claro { background: #fff; border: 1px solid var(--linha); }
.guar-claro caption { color: var(--texto-suave); }
.guar-claro th, .guar-claro td { color: var(--texto); border-bottom: 1px solid var(--linha); }
.guar-claro tbody td:first-child { border-right: 1px solid var(--linha); }

/* Slot da foto do dono. A copy da About manda entregar o espaco DESENHADO e
   SINALIZADO enquanto a foto real nao chega, e proibe retrato de IA ou de
   banco de imagem. Entao o slot nao e um buraco: e um componente que diz o
   que falta, igual ao slot de avaliacoes do Google. */
.slot-foto { background: var(--sand); border: 2px dashed var(--stone); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px; min-height: 480px; color: var(--texto-suave); }
.slot-foto svg { width: 42px; height: 42px; fill: var(--stone); margin-bottom: 16px; }
.slot-foto strong { display: block; color: var(--cypress); margin-bottom: 8px; font-size: 1.04rem; }
.slot-foto p { margin: 0; max-width: 320px; font-size: .97rem; }
@media (max-width: 860px) { .slot-foto { min-height: 300px; } }

/* Hero e CTA sem foto. A Gallery afirma, no proprio texto, que toda imagem da
   pagina e trabalho real do cliente. Um fundo gerado por IA na mesma pagina
   contradiz a frase, entao esta variante usa so a cor da marca. */
.hero.sem-foto::before { background: var(--cypress); }
.hero.sem-foto::after { background: linear-gradient(120deg, rgba(7,40,30,.55) 0%, rgba(7,40,30,.25) 100%); }
.cta-final.sem-foto::before { background: var(--cypress-deep); }
.cta-final.sem-foto::after { background: linear-gradient(180deg, rgba(12,59,46,.55) 0%, rgba(7,40,30,.75) 100%); }

/* Token longo (e-mail, url) nao pode estourar a largura da coluna de leitura.
   Em 360px o "contact@magnoliaprimeservices.com" empurrava a pagina legal
   134px para fora. */
.leitura { overflow-wrap: break-word; }

/* Alvo de toque da barra de autoridade. Os icones tem 17px e o telefone 25px
   de altura: abaixo dos 44px do WCAG 2.5.5 e das duas plataformas. O desenho
   nao muda, so a area clicavel cresce por padding e margem negativa. */
@media (max-width: 860px) {
  .authbar-esq a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .authbar-esq .tel-destaque { margin-left: -8px; }
  .authbar-esq svg { width: 18px; height: 18px; }
}

/* Migalhas no celular: o link tinha 40x16 e nao alcanca alvo de toque. O
   respiro sai da barra e vai para o link, entao a altura total nao cresce. */
@media (max-width: 860px) {
  .migalhas { padding: 0; }
  .migalhas a, .migalhas [aria-current] { display: inline-block; padding: 14px 0; }
  .migalhas li + li::before { align-self: center; }
  .migalhas ol { align-items: center; }
}

/* Links das colunas do rodape no celular. Eram de 17 a 28px de altura, longe
   dos 44px. O respiro vem do proprio link e a margem entre itens encolhe, para
   a coluna nao dobrar de tamanho. */
@media (max-width: 860px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li > a,
  .coluna-contato .f-contato a { display: inline-block; padding: 12px 0; min-height: 44px; }
  .f-contato li { margin-bottom: 2px; align-items: center; }
  .f-contato svg { margin-top: 0; }
  /* eram 4px entre o fim do horario e o titulo Follow Us: os dois blocos liam
     como um so' */
  .f-contato { margin-bottom: 8px; }
  .f-seguir { margin-top: 24px; }
}

@media (max-width: 860px) {
  /* botao de rede social do rodape: 40px nao alcanca o minimo */
  .f-redes a { width: 44px; height: 44px; }
  /* lista de cidades da dobra de area de atendimento */
  .area-lista li > a { display: inline-block; padding: 10px 0; min-height: 44px; }
}

@media (max-width: 860px) {
  /* linha de base do rodape: direitos, assinatura da agencia e paginas legais */
  .footer-base a { display: inline-block; padding: 12px 0; min-height: 44px; }
  .footer-base { gap: 4px; }
}


/* ══ LEVA DA DIRECAO · 25/09/2026 ══════════════════════════════════════ */

/* O termo que a pagina disputa sai no laranja da marca dentro do H1: o
   servico nas paginas de servico, a cidade nas de cidade. Sobre o veu escuro
   do hero o terracota da 4,2:1, e o H1 e texto grande, cujo minimo e 3:1. */
.hero h1 .termo { color: var(--terracotta); }

/* Texto menor alinhado a esquerda fica JUSTIFICADO, sempre. Titulo e
   antetitulo nao, e texto centralizado tambem nao. Antes so' algumas dobras
   eram justificadas e a pagina lia desalinhada de dobra para dobra. */
.texto-menor, .texto-menor p, .leitura p, .leitura li {
  /* sem hifenizacao: a direcao recusou palavra quebrada no hero em 24/09 e a
     recusa vale para todo texto justificado do site */
  text-align: justify; text-justify: inter-word; hyphens: none;
}
.centro .texto-menor, .centro .texto-menor p,
.centro .leitura p, .cta-final p, .gbp-slot p, .form-nota, .gal-vazio,
.texto-menor.centro {
  text-align: center;
}
.area-lista .texto-menor, .area-lista p { text-align: left; }

/* Coluna de contato da Get Your Estimate: titulo, linhas de contato e
   paragrafo comecam todos na MESMA margem, e o icone fica numa calha a
   esquerda dela. Antes o texto de cada linha comecava depois do icone e a
   borda esquerda alternava entre icone e texto. */
.coluna-contato { padding-left: 58px; }
.coluna-contato .f-contato li { display: flex; align-items: flex-start; gap: 12px; }
.coluna-contato .f-contato svg { margin-left: -29px; flex: none; margin-top: 4px; }
.coluna-contato > p { text-align: justify; text-justify: inter-word; }
.coluna-contato .mapa-slot, .coluna-contato .btn { margin-left: 0; }
@media (max-width: 560px) {
  .coluna-contato { padding-left: 46px; }
  .coluna-contato .f-contato svg { margin-left: -29px; }
}

/* O bloco de topo da Get Your Estimate acompanha o formulario, que e' alinhado
   a esquerda. Centralizado sobre um formulario a esquerda, parecia torto. */
.topo-estimate { max-width: 760px; }
.topo-estimate .texto-menor { text-align: justify; text-justify: inter-word; }

/* O <ul> da coluna de contato herdava recuo e empurrava a linha inteira para
   fora da margem do titulo. Zerado explicitamente, o icone cai na calha e o
   texto encosta na mesma margem do h2, do paragrafo e do mapa. */
.coluna-contato .f-contato { list-style: none; margin: 0 0 22px; padding: 0; }


/* Dobra sem foto de fundo tem respiro menor. A secao ja tem 74px e o wrap
   soma mais 72 ou 84: quase 150px em cima e embaixo. Numa dobra com foto isso
   e' proposital, porque e o que deixa a imagem aparecer. Sem foto vira buraco,
   e foi o que a direcao apontou na galeria. Medido em 25/09/2026. */
.hero.sem-foto, .cta-final.sem-foto { padding-block: 0; }
.hero.sem-foto .wrap { padding-block: 58px; }
.cta-final.sem-foto .wrap { padding-block: 62px; }
@media (max-width: 860px) {
  .hero.sem-foto .wrap { padding-block: 42px; }
  .cta-final.sem-foto .wrap { padding-block: 46px; }
}


/* ══ MENU DO CELULAR · PAINEL DE TELA CHEIA ════════════════════════════
   Padrao da casa (direcao, 25/09/2026): logo no topo a esquerda, lista de
   paginas abaixo e, no pe, o botao de ligar com o numero grande, com redes e
   e-mail embaixo dele. Antes o menu era uma gaveta que abria dentro do
   cabecalho, e o telefone morava na barra verde com 25px de altura. */
@media (max-width: 860px) {
  body.menu-aberto .nav {
    position: fixed; inset: 0; z-index: 60;
    background: var(--sand);
    flex-direction: column;
    /* O `.nav` de desktop e uma linha centrada. Virando coluna, aquele
       `justify-content: center` herdado CENTRAVA a coluna e jogava o topo do
       painel para fora da area rolavel: a logo saia para y=-21 mesmo com
       scrollTop em zero. Alinhar ao inicio e obrigatorio. (25/09/2026) */
    justify-content: flex-start; align-items: stretch;
    padding: 0 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 8px; border-bottom: 1px solid var(--linha);
    background: var(--sand); flex: none;
  }
  /* A logo do painel usa a MESMA altura da do cabecalho fechado (84px). Ela
     tinha 56px e o menu aberto parecia outro site. Padrao da casa: abrir o
     menu nao muda o tamanho da marca. (direcao, 25/09/2026) */
  .nav-marca img { height: 84px; width: auto; display: block; }
  .nav-fechar {
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(12,59,46,.07); display: flex; align-items: center;
    justify-content: center; cursor: pointer; flex: none;
  }
  .nav-fechar svg { width: 22px; height: 22px; fill: var(--cypress); }

  /* O `.nav-topo` e' sticky; sem este respiro ele cobre o primeiro item da
     lista, que aparecia cortado pela metade. */
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; margin: 10px 0 0; }
  .nav > ul > li { border-bottom: 1px solid var(--linha); }
  .nav > ul > li:last-child { border-bottom: 0; }
  .nav > ul > li > a {
    padding: 11px 2px; display: flex; align-items: center; min-height: 46px;
    border-bottom: 0; font-size: 1.1rem; font-weight: 700; color: var(--cypress);
  }
  /* Os subitens de Services vinham com 43px, um pixel abaixo do minimo.
     `min-height` garante o alvo independente do padding, e o conjunto passa a
     caber em 844px de altura sem o pe do menu sair da tela. */
  .nav .drop a {
    display: flex; align-items: center; min-height: 44px; padding: 4px 2px;
    font-size: 1rem; font-weight: 600;
  }
  /* No celular o submenu nao e' um cartao: fica raso, com recuo e um filete
     a esquerda, senao o branco do dropdown de desktop vira uma caixa solta no
     meio do painel. */
  .nav .drop {
    padding: 0 0 4px 16px; background: transparent; box-shadow: none; border: 0;
    border-left: 2px solid var(--linha); margin: 2px 0 6px 2px;
  }
  .nav .drop a { color: var(--texto); }

  /* pe do painel: ligar em destaque, depois redes e e-mail */
  /* NAO usar `margin-top: auto` aqui. Num contentor com overflow, a margem
     automatica empurra o conteudo para antes do inicio da area rolavel: a logo
     saiu para y=-22 e o botao de fechar para y=-4, inalcancaveis. O pe fica
     logo depois da lista, com margem normal. (medido em 25/09/2026) */
  .nav-pe { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); }
  /* So' o numero, grande, laranja e centralizado. Sem caixa: a direcao tirou
     os dois botoes daqui e o telefone nao deve virar mais um.
     A cor e `--terra-texto` e nao o terracota puro porque terracota sobre a
     areia do painel mede 2,60:1 e reprova em qualquer tamanho; este da 4,98:1
     e continua lendo como laranja. */
  /* `.nav a` (0,1,1) vence `.nav-call` (0,1,0) e forcava `inline-block`, o que
     encolhia a caixa e tirava o numero do centro: ele ficava em x=119 de 195.
     Terceira vez que a regra generica do menu atropela um componente proprio;
     por isso a regra inteira sobe de especificidade. */
  .nav .nav-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 0; text-decoration: none; min-height: 52px;
    text-transform: none; letter-spacing: normal; width: 100%;
  }
  .nav .nav-call, .nav .nav-call span { color: var(--terra-texto); }
  .nav-call svg { width: 24px; height: 24px; fill: var(--terra-texto); flex: none; }
  .nav-call span { font-size: 1.62rem; font-weight: 800; letter-spacing: -.01em; }
  .nav-redes { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
  .nav-redes a {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(12,59,46,.07); display: flex; align-items: center; justify-content: center;
  }
  .nav-redes svg { width: 21px; height: 21px; fill: var(--cypress); }
}

/* No desktop o painel nao existe: os dois blocos sao exclusivos do celular */
@media (min-width: 861px) {
  .nav-topo, .nav-pe { display: none; }
}

/* Telas estreitas: o terceiro selo nao cabe e o numero encolhe um ponto */
@media (max-width: 400px) {
  .selos { gap: 10px; }
  .selo { font-size: 12.5px; }
  .nav-call span { font-size: 1.46rem; }
}


/* ══ RODAPE NO CELULAR · ORDEM PADRAO DA CASA ══════════════════════════
   (direcao, 25/09/2026, vale para todo site)
   1. marca · 2. CONTACT · 3. Services · 4. Areas We Serve
   Contato sobe porque e a unica coluna que resolve alguma coisa para quem
   chegou ao fim da pagina no celular: telefone, e-mail e horario. Lista de
   servicos e de cidades e navegacao, e navegacao pode esperar.

   E a ultima linha tem ordem fixa:
   1. Privacy Policy e Terms · 2. All rights reserved · 3. Powered by
   O que e obrigacao legal vem primeiro, a assinatura da agencia por ultimo. */
@media (max-width: 860px) {
  .footer-grid { display: flex; flex-direction: column; }
  .footer-grid > div:first-child { order: 1; }
  .f-col-contato  { order: 2; }
  .f-col-servicos { order: 3; }
  .f-col-areas    { order: 4; }

  .footer-base { display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 2px; }
  .footer-base > span:nth-child(3) { order: 1; }   /* Privacy e Terms */
  .footer-base > span:nth-child(1) { order: 2; }   /* All rights reserved */
  .footer-base > span:nth-child(2) { order: 3; }   /* Powered by The Minds Lab */
}

/* Dica de arrastar da faixa de galeria. O texto vive no HTML, nunca em
   `content` de CSS: conteudo escrito em CSS nao aparece no DOM e escapa de
   toda trava, como o botao fantasma do menu em 25/09/2026. */
.gal-dica { display: none; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 0; font-size: .86rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--terracotta); }
.gal-dica svg { width: 18px; height: 18px; fill: var(--terracotta); }
/* `.sobre-verde p` (0,1,1) vencia `.gal-dica` (0,1,0) e a dica saia na cor do
   corpo da dobra. As duas variantes sobem de especificidade. Sobre o verde vale
   o terracota clareado (4,84:1); sobre claro, o escurecido (4,98:1). */
section.sobre-verde .gal-dica { color: var(--terracotta-claro); }
section.sobre-verde .gal-dica svg { fill: var(--terracotta-claro); }
section:not(.sobre-verde) .gal-dica { color: var(--terra-texto); }
section:not(.sobre-verde) .gal-dica svg { fill: var(--terra-texto); }

/* A dica so' existe no celular, onde a faixa arrasta. Esta regra fica DEPOIS
   da base de propósito: anexada antes, a base a sobrescrevia por ordem. */
@media (max-width: 860px) { .gal-dica { display: flex; } }