/* =====================================================================
   TERMAXIS · site institucional
   Linguagem visual herdada da arte de manutencao da marca: Poppins fina
   nos titulos com a palavra-chave em negrito ciano, fundo gelo, marinho
   nas partes navais, e o floco da logo como ornamento.

   CACHE: este arquivo fica guardado por 1 ano no navegador. Mexeu aqui,
   suba o ?v= do style.css no index.html, no 404.html e no
   privacidade/index.html (o _publicar.py recusa versoes diferentes).

   ALTURA DA TELA: tamanhos do hero e espacos das secoes usam svh (altura
   visivel) junto com vw. E isso que faz o hero inteiro (titulo, texto,
   botoes e faixa de credenciais) caber na primeira tela tanto num monitor
   1920x910 quanto num notebook 1366x657 e no celular. Cada propriedade tem
   antes a versao em vh, para navegador que nao conhece svh.
   ===================================================================== */

@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700.woff2) format("woff2"); }

:root {
  /* Ciano da marca (o floco). Contra branco ele tem 2,2:1, entao NAO serve
     para texto em fundo claro: la entram os dois tons fechados abaixo,
     medidos em 23/09/2026. */
  --ciano: #05BEEE;
  --ciano-claro: #6FDBF8;   /* texto sobre marinho: 11,7:1 */
  --ciano-forte: #0896C6;   /* palavra grifada em titulo grande: 3,4:1 (texto grande pede 3:1) */
  --ciano-texto: #06779F;   /* texto pequeno em fundo claro: acima de 4,5:1 */

  --marinho: #07131F;
  --marinho-2: #0C1F33;
  --marinho-3: #12304D;
  --gelo: #EEF4F8;
  --tinta: #0E1A26;
  --texto: #4A5B6C;
  --suave: #5B6B7A;
  --linha: #DCE6EE;
  --verde: #1DAA57;

  --raio: 22px;
  --raio-g: 32px;
  --sombra: 0 1px 2px rgba(7, 19, 31, .05), 0 18px 40px -18px rgba(7, 19, 31, .22);
  --sombra-g: 0 40px 80px -36px rgba(7, 19, 31, .45);
  --ease: cubic-bezier(.22, .61, .36, 1);

  --cont: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --secao: clamp(64px, 10.5vh, 128px);
  --secao: clamp(64px, 10.5svh, 128px);
  --cab-h: 84px;
  --intro: 1.15s;   /* quanto o hero espera a intro sair antes de entrar */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
/* hidden de verdade: sem isto, qualquer classe com display (grid, flex)
   vence o [hidden] do navegador e o bloco "escondido" aparece. Quem usa:
   a Diretoria em previa e o bloco do Rafael quando ela aparece. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-weight: 600; letter-spacing: -.01em; }
p, ul, ol { margin: 0; }
strong, b { font-weight: 600; color: var(--tinta); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 6px; }

/* "HVAC-R" nao pode quebrar no hifen: no celular o titulo saia "HVAC-" numa
   linha e "R" na outra. */
.nw { white-space: nowrap; }
/* O mesmo rotulo em duas versoes: longo no computador, curto no celular. */
.so-cel { display: none; }

.cont { width: 100%; max-width: calc(var(--cont) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.pular {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--ciano); color: var(--marinho); font-weight: 600;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.pular:focus { transform: none; }
.sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }

.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico--cheio { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ intro
   A logo aparece e sai, so com CSS: sem JS a intro funciona igual, e se o
   app.js nao carregar ela NAO fica presa na tela (o fim e da animacao, e
   nao de um script). O JS so faz o clique pular e tira o no depois. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: radial-gradient(60% 50% at 50% 50%, #0F2A44 0%, var(--marinho) 72%);
  animation: intro-sai .5s var(--ease) .95s forwards;
}
.intro__palco { position: relative; display: grid; place-items: center; }
.intro__logo { width: min(62vw, 300px); height: auto; animation: intro-logo .9s var(--ease) both; }
.intro__palco video { width: min(90vw, 960px); height: auto; }
.intro.is-pulada { animation: intro-sai .3s var(--ease) forwards; }
.intro.intro--video { animation: none; }
.intro.intro--video.is-fim { animation: intro-sai .45s var(--ease) forwards; }
@keyframes intro-logo { 0% { opacity: 0; transform: scale(.92); filter: blur(8px); } 45% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 1; } }
@keyframes intro-logo-suave { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; } }
@keyframes intro-sai { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------ texto base */
.chamada {
  display: inline-flex; align-items: center; gap: .75em;
  font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ciano-texto);
  margin-bottom: 20px;
}
.floco-mini { width: 15px; height: 17px; color: var(--ciano); flex: none; }
.t-hero {
  font-size: clamp(2.3rem, min(4.1vw, 7.4vh), 5.2rem);
  font-size: clamp(2.3rem, min(4.1vw, 7.4svh), 5.2rem);
  font-weight: 300; line-height: 1.06; letter-spacing: -.035em; color: #fff;
  text-wrap: balance;
}
.t-hero strong { font-weight: 600; color: var(--ciano-claro); }
.t-sec {
  font-size: clamp(1.9rem, min(1.1rem + 2.2vw, 6vh), 3.2rem);
  font-size: clamp(1.9rem, min(1.1rem + 2.2vw, 6svh), 3.2rem);
  font-weight: 300; line-height: 1.12; letter-spacing: -.03em; color: var(--tinta);
  text-wrap: balance;
}
.t-sec strong { font-weight: 600; color: var(--ciano-forte); }
.lead { font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.72; color: var(--texto); max-width: 60ch; }

.escuro { background: var(--marinho); color: rgba(255, 255, 255, .7); }
.escuro .chamada { color: var(--ciano-claro); }
.escuro .t-sec { color: #fff; }
.escuro .t-sec strong { color: var(--ciano-claro); }
.escuro .lead { color: rgba(255, 255, 255, .72); }
.escuro strong { color: #fff; }

/* --------------------------------------------------------------- botoes
   O efeito e uma LUZ que atravessa o botao: no mouse ao passar por cima,
   no celular ao tocar (o app.js poe .is-brilho no toque). Nao sobe, nao
   empurra a seta: pedido do Igor em 24/09, o levanta-e-desliza ja aparece
   em outros trabalhos dele. A luz vale mesmo para quem pede menos
   movimento: dura menos de um segundo e so acontece quando a pessoa age. */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; line-height: 1; letter-spacing: .005em; white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s;
}
.btn::after, .btn-mini::after, .wa::after {
  content: ""; position: absolute; z-index: 1; top: -40%; bottom: -40%; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, var(--brilho, rgba(255, 255, 255, .6)) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-190%) skewX(-20deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::after, .btn-mini:hover::after, .wa:hover::after { animation: brilho .9s var(--ease); }
}
.btn.is-brilho::after, .btn-mini.is-brilho::after, .wa.is-brilho::after { animation: brilho .75s var(--ease); }
@keyframes brilho { to { transform: translateX(380%) skewX(-20deg); } }
.btn .ico { width: 20px; height: 20px; }
/* Sem sombra azul brilhando atras (pedido do Igor em 24/09): o efeito do
   botao e so a luz que atravessa. */
.btn--ciano { --brilho: rgba(255, 255, 255, .75); background: var(--ciano); color: var(--marinho); }
.btn--ciano:hover { background: #2ACBF3; }
.btn--vidro { --brilho: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--vidro:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.btn--escuro { --brilho: rgba(111, 219, 248, .38); background: var(--marinho); color: #fff; }
.btn--escuro:hover { background: var(--marinho-3); }
.btn--escuro .ico { color: var(--ciano); }
.btn--contorno { --brilho: rgba(5, 190, 238, .22); background: #fff; color: var(--tinta); border-color: var(--linha); }
.btn--contorno:hover { border-color: var(--ciano-forte); color: var(--ciano-texto); }
.link-seta { display: inline-flex; align-items: center; gap: .5em; font-size: .92rem; font-weight: 600; color: var(--ciano-texto); }
.link-seta .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-seta:hover .ico { transform: translateX(4px); }

/* ------------------------------------------------------------ cabecalho */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--cab-h);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.cab__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.cab__logo { position: relative; display: block; height: 44px; aspect-ratio: 551 / 187; flex: none; }
.cab__logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity .45s var(--ease); }
.cab__logo .l-escura { opacity: 0; }
.cab__nav { margin-left: auto; display: flex; gap: 4px; }
.cab__nav a {
  position: relative; padding: 10px 14px; font-size: .93rem; font-weight: 500;
  color: rgba(255, 255, 255, .86); transition: color .3s;
}
.cab__nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: var(--ciano); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.cab__nav a:hover { color: #fff; }
.cab__nav a:hover::after, .cab__nav a[aria-current="true"]::after { transform: scaleX(1); }
.cab__cta { min-height: 46px; padding: 0 22px; font-size: .9rem; margin-left: 10px; }
.cab__menu { display: none; }

.cab.is-solido {
  height: 72px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 rgba(7, 19, 31, .08), 0 10px 30px -20px rgba(7, 19, 31, .25);
}
.cab.is-solido .l-branca { opacity: 0; }
.cab.is-solido .l-escura { opacity: 1; }
.cab.is-solido .cab__nav a { color: var(--texto); }
.cab.is-solido .cab__nav a:hover, .cab.is-solido .cab__nav a[aria-current="true"] { color: var(--tinta); }

/* Menu do celular. O estado FECHADO espera a animacao terminar antes de
   esconder (visibility com atraso); o ABERTO mostra na hora. Sem isso o
   painel abre animado e fecha estalando. */
.menu {
  position: fixed; inset: 0; z-index: 55;
  display: none; flex-direction: column; justify-content: space-between;
  padding: calc(var(--cab-h) + 20px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(5, 190, 238, .16), transparent 60%),
    var(--marinho);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.menu.is-aberto { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  font-size: clamp(1.7rem, 7vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; color: #fff;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu__pe { display: grid; gap: 16px; }
.menu__pe .btn { width: 100%; }
.menu__pe p { text-align: center; font-size: .88rem; color: rgba(255, 255, 255, .6); }
html.trava { overflow: hidden; }

/* ----------------------------------------------------------------- hero
   A regra do hero: TUDO dele na primeira tela, inclusive a faixa de
   credenciais. As fontes e os espacos dependem da largura E da altura
   visivel (svh), e quem manda e a menor das duas. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  color: #fff; background: var(--marinho);
}
.hero__fundo { position: absolute; inset: 0; z-index: -3; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 64%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 19, 31, .96) 0%, rgba(7, 19, 31, .86) 32%, rgba(7, 19, 31, .46) 64%, rgba(7, 19, 31, .22) 100%),
    linear-gradient(0deg, rgba(7, 19, 31, .98) 0%, rgba(7, 19, 31, 0) 36%),
    linear-gradient(180deg, rgba(7, 19, 31, .75) 0%, rgba(7, 19, 31, 0) 22%);
}
.hero__floco { position: absolute; z-index: -1; right: -7vw; top: 14%; width: min(44vw, 620px); aspect-ratio: 192 / 219; color: var(--ciano); opacity: .08; }
.hero__conteudo {
  flex: 1; display: flex; align-items: center;
  padding-top: calc(var(--cab-h) + clamp(8px, 3vh, 40px));
  padding-top: calc(var(--cab-h) + clamp(8px, 3svh, 40px));
  padding-bottom: clamp(20px, 4vh, 56px);
  padding-bottom: clamp(20px, 4svh, 56px);
}
.hero__texto { max-width: min(1000px, 72vw); }
.hero .chamada { color: var(--ciano-claro); margin-bottom: clamp(10px, 2.2vh, 22px); margin-bottom: clamp(10px, 2.2svh, 22px); }
.hero__lead {
  margin-top: clamp(12px, 2.6vh, 28px); margin-top: clamp(12px, 2.6svh, 28px);
  max-width: 60ch; line-height: 1.7; color: rgba(255, 255, 255, .8);
  font-size: clamp(.98rem, min(1.15vw, 2.3vh), 1.2rem);
  font-size: clamp(.98rem, min(1.15vw, 2.3svh), 1.2rem);
}
.hero__lead { text-wrap: pretty; }
.hero__lead strong { color: #fff; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 3.6vh, 40px); margin-top: clamp(16px, 3.6svh, 40px); }
.hero__acoes .btn { min-height: clamp(46px, 6.2vh, 56px); min-height: clamp(46px, 6.2svh, 56px); }

.credenciais {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(7, 19, 31, .45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.credenciais ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.credenciais li { display: flex; gap: 14px; align-items: flex-start; padding: clamp(12px, 2.4vh, 26px) 24px; padding: clamp(12px, 2.4svh, 26px) 24px; border-left: 1px solid rgba(255, 255, 255, .08); }
.credenciais li:first-child { border-left: 0; padding-left: 0; }
.credenciais .ico { width: 26px; height: 26px; color: var(--ciano); margin-top: 1px; }
.credenciais b { display: block; font-size: .95rem; line-height: 1.35; color: #fff; }
.credenciais .cred__sub { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------- secoes */
.secao { position: relative; padding-block: var(--secao); }
.secao--gelo { background: var(--gelo); }
.secao--sem-topo { padding-top: 0; }
.cab-sec { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(32px, 5.5vh, 64px); margin-bottom: clamp(32px, 5.5svh, 64px); }
.cab-sec .chamada { margin-bottom: 0; }
.cab-sec .t-sec { margin-top: 16px; }
.cab-sec--dividido { max-width: none; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 28px clamp(40px, 7vw, 110px); }

/* ---------------------------------------------------- carrossel (celular)
   No computador estas listas sao grades. No celular viram uma fita de
   deslizar com o proximo cartao aparecendo na beirada (a espiada e o
   aviso de que tem mais). Snap do CSS, sem clone e sem loop: o JS so
   acende as bolinhas, lendo a posicao DEPOIS do ultimo evento de rolagem. */
.pontos { display: none; }

/* ------------------------------------------------------------- servicos */
.servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.servico {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3.4vh, 34px) 28px clamp(22px, 3vh, 30px);
  padding: clamp(24px, 3.4svh, 34px) 28px clamp(22px, 3svh, 30px);
  border-radius: var(--raio); background: #fff; border: 1px solid var(--linha);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.servico::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ciano), rgba(5, 190, 238, 0));
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.servico:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(220, 230, 238, .4); }
.servico:hover::before { transform: scaleX(1); }
.servico__ico { width: 52px; height: 52px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 16px; background: var(--gelo); color: var(--ciano-texto); transition: background-color .5s, color .5s; }
.servico:hover .servico__ico { background: var(--marinho); color: var(--ciano); }
.servico__ico .ico { width: 26px; height: 26px; }
.servico h3 { font-size: 1.14rem; line-height: 1.3; }
.servico p { font-size: .93rem; line-height: 1.68; }
.servico .link-seta { margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------- HVAC-R */
.hvac { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.hvac__cab .t-sec { margin-bottom: 22px; }
.hvac__cab { position: sticky; top: 110px; }
.letras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.letra { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 3.2vh, 30px) 28px; padding: clamp(22px, 3.2svh, 30px) 28px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.letra__sigla {
  font-size: clamp(3.2rem, min(2.4rem + 2.6vw, 9vh), 5.2rem);
  font-size: clamp(3.2rem, min(2.4rem + 2.6vw, 9svh), 5.2rem);
  font-weight: 300; line-height: .95; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.4px var(--ciano-forte);
  margin-bottom: 14px;
}
.letra__en { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--suave); }
.letra h3 { font-size: 1.12rem; }
.letra p { font-size: .92rem; line-height: 1.68; }
/* min-width: 0 nos filhos das grades de duas colunas: sem isso, uma palavra
   que nao quebra ("CONDITIONING") alarga a coluna e empurra a pagina para
   fora da tela. Medido em 23/09/2026: 17px de estouro em 360px. */
.hvac > *, .letra, .sobre > *, .contato > *, .seg__topo > * { min-width: 0; }

/* -------------------------------------------------------------- setores */
.setores-secao { overflow: hidden; }
.setores-secao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 10% 0%, rgba(5, 190, 238, .12), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(18, 64, 106, .7), transparent 70%);
}
.setores-secao__floco { position: absolute; left: -120px; bottom: -140px; width: 460px; aspect-ratio: 192 / 219; color: var(--ciano); opacity: .05; }
.setores-secao .cont { position: relative; }
.setores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.setor {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--raio-g); border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(165deg, #11304E 0%, #0A1C2E 55%, #081624 100%);
  transition: border-color .5s, transform .6s var(--ease);
}
.setor:hover { border-color: rgba(111, 219, 248, .3); transform: translateY(-4px); }
.setor__img { position: relative; height: clamp(180px, 25vh, 290px); height: clamp(180px, 25svh, 290px); display: flex; align-items: center; justify-content: center; padding: 28px 28px 4px; }
.setor__img::before {
  content: ""; position: absolute; left: 50%; top: 54%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(5, 190, 238, .3), rgba(5, 190, 238, 0) 66%);
}
.setor__img img { position: relative; max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .4)); transition: transform .9s var(--ease); }
.setor:hover .setor__img img { transform: scale(1.05) translateY(-4px); }
.setor__txt { display: flex; flex-direction: column; gap: 10px; padding: 12px 28px 32px; }
.setor__tag { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ciano-claro); }
.setor h3 { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.setor p { font-size: .93rem; line-height: 1.68; color: rgba(255, 255, 255, .68); }
.fichas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 0; }
.fichas li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: .76rem; font-weight: 500; color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------- entregas
   A faixa vai de borda a borda da tela; a foto atual alinha com o texto do
   titulo. Largura do cartao pela LARGURA e pela ALTURA da tela, para a
   secao inteira caber numa tela de notebook. */
.entregas-secao { overflow: hidden; overflow: clip; --larg: clamp(210px, min(21vw, 30vh), 300px); --larg: clamp(210px, min(21vw, 30svh), 300px); --vao: 16px; }
.entregas-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 4.5vh, 52px); margin-bottom: clamp(28px, 4.5svh, 52px); }
.entregas-cab .cab-sec { margin-bottom: 0; }

.entregas { position: relative; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.entregas.arrastando { cursor: grabbing; }
.entregas__trilho { display: flex; gap: var(--vao); will-change: transform; }
.entrega-item {
  flex: 0 0 var(--larg); margin: 0; aspect-ratio: 600 / 1066; overflow: hidden;
  border-radius: 22px; background: #DDE6EE; box-shadow: 0 24px 40px -26px rgba(7, 19, 31, .45);
}
.entrega-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .entrega-item:hover img { transform: scale(1.04); } }
/* Sem esmaecer nas pontas: o degrade branco parecia uma sombra por cima da
   ultima foto (o Igor mandou tirar em 24/09). As fotos vao ate a borda. */
@media (max-width: 640px) {
  .entregas-secao { --larg: min(66vw, 46vh); --larg: min(66vw, 46svh); --vao: 12px; }
  .entregas-cab { gap: 18px; }
  .entrega-item { border-radius: 18px; }
}

/* Esteira sem setas, sem contador e sem pausa (pedido de 24/09): anda
   sozinha, arrasta com o mouse ou o dedo, e a foto se clica para ampliar. */
.entrega-item { cursor: zoom-in; }
.entregas.arrastando .entrega-item { cursor: grabbing; }

/* ------------------------------------------------- foto ampliada (lupa)
   Fundo desfocado por cima do site, a foto no meio. O estado FECHADO espera
   o esmaecer terminar antes de esconder (visibility com atraso). */
.lupa {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: 4vh 4vw;
  background: rgba(7, 19, 31, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  touch-action: pan-y;
}
.lupa.is-aberta { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.lupa__img {
  width: auto; height: auto; max-width: min(92vw, 760px);
  max-height: 88vh; max-height: 88svh;
  border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65);
  transform: scale(.94); transition: transform .45s var(--ease), opacity .25s;
  cursor: zoom-out; -webkit-user-drag: none; user-select: none;
}
.lupa.is-aberta .lupa__img { transform: none; }
.lupa__img.is-trocando { opacity: 0; }
.lupa__fechar {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(7, 19, 31, .45); color: #fff;
  transition: background-color .3s;
}
.lupa__fechar:hover { background: rgba(7, 19, 31, .75); }
.lupa__fechar .ico { width: 22px; height: 22px; }
.lupa__conta { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: .88rem; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .lupa { padding: 64px 12px 48px; } .lupa__img { border-radius: 16px; } }

/* ------------------------------------------------- barra de rolagem
   A MESMA do portfolio do Igor (projetos/portfolio, js/rolagem.js e o bloco
   "BARRA DE ROLAGEM PROPRIA" do css), pedida em 24/09: trilho de 3px
   flutuando sobre o conteudo, pino curto, aparece so depois que a rolagem
   comeca, engorda no mouse para dar onde pegar e e so indicador no toque.
   Diferenca de proposito: a Termaxis alterna secoes escuras e claras, entao o
   pino troca de cor com a secao que esta atras dele (.escuro vem do app.js).
   A classe .temrol entra DEPOIS de a barra existir: sem JS, fica a nativa. */
html.temrol { scrollbar-width: none; }
html.temrol::-webkit-scrollbar { width: 0; height: 0; }
.rolbar {
  position: fixed; right: 16px; top: 112px; bottom: 112px; z-index: 58; width: 3px;
  border-radius: 99px; background: rgba(14, 26, 38, .12);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease, width .2s ease, background .2s ease;
}
.rolbar.on { opacity: 1; visibility: visible; }
.rolpino {
  position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 99px;
  background: rgba(14, 26, 38, .55); cursor: grab; touch-action: pan-x pan-y;
  transition: background .2s ease;
}
.rolpino::after { content: ""; position: absolute; inset: -10px -11px; }
.rolpino:hover, .rolbar.pegando .rolpino { background: var(--tinta); }
.rolbar.pegando .rolpino { cursor: grabbing; }
.rolbar.escuro { background: rgba(255, 255, 255, .12); }
.rolbar.escuro .rolpino { background: rgba(255, 255, 255, .82); }
.rolbar.escuro .rolpino:hover, .rolbar.escuro.pegando .rolpino { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .rolbar::before { content: ""; position: absolute; inset: -8px -18px; }
  .rolbar:hover, .rolbar.pegando { width: 16px; background: rgba(14, 26, 38, .16); }
  .rolbar:hover .rolpino, .rolbar.pegando .rolpino { background: var(--tinta); }
  .rolbar.escuro:hover, .rolbar.escuro.pegando { background: rgba(255, 255, 255, .16); }
  .rolbar.escuro:hover .rolpino, .rolbar.escuro.pegando .rolpino { background: #fff; }
}
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .rolbar, .rolpino { pointer-events: none; }
  .rolpino { cursor: default; }
}
@media (max-width: 640px) { .rolbar { right: 6px; width: 2px; top: 96px; bottom: 96px; } }
/* com o menu do celular aberto, o fio da barra apareceria por cima do painel */
html.trava .rolbar { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- sobre */
.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 110px); align-items: center; }
.colagem { position: relative; padding: 0 16% 72px 0; }
.colagem__a { width: 100%; aspect-ratio: 3 / 2.1; object-fit: cover; border-radius: var(--raio-g); box-shadow: var(--sombra-g); }
.colagem__b { position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 631 / 941; object-fit: cover; border-radius: 22px; border: 8px solid #fff; box-shadow: var(--sombra-g); }
.selo { position: absolute; left: -26px; top: -26px; width: 136px; height: 136px; border-radius: 50%; background: var(--marinho); color: #fff; box-shadow: 0 20px 40px -18px rgba(7, 19, 31, .6); }
.selo__anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.selo__anel text { font-size: 8.6px; font-weight: 600; letter-spacing: .12em; fill: var(--ciano-claro); }
.selo__miolo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.selo__miolo span { font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.selo__miolo b { margin-top: 5px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.sobre .t-sec { margin-bottom: 24px; }
.sobre__txt { display: grid; gap: 14px; }
.pilares { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 30px; padding: 26px 0 0; border-top: 1px solid var(--linha); }
.pilares li { display: flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 500; color: var(--tinta); }
.pilares .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--gelo); color: var(--ciano-texto); stroke-width: 2; }

.capacidade {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  margin-top: clamp(64px, 10vh, 130px); margin-top: clamp(64px, 10svh, 130px);
  border-radius: var(--raio-g); color: rgba(255, 255, 255, .72);
  background:
    radial-gradient(70% 90% at 88% 100%, rgba(5, 190, 238, .26), rgba(5, 190, 238, 0) 62%),
    linear-gradient(160deg, #0D233A 0%, #07131F 70%);
}
.capacidade__txt { padding: clamp(36px, 5.5vw, 72px); }
.capacidade .chamada { color: var(--ciano-claro); }
.capacidade .t-sec { color: #fff; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: 20px; }
.capacidade .t-sec strong { color: var(--ciano-claro); }
.capacidade strong { color: #fff; }
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; }
.etiquetas li { padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; font-weight: 500; color: #fff; }
.capacidade__img { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 40px clamp(20px, 3vw, 40px) 0 0; }
.capacidade__img img { width: 100%; max-width: 600px; }

.lideranca {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  margin-top: 18px; padding: 24px 30px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha);
}
.lideranca__foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--gelo); }
.lideranca__nome { font-size: 1.1rem; font-weight: 600; color: var(--tinta); margin-bottom: 4px; }
/* O cargo mora numa linha propria: "socio-fundador e diretor de operacoes"
   (30/09) e comprido demais para ficar ao lado do nome. */
.lideranca__nome span { display: block; margin-top: 2px; text-wrap: balance; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano-texto); }
.lideranca__txt p:last-child { font-size: .94rem; text-wrap: pretty; }

/* ------------------------------------------------------------ diretoria
   No modelo da pagina de diretoria da Poseidon (referencia do Marquinho em
   30/09): foto de busto redonda, nome, cargo, resumo. Quatro cartoes no
   computador, dois no tablet e fita de deslizar no celular. Enquanto falta
   material ela fica escondida (ver o comentario no index.html). */
.diretoria { margin-top: clamp(64px, 10vh, 130px); margin-top: clamp(64px, 10svh, 130px); }
.diretoria__cab { margin-bottom: clamp(28px, 4.5vh, 52px); margin-bottom: clamp(28px, 4.5svh, 52px); }
.diretoria__lista { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; }
.diretor {
  display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
  padding: 32px 22px 26px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.diretor:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(220, 230, 238, .4); }
.diretor__foto, .diretor__mono {
  width: 124px; height: 124px; flex: none; margin-bottom: 18px; border-radius: 50%;
  box-shadow: 0 0 0 5px var(--gelo);
}
.diretor__foto { object-fit: cover; }
.diretor__mono {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--marinho-3) 0%, var(--marinho) 100%);
  font-size: 2.3rem; font-weight: 300; letter-spacing: .04em; color: var(--ciano-claro);
}
.diretor__nome { font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--tinta); text-wrap: balance; }
.diretor__cargo { margin-top: 8px; text-wrap: balance; font-size: .72rem; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano-texto); }
.diretor__socio { margin-top: 2px; font-size: .84rem; color: var(--suave); }
.diretor__txt { margin-top: 14px; font-size: .9rem; line-height: 1.62; text-wrap: pretty; }
.diretor .link-seta { margin-top: auto; padding-top: 16px; }
/* Marca de material que falta. So aparece na previa (?diretoria) e sai
   antes de publicar: a secao inteira esta escondida ate la. */
.diretor__falta {
  margin-top: 16px; padding: 6px 12px; border-radius: 10px; border: 1px dashed #C9A23A;
  background: #FFF8E6; font-size: .76rem; line-height: 1.45; color: #6B5310; text-wrap: balance;
}

/* ------------------------------------------------------------ seguranca */
.seg__topo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; margin-bottom: clamp(36px, 5.5vh, 64px); margin-bottom: clamp(36px, 5.5svh, 64px); }
.seg__topo .t-sec { margin-bottom: 22px; }
.seg__foto { border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-g); }
.seg__foto img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: 50% 30%; }
.docs { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; }
.doc { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3.4vh, 34px) 30px; padding: clamp(24px, 3.4svh, 34px) 30px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.doc__sigla { font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--tinta); }
.doc__nome { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ciano-texto); margin-bottom: 4px; }
.doc p:not([class]) { font-size: .93rem; line-height: 1.68; }
.doc--higiene { background: var(--marinho); border-color: var(--marinho); color: rgba(255, 255, 255, .7); }
.doc--higiene .doc__nome { color: var(--ciano-claro); }
.doc--higiene strong { color: #fff; }
.checks { list-style: none; display: grid; gap: 11px; padding: 0; }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: #fff; font-size: .95rem; line-height: 1.5; }
.checks .ico { width: 22px; height: 22px; color: var(--ciano); stroke-width: 2; }
.checks--claro { margin-top: 6px; }
.nrs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: 18px; padding: 20px 28px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha);
}
.nrs__rotulo { font-size: .9rem; font-weight: 500; color: var(--tinta); }
.nrs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.nrs li { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--gelo); font-size: .86rem; color: var(--texto); }
.nrs b { color: var(--ciano-texto); }

/* --------------------------------------------------------- equipamentos */
.entrega { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(32px, 6vw, 100px); margin-bottom: clamp(40px, 6vh, 88px); margin-bottom: clamp(40px, 6svh, 88px); }
.entrega__num {
  font-size: clamp(6rem, min(3rem + 11vw, 26vh), 14rem);
  font-size: clamp(6rem, min(3rem + 11vw, 26svh), 14rem);
  font-weight: 600; line-height: .8; letter-spacing: -.07em;
  background: linear-gradient(140deg, var(--ciano) 10%, #0A6E9C 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.entrega__num span { font-weight: 300; letter-spacing: -.02em; }
.entrega .t-sec { margin-bottom: 20px; }
.produtos-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--linha); }
.produtos-cab h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }
.produtos-cab p { font-size: .92rem; color: var(--suave); }
.produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.produto {
  display: flex; flex-direction: column; padding: 14px 14px 20px; border-radius: var(--raio);
  background: var(--gelo); border: 1px solid transparent;
  transition: background-color .5s, box-shadow .5s var(--ease), transform .5s var(--ease), border-color .5s;
}
.produto:hover { background: #fff; border-color: var(--linha); box-shadow: var(--sombra); transform: translateY(-4px); }
/* O arquivo ja traz a folga desenhada (e o brasado, que veio cortado na
   origem, encosta de proposito na borda de baixo): a imagem ocupa o quadro
   inteiro, sem margem extra. */
.produto__img { aspect-ratio: 5 / 4; overflow: hidden; margin-bottom: 16px; border-radius: 16px; background: #fff; }
.produto__img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .9s var(--ease); transform-origin: 50% 100%; }
.produto:hover .produto__img img { transform: scale(1.05); }
.produto__txt { display: flex; flex: 1; flex-direction: column; padding-inline: 6px; }
.produto h4 { font-size: 1rem; line-height: 1.35; }
/* O texto empurra o botao para o pe do cartao: os botoes da mesma linha
   ficam alinhados mesmo quando um nome quebra em duas linhas e o outro nao. */
.produto__txt p { margin: 5px 0 16px; font-size: .85rem; line-height: 1.55; color: var(--suave); }
.btn-mini {
  --brilho: rgba(5, 190, 238, .28);
  position: relative; overflow: hidden; isolation: isolate;
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); background: #fff;
  font-size: .82rem; font-weight: 600; color: var(--tinta); transition: background-color .3s, color .3s, border-color .3s;
}
.btn-mini .ico { width: 16px; height: 16px; color: var(--ciano-texto); transition: color .3s; }
.btn-mini:hover { --brilho: rgba(111, 219, 248, .4); background: var(--marinho); border-color: var(--marinho); color: #fff; }
.btn-mini:hover .ico { color: var(--ciano); }

/* ------------------------------------------------------------- contrato */
.contrato {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px;
  padding: clamp(36px, 6vh, 80px) clamp(28px, 5.5vw, 84px);
  padding: clamp(36px, 6svh, 80px) clamp(28px, 5.5vw, 84px);
  border-radius: 36px; color: rgba(255, 255, 255, .72);
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(5, 190, 238, .2), rgba(5, 190, 238, 0) 56%),
    linear-gradient(150deg, #0F2A44 0%, #07131F 72%);
}
.contrato .chamada { color: var(--ciano-claro); }
.contrato .t-sec { color: #fff; margin-bottom: 20px; }
.contrato .t-sec strong { color: var(--ciano-claro); }
.contrato strong { color: #fff; }
.contrato .checks { margin: 26px 0 34px; }
.contrato__arte { position: relative; min-height: clamp(300px, 42vh, 400px); min-height: clamp(300px, 42svh, 400px); }
.contrato__bloco { position: absolute; right: 4%; top: 2%; width: 60%; height: 80%; border-radius: 34px; background: linear-gradient(160deg, #1CC5F2 0%, #0784B3 100%); opacity: .95; }
.contrato__predio { position: absolute; right: 16%; bottom: 16%; height: 92%; width: auto; max-width: none; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .3)); }
.contrato__split { position: absolute; left: -4%; bottom: 0; width: 94%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); }

/* --------------------------------------------------------- diferenciais */
.dif { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; padding: 0; }
/* align-content: start: sem ele, o item de texto curto estica as linhas
   internas para igualar a altura do vizinho, e o paragrafo desce. */
.dif__item { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 22px; padding: 28px 0 30px; border-top: 1px solid var(--linha); }
.dif__num { grid-row: span 2; min-width: 2.1ch; font-size: 2.3rem; font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--ciano-forte); }
.dif__item h3 { padding-top: 4px; font-size: 1.08rem; }
.dif__item p { font-size: .92rem; }

/* -------------------------------------------------------------- contato
   Tres blocos numa grade: no computador o formulario fica na coluna da
   direita e os dois blocos de texto empilham na esquerda; no celular a
   ordem vira titulo, formulario e so depois os enderecos. */
.contato {
  display: grid; grid-template-columns: .9fr 1.1fr; align-items: start;
  grid-template-areas: "cab form" "bases form";
  gap: 0 clamp(48px, 6vw, 96px);
}
.contato__cab { grid-area: cab; }
.form { grid-area: form; }
.bases { grid-area: bases; margin-top: 36px; }
.contato .t-sec { margin-bottom: 20px; }
.canais { display: grid; gap: 10px; margin-top: 32px; }
.canal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--linha);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s;
}
.canal:hover { border-color: rgba(8, 150, 198, .5); transform: translateX(4px); box-shadow: var(--sombra); }
.canal__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--gelo); color: var(--ciano-texto); }
.canal small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.canal b { font-size: 1.04rem; }
.canal > .seta { width: 20px; height: 20px; color: var(--ciano-texto); }
.base { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--linha); }
.base__tipo { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano-texto); }
.base h3 { font-size: 1.05rem; }
.base p:not([class]) { font-size: .92rem; line-height: 1.6; }
.base .link-seta { margin-top: 6px; font-size: .88rem; }
.alcance { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .95rem; color: var(--tinta); }
.alcance .ico { color: var(--ciano-texto); }

.form { padding: clamp(28px, 4vw, 48px); border-radius: var(--raio-g); background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-g); }
.form h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; }
.form__sub { margin-top: 6px; font-size: .92rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 26px; }
.campo--cheio { grid-column: 1 / -1; }
.campo label { display: block; margin-bottom: 8px; font-size: .84rem; font-weight: 500; color: var(--tinta); }
.opc { font-weight: 400; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linha); background: #F7FAFC;
  font-size: 16px; color: var(--tinta); -webkit-appearance: none; appearance: none;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #8A99A8; }
.campo select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306779F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.campo select:invalid { color: #8A99A8; }
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ciano-forte); background-color: #fff; box-shadow: 0 0 0 4px rgba(5, 190, 238, .18); }
.campo.is-erro input, .campo.is-erro select { border-color: #D14343; box-shadow: 0 0 0 4px rgba(209, 67, 67, .12); }
/* Caixa da politica de privacidade (30/09). A etiqueta inteira e a area de
   toque; o quadrado segue o desenho dos campos e vira marinho com o check
   ciano quando marcado. */
.aceite { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; font-size: .88rem; line-height: 1.5; color: var(--texto); cursor: pointer; }
.aceite input {
  flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border-radius: 7px; border: 1.5px solid #7D8C9B; background: #F7FAFC center / 14px no-repeat;
  -webkit-appearance: none; appearance: none;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.aceite input:checked {
  border-color: var(--marinho); background-color: var(--marinho);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305BEEE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
/* borda e foco com 3:1 contra o fundo (WCAG 1.4.11, revisao de 02/10) */
.aceite input:focus-visible { outline: 2px solid var(--ciano-forte); outline-offset: 3px; }
.aceite span { text-wrap: pretty; }
.aceite a { font-weight: 600; color: var(--ciano-texto); text-decoration: underline; text-underline-offset: 3px; }
.aceite.is-erro input { border-color: #D14343; box-shadow: 0 0 0 4px rgba(209, 67, 67, .12); }
.form__erro { margin-top: 16px; font-size: .88rem; font-weight: 500; color: #B42F2F; text-wrap: balance; }
.form .btn { width: 100%; margin-top: 22px; min-height: 58px; }
.form__nota { margin-top: 14px; text-align: center; font-size: .8rem; color: var(--suave); }

/* --------------------------------------------------------------- rodape */
.rodape { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 110px) 0 36px; background: var(--marinho); color: rgba(255, 255, 255, .6); }
.rodape__floco { position: absolute; right: -90px; top: -110px; width: 420px; aspect-ratio: 192 / 219; color: var(--ciano); opacity: .045; }
.rodape .cont { position: relative; }
.rodape__topo { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; padding-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rodape__marca img { height: 50px; width: auto; }
.rodape__slogan { margin-top: 26px; max-width: 14ch; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; color: #fff; }
.rodape__slogan strong { color: var(--ciano-claro); }
.rodape h4 { margin-bottom: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.rodape ul { list-style: none; display: grid; gap: 10px; padding: 0; font-size: .92rem; }
.rodape a { transition: color .3s; }
.rodape a:hover { color: #fff; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 28px; padding-right: 84px; font-size: .8rem; }
.rodape__base a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.rodape__base a:hover { text-decoration-color: currentColor; }
.rodape__sep { margin-inline: 10px; }

/* ----------------------------------------- contato fixo (redondo e barra) */
.wa {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; isolation: isolate;
  /* na paleta da Termaxis, nao no verde do WhatsApp (pedido de 24/09) */
  --brilho: rgba(255, 255, 255, .75); background: var(--ciano); color: var(--marinho); box-shadow: 0 10px 24px -12px rgba(7, 19, 31, .45);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.wa .ico { width: 28px; height: 28px; }
.wa:hover { background: #2ACBF3; }
.js .wa:not(.is-visivel) { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); }
.wa.is-visivel { transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }
.barra-cel { display: none; }

/* ------------------------------------------------ revelacao ao rolar
   Com a classe .anima (o app.js poe quando o navegador tem
   IntersectionObserver). Sem ela, tudo nasce visivel.
   MENOS MOVIMENTO: o Windows do Igor pede, e muita gente pede. Para essas
   pessoas fica so o ESMAECER (sem deslocar), a intro sem zoom, e nada que
   gire sozinho. A regra antiga zerava toda animacao, e o Igor nao via nem
   a luz do botao nem a intro na tela dele. */
.anima [data-revelar] { opacity: 0; transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.anima [data-revelar].is-in { opacity: 1; transform: none; }
.anima .hero__texto > *, .anima .credenciais { animation: aparece .9s var(--ease) both; }
.anima .hero__texto > :nth-child(1) { animation-delay: var(--intro); }
.anima .hero__texto > :nth-child(2) { animation-delay: calc(var(--intro) + .08s); }
.anima .hero__texto > :nth-child(3) { animation-delay: calc(var(--intro) + .16s); }
.anima .hero__texto > :nth-child(4) { animation-delay: calc(var(--intro) + .24s); }
.anima .credenciais { animation-delay: calc(var(--intro) + .34s); }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } }
@keyframes aproxima { from { transform: scale(1.08); } }
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .anima [data-revelar] { transform: translateY(26px); }
  .anima .hero__texto > *, .anima .credenciais { animation-name: sobe; }
  .anima .hero__fundo img { animation: aproxima 2.6s var(--ease) both; }
  .anima .hero__floco { animation: gira 120s linear infinite; }
  .anima .selo__anel { animation: gira 40s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__logo { animation-name: intro-logo-suave; }
}

/* ============================================================ responsivo */
@media (max-width: 1100px) {
  .diretoria__lista { grid-template-columns: repeat(2, 1fr); }
  .produtos { grid-template-columns: repeat(3, 1fr); }
  .docs { grid-template-columns: 1fr 1fr; }
  .doc--higiene { grid-column: 1 / -1; }
  .rodape__topo { grid-template-columns: 1fr 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  :root { --cab-h: 64px; }
  .cab, .cab.is-solido { height: var(--cab-h); }
  .cab__nav, .cab__cta { display: none; }
  .cab__logo { height: 34px; }
  /* Hamburguer sem circulo (pedido de 24/09): so as duas linhas. A area de
     toque continua 44x44, e a margem negativa alinha as linhas com a borda
     do conteudo, igual a logo do outro lado. */
  .cab__menu {
    position: relative; z-index: 61; margin: 0 -11px 0 auto; display: grid; place-content: center; gap: 7px;
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .cab__menu span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .4s var(--ease), background-color .3s; }
  .cab.is-solido .cab__menu span { background: var(--tinta); }
  .cab.is-menu { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cab.is-menu .l-branca { opacity: 1; }
  .cab.is-menu .l-escura { opacity: 0; }
  .cab.is-menu .cab__menu span { background: #fff; }
  .cab.is-menu .cab__menu span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .cab.is-menu .cab__menu span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .menu { display: flex; }

  .cab-sec--dividido { grid-template-columns: 1fr; }
  .servicos { grid-template-columns: 1fr 1fr; }
  .hvac { grid-template-columns: 1fr; }
  .hvac__cab { position: static; }
  .setores { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .setor { display: grid; grid-template-columns: .8fr 1.2fr; }
  .setor__img { height: auto; min-height: 240px; padding: 24px; }
  .setor__txt { padding: 28px 26px 28px 4px; justify-content: center; }
  .sobre { grid-template-columns: 1fr; }
  .colagem { max-width: 640px; margin-left: 26px; }
  .capacidade { grid-template-columns: 1fr; }
  .capacidade__img { padding: 0 24px; }
  .capacidade__img img { max-width: 520px; }
  .seg__topo { grid-template-columns: 1fr; }
  .contrato { grid-template-columns: 1fr; }
  .contrato__arte { min-height: 320px; max-width: 520px; width: 100%; margin: 12px auto 0; }
  .dif { grid-template-columns: 1fr 1fr; }
  .contato { grid-template-columns: 1fr; grid-template-areas: "cab" "form" "bases"; }
  .form { margin-top: 32px; }
}

@media (max-width: 860px) {
  .credenciais ul { grid-template-columns: 1fr 1fr; }
  .credenciais li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .credenciais li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .entrega { grid-template-columns: 1fr; gap: 24px; }
  .produtos { grid-template-columns: 1fr 1fr; }
  .lideranca { grid-template-columns: auto 1fr; }
  .lideranca .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ------------------------------------------------------------- CELULAR */
@media (max-width: 760px) {
  /* A fita de deslizar. Margem negativa + padding: a fita vai de borda a
     borda da tela, e o primeiro cartao continua alinhado com o texto. */
  [data-carrossel] {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
    scrollbar-width: none;
  }
  [data-carrossel]::-webkit-scrollbar { display: none; }
  [data-carrossel] > * { flex: 0 0 84%; scroll-snap-align: start; }
  .setores[data-carrossel] { max-width: none; }
  .setores[data-carrossel] > .setor { display: flex; flex-direction: column; flex-basis: 86%; }
  .setores[data-carrossel] .setor__img { height: 210px; min-height: 0; padding: 22px 22px 0; }
  .setores[data-carrossel] .setor__txt { padding: 10px 22px 26px; justify-content: flex-start; }
  .docs[data-carrossel] > .doc { flex-basis: 86%; }
  .docs[data-carrossel] > .doc--higiene { grid-column: auto; }
  /* cartao de pessoa e estreito: com 78% a foto do proximo ja espia */
  .diretoria__lista[data-carrossel] > .diretor { flex-basis: 78%; }
  /* Cartao dentro da fita nao espera a rolagem vertical para aparecer: o
     que esta fora da tela para o lado nunca "entraria" sozinho. */
  .anima [data-carrossel] > [data-revelar] { opacity: 1; transform: none; }

  .pontos { display: flex; justify-content: center; gap: 2px; margin-top: 14px; }
  .pontos button {
    width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .pontos button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgba(14, 26, 38, .2); transition: width .35s var(--ease), background-color .35s; }
  .pontos button[aria-current="true"]::before { width: 20px; background: var(--ciano-forte); }
  .escuro .pontos button::before { background: rgba(255, 255, 255, .25); }
  .escuro .pontos button[aria-current="true"]::before { background: var(--ciano); }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --secao: clamp(56px, 9vh, 76px); --secao: clamp(56px, 9svh, 76px); }
  body { font-size: 16px; line-height: 1.65; }
  .so-desk { display: none; }
  .so-cel { display: inline; }

  /* --- hero do celular: tudo na primeira tela, faixa de credenciais junto.
     O texto fica CENTRADO entre o cabecalho e a faixa (antes ficava colado
     embaixo). Em celular alto (390x844, 430x800) sobravam 200 a 280px de
     bloco escuro acima do titulo, e o Marquinho apontou esse espaco na
     reuniao de 30/09. Centrado, a sobra se divide em cima e embaixo; e o
     alto do degrade ficou mais leve para o porto aparecer nesse espaco, em
     vez de parecer um vazio. Em celular baixo o texto ja enche a tela e
     nada muda. Conferido com o _hero.html. */
  .hero::before {
    background: linear-gradient(180deg, rgba(7, 19, 31, .88) 0%, rgba(7, 19, 31, .55) 12%, rgba(7, 19, 31, .74) 26%, rgba(7, 19, 31, .84) 46%, rgba(7, 19, 31, .97) 100%);
  }
  .hero__floco { display: none; }
  .hero__conteudo {
    align-items: center;
    padding-top: calc(var(--cab-h) + clamp(8px, 2.5vh, 24px)); padding-top: calc(var(--cab-h) + clamp(8px, 2.5svh, 24px));
    padding-bottom: clamp(12px, 2.4vh, 28px); padding-bottom: clamp(12px, 2.4svh, 28px);
  }
  .hero__texto { max-width: none; }
  .hero .chamada { font-size: .66rem; letter-spacing: .16em; margin-bottom: 12px; }
  .t-hero { font-size: clamp(1.8rem, min(9vw, 5.4vh), 2.9rem); font-size: clamp(1.8rem, min(9vw, 5.4svh), 2.9rem); line-height: 1.08; }
  .hero__lead { margin-top: clamp(10px, 2vh, 18px); margin-top: clamp(10px, 2svh, 18px); font-size: .93rem; line-height: 1.6; }
  .hero__acoes { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-top: clamp(14px, 2.6vh, 24px); margin-top: clamp(14px, 2.6svh, 24px); }
  .hero__acoes .btn { min-height: 50px; padding: 0 14px; font-size: .92rem; }
  .credenciais li { gap: 10px; padding: 12px 10px 12px 0; align-items: center; }
  .credenciais li:nth-child(even) { padding-left: 12px; padding-right: 0; }
  .credenciais .ico { width: 20px; height: 20px; margin: 0; }
  .credenciais b { font-size: .8rem; line-height: 1.3; }
  .credenciais .cred__sub { display: none; }

  /* --- cabecalho de secao mais curto */
  .cab-sec { gap: 14px; margin-bottom: 28px; }
  .cab-sec .t-sec { margin-top: 12px; }
  .chamada { font-size: .7rem; letter-spacing: .18em; margin-bottom: 14px; }
  .t-sec { font-size: clamp(1.75rem, 7.6vw, 2.2rem); }
  .lead { font-size: .96rem; }

  .servico { padding: 24px 22px 22px; }
  .servico__ico { width: 46px; height: 46px; border-radius: 14px; }

  .letras { grid-template-columns: 1fr; gap: 10px; }
  /* Em duas colunas de 150px o texto saia uma palavra por linha: no celular
     cada quadro vira uma linha, com a letra a esquerda e o texto ao lado. */
  .letra { display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 14px; row-gap: 3px; align-items: start; padding: 18px 18px 20px; }
  .letra__sigla { grid-row: 1 / span 3; margin: 0; font-size: 2.7rem; -webkit-text-stroke-width: 1.2px; }
  .letra__en { font-size: .64rem; letter-spacing: .16em; }
  .letra p { font-size: .88rem; }

  .colagem { margin-left: 14px; padding: 0 14% 52px 0; }
  .selo { width: 100px; height: 100px; left: -14px; top: -14px; }
  .selo__miolo b { font-size: 1.25rem; }
  .pilares { grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 24px; padding-top: 22px; }
  .pilares li { font-size: .86rem; line-height: 1.35; gap: 10px; }
  .pilares .ico { width: 26px; height: 26px; padding: 5px; }
  .capacidade { border-radius: 26px; }
  .capacidade__txt { padding: 32px 22px 8px; }
  .etiquetas li { padding: 6px 12px; font-size: .78rem; }
  .lideranca { grid-template-columns: auto 1fr; gap: 14px 16px; padding: 20px; }
  .lideranca__foto { width: 64px; height: 64px; }
  .lideranca__nome span { margin-top: 4px; line-height: 1.5; }
  .lideranca .btn { width: 100%; min-height: 48px; }
  .diretor { padding: 28px 20px 22px; }
  .diretor__foto, .diretor__mono { width: 112px; height: 112px; margin-bottom: 16px; }

  .seg__topo { gap: 24px; }
  .seg__foto { border-radius: 24px; }
  .doc { padding: 26px 22px; }
  .nrs { padding: 18px; gap: 12px; }
  .nrs li { padding: 7px 11px; font-size: .8rem; }

  .entrega { gap: 12px; }
  .entrega__num { font-size: 6.2rem; }
  .produtos-cab { margin-bottom: 16px; padding-bottom: 14px; }
  .produtos { grid-template-columns: 1fr; gap: 10px; }
  .produto { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
  .produto__img { width: 96px; flex: none; aspect-ratio: 1; margin-bottom: 0; border-radius: 14px; }
  .produto__txt { padding: 2px 0; }
  .produto h4 { font-size: .95rem; }
  .produto__txt p { margin: 3px 0 10px; font-size: .8rem; line-height: 1.45; }
  .btn-mini { padding: 8px 13px; font-size: .78rem; }

  .contrato { border-radius: 26px; padding: 34px 22px 24px; }
  .contrato .btn { width: 100%; }
  .contrato .checks { margin: 22px 0 26px; }
  .contrato__arte { min-height: 250px; }

  .dif { grid-template-columns: 1fr; }
  .dif__item { padding: 20px 0 22px; gap: 4px 18px; }
  .dif__num { font-size: 1.9rem; }

  .canais { margin-top: 24px; }
  .form { border-radius: 24px; padding: 26px 20px; margin-top: 24px; }
  .campos { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .bases { margin-top: 28px; }

  .rodape { padding-bottom: calc(36px + 76px + env(safe-area-inset-bottom)); }
  .rodape__topo { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 40px; }
  .rodape__base { flex-direction: column; padding-right: 0; }

  /* --- contato fixo: no celular e a barra, e nao o botao redondo */
  .wa { display: none; }
  .barra-cel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: 1fr auto; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(7, 19, 31, .9); border-top: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    transition: transform .45s var(--ease), opacity .45s var(--ease), visibility 0s linear .45s;
  }
  .barra-cel .btn { min-height: 48px; padding: 0 16px; font-size: .9rem; box-shadow: none; }
  .barra-cel__tel { border: 1px solid rgba(255, 255, 255, .16); }
  .js .barra-cel:not(.is-visivel) { transform: translateY(110%); opacity: 0; visibility: hidden; }
  .barra-cel.is-visivel { transition: transform .45s var(--ease), opacity .45s var(--ease), visibility 0s; }
}

/* Celular baixo (iPhone SE e parecidos): aperta o hero mais um pouco para
   a faixa de credenciais ainda caber. */
@media (max-width: 640px) and (max-height: 600px) {
  .t-hero { font-size: 1.7rem; }
  .hero__lead { font-size: .84rem; line-height: 1.5; }
  .hero .chamada { margin-bottom: 8px; }
  .credenciais li { padding-block: 9px; }
}