/* ==========================================================
   HELP MED CWB
   Desenvolvido por Maikel Aurélio Zanchi
==========================================================*/

/*==========================================================
RESET
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#f7f9f8;

    color:#2b2b2b;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/*==========================================================
CORES
==========================================================*/

/*
    Os creditos de quem desenvolveu o site, no fim dos rodapes (2026-09-30).
    Aqui, e nao na folha de cada pagina, porque os tres rodapes sao
    diferentes mas a linha e a mesma -- a mesma armadilha que o CLAUDE.md
    registra para regra de estilo morando na folha de outra pagina.

    Cor escrita por extenso: os tres rodapes sao escuros (#170346), e
    #c9c9dd sobre ele passa de 10:1.
*/
.creditos{

    margin:10px 0 0;

    /*
        E a ULTIMA linha da pagina, e o botao flutuante do WhatsApp ocupa
        os 78px de baixo da tela (56 + 22 de margem), na direita. No
        celular a linha centralizada chega ate ele, e o "Maikel" ficava
        embaixo do botao -- sem ter como rolar mais para sair. O respiro
        existe so para isso, e sai onde a linha nao alcanca o botao.
    */
    padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));

    color:#c9c9dd;

    font-size:12px;
    line-height:1.6;

    text-align:center;
}

@media (min-width:620px){

    .creditos{
        padding-bottom:0;
    }
}

.creditos a{

    color:#ffffff;

    text-decoration:underline;
    text-underline-offset:2px;
}

:root{

    --verde:#060775;

    --verde-claro:#2f33a8;

    --verde-suave:#eaeaf7;

    --verde-escuro:#170346;

    --dourado:#D8A628;

    --cinza:#666666;

    --cinza-claro:#F5F7F8;

    --branco:#FFFFFF;

    --sombra:0 8px 25px rgba(0,0,0,.08);

    --radius:18px;

}

/*==========================================================
CONTAINER PADRÃO
==========================================================*/

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

/*=====================================================
    BOTÕES

    `.btn` vive aqui e é de VERDADE.

    Antes, `class="btn verde"` aparecia em três páginas e
    `.verde` não existia em folha nenhuma; `.btn` só era
    definido DENTRO de `.cta`. Fora dali o botão virava
    texto azul sublinhado no meio de um bloco verde
    escuro — o "texto sem CSS" que a operação relatou.
=====================================================*/

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:13px 26px;

    border:2px solid transparent;
    border-radius:999px;

    font-family:inherit;
    font-size:15px;
    font-weight:600;

    text-align:center;
    text-decoration:none;

    cursor:pointer;

    transition:.2s;

}

.btn-principal{

    background:var(--verde);

    color:#ffffff;

}

.btn-principal:hover{
    filter:brightness(1.3);
    transform:translateY(-1px);
}

.btn-contorno{

    background:#ffffff;

    border-color:var(--verde);

    color:var(--verde);

}

.btn-contorno:hover{
    background:var(--verde);
    color:#ffffff;
}


/*==========================================================
RODAPÉ
==========================================================*/

footer{

    background:#170346;

    color:white;

    padding-top:70px;

}

/*==========================================================
CONTAINER DO RODAPÉ
==========================================================*/

.footer-container{

    width:90%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    padding-bottom:50px;

}

/*==========================================================
LOGO DO RODAPÉ
==========================================================*/

.footer-logo img{

    width:225px;

    margin-bottom:20px;

}

.footer-logo h3{

    font-size:30px;

    margin-bottom:18px;

    color:white;

}

.footer-logo p{

    color:#d6d6d6;

    line-height:32px;

    font-size:17px;

}

/*==========================================================
COPYRIGHT
==========================================================*/

.copyright{

    text-align:center;

    padding:28px;

    color:#cfcfcf;

    font-size:15px;

    line-height:28px;

    background:#170346;

}

/*==========================================================
ANIMAÇÕES
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.hero-texto{

    animation:fadeUp .8s ease;

}

.hero-imagem{

    animation:fadeUp 1.2s ease;

}

.numero{

    animation:fadeUp .8s ease;

}

.card-institucional{

    animation:fadeUp .8s ease;

}

.valor-card{

    animation:fadeUp .8s ease;

}

.objetivo-card{

    animation:fadeUp .8s ease;

}

.proposito-card{

    animation:fadeUp .8s ease;

}

/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#eeeeee;

}

::-webkit-scrollbar-thumb{

    background:var(--verde);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--verde-escuro);

}

/*==========================================================
SELEÇÃO DE TEXTO
==========================================================*/

::selection{

    background:var(--verde);

    color:white;

}

/*==========================================================
/*==========================================================
TRANSIÇÕES E RESPONSIVO DO QUE É COMPARTILHADO

Daqui para baixo o arquivo é SÓ do que aparece em toda
página. As seções da home (hero, cards, propósito, missão,
valores, objetivos, chamada final) saíram em 2026-09-15
para `css/home.css`, junto com os ~350 linhas de media
query que só existiam para elas.

Saiu também o cabeçalho `header > .container` com
`position:fixed`: as duas páginas que ainda o usavam
(index e solicitar) passaram para o `.cabecalho-site`, que
é `sticky` e ocupa espaço no fluxo — o motivo do topo
cortado em toda página que usava o antigo.
==========================================================*/

button,
a{
    transition:.3s;
}

@media(max-width:992px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

    .footer-logo img{
        margin:0 auto;
    }


}

@media(max-width:768px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-logo h3{
        font-size:20px;
    }

    footer{
        font-size:15px;
    }

}



/* =========================================================
   VALIDAÇÃO DOS CAMPOS
========================================================= */

.mensagem-campo{
    min-height: 20px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
}

.mensagem-campo.erro{
    color: #b42318;
}

.campo-invalido{
    border-color: #b42318 !important;
    outline-color: #b42318;
}

/*=====================================================
    CABEÇALHO DO SITE — um só, para todas as páginas

    Vivia só no doar.css: qualquer página que usasse o
    mesmo markup sem carregar o doar.css (login.html,
    minha-conta.html) renderizava o logo de 1600px em um
    header position:fixed cobrindo a tela inteira
    (encontrado na revisão de 2026-09-03). O bloco mora
    aqui porque o cabeçalho é do SITE, não de uma página.

    Em 2026-09-15 ele passou a ser o ÚNICO. Havia dois:
    este e um `header > .container` com `position:fixed`
    e SEM compensação de altura no conteúdo — o topo de
    toda página que o usava vinha cortado, e no celular,
    onde o menu quebrava em duas linhas, o cabeçalho
    comia 210px antes de qualquer conteúdo. Como
    `sticky` ocupa espaço no fluxo, o corte deixa de ser
    possível por construção, em vez de depender de um
    padding que alguém precisa lembrar de acertar.

    ⚠️ `--verde` é o AZUL da marca (#060775). O nome
    sobrou de uma paleta anterior; renomear tocaria as
    cinco folhas que o usam, e o valor é o certo.

    A marca é o MEDZINHO. O logotipo escrito "HELP MED"
    era uma arte quadrada de 1600px reduzida no
    navegador; o mascote identifica mais rápido e o nome
    vai ao lado, em texto — que é pesquisável, escala com
    o zoom e não depende de imagem carregar.
=====================================================*/

.cabecalho-site{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.97);

    border-bottom:1px solid #e3e3e9;

    backdrop-filter:blur(8px);

    box-shadow:0 4px 18px rgba(0,0,0,.04);

}

.container-cabecalho{

    width:min(1180px, calc(100% - 32px));

    display:flex;
    align-items:center;

    gap:12px;

    margin:0 auto;

    padding:9px 0;

}

.logo-site{

    display:flex;
    align-items:center;

    gap:10px;

    margin-right:auto;

    text-decoration:none;

}

/*
  Só o PERSONAGEM entra no logo.

  `Mascote.jpeg` é a arte completa, 1536x1024, com a palavra
  "Medzinho" escrita embaixo. Reduzida a 42px ela vira um
  quadradinho ocupado onde nada se distingue — e a palavra
  repetiria, ilegível, o nome que já está escrito ao lado.

  Em vez de recortar o arquivo (mais um binário no repo para
  alguém manter em sincronia), a janela recorta: a imagem
  entra maior que a caixa e é deslocada até enquadrar o
  personagem. Os números saem da arte — o boneco ocupa
  x 420..1090 e y 60..730 dos 1536x1024.
*/
.marca-mascote{

    position:relative;

    flex:0 0 auto;

    width:42px;
    height:42px;

    overflow:hidden;

    background:#ffffff;

    border-radius:10px;

}

.logo-site img{

    position:absolute;

    left:-26px;
    top:-4px;

    width:96px;
    max-width:none;
    height:auto;

    display:block;

}

.nome-site{

    color:var(--verde-escuro, #170346);

    font-size:16px;
    font-weight:700;
    line-height:1.1;

    letter-spacing:-.2px;

}

/*
  O botão do menu só existe no celular. `display:none` no
  desktop em vez de escondê-lo com largura zero: assim ele
  sai também da ordem de foco do teclado.
*/
.abrir-menu{

    display:none;

    width:42px;
    height:42px;

    align-items:center;
    justify-content:center;

    background:transparent;

    border:1px solid #d9d9e2;
    border-radius:10px;

    cursor:pointer;

}

.abrir-menu .barras,
.abrir-menu .barras::before,
.abrir-menu .barras::after{

    display:block;

    width:18px;
    height:2px;

    background:var(--verde-escuro, #170346);

    border-radius:2px;

}

.abrir-menu .barras{
    position:relative;
}

.abrir-menu .barras::before,
.abrir-menu .barras::after{

    content:"";

    position:absolute;
    left:0;

}

.abrir-menu .barras::before{ top:-6px; }
.abrir-menu .barras::after{ top:6px; }

.abrir-menu[aria-expanded="true"] .barras{
    background:transparent;
}

.abrir-menu[aria-expanded="true"] .barras::before{
    top:0;
    transform:rotate(45deg);
}

.abrir-menu[aria-expanded="true"] .barras::after{
    top:0;
    transform:rotate(-45deg);
}

.navegacao-site{

    display:flex;
    align-items:center;

    gap:22px;

}

.navegacao-site a{

    position:relative;

    color:#333348;

    font-size:14px;
    font-weight:500;

    text-decoration:none;

    transition:.25s;

}

.navegacao-site a::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-7px;

    height:2px;

    background:var(--verde);

    transform:scaleX(0);

    transition:transform .25s ease;

}

.navegacao-site a:hover{
    color:var(--verde);
}

.navegacao-site a:hover::after{
    transform:scaleX(1);
}

/*
  A seção que está na tela fica marcada no menu. Sem isso,
  numa página só, a pessoa rola e perde a referência de
  onde está — que é o preço de trocar cinco páginas por
  cinco âncoras.
*/
.navegacao-site a.secao-atual{

    color:var(--verde);
    font-weight:600;

}

.navegacao-site a.secao-atual::after{
    transform:scaleX(1);
}

/*
  "Área do Usuário" é botão, não link de navegação: é a
  única coisa do cabeçalho que leva para fora do site
  público.
*/
.cabecalho-site .login{

    padding:9px 16px;

    background:var(--verde-escuro, #170346);

    border-radius:999px;

    color:#ffffff;

    font-size:13.5px;
    font-weight:600;

    white-space:nowrap;

    text-decoration:none;

    transition:.2s;

}

.cabecalho-site .login:hover{
    filter:brightness(1.25);
}

@media(max-width:860px){

    .abrir-menu{
        display:flex;
    }

    /*
      Painel vertical abaixo do cabeçalho. Não é overlay de
      tela cheia de propósito: o conteúdo continua visível
      atrás, e fechar é um toque em qualquer lugar.

      Fechado com `display:none` via CLASSE, e não com o
      atributo `hidden`: `.navegacao-site{display:flex}`
      venceria o `hidden` da folha do navegador, e no
      desktop o menu apareceria com um atributo dizendo que
      está escondido — ambíguo para leitor de tela. Quem
      conta o estado é o `aria-expanded` do botão.
    */
    .navegacao-site{

        display:none;

        position:absolute;

        left:0;
        right:0;
        top:100%;

        flex-direction:column;
        align-items:stretch;

        gap:0;

        padding:6px 16px 14px;

        background:#ffffff;

        border-bottom:1px solid #e3e3e9;

        box-shadow:0 14px 26px rgba(0,0,0,.10);

    }

    .cabecalho-site.menu-aberto .navegacao-site{
        display:flex;
    }

    .navegacao-site a{

        padding:13px 4px;

        border-bottom:1px solid #eeeef2;

        font-size:15px;

    }

    .navegacao-site a::after{
        display:none;
    }

    .navegacao-site a.secao-atual{
        color:var(--verde);
    }

    .cabecalho-site .login{

        margin-top:12px;

        border:none;

        text-align:center;

    }

}

/*=====================================================
    WHATSAPP FLUTUANTE + CONVITE DA HOME
=====================================================*/

.whatsapp-flutuante{

    position:fixed;

    right:22px;
    bottom:22px;

    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;

    background:#25d366;

    border-radius:50%;

    color:#ffffff;

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    transition:.2s;

}

.whatsapp-flutuante:hover,
.whatsapp-flutuante:focus{
    transform:scale(1.07);
}

/*=====================================================
    ATALHO DO PAINEL — só aparece para quem opera

    Vive no cabeçalho, ao lado de "Área do Usuário": é
    navegação de conta, e o lugar disso é junto do resto.

    Dourado com texto escuro, e não dourado com texto
    branco: o #D8A628 com branco dá 2,38:1, reprovado
    pela #21. Com o azul escuro da marca passa folgado,
    e fica distinto do botão de conta ao lado.
=====================================================*/

.atalho-painel{

    padding:9px 16px;

    background:var(--dourado);

    border-radius:999px;

    color:var(--verde-escuro);

    font-size:13.5px;
    font-weight:700;

    white-space:nowrap;
    text-decoration:none;

    transition:.3s;

}

/*
  No celular ele cai dentro do menu sanfona, junto do botão
  de conta — e ali é bloco, não pílula solta numa barra.
*/
@media(max-width:860px){

    .atalho-painel{

        margin-top:12px;

        text-align:center;

    }

}

.atalho-painel:hover,
.atalho-painel:focus{

    background:#c2921f;

    color:var(--verde-escuro);

    transform:translateY(-2px);

}

.convite-quem-somos{

    padding:34px 20px;

    background:#eeeef6;

    text-align:center;

}

.convite-quem-somos p{

    max-width:760px;

    margin:0 auto;

    font-size:17px;
    line-height:1.7;

}

.convite-quem-somos a{
    font-weight:700;
    color:#060775;
    white-space:nowrap;
}

/*=====================================================
    TOOLTIP (i) DE AJUDA POR CAMPO (#13)

    Sem JavaScript: foco/hover revelam. O botao entra na
    ordem de tabulacao e leitores de tela leem o texto
    pelo aria-label.
=====================================================*/

.dica-campo{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:17px;
    height:17px;

    margin-left:6px;

    background:#e8e8f3;

    border:1px solid #bcbcd7;
    border-radius:50%;

    font-size:11px;
    font-style:normal;
    font-weight:700;

    color:#060775;

    cursor:help;

}

.dica-campo::after{

    content:attr(data-dica);

    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);

    transform:translateX(-50%);

    width:max-content;
    max-width:260px;

    padding:8px 12px;

    background:#22303a;

    border-radius:8px;

    font-size:12px;
    font-weight:400;
    line-height:1.5;

    color:#ffffff;
    text-align:left;

    opacity:0;
    visibility:hidden;

    transition:opacity .15s;

    z-index:1300;

}

.dica-campo:hover::after,
.dica-campo:focus::after{
    opacity:1;
    visibility:visible;
}

/*=====================================================
    COMBOBOX (#15) — lista flutuante com filtro
=====================================================*/

.combobox{
    position:relative;
}

.combobox-lista{

    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 4px);

    z-index:1250;

    max-height:260px;
    overflow-y:auto;

    margin:0;
    padding:6px;

    list-style:none;

    background:#ffffff;

    border:1px solid #cfcfd9;
    border-radius:10px;

    box-shadow:0 10px 26px rgba(0,0,0,.12);

}

.combobox-lista li{

    padding:9px 12px;

    border-radius:7px;

    font-size:14px;

    cursor:pointer;

}

.combobox-lista li:hover,
.combobox-lista li.ativa{
    background:#e8e8f3;
    color:#060775;
}

/*=====================================================
    FOCO VISÍVEL (#21) — teclado nunca navega às cegas
=====================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{

    outline:3px solid #060775;
    outline-offset:2px;

}


/*=====================================================
    RÓTULO SÓ PARA LEITOR DE TELA

    Mesmo recurso que o painel ja usava: o campo tem
    nome acessivel de verdade, sem mudar o desenho.
    Placeholder NAO e rotulo — some ao digitar.
=====================================================*/

.rotulo-oculto{

    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;

}

/*=====================================================
    "USAR O ENDEREÇO DO MEU CADASTRO" (#29)

    Só aparece para quem entrou E guardou um endereço —
    o JS revela; nasce hidden.
=====================================================*/

.usar-meu-endereco{
    margin:0 0 14px;
}

.usar-meu-endereco button{

    padding:9px 15px;

    background:#eeeef6;

    border:1px solid #bcbcd8;
    border-radius:8px;

    color:#060775;

    font-family:inherit;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

}

.usar-meu-endereco button:hover{
    background:#e0e0ef;
}

/*=====================================================
    MOVIMENTO REDUZIDO

    Quem marca "reduzir movimento" no sistema operacional
    costuma faze-lo por enjoo, vertigem ou enxaqueca
    disparada por animacao. Aqui as transicoes nao somem
    (o retorno visual continua), so deixam de se MOVER.
=====================================================*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}