/* =========================================================================
   FOLHA DE ESTILO DO ART7

   Tudo isto e comentario. Escreva as suas regras depois do marcador, la no
   fim. Vale so para o Art7 -- o PraticShop nao muda.

   COMO USAR
   1. tire o /* e o *""/ da regra que quiser (ou escreva a sua)
   2. salve
   3. recarregue com Ctrl+Shift+R
   Ate 5 minutos por causa do cache; peca ao Claude limpar para ver na hora.

   SALVE EM UTF-8. No WinSCP: Opcoes > Preferencias > Editores > Codificacao.

   ISTO E RASCUNHO. Quando um ajuste se firmar, peca para virar configuracao
   de verdade (como cor, cantos e fundo ja sao) e sair daqui.
   ========================================================================= */


/* =========================================================================
   MAPA DAS CLASSES DA HOME   -   ISTO E SO CONSULTA

   NADA daqui esta valendo: e tudo comentario. Mudar um numero AQUI nao faz
   efeito nenhum -- foi o que aconteceu na primeira tentativa.

   PARA VALER: copie a linha inteira para o FIM DO ARQUIVO, depois do
   marcador ESCREVA O SEU CSS, e mude o valor la.

   Os valores ao lado sao os de HOJE, so para voce saber de onde parte.
   ========================================================================= */

/* ----- TOPO (o cabecalho rosa) -------------------------------------------
.ps-topo      { }                     o bloco de abertura inteiro
.ps-faixa     { }                     a barra do logo + menu
.ps-marca img { height: 2.5rem; }     o tamanho do logo
.ps-nav a     { font-size: 1rem; font-weight: 500; }     itens do menu
--------------------------------------------------------------------------- */

/* ----- ABERTURA: o texto principal ---------------------------------------
.ps-titulo    { font-size: clamp(2.4rem, 4.6vw, 54px); line-height: 1.08;
                font-weight: 400; letter-spacing: .02em; }
.ps-texto     { font-size: clamp(1.05rem, 2.2vw, 1.375rem); line-height: 1.5; }

.ps-destaques        { gap: .7rem; }          a lista dos tres itens
.ps-destaques li     { line-height: 1.45; }   cada item
.ps-destaques .ic    { width: 1.35em; height: 1.35em; }   o iconezinho
--------------------------------------------------------------------------- */

/* ----- ABERTURA: botoes e carrossel --------------------------------------
.ps-btn              { font-size: 1.175rem; font-weight: 700; }
.ps-botoes .ps-btn   { font-size: 1.05rem; padding: .85rem 1.2rem; }
.ps-btn--demo        { }                  o segundo botao, o de contorno
.ps-cartao span      { font-size: .875rem; }   legenda de cada icone
.ps-cartao img       { }                  o icone do carrossel
.ps-fotos            { }                  a grade das 4 fotos
.ps-quadro img       { }                  cada foto
--------------------------------------------------------------------------- */

/* ----- SECAO "COMO FUNCIONA" (a faixa azul) ------------------------------
.ps-como           { }                                    a faixa inteira
.ps-como h2        { font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 800; }
.ps-como-card h3   { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 800; }
.ps-como-card p    { font-size: 1.0625rem; line-height: 1.6; }
--------------------------------------------------------------------------- */

/* ----- SECAO DE RECURSOS (os cartoes) ------------------------------------
.ps-rec h2         { font-size: clamp(2rem, 4.5vw, 3rem); color: #101a33; }
.ps-rec-sub        { font-size: 1.0625rem; color: #5b6a86; }
.ps-rec-card       { }                     cada cartao
.ps-rec-card h3    { font-size: 1.0625rem; font-weight: 800; }
.ps-rec-card p     { font-size: .9375rem; color: #5b6a86; }
.ps-rec-tile img   { width: 3.4rem; height: 3.4rem; }   o icone do cartao
--------------------------------------------------------------------------- */

/* ----- RODAPE ------------------------------------------------------------
.ps-rodape         { }                     o bloco escuro do rodape
--------------------------------------------------------------------------- */

/* NAO ESTAO AQUI, porque ja sao CONFIGURACAO no dashadm -- mexa la, nao
   aqui: cor do topo, cor do texto, cor de fundo, cor do rodape, cantos
   retos, paleta, logo, favicon e o texto do hero. */


/* =========================================================================
   ESCREVA O SEU CSS ABAIXO   -   aqui SIM vale

   COMECE TODA REGRA COM  html
   Assim:   html .ps-titulo { ... }        e nao:   .ps-titulo { ... }

   POR QUE
   A home desenha o bloco de abertura num <style> dentro do CORPO da pagina,
   que o navegador le DEPOIS desta folha. Com a mesma forca, quem vem por
   ultimo ganha -- e a sua regra perde sem dar erro nenhum.
   O "html" na frente da regra a torna mais forte, e ai ela ganha sempre.

   CUIDADO COM clamp()
   clamp(minimo, ideal, maximo). Se voce baixar o MAXIMO abaixo do MINIMO, o
   minimo vence e parece que nada mudou. Para testar um tamanho fixo, escreva
   so o numero:   html .ps-titulo { font-size: 30px; }
   ========================================================================= */

/* EXEMPLO ATIVO -- o tamanho do titulo da home.
   Troque o 44px, salve e recarregue com Ctrl+Shift+R. */
html .ps-titulo { font-size: 55px; }