/*
 * ============================================================
 *  AMERICAN EDITORS CLUB — ARQUIVO DE CONFIGURAÇÃO VISUAL
 *  Edite os valores abaixo para ajustar a aparência da página
 *  sem precisar mexer no código principal (index.html)
 * ============================================================
 */

:root {

   /* ----------------------------------------------------------
     HERO — ESPAÇAMENTOS
     Controla as distâncias entre os elementos da seção hero
  ---------------------------------------------------------- */

   /* Espaço entre o subtítulo e a imagem */
   --hero-img-margin-top: -8px;

   /* Espaço entre a imagem e o bloco de preço */
   --hero-img-margin-bottom: -8px;

   /* Espaço entre o preço e o botão CTA */
   --hero-price-to-cta: 20px;

   /* Espaço entre a headline e o subtítulo */
   --hero-sub-margin-top: 16px;

   /* Padding interno da seção hero (cima / baixo) */
   --hero-padding-top: 36px;
   --hero-padding-bottom: 48px;

   /* ----------------------------------------------------------
     HERO — TAMANHOS DE TEXTO DO PREÇO
     Ajuste cada linha de forma independente
  ---------------------------------------------------------- */

   /* Preço riscado — "DE R$97,90" */
   --hero-price-old-size: 30px;

   /* Label — "POR APENAS" */
   --hero-price-label-size: 15px;

   /* Preço principal — "27,90" (número grande) */
   --hero-price-tag-size: 80px;

   /* ----------------------------------------------------------
     HERO — ESPAÇAMENTOS INTERNOS DO BLOCO DE PREÇO
  ---------------------------------------------------------- */

   /* Espaço entre "DE R$97,90" e "POR APENAS" */
   --hero-price-old-gap: 4px;

   /* Espaço entre "POR APENAS" e "R$27,90" */
   --hero-price-label-gap: 4px;

   /* ----------------------------------------------------------
     DIVISOR DOURADO
     Margem acima e abaixo da linha dourada entre seções
  ---------------------------------------------------------- */
   --divisor-gap: 16px;

   /* ----------------------------------------------------------
     SEÇÃO 2 — DOR
  ---------------------------------------------------------- */
   --sec2-pt: 48px;
   /* padding-top da Seção 2 */

   /* ----------------------------------------------------------
     SEÇÃO 3 — AGITAÇÃO + VIRADA
  ---------------------------------------------------------- */
   --sec3-pb: 48px;
   /* padding-bottom da Seção 3 (saída para o divisor) */

   /* ----------------------------------------------------------
     SEÇÃO 4 — SOLUÇÃO
  ---------------------------------------------------------- */
   --sec4-pt: 48px;
   /* padding-top da Seção 4 (entrada após o divisor) */
   --sec4-pb: 48px;
   /* padding-bottom da Seção 4 */

   /* ----------------------------------------------------------
     SEÇÃO 4 — SOLUÇÃO
  ---------------------------------------------------------- */

   /* Espaço entre os 3 momentos internos (foi exatamente / mas afinal / pra você?) */
   --sol-gap: 32px;

   /* ----------------------------------------------------------
     SEÇÃO 5 — BENEFÍCIOS
   ---------------------------------------------------------- */
   --sec5-pt: 16px;
   /* padding-top da Seção 5 (entrada após o divisor) */
   --sec5-pb: 48px;
   /* padding-bottom da Seção 5 */

   /* ----------------------------------------------------------
     SEÇÃO 6 — PROVA SOCIAL
   ---------------------------------------------------------- */
   --sec6-pt: 16px;
   /* padding-top da Seção 6 (entrada após o divisor) */
   --sec6-pb: 48px;
   /* padding-bottom da Seção 6 */

   /* ----------------------------------------------------------
     SEÇÃO 7 — BÔNUS
   ---------------------------------------------------------- */
   --sec7-pt: 16px;
   /* padding-top da Seção 7 (entrada após o divisor) */
   --sec7-pb: 48px;
   /* padding-bottom da Seção 7 */

   /* ----------------------------------------------------------
     SEÇÃO 9 — OFERTA
   ---------------------------------------------------------- */
   --sec9-pt: 16px;
   /* padding-top da Seção 9 (entrada após o divisor) */
   --sec9-pb: 48px;
   /* padding-bottom da Seção 9 */

   /* ----------------------------------------------------------
     SEÇÃO 10 — GARANTIA
   ---------------------------------------------------------- */
   --sec10-pt: 48px;
   /* padding-top da Seção 10 */
   --sec10-pb: 48px;
   /* padding-bottom da Seção 10 */

   /* ----------------------------------------------------------
     SEÇÃO 11 — FAQ
   ---------------------------------------------------------- */
   --sec11-pt: 48px;
   /* padding-top da Seção 11 */
   --sec11-pb: 80px;
   /* padding-bottom da Seção 11 */

   /* ----------------------------------------------------------
     SEÇÃO 12 — RODAPÉ
   ---------------------------------------------------------- */
   --rodape-logo-width: 120px;
   /* tamanho da logo no rodapé — ajuste conforme necessário */

}