/* === KOJO x Eureca — Theme Overrides (clean) === */

/* Fonts fallback (caso o <link> falhe) */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300..900&display=swap");

/* Tokens */
:root{
  --bg:#282828; --text:#f6f6f6;
  --primary:#ffb400; --primary-hover:#e09f00; --primary-text:#111;
  --header-h:56px;  /* mobile header height estimada */
}

/* Base */
html,body{margin:0;font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);}
h1,h2,h3,.hero-title,.section-title,.feature-title{font-family:"Bebas Neue","Outfit",sans-serif;letter-spacing:.5px;line-height:1.1;margin:.5em 0 .25em}
h1,.hero-title{font-size:clamp(40px,6vw,72px)}
h2,.section-title{font-size:clamp(28px,4.5vw,48px)}
h3,.feature-title{font-size:clamp(22px,3.2vw,32px)}
a{color:var(--text)}

/* Mata decorações do template (formas/dots) */
.hero::before,.hero::after,.section::before,.section::after,.site-header::before,.site-header::after,.site-footer::before,.site-footer::after{content:none!important}
.hero svg,.section svg[width="124"][height="75"],.section svg[width="999"][height="931"],.hero-app-illustration{display:none!important}

/* Header compacto */
.site-header{padding-block:8px;background:var(--bg)}
.site-header .container{display:flex;align-items:center}
.site-header-inner{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.header-brand .brand-logo{width:118px;height:auto;display:block}
@media (max-width:768px){
  .site-header{padding-block:6px}
  .header-brand .brand-logo{width:96px}
  /* centralizar logo no mobile */
  .site-header-inner{justify-content:center}
}

/* Hero na primeira dobra e com gradiente leve */
.hero{
  padding-top:16px;padding-bottom:24px;
  min-height:calc(100svh - var(--header-h));
  display:grid;align-content:center;gap:16px;
  background:
    radial-gradient(900px 480px at 24% 20%, rgba(255,180,0,.08), transparent 60%),
    linear-gradient(180deg,#1e1e1e,#292929);
}
.hero .hero-paragraph{font-size:1.2rem;line-height:1.6}

/* CTA principal */
.button.button-primary,.button-primary,.hero-cta a.button{
  background:var(--primary)!important;color:#fff!important;border:none!important;
  font-family:"Bebas Neue","Outfit",sans-serif!important;
  text-transform:uppercase;letter-spacing:.6px;
  font-size:clamp(18px,1.4vw,22px)!important;
  padding:1.05em 1.6em!important;border-radius:14px!important;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:260px; box-shadow:0 18px 40px -16px rgba(255,180,0,.5),0 6px 18px -8px rgba(0,0,0,.45)!important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.button.button-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.button.button-primary:active{transform:translateY(0)}
.hero-cta{display:flex;align-items:center;justify-content:flex-start}

@media (max-width:480px){
  .button.button-primary{min-width:0;width:100%;font-size:clamp(17px,4.2vw,20px)!important;padding:1em 1.2em!important}
}

/* Features (só tipografia/cores) */
.section-title{color:var(--text)}
.text-sm,.section-paragraph,.feature p, .hero-paragraph {color:var(--text)}

/* === Zerar fundos azuis do template === */

/* 1) Força o fundo global flat */
html, body {
  background-color: var(--bg) !important;   /* #282828 */
  background-image: none !important;
}

/* 2) Wrappers comuns dos templates */
.site, .page, .page-wrapper, .site-content,
.body-wrap, .main, .main-wrapper, .wrapper, .content {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* 3) Seções: deixam transparecer o bg flat (ou o do hero) */
section, .section, .features, .feature, .cta, .callout,
.site-header, .site-footer, footer {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 4) Mata faixas decorativas criadas por pseudo-elementos */
body::before, body::after,
.site::before, .site::after,
.page-wrapper::before, .page-wrapper::after,
.section::before, .section::after,
.site-header::before, .site-header::after,
.site-footer::before, .site-footer::after {
  content: none !important;
  background: none !important;
}



/* ===== HOTFIX: Forçar bg escuro e cortar overlays/gradientes do tema ===== */
body, .site-header, .hero, .section, .features.section, .newsletter.section, .site-footer {
  background-color: #282828 !important;
  background-image: none !important;
}

/* Remove pseudo-elementos e elementos decorativos que criam faixas/gradientes */
.hero::before, .hero::after,
.section::before, .section::after,
.site-header::before, .site-header::after,
.site-footer::before, .site-footer::after,
.hero .hero-app-illustration, .hero .hero-app-illustration::before, .hero .hero-app-illustration::after,
.hero .hero-app-dots, .hero .hero-app-dots::before, .hero .hero-app-dots::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Header compacto */
.site-header{ padding:8px 0 !important; }
.header-brand .brand-logo{ height:36px !important; width:auto !important; display:block; }

/* ==== HERO com imagem de fundo à direita ==== */

/* 1) Usa a imagem como BG e controla tamanho/posição */
.hero{
  position: relative !important;
  min-height: 70svh !important;                 /* ajuste fino 66–76svh */
  padding: 28px 0 28px !important;
  background-color: #2a2a2a;                    /* seu fundo */
  background-image: url("dist/images/Eureca-hero.png") !important;
  background-repeat: no-repeat !important;
  background-position: right 4vw center !important;   /* encostada à direita */
  background-size: clamp(680px, 46vw, 1200px) !important; /* ↑ mexa aqui p/ maior/menor */
}

/* 2) Some com a coluna da imagem do template (pra não duplicar) */
.hero .hero-app{ display:none !important; }

/* 3) Deixa o texto ocupar 100% da largura (a imagem virou BG) */
.hero .hero-inner{ 
  display:block !important;                      /* em vez de grid com 2 colunas */
}

/* 4) Mobile: retira o BG e volta a imagem normal, se preferir */
@media (max-width: 900px){
  .hero{
    background-image: none !important;
    min-height: auto !important;
    padding: 20px 0 24px !important;
  }
  .hero .hero-app{ display:block !important; text-align:center !important; }
  .hero .hero-app img{ max-width:86vw !important; height:auto !important; }
}

/* === Header: logo maior e centralizado === */
.site-header{
  padding-block: 12px !important;            /* um pouco mais alto */
}

.site-header .container,
.site-header-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;         /* centraliza o conteúdo */
  padding:0 !important;
  margin:0 auto !important;
}

.header-brand{ 
  margin:0 !important; 
}

.header-brand a{
  display:inline-block !important;
  line-height:0 !important;                  /* tira respiro extra */
}

.header-brand .brand-logo{
  height: 56px !important;                   /* ⬅️ tamanho do logo no desktop */
  width:auto !important;
  display:block !important;
}

/* Mobile: um pouco menor para caber confortável */
@media (max-width: 768px){
  .site-header{ padding-block:10px !important; }
  .header-brand .brand-logo{ height: 44px !important; }
}

/* Header: tamanho final do logo (override) */
.site-header .brand-logo{
  width: auto !important;                     /* libera a largura */
  height: clamp(56px, 6vw, 88px) !important;  /* ajuste aqui o tamanho */
  display: block;
}

/* Header maior + logo controlado no CSS */
.site-header{ padding-block:14px !important; overflow:visible !important; }
.site-header h1{ margin:0 !important; }
.header-brand a{ line-height:0 !important; display:inline-block !important; }


/* Header: tamanho do logo (responsivo) */
.site-header .brand-logo{
  width: auto !important;
  height: clamp(64px, 7vw, 104px) !important; /* ajuste aqui o tamanho desejado */
  display: block !important;
}

/* Um pouco de respiro no header */
.site-header{
  padding-block: 12px !important;
}