/* ============================================================================
   LP GUIAS LINEARES HIWIN · ROLSUL — folha de estilo
   ----------------------------------------------------------------------------
   Paleta oficial Rolsul (Oxford / Marinho / Cobalto / Azure / Ciano), com o
   verde HIWIN como assinatura da marca parceira. Barlow Condensed nos títulos,
   Poppins no corpo — conforme IDENTIDADE VISUAL/TIPOGRAFIA.txt.

   RITMO DE CONTRASTE — a página alterna faixas de propósito, para não virar
   um bloco só de azul-escuro:

     hero          escuro profundo + luz azul
     produtos      superfície elevada
     séries        AZUL CHEIO, cards brancos          <- salto de contraste
     apoio         escuro
     sobre         CLARO, texto escuro                <- maior salto da página
     marcas        faixa levemente mais clara
     avaliações    escuro com cards de vidro
     cotação       superfície elevada
     cta final     gradiente azul

   As variáveis de tema abaixo são sobrescritas em tempo de execução pelo
   painel do admin (assets/js/conteudo.js). Trocar um valor aqui muda o padrão
   de fábrica; trocar no painel muda o que está publicado.
   ========================================================================== */

@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('../fonts/BarlowCondensed-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap }

:root{
  /* paleta oficial — editável pelo painel */
  --oxford:#000B17;
  --navy:#002BC9;
  --cobalt:#154FC0;
  --azure:#0091FF;
  --cyan:#00D9FF;
  --white-tech:#F4F6F8;
  --hiwin:#37C11F;

  --page:#00060F;
  --surface:#0A1526;
  --surface-2:#0F1D33;
  --linha:rgba(255,255,255,.10);
  --linha-forte:rgba(255,255,255,.18);

  --texto:#E8EEF6;
  --texto-2:#A9BBD1;
  --texto-3:#6F86A3;

  /* texto sobre fundo claro */
  --tinta:#08111F;
  --tinta-2:#44576F;
  --tinta-3:#7C8DA3;

  --ok:#12B76A;
  --alerta:#F79009;
  --erro:#F04438;
  --zap:#25D366;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1180px;

  /* ------------------------------------------------------ knobs do painel
     Tipografia em duas camadas, de propósito:

       --escala-base   muda TODO o texto de uma vez (mexe no rem da raiz)
       --escala-titulo mexe só nos títulos, POR CIMA da escala base

     Assim dá para aumentar o corpo sem estourar as manchetes, e vice-versa.

     Os pesos só oferecem valores que têm arquivo de fonte carregado. Pedir um
     peso sem arquivo faz o navegador falsificar o negrito, que fica borrado.
     Hoje existem: Barlow Condensed 700 e 800; Poppins 400 e 600. Para ter
     mais, é copiar o .ttf para assets/fonts e acrescentar um @font-face. */
  --escala-base:1;        /* 0,9 a 1,15 */
  --escala-titulo:1;      /* 0,8 a 1,35 */
  --peso-titulo:800;      /* 700 ou 800 */
  --peso-corpo:400;       /* 400 ou 600 */
  --brilho:1;             /* intensidade dos efeitos de luz, 0 a 1.6 */
  --raio:26px;            /* raio dos cards */
}

*,*::before,*::after{ box-sizing:border-box }
/* a escala base mexe no rem da raiz, então alcança tudo que usa rem */
html{ font-size:calc(100% * var(--escala-base)); -webkit-text-size-adjust:100%; scroll-behavior:smooth }

/* O atributo `hidden` vem do navegador como display:none, que é regra de
   agente do usuário e perde para qualquer regra de autor. Sem isto, um
   elemento com classe .btn continua visível mesmo marcado como hidden. */
[hidden]{ display:none !important }

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:1rem; line-height:1.62;
  font-weight:var(--peso-corpo);
  color:var(--texto);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.cond{
  font-family:'Barlow Condensed','Poppins',sans-serif;
  font-weight:var(--peso-titulo); line-height:1.04; letter-spacing:.005em;
  margin:0; text-transform:uppercase;
}
.pt{ color:var(--cyan) }

p{ margin:0 0 1rem }
a{ color:var(--cyan); text-decoration:none }
a:hover{ text-decoration:underline }
img,svg{ max-width:100%; height:auto; display:block }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ======================================================================= */
/* MOVIMENTO                                                               */
/* ======================================================================= */

/* barra de progresso do scroll */
.progresso{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:400;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--navy),var(--azure),var(--cyan));
  box-shadow:0 0 14px rgba(0,145,255,calc(.55 * var(--brilho)));
}

/* entrada por scroll — o JS troca .reveal por .reveal.visivel */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .68s var(--ease), transform .68s var(--ease);
  transition-delay:var(--atraso,0ms);
}
.reveal.visivel{ opacity:1; transform:none }

@keyframes flutua{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-14px) }
}
@keyframes pulsa{
  0%,100%{ opacity:.55; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.35) }
}
@keyframes brilha{
  0%  { background-position:-180% 0 }
  100%{ background-position:280% 0 }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .reveal{ opacity:1 !important; transform:none !important }
  .progresso{ display:none }
}

/* ======================================================================= */
/* TOPO                                                                    */
/* ======================================================================= */
.topo{
  position:sticky; top:0; z-index:200;
  background:rgba(0,6,15,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .28s, background .28s, box-shadow .28s;
}
.topo.compacto{
  border-bottom-color:var(--linha);
  background:rgba(0,6,15,.95);
  box-shadow:0 10px 34px rgba(0,0,0,.42);
}
.topo-in{ display:flex; align-items:center; gap:16px; min-height:68px; transition:min-height .28s var(--ease) }
.topo.compacto .topo-in{ min-height:58px }
.topo-logo{ height:30px; width:auto; transition:height .28s var(--ease) }
.topo.compacto .topo-logo{ height:26px }
.topo-marcas{ display:flex; align-items:center; gap:14px; margin-right:auto }
.topo-div{ width:1px; height:26px; background:var(--linha-forte) }
.topo-hiwin{ height:19px; width:auto }
/* padding vertical leva o alvo de toque a 44px sem engordar o texto — a régua
   de mobile-friendly do Google mede a área clicável, não a fonte */
.topo-tel{ display:none; align-items:center; gap:8px; padding:11px 0; font-size:.9rem; font-weight:600; color:var(--texto-2) }
.topo-tel:hover{ color:var(--texto); text-decoration:none }
/* especificidade com .topo de propósito: .btn define display:inline-flex mais
   adiante e venceria um seletor de classe única, deixando o botão visível no
   celular por cima do logo da HIWIN */
.topo .topo-cta{ display:none }
@media(min-width:720px){ .topo-tel{ display:flex } }
@media(min-width:940px){ .topo .topo-cta{ display:inline-flex } }

/* Atalho do WhatsApp no topo, só ícone.
   Fica visível em qualquer largura, inclusive no celular, onde é a única ação
   do cabeçalho — o botão de cotação só aparece a partir de 940px.
   O padding de .btn-sm é calculado para texto ao lado do ícone; aqui ele é
   zerado e trocado por uma caixa quadrada, senão o botão sai achatado. */
/* .topo antes do seletor pelo mesmo motivo do .topo-cta logo acima: .btn e
   .btn-sm são definidos DEPOIS neste arquivo e, com especificidade igual,
   venceriam. Aconteceu: o padding de 22px do .btn-sm sobrou numa caixa de
   44px e deixou 0px de espaço interno — o balão não tinha onde renderizar. */
.topo .topo-zap{
  flex:none; padding:0; width:44px; height:44px; border-radius:50%;
}
.topo .topo-zap svg{ width:20px; height:20px; margin:0; flex:none }

/* ======================================================================= */
/* BOTÕES                                                                  */
/* ======================================================================= */
.ctas{ display:flex; flex-wrap:wrap; gap:12px }
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 27px; border:0; border-radius:999px;
  font-family:'Poppins',sans-serif; font-size:1rem; font-weight:600;
  cursor:pointer; text-align:center; line-height:1.25;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .2s, filter .2s;
}
.btn:hover{ transform:translateY(-3px); text-decoration:none }
.btn:active{ transform:translateY(-1px) scale(.99) }
.btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px }
.btn svg{ flex:none; transition:transform .22s var(--ease) }
.btn:hover svg:last-child{ transform:translateX(4px) }

/* varredura de luz que atravessa o botão no hover */
.btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  background-size:220% 100%; background-position:-180% 0;
  opacity:0; transition:opacity .2s;
}
.btn:hover::after{ opacity:1; animation:brilha .9s var(--ease) }

.btn-zap{ background:var(--zap); color:#04220F; box-shadow:0 8px 22px rgba(37,211,102,calc(.28 * var(--brilho))) }
.btn-zap:hover{ background:#2FE573; box-shadow:0 14px 34px rgba(37,211,102,calc(.42 * var(--brilho))) }
.btn-primario{
  background:linear-gradient(135deg,var(--navy),var(--azure));
  color:#fff; box-shadow:0 10px 26px rgba(0,89,220,calc(.38 * var(--brilho)));
}
.btn-primario:hover{
  background:linear-gradient(135deg,#0033E6,#25A2FF);
  box-shadow:0 18px 42px rgba(0,110,255,calc(.52 * var(--brilho)));
}
.btn-fantasma{ background:transparent; color:var(--texto); border:1px solid var(--linha-forte) }
.btn-fantasma:hover{ background:rgba(255,255,255,.06); border-color:rgba(0,145,255,.5) }
.btn-claro{ background:#fff; color:var(--tinta) }
.btn-claro:hover{ background:#E9F2FF }
.btn-sm{ padding:13px 22px; font-size:.9rem }
.btn-bloco{ width:100% }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none }
.btn[disabled]::after{ display:none }

/* ======================================================================= */
/* HERO — copy + formulário                                                */
/* ======================================================================= */
.hero{
  position:relative; padding:44px 0 52px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% 12%, rgba(0,145,255,calc(.20 * var(--brilho))), transparent 62%),
    radial-gradient(760px 460px at 2% 96%, rgba(0,43,201,calc(.28 * var(--brilho))), transparent 62%),
    var(--page);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(900px 560px at 76% 16%,#000,transparent 74%);
}
/* halo que respira atrás da coluna do formulário */
.hero::before{
  content:''; position:absolute; right:-8%; top:8%; width:min(560px,70vw); aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,217,255,calc(.16 * var(--brilho))), transparent 66%);
  filter:blur(30px); animation:flutua 11s ease-in-out infinite;
}
.hero-grid{ position:relative; z-index:1; display:grid; gap:34px; align-items:center }

/* Abaixo de 980px a foto continua no fluxo, abaixo do texto — mas RECORTADA.

   A imagem é uma composição publicitária: produto na direita, vazio na
   esquerda. Esse vazio existe para receber a manchete por cima, e é o que
   faz ela funcionar como fundo no desktop. Exibida inteira num bloco solto,
   o mesmo vazio vira uma área escura sem assunto ocupando metade da faixa.

   A proporção 4/3 é mais estreita que os 16/9 do arquivo, então `cover`
   precisa cortar na horizontal; `object-position:right` manda o corte comer
   o lado vazio e preservar o conjunto de produtos. O max-height evita que em
   tablet o bloco vire uma parede de 675px de altura. */
.hero-foto img{
  width:100%; aspect-ratio:4/3; max-height:360px;
  object-fit:cover; object-position:right center;
  border-radius:var(--r-lg);
}

@media(min-width:980px){
  .hero{ padding:60px 0 70px; min-height:560px }
  .hero-grid{ grid-template-columns:1.06fr .94fr; gap:46px }

  /* A partir desta largura a foto vira o fundo do hero.

     Ela segue sendo o <img data-cms-src="img.produtoHero">, e não um
     background-image no CSS, de propósito: como background, o painel do
     admin perderia o controle da imagem do hero no desktop e só conseguiria
     trocar a versão do celular.

     .hero-grid volta a position:static para a foto ancorar no .hero e sangrar
     de ponta a ponta — dentro do .wrap ela ficaria presa aos 1180px. Quem
     carrega o empilhamento a partir daqui é .hero-texto. */
  .hero-grid{ position:static }
  .hero-texto{ position:relative; z-index:1 }

  .hero-foto{ position:absolute; inset:0; z-index:0; margin:0 }
  /* aspect-ratio e max-height são da versão em fluxo e precisam ser anulados:
     aqui a foto preenche o hero inteiro, e um teto de 360px a achataria. */
  .hero-foto img{
    width:100%; height:100%; aspect-ratio:auto; max-height:none; border-radius:0;
    object-fit:cover; object-position:right center;
  }

  /* Véu sobre o lado do texto. O fundo da própria foto já é escuro, mas entre
     980px e ~1200px o produto avança para a esquerda e encosta na manchete. */
  .hero-foto::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(95deg,
      var(--page) 0%,
      rgba(0,6,15,.88) 28%,
      rgba(0,6,15,.34) 52%,
      rgba(0,6,15,0) 72%);
  }
}

.selo{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; margin-bottom:20px;
  border:1px solid rgba(55,193,31,.45);
  background:rgba(55,193,31,.10);
  border-radius:999px;
  font-size:.735rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:#8DE87B;
  box-shadow:0 0 26px rgba(55,193,31,calc(.16 * var(--brilho)));
}
.selo b{ color:var(--hiwin) }

h1{ font-size:calc(clamp(2.3rem,6.6vw,3.9rem) * var(--escala-titulo)); margin-bottom:18px }
.hero-sub{ font-size:clamp(1rem,2.3vw,1.12rem); color:var(--texto-2); max-width:50ch; margin-bottom:24px }

/* ======================================================================= */
/* FORMULÁRIO                                                              */
/* ======================================================================= */
.card-form{
  position:relative;
  background:linear-gradient(180deg,rgba(15,29,51,.92),rgba(10,21,38,.96));
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  padding:26px 20px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
/* borda superior iluminada */
.card-form::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(0,217,255,calc(.5 * var(--brilho))), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}
@media(min-width:560px){ .card-form{ padding:30px 28px 26px } }
.card-form h2{ font-size:1.6rem; margin-bottom:7px }
.card-form .dica{ font-size:.85rem; color:var(--texto-3); margin-bottom:20px }

.campo{ margin-bottom:14px }
.campo label{
  display:block; margin-bottom:6px;
  font-size:.78rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--texto-2);
}
.campo label .op{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--texto-3) }
.campo input,.campo select,.campo textarea{
  width:100%; padding:12px 14px;
  font-family:'Poppins',sans-serif; font-size:1rem; color:var(--texto);
  background:rgba(0,6,15,.66);
  border:1px solid var(--linha-forte); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .18s, background .15s;
}
.campo textarea{ min-height:78px; resize:vertical }
.campo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9BBD1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--texto-3) }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azure);
  box-shadow:0 0 0 3px rgba(0,145,255,.18), 0 0 24px rgba(0,145,255,calc(.2 * var(--brilho)));
  background:rgba(0,6,15,.82);
}
.campo.erro input,.campo.erro select,.campo.erro textarea{ border-color:var(--erro) }
.campo .msg-erro{ display:none; margin-top:5px; font-size:.79rem; color:#FF9A92 }
.campo.erro .msg-erro{ display:block }
@media(min-width:560px){ .duplo{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px } }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.campo-consentimento{ margin-top:2px }
.consentimento-linha{ display:flex; align-items:flex-start; gap:10px }
.consentimento-linha input{
  flex:0 0 auto; width:18px; height:18px; margin:3px 0 0; accent-color:var(--cyan);
}
.consentimento-linha label{ margin:0; color:var(--texto-2); font-size:.82rem; line-height:1.55; cursor:pointer }
.consentimento-linha a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px }
.campo-consentimento.erro .consentimento-linha{ outline:1px solid rgba(240,68,56,.5); outline-offset:5px; border-radius:2px }

.form-nota{ margin:14px 0 0; font-size:.78rem; color:var(--texto-3); line-height:1.55 }
.form-nota a{ display:inline-block; padding:14px 0; color:var(--cyan) }
.form-aviso{
  display:none; margin-top:14px; padding:12px 14px; border-radius:var(--r-sm);
  font-size:.87rem; border:1px solid rgba(240,68,56,.4); background:rgba(240,68,56,.10); color:#FFC9C4;
}
.form-aviso.ver{ display:block }
.form-aviso.sucesso{ border-color:rgba(46,204,113,.45); background:rgba(46,204,113,.12); color:#C9F7D9 }

.ou{ display:flex; align-items:center; gap:14px; margin:18px 0 14px; color:var(--texto-3); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase }
.ou::before,.ou::after{ content:''; flex:1; height:1px; background:var(--linha) }

/* ======================================================================= */
/* SEÇÕES — o ritmo de contraste                                           */
/* ======================================================================= */
.secao{ position:relative; padding:64px 0; overflow:hidden }
.secao-superficie{ background:var(--surface) }
.secao-escura{ background:var(--page) }

/* faixa azul cheia — o salto de contraste do meio da página */
.secao-azul{
  background:linear-gradient(160deg,var(--navy) 0%,var(--cobalt) 46%,#0B2E86 100%);
}
.secao-azul::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 84% 6%, rgba(0,217,255,calc(.3 * var(--brilho))), transparent 62%);
}
.secao-azul .olho{ color:#9FE4FF }
.secao-azul .secao-intro{ color:rgba(255,255,255,.82) }
.secao-azul .pt{ color:var(--cyan) }

/* faixa clara — o maior salto de contraste da página */
.secao-clara{ background:var(--white-tech); color:var(--tinta) }
.secao-clara h2,.secao-clara h3{ color:var(--tinta) }
.secao-clara .secao-intro,.secao-clara p{ color:var(--tinta-2) }
.secao-clara .olho{ color:var(--navy) }
.secao-clara .pt{ color:var(--azure) }
.secao-clara::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 380px at 12% 0%, rgba(0,145,255,.10), transparent 60%);
}

.secao-cabeca{ position:relative; z-index:1; margin-bottom:34px }
.secao-cabeca.centro{ text-align:center; max-width:740px; margin-left:auto; margin-right:auto }
.secao-titulo{ font-size:calc(clamp(1.8rem,4.6vw,2.6rem) * var(--escala-titulo)); margin-bottom:12px }
.secao-intro{ color:var(--texto-2); max-width:64ch; margin:0 }
.secao-cabeca.centro .secao-intro{ margin:0 auto }
.olho{
  display:block; margin-bottom:11px;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azure);
}

/* ======================================================================= */
/* FAIXA DE MARCAS                                                         */
/* ======================================================================= */
.marcas{
  padding:30px 0 34px; overflow:hidden;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  background:
    radial-gradient(680px 200px at 50% 0%, rgba(0,145,255,calc(.16 * var(--brilho))), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}

/* Uma credencial: texto, barra divisória e o logo da HIWIN. É a unidade que
   se repete na esteira, então tudo aqui precisa ter largura previsível. */
.credencial{
  display:inline-flex; align-items:center; gap:16px; flex:none;
  padding:0 8px;
}
.credencial b{
  font-family:'Barlow Condensed','Poppins',sans-serif;
  font-weight:var(--peso-titulo); font-size:clamp(1.1rem,2.4vw,1.45rem);
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:var(--texto); white-space:nowrap;
}
.credencial .barra{
  width:2px; height:22px; flex:none; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--hiwin), transparent);
  box-shadow:0 0 12px rgba(55,193,31,calc(.6 * var(--brilho)));
}
/* Rolsul em branco abre a unidade; a HIWIN fecha, com halo verde. Cada logo
   tem o próprio brilho: verde na HIWIN seria errado sobre a marca da Rolsul. */
.credencial .cred-rolsul{
  height:26px; width:auto; flex:none;
  filter:drop-shadow(0 0 14px rgba(0,145,255,calc(.4 * var(--brilho))));
}
.credencial .cred-hiwin{
  height:22px; width:auto; flex:none;
  filter:drop-shadow(0 0 14px rgba(55,193,31,calc(.45 * var(--brilho))));
}

/* ---------------------------------------------------- esteira infinita
   Duas filas iguais correndo lado a lado. A animação desloca a esteira de
   uma fila inteira e volta a zero, então o corte é invisível.

   O ajuste de 6px no translate não é enfeite: com duas filas de largura G e
   um vão de 12px entre elas, a esteira mede 2G+12, e -50% disso é -(G+6) —
   seis pixels a menos do que o salto correto, que é -(G+12). Sem esses 6px
   os logos pulam de lado a cada volta. */
.marcas-esteira{
  display:flex; width:max-content; gap:12px;
  animation:esteira 42s linear infinite;
}
.marcas-esteira:hover{ animation-play-state:paused }
@keyframes esteira{
  from{ transform:translateX(calc(-50% - 6px)) }
  to  { transform:translateX(0) }
}
.marcas-fila{ display:flex; align-items:center; gap:12px; flex:none }

/* Sem movimento a esteira vira uma linha parada e centralizada. A segunda
   fila sai de cena para a credencial não aparecer oito vezes seguidas. */
@media (prefers-reduced-motion:reduce){
  .marcas-esteira{ width:auto; justify-content:center; transform:none }
  .marcas-fila:last-child{ display:none }
  .marcas-fila{ flex-wrap:wrap; justify-content:center }
}

@media(min-width:700px){
  .marcas-esteira, .marcas-fila{ gap:14px }
  .credencial{ gap:20px; padding:0 12px }
  .credencial .cred-rolsul{ height:30px }
  .credencial .cred-hiwin{ height:26px }
  .credencial .barra{ height:28px }
  /* o vão virou 14px, então a compensação passa a ser metade disso */
  @keyframes esteira{
    from{ transform:translateX(calc(-50% - 7px)) }
    to  { transform:translateX(0) }
  }
}


/* ------------------------------------------------- destaques do hero
   Linha compacta de autoridade, no lugar dos três blocos com ícone que
   existiam antes. Ocupa menos altura, que é o que mais custa no celular. */
.destaques{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin:0 0 16px; padding:0; list-style:none;
}
.destaques li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(0,145,255,.32);
  background:rgba(0,145,255,.09);
  font-size:.83rem; font-weight:600; color:var(--texto);
}
.destaques li::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
}

/* o link dos cards de produto agora abre o WhatsApp, então virou <button>.
   Zera a aparência de botão para continuar lendo como link. */
button.link{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:"Poppins",sans-serif;
}


/* ======================================================================= */
/* APOIO NA ESPECIFICAÇÃO — três caminhos de entrada                       */
/* ----------------------------------------------------------------------- */
/* Mesmo desenho dos cards translúcidos usados no resto da página escura:
   borda fina, fundo levemente claro, ícone em chip arredondado. */
.motivos{ display:grid; gap:16px }
@media(min-width:760px){ .motivos{ grid-template-columns:repeat(3,1fr) } }

.motivo{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:26px 24px; background:rgba(255,255,255,.028);
  transition:border-color .18s, transform .18s var(--ease);
}
.motivo:hover{ border-color:rgba(0,145,255,.4); transform:translateY(-3px) }
.motivo .ic{
  width:52px; height:52px; border-radius:14px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,145,255,.12); border:1px solid rgba(0,145,255,.32);
  color:var(--cyan);
  box-shadow:0 0 22px rgba(0,145,255,calc(.2 * var(--brilho))) inset;
}
.motivo h3{ font-size:1.22rem; margin-bottom:9px; color:var(--texto) }
.motivo p{ font-size:.92rem; color:var(--texto-2); margin:0 }

/* ======================================================================= */
/* CARDS DE PRODUTO                                                        */
/* ======================================================================= */
.produtos{ display:grid; gap:16px }
@media(min-width:620px){ .produtos{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1020px){ .produtos{ grid-template-columns:repeat(4,1fr) } }

.card-produto{
  background:#fff; border-radius:var(--raio); padding:18px 18px 22px;
  display:flex; flex-direction:column;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.card-produto:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 54px rgba(0,0,0,.46), 0 0 40px rgba(0,145,255,calc(.24 * var(--brilho)));
}
.card-produto .poco{
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card-produto .poco img{ width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .3s var(--ease) }
.card-produto:hover .poco img{ transform:scale(1.06) }
.card-produto h3{ font-size:1.32rem; color:var(--tinta); margin-bottom:7px }
.card-produto p{ font-size:.88rem; color:var(--tinta-2); margin:0 0 14px; flex:1 }
/* padding vertical existe para o alvo de toque chegar a 44px sem
   engordar o texto — regra de mobile-friendly do Google */
.card-produto .link{ display:inline-flex; align-items:center; gap:7px; padding:12px 0; margin-top:-12px;
  font-size:.85rem; font-weight:600; color:var(--navy); transition:gap .2s var(--ease) }
.card-produto .link:hover{ text-decoration:none; gap:12px }

.card-produto.destaque{
  background:linear-gradient(150deg,var(--navy),var(--azure));
  box-shadow:0 16px 40px rgba(0,89,220,calc(.42 * var(--brilho)));
}
.card-produto.destaque:hover{ box-shadow:0 30px 62px rgba(0,110,255,calc(.55 * var(--brilho))) }
.card-produto.destaque h3{ color:#fff }
.card-produto.destaque p{ color:rgba(255,255,255,.86) }
.card-produto.destaque .link{ color:#fff }
.tag-destaque{
  align-self:flex-start; margin-bottom:12px; padding:4px 11px; border-radius:999px;
  font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(255,255,255,.22); color:#fff;
}

/* ======================================================================= */
/* SÉRIES — sobre a faixa azul                                             */
/* ======================================================================= */
.series{ position:relative; z-index:1; display:grid; gap:15px }
@media(min-width:640px){ .series{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1020px){ .series{ grid-template-columns:repeat(3,1fr) } }

.serie{
  background:#fff; border-radius:var(--raio); padding:22px 20px;
  display:flex; flex-direction:column;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
  box-shadow:0 10px 26px rgba(0,10,40,.24);
}
.serie:hover{ transform:translateY(-6px); box-shadow:0 26px 52px rgba(0,10,40,.36) }

.serie-topo{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
.serie .ic-serie{
  width:40px; height:40px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,43,201,.09); color:var(--navy);
}
.serie .cod{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:2.1rem; line-height:1; color:var(--navy);
}
.serie-badge{
  margin-left:auto; padding:4px 10px; border-radius:999px;
  font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,145,255,.12); color:var(--navy); border:1px solid rgba(0,43,201,.22);
}
.serie h3{
  font-size:.94rem; color:var(--tinta-2); margin-bottom:14px;
  text-transform:uppercase; letter-spacing:.07em;
  font-family:'Poppins',sans-serif; font-weight:600;
}

/* tamanhos como fichas, não como texto corrido — é o dado que a pessoa
   procura primeiro e precisa achar sem ler a frase inteira */
.serie-tamanhos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
.tam{
  min-width:36px; padding:6px 9px; border-radius:9px; text-align:center;
  background:rgba(0,43,201,.07); border:1px solid rgba(0,43,201,.14);
  font-size:.83rem; font-weight:600; color:var(--navy); line-height:1;
}
.serie-nota{ font-size:.76rem; color:var(--tinta-3); margin:0 0 14px }
.serie .aplic{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.83rem; color:var(--tinta-2); margin:0 0 12px; flex:1;
  padding-top:12px; border-top:1px solid rgba(8,17,31,.08);
}
.serie .aplic svg{ flex:none; margin-top:2px; color:var(--azure) }


/* card em destaque, escuro sobre a faixa azul */
.serie.destaque{
  background:linear-gradient(155deg,var(--oxford),#0A2050);
  box-shadow:0 20px 46px rgba(0,6,23,.55);
}
.serie.destaque .ic-serie{ background:rgba(0,217,255,.12); color:var(--cyan) }
.serie.destaque .cod{ color:var(--cyan) }
.serie.destaque h3{ color:rgba(255,255,255,.66) }
.serie.destaque .serie-badge{
  background:rgba(0,217,255,.16); color:var(--cyan); border-color:rgba(0,217,255,.34);
}
.serie.destaque .tam{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff;
}
.serie.destaque .serie-nota{ color:rgba(255,255,255,.55) }
.serie.destaque .aplic{ color:rgba(255,255,255,.82); border-top-color:rgba(255,255,255,.14) }

/* Botão de catálogo no rodapé de cada card de série.
   margin-top:auto encosta ele na base: os cards têm alturas diferentes por
   causa do texto, e sem isso o botão flutuaria em posições distintas. */
.serie-catalogo{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:auto; padding:11px 16px; border-radius:999px;
  border:1px solid rgba(0,43,201,.24); background:rgba(0,43,201,.05);
  font-size:.83rem; font-weight:600; color:var(--navy);
  transition:background .18s, border-color .18s, transform .18s var(--ease);
}
.serie-catalogo:hover{
  text-decoration:none; transform:translateY(-2px);
  background:rgba(0,43,201,.10); border-color:rgba(0,43,201,.42);
}
/* o peso vem junto do rótulo: um botão que promete "ver" e dispara 17 MB
   em rede móvel quebra a expectativa de quem clicou */
.cat-peso{ font-weight:400; font-size:.74rem; opacity:.72 }
.serie-catalogo:focus-visible{ outline:3px solid var(--navy); outline-offset:2px }
/* no card escuro em destaque a mesma peça precisa inverter */
.serie.destaque .serie-catalogo{
  border-color:rgba(0,217,255,.34); background:rgba(0,217,255,.10); color:var(--cyan);
}
.serie.destaque .serie-catalogo:hover{
  background:rgba(0,217,255,.18); border-color:rgba(0,217,255,.55);
}
.serie.destaque .serie-catalogo:focus-visible{ outline-color:var(--cyan) }

.nota-series{
  position:relative; z-index:1; margin-top:22px; padding:18px 20px;
  border:1px solid rgba(255,255,255,.24); border-radius:var(--r-lg);
  background:rgba(0,11,23,.28); backdrop-filter:blur(4px);
  font-size:.88rem; color:rgba(255,255,255,.84);
}
.nota-series b{ color:#fff }

/* ======================================================================= */
/* SOBRE A ROLSUL — faixa clara                                            */
/* ======================================================================= */
.sobre-grid{ position:relative; z-index:1; display:grid; gap:34px }
@media(min-width:940px){ .sobre-grid{ grid-template-columns:1.1fr .9fr; gap:52px; align-items:start } }

/* coluna esquerda do sobre-grid: linha do tempo mais os segmentos */
.coluna-tempo{ display:block }

.linha-tempo{ position:relative; margin:0; padding:0 0 0 30px; list-style:none }
.linha-tempo::before{
  content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--azure),rgba(0,145,255,.12));
}
.linha-tempo li{ position:relative; margin-bottom:24px }
.linha-tempo li:last-child{ margin-bottom:0 }
.linha-tempo li::before{
  content:''; position:absolute; left:-30px; top:7px; width:16px; height:16px; border-radius:50%;
  background:var(--white-tech); border:3px solid var(--azure);
  box-shadow:0 0 0 4px rgba(0,145,255,.14);
}
.linha-tempo b{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.45rem; color:var(--navy); line-height:1 }
.linha-tempo span{ font-size:.92rem; color:var(--tinta-2) }


.pilares{ display:grid; gap:12px }
@media(min-width:520px){ .pilares{ grid-template-columns:repeat(2,1fr) } }
.pilar{
  background:#fff; border:1px solid rgba(8,17,31,.09); border-radius:var(--r-lg);
  padding:20px 18px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pilar:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(8,17,31,.12) }
.pilar .ic{
  width:40px; height:40px; border-radius:11px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,145,255,.10); color:var(--navy);
}
.pilar h3{ font-size:1.06rem; margin-bottom:5px; text-transform:none; letter-spacing:0;
  font-family:'Poppins',sans-serif; font-weight:600 }
.pilar p{ font-size:.85rem; color:var(--tinta-2); margin:0 }

/* segmentos — faixa centralizada, abaixo das duas colunas do "sobre".
   Flex em vez de grade: com larguras de texto bem diferentes, a grade deixa
   buracos nas pontas; o flex centraliza cada linha e distribui de verdade. */
.bloco-segmentos{ margin-top:40px; text-align:center }
.bloco-segmentos .olho{ margin-bottom:14px }

/* Os segmentos voltaram para dentro da coluna da linha do tempo. Em duas
   colunas eles passam a alinhar à esquerda: centralizados sob uma linha do
   tempo alinhada à esquerda, ficavam flutuando sem eixo. Em coluna única a
   seção inteira é centralizada, então a centralização original permanece. */
@media(min-width:940px){
  .bloco-segmentos{ text-align:left; margin-top:34px }
  .bloco-segmentos .segmentos{ justify-content:flex-start }
}
.segmentos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px;
}
.segmentos .chip{ flex:0 1 auto }
.chip{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px 14px; border-radius:999px;
  border:1px solid rgba(0,43,201,.28);
  background:linear-gradient(180deg, rgba(0,145,255,.10), rgba(0,43,201,.07));
  color:var(--navy); font-size:.87rem; font-weight:600; line-height:1.25;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s;
}
.chip:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg, rgba(0,145,255,.18), rgba(0,43,201,.12));
  box-shadow:0 10px 24px rgba(0,43,201,.16);
}
/* mesma grade quando os segmentos aparecem sobre fundo escuro */
.secao-escura .chip,.secao-superficie .chip{
  border-color:rgba(0,145,255,.34);
  background:linear-gradient(180deg, rgba(0,145,255,.16), rgba(0,43,201,.10));
  color:#9FD8FF;
}

/* ======================================================================= */
/* VISITA À FÁBRICA HIWIN — dentro da faixa clara                          */
/* ----------------------------------------------------------------------- */
/* Texto em cima, dois retângulos iguais embaixo. As duas fotos têm origem
   e proporção diferentes (uma retrato de celular, outra paisagem), então a
   proporção é imposta pelo contêiner e o recorte fica por conta do
   object-fit. Sem isso os dois retângulos nunca alinhariam. */
.visita{
  margin-top:46px; padding:28px;
  border:1px solid rgba(0,43,201,.16); border-radius:var(--raio);
  background:linear-gradient(150deg, rgba(0,145,255,.07), rgba(255,255,255,.7));
}
.visita-texto{ max-width:70ch; margin-bottom:22px }
.visita-texto h3{
  font-size:clamp(1.35rem,3vw,1.75rem); color:var(--tinta); margin-bottom:10px;
}
.visita-texto p{ font-size:.94rem; color:var(--tinta-2); margin:0 }

.visita-fotos{ display:grid; gap:16px }
@media(min-width:720px){ .visita-fotos{ grid-template-columns:1fr 1fr } }

.visita-foto{ margin:0 }
.visita-foto img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); display:block;
  box-shadow:0 14px 34px rgba(8,17,31,.16);
}
/* a foto dos diretores é retrato: sem descer o enquadramento, o recorte 4/3
   cortaria justamente as pessoas e o letreiro da HIWIN */
.visita-foto:first-child img{ object-position:50% 72% }
.visita-foto figcaption{
  margin-top:10px; font-size:.8rem; color:var(--tinta-3); line-height:1.45;
}

/* ======================================================================= */
/* FAIXA DE CHAMADA — repetida ao longo da página                          */
/* ----------------------------------------------------------------------- */
/* Uma linha curta e dois botões, no fim de cada bloco de argumento. A ideia
   é que o visitante nunca precise rolar de volta para achar como pedir a
   cotação, em qualquer ponto onde ele se convença. */
.cta-linha{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:36px; padding:20px 24px;
  border:1px solid var(--linha-forte); border-radius:var(--r-xl);
  background:linear-gradient(120deg, rgba(0,43,201,.16), rgba(0,145,255,.06));
}
.cta-linha p{
  margin:0; flex:1 1 280px; font-size:1rem; font-weight:600; color:var(--texto); line-height:1.4;
}
/* flex:0 0 auto impedia o botão de encolher: no celular ele passava ~45px
   para fora da faixa e só não gerava rolagem porque o body corta o excesso.
   min-width:0 é o que permite o item de flex encolher abaixo do conteúdo. */
.cta-linha .ctas{ flex:1 1 auto; min-width:0 }
.cta-linha .ctas .btn{ max-width:100% }
@media(min-width:620px){ .cta-linha .ctas{ flex:0 0 auto } }

/* sobre a faixa azul */
.secao-azul .cta-linha{
  border-color:rgba(255,255,255,.28);
  background:rgba(0,11,23,.26); backdrop-filter:blur(4px);
}
/* sobre a faixa clara */
.cta-linha.claro{
  border-color:rgba(0,43,201,.22);
  background:linear-gradient(120deg, rgba(0,145,255,.12), rgba(0,43,201,.05));
}
.cta-linha.claro p{ color:var(--tinta) }

/* ======================================================================= */
/* AVALIAÇÕES                                                              */
/* ======================================================================= */
/* ---------------------------------------------------- carrossel de avaliações
   O grid virou trilho: os cards continuam com o mesmo desenho, mas correm na
   horizontal. O selecionado cresce e vem para a frente; os vizinhos encolhem e
   perdem contraste, o que dá a leitura de profundidade sem sombra extra.

   A largura do card é variável para o JS ler o mesmo número que o CSS usa —
   se os dois calculassem por conta própria, o trilho pararia fora do lugar. */
.aval-carrossel{ position:relative; z-index:1 }

.aval-janela{
  width:100%;
  overflow:hidden;
  /* folga para o card não ser cortado ao subir 5px no hover e projetar
     sombra de 0 26px 54px */
  padding:22px 0 38px;
}

/* Largura do card calculada para os três caberem INTEIROS.
   Como todos têm o mesmo tamanho, o conjunto ocupa exatamente 3 larguras mais
   2 vãos. O -80px reserva o padding do contêiner e ainda deixa folga.
   O divisor acompanha quantos cards ficam visíveis: mudou de 2,9 para 3 ao
   tirar a escala do card selecionado. */
.avaliacoes{
  --largura-card:min(300px, calc(100vw - 75px));
  display:flex; align-items:stretch; gap:16px;
  transition:transform .55s var(--ease);
  will-change:transform;
}
@media(min-width:760px){
  .avaliacoes{ --largura-card:min(340px, calc((100vw - 80px) / 3)) }
}

/* barra de controles: seta, pontos, seta */
.aval-controles{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:-14px;
}

.avaliacao{ flex:0 0 var(--largura-card) }

/* Brilho que respira, sempre ligado.
   Vive num pseudo-elemento, e não na sombra do card: animar box-shadow no
   próprio elemento força o navegador a repintar a caixa a cada quadro. Aqui
   só a opacidade de uma camada muda, o que roda na GPU e não pesa.
   Os três cards têm atraso diferente para a seção não pulsar em bloco. */
@keyframes respira{
  0%,100%{ opacity:.35 }
  50%    { opacity:1 }
}

.avaliacao{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:24px 22px 22px;
  display:flex; flex-direction:column;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.avaliacao::before{
  content:''; position:absolute; inset:-1px; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,
    rgba(0,217,255,calc(.55 * var(--brilho))),
    rgba(0,145,255,calc(.18 * var(--brilho))) 42%,
    transparent 68%);
  /* recorta o preenchimento e deixa só a borda iluminada */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
  animation:respira 4.6s ease-in-out infinite;
}
.avaliacao::after{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  border-radius:inherit;
  box-shadow:0 0 34px rgba(0,145,255,calc(.28 * var(--brilho)));
  animation:respira 4.6s ease-in-out infinite;
}
.avaliacao:nth-child(2)::before,.avaliacao:nth-child(2)::after{ animation-delay:1.5s }
.avaliacao:nth-child(3)::before,.avaliacao:nth-child(3)::after{ animation-delay:3s }

/* Todos os cards com o mesmo tamanho e o mesmo contraste. O selecionado é
   indicado pela posição no centro e pelos pontos abaixo, não por escala nem
   por apagar os vizinhos: as três avaliações precisam ser lidas de relance. */
.avaliacao{
  opacity:1; z-index:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  cursor:pointer;
}
.avaliacao:hover{
  transform:translateY(-5px); border-color:rgba(0,145,255,.4);
  box-shadow:0 26px 54px rgba(0,0,0,.46), 0 0 36px rgba(0,145,255,calc(.2 * var(--brilho)));
}

@media (prefers-reduced-motion:reduce){
  .avaliacao, .avaliacao:hover{ transform:none }
}

/* ------------------------------------------------------------ setas */
.aval-seta{
  flex:none; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--linha-forte); background:rgba(255,255,255,.06);
  color:var(--texto); transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.aval-seta:hover{ background:rgba(0,145,255,.16); border-color:rgba(0,145,255,.5); transform:scale(1.08) }
.aval-seta:active{ transform:scale(.96) }
.aval-seta:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px }
.aval-seta[disabled]{ opacity:.3; cursor:not-allowed; transform:none }

/* ------------------------------------------------------------ pontos */
.aval-pontos{ display:flex; justify-content:center; gap:9px }
.aval-ponto{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.22); transition:background .25s, transform .25s var(--ease);
}
.aval-ponto[aria-selected="true"]{ background:var(--cyan); transform:scale(1.35) }
.aval-ponto:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }
.aval-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px }
.aval-nota{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--texto-2) }
.aval-nota .estrelas{ color:#F5B739; letter-spacing:.08em; font-size:.9rem }
.aval-aspas{ font-family:'Barlow Condensed',sans-serif; font-size:3.1rem; line-height:.6; color:rgba(255,255,255,.13) }
.avaliacao p{ font-size:.92rem; color:var(--texto-2); margin:0 0 20px; flex:1 }
.aval-autor{ display:flex; align-items:center; gap:11px }
.aval-avatar{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(135deg,var(--navy),var(--azure));
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:600; color:#fff; line-height:1;
}
.aval-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
/* Sem foto, o padrão do Google: uma letra sobre cor chapada. Cor sólida em
   vez do gradiente azul da marca, senão o avatar sem foto parece um botão. */
.aval-avatar.inicial{
  background:#7B1FA2; font-size:1.05rem; text-transform:uppercase;
}
.aval-autor b{ display:block; font-size:.88rem; color:var(--texto); font-weight:600; line-height:1.3 }
.aval-autor span{ font-size:.78rem; color:var(--texto-3) }


/* ======================================================================= */
/* PASSOS                                                                  */
/* ======================================================================= */
.passos{ counter-reset:p; display:grid; gap:22px; margin-top:26px }
.passo{ position:relative; padding-left:54px }
.passo::before{
  counter-increment:p; content:counter(p);
  position:absolute; left:0; top:-2px;
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.4rem;
  color:var(--cyan); background:rgba(0,145,255,.12); border:1px solid rgba(0,145,255,.36);
  box-shadow:0 0 20px rgba(0,145,255,calc(.2 * var(--brilho)));
}
.passo h3{ font-size:1.14rem; margin-bottom:5px }
.passo p{ font-size:.89rem; color:var(--texto-2); margin:0 }

.form-grid{ display:grid; gap:32px }
@media(min-width:980px){ .form-grid{ grid-template-columns:.85fr 1.15fr; align-items:start; gap:52px } }


/* aviso de conferência — remover antes de publicar */
.pendente{
  margin-top:26px; padding:15px 18px;
  border:1px dashed var(--alerta); border-radius:var(--r);
  background:rgba(247,144,9,.08); color:#FFD9A1; font-size:.87rem;
}
.pendente b{ color:var(--alerta) }
.secao-clara .pendente{ color:#7A4A00; background:rgba(247,144,9,.12) }

/* ======================================================================= */
/* CTA FINAL / RODAPÉ / FLUTUANTE                                          */
/* ======================================================================= */
.cta-final{
  position:relative; padding:66px 0; text-align:center; overflow:hidden;
  background:linear-gradient(160deg,var(--navy),#0B2E86 60%,var(--oxford));
}
.cta-final::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 340px at 50% 0%, rgba(0,217,255,calc(.3 * var(--brilho))), transparent 64%);
}
.cta-final > *{ position:relative; z-index:1 }
.cta-final h2{ font-size:calc(clamp(1.9rem,5vw,2.8rem) * var(--escala-titulo)); margin-bottom:14px }
.cta-final p{ color:rgba(255,255,255,.84); max-width:54ch; margin:0 auto 26px }
.cta-final .ctas{ justify-content:center }

/* o padding de baixo é folga para o botão flutuante de WhatsApp */
.rodape{ padding:38px 0 96px; font-size:.87rem; color:var(--texto-3); background:var(--oxford) }
.rodape-in{ display:grid; gap:22px }
@media(min-width:780px){ .rodape-in{ grid-template-columns:1fr auto; align-items:center } }
/* mesma régua de 44px do topo: os links do rodapé são linha de texto solta e
   ficavam com 20px de altura clicável */
.rodape a{ display:inline-block; padding:12px 0; color:var(--texto-2) }
.rodape-logo{ height:26px; margin-bottom:12px; opacity:.85 }

/* endereço no rodapé: sinal de transparência que o Google usa como critério
   de experiência da página, e prova de existência física para comprador B2B */
.rodape-endereco{ margin:6px 0 0; font-size:.82rem; color:var(--texto-3) }

/* Faixa legal: largura inteira sob o rodapé, separada por um filete.
   Fica abaixo do grid do rodapé, e não dentro dele, para o texto não competir
   com os contatos — é informação de registro, não de contato. */
.rodape-legal{
  margin-top:26px; padding-top:18px;
  border-top:1px solid var(--linha);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 24px;
}
.rodape-legal p{ margin:0; font-size:.78rem; color:var(--texto-3) }
.rodape-marcas-nota{ color:rgba(111,134,163,.8) }
.rodape a:hover{ color:var(--cyan) }

/* ------------------------------------------------------- páginas de texto */
.texto-legal{ max-width:74ch }
.texto-legal h1{ font-size:clamp(2rem,5vw,2.9rem); margin-bottom:8px }
.texto-legal h2{
  font-size:1.18rem; margin:32px 0 10px; color:var(--texto);
  text-transform:none; letter-spacing:0;
  font-family:'Poppins',sans-serif; font-weight:600;
}
.texto-legal p,.texto-legal li{ color:var(--texto-2); font-size:.95rem }
.texto-legal ul{ margin:0 0 1rem; padding-left:20px }
.texto-legal li{ margin-bottom:5px }
.texto-legal .atualizado{ font-size:.82rem; color:var(--texto-3); margin-bottom:26px }
.texto-legal a{ display:inline-block; padding:10px 0; color:var(--cyan); text-decoration:underline }

.zap-float{
  position:fixed; right:16px; bottom:16px; z-index:300;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px; border-radius:999px;
  background:var(--zap); color:#04220F; font-weight:600; font-size:.94rem;
  box-shadow:0 10px 30px rgba(0,0,0,.42), 0 0 26px rgba(37,211,102,calc(.34 * var(--brilho)));
  border:0; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s;
}
.zap-float:hover{ text-decoration:none; transform:translateY(-3px) scale(1.03) }
.zap-float span{ display:none }
@media(min-width:560px){ .zap-float span{ display:inline } }

/* ======================================================================= */
/* PÁGINA DE OBRIGADO                                                      */
/* ======================================================================= */
.obrigado{ min-height:100dvh; display:flex; align-items:center; padding:44px 0 }
.obrigado-card{
  max-width:640px; margin:0 auto; text-align:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  padding:44px 26px; box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.obrigado-card h1{ font-size:clamp(2rem,6vw,2.9rem); margin-bottom:14px }
.obrigado-card p{ color:var(--texto-2) }
.check{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,183,106,.14); border:2px solid var(--ok);
  font-size:2rem; color:var(--ok); box-shadow:0 0 32px rgba(18,183,106,calc(.3 * var(--brilho)));
}

/* ======================================================================= */
/* FERRAMENTAS INTERNAS — painel, gerador de UTM, admin                    */
/* ======================================================================= */
.tool{ padding:34px 0 60px }
.tool h1{ font-size:clamp(1.8rem,5vw,2.5rem); margin-bottom:8px }
.tool .lead{ color:var(--texto-2); margin-bottom:28px; max-width:70ch }
.painel-box{ background:var(--surface); border:1px solid var(--linha); border-radius:var(--r-lg); padding:22px }
.saida{
  width:100%; min-height:96px; padding:14px;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:.85rem;
  color:var(--cyan); background:rgba(0,6,15,.72);
  border:1px solid var(--linha-forte); border-radius:var(--r-sm);
  word-break:break-all; white-space:pre-wrap;
}
table{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:720px }
th,td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--linha); white-space:nowrap }
th{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-3); background:rgba(255,255,255,.03) }
tbody tr:hover{ background:rgba(0,145,255,.055) }
.tag{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:600;
  background:rgba(0,145,255,.14); color:#8FD3FF; border:1px solid rgba(0,145,255,.3) }
.tag.zap{ background:rgba(37,211,102,.14); color:#8CF0B5; border-color:rgba(37,211,102,.32) }

/* ---------------------------------------------------------------- admin */
/* faixa de modo teste — precisa ser impossível de confundir com produção */
.faixa-teste{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:11px 20px; font-size:.86rem; line-height:1.45;
  background:linear-gradient(90deg, rgba(247,144,9,.2), rgba(247,144,9,.08));
  border-bottom:1px solid rgba(247,144,9,.45);
  color:#FFD9A1;
}
.faixa-teste b{ color:var(--alerta) }
.faixa-teste .btn{ margin-left:auto; flex:none }

.admin-grid{ display:grid; gap:22px }
@media(min-width:1120px){ .admin-grid{ grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:start } }

.abas{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.aba{
  padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linha-forte); background:transparent; color:var(--texto-2);
  font-family:'Poppins',sans-serif; font-size:.86rem; font-weight:600;
  transition:background .18s, color .18s, border-color .18s;
}
.aba:hover{ background:rgba(255,255,255,.05); color:var(--texto) }
.aba.ativa{ background:linear-gradient(135deg,var(--navy),var(--azure)); color:#fff; border-color:transparent }
.painel-aba{ display:none }
.painel-aba.ativa{ display:block }

.grupo{
  border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:18px 20px; margin-bottom:16px; background:var(--surface);
}
.grupo > h3{
  font-size:1.05rem; margin-bottom:14px; color:var(--texto);
  text-transform:none; letter-spacing:0; font-family:'Poppins',sans-serif; font-weight:600;
}

/* ------------------------------------------------- blocos por seção
   Cada seção da página vira um bloco que abre e fecha. Com 107 campos numa
   lista só, achar o texto certo virava rolagem cega. */
.bloco-secao{
  border:1px solid var(--linha); border-radius:var(--r-lg);
  margin-bottom:12px; background:var(--surface); overflow:hidden;
  transition:border-color .2s;
}
.bloco-secao.aberto{ border-color:rgba(0,145,255,.42) }

.bloco-cabeca{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:15px 18px; border:0; background:transparent; cursor:pointer;
  font-family:'Poppins',sans-serif; text-align:left; color:var(--texto);
  transition:background .18s;
}
.bloco-cabeca:hover{ background:rgba(255,255,255,.04) }
.bloco-numero{
  width:28px; height:28px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.05rem;
  background:rgba(0,145,255,.14); color:var(--cyan); border:1px solid rgba(0,145,255,.3);
}
.bloco-nome{ font-size:.98rem; font-weight:600; flex:1 }
.bloco-contagem{ font-size:.76rem; color:var(--texto-3); flex:none }
.bloco-seta{
  flex:none; color:var(--texto-3);
  transition:transform .22s var(--ease), color .18s;
}
.bloco-secao.aberto .bloco-seta{ transform:rotate(180deg); color:var(--cyan) }

.bloco-corpo{ display:none; padding:4px 18px 18px; border-top:1px solid var(--linha) }
.bloco-secao.aberto .bloco-corpo{ display:block }

.bloco-acoes{
  display:flex; gap:8px; padding:0 0 14px; margin-bottom:14px;
  border-bottom:1px dashed var(--linha);
}

/* botões de peso da fonte, no lugar de um menu suspenso */
.pesos{ display:flex; gap:8px; flex-wrap:wrap }
.peso-opcao{
  padding:9px 16px; border-radius:10px; cursor:pointer;
  border:1px solid var(--linha-forte); background:transparent; color:var(--texto-2);
  font-family:'Poppins',sans-serif; font-size:.88rem;
  transition:background .18s, color .18s, border-color .18s;
}
.peso-opcao:hover{ background:rgba(255,255,255,.05); color:var(--texto) }
.peso-opcao.ativo{ background:linear-gradient(135deg,var(--navy),var(--azure)); color:#fff; border-color:transparent }
.peso-opcao[data-familia="titulo"]{ font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; text-transform:uppercase }
.campo-cor{ display:flex; align-items:center; gap:12px }
.campo-cor input[type=color]{ width:52px; height:40px; padding:2px; cursor:pointer; flex:none }
.campo-cor input[type=text]{ flex:1 }
.campo-range{ display:flex; align-items:center; gap:14px }
.campo-range input[type=range]{ flex:1; accent-color:var(--azure) }
.campo-range output{ min-width:52px; text-align:right; font-size:.86rem; color:var(--texto-2) }

.barra-salvar{
  position:sticky; bottom:0; z-index:10;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:20px; padding:14px 18px;
  border:1px solid var(--linha-forte); border-radius:var(--r-lg);
  background:rgba(10,21,38,.96); backdrop-filter:blur(10px);
  box-shadow:0 -8px 30px rgba(0,0,0,.4);
}
.barra-salvar .estado{ font-size:.85rem; color:var(--texto-3); margin-left:auto }
.barra-salvar .estado.ok{ color:#8CF0B5 }
.barra-salvar .estado.erro{ color:#FFA9A2 }

.previa{ position:sticky; top:88px }
.previa-moldura{
  border:1px solid var(--linha-forte); border-radius:var(--r-lg); overflow:hidden;
  background:var(--page); height:min(74vh,760px);
}
.previa-moldura iframe{ width:100%; height:100%; border:0; display:block }
.previa-topo{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.previa-topo span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); margin-right:auto }

.lista-itens{ display:grid; gap:12px; margin-bottom:16px }
.item-editavel{
  border:1px solid var(--linha); border-radius:var(--r-lg); padding:16px 18px; background:var(--surface);
}
.item-cabeca{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.item-cabeca b{ font-size:.9rem; color:var(--texto); margin-right:auto }
.btn-icone{
  width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linha-forte); background:transparent; color:var(--texto-2); cursor:pointer;
  transition:background .16s, color .16s, border-color .16s;
}
.btn-icone:hover{ background:rgba(255,255,255,.06); color:var(--texto) }
.btn-icone.perigo:hover{ background:rgba(240,68,56,.14); color:#FFA9A2; border-color:rgba(240,68,56,.4) }

.interruptor{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:.86rem; color:var(--texto-2) }
.interruptor input{ width:auto; margin:0; accent-color:var(--azure); width:18px; height:18px; cursor:pointer }

.previa-img{
  width:100%; max-height:150px; object-fit:contain; margin-bottom:10px;
  background:rgba(255,255,255,.05); border-radius:var(--r-sm); padding:8px;
}