/* Cantheios — estilos próprios do site (o resto vem do Tailwind) */
/* Identidade: marinho #13306B (escuro #0A1A3D, médio #1B3F86) + amarelo #F5B800 */

html { background: #071331; }
body { font-family: Inter, sans-serif; color: #334155; background: #fff; }
h1, h2, h3, h4, .titulo { font-family: Montserrat, sans-serif; }
:focus-visible { outline: 2px solid #F5B800; outline-offset: 3px; border-radius: 6px; }
details > summary::-webkit-details-marker { display: none; }

.asas { background-image: radial-gradient(circle at 78% 40%, rgba(245,184,0,.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(27,63,134,.9), transparent 50%), linear-gradient(135deg, #0A1A3D 0%, #13306B 60%, #0A1A3D 100%); }
.faixa-ouro { background: linear-gradient(90deg, #F5B800, #FFD54A 50%, #F5B800); }
/* Véu marinho por cima do vídeo do banner: escuro à esquerda (texto legível), mais aberto à direita (logo em movimento visível) */
.veu { background: linear-gradient(90deg, rgba(10,26,61,.94) 0%, rgba(10,26,61,.78) 42%, rgba(19,48,107,.35) 75%, rgba(10,26,61,.55) 100%); }
@media (max-width: 1023px) { .veu { background: linear-gradient(180deg, rgba(10,26,61,.55) 0%, rgba(10,26,61,.85) 55%, rgba(10,26,61,.95) 100%); } }

.cartao { transition: transform .25s, box-shadow .25s, border-color .25s; }
.cartao:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(19,48,107,.35); border-color: rgba(245,184,0,.6); }
.pilula input:checked + span { background: #13306B; border-color: #13306B; color: #fff; }
.pilula input:focus-visible + span { outline: 2px solid #F5B800; outline-offset: 2px; }

/* Submenu de Serviços (computador): aparece ao passar o mouse ou ao focar pelo teclado */
.submenu { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 40; }
.submenu-grupo:hover .submenu, .submenu-grupo:focus-within .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.submenu-grupo:hover .submenu-seta, .submenu-grupo:focus-within .submenu-seta { transform: rotate(180deg); }

/* Menu do celular */
.menu-celular { transition: opacity .2s ease, transform .2s ease; }
.menu-celular[hidden] { display: block; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }

/* Atendente no WhatsApp (mesmo modelo da Insolus, do Cepol e da MCA): flutua, anel pulsa, balão de boas-vindas */
.atendimento-botao { animation: atendimento-flutuar 3.2s ease-in-out infinite; }
.atendimento-botao:hover { animation-play-state: paused; }
.atendimento-botao img { transition: transform .2s ease; }
.atendimento-botao:hover img { transform: scale(1.06); }
.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; }
.atendimento-balao.visivel.perto-rodape { opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; }
@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) {
    .atendimento-botao, .atendimento-anel { animation: none; }
    .atendimento-balao, .menu-celular, .cartao, .submenu { transition: none; }
}

/* Timbre: a águia da logo como marca d'água nos banners azuis (como papel timbrado).
   Grande, bem apagada, girada e cortada na borda; fica atrás do conteúdo (isolation + z-index -1).
   .timbre-esq coloca à esquerda; .sem-timbre desliga (ex.: blocos pequenos). */
.asas { position: relative; isolation: isolate; }
.asas::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 50%; right: -6%; width: min(620px, 70%); aspect-ratio: 900 / 862;
    background: url('../img/timbre-cantheios.png') center / contain no-repeat;
    opacity: .07; transform: translateY(-50%) rotate(-10deg);
}
/* Segunda águia, menor e ainda mais apagada, no canto oposto (dá profundidade ao fundo) */
.asas::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    bottom: -18%; left: -5%; width: min(260px, 32%); aspect-ratio: 900 / 862;
    background: url('../img/timbre-cantheios.png') center / contain no-repeat;
    opacity: .035; transform: rotate(14deg) scaleX(-1);
}
.asas.timbre-esq::before { right: auto; left: -6%; transform: translateY(-50%) rotate(10deg); }
.asas.timbre-esq::after { left: auto; right: -5%; }
.asas.sem-timbre::before, .asas.sem-timbre::after { display: none; }
@media (max-width: 639px) { .asas::before { width: 85%; right: -25%; opacity: .06; } .asas::after { display: none; } }

/* Águia viva (banner principal das páginas internas): mesmo lugar do timbre, um pouco mais visível para dar para ver o movimento */
.aguia-viva {
    position: absolute; z-index: -1; pointer-events: none;
    top: 50%; right: -6%; width: min(620px, 70%); height: auto;
    opacity: .14; transform: translateY(-50%) rotate(-10deg);
}
/* Olho: pisca rápido, às vezes duas vezes seguidas */
.aguia-palpebra { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: aguia-pisca 5s infinite; }
@keyframes aguia-pisca {
    0%, 44%, 52%, 58%, 64%, 100% { transform: scaleY(0); }
    47%, 61% { transform: scaleY(1); }
}
/* Bico: a parte de baixo abre e fecha, girando no canto da boca */
.aguia-bico { transform-origin: 412px 266px; animation: aguia-bico 6s ease-in-out infinite; }
@keyframes aguia-bico {
    0%, 60%, 100% { transform: rotate(0); }
    66%, 72% { transform: rotate(-16deg); }
    69% { transform: rotate(-9deg); }
    78% { transform: rotate(0); }
}
@media (max-width: 639px) { .aguia-viva { width: 85%; right: -25%; opacity: .12; } }
/* Estrela: pulsa e acende em dourado; faíscas brancas giram e somem nas pontas */
.aguia-estrela { transform-origin: 449px 410px; animation: aguia-estrela 4s ease-in-out infinite; }
@keyframes aguia-estrela {
    0%, 100% { transform: scale(1); filter: none; }
    50% { transform: scale(1.08); filter: brightness(1.6) drop-shadow(0 0 18px #ffce08); }
}
.aguia-faisca { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: aguia-faisca 4s ease-in-out infinite; }
.aguia-faisca.faisca-2 { animation-delay: 1.3s; }
.aguia-faisca.faisca-3 { animation-delay: 2.6s; }
@keyframes aguia-faisca {
    0%, 38%, 62%, 100% { transform: scale(0) rotate(0); }
    50% { transform: scale(1.4) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .aguia-palpebra, .aguia-bico, .aguia-estrela, .aguia-faisca { animation: none; } }