/* ============================================================
   INSOLUS — complementos ao Tailwind
   ============================================================ */
html { scroll-behavior: smooth; scroll-padding-top: 128px; }

/* Escudo decorativo: mesma forma e degradê laranja do símbolo da marca */
.escudo-decor {
    background: linear-gradient(135deg, #C8922E 0%, #9C6E1C 100%);
    clip-path: polygon(50% 0%, 100% 12%, 100% 52%, 92% 74%, 72% 90%, 50% 100%, 28% 90%, 8% 74%, 0% 52%, 0% 12%);
}

/* Foto com fundo que "some" nas bordas esquerda e de baixo, fundindo-se ao banner azul */
.foto-fundida {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 8%, #000 44%), linear-gradient(to top, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, transparent 8%, #000 44%), linear-gradient(to top, transparent 0%, #000 18%);
    mask-composite: intersect;
}

/* Faixa diagonal azul e laranja (traço do escudo) */
.faixa-marca { height: 6px; background: linear-gradient(90deg, #10213F 0 55%, #C8922E 55% 80%, #C8922E 80%); }

/* Cartões de serviço: leve elevação no hover */
.cartao-servico { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cartao-servico:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(10, 23, 48, .35); border-color: #FDBA74; }

/* Caixinhas de serviço do formulário: destaca a opção marcada */
.opcao-servico:has(input:checked) { border-color: #C8922E; background: #FBF4E6; }

/* Perguntas frequentes: esconde a setinha padrão do navegador (o ícone + faz esse papel) */
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::marker { content: ''; }

/* Botão da atendente: flutua suavemente, anel verde pulsando e balão que entra deslizando */
.atendimento-botao { animation: atendimento-flutuar 3.2s ease-in-out infinite; }
.atendimento-botao:hover { animation-play-state: paused; }
.atendimento-botao:hover img { transform: scale(1.06); }
.atendimento-botao img { transition: transform .2s ease; }
.atendimento-anel { animation: atendimento-pulso 2s ease-out infinite; }
.atendimento-balao { opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.atendimento-balao.visivel { opacity: 1; transform: none; pointer-events: auto; }
@keyframes atendimento-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes atendimento-pulso { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cartao-servico, .cartao-servico:hover { transition: none; transform: none; }
    .atendimento-botao, .atendimento-anel { animation: none; }
    .atendimento-balao { transition: none; }
}

/* ============================================================
   FUNDO DA MARCA (o mesmo da tela de acesso do painel)
   Uso: <section class="fundo-marca ..."> <?php echo fundo_marca('cabecalho'); ?> ... </section>
   Variantes: cabecalho (topo das páginas), bloco (cartões e seções), rodape (mais discreto)
   ============================================================ */
.fundo-marca { position: relative; overflow: hidden; isolation: isolate; }
.fundo-marca > :not(.fm-camadas) { position: relative; z-index: 1; }
.fm-camadas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse at 15% 0%, #1B2F55 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #10213F 0%, transparent 60%), linear-gradient(160deg, #10213F 0%, #0A1730 70%, #08101F 100%); }
.fm-pontos { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.2px); background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, transparent 90%); }
.fm-escudo { position: absolute; right: -3%; top: 50%; height: 170%; max-height: 900px; width: auto; transform: translateY(-50%) rotate(-8deg); opacity: .09; filter: saturate(.6); }
/* Faixas presas ao canto inferior esquerdo: curtas e pouco inclinadas para não passar atrás do texto */
.fm-faixa { position: absolute; border-radius: 999px; transform: rotate(-14deg); transform-origin: left center; }
.fm-faixa-1 { left: -6%; bottom: -12px; width: 22%; height: clamp(12px, 1.8vw, 30px); background: linear-gradient(90deg, transparent, rgba(200,146,46,.5), rgba(200,146,46,.72)); }
.fm-faixa-2 { left: -1%; bottom: -38px; width: 22%; height: clamp(6px, .9vw, 15px); background: linear-gradient(90deg, transparent, rgba(200,146,46,.22), rgba(200,146,46,.42)); }
.fm-quadro { position: absolute; border-radius: 22%; animation: fm-flutuar 9s ease-in-out infinite; }
.fm-brilho { position: absolute; right: 8%; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(200,146,46,.16) 0%, rgba(200,146,46,.05) 40%, transparent 70%); }
@keyframes fm-flutuar { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@media (prefers-reduced-motion: reduce) { .fm-quadro { animation: none; } }
/* Rodapé: mais discreto para não atrapalhar a leitura */
.fm-rodape .fm-escudo { opacity: .05; height: 120%; }
.fm-rodape .fm-faixa-1 { opacity: .45; }
.fm-rodape .fm-faixa-2 { opacity: .35; }
.fm-rodape .fm-brilho { opacity: .5; }
/* Chamada final: faixas mais baixas (o selo "menos de 2 minutos" fica no canto esquerdo) */
.fm-chamada .fm-faixa-1 { bottom: -26px; }
.fm-chamada .fm-faixa-2 { bottom: -50px; }

/* ============================================================
   MENU DO TOPO AO ROLAR A TELA (classe "topo-rolado" posta pelo site.js)
   ============================================================ */
.topo-site { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.topo-site .logo-normal, .topo-site .logo-branca { transition: opacity .35s ease; }
.topo-site .logo-branca { opacity: 0; }
.topo-rolado { background: linear-gradient(160deg, #10213F 0%, #0A1730 100%) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.45) !important; }
.topo-rolado .logo-normal { opacity: 0; }
.topo-rolado .logo-branca { opacity: 1; }
/* Logo no formato "escudo" (LOGO_FORMATO em config.php): o escudo passa da borda de baixo do menu */
.logo-escudo-simbolo { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); transition: transform .35s ease, height .35s ease; }
.topo-rolado .logo-escudo-simbolo { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.topo-rolado .menu-link { color: #E2E8F0; }
.topo-rolado .menu-link:hover, .topo-rolado .menu-ativo { color: #D9A845; }
.topo-rolado .menu-botao { color: #fff; border-color: rgba(255,255,255,.25); }

/* Botão "Solicitar proposta": borda e onda que se expande para fora */
.botao-pulso { position: relative; border: 2px solid rgba(255,255,255,.65); }
.botao-pulso::before, .botao-pulso::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    animation: onda-botao 2.4s ease-out infinite; }
.botao-pulso::after { animation-delay: 1.2s; }
@keyframes onda-botao { 0% { box-shadow: 0 0 0 0 rgba(200,146,46,.55); } 100% { box-shadow: 0 0 0 16px rgba(200,146,46,0); } }
.topo-rolado .botao-pulso { border-color: rgba(255,255,255,.85); }
@media (prefers-reduced-motion: reduce) { .botao-pulso::before, .botao-pulso::after { animation: none; } }
/* Campo obrigatório que faltou preencher (conferência antes do envio) */
.campo-erro { border-color: #F87171 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, .18) !important; }
.campo-erro .opcao-servico { border-color: #F87171 !important; }
.campo-erro.anexo-pdf { background: #FEF2F2; }fieldset.campo-erro { box-shadow: none !important; }
/* O balão do atendimento some quando o rodapé aparece (para não cobrir links e o crédito) */
.atendimento-balao.visivel.perto-rodape { opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; }

/* Realce leve das fotos enviadas (mais nitidez aparente, cor e contraste), sem alterar os arquivos */
.foto-realce { filter: contrast(1.07) saturate(1.12) brightness(1.02); image-rendering: auto; }