/* ==========================================================================
   THASLOC Locações — Manga/MG
   Direção visual: padrão ODuo — fundo claro e arejado, cards brancos com
   sombra suave, cantos generosos e botões em pílula. O azul e o amarelo do
   cliente continuam mandando: o azul escuro entra em blocos pontuais de
   contraste (empresa, base de atendimento, rodapé) e o amarelo é o acento.
   WhatsApp é sempre verde #25D366 — regra da casa, não decisão de design.
   Sem build, sem CDN, sem dependência externa.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --azul-900: #0a2a47;
  --azul-800: #0d3557;
  --azul-700: #12518c;
  --azul-600: #1a63a8;
  --azul-100: #cfe0f0;
  --azul-050: #eef4fa;

  --amarelo: #ffc20e;
  --amarelo-esc: #c98a00;
  --amarelo-050: #fff7de;

  /* verde oficial do WhatsApp — nunca a cor do cliente */
  --zap: #25d366;
  --zap-esc: #1ba94c;

  --fundo: #f5f7fa;
  --branco: #fff;
  --tinta: #101b26;
  --cinza: #5b6169;
  --cinza-2: #7b838d;
  --borda: #e5eaf1;

  --sombra-sm: 0 2px 10px rgba(10, 42, 71, .06);
  --sombra: 0 16px 36px -16px rgba(10, 42, 71, .22), 0 2px 8px rgba(10, 42, 71, .05);
  --sombra-lg: 0 30px 64px -26px rgba(10, 42, 71, .32);

  --r-card: 22px;
  --r-med: 16px;
  --r-btn: 999px;

  /* As famílias abaixo entram automaticamente se os .woff2 forem adicionados
     em assets/fonts/ (ver assets/fonts/README.md). Até lá, cai na stack do
     sistema — nenhuma requisição externa é feita. */
  --f-display: "Archivo", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-cond: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

  --larg: 1180px;
  --gut: 20px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* o topo é sticky: as âncoras precisam parar abaixo dele */
[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  /* trava de vazamento: nenhum {{TOKEN}} longo empurra a largura da página */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--azul-700); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--azul-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--amarelo);
  color: var(--azul-900);
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pular:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* elementos que carregam {{TOKEN}}: podem quebrar em qualquer ponto para não
   estourar a linha nem a largura da página no celular */
.tk { overflow-wrap: anywhere; min-width: 0; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- peças de marca -- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--azul-700);
}
.eyebrow--claro { color: var(--amarelo); }

.bracadeira {
  flex: none;
  width: 24px;
  height: 6px;
  border-radius: 999px;
  background: var(--amarelo);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--azul-900);
}
.marca__nome {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
}
.marca__barra {
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: var(--amarelo);
}
.marca__tipo {
  font-family: var(--f-cond);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--cinza-2);
  line-height: 1.2;
  max-width: 92px;
}

/* --------------------------------------------------------------- botões -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn__txt { min-width: 0; overflow-wrap: anywhere; }

/* WhatsApp: verde oficial, sempre */
.btn--zap {
  background: var(--zap);
  color: var(--branco);
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .85);
}
.btn--zap:hover {
  background: var(--zap-esc);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(37, 211, 102, .9);
}

.btn--vazado {
  background: var(--branco);
  border-color: var(--azul-100);
  color: var(--azul-900);
}
.btn--vazado:hover {
  border-color: var(--azul-700);
  color: var(--azul-700);
  transform: translateY(-2px);
}

.btn--mini { padding: 10px 18px; font-size: 14px; }
.btn--grande { padding: 18px 30px; font-size: 19px; }

.ico { width: 20px; height: 20px; flex: none; }
.ico--zap { width: 22px; height: 22px; }

.link-forte {
  color: var(--azul-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid var(--amarelo);
  padding-bottom: 1px;
  transition: color .18s ease;
}
.link-forte:hover { color: var(--azul-900); }

/* ---------------------------------------------------------------- topo --- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  flex-wrap: wrap;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--r-btn);
  color: var(--azul-900);
  padding: 9px 16px;
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.menu-btn__traco {
  width: 18px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.menu-btn__traco::after {
  content: "";
  position: absolute;
  inset: 4px 0 auto 0;
  border-top: 2px solid currentColor;
}
.menu-btn[aria-expanded="true"] {
  background: var(--azul-900);
  color: var(--branco);
  border-color: var(--azul-900);
}

.menu {
  display: none;
  width: 100%;
  padding-bottom: 18px;
}
.menu.aberto { display: block; }
.menu__lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.menu__lista a {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--borda);
  color: var(--azul-900);
  font-family: var(--f-cond);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
}
.menu__lista a:hover { color: var(--azul-700); }
.menu .btn { width: 100%; }

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  background: var(--branco);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 99, 168, .14), rgba(26, 99, 168, 0) 70%);
  pointer-events: none;
}
.hero__grade {
  position: relative;
  display: grid;
  gap: 32px;
  padding-block: 38px 56px;
}

.hero__titulo {
  font-size: clamp(2.05rem, 8vw, 3.05rem);
  margin-bottom: 20px;
  max-width: 16ch;
  color: var(--azul-900);
}
/* palavra-chave em destaque: azul forte com marca-texto amarela.
   O amarelo puro em texto sobre fundo claro não tem contraste legível. */
.hero__titulo .destaque {
  color: var(--azul-700);
  background: linear-gradient(transparent 62%, rgba(255, 194, 14, .6) 62% 95%, transparent 95%);
  padding-inline: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lead {
  font-size: 17px;
  color: var(--cinza);
  max-width: 54ch;
  margin-bottom: 26px;
}

.pilares { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pilar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-btn);
  background: var(--branco);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--azul-900);
}
.pilar__no { width: 9px; height: 9px; border-radius: 50%; background: var(--amarelo); flex: none; }

.hero__acoes { display: flex; flex-direction: column; gap: 12px; }
.hero__acoes .btn { width: 100%; }

/* área grande reservada para a foto principal — pendência visível */
.moldura {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-card);
  border: 1px solid var(--azul-100);
  background-color: var(--azul-050);
  background-image: repeating-linear-gradient(135deg, rgba(10, 42, 71, .055) 0 2px, transparent 2px 12px);
  overflow: hidden;
}
.moldura__selo {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  overflow-wrap: anywhere;
  background: var(--amarelo);
  color: var(--azul-900);
  padding: 5px 12px;
  border-radius: var(--r-btn);
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* quando a foto real chegar: troque o conteúdo da .moldura por um <img> e
   acrescente esta classe. Nada mais precisa mudar — ver
   assets/img/equipamentos/README.md */
.moldura--preenchida { background-image: none; }
.moldura--preenchida img { width: 100%; height: 100%; object-fit: cover; }

.hero__foto {
  min-height: clamp(320px, 76vw, 420px);
  padding: 26px 22px 108px;
  box-shadow: var(--sombra);
}
.hero__nota {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--branco);
  border-radius: var(--r-med);
  box-shadow: var(--sombra);
  padding: 14px 18px;
}
.hero__nota strong {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--azul-900);
}
.hero__nota span { font-size: 14.5px; color: var(--cinza); }

.torre { width: 100%; max-width: 160px; height: auto; }
.torre line { stroke: var(--azul-600); stroke-width: 4; stroke-linecap: round; }
.torre__diagonais line { stroke: var(--azul-100); stroke-width: 2.5; }
.torre__pes line { stroke: var(--azul-600); stroke-width: 5; }
.torre__nos rect { fill: var(--amarelo); }
.torre__prancha { fill: var(--azul-100); }

/* montagem da torre: o único momento coreografado da página */
@media (prefers-reduced-motion: no-preference) {
  .torre__tubos line { stroke-dasharray: 440; stroke-dashoffset: 440; animation: sobe-tubo .85s cubic-bezier(.2,.7,.3,1) forwards; }
  .torre__tubos line:nth-child(2) { animation-delay: .1s; }
  .torre__tubos line:nth-child(3) { animation-delay: .2s; }
  .torre__travessas line { stroke-dasharray: 250; stroke-dashoffset: 250; animation: sobe-tubo .5s ease-out forwards; }
  .torre__travessas line:nth-child(1) { animation-delay: .95s; }
  .torre__travessas line:nth-child(2) { animation-delay: .85s; }
  .torre__travessas line:nth-child(3) { animation-delay: .75s; }
  .torre__travessas line:nth-child(4) { animation-delay: .65s; }
  .torre__travessas line:nth-child(5) { animation-delay: .55s; }
  .torre__diagonais line { stroke-dasharray: 170; stroke-dashoffset: 170; animation: sobe-tubo .5s ease-out forwards; animation-delay: 1.1s; }
  .torre__prancha { opacity: 0; animation: aparece .4s ease-out 1.25s forwards; }
  .torre__nos rect { opacity: 0; animation: aparece .3s ease-out forwards; }
  .torre__nos rect:nth-child(n+1) { animation-delay: 1.3s; }
  .torre__nos rect:nth-child(n+4) { animation-delay: 1.38s; }
  .torre__nos rect:nth-child(n+7) { animation-delay: 1.46s; }
  .torre__nos rect:nth-child(n+10) { animation-delay: 1.54s; }
  .torre__nos rect:nth-child(n+13) { animation-delay: 1.62s; }
  .torre__pes line { opacity: 0; animation: aparece .3s ease-out 1.7s forwards; }
}
@keyframes sobe-tubo { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }

/* -------------------------------------------------------------- seções --- */
.secao { padding-block: clamp(56px, 8.5vw, 104px); }
.secao__cabeca { margin-bottom: 34px; max-width: 62ch; }
.secao__titulo { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 14px; color: var(--azul-900); }
.secao__titulo--claro { color: var(--branco); }
.secao__intro { color: var(--cinza); font-size: 17px; }

/* ----------------------------------------------- educativo: serviço → eq -- */
.secao--servico { background: var(--fundo); }

.pares { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.par {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding: 18px 20px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-med);
  box-shadow: var(--sombra-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.par:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.par__ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--azul-050);
  color: var(--azul-700);
  flex: none;
}
.par__ico .ico { width: 28px; height: 28px; }
.par__servico {
  font-family: var(--f-display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--azul-900);
  align-self: end;
}
.par__equip {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--azul-700);
  align-self: start;
}

.secao__saida {
  margin-top: 30px;
  font-size: 17px;
  color: var(--cinza);
  max-width: 60ch;
}
.secao__saida .btn { margin-top: 14px; }

/* ------------------------------------------------------------ catálogo --- */
.secao--catalogo { background: var(--branco); }

.catalogo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-card);
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }

.card__foto { aspect-ratio: 4 / 3; border-radius: var(--r-med); }
.card__ico { width: 74px; height: 74px; color: var(--azul-600); opacity: .6; }

.card__corpo { padding: 18px 8px 8px; display: flex; flex-direction: column; flex: 1; }
.card__nome { font-size: 20px; margin-bottom: 8px; color: var(--azul-900); }
.card__uso { font-size: 15.5px; color: var(--cinza); line-height: 1.55; margin-bottom: 18px; }
.card__cta { margin-top: auto; align-self: flex-start; }

.aviso-foto {
  margin-top: 28px;
  padding: 18px 22px;
  border: 2px dashed var(--amarelo-esc);
  border-radius: var(--r-med);
  background: var(--amarelo-050);
  font-size: 14.5px;
  color: #6b5400;
}

/* ------------------------------------------------------------- empresa --- */
.secao--empresa { background: var(--fundo); }
.empresa__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* bloco pontual de contraste */
.empresa__bloco {
  background: var(--azul-900);
  color: #cfdcea;
  border-radius: var(--r-card);
  padding: clamp(26px, 5vw, 44px);
  box-shadow: var(--sombra);
}
.empresa__bloco .secao__titulo { margin-bottom: 18px; }
.empresa__bloco :focus-visible { outline-color: var(--amarelo); }

.pergunte {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-card);
  box-shadow: var(--sombra);
  padding: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pergunte__titulo { font-size: 21px; color: var(--azul-900); margin-bottom: 10px; }
.pergunte p { color: var(--cinza); font-size: 16px; margin-bottom: 20px; }

.fatos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.fato {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-med);
  box-shadow: var(--sombra-sm);
  padding: 22px 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fato:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.fato__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--amarelo-050);
  color: var(--amarelo-esc);
  margin-bottom: 14px;
}
.fato__ico .ico { width: 26px; height: 26px; }
.fato__rot {
  display: block;
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--cinza-2);
  margin-bottom: 4px;
}
.fato__val { display: block; font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--azul-900); }

/* --------------------------------------------------- área de atendimento -- */
.secao--area { background: var(--branco); }
.area__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

.area__base {
  background: var(--azul-900);
  color: var(--branco);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 34px);
  box-shadow: var(--sombra);
}
.area__ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 194, 14, .16);
  color: var(--amarelo);
  margin-bottom: 16px;
}
.area__ico .ico { width: 28px; height: 28px; }
.area__rot {
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--amarelo);
  margin-bottom: 6px;
}
.area__cidade { font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 8px; }
.area__obs { color: #b9cade; font-size: 15.5px; margin: 0; }

.area__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.area__item {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-med);
  box-shadow: var(--sombra-sm);
  padding: 18px 20px;
}
.area__nome {
  display: block;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--azul-900);
  margin-bottom: 8px;
}
.area__dist {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--r-btn);
  background: var(--azul-050);
  font-family: var(--f-cond);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--azul-700);
}

.area__nota {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 5px solid var(--amarelo);
  border-radius: 0 var(--r-med) var(--r-med) 0;
  background: var(--fundo);
  color: var(--cinza);
  font-size: 15.5px;
  max-width: 72ch;
}

/* ------------------------------------------------------------- contato --- */
.secao--contato { background: var(--fundo); }

.contato__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-card);
  box-shadow: var(--sombra);
  padding: clamp(26px, 5vw, 48px);
}
.contato__chamada .secao__titulo { margin-bottom: 16px; }
.contato__lead { color: var(--cinza); max-width: 46ch; margin-bottom: 26px; }
.contato__chamada .btn { width: 100%; }

.dados { margin: 0; display: grid; gap: 14px; }
.dados__linha {
  background: var(--fundo);
  border-radius: var(--r-med);
  padding: 16px 20px;
}
.dados dt {
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--azul-700);
  margin-bottom: 5px;
}
.dados dd { margin: 0; font-size: 16px; color: var(--tinta); }
.dados dd a { color: var(--azul-700); }

/* -------------------------------------------------------------- rodapé --- */
.rodape { background: var(--azul-900); color: #a9bdd0; padding-top: 48px; font-size: 15px; }
.rodape :focus-visible { outline-color: var(--amarelo); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 36px; }
.rodape__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.marca__nome--rodape { color: var(--branco); font-size: 24px; }
.rodape__desc { width: 100%; margin: 8px 0 0; max-width: 40ch; }
.rodape__rot {
  font-family: var(--f-cond);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--amarelo);
  margin: 0 0 3px;
}
.rodape__col p + .rodape__rot { margin-top: 16px; }
.rodape__col p { margin: 0; color: #cbd8e5; }
.rodape__base { border-top: 1px solid #1b3f61; padding-block: 18px 26px; font-size: 13.5px; }
.rodape__base p { margin: 0; }

/* --------------------------------------------------- WhatsApp flutuante -- */
.zap-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--zap);
  color: var(--branco);
  text-decoration: none;
  box-shadow: 0 16px 32px -10px rgba(37, 211, 102, .6), 0 4px 14px rgba(10, 42, 71, .22);
  transition: background-color .18s ease, transform .18s ease;
}
.zap-flutuante:hover { background: var(--zap-esc); transform: translateY(-3px); }
.zap-flutuante .ico--zap { width: 30px; height: 30px; }

/* ===================================================== breakpoints ======= */
@media (min-width: 560px) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__acoes { flex-direction: row; }
  .hero__acoes .btn { width: auto; }
  .contato__chamada .btn { width: auto; }
  .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  :root { --gut: 32px; }
  body { font-size: 17.5px; }

  .menu-btn { display: none; }
  .menu,
  .menu.aberto {
    display: flex;
    align-items: center;
    gap: 26px;
    width: auto;
    padding-bottom: 0;
  }
  .menu__lista { flex-direction: row; gap: 24px; margin-bottom: 0; }
  .menu__lista a { padding: 0; border: 0; font-size: 13.5px; letter-spacing: .13em; }
  .menu .btn { width: auto; }
  .marca__tipo { max-width: none; }

  .hero__grade {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: center;
    padding-block: 76px 92px;
  }
  .hero__titulo { font-size: clamp(2.6rem, 4.4vw, 3.5rem); }
  .hero__lead { font-size: 18.5px; }
  .hero__foto { min-height: clamp(420px, 42vw, 540px); padding: 34px 30px 120px; }
  .torre { max-width: 250px; }

  .pares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }

  .empresa__grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 26px; align-items: stretch; }

  .area__grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
  .area__lista { gap: 16px; }

  .contato__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: start; }
  .dados { grid-template-columns: minmax(0, 1fr); }

  .rodape__grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }

  .zap-flutuante { right: 26px; bottom: 26px; width: 62px; height: 62px; }
}

@media (min-width: 1120px) {
  .hero__titulo { font-size: 3.6rem; }
  .torre { max-width: 290px; }
  .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .topo, .zap-flutuante, .hero__foto { display: none; }
  body { background: #fff; color: #000; }
  .card, .par, .fato, .area__item, .contato__card { box-shadow: none; }
}