/* ==========================================================================
   FREE FLOW — SITE INSTITUCIONAL
   Todo valor visual vem de tokens.css. Se precisar mudar uma cor, um tamanho
   ou um espaçamento, mexa LÁ, não aqui.
   ========================================================================== */

@import url("tokens.css");

/* ---------------------------------------------------------- 1. BASE ------ */

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

html{scroll-behavior:smooth; scroll-padding-top:88px;}

body{
  margin:0;
  background:var(--superficie);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:var(--t-corpo);
  line-height:var(--altura-texto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}

::selection{background:var(--vm-500); color:#fff;}

:focus-visible{
  outline:3px solid var(--az-300);
  outline-offset:3px;
  border-radius:var(--r-1);
}

/* ------------------------------------------------------- 2. LAYOUT ------ */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--e-5);
}

.secao{padding-block:var(--secao-y);}
.secao--clara{background:var(--superficie);}
.secao--branca{background:var(--superficie-elevada);}

/* Seção escura: fundo marinho + trama de pontos herdada do catálogo */
.secao--escura{
  position:relative;
  background:var(--superficie-escura);
  color:var(--texto-no-escuro);
  overflow:hidden;
}
.secao--escura::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--trama-pontos);
  background-size:var(--trama-passo);
  opacity:.15;
  pointer-events:none;
}
.secao--escura > *{position:relative; z-index:1;}

/* --------------------------------------------------- 3. TIPOGRAFIA ------ */

.etiqueta{
  display:inline-flex; align-items:center; gap:var(--e-3);
  font-family:var(--fonte-tecnica);
  font-size:var(--t-corpo);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--track-etiqueta);
  color:var(--detalhe);
  margin-bottom:var(--e-3);
}
.etiqueta::before{content:""; width:28px; height:2px; background:var(--detalhe); flex:none;}

/* Sobre fundo escuro o vermelho principal reprova em contraste (2,66:1).
   O manual manda trocar pelo Vermelho Brasa — vale para QUALQUER área
   escura, inclusive o hero, que não usa a classe .secao--escura. */
.secao--escura .etiqueta,
.hero .etiqueta{color:var(--detalhe-no-escuro);}
.secao--escura .etiqueta::before,
.hero .etiqueta::before{background:var(--detalhe-no-escuro);}

.titulo{
  font-family:var(--fonte-display);
  font-weight:var(--peso-display);
  font-size:var(--t-h2);
  line-height:var(--altura-titulo);
  letter-spacing:-.015em;
  color:var(--az-900);
  margin:0 0 var(--e-4);
  max-width:22ch;
}
.secao--escura .titulo{color:var(--texto-no-escuro); }
.titulo em{font-style:normal; color:var(--marca);}
.secao--escura .titulo em{color:var(--realce);}

.chamada{
  font-size:var(--t-corpo-g);
  color:var(--texto-suave);
  max-width:var(--container-texto);
  margin:0 0 var(--e-7);
}
.secao--escura .chamada{color:var(--texto-suave-no-escuro);}

.texto{color:var(--texto-suave); max-width:var(--container-texto);}
.texto + .texto{margin-top:var(--e-4);}

/* ---------------------------------------------------- 4. COMPONENTES ---- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  padding:14px 28px;
  border:2px solid transparent;
  border-radius:var(--r-2);
  font-family:var(--fonte-display);
  font-weight:var(--peso-titulo);
  font-size:.9375rem;
  line-height:1;
  cursor:pointer;
  transition:background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:active{transform:translateY(1px);}
.btn svg{width:18px; height:18px; flex:none;}

.btn--detalhe{background:var(--detalhe); color:#fff;}
.btn--detalhe:hover{background:var(--vm-700);}

.btn--marca{background:var(--marca); color:#fff;}
.btn--marca:hover{background:var(--az-600);}

.btn--linha{border-color:var(--borda-forte); color:var(--az-800);}
.btn--linha:hover{border-color:var(--az-800); background:var(--superficie-elevada);}

.btn--linha-clara{border-color:rgba(255,255,255,.45); color:#fff;}
.btn--linha-clara:hover{border-color:#fff; background:rgba(255,255,255,.10);}

.chip{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--fonte-tecnica);
  font-size:.9375rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  padding:7px 16px;
  border-radius:var(--r-1);
  background:rgba(255,255,255,.07);
  border:1px solid var(--borda-no-escuro);
  color:var(--texto-no-escuro);
}
.chip svg{width:15px; height:15px; color:var(--realce); flex:none;}

.icone{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:var(--r-2);
  flex:none;
}
.icone svg{width:23px; height:23px;}
.icone--marca{background:rgba(8,101,150,.10); color:var(--marca);}
.icone--detalhe{background:rgba(185,21,37,.09); color:var(--detalhe);}
.icone--no-escuro{background:rgba(33,178,226,.14); color:var(--realce);}

/* --------------------------------------------------- 5. CABEÇALHO ------- */

.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(4,25,56,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda-no-escuro);
  transition:background var(--transicao);
}
.cabecalho--solido{background:var(--az-900);}

.cabecalho__barra{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-5);
  min-height:76px;
}
.cabecalho__logo img{width:186px;}

.menu{display:flex; align-items:center; gap:var(--e-5);}
.menu a{
  font-size:.9375rem; font-weight:500;
  color:var(--br-200);
  padding-block:6px;
  border-bottom:2px solid transparent;
  transition:color var(--transicao), border-color var(--transicao);
}
.menu a:hover{color:#fff; border-bottom-color:var(--detalhe-no-escuro);}

.cabecalho__acoes{display:flex; align-items:center; gap:var(--e-4);}
.cabecalho__tel{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-family:var(--fonte-tecnica); font-size:1.0625rem; font-weight:600;
  letter-spacing:.04em; color:#fff; white-space:nowrap;
}
.cabecalho__tel svg{width:17px; height:17px; color:var(--realce);}
.cabecalho__acoes .btn{padding:11px 22px; font-size:.875rem;}

.hamburguer{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--borda-no-escuro); border-radius:var(--r-2);
  cursor:pointer; padding:0; place-items:center;
}
.hamburguer span{display:block; width:20px; height:2px; background:#fff; margin:2.5px auto; transition:var(--transicao);}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.menu-movel{display:none; background:var(--az-900); border-top:1px solid var(--borda-no-escuro);}
.menu-movel.aberto{display:block;}
.menu-movel a{
  display:block; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#fff; font-weight:500;
}
.menu-movel .btn{width:100%; margin-block:var(--e-4);}

/* -------------------------------------------------------- 6. HERO ------- */

.hero{
  position:relative;
  padding-top:calc(76px + var(--e-9));
  padding-bottom:var(--e-10);
  background:var(--grad-marinho);
  color:var(--texto-no-escuro);
  overflow:hidden;
}
/* Onda de pontos: eco direto da capa do catálogo Navalshore */
.hero__trama{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--trama-pontos);
  background-size:var(--trama-passo);
  opacity:.5;
  -webkit-mask-image:radial-gradient(120% 78% at 88% 4%, #000 8%, rgba(0,0,0,.45) 38%, transparent 68%);
          mask-image:radial-gradient(120% 78% at 88% 4%, #000 8%, rgba(0,0,0,.45) 38%, transparent 68%);
}
.hero__trama--baixo{
  -webkit-mask-image:radial-gradient(110% 70% at 12% 108%, #000 10%, rgba(0,0,0,.4) 40%, transparent 70%);
          mask-image:radial-gradient(110% 70% at 12% 108%, #000 10%, rgba(0,0,0,.4) 40%, transparent 70%);
  opacity:.38;
}
.hero .container{position:relative; z-index:1;}

.hero__conteudo{max-width:52rem;}
.hero__titulo{
  font-family:var(--fonte-display);
  font-weight:var(--peso-display);
  font-size:var(--t-display);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 var(--e-5);
  color:#fff;
}
.hero__titulo em{font-style:normal; color:var(--realce);}
.hero__texto{
  font-size:1.1875rem;
  color:var(--texto-suave-no-escuro);
  max-width:44rem;
  margin:0 0 var(--e-6);
}
.hero__acoes{display:flex; gap:var(--e-3); flex-wrap:wrap; margin-bottom:var(--e-7);}
.hero__selos{display:flex; gap:var(--e-3); flex-wrap:wrap;}

/* ------------------------------------------------------- 7. NÚMEROS ----- */

.numeros{background:var(--az-900); padding-block:0;}
.numeros__grade{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--e-3);
  transform:translateY(-38px);
  margin-bottom:calc(-38px + var(--e-2));
}
.numero{
  background:var(--superficie-elevada);
  border:1px solid var(--borda);
  border-top:3px solid var(--detalhe);
  border-radius:var(--r-3);
  padding:var(--e-5) var(--e-4);
  text-align:center;
  box-shadow:var(--sombra-2);
}
.numero__valor{
  font-family:var(--fonte-tecnica);
  font-size:3rem; font-weight:700; line-height:1;
  color:var(--az-800);
  letter-spacing:.01em;
}
.numero__valor em{font-style:normal; color:var(--detalhe);}
.numero__rotulo{
  font-family:var(--fonte-tecnica);
  font-size:.9375rem; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:var(--texto-suave);
  margin-top:var(--e-2);
}

/* -------------------------------------------------------- 8. SOBRE ------ */

.sobre__grade{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:var(--e-8); align-items:start;
}
.credenciais{
  background:var(--superficie-elevada);
  border:1px solid var(--borda);
  border-radius:var(--r-3);
  padding:var(--e-6);
  box-shadow:var(--sombra-1);
}
.credenciais__titulo{
  font-family:var(--fonte-tecnica);
  font-size:.9375rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:var(--texto-suave);
  padding-bottom:var(--e-4);
  border-bottom:1px solid var(--borda);
  margin-bottom:var(--e-2);
}
.credencial{
  display:flex; gap:var(--e-4); align-items:flex-start;
  padding-block:var(--e-4);
  border-bottom:1px solid var(--borda);
}
.credencial:last-child{border-bottom:none; padding-bottom:0;}
.credencial__texto b{
  display:block;
  font-family:var(--fonte-display); font-weight:var(--peso-titulo);
  font-size:.9375rem; color:var(--az-900); margin-bottom:2px;
}
.credencial__texto span{font-size:.875rem; color:var(--texto-suave); line-height:1.55;}

.lista-marcada{display:grid; gap:var(--e-3); margin-top:var(--e-6);}
.lista-marcada li{
  display:flex; gap:var(--e-3); align-items:flex-start;
  font-size:.9375rem; color:var(--texto-suave);
}
.lista-marcada svg{width:19px; height:19px; color:var(--detalhe); flex:none; margin-top:3px;}

/* ------------------------------------------------ 9. REPRESENTADAS ------ */

.marcas{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4);}
.marca{
  display:flex; flex-direction:column;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--r-3);
  overflow:hidden;
  transition:box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.marca:hover{transform:translateY(-4px); box-shadow:var(--sombra-2); border-color:var(--br-400);}
.marca__topo{
  background:var(--az-800);
  padding:var(--e-5);
  position:relative; overflow:hidden;
}
.marca__topo::after{
  content:""; position:absolute; inset:0;
  background-image:var(--trama-pontos); background-size:var(--trama-passo);
  opacity:.18;
}
.marca__topo > *{position:relative; z-index:1;}
.marca__papel{
  font-family:var(--fonte-tecnica);
  font-size:.875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:var(--realce);
  margin-bottom:var(--e-2);
}
.marca__nome{
  font-family:var(--fonte-display); font-weight:var(--peso-display);
  font-size:1.375rem; line-height:1.2; color:#fff; margin:0;
}
.marca__origem{
  font-family:var(--fonte-tecnica); font-size:.9375rem;
  color:var(--br-400); letter-spacing:.05em; margin-top:var(--e-2);
}
.marca__corpo{padding:var(--e-5); display:flex; flex-direction:column; flex:1;}
.marca__corpo p{margin:0 0 var(--e-4); font-size:.9375rem; color:var(--texto-suave);}
.marca__linhas{
  display:grid; gap:var(--e-2);
  margin-top:auto; padding-top:var(--e-4); border-top:1px solid var(--borda);
}
.marca__linhas li{
  font-size:.875rem; color:var(--texto-suave);
  padding-left:var(--e-4); position:relative;
}
.marca__linhas li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--detalhe); border-radius:1px;
}

/* ------------------------------------------------------ 10. SETORES ----- */

.setores{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-3);}
.setor{
  display:flex; align-items:center; gap:var(--e-4);
  background:var(--superficie-elevada);
  border:1px solid var(--borda);
  border-radius:var(--r-3);
  padding:var(--e-4) var(--e-5);
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.setor:hover{border-color:var(--marca); box-shadow:var(--sombra-1);}
.setor svg{width:26px; height:26px; color:var(--marca); flex:none;}
.setor span{
  font-family:var(--fonte-display); font-weight:var(--peso-forte);
  font-size:.9375rem; color:var(--az-800); line-height:1.3;
}

/* ----------------------------------------------------- 11. SERVIÇOS ----- */

.servicos{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4);}
.servico{
  background:rgba(255,255,255,.045);
  border:1px solid var(--borda-no-escuro);
  border-radius:var(--r-3);
  padding:var(--e-5);
  transition:background var(--transicao), border-color var(--transicao);
}
.servico:hover{background:rgba(255,255,255,.08); border-color:rgba(33,178,226,.4);}
.servico h3{
  font-family:var(--fonte-display); font-weight:var(--peso-titulo);
  font-size:1.0625rem; color:#fff; margin:var(--e-4) 0 var(--e-2);
}
.servico p{margin:0; font-size:.9375rem; color:var(--texto-suave-no-escuro);}

/* ------------------------------------------------- 12. DIFERENCIAIS ----- */

.diferenciais{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-5);}
.diferencial{padding-top:var(--e-4); border-top:3px solid var(--detalhe);}
.diferencial h3{
  font-family:var(--fonte-display); font-weight:var(--peso-titulo);
  font-size:1.0625rem; color:var(--az-900); margin:var(--e-3) 0 var(--e-2);
}
.diferencial p{margin:0; font-size:.9375rem; color:var(--texto-suave);}

/* ---------------------------------------------------- 13. FAIXA CTA ----- */

.faixa-cta{
  background:var(--grad-vermelho);
  color:#fff;
  padding-block:var(--e-8);
}
.faixa-cta__grade{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-6); flex-wrap:wrap;
}
.faixa-cta h2{
  font-family:var(--fonte-display); font-weight:var(--peso-display);
  font-size:var(--t-h3); line-height:1.25; margin:0 0 var(--e-2); max-width:26ch;
}
.faixa-cta p{margin:0; color:rgba(255,255,255,.82); font-size:.9375rem; max-width:44ch;}
.faixa-cta .btn{background:#fff; color:var(--vm-700);}
.faixa-cta .btn:hover{background:var(--br-050);}

/* ------------------------------------------------------ 14. CONTATO ----- */

.contato__grade{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-7);}

.contato-lista{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--r-3);
  overflow:hidden;
}
.contato-item{
  display:flex; gap:var(--e-4); align-items:flex-start;
  padding:var(--e-5);
  border-bottom:1px solid var(--borda);
}
.contato-item:last-child{border-bottom:none;}
.contato-item__rotulo{
  font-family:var(--fonte-tecnica); font-size:.875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:var(--texto-suave); margin-bottom:3px;
}
.contato-item__valor{font-size:.9375rem; color:var(--az-900); font-weight:500; line-height:1.6;}
.contato-item__valor a:hover{color:var(--marca); text-decoration:underline;}
.telefones{display:grid; grid-template-columns:repeat(2,max-content); gap:2px var(--e-5);}
.telefones a{font-family:var(--fonte-tecnica); font-size:1.0625rem; letter-spacing:.04em;}

.contato-painel{
  position:relative;
  background:var(--grad-marinho);
  border-radius:var(--r-3);
  padding:var(--e-7) var(--e-6);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.contato-painel::before{
  content:""; position:absolute; inset:0;
  background-image:var(--trama-pontos); background-size:var(--trama-passo);
  opacity:.2;
}
.contato-painel > *{position:relative; z-index:1;}
.contato-painel h3{
  font-family:var(--fonte-display); font-weight:var(--peso-display);
  font-size:var(--t-h3); margin:0 0 var(--e-3); color:#fff;
}
.contato-painel p{color:var(--texto-suave-no-escuro); font-size:.9375rem; margin:0 0 var(--e-5);}
.contato-painel .btn{align-self:flex-start;}
.horario{
  display:flex; align-items:center; gap:var(--e-3);
  margin-top:var(--e-6); padding-top:var(--e-5);
  border-top:1px solid var(--borda-no-escuro);
  font-family:var(--fonte-tecnica); font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:var(--realce);
}
.horario svg{width:19px; height:19px; flex:none;}

/* ------------------------------------------------------- 15. RODAPÉ ----- */

.rodape{background:var(--az-900); color:var(--br-600); padding-top:var(--e-8);}
.rodape__grade{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--e-7); padding-bottom:var(--e-7);
}
.rodape__logo{width:210px; margin-bottom:var(--e-4);}
.rodape p{font-size:.875rem; margin:0; max-width:38ch; line-height:1.7;}
.rodape h4{
  font-family:var(--fonte-tecnica); font-size:.9375rem; font-weight:600;
  text-transform:uppercase; letter-spacing:var(--track-etiqueta);
  color:#fff; margin:0 0 var(--e-4);
}
.rodape__links{display:grid; gap:var(--e-3);}
.rodape__links a{font-size:.9375rem; transition:color var(--transicao);}
.rodape__links a:hover{color:#fff;}
.rodape__social{display:flex; gap:var(--e-3); margin-top:var(--e-4);}
.rodape__social a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--borda-no-escuro); border-radius:var(--r-2);
  color:var(--br-400);
  transition:border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.rodape__social a:hover{border-color:var(--realce); color:var(--realce); background:rgba(33,178,226,.10);}
.rodape__social svg{width:19px; height:19px;}
.rodape__base{
  border-top:1px solid var(--borda-no-escuro);
  padding-block:var(--e-5);
  display:flex; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap;
  font-size:.8125rem;
}

/* ------------------------------------------------- 16. WHATSAPP FIXO ---- */

.whats{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--detalhe); color:#fff;
  border-radius:50%;
  box-shadow:0 8px 24px rgba(80,13,26,.45);
  transition:background var(--transicao), transform var(--transicao);
}
.whats:hover{background:var(--vm-700); transform:scale(1.06);}
.whats svg{width:27px; height:27px;}

/* --------------------------------------------------- 17. RESPONSIVO ----- */

@media (max-width:1080px){
  .setores{grid-template-columns:repeat(2,1fr);}
  .servicos{grid-template-columns:repeat(2,1fr);}
  .diferenciais{grid-template-columns:repeat(2,1fr);}
  .marcas{grid-template-columns:1fr;}
}

@media (max-width:920px){
  .menu, .cabecalho__acoes .btn, .cabecalho__tel{display:none;}
  .hamburguer{display:grid;}
  .sobre__grade, .contato__grade{grid-template-columns:1fr; gap:var(--e-6);}
  .numeros__grade{grid-template-columns:repeat(2,1fr);}
  .rodape__grade{grid-template-columns:1fr 1fr;}
  .rodape__marca{grid-column:1 / -1;}
}

/* Alvos de toque: em tela sensível ao toque, todo link clicável precisa de
   pelo menos ~44px de altura para não exigir mira do usuário. */
@media (hover:none){
  .telefones a,
  .rodape__links a,
  .contato-item__valor a{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  .menu-movel a{padding-block:18px;}
}

@media (max-width:600px){
  .container{padding-inline:var(--e-4);}
  .hero{padding-top:calc(76px + var(--e-7));}
  .setores, .servicos, .diferenciais{grid-template-columns:1fr;}
  .numeros__grade{grid-template-columns:repeat(2,1fr); transform:translateY(-26px); margin-bottom:-18px;}
  .numero__valor{font-size:2.5rem;}
  .rodape__grade{grid-template-columns:1fr; gap:var(--e-6);}
  .telefones{grid-template-columns:1fr;}
  .faixa-cta__grade{flex-direction:column; align-items:flex-start;}
  .cabecalho__logo img{width:150px;}
  .hero__acoes .btn{width:100%;}
}

/* Respeita quem pede menos movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* Impressão: tira fundos escuros e elementos flutuantes */
@media print{
  .cabecalho,.whats,.hero__trama{display:none;}
  body{background:#fff;}
  .secao--escura,.hero,.contato-painel,.faixa-cta{background:#fff !important; color:#000 !important;}
}