/*
 * Estilos escritos a mao, fora do arquivo site.css.
 * Use este arquivo para qualquer ajuste novo: site.css foi gerado por
 * ferramenta e sera substituido caso o layout base seja regerado.
 *
 * TROCA DA FONTE GOTHAM
 * Coloque os arquivos .woff2 da Gotham em /assets/fontes/ e ative o bloco
 * abaixo. As duas variaveis controlam o site inteiro.
 *
 * @font-face {
 *   font-family: "Gotham";
 *   src: url("../fontes/Gotham-Book.woff2") format("woff2");
 *   font-weight: 400; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Gotham";
 *   src: url("../fontes/Gotham-Bold.woff2") format("woff2");
 *   font-weight: 700; font-style: normal; font-display: swap;
 * }
 * :root {
 *   --font-display: "Gotham";
 *   --font-body: "Gotham";
 * }
 */
/* Estado de erro nos campos de formulario */
.border-red-400 { border-color: #f87171; }

/* Botao de selecao de arquivo */
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 12px;
  background: #E6F2FF;
  color: #0063C6;
  font-weight: 600;
  font-size: 13px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #CCE5FF; }

/* Sanfona: leve animacao ao abrir */
[data-sanfona-botao] + div:not([hidden]) { animation: galiza-abre 0.25s ease-out; }
@keyframes galiza-abre {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-sanfona-botao] + div:not([hidden]) { animation: none; }
}

/*
 * Utilitarios que nao existiam no site.css gerado.
 * Sao as mesmas medidas do restante do layout.
 */
.p-7 { padding: 1.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-10 { padding-bottom: 2.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pl-6 { padding-left: 1.5rem; }
.pr-5 { padding-right: 1.25rem; }
.bottom-0 { bottom: 0; }
.justify-end { justify-content: flex-end; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-6 { row-gap: 1.5rem; }
.h-\[340px\] { height: 340px; }
.border-brand-500 { border-color: #0080FF; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.gap-px { gap: 1px; }

@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
}

@media (min-width: 768px) {
  .md\:flex-1 { flex: 1 1 0%; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:mt-0 { margin-top: 0; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:text-\[30px\] { font-size: 30px; }
}

@media (min-width: 1024px) {
  .lg\:aspect-auto { aspect-ratio: auto; }
  .lg\:h-full { height: 100%; }
  .lg\:grid-cols-\[1\.2fr_0\.8fr\] { grid-template-columns: 1.2fr 0.8fr; }
  .lg\:grid-cols-\[260px_1fr\] { grid-template-columns: 260px 1fr; }
}

/*
 * Logotipo sobre o fundo azul do rodape.
 * Converte o arquivo colorido para branco solido. Se voce tiver uma
 * versao oficial em branco, informe o caminho em 'logoBranco'
 * (includes/dados-site.php) e esta classe deixa de ser aplicada.
 */
.logo-negativo { filter: brightness(0) invert(1); }

/* Placa do veiculo sempre em maiuscula */
.uppercase { text-transform: uppercase; }

/* Utilitarios usados nas landing pages */
.gap-y-4 { row-gap: 1rem; }
.h-8 { height: 2rem; }
.max-w-\[130px\] { max-width: 130px; }

@media (min-width: 768px) {
  .md\:text-\[34px\] { font-size: 34px; }
}

@media (min-width: 1024px) {
  .lg\:top-6 { top: 1.5rem; }
  .lg\:text-\[46px\] { font-size: 46px; }
  .lg\:grid-cols-\[1fr_0\.9fr\] { grid-template-columns: 1fr 0.9fr; }
}

/*
 * VERDE DO WHATSAPP
 * Todo botao e link de acao do WhatsApp usa .btn-whats, para nao existir
 * duas versoes diferentes espalhadas pelo site.
 */
:root {
  --whats: #25D366;
  --whats-escuro: #1EAF52;
  --verde-secao: #0E6B4E;
  --verde-secao-claro: #12855F;
  --verde-claro: #E9F9EF;
}

.btn-whats {
  background-color: var(--whats);
  color: #FFFFFF;
}
.btn-whats:hover { background-color: var(--whats-escuro); color: #FFFFFF; }
.btn-whats svg { color: #FFFFFF; }
.btn-whats:focus-visible { outline: 2px solid var(--whats-escuro); outline-offset: 2px; }

/* Botao flutuante */
.flutuante-whats {
  background-color: var(--whats);
  color: #FFFFFF;
}
.flutuante-whats:hover { background-color: var(--whats-escuro); }

/* Icone de WhatsApp em texto e listas */
.texto-whats { color: var(--whats); }
.icone-whats-circulo {
  background-color: var(--whats);
  color: #FFFFFF;
}

/* Secao de fundo verde, para quebrar a sequencia de azul */
.secao-verde {
  background-color: var(--verde-secao);
  color: #FFFFFF;
}
.secao-verde .titulo { color: #FFFFFF; }
.secao-verde .texto { color: rgba(255, 255, 255, 0.82); }
.secao-verde .cartao {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.secao-verde .sobretitulo { color: #8FE7BB; }

/* Fundo verde bem claro, para blocos de apoio */
.fundo-verde-claro { background-color: var(--verde-claro); }
.borda-verde { border-color: var(--whats); }

/* Marcadores verdes em listas de confirmacao */
.check-verde { color: var(--verde-secao-claro); }

/* Icone verde dentro de circulo claro */
.icone-verde-claro {
  background-color: var(--verde-claro);
  color: var(--verde-secao);
}

/* Estrelas das avaliacoes */
.text-amber-400 { color: #FBBF24; }

/* Utilitarios da secao de avaliacoes e dos blocos verdes */
.gap-0\.5 { gap: 0.125rem; }
.leading-none { line-height: 1; }
.h-64 { height: 16rem; }
.w-64 { width: 16rem; }

/*
 * Opcoes em pilula, usadas nas perguntas de escolha unica e multipla.
 * O input fica escondido e o label vira o botao, o que mantem a
 * acessibilidade por teclado e o funcionamento sem JavaScript.
 */
.opcao-pilula {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  padding: 0.5rem 1rem;
  font-size: 14px;
  color: #4A5568;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  min-height: 40px;
}
.opcao-pilula:hover { border-color: #B8D8FF; background: #F5F9FF; }
.opcao-pilula.escolhida {
  background: #0080FF;
  border-color: #0080FF;
  color: #FFFFFF;
  font-weight: 600;
}
.opcao-pilula:focus-within { outline: 2px solid #0080FF; outline-offset: 2px; }

/* Sem JavaScript, o marcador nativo ainda aparece */
.opcao-pilula input:not(.sr-only) { margin-right: 0.5rem; }

/*
 * Faixa da marca: verde do WhatsApp para o azul institucional.
 * Usada no topo do cabecalho e do rodape, em todas as paginas.
 */
.faixa-marca {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--whats) 0%, var(--verde-secao) 55%, #0080FF 100%);
}

/* No menu mobile aberto, a faixa acompanha o painel */
.faixa-marca-painel { height: 4px; width: 100%; }

/* Tamanhos usados no icone do WhatsApp dentro dos botoes */
.h-\[17px\] { height: 17px; }
.w-\[17px\] { width: 17px; }
.h-\[19px\] { height: 19px; }
.w-\[19px\] { width: 19px; }

/*
 * TRILHA DE ETAPAS DA COTACAO
 * Cada item tem tres estados: pendente, em andamento e concluido.
 * O concluido troca o icone pelo visto verde.
 */
.trilha { list-style: none; padding: 0; margin-bottom: 2rem; }

.trilha-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 1rem 1.125rem;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.trilha-icone {
  position: relative;
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #F1F5F9;
  color: #8A94A6;
  transition: background-color 0.25s, color 0.25s;
}
.trilha-icone .trilha-check { position: absolute; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; }

/* Etapa atual */
.trilha-item.ativa { border-color: #B8D8FF; box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.10); }
.trilha-item.ativa .trilha-icone { background: #E6F2FF; color: #0080FF; }

/* Etapa concluida */
.trilha-item.concluida { border-color: rgba(37, 211, 102, 0.45); background: #F6FEF9; }
.trilha-item.concluida .trilha-icone { background: var(--whats); color: #FFFFFF; }
.trilha-item.concluida .trilha-icone svg:first-child { opacity: 0; }
.trilha-item.concluida .trilha-icone .trilha-check { opacity: 1; transform: scale(1); }

@media (max-width: 767px) {
  .trilha-item { padding: 0.75rem 0.875rem; }
  .trilha-icone { height: 34px; width: 34px; }
}

/* Aviso de progresso recuperado */
.aviso-retomar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-radius: 20px;
  background: var(--verde-claro);
  border: 1px solid rgba(37, 211, 102, 0.35);
  padding: 0.875rem 1.125rem;
  font-size: 14px;
  color: #1B2430;
  margin-bottom: 1.25rem;
}
.aviso-retomar button {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  color: #0063C6;
  text-decoration: underline;
  cursor: pointer;
}

/* Utilitarios da pagina de cotacao */
@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:pb-14 { padding-bottom: 3.5rem; }
}

/*
 * ALINHAMENTO DOS CAMPOS DO FORMULARIO
 *
 * Todo campo tem a mesma estrutura: rotulo, controle e dica. O rotulo ganha
 * altura minima no desktop, entao uma pergunta de duas linhas nao empurra o
 * campo para baixo enquanto o vizinho de uma linha fica no alto. As opcoes em
 * pilula tem a mesma altura de um input, para a linha nao ficar irregular.
 */
.campo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.campo-rotulo {
  display: flex;
  /* Alinhado ao rodape do espaco reservado: o rotulo fica colado no campo e
     a folga de uma pergunta de duas linhas sobra acima, e nao abaixo. */
  align-items: flex-end;
  margin-bottom: 0.375rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #253D80;
  padding: 0;
}

.campo-controle { display: block; }

.campo-dica {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.45;
  color: #8A94A6;
}

.campo-erro {
  margin-top: 0.5rem;
  font-size: 13px;
  color: #DC2626;
}

/* Opcoes lado a lado, com a mesma altura de um campo de texto */
.grupo-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opcao-pilula { min-height: 50px; padding: 0.625rem 1.125rem; }

@media (min-width: 640px) {
  /* Espaco para duas linhas de rotulo, o que alinha os campos da mesma linha */
  .campo-rotulo { min-height: 2.4rem; }
}

/* Grade dos formularios */
.items-stretch { align-items: stretch; }
.gap-x-5 { column-gap: 1.25rem; }
.items-start { align-items: start; }

/* Tamanhos usados nas páginas de agradecimento */
.h-16 { height: 4rem; }
.w-16 { width: 4rem; }
.w-8 { width: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }

/*
 * MODAL DO WHATSAPP
 * Aparece antes de abrir a conversa, para identificar quem procura a Galiza
 * e avisar quando o atendimento esta fechado.
 */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Alinhado ao topo e centralizado por margin auto na caixa. Usar
     align-items center aqui cortaria o inicio do modal quando o conteudo
     fica mais alto que a tela, e a parte de cima ficaria inalcancavel. */
  align-items: flex-start;
  justify-content: center;
  background: rgba(11, 22, 44, 0.55);
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (min-width: 640px) {
  .modal-fundo { padding: 2rem 1rem; }
}

/* Este arquivo carrega depois do site.css, entao a regra de exibicao do
   modal venceria a classe hidden. Por isso a excecao explicita abaixo. */
.modal-fundo.hidden { display: none; }

.modal-caixa {
  position: relative;
  /* margin auto centraliza quando cabe e vira espacamento quando nao cabe */
  margin: auto;
  width: 100%;
  max-width: 460px;
  border-radius: 24px;
  background: #FFFFFF;
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(11, 22, 44, 0.28);
  animation: sobe 0.28s ease-out;
}
@media (min-width: 640px) {
  .modal-caixa { padding: 2rem; }
}
@keyframes sobe {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-caixa { animation: none; }
}

.modal-fechar {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #F1F5F9;
  color: #4A5568;
  cursor: pointer;
}
.modal-fechar:hover { background: #E2E8F0; }

/* Pontinho pulsante de atendimento aberto */
.ponto-online {
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 999px;
  background: var(--whats);
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: pulso 2s infinite;
}
@keyframes pulso {
  70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ponto-online { animation: none; }
}

/* Selo de fora do horario, junto ao botao flutuante */
.aviso-horario {
  position: fixed;
  right: 5.5rem;
  bottom: 1.85rem;
  z-index: 29;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(11, 22, 44, 0.16);
  padding: 0.5rem 0.875rem;
  font-size: 12px;
  font-weight: 600;
  color: #4A5568;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .aviso-horario { display: none; }
}
.hover\:text-brand-600:hover { color: #0063C6; }

/* Assinatura da agência no rodapé, discreta */
.credito-agencia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.25s;
}
.credito-agencia:hover { color: rgba(255, 255, 255, 0.85); }
.credito-agencia img { height: 19px; width: auto; max-width: 90px; opacity: 0.75; }
.credito-agencia:hover img { opacity: 1; }
.credito-agencia strong { font-weight: 600; color: inherit; }
.sem-quebra { white-space: nowrap; }

/*
 * Cabecalho do artigo do blog centralizado.
 * A funcao breadcrumb() e compartilhada com as outras paginas, entao a regra
 * fica presa ao wrapper .post-hero, usado apenas em includes/tpl-post.php.
 */
.post-hero nav ol { justify-content: center; }

/*
 * Bloco "Em resumo".
 * Resposta curta e direta logo abaixo do topo da pagina ou da foto do artigo.
 * E o trecho que buscadores e assistentes de IA costumam extrair como resumo,
 * entao ele fica em texto normal, sem imagem e sem script.
 */
.bloco-resumo {
  border-left: 4px solid #0080FF;
  background: #EDF4FD;
  border-radius: 0 16px 16px 0;
  padding: 1.25rem 1.5rem;
}
.bloco-resumo-rotulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0063C6;
}
.bloco-resumo-texto {
  font-size: 15px;
  line-height: 1.7;
  color: #253D80;
  font-weight: 500;
}
@media (min-width: 768px) {
  .bloco-resumo { padding: 1.5rem 1.75rem; }
  .bloco-resumo-texto { font-size: 16px; }
}

/*
 * FORMULARIO COMPACTO
 *
 * Usado nas landing pages, onde o formulario fica num cartao estreito.
 * O espacamento padrao foi pensado para /orcamento, pagina larga com
 * perguntas longas, e ali continua valendo. Aqui os rotulos tem uma linha
 * so, entao a altura minima reservada para duas linhas vira espaco morto.
 *
 * O espacamento entre os campos NAO depende deste arquivo: fica na classe
 * gap-4 do proprio formulario. Assim, se este CSS falhar em algum cache, o
 * formulario continua legivel em vez de virar um amontoado de campos.
 */
.form-compacto .campo-rotulo {
  min-height: 0;
  margin-bottom: 0.3125rem;
  font-size: 13px;
}

/*
 * No celular a grade tem uma coluna so e a altura minima seria espaco morto.
 * A partir de 640px voltam duas colunas, e sem altura reservada uma pergunta
 * de duas linhas desalinha o campo vizinho. 2.1rem cobre duas linhas de 13px,
 * contra as 2.4rem do formulario padrao.
 */
@media (min-width: 640px) {
  .form-compacto .campo-rotulo { min-height: 2.1rem; }
}
.form-compacto .campo-dica,
.form-compacto .campo-erro { margin-top: 0.25rem; font-size: 12px; }

/*
 * No celular os campos ficam com 16px de fonte de proposito. Abaixo disso o
 * Safari do iPhone aplica zoom automatico ao tocar no campo, o visitante
 * perde o enquadramento da pagina e precisa fechar o zoom na mao. A altura
 * minima de 46px atende ao alvo de toque confortavel.
 */
.form-compacto input,
.form-compacto select {
  font-size: 16px;
  min-height: 46px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.form-compacto input[type="checkbox"] { min-height: 0; }

@media (min-width: 640px) {
  .form-compacto input,
  .form-compacto select { font-size: 14px; min-height: 44px; }
}

/*
 * HERO CLARO DA LANDING VARIANTE B
 * Gradiente suave no topo, sem bloco de cor chapado. O conteudo fica em
 * texto escuro sobre fundo claro, que e mais legivel na tela do celular
 * sob luz do dia do que texto claro sobre azul escuro.
 */
.hero-claro {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(0, 128, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #EDF4FD 0%, #F6F8FB 45%, #FFFFFF 100%);
}
.hero-claro-linha {
  height: 3px;
  background: linear-gradient(90deg, #253D80 0%, #0080FF 50%, #25D366 100%);
}

/*
 * BARRA FIXA NO CELULAR
 * Duas acoes sempre ao alcance do polegar, na parte de baixo da tela.
 * Some a partir de 640px, onde o formulario ja fica visivel ao lado do texto.
 */
.barra-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #E4EAF2;
  box-shadow: 0 -6px 24px rgba(37, 61, 128, 0.10);
}
.barra-mobile > * { flex: 1; }
.espaco-barra-mobile { height: 76px; }

@media (min-width: 640px) {
  .barra-mobile, .espaco-barra-mobile { display: none; }
}
/* Com a barra fixa no celular, o botao flutuante sobraria em cima dela */
@media (max-width: 639px) {
  .tem-barra-mobile .flutuante-whats { display: none; }
}

/*
 * Utilitarios usados pela landing variante B que nao existiam no site.css
 * gerado. Ficam aqui para nao depender de recompilar o Tailwind.
 */
.h-\[64px\] { height: 64px; }
@media (min-width: 640px) {
  .sm\:hidden { display: none; }
}
@media (min-width: 768px) {
  .md\:mt-5 { margin-top: 1.25rem; }
  .md\:mt-8 { margin-top: 2rem; }
  .md\:mt-9 { margin-top: 2.25rem; }
  .md\:pt-7 { padding-top: 1.75rem; }
  .md\:space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
}

/*
 * FAIXA DE SEGURADORAS DAS LANDING PAGES
 *
 * No celular ela quebra em varias linhas, que e o certo. A partir de 1024px,
 * onde o hero tem duas colunas, os cinco logos precisam caber numa linha so.
 * Como o espaco da coluna varia com a largura da tela, em vez de fixar um
 * tamanho os logos encolhem junto: flex-nowrap segura a linha, min-width zero
 * libera o encolhimento e o object-contain preserva a proporcao de cada um
 * dentro do espaco que sobrou.
 */
@media (min-width: 1024px) {
  .faixa-logos {
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: 1.25rem;
  }
  .faixa-logos > li { min-width: 0; flex: 0 1 auto; }
  .faixa-logos img { max-width: 100%; }
}