/* ============================================================
   OACR - MINI MEMORIAL
   Arquivo  : site/public_html/assets/css/componentes.css
   Funcao   : Botao, header, menu mobile, card, hero, rodape,
              WhatsApp flutuante, formulario.
   Memoria  : como_trabalhar_2.0/00_START_HERE.md
   Criado   : 2026-07-29
   Alterado : 2026-07-29 - criacao
   Depende  : tokens.css, base.css
   ============================================================
   REGRA: todo alvo de toque tem no minimo 44x44px.
   REGRA: hover so dentro de @media (hover: hover) and (pointer: fine).
   ============================================================ */

/* ---------- BLOCO OACR: botao ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px; /* alvo de toque */
  padding: var(--e-3) var(--e-6);
  border: 1px solid transparent;
  border-radius: var(--radius-p);
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-saida),
    border-color var(--dur-micro) var(--ease-saida),
    color var(--dur-micro) var(--ease-saida);
}

.btn__icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Primario: laranja com texto PRETO. Regra de contraste do 12_DESIGN.md -
   texto sobre CTA laranja nunca e branco. */
.btn--primario {
  background-color: var(--gp-laranja);
  color: var(--gp-preto);
}

.btn--linha {
  background-color: transparent;
  border-color: var(--gp-borda-ativa);
  color: var(--gp-branco);
}

.btn--whatsapp {
  background-color: var(--gp-sucesso);
  color: #06301a; /* verde escuro para contraste sobre o verde oficial */
}

@media (hover: hover) and (pointer: fine) {
  /* Hover muda cor, nunca escala - evita deslocamento de layout */
  .btn--primario:hover {
    background-color: var(--gp-laranja-claro);
  }

  .btn--linha:hover {
    border-color: var(--gp-laranja);
    background-color: rgba(255, 128, 0, 0.08);
    color: var(--gp-laranja-claro);
  }

  .btn--whatsapp:hover {
    background-color: #2ee878;
  }
}
/* ---------- FIM BLOCO OACR: botao ---------- */

/* ============================================================
   BLOCO OACR: cabecalho
   Responsabilidade: header fixo, navegacao e menu mobile.
   ATENCAO: este markup e DUPLICADO em todas as paginas .html.
   Ao alterar, replicar em todas e conferir contagem de ocorrencias.
   Ver 03_PAGINAS_OU_MODULOS.md, "Custo estrutural da stack".
   ============================================================ */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--altura-header);
  display: flex;
  align-items: center;
  background-color: rgba(20, 16, 15, 0.82);
  border-bottom: 1px solid var(--gp-borda);
  backdrop-filter: blur(12px);
  transition: background-color var(--dur-micro) var(--ease-saida),
    border-color var(--dur-micro) var(--ease-saida);
}

.cabecalho--compacto {
  background-color: rgba(20, 16, 15, 0.97);
  border-bottom-color: var(--gp-borda-ativa);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
}

.cabecalho__logo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gp-branco);
  white-space: nowrap;
}

.cabecalho__logo strong {
  color: var(--gp-laranja);
}

/* Logo em imagem. A altura manda; a largura acompanha.
   O arquivo e 2x (116x104) para ficar nitido em tela retina. */
.cabecalho__logo-img {
  height: 40px;
  width: auto;
}

@media (min-width: 900px) {
  .cabecalho__logo-img {
    height: 52px;
  }
}

/* Foto dentro de bloco de conteudo */
.foto-bloco {
  margin: 0;
}

.foto-bloco img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-card);
}

.foto-bloco figcaption {
  margin-top: var(--e-3);
}

.cabecalho__nav {
  display: none;
}

.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  list-style: none;
}

.cabecalho__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gp-branco);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-micro) var(--ease-saida),
    border-color var(--dur-micro) var(--ease-saida);
}

/* Estado da pagina atual - nao depende so de cor, tem borda tambem */
.cabecalho__link[aria-current="page"] {
  color: var(--gp-laranja);
  border-bottom-color: var(--gp-laranja);
}

@media (hover: hover) and (pointer: fine) {
  .cabecalho__link:hover {
    color: var(--gp-laranja);
    border-bottom-color: var(--gp-borda-ativa);
  }
}

.cabecalho__acoes {
  display: none;
}

/* Botao hamburguer - visivel apenas no mobile */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-p);
  color: var(--gp-branco);
  cursor: pointer;
}

.menu-btn__icone {
  width: 24px;
  height: 24px;
}

.menu-btn[aria-expanded="true"] .menu-btn__abrir,
.menu-btn[aria-expanded="false"] .menu-btn__fechar {
  display: none;
}

/* Painel do menu mobile */
.menu-mobile {
  position: fixed;
  inset: var(--altura-header) 0 auto 0;
  z-index: var(--z-menu-mobile);
  max-height: calc(100vh - var(--altura-header));
  overflow-y: auto;
  padding: var(--e-6) 0 var(--e-8);
  background-color: var(--gp-escudo);
  border-bottom: 1px solid var(--gp-borda-ativa);
}

.menu-mobile[hidden] {
  display: none;
}

.menu-mobile__lista {
  list-style: none;
  margin-bottom: var(--e-6);
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--gp-borda);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gp-branco);
}

.menu-mobile__link[aria-current="page"] {
  color: var(--gp-laranja);
}

.menu-mobile__acoes {
  display: grid;
  gap: var(--e-3);
}

@media (min-width: 900px) {
  .cabecalho__nav,
  .cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--e-4);
  }

  .menu-btn,
  .menu-mobile {
    display: none;
  }
}
/* ---------- FIM BLOCO OACR: cabecalho ---------- */

/* ---------- BLOCO OACR: hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 780px);
  padding-top: calc(var(--altura-header) + var(--e-12));
  padding-bottom: var(--e-16);
  overflow: hidden;
}

/* Camada de fundo do hero.
   Empilhamento (de cima para baixo no codigo = de baixo para cima na tela):
   1. foto do tanque, desfocada, como textura
   2. dois brilhos radiais laranja da marca
   3. cor de base

   O blur e proposital: a unica foto disponivel tem 360x640 e ficaria
   pixelada esticada. Desfocada, vira textura e o defeito desaparece.
   Ao receber a foto definitiva em alta, REMOVER o filter e o
   background-size gigante. */
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--gp-preto);
  /* Brilhos laranja discretos. Com a foto no lugar eles apenas
     puxam a cena para a cor da marca - nao devem competir com ela. */
  background-image: radial-gradient(
      ellipse at 18% 22%,
      rgba(255, 128, 0, 0.1) 0%,
      transparent 55%
    ),
    radial-gradient(ellipse at 84% 82%, rgba(232, 72, 12, 0.08) 0%, transparent 58%);
}

/* Imagem de fundo do hero (fornecida pelo dono em 2026-07-29).
   A composicao tem motos a esquerda, mecanicos a direita e o MEIO
   escuro e vazio - feita para o texto ficar no centro. Por isso o
   conteudo do hero e centralizado e o background fica em `center`.

   Sem blur: a imagem tem 1774px e aguenta tela cheia. A versao
   anterior usava blur para disfarcar uma foto de 360px. */
.hero__textura {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/hero-fundo-mobile.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Acima de 900px vale a pena baixar a versao grande (198 KB).
   No celular, a de 900px (60 KB) ja cobre a tela com folga. */
@media (min-width: 900px) {
  .hero__textura {
    background-image: url("../img/hero-fundo.jpg");
  }
}

/* Escurece o topo/base para o texto ter contraste sobre qualquer foto.
   z-index explicito para garantir que fique ACIMA da .hero__textura -
   sem isso o contraste do H1 dependeria da ordem do DOM. */
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Duas camadas:
     1. vinheta radial no centro - garante contraste do H1 sobre a
        parte vazia da foto, sem apagar as motos e os mecanicos
     2. gradiente vertical - escurece o topo (o header e fixo e
        translucido) e a base (transicao para a proxima secao)

     A imagem ja e escura (luminancia medida entre 15 e 30), entao
     estes valores sao bem mais leves que os da versao anterior.
     Escurecer demais aqui mata a foto. */
  background: radial-gradient(
      ellipse 70% 60% at 50% 52%,
      rgba(20, 16, 15, 0.82) 0%,
      rgba(20, 16, 15, 0.45) 55%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 16, 15, 0.8) 0%,
      rgba(20, 16, 15, 0.25) 38%,
      rgba(20, 16, 15, 0.35) 70%,
      rgba(20, 16, 15, 0.95) 100%
    );
}

/* Centralizado para casar com a composicao da imagem de fundo, que
   deixa o meio escuro e vazio de proposito. Se a imagem for trocada
   por uma com o ponto de interesse no centro, voltar para
   alinhamento a esquerda e `text-align: left`. */
.hero__conteudo {
  position: relative;
  z-index: var(--z-base);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

/* O paragrafo tem max-width de 68ch vindo do base.css; sem isto
   ele nao centraliza dentro do hero. */
.hero__conteudo p {
  margin-inline: auto;
}

.hero__acoes {
  justify-content: center;
}

/* Menor que o padrao global de svg (24px), definido em base.css */
.hero__etiqueta svg {
  width: 16px;
  height: 16px;
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--gp-borda-ativa);
  border-radius: var(--radius-pill);
  font-family: var(--fonte-titulo);
  font-size: var(--escala-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-laranja);
}

.hero__titulo em {
  display: block;
  font-style: normal;
  /* Gradiente da marca aplicado ao texto, replicando o "GP" da logo.
     Fallback: cor laranja solida em navegador sem suporte. */
  color: var(--gp-laranja);
  background: var(--gp-gradiente-marca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__texto {
  margin-top: var(--e-6);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--gp-prata);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}
/* ---------- FIM BLOCO OACR: hero ---------- */

/* ---------- BLOCO OACR: faixa-confianca ---------- */
.faixa {
  border-block: 1px solid var(--gp-borda);
  background-color: var(--gp-escudo);
  padding-block: var(--e-6);
}

.faixa__lista {
  display: grid;
  gap: var(--e-6);
  list-style: none;
}

.faixa__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.faixa__icone {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--gp-laranja);
}

.faixa__rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--escala-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-prata-escuro);
}

.faixa__valor {
  font-weight: 500;
}

@media (min-width: 640px) {
  .faixa__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .faixa__lista {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ---------- FIM BLOCO OACR: faixa-confianca ---------- */

/* ---------- BLOCO OACR: card ---------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
  background-color: var(--gp-grafite);
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-card);
  transition: background-color var(--dur-micro) var(--ease-saida),
    border-color var(--dur-micro) var(--ease-saida);
}

.card__icone {
  width: 40px;
  height: 40px;
  margin-bottom: var(--e-4);
  color: var(--gp-laranja);
}

.card__titulo {
  margin-bottom: var(--e-3);
}

.card__texto {
  flex-grow: 1;
  color: var(--gp-prata);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  margin-top: var(--e-2);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.card__link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-micro) var(--ease-saida);
}

/* Card clicavel por inteiro, mantendo um unico link real no DOM
   (bom para leitor de tela e para o Google) */
.card--clicavel {
  position: relative;
  cursor: pointer;
}

.card--clicavel .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

@media (hover: hover) and (pointer: fine) {
  .card--clicavel:hover {
    background-color: var(--gp-grafite-claro);
    border-color: var(--gp-borda-ativa);
  }

  .card--clicavel:hover .card__link svg {
    transform: translateX(4px);
  }
}

/* Foco do link vira foco visual do card inteiro */
.card--clicavel:focus-within {
  border-color: var(--gp-laranja);
}
/* ---------- FIM BLOCO OACR: card ---------- */

/* ---------- BLOCO OACR: duas-frentes ---------- */
/* Responsabilidade: resolver a duvida "eles consertam ou so vendem peca?".
   Decisao de produto de 2026-07-29 - mecanica com peso igual a loja. */
.frente {
  display: flex;
  flex-direction: column;
  padding: var(--e-8);
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-card);
  background-color: var(--gp-grafite);
}

.frente--destaque {
  border-color: var(--gp-borda-ativa);
  background-image: linear-gradient(
    160deg,
    rgba(255, 128, 0, 0.09) 0%,
    transparent 55%
  );
}

.frente__numero {
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gp-laranja);
  opacity: 0.35;
}

.frente__titulo {
  margin: var(--e-3) 0;
}

.frente__lista {
  margin: var(--e-4) 0 var(--e-8);
  padding: 0;
  list-style: none;
  flex-grow: 1;
}

.frente__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--gp-borda);
  color: var(--gp-prata);
}

.frente__lista svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: var(--gp-laranja);
}
/* ---------- FIM BLOCO OACR: duas-frentes ---------- */

/* ---------- BLOCO OACR: passos ---------- */
.passo {
  position: relative;
  padding-top: var(--e-8);
  border-top: 2px solid var(--gp-borda-ativa);
}

.passo__numero {
  position: absolute;
  top: var(--e-3);
  left: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--escala-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-laranja);
}

.passo__titulo {
  margin-bottom: var(--e-2);
}

.passo__texto {
  color: var(--gp-prata);
  margin-bottom: 0;
}
/* ---------- FIM BLOCO OACR: passos ---------- */

/* ---------- BLOCO OACR: cta-final ---------- */
.cta-final {
  text-align: center;
}

.cta-final__caixa {
  padding: var(--e-12) var(--e-6);
  border: 1px solid var(--gp-borda-ativa);
  border-radius: var(--radius-card);
  background-color: var(--gp-escudo);
  background-image: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 128, 0, 0.14) 0%,
    transparent 62%
  );
}

.cta-final__titulo {
  margin-bottom: var(--e-4);
}

.cta-final__texto {
  margin-inline: auto;
  color: var(--gp-prata);
}

.cta-final__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-8);
}
/* ---------- FIM BLOCO OACR: cta-final ---------- */

/* ============================================================
   BLOCO OACR: rodape
   ATENCAO: markup DUPLICADO em todas as paginas .html.
   ============================================================ */
.rodape {
  padding-block: var(--e-16) var(--e-8);
  background-color: var(--gp-escudo);
  border-top: 1px solid var(--gp-borda);
}

.rodape__grade {
  display: grid;
  gap: var(--e-8);
  margin-bottom: var(--e-12);
}

.rodape__titulo {
  margin-bottom: var(--e-4);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-laranja);
}

.rodape__lista {
  list-style: none;
}

.rodape__lista li {
  margin-bottom: var(--e-2);
}

.rodape__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--gp-prata);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .rodape__lista a:hover {
    color: var(--gp-laranja);
    text-decoration: underline;
  }
}

.rodape__base {
  padding-top: var(--e-6);
  border-top: 1px solid var(--gp-borda);
  color: var(--gp-prata-escuro);
  font-size: var(--escala-small);
}

.rodape__base p {
  max-width: none;
  margin-bottom: var(--e-2);
}

.rodape__redes {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-4);
  list-style: none;
}

.rodape__rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-p);
  color: var(--gp-prata);
}

.rodape__rede svg {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .rodape__rede:hover {
    border-color: var(--gp-laranja);
    color: var(--gp-laranja);
  }
}

@media (min-width: 640px) {
  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--e-12);
  }
}
/* ---------- FIM BLOCO OACR: rodape ---------- */

/* ============================================================
   BLOCO OACR: zap-flutuante
   Responsabilidade: canal principal de conversao, em toda pagina.
   ATENCAO: markup DUPLICADO em todas as paginas .html.
   ============================================================ */
.zap-flutuante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: var(--z-flutuante);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  background-color: var(--gp-sucesso);
  color: #06301a;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-saida);
}

.zap-flutuante svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* No mobile, so o icone - texto ocuparia espaco util de leitura */
.zap-flutuante__texto {
  display: none;
}

@media (min-width: 640px) {
  .zap-flutuante__texto {
    display: inline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .zap-flutuante:hover {
    background-color: #2ee878;
  }
}
/* ---------- FIM BLOCO OACR: zap-flutuante ---------- */

/* ---------- BLOCO OACR: contato-lista ---------- */
.contato-lista {
  list-style: none;
}

.contato-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--gp-borda);
}

.contato-item:last-child {
  border-bottom: 0;
}

.contato-item__icone {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--gp-laranja);
}

.contato-item p {
  margin-block: var(--e-2) var(--e-3);
}

.contato-item p:last-child {
  margin-bottom: 0;
}
/* ---------- FIM BLOCO OACR: contato-lista ---------- */

/* ---------- BLOCO OACR: formulario ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

/* Label SEMPRE visivel. Placeholder nao substitui label. */
.campo__label {
  font-family: var(--fonte-titulo);
  font-size: var(--escala-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-prata);
}

.campo__obrigatorio {
  color: var(--gp-laranja);
}

.campo__controle {
  min-height: 48px;
  padding: var(--e-3);
  background-color: var(--gp-preto);
  border: 1px solid var(--gp-borda);
  border-radius: var(--radius-p);
  color: var(--gp-branco);
  transition: border-color var(--dur-micro) var(--ease-saida);
}

.campo__controle::placeholder {
  color: var(--gp-prata-escuro);
}

.campo__controle:focus {
  border-color: var(--gp-laranja);
}

textarea.campo__controle {
  min-height: 140px;
  resize: vertical;
}

/* Erro comunicado por texto + icone, nunca so por cor */
.campo__erro {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--escala-small);
  color: #ff9b7a;
}

.campo__erro svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* ---------- FIM BLOCO OACR: formulario ---------- */