/*=========================================================
    HELP MED CWB — a página única

    TUDO CENTRALIZADO, pouco texto, uma ação por seção.

    A home anterior era lida como documento: título à
    esquerda, parágrafo largo, listas de 5 e 10 itens, e o
    botão no fim de tudo. Quem chega pelo WhatsApp não lê um
    documento — decide se doa ou se pede. Agora cada seção
    tem uma pergunta, três cartões curtos e um botão.

    MOBILE FIRST: a base é o celular e as media queries são
    `min-width`, só ACRESCENTANDO colunas e espaço. Nenhuma
    desfaz a anterior.

    As cores vêm do :root do style.css. ⚠️ `--verde` é o AZUL
    da marca (#060775) — o nome sobrou de uma paleta anterior.
=========================================================*/

/*=====================================================
    ÂNCORAS

    O cabeçalho é `sticky`: sem isto, clicar em "Doar"
    levaria o título da seção para baixo dele.
=====================================================*/

[id]{
    scroll-margin-top:70px;
}


/*=====================================================
    O EIXO CENTRAL

    Uma regra só, nas seções inteiras, em vez de
    `text-align:center` repetido em cada peça.
=====================================================*/

.inicio,
.secao{
    text-align:center;
}

/*
  Coluna de leitura. Texto centralizado que atravessa a tela
  inteira é cansativo: o olho perde o começo da linha
  seguinte. Nenhum bloco de texto passa de ~58 caracteres.
*/
.inicio .container > p,
.secao .container > p{
    max-width:58ch;
    margin-left:auto;
    margin-right:auto;
}

.secao{
    padding:38px 0;
}

.secao-alternada{
    background:var(--cinza-claro);
}


/*=====================================================
    INÍCIO
=====================================================*/

.inicio{

    padding:22px 0 34px;

    background:linear-gradient(180deg, var(--verde-suave), #ffffff 72%);

}

/*
  A arte é 1600x771, com muito branco nas laterais. O
  recorte quadrado (#149) fica com o miolo, que é onde está
  o logotipo — sem esticar o arquivo.
*/
.inicio-marca{

    width:116px;
    aspect-ratio:1;
    height:auto;

    margin:0 auto 14px;

    object-fit:cover;
    object-position:center;

    border-radius:22px;

    box-shadow:0 12px 34px rgba(6,7,117,.10);

}

/*
  Selo do topo: diz de onde a ONG é e há quanto tempo, antes
  de pedir qualquer coisa. É a credencial que cabe em três
  palavras.
*/
.selo{

    display:inline-block;

    margin-bottom:12px;
    padding:6px 15px;

    background:#ffffff;

    border:1px solid #dcdce6;
    border-radius:999px;

    color:#5c6b76;

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

}

.inicio h1{

    max-width:16ch;

    margin:0 auto 14px;

    color:var(--verde-escuro);

    font-size:31px;
    font-weight:700;
    line-height:1.18;

    letter-spacing:-.6px;

}

.linha-apoio{

    margin-bottom:22px;

    color:var(--cinza);

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

}

/*
  Duas ações, nunca três. A página inteira existe para levar
  a uma destas.
*/
.acoes{

    display:grid;
    gap:10px;

    max-width:330px;

    margin:0 auto;

}


/*=====================================================
    TÍTULO DE SEÇÃO

    Pergunta grande, resposta curta em maiúsculas por baixo.
=====================================================*/

.titulo-centro{
    margin-bottom:20px;
}

.titulo-centro h2{

    margin-bottom:8px;

    color:var(--verde-escuro);

    font-size:26px;
    font-weight:700;
    line-height:1.25;

}

.subtitulo{

    /* #D8A628 em texto dá 2,2:1 — reprovado pela #21. Este
       tom mantém o dourado e passa em 5,06:1. */
    color:#8f6800;

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

    letter-spacing:1.4px;
    text-transform:uppercase;

}

.texto-centro{

    margin-bottom:20px;

    color:var(--cinza);

    font-size:15.5px;
    line-height:1.65;

}


/*=====================================================
    CARTÕES — três, curtos, centralizados
=====================================================*/

.cartoes{

    display:grid;
    gap:10px;

    margin:0 0 20px;
    padding:0;

    list-style:none;

}

.cartoes li{

    padding:16px 16px;

    background:#ffffff;

    border:1px solid #e3e3e9;
    border-radius:var(--radius);

    transition:.2s;

}

.cartoes li:hover{
    border-color:var(--verde);
    transform:translateY(-2px);
}

.icone{

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

    width:40px;
    height:40px;

    margin-bottom:9px;

    background:var(--verde-suave);

    border-radius:14px;

    color:var(--verde);

}

.cartoes h3{

    margin-bottom:5px;

    color:var(--verde-escuro);

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

}

.cartoes p{

    color:var(--cinza);

    font-size:14.5px;
    line-height:1.55;

}


/*=====================================================
    PASSOS — numerados pelo CSS

    O número é decoração: quem usa leitor de tela já ouve
    "item 2 de 3" do próprio <ol>.
=====================================================*/

.passos{

    display:grid;
    gap:10px;

    margin:0 0 20px;
    padding:0;

    counter-reset:passo;

    list-style:none;

}

.passos li{

    padding:16px 16px;

    background:#ffffff;

    border:1px solid #e3e3e9;
    border-radius:var(--radius);

}

.passos li::before{

    counter-increment:passo;
    content:counter(passo);

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

    width:34px;
    height:34px;

    margin:0 auto 9px;

    background:var(--verde);

    border-radius:50%;

    color:#ffffff;

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

}

.passos h3{

    margin-bottom:5px;

    color:var(--verde-escuro);

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

}

.passos p{

    color:var(--cinza);

    font-size:14.5px;
    line-height:1.55;

}


/*=====================================================
    NOTA — a ressalva que não merece um parágrafo
=====================================================*/

.nota{

    margin-bottom:20px;
    padding:11px 16px;

    background:var(--verde-suave);

    border-radius:14px;

    color:#333348;

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

}

.nota.aviso{
    margin-bottom:0;
    background:#fdf3e7;
    color:#5d4412;
}


/*=====================================================
    O BOTÃO DA SEÇÃO

    No celular ocupa a linha: é o alvo de toque mais
    importante da tela.
=====================================================*/

.btn-grande{

    display:flex;
    width:100%;

    max-width:330px;

    margin:0 auto;

    font-size:16px;

}


/*=====================================================
    CONTATO
=====================================================*/

.canais{

    display:grid;
    gap:10px;

    margin-bottom:18px;

}

.canal{

    display:grid;
    gap:4px;

    padding:16px 16px;

    background:#ffffff;

    border:1px solid #e3e3e9;
    border-radius:var(--radius);

    text-decoration:none;

    transition:.2s;

}

.canal:hover{
    border-color:var(--verde);
    transform:translateY(-2px);
}

.canal-rotulo{

    color:#8f6800;

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

    letter-spacing:1.2px;
    text-transform:uppercase;

}

.canal strong{

    color:var(--verde-escuro);

    font-size:16.5px;

    /* O e-mail é longo e não tem espaço onde quebrar. Sem
       isto ele estoura o cartão no celular. */
    overflow-wrap:anywhere;

}


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

    Compacto de proposito. O anterior tinha quatro colunas
    com dezesseis links e media 1.207px no celular -- um
    QUARTO da pagina inteira -- repetindo um menu que e fixo
    no topo e esta sempre a um toque. Ficaram so os destinos
    que o menu nao tem (a conta e a politica de privacidade,
    esta ultima exigida pela #52).
=====================================================*/

.rodape{

    padding:30px 0 26px;

    background:#170346;

    color:#d6d6d6;

    text-align:center;

}

.rodape-marca{

    width:90px;
    aspect-ratio:1;
    height:90px;

    margin:0 auto 12px;

    object-fit:cover;
    object-position:center;

    border-radius:12px;

}

.rodape-frase{

    max-width:34ch;

    margin:0 auto 16px;

    font-size:13.5px;
    line-height:1.55;

}

.rodape-links{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:8px 22px;

    margin-bottom:16px;

}

.rodape-links a{

    color:#ffffff;

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

    text-decoration:none;

}

.rodape-links a:hover{
    text-decoration:underline;
}

.rodape-local{

    margin-bottom:10px;

    font-size:13px;

}

.rodape-copy{

    color:#9f9fb3;

    font-size:12px;

}


/*=====================================================
    TELAS MAIORES — daqui para baixo só ACRESCENTA
=====================================================*/

@media(min-width:620px){

    .inicio{
        padding:44px 0 56px;
    }

    .inicio-marca{
        width:170px;
        margin-bottom:20px;
    }

    /*
      O respiro do desenho de referência volta AQUI, onde
      ele custa barato. No celular, o mesmo espaço era um
      quarto de tela por seção.
    */
    .secao{
        padding:60px 0;
    }

    .titulo-centro{
        margin-bottom:30px;
    }

    .cartoes li,
    .passos li,
    .canal{
        padding:22px 18px;
    }

    .inicio h1{
        font-size:40px;
    }

    .linha-apoio{
        font-size:17px;
    }

    /* Lado a lado assim que couberem sem apertar. */
    .acoes{
        grid-template-columns:repeat(2, max-content);
        justify-content:center;
        max-width:none;
    }

    .titulo-centro h2{
        font-size:31px;
    }

    .canais{
        grid-template-columns:1fr 1fr;
    }

    .btn-grande{
        display:inline-flex;
        width:auto;
    }

}

@media(min-width:900px){

    .rodape{
        padding:46px 0 38px;
    }

    .inicio{
        padding:64px 0 76px;
    }

    .inicio-marca{
        width:200px;
    }

    .inicio h1{
        max-width:20ch;
        font-size:46px;
    }

    .secao{
        padding:84px 0;
    }

    .titulo-centro{
        margin-bottom:38px;
    }

    .titulo-centro h2{
        font-size:35px;
    }

    .cartoes,
    .passos{
        grid-template-columns:repeat(3, 1fr);
        gap:18px;
    }

}


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

    Quem pediu menos animação no sistema operacional não
    deve receber deslocamento nenhum ao passar o mouse.
=====================================================*/

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

    .cartoes li,
    .canal{
        transition:none;
    }

    .cartoes li:hover,
    .canal:hover{
        transform:none;
    }

}