/* =========================================================
   DS Consultoria em Segurança do Trabalho
   Conceito: ficha técnica de engenharia.
   ========================================================= */

:root{
  --azul:#1E3A8F;          /* institucional, da logo */
  --petroleo:#0E7C86;      /* da logo */
  --profundo:#0E1B3D;      /* fundo das seções de peso */
  --papel:#F1F3F6;
  --branco:#FFFFFF;
  --tinta:#171A21;
  --tinta-fraca:#565D6B;
  --linha:#D5DAE2;
  --ambar:#B26B00;         /* advertência — usado UMA vez, no bloco NR-1 */
  --ambar-fundo:#FDF6EA;

  --medida:66ch;
  --gutter:clamp(1.25rem,5vw,4.5rem);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1.15em;max-width:var(--medida)}
a{color:var(--azul)}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:absolute;left:-999px;top:0;background:var(--azul);color:#fff;padding:.7rem 1.1rem;z-index:100}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--petroleo);outline-offset:3px}

/* ---------- topo ---------- */
.topo{
  border-bottom:1px solid var(--linha);
  background:var(--branco);
  position:sticky;top:0;z-index:50;
}
.faixa{
  max-width:1200px;margin:0 auto;padding:.7rem var(--gutter);
  display:flex;align-items:center;gap:1.75rem;
}
.marca{height:62px;width:auto;flex:none}
.faixa nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.95rem}
.faixa nav a{color:var(--tinta-fraca);text-decoration:none}
.faixa nav a:hover{color:var(--azul)}
.tel-topo{
  font-weight:600;color:var(--tinta-fraca);text-decoration:none;
  white-space:nowrap;font-size:.95rem;
}
.tel-topo:hover{color:var(--azul)}
.wpp-topo{
  font-weight:600;color:#fff;text-decoration:none;
  background:var(--azul);border:1.5px solid var(--azul);
  padding:.48rem 1.05rem;white-space:nowrap;
}
.wpp-topo:hover{background:var(--profundo);border-color:var(--profundo)}

/* botão do menu: só existe no mobile */
.abre-menu{
  display:none;margin-left:.6rem;
  width:46px;height:46px;flex:none;
  background:none;border:1.5px solid var(--linha);
  cursor:pointer;padding:0;
  place-items:center;
}
.abre-menu .barras,
.abre-menu .barras::before,
.abre-menu .barras::after{
  content:"";display:block;width:20px;height:2px;
  background:var(--profundo);transition:transform .22s ease,opacity .18s ease;
}
.abre-menu .barras::before{transform:translateY(-6px)}
.abre-menu .barras::after{transform:translateY(4px)}
.abre-menu[aria-expanded="true"] .barras{background:transparent}
.abre-menu[aria-expanded="true"] .barras::before{transform:rotate(45deg)}
.abre-menu[aria-expanded="true"] .barras::after{transform:translateY(-2px) rotate(-45deg)}
.so-menu{display:none}

@media (max-width:980px){
  .faixa nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--branco);
    border-top:1px solid var(--linha);
    border-bottom:3px solid var(--petroleo);
    box-shadow:0 12px 28px rgba(14,27,61,.14);
    padding:.4rem var(--gutter) 1rem;
    flex-direction:column;gap:0;
  }
  .faixa nav.aberto{display:flex}
  .faixa nav a{
    padding:.95rem 0;min-height:44px;
    display:flex;align-items:center;
    border-bottom:1px solid var(--linha);
    font-size:1.05rem;color:var(--profundo);
  }
  .faixa nav a:last-child{border-bottom:0}
  .so-menu{display:flex;font-weight:600}
  .abre-menu{display:grid}
  .tel-topo{margin-left:auto}
}
@media (max-width:620px){
  .tel-topo{display:none}
  .wpp-topo{margin-left:auto;font-size:.92rem;padding:.72rem .85rem}
  .marca{height:46px}
}
@media (max-width:400px){
  .wpp-topo{font-size:.86rem;padding:.75rem .65rem}
}

/* ---------- entrada do herói ----------
   Um único momento orquestrado no carregamento. */
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cortina{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.js .heroi h1,
.js .heroi .linha-apoio,
.js .heroi .acoes{animation:sobe .7s cubic-bezier(.2,.7,.3,1) both}
.js .heroi .linha-apoio{animation-delay:.12s}
.js .heroi .acoes{animation-delay:.22s}
.js .heroi-foto{animation:cortina .9s cubic-bezier(.65,0,.2,1) .18s both}

/* ---------- herói ---------- */
/* Herói: a foto sangra pelo topo e pela direita; a manchete invade a
   imagem em vez de ficar ao lado dela. A sobreposição é a composição. */
.heroi{
  position:relative;
  background:var(--profundo);
  color:#fff;
  display:grid;
  grid-template-columns:[full-inicio] minmax(var(--gutter),1fr) [conteudo-inicio] minmax(0,1200px) [conteudo-fim] minmax(var(--gutter),1fr) [full-fim];
  grid-template-rows:auto auto;
  isolation:isolate;
  overflow:hidden;
}

.heroi-foto{
  grid-column:conteudo-inicio / full-fim;
  grid-row:1;
  margin:0;position:relative;
  justify-self:end;
  width:min(62%,760px);
  align-self:stretch;
}
.heroi-foto img{
  display:block;width:100%;height:100%;
  min-height:clamp(380px,50vw,620px);
  object-fit:cover;object-position:52% 38%;
}
/* véu que funde a foto no azul profundo pela esquerda e por baixo,
   para a manchete pousar sobre a imagem sem perder legibilidade */
.heroi-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--profundo) 0%,rgba(14,27,61,.92) 26%,rgba(14,27,61,.28) 62%,rgba(14,27,61,.12) 100%),
    linear-gradient(0deg,rgba(14,27,61,.55) 0%,transparent 45%);
}
.heroi-foto figcaption{
  position:absolute;right:0;bottom:0;z-index:2;
  background:var(--petroleo);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  padding:.4rem .8rem;
}

.heroi-texto{
  grid-column:conteudo-inicio / conteudo-fim;
  grid-row:1;z-index:2;align-self:center;
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem);
}
/* a manchete avança sobre a faixa mais opaca do véu, criando a
   sobreposição — é o que faz texto e imagem virarem uma composição */
.heroi h1{
  font-size:clamp(2.6rem,6.6vw,5rem);
  max-width:19ch;color:#fff;
}
.linha-apoio{
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem);
  color:#B8C6E4;margin-top:1.5rem;max-width:44ch;
}
.acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* faixa de fatos: ancora o herói e substitui o antigo carimbo */
.heroi-fatos{
  grid-column:conteudo-inicio / conteudo-fim;
  grid-row:2;z-index:2;
  list-style:none;margin:0;padding:0 0 clamp(1.5rem,3vw,2.2rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.22);
}
.heroi-fatos li{
  padding-top:1rem;color:#B8C6E4;font-size:.96rem;
  border-top:2px solid var(--petroleo);margin-top:-1px;
  max-width:26ch;
}

@media (max-width:900px){
  /* No celular a sobreposição não cabe: texto e foto dividiriam a mesma
     faixa estreita e um atrapalharia o outro. Aqui eles se separam — a
     foto ganha uma faixa própria e o texto pousa no azul sólido. */
  .heroi{display:block;overflow:visible}

  .heroi-foto{width:100%;position:relative}
  .heroi-foto img{
    height:clamp(240px,56vw,360px);min-height:0;
    object-position:58% 32%;
  }
  /* só uma sombra no pé da foto, para ela encostar no azul sem emenda dura */
  .heroi-foto::after{
    background:linear-gradient(0deg,var(--profundo) 0%,rgba(14,27,61,.35) 32%,transparent 62%);
  }

  .heroi-texto{
    padding:clamp(1.8rem,6vw,2.6rem) var(--gutter) clamp(1.4rem,4vw,2rem);
  }
  .heroi h1{max-width:none;font-size:clamp(2.35rem,9vw,3.1rem)}
  .linha-apoio{max-width:none;margin-top:1.1rem}
  .acoes{margin-top:1.8rem}
  .acoes .btn-claro,
  .acoes .btn-vazado-claro{flex:1 1 100%;text-align:center}

  .heroi-fatos{
    padding:0 var(--gutter) clamp(1.6rem,5vw,2.2rem);
    grid-template-columns:1fr;gap:0;border-top:0;
  }
  .heroi-fatos li{
    border-top:1px solid rgba(255,255,255,.22);
    padding:.85rem 0;max-width:none;margin-top:0;
  }
  .heroi-fatos li:first-child{border-top:2px solid var(--petroleo)}
}


/* ---------- blocos de duas colunas ---------- */
.colunas{
  max-width:1200px;margin:0 auto;padding:clamp(3rem,6vw,5.5rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(1.5rem,4vw,4rem);
}
.colunas h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--profundo)}
.colunas .corpo p:last-child{margin-bottom:0}

@media (max-width:820px){
  .colunas{grid-template-columns:1fr}
}

.dor{border-top:1px solid var(--linha);background:var(--papel)}
.remate{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.22;
  color:var(--petroleo);
}

/* ---------- método ---------- */
.metodo{
  background:var(--profundo);color:#E8ECF4;
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.metodo-cabeca{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.metodo-cabeca h2{font-size:clamp(2.1rem,4.2vw,3.3rem);color:#fff}
.metodo-cabeca p{color:#9FAECA;margin-top:1rem;max-width:56ch}

.etapas{
  max-width:1200px;margin:clamp(2.2rem,4vw,3.4rem) auto 0;
  padding:0 var(--gutter);list-style:none;
}
.etapas li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.2rem) 0;
  border-top:1px solid rgba(255,255,255,.17);
}
.etapas li:last-child{border-bottom:1px solid rgba(255,255,255,.17)}
.num{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:.88;
  color:var(--petroleo);min-width:1.4ch;
}
/* Progressão pelo método: cada etapa acende ao ser alcançada.
   O movimento comunica avanço numa sequência — não é decoração. */
.etapas li{transition:border-top-color .5s ease}
.etapas .num{transition:color .5s ease,opacity .5s ease}
.js .etapas li:not(.ativa) .num{color:#48597E;opacity:.55}
.js .etapas li.ativa{border-top-color:var(--petroleo)}

.etapa-texto{min-width:0}
.etapas h3{font-size:clamp(1.35rem,2.4vw,1.85rem);color:#fff;margin-bottom:.5rem}
.etapas p{color:#9FAECA;margin:0;max-width:62ch}

/* ---------- NR-1 (bloco datado) ----------
   Seção de largura total com chão próprio, não um cartão solto.
   Barra âmbar no topo = sinalização de advertência.                 */
.nr1{
  background:var(--ambar-fundo);
  border-top:6px solid var(--ambar);
  border-bottom:1px solid #E6D8BE;
  padding:clamp(3rem,6vw,5.5rem) 0;
}
.nr1-grade{
  max-width:1200px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:start;
}
.sinal{width:clamp(44px,5vw,64px);height:auto;color:var(--ambar);display:block;margin-bottom:1.1rem}
.tarja{font-size:.82rem;color:#8A5200;font-weight:600;margin:0 0 .6rem}
.nr1 h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#5C3A00}
/* a frase de impacto vira apoio do título, não o título */
.nr1-chamada{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25;
  color:var(--ambar);margin:.9rem 0 0;
}
.nr1 .corpo p{color:#3D2F1A}
.nr1 .remate{color:#8A5200}
.nr1 .corpo p:last-of-type{margin-bottom:1.6rem}

@media (max-width:820px){
  .nr1-grade{grid-template-columns:1fr}
}

/* ---------- pacotes ---------- */
.pacotes{
  max-width:1200px;margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) var(--gutter);
  border-top:1px solid var(--linha);
}
.pacotes-cabeca h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--profundo)}
.pacotes-cabeca p{color:var(--tinta-fraca);margin-top:.9rem}

/* ---------- planos ----------
   Os três são cumulativos, então o cartão mostra a escada: número da
   etapa, o que herda do anterior e o que acrescenta. Sem texto corrido. */
.pacotes-apoio{max-width:52ch}

.planos{
  list-style:none;margin:clamp(1.8rem,3.5vw,2.8rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);align-items:stretch;
}
.plano{
  display:flex;flex-direction:column;
  border:1.5px solid var(--linha);
  border-top:4px solid var(--linha);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  background:var(--branco);
  transition:border-top-color .45s ease,transform .25s ease,box-shadow .25s ease;
}
.js .plano.ativa{border-top-color:var(--petroleo)}
.plano:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,27,61,.10)}

/* o do meio é o que a DS recomenda: mais peso, sem gritar */
.plano-destaque{background:var(--papel);border-color:var(--profundo)}
.js .plano-destaque.ativa{border-top-color:var(--profundo)}

.plano-topo{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.9rem;align-items:start;
  padding-bottom:1rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--linha);
}
.plano-num{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.6rem;line-height:1;color:var(--tinta-fraca);
  transition:color .45s ease;
}
.js .plano.ativa .plano-num{color:var(--petroleo)}
.plano h3{font-size:clamp(1.45rem,2.5vw,1.9rem);color:var(--azul)}
.plano-destaque h3{color:var(--profundo)}
.plano-linha{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:1.05rem;color:var(--tinta-fraca);margin:.15rem 0 0;
}

.plano-heranca{
  font-size:.9rem;font-weight:600;color:#0B6A73;
  margin:0 0 .7rem;
}
.plano-itens{list-style:none;margin:0;padding:0}
.plano-itens li{
  position:relative;padding:.46rem 0 .46rem 1.35rem;
  color:var(--tinta);font-size:.97rem;line-height:1.45;
}
.plano-itens li::before{
  content:"";position:absolute;left:0;top:.95em;
  width:.68rem;height:2px;background:var(--petroleo);
}

.plano-limite{
  margin:1rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--linha);
  color:var(--tinta);font-weight:500;
}
.plano-para{
  margin:0 0 1.2rem;color:var(--tinta-fraca);font-size:.94rem;
}

/* ---- detalhes recolhidos ----
   Mesmo mecanismo do FAQ (details nativo): funciona sem JavaScript,
   abre pelo teclado e o leitor de tela anuncia o estado.          */
.plano-detalhe{border-top:1px solid var(--linha);margin-bottom:.4rem}
.plano-detalhe summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.5rem;
  padding:.95rem 1.8rem .95rem 0;min-height:44px;
  position:relative;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:1.05rem;color:var(--azul);
}
.plano-detalhe summary::-webkit-details-marker{display:none}
.plano-detalhe summary::after{
  content:"";position:absolute;right:.3rem;top:50%;
  width:.6rem;height:.6rem;
  border-right:2px solid var(--petroleo);border-bottom:2px solid var(--petroleo);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
.plano-detalhe[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.plano-detalhe summary:hover{color:var(--profundo)}
.plano-detalhe .fecha{display:none}
.plano-detalhe[open] .abre{display:none}
.plano-detalhe[open] .fecha{display:inline}
.plano-qtd{
  margin-left:auto;font-family:"Barlow",sans-serif;font-weight:500;
  font-size:.82rem;color:var(--tinta-fraca);
}
.plano-conteudo{padding-bottom:1.1rem}
.plano-para span{color:var(--petroleo);font-weight:600}

.plano-cta{
  display:block;margin-top:auto;padding:.85rem 1rem;
  text-align:center;text-decoration:none;font-weight:600;
  border:1.5px solid var(--azul);color:var(--azul);
}
.plano-cta{margin-top:auto}
.plano-cta:hover{background:var(--azul);color:#fff}
.plano-destaque .plano-cta{background:var(--azul);color:#fff}
.plano-destaque .plano-cta:hover{background:var(--profundo);border-color:var(--profundo)}

.planos-nota{
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;color:var(--tinta-fraca);
}

@media (max-width:900px){
  .planos{grid-template-columns:1fr;gap:1rem}
  .plano:hover{transform:none;box-shadow:none}
}

/* ---------- sobre ---------- */
.sobre{background:var(--profundo);color:#fff;padding:0 0 clamp(3.2rem,6vw,5.5rem)}
.faixa-foto{margin:0 0 clamp(2.4rem,5vw,4rem);position:relative;overflow:hidden}
.faixa-foto img{
  display:block;width:100%;height:clamp(220px,28vw,380px);
  object-fit:cover;object-position:50% 45%;
}
.faixa-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,27,61,.30) 0%,rgba(14,27,61,.80) 100%);
  mix-blend-mode:multiply;
}
.sobre-grade{
  max-width:1200px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(1.6rem,5vw,4.5rem);align-items:start;
}
.sobre h2{font-size:clamp(1.95rem,3.7vw,2.9rem);color:#fff}
.sobre p{color:#B8C6E4}
.sobre .remate{color:#8FE3E0}
.sobre .corpo p:last-child{margin-bottom:0}

@media (max-width:820px){
  .sobre-grade{grid-template-columns:1fr}
}

/* ---------- responsável ---------- */

/* ---------- faq ---------- */
.faq{
  max-width:1200px;margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) var(--gutter);
}
.faq h2{font-size:clamp(1.9rem,3.5vw,2.7rem);color:var(--profundo);margin-bottom:1.8rem}
.lista-faq{max-width:80ch}
details{border-top:1px solid var(--linha)}
details:last-child{border-bottom:1px solid var(--linha)}
summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2vw,1.4rem);color:var(--profundo);
  position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:.75rem;height:.75rem;
  border-right:2px solid var(--petroleo);border-bottom:2px solid var(--petroleo);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
details p{padding:0 0 1.3rem;color:var(--tinta-fraca);margin:0}

/* ---------- fechamento + formulário ---------- */
.fecho{
  background:var(--profundo);color:#fff;
  padding:clamp(3.5rem,7vw,6rem) var(--gutter);
}
.fecho-grade{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.fecho h2{font-size:clamp(2rem,4vw,3.1rem);color:#fff}
.fecho p{color:#9FAECA;margin:1.2rem 0 2rem}

.contato-dados{margin:2.4rem 0 0;border-top:1px solid rgba(255,255,255,.17)}
.contato-dados > div{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.17);
}
.contato-dados dt{color:#9FAECA;font-size:.88rem}
.contato-dados dd{margin:0;color:#fff;font-weight:500}
.contato-dados a{color:#8FE3E0;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.contato-dados a:hover{text-decoration:underline}

.formulario{
  background:#fff;color:var(--tinta);
  padding:clamp(1.5rem,3.5vw,2.4rem);
}
.formulario h3{
  font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--profundo);
  margin-bottom:1.4rem;
}
.formulario label{
  display:block;font-size:.88rem;font-weight:600;
  color:var(--tinta-fraca);margin:1rem 0 .35rem;
}
.formulario label:first-of-type{margin-top:0}
.opcional{font-weight:400;color:var(--linha)}
.formulario input,
.formulario select,
.formulario textarea{
  width:100%;padding:.72rem .85rem;
  border:1.5px solid var(--linha);background:#fff;
  font:inherit;font-size:1rem;color:var(--tinta);
  border-radius:0;
}
.formulario textarea{resize:vertical;min-height:5rem}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus{border-color:var(--petroleo);outline:none;box-shadow:0 0 0 3px rgba(14,124,134,.18)}
.formulario input[aria-invalid="true"],
.formulario select[aria-invalid="true"]{border-color:#B3261E}
.formulario button{
  width:100%;margin-top:1.6rem;cursor:pointer;
  font:inherit;font-weight:600;font-size:1.02rem;
  background:var(--petroleo);color:#fff;border-color:var(--petroleo);
}
.formulario button:hover{background:var(--profundo);border-color:var(--profundo)}
.formulario .nota-form{color:#4A5261;font-size:.85rem;margin:.9rem 0 0}
.erro-form{color:#B3261E;font-size:.9rem;font-weight:600;margin:.8rem 0 0}

@media (max-width:860px){
  .fecho-grade{grid-template-columns:1fr}
}

/* ---------- botões ---------- */
.btn,.btn-vazado,.btn-vazado-claro,.btn-claro,.btn-ambar{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.85rem 1.6rem;border:1.5px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.btn{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn:hover{background:var(--profundo);border-color:var(--profundo)}
.btn-vazado{color:var(--profundo);border-color:var(--linha)}
.btn-vazado:hover{border-color:var(--profundo)}
.btn-vazado-claro{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-vazado-claro:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-claro{background:#fff;color:var(--profundo);border-color:#fff}
.btn-claro:hover{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.btn-ambar{background:var(--ambar);color:#fff;border-color:var(--ambar);margin-top:.6rem}
.btn-ambar:hover{background:#8A5200;border-color:#8A5200}

/* ---------- rodapé ---------- */
footer{background:#0A1330;color:#8E9BB8;padding:clamp(2.8rem,5vw,4rem) 0 0}
.rodape{
  max-width:1200px;margin:0 auto;padding:0 var(--gutter) clamp(2.2rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:start;
}
.marca-rodape{height:130px;width:auto;margin-bottom:1.2rem}
.rodape p{margin:0 0 .45rem;font-size:.94rem;max-width:40ch}
.rodape-marca .resp{color:#fff;font-weight:600;margin-top:.9rem}
.rodape-col h2{
  font-size:1.12rem;color:#fff;margin-bottom:.9rem;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
}
.rodape-col ul{list-style:none;margin:0;padding:0}
.rodape-col li{margin-bottom:.45rem}
/* alvos de toque de 44px no celular */
@media (max-width:820px){
  .rodape-col li{margin-bottom:0}
  .rodape-col li a,
  .rodape-marca a,
  .rodape-col p a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}
.rodape a{color:#8FE3E0;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape-fim{
  border-top:1px solid rgba(255,255,255,.14);
}
.rodape-fim p{
  max-width:1200px;margin:0 auto;padding:1.2rem var(--gutter);
  font-size:.86rem;color:#8E9BB8;
}

@media (max-width:820px){
  .rodape{grid-template-columns:1fr 1fr}
  .rodape-marca{grid-column:1 / -1}
}
@media (max-width:520px){
  .rodape{grid-template-columns:1fr}
}

/* ---------- whatsapp flutuante ---------- */
.wpp-flutuante{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:54px;height:54px;border-radius:50%;
  background:var(--petroleo);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(14,27,61,.35);
}
.wpp-flutuante:hover{background:var(--profundo)}

/* ---------- justificação ----------
   Decisão do cliente em 07/10/2026: justificar todo o texto, inclusive no
   celular. A hifenização automática é obrigatória aqui: sem ela, o português
   abre "rios" brancos entre as palavras, porque nossas palavras são longas.
   Fora da regra só o que é interface e não texto: botões, menu, rótulos de
   formulário, tarjas, legendas e o rodapé de copyright.                      */
.linha-apoio,
.heroi-fatos li,
.dor .corpo p,
.metodo-cabeca p,
.etapas p,
.nr1 .corpo p,
.nr1-chamada,
.pacotes-apoio,
.plano-itens li,
.plano-limite,
.plano-para,
.planos-nota,
.sobre .corpo p,
.fecho-texto > p,
details p,
.remate{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}