/* Rodape do Lista Virtual.
 *
 * NASCEU COMO COPIA LITERAL do templatemo-eduwell-style.css, e deixou de ser
 * uma em 28/08, quando o redesenho chegou ao rodape. As mudancas estao
 * marcadas com DESENHO NOVO e foram lidas do mockup, nao inventadas: sao
 * tipografia, largura de conteudo e respiro lateral.
 *
 * O index.php deixou de carregar o templatemo inteiro: das cerca de 3.000
 * linhas daquele arquivo, a home renderizada usava DEZ classes, e nove sao
 * estas do rodape. Carregar tudo para usar dez foi a razao de o menu novo
 * precisar de uma pilha de !important para vencer.
 *
 * EXTRAIDO PELO CSSOM DO CHROMIUM, e nao por um parser meu. Duas tentativas
 * anteriores falharam, e vale registrar como:
 *
 *   1. Um parser a mao que varria chaves nao pulava comentario. Uma chave
 *      fechada dentro de um comentario estourava a pilha de media query, e a
 *      regra de duas colunas do breakpoint de 900px saiu para fora dele: o
 *      rodape ficou com duas colunas em 1440px.
 *
 *   2. Ao consertar o cabecalho deste arquivo, cortei do inicio ate o
 *      primeiro .ft-main-footer -- e as nove regras .trust-* vinham antes
 *      dele. A faixa de confianca perdeu o flex e empilhou.
 *
 * A conferencia que pega os dois casos compara SELETOR MAIS DECLARACOES MAIS
 * CONDICAO DE MEDIA. Comparar so o seletor nao pega nenhum dos dois, porque o
 * mesmo seletor aparece na regra base e no breakpoint.
 *
 * O rodape esta FORA da rodada de redesenho, por decisao de 27/08. Quando ele
 * for redesenhado, este arquivo morre inteiro.
 *
 * As outras 26 paginas continuam com o templatemo: nada muda para elas.
 */

/* DESENHO NOVO: mesmo respiro lateral do rodape, e a mesma divisao de fontes.
   `overflow: hidden` porque no celular os itens viram carrossel horizontal. */
.trust-strip { padding: 40px 32px 22px; overflow: hidden; }
.trust-strip,
.trust-strip * { font-family: var(--lv-font-text); }
.trust-carousel { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; width: 100%; }
.trust-dots { display: none; }
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.trust-text { text-align: left; }
.trust-text strong { display: block; font-size: 14px; font-weight: 800; color: white; font-family: var(--lv-font-display); }
.trust-text span { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.trust-sep { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.22); }
/* ================================================================
   OS QUATRO `!important` DESTA FOLHA, E O QUE CADA UM VENCE

   Tres vencem o mesmo concorrente; o quarto e outro caso, e esta anotado no
   lugar dele.

   `assets/includes/landing_footer.php` emite um `<style>` de dentro do
   `<body>` com as MESMAS classes (`.trust-strip`, `.trust-item`,
   `.ft-main-footer`). Ele vem depois desta folha na ordem do documento, entao
   empata em especificidade e vence por posicao.

   O certo, pela regra do `CLAUDE.md`, seria nao carregar a folha concorrente --
   e nao vencer no `!important`. Nao foi feito aqui de proposito: aquele
   `<style>` serve outras vinte paginas que nao carregam esta folha, entao
   arranca-lo e mudanca de escopo proprio, com conferencia visual nas vinte.
   Registrado em `TAREFAS.md`.

   Ate la, cada `!important` abaixo diz o que vence.
   ================================================================ */

/* DESENHO NOVO: o corpo do rodape e Open Sans e so o titulo e Nunito. O
   templatemo punha Nunito em tudo, e o rodape saia com peso de titulo da
   primeira linha a ultima. Respiro lateral de 32px, e nao 60.

   `text-align: left !important` vence o `text-align:center` que o `<style>` do
   `landing_footer.php` poe no mesmo seletor. */
.ft-main-footer { background: rgb(26, 15, 46); padding: 56px 32px 0px; font-family: var(--lv-font-text); color: white; text-align: left !important; }
.ft-main-footer h3,
.ft-main-footer h4,
.ft-main-footer .stat-chip b,
.ft-main-footer .footer-logo,
.ft-main-footer strong { font-family: var(--lv-font-display); }
/* DESENHO NOVO: o conteudo do rodape alinha com o das secoes, 1280px centrados.
   Sem isto ele se espalha ate a borda da tela e nao bate com nada acima. O
   `!important` vence o `.container-fluid` do Bootstrap, que e `width:100%` e
   vem depois na ordem de carga -- a folha concorrente aqui nao da para nao
   carregar, porque o Bootstrap serve a pagina inteira. */
.ft-main-footer > .container-fluid,
.trust-strip > .container-fluid { margin-left: auto; margin-right: auto; max-width: 1280px !important; }
.ft-main-footer .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ft-main-footer .footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }
.ft-main-footer .logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, rgb(123, 47, 247), rgb(233, 30, 140)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; font-weight: 900; flex-shrink: 0; }
.ft-main-footer .logo-name { font-size: 20px; font-weight: 800; color: white; }
.ft-main-footer .footer-desc { font-size: 14px; color: rgba(255, 255, 255, 0.48); line-height: 1.75; margin-bottom: 22px; max-width: 280px; }
.ft-main-footer .footer-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ft-main-footer .stat-chip { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 7px 13px; font-size: 13px; color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.ft-main-footer .stat-chip b { background: linear-gradient(90deg, rgb(192, 132, 252), rgb(244, 114, 182)) text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 14px; }
.ft-main-footer .trust-seals { display: flex; flex-wrap: wrap; gap: 7px; }
.ft-main-footer .seal { display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 7px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); transition: 0.2s; }
.ft-main-footer .seal:hover { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); }
.ft-main-footer .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ft-main-footer .dot-green { background: rgb(74, 222, 128); box-shadow: rgba(74, 222, 128, 0.6) 0px 0px 5px; }
.ft-main-footer .dot-blue { background: rgb(96, 165, 250); box-shadow: rgba(96, 165, 250, 0.6) 0px 0px 5px; }
.ft-main-footer .dot-pink { background: rgb(244, 114, 182); box-shadow: rgba(244, 114, 182, 0.6) 0px 0px 5px; }
.ft-main-footer .footer-col h3 { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 12px; position: relative; margin-top: 0px; text-align: left; }
.ft-main-footer .footer-col h3::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 28px; height: 2px; background: linear-gradient(90deg, rgb(123, 47, 247), rgb(233, 30, 140)); border-radius: 2px; }
.ft-main-footer .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0px; padding: 0px; align-items: flex-start; }
.ft-main-footer .footer-col ul li { margin-bottom: 0px; width: 100%; text-align: left; }
.ft-main-footer .footer-col ul a { font-size: 14px; color: rgba(255, 255, 255, 0.48); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; text-align: left; }
.ft-main-footer .footer-col ul a:hover { color: rgba(255, 255, 255, 0.9); }
.ft-main-footer .arrow { font-size: 10px; opacity: 0; transform: translateX(-4px); transition: 0.2s; color: rgb(168, 85, 247); }
.ft-main-footer .footer-col ul a:hover .arrow { opacity: 1; transform: translateX(0px); }
.ft-main-footer .new-badge { background: linear-gradient(135deg, rgb(123, 47, 247), rgb(233, 30, 140)); color: white; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; line-height: 1.6; }
.ft-main-footer .contact-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft-main-footer .contact-icon { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.07); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ft-main-footer .contact-label { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 2px; }
.ft-main-footer .contact-val { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 500; text-decoration: none; transition: color 0.2s; }
.ft-main-footer a.contact-val:hover { color: white; }
.ft-main-footer .security-bar { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 18px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ft-main-footer .sec-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.35); font-weight: 600; }
.ft-main-footer .sec-item span { font-size: 14px; opacity: 0.6; }
.ft-main-footer .footer-bottom { padding: 18px 0px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ft-main-footer .bottom-left p { font-size: 12px; color: rgba(255, 255, 255, 0.28); line-height: 1.7; margin: 0px; }
.ft-main-footer .bottom-left p strong { color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.ft-main-footer .bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-main-footer .bottom-links a { font-size: 12px; color: rgba(255, 255, 255, 0.28); text-decoration: none; transition: color 0.2s; }
.ft-main-footer .bottom-links a:hover { color: rgba(255, 255, 255, 0.65); }
.ft-main-footer .socials { display: flex; gap: 8px; }
.ft-main-footer .social-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; transition: 0.2s; cursor: pointer; color: white; }
.ft-main-footer .social-btn:hover { background: linear-gradient(135deg, rgb(123, 47, 247), rgb(233, 30, 140)); border-color: transparent; transform: translateY(-2px); box-shadow: rgba(123, 47, 247, 0.4) 0px 4px 14px; }
@media (max-width: 900px) {
  .ft-main-footer { padding: 40px 28px 0px; }
}
@media (max-width: 900px) {
  .ft-main-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .ft-main-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .trust-strip { padding: 18px 28px; }
}
@media (max-width: 900px) {
  .trust-carousel { gap: 20px; }
}
@media (max-width: 900px) {
  .trust-sep { display: none; }
}
@media (max-width: 768px) {
  .trust-strip { padding: 40px 0px 16px; }
}
@media (max-width: 768px) {
  .trust-carousel { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; justify-content: flex-start; padding: 10px 28px; gap: 16px; }
}
@media (max-width: 768px) {
  .trust-carousel::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) {
  .trust-item { flex: 0 0 160px; width: 160px; scroll-snap-align: center; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); border-radius: 14px; padding: 20px 14px; flex-direction: column; text-align: center; gap: 12px; }
}
@media (max-width: 768px) {
  /* Vence o `padding` que o `<style>` do `landing_footer.php` da a
     `.trust-item-clickable`, que e mais especifico que a regra de `.trust-item`
     logo acima e por isso a atropelava so nesta largura. */
  .trust-item.trust-item-clickable { padding: 20px 14px !important; }
}
@media (max-width: 768px) {
  .trust-text { text-align: center; }
}
@media (max-width: 768px) {
  .trust-text strong { color: rgb(26, 15, 46); }
}
@media (max-width: 768px) {
  .trust-text span { color: rgb(26, 15, 46); }
}
@media (max-width: 768px) {
  .trust-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
}
@media (max-width: 768px) {
  .trust-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.4); transition: 0.3s; }
}
@media (max-width: 768px) {
  .trust-dot.active { width: 24px; background: rgb(255, 255, 255); }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-brand { text-align: center; display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-desc { text-align: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-stats { justify-content: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .trust-seals { justify-content: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:not(:last-child) h3 { text-align: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:not(:last-child) h3::after { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:not(:last-child) ul { align-items: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:not(:last-child) ul li, .ft-main-footer .footer-col:not(:last-child) ul a { text-align: center; justify-content: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:last-child { display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:last-child h3 { text-align: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-col:last-child h3::after { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .ft-main-footer .contact-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 24px; }
}
@media (max-width: 768px) {
  .ft-main-footer .security-bar { justify-content: center; flex-direction: column; gap: 14px; }
}
@media (max-width: 768px) {
  .ft-main-footer .sec-item { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .bottom-left { text-align: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .bottom-links { justify-content: center; }
}
@media (max-width: 768px) {
  .ft-main-footer .socials { justify-content: center; }
}
@media (max-width: 560px) {
  .ft-main-footer .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust-text strong { font-size: 15px; }
}
@media (max-width: 560px) {
  .trust-text span { font-size: 13px; }
}
@media (max-width: 560px) {
  .trust-item { gap: 14px; }
}
@media (max-width: 560px) {
  .trust-icon { font-size: 24px; width: 44px; height: 44px; margin: 0px auto; }
}

/* DESENHO NOVO: piso de 12px no celular. Varios textos do rodape sao 10 ou 11px
   por serem rotulo; em tela pequena saem do alcance de quem le sem oculos, e o
   rodape e onde moram telefone, e-mail e politica de privacidade. */
@media (max-width: 767px) {
  .ft-main-footer .contact-label,
  .ft-main-footer .seal,
  .ft-main-footer .sec-item,
  .ft-main-footer .footer-col h3,
  .ft-main-footer .footer-bottom p,
  /* Piso de 12px no celular. Vence os tamanhos que o `<style>` do
     `landing_footer.php` fixa nestes mesmos seletores -- alguns em 10px, abaixo
     do minimo legivel que esta folha adota. */
  .ft-main-footer .footer-bottom strong { font-size: 12px !important; }
}
