/* ===========================================================
   DeclaIR — site institucional (derivado do protótipo Lovable)
   Cores e fontes vêm do tema MudBlazor (Components/Tema.cs).
   =========================================================== */
:root {
    --azul-escuro: #071D41;
    --marinho: #16213F;
    --texto-claro: #C5CEDF;
    --sky: #8DB8F0;
    --verde-suave: #E3F4E5;
    --sombra-suave: 0 1px 2px rgb(7 29 65 / 6%), 0 8px 24px -12px rgb(7 29 65 / 18%);
    --sombra-elevada: 0 30px 60px -20px rgb(4 14 36 / 55%);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1:focus { outline: none; }
:focus-visible { outline: 3px solid var(--mud-palette-tertiary); outline-offset: 2px; border-radius: 4px; }

.pular-conteudo {
    position: fixed; left: 1rem; top: -4rem; z-index: 2000; border-radius: 6px; padding: .5rem 1rem;
    background: var(--mud-palette-tertiary); color: var(--azul-escuro); font-weight: 600;
}
.pular-conteudo:focus { top: 1rem; }

.texto-suave { color: var(--mud-palette-text-secondary); }
.texto-claro { color: var(--texto-claro); }
.link { color: var(--mud-palette-primary); font-weight: 500; text-decoration: underline; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo-marca {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem;
    background: var(--mud-palette-primary); color: #fff;
}
.logo-marca .mud-icon-root { font-size: 1.35rem; stroke: currentColor; stroke-width: 1.2; }
.logo-texto { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--azul-escuro); }
.logo-texto span { color: var(--mud-palette-primary); }
.logo-escuro .logo-texto { color: #F4F7FC; }
.logo-escuro .logo-texto span { color: var(--sky); }

/* ---------- Cabeçalho ---------- */
.cabecalho.mud-appbar { background: rgb(7 29 65 / 95%); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(244 247 252 / 10%); }
.cabecalho.mud-appbar, .cabecalho .mud-toolbar { height: 64px; min-height: 64px; }
.cabecalho .mud-toolbar { padding: 0; }
/* Mantém logo e botão de fechar visíveis sobre o menu móvel (drawer temporário fica em appbar + 2) */
.cabecalho.mud-appbar { z-index: calc(var(--mud-zindex-appbar) + 3); }
.mud-main-content { padding-top: 64px; }
.menu { display: flex; gap: 1.5rem; font-size: .875rem; white-space: nowrap; }
.cabecalho-acoes { flex-shrink: 0; white-space: nowrap; }
.menu a { color: var(--texto-claro); transition: color .15s; }
.menu a:hover { color: #fff; }
.botao-entrar.mud-button-root { color: #F4F7FC; }
.botao-entrar.mud-button-root:hover { color: var(--sky); background: transparent; }
.botao-escuro.mud-button-root { color: #F4F7FC; border-color: rgb(244 247 252 / 30%); }
.botao-escuro.mud-button-root:hover { background: rgb(244 247 252 / 10%); }

.menu-movel.mud-drawer { background: var(--azul-escuro); color: #F4F7FC; padding: 72px 1rem 1rem; height: auto !important; }
/* Fechado, o MudBlazor só sobe o drawer pela altura do tema (250px); com altura automática o fim do menu ficava à mostra no topo */
.menu-movel.mud-drawer.mud-drawer--closed { top: -100vh; visibility: hidden; transition: top 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 225ms; }
.menu-movel li a { display: block; padding: .75rem 0; border-bottom: 1px solid rgb(244 247 252 / 8%); }

/* ---------- Seções ---------- */
.secao { padding: 5rem 0; }
.secao-cabecalho { max-width: 42rem; }
.secao-subtitulo.mud-typography { font-size: 1.125rem; color: var(--mud-palette-text-secondary); }
.sobretitulo { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-primary); }
.sobretitulo.amarelo { color: var(--mud-palette-tertiary); }
.fundo-branco { background: var(--mud-palette-surface); }
.cartao.mud-paper { border-color: var(--mud-palette-lines-default); box-shadow: var(--sombra-suave); }

.icone-quadrado {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem;
    background: #E4ECF8; color: var(--mud-palette-primary);
}

/* ---------- Hero ---------- */
.hero {
    color: #F4F7FC; padding: 4rem 0 5rem;
    background: radial-gradient(60rem 30rem at 85% -10%, rgb(19 81 180 / 55%), transparent 60%), var(--azul-escuro);
}
.hero-grade { display: grid; gap: 3rem; align-items: center; }
.hero-grade > *, .contato-grade > * { min-width: 0; }
.hero .destaque { color: var(--mud-palette-tertiary); }
.hero-texto.mud-typography { max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: var(--texto-claro); }
.selo-amarelo {
    display: inline-flex; border-radius: 99px; padding: .25rem .75rem; font-size: .75rem; font-weight: 600;
    color: var(--mud-palette-tertiary); border: 1px solid rgb(255 205 7 / 40%); background: rgb(255 205 7 / 10%);
}
@media (min-width: 960px) {
    .hero { padding: 6rem 0 5rem; }
    .hero-grade { grid-template-columns: 1fr 1.15fr; }
}

/* ---------- Painel ilustrativo ---------- */
.painel {
    overflow: hidden; border-radius: 12px; border: 1px solid rgb(244 247 252 / 15%);
    background: var(--mud-palette-background); box-shadow: var(--sombra-elevada); color: var(--mud-palette-text-primary);
}
.painel-lateral { display: none; width: 10rem; flex-shrink: 0; flex-direction: column; gap: .25rem; padding: .75rem; background: var(--marinho); font-size: .75rem; color: var(--texto-claro); }
.painel-logo { margin-bottom: .75rem; transform: scale(.9); transform-origin: left; }
.painel-item { display: flex; align-items: center; gap: .5rem; border-radius: 6px; padding: .375rem .5rem; }
.painel-item.ativo { background: rgb(244 247 252 / 10%); color: #F4F7FC; }
.painel-conteudo { min-width: 0; flex: 1; padding: .75rem; }
.painel-titulo { font-family: Fraunces, serif; font-size: .875rem; font-weight: 600; }
.painel-selo { border-radius: 99px; background: var(--verde-suave); color: var(--mud-palette-success); font-size: 10px; font-weight: 600; padding: .125rem .5rem; }
.painel-colunas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.painel-coluna { min-width: 0; border-radius: 8px; background: #EDF1F7; padding: .5rem; display: flex; flex-direction: column; gap: .375rem; }
.painel-coluna-topo { display: flex; justify-content: space-between; gap: .25rem; margin-bottom: .125rem; font-size: 10px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.painel-coluna-topo span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-card { border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); background: #fff; padding: .5rem; box-shadow: var(--sombra-suave); }
.painel-card .nome { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-card .perfil { font-size: 10px; color: var(--mud-palette-text-secondary); }
.painel-card .situacao { margin-top: .25rem; font-size: 10px; font-weight: 500; color: var(--mud-palette-primary); }
@media (min-width: 600px) { .painel-lateral { display: flex; } }
@media (min-width: 960px) { .painel-colunas { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Como funciona ---------- */
.passos { display: grid; gap: 1.5rem; }
.passos li { border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); padding: 1.5rem; }
.passo-numero { font-family: Fraunces, serif; font-size: 3rem; font-weight: 600; line-height: 1; color: var(--mud-palette-primary); }
@media (min-width: 960px) { .passos { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Listas ---------- */
.rotulo-lista { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); }
.rotulo-lista.verde { color: var(--mud-palette-success); }
.lista { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; font-size: .875rem; }
.lista .com-icone { display: flex; gap: .5rem; align-items: flex-start; }
.lista .com-icone .mud-icon-root { flex-shrink: 0; margin-top: 1px; }

/* ---------- Segurança ---------- */
.secao-escura { background: var(--marinho); color: #F4F7FC; }
.cartao-escuro { height: 100%; border-radius: 12px; border: 1px solid rgb(244 247 252 / 15%); background: rgb(244 247 252 / 5%); padding: 1.5rem; }

/* ---------- Planos ---------- */
.plano.mud-paper { position: relative; display: flex; flex-direction: column; height: 100%; }
.plano-destaque.mud-paper { border: 2px solid var(--mud-palette-primary); }
.plano-selo {
    position: absolute; top: -.75rem; left: 1.75rem; border-radius: 99px; padding: .25rem .75rem;
    background: var(--mud-palette-tertiary); color: var(--azul-escuro); font-size: .75rem; font-weight: 700;
}
@media (min-width: 1280px) { .plano-destaque.mud-paper { transform: translateY(-.75rem); } }

/* ---------- FAQ ---------- */
.faq { max-width: 48rem; margin: 0 auto; }
.faq .mud-expand-panel { box-shadow: none; }
.faq .mud-expand-panel-header .mud-expand-panel-text { font-weight: 600; }
.faq .mud-expand-panel .mud-expand-panel-icon { color: var(--mud-palette-primary); }

/* ---------- Contato ---------- */
.contato-grade { display: grid; gap: 2rem; align-items: start; }
.contato-lateral { border-radius: 12px; background: var(--azul-escuro); color: #F4F7FC; padding: 1.75rem; }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 1280px) { .contato-grade { grid-template-columns: 1.5fr 1fr; } }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-escuro); color: var(--texto-claro); font-size: .875rem; }
.rodape h2 { font-family: inherit; font-size: .875rem; font-weight: 600; color: #F4F7FC; margin: 0; }
.rodape-links { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.rodape-links.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; }
.rodape-links a:hover { color: #fff; }
.rodape-base { border-top: 1px solid rgb(244 247 252 / 10%); font-size: .75rem; }

/* ---------- Páginas de texto ---------- */
.pagina-legal { max-width: 48rem; margin: 0 auto; padding: 4rem 1rem; }
.pagina-mensagem { max-width: 40rem; margin: 0 auto; padding: 6rem 1rem; text-align: center; }

/* ---------- Erro do Blazor ---------- */
#blazor-error-ui {
    background: #FFF8D6; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 3000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui .reload { text-decoration: underline; margin-left: .5rem; }