/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ==========================================================================
   ===== 2EASY VARS — INÍCIO ================================================
   Bloco único e idempotente. Serve para as duas ocasiões:
     • 1ª vez  → cole junto ao que já existe (é 100% aditivo, não sobrescreve).
     • Atualizar → apague só o trecho entre "INÍCIO" e "FIM" e cole este no lugar.
   Inclui aliases dos nomes antigos (.container/.fade-up/.text-purple/.delay-*)
   para não deixar nada órfão em nenhuma versão.

   Onde colar:  Bricks → Settings → Custom code → Custom CSS  → Save
   Fonte:       Bricks → Theme Styles → Typography → Poppins (300–700)
   Animações:   <script> no Header (ver fim deste arquivo)
   ========================================================================== */

:root {
  /* Cores */
  --color-green: #D2EF5F;  --color-green-hover: #C4E44E;
  --color-purple: #7843FF; --color-purple-hover: #5D2CE6;
  --color-purple-dark: #2C0A4A; --color-purple-light: rgba(120,67,255,.08);
  --bg-primary: #FFFFFF; --bg-secondary: #F7F7F8;
  --color-dark: #171615; --color-text: #6B7280; --color-text-light: #9CA3AF;
  --border-color: #F3F4F6;

  /* Fontes (família definida no builder) */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-26:26px;
  --fs-28:28px; --fs-30:30px; --fs-32:32px; --fs-38:38px; --fs-44:44px; --fs-52:52px; --fs-60:60px;

  /* Espaçamentos */
  --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px; --space-12:12px;
  --space-14:14px; --space-16:16px; --space-20:20px; --space-24:24px; --space-28:28px;
  --space-30:30px; --space-36:36px; --space-40:40px; --space-60:60px; --space-80:80px; --space-100:100px;

  /* Estrutura / raios / sombras / transição */
  --container-width: 1440px;
  --radius-sm:12px; --radius-md:16px; --radius-lg:24px; --radius-full:9999px;
  --shadow-sm: 0 4px 20px rgba(44,10,74,.02);
  --shadow-md: 0 12px 32px rgba(44,10,74,.04);
  --shadow-lg: 0 24px 48px rgba(44,10,74,.06);
  --shadow-purple-glow: 0 0 20px rgba(120,67,255,.08);
  --transition: all .3s cubic-bezier(.25,1,.5,1);
}

/* Container principal (única classe de layout no CSS) — + alias antigo */
.site_container, .container {
  width:100%; max-width:var(--container-width); margin-inline:auto; padding-inline:24px;
}

/* Destaque em títulos — + aliases antigos */
.site_text-purple, .text-purple, .text-purple-accent { color: var(--color-purple); }

/* ==========================================================================
   ANIMAÇÕES — não escondem conteúdo no editor
   O script (no <head>) marca html.anim-ready ANTES da 1ª pintura (sem flash) e
   só roda fora do editor (guard de iframe). Suporta os nomes novos (.site_fade-up
   / .is-visible) e os antigos (.fade-up / .visible).
   ========================================================================== */
.site_fade-up, .fade-up {
  transition: opacity .8s cubic-bezier(.25,1,.5,1), transform .8s cubic-bezier(.25,1,.5,1);
}

/* Estado escondido: instantâneo (sem transição) — NÃO anima a saída */
html.anim-ready .site_fade-up,  html.anim-ready .fade-up,
body.anim-ready .site_fade-up,  body.anim-ready .fade-up {
  opacity:0; transform:translateY(30px); transition:none;
}
/* Só a REVELAÇÃO anima (fade-in de baixo para cima) */
html.anim-ready .site_fade-up.is-visible, html.anim-ready .site_fade-up.visible,
html.anim-ready .fade-up.is-visible,      html.anim-ready .fade-up.visible,
body.anim-ready .site_fade-up.is-visible, body.anim-ready .site_fade-up.visible,
body.anim-ready .fade-up.is-visible,      body.anim-ready .fade-up.visible {
  opacity:1; transform:translateY(0);
  transition: opacity .8s cubic-bezier(.25,1,.5,1), transform .8s cubic-bezier(.25,1,.5,1);
}

/* Delays (novos site_delay-* e antigos delay-*) */
.site_delay-1.is-visible, .site_delay-1.visible, .delay-1.is-visible, .delay-1.visible { transition-delay:.1s; }
.site_delay-2.is-visible, .site_delay-2.visible, .delay-2.is-visible, .delay-2.visible { transition-delay:.2s; }
.site_delay-3.is-visible, .site_delay-3.visible, .delay-3.is-visible, .delay-3.visible { transition-delay:.3s; }
.site_delay-4.is-visible, .site_delay-4.visible, .delay-4.is-visible, .delay-4.visible { transition-delay:.4s; }

@keyframes float      { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes scrollLogos{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes bounce {
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);} 40%{transform:translateX(-50%) translateY(-10px);}
}

/* --------------------------------------------------------------------------
   JS do fade-up — colar em Bricks → Settings → Custom code → HEADER scripts
   (roda antes da 1ª pintura = sem flash; o guard de iframe ignora o editor).
   Marca .is-visible (padrão novo) e .visible (compat) para servir aos dois:

   <script>
   if (window.self === window.top) {
     document.documentElement.classList.add('anim-ready');
     addEventListener('DOMContentLoaded', function () {
       var io = new IntersectionObserver(function (es) {
         es.forEach(function (e) {
           if (e.isIntersecting) {
             e.target.classList.add('is-visible', 'visible');
             io.unobserve(e.target);
           }
         });
       }, { threshold: .15 });
       document.querySelectorAll('.site_fade-up, .fade-up').forEach(function (el) { io.observe(el); });
     });
   }
   </script>
   -------------------------------------------------------------------------- */

/* ===== 2EASY VARS — FIM =================================================== */

