/* =====================================================================
   CORES DO SITE — MAIS FIOS REGENERA

   Este é o ÚNICO arquivo que você precisa abrir para mudar as cores.
   Troque o código depois dos dois-pontos, salve, envie para o servidor
   e recarregue a página. Nada mais precisa ser alterado.

   Um código de cor é sempre # seguido de 6 caracteres: #45B09E
   Para descobrir o código de uma cor: htmlcolorcodes.com

   O site tem duas áreas, e cada uma tem o texto dela:

     A) O FUNDO COLORIDO — topo do site, faixa dos números e rodapé
     B) A FOLHA CLARA    — o retângulo que segura o meio da página

   É por isso que existem dois tipos de "cor de texto" aqui embaixo.
   Cada um vive numa dessas áreas e não interfere no outro.
   ===================================================================== */

:root{

  /* ===================================================================
     A) O FUNDO COLORIDO
     =================================================================== */

  /* A cor que aparece atrás de tudo. Um véu bem claro: é ele que dá a
     leveza da página. A cor forte da clínica entra só na faixa de
     destaque, logo abaixo. */
  --cor-fundo: #F2F7F6;

  /* O texto que fica EM CIMA dessa cor. Se o fundo for claro, deixe
     escuro. Se trocar por uma cor escura, use #FFFFFF aqui. */
  --cor-texto-no-fundo: #1D2224;


  /* ===================================================================
     A2) A FAIXA DE DESTAQUE
     Uma única faixa cheia na cor da clínica, no meio da página. É ela
     que dá a presença da marca sem pesar o site inteiro.
     =================================================================== */

  --cor-destaque: #45B09E;
  --cor-texto-no-destaque: #1D2224;


  /* ===================================================================
     B) A FOLHA CLARA
     =================================================================== */

  /* O retângulo que segura o conteúdo. Deixe branco ou quase branco. */
  --cor-folha: #FFFFFF;

  /* Títulos e textos dentro da folha. */
  --cor-texto: #1D2224;

  /* Parágrafos de apoio e legendas dentro da folha. Um cinza escuro. */
  --cor-texto-2: #5E696E;


  /* ===================================================================
     C) DETALHES
     =================================================================== */

  /* Painéis suaves: a seção do Método e a etiqueta "Depois" nas fotos. */
  --cor-agua: #BAEEEA;

  /* Os botões, na cor da clínica. A letra é escura porque o #45B09E é
     claro demais para segurar texto branco. */
  --cor-botao:       #45B09E;
  --cor-botao-texto: #1D2224;

  /* Linhas finas, bordas e detalhes. Quase não aparecem. */
  --cor-cinza:       #97A4AC;
  --cor-cinza-claro: #CCD0D2;
  --cor-linha:       #E2E7E8;

  /* Verde oficial do WhatsApp. Melhor não mexer: as pessoas reconhecem
     essa cor e clicam por causa dela. */
  --cor-whatsapp: #25D366;

  /* =====================================================================
     FORMATO DAS FOTOS DE ANTES E DEPOIS

     O quadro onde a foto aparece. As fotos da clínica são tiradas com o
     celular em pé, então o quadro também fica em pé: assim a foto entra
     inteira, sem corte e sem aproximação.

     Se um dia as fotos passarem a ser deitadas, troque por 4/3.
     Outras opções: 1/1 (quadrado), 4/5 (em pé, mais baixo).
     ===================================================================== */
  --formato-foto: 3/4;

  /* =====================================================================
     ESPAÇO ENTRE UMA SEÇÃO E OUTRA

     É o respiro que separa cada bloco da página. Os três números são:
     o mínimo (celular), o que acompanha a tela, e o máximo (monitor).
     Diminua para deixar a página mais curta e direta; aumente para dar
     mais ar. Mexa só nos números, mantendo o formato.
     ===================================================================== */
  --espaco-secao: clamp(64px, 7vw, 112px);

  /* Largura máxima de cada foto de antes e depois, em pixels. Aumentar
     deixa as fotos maiores na tela do computador; diminuir deixa a
     página mais leve de ler. No celular elas ocupam a largura toda. */
  --largura-foto: 420px;
}


/* =====================================================================
   RECEITAS PRONTAS

   Quer trocar a cara do site? Copie um bloco abaixo por cima dos
   valores lá de cima. Todas já foram conferidas e se leem bem.


   1) VERDE DA CLÍNICA (é a que está no ar)
      --cor-fundo: #45B09E;
      --cor-texto-no-fundo: #1D2224;
      --cor-botao: #1D2224;
      --cor-botao-texto: #FFFFFF;

   2) VERDE ESCURO, mais sóbrio
      --cor-fundo: #123B36;
      --cor-texto-no-fundo: #FFFFFF;
      --cor-botao: #BAEEEA;
      --cor-botao-texto: #123B36;

   3) VERDE-ÁGUA CLARO, mais leve
      --cor-fundo: #BAEEEA;
      --cor-texto-no-fundo: #1D2224;
      --cor-botao: #1D2224;
      --cor-botao-texto: #FFFFFF;

   4) CINZA CLARO, quase neutro
      --cor-fundo: #CCD0D2;
      --cor-texto-no-fundo: #1D2224;
      --cor-botao: #1D2224;
      --cor-botao-texto: #FFFFFF;


   COMO SABER SE A COMBINAÇÃO SE LÊ

   Cole as duas cores em webaim.org/resources/contrastchecker
   O número precisa dar 4.5 ou mais. É de graça e leva dez segundos.

   A regra em uma frase: texto escuro em fundo claro, texto claro em
   fundo escuro. Cores de meio-tom (nem claras nem escuras) só aceitam
   texto bem escuro.


   OUTRAS COISAS QUE VOCÊ MUDA SOZINHA

   Telefone, endereço e e-mail:  arquivo  inc/config.php
   Logomarca:                    arquivo  assets/logo.svg
   Foto da Fabiana:              arquivo  assets/fabiana.jpg
   Fotos de antes e depois:      pasta    fotos-resultados
   Vídeos de depoimentos:        pasta    videos-depoimentos

   Os textos das páginas ficam em index.php, resultados.php e
   depoimentos.php. Se for editar, mexa só nas frases, sem apagar as
   marcações que ficam entre < e >.
   ===================================================================== */