/* =====================================================================
   CENTRAL DE AJUSTES · Página de links da Gabi Silva (Dagabi) · v3
   Mude aqui cores, fontes, tamanhos e espaços. Nada fora deste arquivo
   tem valor fixo: tudo puxa destas variáveis.

   Cores tiradas do site dagabicroche.com.br (variáveis globais).
   Os logos de cada produto vêm dos banners originais (img/logos/).
   ===================================================================== */

@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-500.woff2?v=20261028c") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-600.woff2?v=20261028c") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-700.woff2?v=20261028c") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-800.woff2?v=20261028c") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* ---------- CORES DA MARCA ---------- */
  --laranja:        #CA6219;
  --laranja-vivo:   #FC7413;
  --marrom:         #69310A;
  --creme:          #EDE1D1;
  --creme-capa:     #F4E4CF;  /* cor do fundo da foto da capa */
  --areia:          #DAC4A7;
  --branco-quente:  #F9F6F1;
  --branco:         #FFFFFF;
  --texto:          #303030;
  --quase-preto:    #040D16;
  --fundo:          var(--branco-quente);   /* fundo da página */

  /* ---------- FONTE (próxima da Gotham do site dela) ---------- */
  --fonte-texto:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-texto);

  /* ---------- CAPA ---------- */
  --capa-margem:      .75rem;            /* respiro em volta do bloco da capa */
  --capa-proporcao:   1200 / 682;        /* formato do bloco: corta na dobra da camisa */
  --raio:             20px;              /* arredondamento da capa e de todos os cartões */
  --borda:            1px solid rgb(105 49 10 / .16);   /* borda fina de tudo */
  --entrada-largura:  7.5rem;            /* largura da entrada embaixo da capa */
  --entrada-altura:   1.5rem;           /* quanto ela entra no bloco */

  /* ---------- FUNDO ---------- */
  --grade:            44px;                       /* tamanho dos quadrados da grade */
  --grade-cor:        rgb(105 49 10 / .045);      /* cor das linhas da grade */

  /* ---------- CARTÕES ---------- */
  --cartao-altura:  clamp(10rem, 44vw, 12rem);  /* altura de cada bloco */
  --mini-altura:    clamp(8.5rem, 38vw, 10rem); /* altura de Suporte e YouTube */
  --cartao-espaco:  .75rem;                     /* espaço entre blocos */
  --logo-largura:   min(54%, 17rem);            /* largura do logo em cada bloco */
  --t-grupo:        clamp(.8rem, .7rem + .55vw, 1rem);
  --t-selo:         clamp(.95rem, .85rem + .5vw, 1.15rem);
  --t-mini:         clamp(1.2rem, 1.05rem + .8vw, 1.45rem);
  --coluna:         38rem;                      /* largura máxima da lista */

  /* ---------- COMPUTADOR ---------- */
  --pc-largura:        1220px;                      /* largura máxima da página no computador */
  --pc-capa-altura:    clamp(31.5rem, 58vh, 34rem);   /* altura da capa no computador */
  --pc-cartao-altura:  clamp(11rem, 13vw, 13rem);   /* altura dos cartões no computador */
  --pc-espaco:         1rem;                        /* espaço entre cartões no computador */

  /* ---------- PLATAFORMAS (cores oficiais) ---------- */
  --whatsapp:         #25D366;
  --whatsapp-teal:    #128C7E;   /* verde-escuro oficial do WhatsApp */
  --youtube:          #FF0000;
  --youtube-fundo:    #0F0F0F;   /* fundo escuro do app do YouTube */

  /* ---------- ESPAÇOS ---------- */
  --e-1: .5rem;  --e-2: 1rem;  --e-3: 1.5rem;  --e-4: 2rem;
  --traco: 1px solid var(--areia);

  /* ---------- MOVIMENTO ---------- */
  --curva:  cubic-bezier(.22, .8, .24, 1);
  --rapido: .25s;
  --medio:  .6s;
  --lento:  1.1s;
}