/* ==========================================================================
   Jooy Atlas — componentes globais
   Os 20 componentes de orientacao-design.md §3. Depende de tokens.css e base.css.
   ========================================================================== */

/* ----- Cabeçalho de seção ---------------------------------------------- */
.secao__cabecalho { margin-bottom: var(--e-7); }
.secao__cabecalho .overline { color: var(--gold-text); margin-bottom: var(--e-3); }
.secao--navy .secao__cabecalho .overline,
.secao--escura .secao__cabecalho .overline { color: var(--gold); }
.secao__titulo { margin-bottom: var(--e-4); }
.secao__cabecalho > :last-child { margin-bottom: 0; }

.secao__cabecalho--centro { text-align: center; }
.secao__cabecalho--linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-6);
  align-items: flex-end;
  justify-content: space-between;
}

.secao--compacta { padding-block: var(--e-7); }
.medida-centro { max-width: 62ch; margin-inline: auto; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: gap var(--dur-rapida) var(--ease);
}
.link-seta:hover { gap: var(--e-3); }
.secao--navy .link-seta, .secao--escura .link-seta, .faixa-cta .link-seta { color: var(--white); }

.nota {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--raio);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  max-width: 80ch;
}
.nota .icone { color: var(--gold-text); margin-top: 2px; }
.nota--atencao { border-left-color: var(--incendio); background: var(--gray-100); }
.nota--atencao .icone { color: var(--incendio); }

/* ----- Hero (T1) -------------------------------------------------------- */
/* O assunto da foto — a torre de 30 m — fica no terço direito do enquadramento.
   Todo o texto vive à esquerda, e o gradiente é assimétrico: opaco onde há
   letra, quase transparente onde está o reservatório.
   O .hero é grid, não flex: como item flex, o .container do texto tinha suas
   margens automáticas respeitadas e o bloco inteiro era centralizado. */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(84vh, 780px);
  padding-block: var(--e-9);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

/* A torre está a 47% do quadro da foto. Renderizando a imagem a 134% da largura
   da seção, ancorada à esquerda, o assunto vai para ~63% — o terço direito —
   e o terço esquerdo fica livre para o texto. O excedente sai pelo overflow
   hidden da seção. `object-position` sobe o corte para não decepar o topo do
   reservatório; a base sai pelo rodapé, que é como um hero deve terminar. */
.hero__fundo {
  position: absolute;
  top: 0;
  left: 0;
  width: 134%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 38%;
  opacity: .62;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(7, 28, 49, .97) 0%,
      rgba(7, 28, 49, .93) 26%,
      rgba(7, 28, 49, .70) 46%,
      rgba(7, 28, 49, .26) 66%,
      rgba(7, 28, 49, .34) 100%),
    linear-gradient(to top, rgba(4, 18, 31, .72) 0%, rgba(4, 18, 31, 0) 26%);
}

.hero__container { position: relative; z-index: 1; }

/* Bloco de texto encostado à esquerda do container — sem margem automática,
   que era o que centralizava tudo. */
.hero__interno { max-width: 44rem; }

.hero__overline { color: var(--gold); margin-bottom: var(--e-4); }

/* Abaixo do máximo do sistema (3.75rem). A conta que define o teto: "RESERVATÓRIOS"
   tem 13 caracteres e Michroma anda ~0.96em por caractere, então a 52 px a palavra
   mede ~650 px e cabe nos 704 px da coluna. A 60 px mediria 735 px e era partida
   no meio pelo overflow-wrap. */
.hero__titulo { font-size: clamp(1.5rem, 4.9vw, 3.25rem); margin-bottom: var(--e-4); }

.hero__chamada {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: var(--e-4);
}

.hero__apoio {
  color: var(--silver);
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-7); }

/* padding-right abre passagem para o botão flutuante de WhatsApp, que ocupa o
   canto inferior direito. */
.hero__legenda {
  margin-top: var(--e-9);
  margin-left: auto;
  padding-right: 76px;
  max-width: 42ch;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--white-a70);
  text-align: right;
}

@media (max-width: 1200px) {
  .hero__interno { max-width: 36rem; }
  .hero__fundo { width: 126%; }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-block: var(--e-8);
  }
  /* Sem coluna livre à direita, o texto passa por cima da foto e o gradiente
     vira vertical. Ainda assim ele não pode apagar o reservatório: escurece o
     suficiente para o texto e deixa a silhueta aparecer. */
  .hero__fundo { width: 100%; object-position: 56% center; opacity: .7; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(7, 28, 49, .90) 0%, rgba(7, 28, 49, .74) 52%, rgba(7, 28, 49, .62) 100%);
  }
  .hero__interno { max-width: none; }
  .hero__legenda { margin: var(--e-7) 0 0; text-align: left; max-width: none; }
}

/* ----- Barra de números (comp. 3) -------------------------------------- */
.barra-numeros { padding-block: var(--e-8); }
.barra-numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin: 0;
}
.barra-numeros__item { text-align: center; }
.barra-numeros__item .numero {
  color: var(--gold);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  white-space: nowrap;
}
.barra-numeros__legenda {
  margin: var(--e-3) 0 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--silver);
}
@media (max-width: 900px) { .barra-numeros__grade { grid-template-columns: repeat(2, 1fr); row-gap: var(--e-7); } }

/* ----- Credenciais (comp. 4) ------------------------------------------- */
.credenciais__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 1024px) { .credenciais__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .credenciais__grade { grid-template-columns: 1fr; } }

.credencial { text-align: center; }
.credencial__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--e-4);
  color: var(--gold);
  border: 1px solid var(--white-a16);
  border-radius: 32px 32px 8px 8px;   /* arco */
}
.credencial__nome { font-size: var(--fs-h4); margin-bottom: var(--e-2); }
.credencial__texto { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--silver); }

/* ----- Aplicações ------------------------------------------------------ */
.aplicacoes__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .aplicacoes__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .aplicacoes__grade { grid-template-columns: 1fr; } }

.aplicacao {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--white);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.aplicacao__icone { color: var(--gold-text); flex: 0 0 auto; }
.aplicacao__nome { font-size: var(--fs-small); font-weight: 600; }

/* ----- Cards de produto (comp. 5) ------------------------------------- */
.card-produto { display: flex; flex-direction: column; }
.card-produto__foto {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.card-produto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease); }
.card-produto:hover .card-produto__foto img { transform: scale(1.04); }

.card-produto__selo {
  /* No topo o arco do card recortava a etiqueta. Vai para a base, onde a
     borda é reta. */
  position: absolute;
  bottom: var(--e-4);
  left: var(--e-4);
  padding: 6px var(--e-3);
  background: var(--gold-grad);
  color: var(--navy);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: .625rem;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.card-produto__corpo { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); flex: 1; }
.card-produto__nome { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); }
.card-produto__nome a { text-decoration: none; }
.card-produto__nome a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.card-produto__chamada { font-size: var(--fs-small); font-weight: 600; color: var(--gold-text); }
.card-produto__texto { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gray-500); }
.card-produto__dados { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; }
.card-produto__dados li { display: flex; gap: var(--e-2); align-items: center; }
.card-produto__dados .icone { color: var(--gold-text); flex: 0 0 auto; }
.card-produto__corpo .link-seta { margin-top: auto; align-self: flex-start; }

.card-produto--destaque { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ----- Cards de serviço (comp. 6) ------------------------------------- */
.card-servico { height: 100%; }
.card-servico__link {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-6) var(--e-5);
  text-decoration: none;
}
.card-servico__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--gold-text);
  border: 1px solid var(--navy-a16);
  border-radius: 28px 28px 8px 8px;
  transition: background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.card-servico:hover .card-servico__icone { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.card-servico__nome { font-size: var(--fs-h4); }
.card-servico__chamada { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gray-500); }
.card-servico__link .link-seta { margin-top: auto; align-self: flex-start; }

/* ----- Cards de obra (comp. 7) ---------------------------------------- */
.card-obra { display: flex; flex-direction: column; }
/* A foto do card aparece inteira: o acervo é quase todo reservatório
   vertical, e qualquer recorte decepa o parapeito do teto ou a base. */
.card-obra__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gray-100); }
.card-obra__foto img { width: 100%; height: 100%; object-fit: contain; }
.card-obra--sem-foto .card-obra__foto { display: grid; place-items: center; }
.card-obra__marca { opacity: .22; }
.card-obra__etiqueta {
  position: absolute;
  bottom: var(--e-3);
  left: var(--e-3);
  padding: 4px 10px;
  background: rgba(7, 28, 49, .86);
  color: var(--white);
  border-radius: 4px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-obra__corpo { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); flex: 1; }
.card-obra__cliente { font-size: var(--fs-h4); }
.card-obra__local { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--gray-500); }
.card-obra__local .icone { color: var(--gold-text); }
.card-obra__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--navy-a08);
}
.card-obra__dados dt { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.card-obra__dados dd { margin: 2px 0 0; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-obra__segmento { margin-top: auto; padding-top: var(--e-3); font-size: .75rem; color: var(--gray-500); }

/* ----- Texto com foto ------------------------------------------------- */
.texto-foto__interno {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--e-9);
  align-items: center;
}
.texto-foto--invertido .texto-foto__interno { grid-template-columns: 5fr 7fr; }
.texto-foto--invertido .texto-foto__texto { order: 2; }
.texto-foto--invertido .texto-foto__figura { order: 1; }
@media (max-width: 1024px) {
  .texto-foto__interno, .texto-foto--invertido .texto-foto__interno { grid-template-columns: 1fr; gap: var(--e-7); }
  .texto-foto--invertido .texto-foto__texto { order: 0; }
  .texto-foto--invertido .texto-foto__figura { order: 0; }
}
.texto-foto__texto .overline { color: var(--gold-text); margin-bottom: var(--e-3); }
.texto-foto__texto > p { max-width: var(--medida); }
.texto-foto__texto > p + p { margin-top: var(--e-4); }
.texto-foto__texto .link-seta { margin-top: var(--e-5); }
/* Fecho: parágrafo que vem depois da lista e a comenta. */
.texto-foto__fecho { margin-top: var(--e-5); }
.texto-foto__figura { margin: 0; }
.texto-foto__figura img { width: 100%; border-radius: var(--raio); box-shadow: var(--sombra); }
.texto-foto__figura figcaption { margin-top: var(--e-3); font-size: .8125rem; color: var(--gray-500); }

.lista-marcador { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.lista-marcador li { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--fs-small); }
.lista-marcador .icone { color: var(--gold-text); flex: 0 0 auto; margin-top: 3px; }

/* ----- Destaques ------------------------------------------------------- */
.destaque-texto__interno { max-width: 78ch; }
.destaque-texto .filete { margin: var(--e-4) 0 var(--e-5); }
.destaque-texto p + p { margin-top: var(--e-4); }

.destaque-numero__interno { display: grid; grid-template-columns: auto 1fr; gap: var(--e-9); align-items: center; }
@media (max-width: 900px) { .destaque-numero__interno { grid-template-columns: 1fr; gap: var(--e-6); } }
.destaque-numero__cifra { padding-right: var(--e-7); border-right: 1px solid var(--white-a16); }
@media (max-width: 900px) { .destaque-numero__cifra { padding: 0 0 var(--e-5); border-right: 0; border-bottom: 1px solid var(--white-a16); } }
.destaque-numero__valor { display: block; color: var(--gold); font-weight: 400; }
.destaque-numero__unidade { font-family: var(--font-display); font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--silver); }
.destaque-numero__texto p + p { margin-top: var(--e-4); }

/* ----- Comparativo (comp. 9) ------------------------------------------ */
.tabela--comparativo th[scope="row"] { width: 22%; font-weight: 600; background: var(--white); }
.tabela--comparativo .tabela__canto { background: var(--navy-700); }
.comparativo__cards { display: none; }
@media (max-width: 900px) {
  .comparativo__tabela { display: none; }
  .comparativo__cards { display: grid; gap: var(--gutter); }
  .comparativo__card { padding: var(--e-5); }
  .comparativo__card-nome {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    padding-bottom: var(--e-3);
    border-bottom: 2px solid var(--gold);
  }
  .comparativo__card-dados { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
  .comparativo__card-dados dt { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
  .comparativo__card-dados dd { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ----- Tabela técnica: legenda ---------------------------------------- */
.tabela__legenda {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--e-3);
}

/* ----- Listas de checagem e etiquetas --------------------------------- */
.lista-check__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-7); }
@media (max-width: 768px) { .lista-check__grade { grid-template-columns: 1fr; } }
.lista-check__grade li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-check__grade .icone { color: var(--gold-text); flex: 0 0 auto; margin-top: 3px; }

.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.etiqueta {
  padding: 8px var(--e-4);
  background: var(--gray-100);
  border: 1px solid var(--navy-a08);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
}

/* ----- Etapas --------------------------------------------------------- */
.etapas__lista { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-7); }
@media (max-width: 768px) { .etapas__lista { grid-template-columns: 1fr; } }
.etapa { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: start; }
.etapa__ordem {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-text);
  line-height: 1;
  padding-top: 2px;
}
.etapa__titulo { font-size: var(--fs-h4); margin-bottom: 6px; }
.etapa__texto { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gray-500); }

/* ----- Checklist ------------------------------------------------------ */
.checklist__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-7); }
@media (max-width: 768px) { .checklist__lista { grid-template-columns: 1fr; } }
.checklist__lista li { display: flex; gap: var(--e-4); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); }
.checklist__caixa {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--gold);
  border: 1px solid var(--white-a16);
  border-radius: 4px;
}

/* ----- Fluxo Turnkey (comp. 10) --------------------------------------- */
.fluxo { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-6) var(--e-4); position: relative; }
@media (max-width: 1024px) { .fluxo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fluxo { grid-template-columns: 1fr; } }

.fluxo__no { position: relative; padding-top: var(--e-6); }
.fluxo__no::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-grad);
  opacity: .35;
}
.fluxo__no::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-grad);
}
.fluxo__ordem { display: block; font-family: var(--font-display); font-size: .75rem; letter-spacing: var(--tracking-overline); color: var(--gold-text); margin-bottom: var(--e-2); }
.secao--navy .fluxo__ordem { color: var(--gold); }
.fluxo__nome { display: block; font-size: var(--fs-h4); font-weight: 600; text-decoration: none; margin-bottom: 6px; }
a.fluxo__nome:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.fluxo__linha { display: block; font-size: .8125rem; line-height: 1.5; color: var(--gray-500); }
.secao--navy .fluxo__linha { color: var(--silver); }

/* ----- Fecho de integração ------------------------------------------- */
.fecho__fluxo { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
.fecho__etapa {
  position: relative;
  padding: 10px var(--e-4);
  background: var(--navy-700);
  border: 1px solid var(--white-a10);
  border-radius: var(--raio);
  font-size: var(--fs-small);
  font-weight: 600;
}
.fecho__etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--e-3) * -1);
  top: 50%;
  width: var(--e-3);
  height: 2px;
  background: var(--gold-grad);
  transform: translateY(-50%);
}
.fecho__texto { color: var(--silver); }
.fecho__cta { margin-top: var(--e-6); }

/* ----- Nota de norma -------------------------------------------------- */
.nota-norma__caixa {
  display: flex;
  gap: var(--e-5);
  align-items: flex-start;
  max-width: 90ch;
  padding: var(--e-5) var(--e-6);
  background: var(--gray-100);
  border-left: 3px solid var(--gold);
  border-radius: var(--raio);
}
.nota-norma__icone { color: var(--gold-text); flex: 0 0 auto; }
.nota-norma__caixa p { margin-top: var(--e-2); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ----- Missão, visão e valores --------------------------------------- */
.mvv__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 1024px) { .mvv__grade { grid-template-columns: 1fr; } }
.mvv__card { padding: var(--e-6) var(--e-5); }
.mvv__nome {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 2px solid var(--gold);
}
.mvv__card p { font-size: var(--fs-small); line-height: var(--lh-small); }
.mvv__card--valores li { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); }
.mvv__card--valores li + li { margin-top: var(--e-2); }
.mvv__card--valores .icone { color: var(--gold-text); flex: 0 0 auto; margin-top: 3px; }

/* ----- Guia de escolha ----------------------------------------------- */
.guia__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (max-width: 768px) { .guia__lista { grid-template-columns: 1fr; } }
.guia__item {
  padding: var(--e-5);
  background: var(--gray-100);
  border-radius: var(--raio);
  border-left: 3px solid var(--gold);
}
.guia__pergunta { position: relative; font-size: var(--fs-h4); font-weight: 600; padding-left: var(--e-6); margin-bottom: var(--e-3); }
.guia__aspas { position: absolute; left: 0; top: -2px; font-family: var(--font-display); font-size: 1.75rem; color: var(--gold); line-height: 1; }
.guia__resposta { font-size: var(--fs-small); line-height: var(--lh-small); }
.guia__item .link-seta { margin-top: var(--e-4); }

/* ----- SABESP -------------------------------------------------------- */
.sabesp__interno { display: grid; grid-template-columns: 6fr 6fr; gap: var(--e-9); align-items: center; }
@media (max-width: 1024px) { .sabesp__interno { grid-template-columns: 1fr; gap: var(--e-7); } }
.sabesp__figura { margin: 0; border-radius: var(--raio); overflow: hidden; }
.sabesp__figura img { width: 100%; }
.sabesp__texto .filete { margin: var(--e-4) 0 var(--e-5); }
.sabesp__texto p { max-width: var(--medida); }
.sabesp__texto p + p { margin-top: var(--e-4); }
.sabesp__casos { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin: var(--e-6) 0; }
.sabesp__casos li { display: flex; gap: var(--e-2); align-items: center; font-size: var(--fs-small); font-weight: 600; }
.sabesp__casos .icone { color: var(--gold); }

/* ----- Abrangência --------------------------------------------------- */
.abrangencia__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 1024px) { .abrangencia__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .abrangencia__grade { grid-template-columns: 1fr; } }
/* Variante por região: são cinco, não cabem na grade de quatro. */
.abrangencia__grade--regioes { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .abrangencia__grade--regioes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .abrangencia__grade--regioes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .abrangencia__grade--regioes { grid-template-columns: 1fr; } }
.abrangencia__uf {
  padding: var(--e-5);
  background: var(--navy-700);
  border: 1px solid var(--white-a10);
  border-radius: var(--raio);
}
.abrangencia__sigla { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--gold); letter-spacing: var(--tracking-display); }
/* Nome de região é palavra, não sigla: cabe menor e sem o tracking de display. */
.abrangencia__sigla--regiao { font-size: 1.125rem; letter-spacing: .02em; line-height: 1.2; }
.abrangencia__nome { display: block; margin-top: var(--e-3); font-size: var(--fs-small); font-weight: 600; }
.abrangencia__nota { display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-6); font-size: .8125rem; color: var(--silver); max-width: 80ch; }
.abrangencia__nota .icone { color: var(--gold); flex: 0 0 auto; margin-top: 2px; }

/* ----- Jateamento ---------------------------------------------------- */
.jateamento__interno { display: grid; grid-template-columns: 6fr 6fr; gap: var(--e-9); align-items: start; }
@media (max-width: 1024px) { .jateamento__interno { grid-template-columns: 1fr; gap: var(--e-7); } }
.jateamento__texto .overline { color: var(--gold-text); margin-bottom: var(--e-3); }
.jateamento__texto p + p { margin-top: var(--e-4); }
.jateamento__tabela { margin: 0; }

/* ----- Ilustração técnica -------------------------------------------- */
.ilustracao__interno { display: grid; gap: var(--e-7); }
.ilustracao__figura { margin: 0; padding: var(--e-5); background: var(--gray-100); border-radius: var(--raio); }
.ilustracao__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (max-width: 768px) { .ilustracao__cards { grid-template-columns: 1fr; } }
.ilustracao__card { padding: var(--e-5); }
.ilustracao__card p { margin-top: var(--e-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gray-500); }

.ilustra { width: 100%; height: auto; }
.ilustra__estrutura   { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; }
.ilustra__costura     { fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .55; }
.ilustra__divisoria   { fill: none; stroke: var(--navy); stroke-width: 3.2; }
.ilustra__base        { fill: none; stroke: var(--navy); stroke-width: 2.4; }
.ilustra__solo        { fill: none; stroke: var(--navy); stroke-width: 2.4; }
.ilustra__hachura     { fill: none; stroke: var(--navy); stroke-width: 1.2; opacity: .5; }
.ilustra__agua        { fill: var(--agua); opacity: .82; }
.ilustra__agua--incendio { fill: var(--incendio); opacity: .68; }
.ilustra__nivel       { fill: none; stroke: var(--agua); stroke-width: 2; stroke-dasharray: 8 6; }
.ilustra__nivel--incendio { stroke: var(--incendio); }
.ilustra__ponto       { fill: var(--agua); }
.ilustra__vazio       { fill: none; stroke: var(--gray-500); stroke-width: 1.2; opacity: .5; }
.ilustra__escada      { fill: none; stroke: var(--navy); stroke-width: 1.4; opacity: .7; }
.ilustra__tubo        { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.ilustra__tubo--forte { stroke: var(--gold-text); }
.ilustra__tubo--incendio { stroke: var(--incendio); }
.ilustra__retencao    { fill: none; stroke: var(--agua); stroke-width: 4; opacity: .45; }
.ilustra__fluxo       { fill: none; stroke: var(--gold-text); stroke-width: 2.4; color: var(--gold-text); }
.ilustra__fluxo-lateral { fill: none; stroke: var(--gold-text); stroke-width: 1.8; opacity: .7; color: var(--gold-text); }
.ilustra__cota        { fill: none; stroke: var(--gray-500); stroke-width: 1.4; color: var(--gray-500); }
.ilustra__cota--forte { stroke: var(--gold-text); color: var(--gold-text); }
.ilustra__divisor     { fill: none; stroke: var(--navy); stroke-width: 1; opacity: .18; }

.ilustra text { font-family: var(--font-text); fill: var(--ink); }
.ilustra__titulo      { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; fill: var(--navy); }
.ilustra__rotulo      { font-size: 14px; font-weight: 600; fill: var(--gray-500); }
.ilustra__rotulo--forte    { fill: var(--gold-text); }
.ilustra__rotulo--incendio { fill: var(--incendio); }
.ilustra__rotulo-pequeno   { font-size: 12px; fill: var(--gray-500); }
.ilustra__cota-texto  { font-family: var(--font-display); font-size: 13px; fill: var(--gray-500); }
.ilustra__cota-texto--forte { fill: var(--gold-text); }

/* ----- FAQ (comp. 11) ------------------------------------------------- */
.faq__lista { display: grid; gap: var(--e-3); max-width: 92ch; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--navy-a08);
  border-radius: var(--raio);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--gold); }
.faq__pergunta {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__marcador { flex: 0 0 auto; color: var(--gold-text); margin-top: 2px; }
.faq__item[open] .faq__mais,
.faq__item:not([open]) .faq__menos { display: none; }
.faq__resposta { padding: 0 var(--e-5) var(--e-5); }
.faq__resposta p { font-size: var(--fs-small); line-height: var(--lh-body); max-width: var(--medida); }
.faq__origem { margin-top: var(--e-3); font-size: .8125rem; }
.faq__todas { margin-top: var(--e-6); }

/* ----- Galeria (comp. 13) -------------------------------------------- */
.galeria__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
@media (max-width: 1024px) { .galeria__grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .galeria__grade { grid-template-columns: repeat(2, 1fr); } }
.galeria__botao {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--gray-100);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1;
}
.galeria__botao img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-lenta) var(--ease), opacity var(--dur-media) var(--ease); }
.galeria__botao:hover img { transform: scale(1.05); opacity: .85; }
.galeria__lupa {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(7, 28, 49, .78);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--ease);
}
.galeria__botao:hover .galeria__lupa, .galeria__botao:focus-visible .galeria__lupa { opacity: 1; }

/* ----- Lightbox ------------------------------------------------------ */
.lightbox {
  width: min(94vw, 1280px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}
.lightbox::backdrop { background: rgba(4, 18, 31, .94); }
.lightbox__figura { margin: 0; }
.lightbox__img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--raio); }
.lightbox__legenda { margin-top: var(--e-3); font-size: var(--fs-small); color: var(--silver); text-align: center; }
.lightbox__fechar, .lightbox__nav {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--white-a16);
  border-radius: 50%;
  background: rgba(7, 28, 49, .7);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__fechar { top: var(--e-5); right: var(--e-5); }
.lightbox__nav--ant  { left: var(--e-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prox { right: var(--e-5); top: 50%; transform: translateY(-50%); }
.lightbox__fechar:hover, .lightbox__nav:hover { background: var(--navy-700); border-color: var(--gold); }

/* ----- Vídeo (comp. 14) ---------------------------------------------- */
.video__moldura { margin: 0; }
.video__palco { position: relative; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--raio); overflow: hidden; }
.video__palco img, .video__palco video, .video__palco iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--navy);
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease);
}
.video__play:hover { transform: scale(1.06); }
.video__legenda { margin-top: var(--e-4); font-size: var(--fs-small); color: var(--gray-500); }

/* ----- Faixa de CTA (comp. 15) --------------------------------------- */
.faixa-cta {
  padding-block: var(--e-8);
  background: var(--navy);
  color: var(--white);
  border-top: 3px solid transparent;
  border-image: var(--gold-grad) 1;
}
.faixa-cta__interno { display: grid; grid-template-columns: 1fr auto; gap: var(--e-7); align-items: center; }
@media (max-width: 900px) { .faixa-cta__interno { grid-template-columns: 1fr; } }
.faixa-cta__titulo { max-width: 32ch; }
.faixa-cta__apoio { margin-top: var(--e-3); color: var(--silver); max-width: 56ch; }
.faixa-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ----- Clientes (comp. 20) — galeria com filtro por setor ------------ */
/* Os logos vêm de 28 marcas diferentes: altura óptica já igualada no arquivo
   (caixa de 240 × 80 a 2×) e cinza uniforme no CSS, para que a faixa leia como
   um conjunto e não como 28 identidades brigando. A cor volta no hover. */
.clientes__filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-bottom: var(--e-7);
}
.clientes__filtros .chip { display: inline-flex; align-items: center; gap: var(--e-2); }
/* No celular os 7 filtros empilhados comem meia tela antes da grade começar.
   Viram uma faixa que rola sozinha, sangrando até a borda — a página continua
   sem rolagem horizontal (§3, comp. 8). */
@media (max-width: 640px) {
  .clientes__filtros {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--margem-lateral) * -1);
    padding: 0 var(--margem-lateral) var(--e-2);
  }
  .clientes__filtros .chip { flex: 0 0 auto; scroll-snap-align: start; }
}
.chip__qtd {
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 999px;
  padding: 1px 7px;
}
.chip[aria-pressed="true"] .chip__qtd { color: var(--white); background: var(--white-a16); }

.clientes__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1200px) { .clientes__grade { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .clientes__grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .clientes__grade { grid-template-columns: repeat(2, 1fr); } }

.cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-4);
  background: var(--white);
  border: 1px solid var(--navy-a08);
  border-radius: var(--raio);
  transition: border-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.cliente:hover { border-color: var(--gold); transform: translateY(-2px); }

/* O arquivo já vem numa caixa de 240 × 80 com a marca centralizada, então basta
   deixar a imagem no tamanho natural — sem object-fit e sem recorte. */
.cliente__logo {
  width: 240px;
  max-width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05) brightness(.95) opacity(.72);
  transition: filter var(--dur-media) var(--ease);
}
.cliente:hover .cliente__logo { filter: none; }

/* Marca sem arquivo confirmado: sigla em Display, no lugar exato do logo. */
.cliente__sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: var(--tracking-display);
  color: var(--gray-500);
  transition: color var(--dur-media) var(--ease);
}
.cliente:hover .cliente__sigla { color: var(--gold-text); }

.cliente__nome {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--gray-500);
}
@media (prefers-reduced-motion: reduce) {
  .cliente:hover { transform: none; }
}

/* ----- Formulário (comp. 12) ---------------------------------------- */
.conversao__interno { max-width: 88ch; margin-inline: auto; }
.conversao__cabecalho { margin-bottom: var(--e-7); }
.conversao__cabecalho .overline { color: var(--gold-text); margin-bottom: var(--e-3); }
.conversao__canais { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin-top: var(--e-5); font-size: var(--fs-small); font-weight: 600; }
.conversao__canais li { display: flex; gap: var(--e-2); align-items: center; }
.conversao__canais .icone { color: var(--gold-text); }
.conversao__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e-5); }
@media (max-width: 640px) { .conversao__grade { grid-template-columns: 1fr; } }
.conversao__isca { position: absolute; left: -9999px; }
.campo__rotulo em { color: var(--incendio); font-style: normal; }
.campo__ajuda { display: block; font-size: .8125rem; color: var(--gray-500); margin-bottom: var(--e-2); }
.campo--grupo { border: 0; padding: 0; margin-bottom: var(--e-5); }
.campo__caixas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2) var(--e-5); }
@media (max-width: 640px) { .campo__caixas { grid-template-columns: 1fr; } }
.caixa { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.caixa input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.caixa--consentimento {
  margin: var(--e-5) 0 var(--e-6);
  padding: var(--e-4);
  background: var(--gray-100);
  border-radius: var(--raio);
}
.campo__arquivo {
  display: block;
  width: 100%;
  padding: var(--e-5);
  border: 2px dashed var(--navy-a16);
  border-radius: var(--raio);
  font-size: var(--fs-small);
  background: var(--white);
  cursor: pointer;
}
.campo__arquivo:hover { border-color: var(--gold); }

.aviso {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--raio);
  font-size: var(--fs-small);
  margin-bottom: var(--e-6);
}
.aviso--sucesso { background: #E7F4EC; border-left: 3px solid #1E7A44; color: #14512D; }
.aviso--erro    { background: #FBEBE9; border-left: 3px solid var(--incendio); color: #7A241B; }

/* ----- Aviso de cookies (comp. 18) ---------------------------------- */
.aviso-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--navy-900);
  color: var(--silver);
  border-top: 1px solid var(--white-a16);
  padding-block: var(--e-4);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__interno { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); align-items: center; justify-content: space-between; }
.aviso-cookies__texto { font-size: .8125rem; line-height: 1.6; max-width: 78ch; }
.aviso-cookies__texto a { color: var(--gold); }
.aviso-cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.aviso-cookies__acoes .btn { min-height: 40px; padding: var(--e-2) var(--e-4); font-size: .75rem; }
body.tem-cookies .wa-flutuante { bottom: calc(var(--e-5) + 96px); }

/* ----- Filtros de obra (T6) ----------------------------------------- */
.filtros { position: sticky; top: 88px; z-index: 40; background: var(--white); border-bottom: 1px solid var(--navy-a08); padding-block: var(--e-4); }
.cabecalho.esta-reduzido ~ * .filtros { top: 64px; }
.filtros__grupo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.filtros__grupo + .filtros__grupo { margin-top: var(--e-3); }
.filtros__rotulo {
  font-family: var(--font-display);
  font-size: .625rem;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--gray-500);
  min-width: 84px;
}
.chip {
  padding: 7px var(--e-4);
  background: var(--white);
  border: 1px solid var(--navy-a16);
  border-radius: 999px;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.obras__vazio { padding: var(--e-8) 0; text-align: center; color: var(--gray-500); }

/* ----- Índice do FAQ agregado --------------------------------------- */
.faq-indice { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-8); }
.faq-indice a {
  padding: 8px var(--e-4);
  background: var(--gray-100);
  border: 1px solid var(--navy-a08);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.faq-indice a:hover { border-color: var(--gold); }
.faq-tema { scroll-margin-top: 110px; }
.faq-tema + .faq-tema { margin-top: var(--e-8); }

/* ----- Contato ------------------------------------------------------ */
.contato__grade { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-9); align-items: start; }
@media (max-width: 1024px) { .contato__grade { grid-template-columns: 1fr; gap: var(--e-7); } }
.contato__blocos { display: grid; gap: var(--e-6); }
.contato__bloco { display: flex; gap: var(--e-4); align-items: flex-start; }
.contato__bloco-icone {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--gold-text);
  border: 1px solid var(--navy-a16);
  border-radius: 24px 24px 6px 6px;
}
.contato__bloco-rotulo {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.contato__bloco-valor { font-size: var(--fs-body); font-weight: 500; font-style: normal; line-height: 1.5; }
.contato__bloco-valor a { text-decoration: none; }
.contato__bloco-valor a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.contato__mapa { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--raio); background: var(--gray-100); }

/* ----- Texto longo (T9) -------------------------------------------- */
.texto-longo { max-width: 78ch; }
.texto-longo h2 { margin-top: var(--e-8); margin-bottom: var(--e-4); }
.texto-longo h3 { margin-top: var(--e-6); margin-bottom: var(--e-3); }
.texto-longo p + p, .texto-longo ul, .texto-longo ol { margin-top: var(--e-4); }
.texto-longo ul, .texto-longo ol { padding-left: var(--e-5); }
.texto-longo li + li { margin-top: var(--e-2); }

/* Abrangência sobre fundo claro: os cartões de UF trocam de paleta. */
.secao--cinza.abrangencia .abrangencia__uf { background: var(--white); border-color: var(--navy-a08); box-shadow: var(--sombra); }
.secao--cinza.abrangencia .abrangencia__sigla { color: var(--gold-text); }
.secao--cinza.abrangencia .abrangencia__qtd,
.secao--cinza.abrangencia .abrangencia__nota { color: var(--gray-500); }
.secao--cinza.abrangencia .abrangencia__nota .icone { color: var(--gold-text); }