/* Kairum — tokens globais, reset e utilitários (base do kit) */
:root{
  --green:#141F1C;
  --green-deep:#0c1311;
  --green-soft:#1c2b27;
  --gray:#C5C5C5;
  --gray-2:#8d938f;
  --paper:#f4f5f3;
  --paper-2:#e8eae6;
  --line:rgba(197,197,197,.18);
  --metal:linear-gradient(135deg,#e8eae6 0%,#c5c5c5 28%,#f4f5f3 52%,#a8aaa6 74%,#dfe1dd 100%);
  --metal-dark:linear-gradient(135deg,#1c2b27 0%,#141F1C 45%,#0c1311 100%);
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --r:18px;
  --ease:cubic-bezier(.16,.84,.32,1);
  --t-display:"TT Hoves",sans-serif;
  --t-body:"Helvetica World","TT Hoves",Arial,sans-serif;
}

/* Reset escopado ao conteúdo Elementor (não toca no admin/editor UI) */
body.kairum-site [class*="kairum-"],
body.kairum-site [class*="kairum-"] *,
body.kairum-site [class*="kairum-"] *::before,
body.kairum-site [class*="kairum-"] *::after,
body.kairum-site .elementor-widget-kairum-hero-lp *,
body.kairum-site .wrap,body.kairum-site .wrap *,
body.kairum-site .section,body.kairum-site .section *{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.kairum-site{
  font-family:var(--t-body);
  background:var(--green);
  color:var(--paper);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.kairum-site img{max-width:100%;display:block}
body.kairum-site a{color:inherit;text-decoration:none}
body.kairum-site ::selection{background:var(--gray);color:var(--green)}

/* Neutraliza o container padrão do Elementor dentro do kit */
body.kairum-site .elementor-section-wrap,
body.kairum-site .elementor-widget-container{margin:0;padding:0}

/* Garante que os widgets Kairum ocupem 100% e não sofram do flex do container */
body.kairum-site [class*="elementor-widget-kairum-"]{width:100%;max-width:100%}
body.kairum-site [class*="elementor-widget-kairum-"] > .elementor-widget-container{width:100%}

/* Containers do kit não devem impor gap/padding herdados do tema/Elementor
   nas seções que já trazem seu próprio espaçamento (.section) */
body.kairum-site .e-con-inner,
body.kairum-site .e-con > .e-con-inner{padding:0;margin:0;max-width:none;width:100%}
body.kairum-site .kairum-page > .e-con-inner,
body.kairum-site .kairum-page.e-con{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0}

/* As seções controlam seu próprio espaçamento vertical; o container não */
body.kairum-site .kairum-page{padding:0}

/* Util */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--t-display);font-weight:500;font-size:.72rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gray-2);display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gray-2);display:inline-block;opacity:.6}
.display{font-family:var(--t-display);font-weight:300;line-height:.98;letter-spacing:-.02em}
.section{padding-block:clamp(80px,11vw,160px);position:relative}

/* ------------------------------------------------------------------
   Blindagem de cor/tipografia dos títulos.
   Temas e o Elementor forçam color/font em h1..h6; como as classes do
   kit são "soltas" (.display), precisamos de escopo + !important nas
   cores herdadas para garantir fidelidade. A cor NÃO é fixa: herda do
   contexto (claro/escuro) via currentColor do container.
   ------------------------------------------------------------------ */
body.kairum-site .display,
body.kairum-site .section h1,
body.kairum-site .section h2,
body.kairum-site .section h3,
body.kairum-site .section h4,
body.kairum-site .wrap h1,
body.kairum-site .wrap h2,
body.kairum-site .wrap h3,
body.kairum-site .wrap h4{
  color:var(--paper) !important;
  font-family:var(--t-display);
  -webkit-text-fill-color:currentColor;
  background:none;
}
/* O destaque <b> herda a cor do título (apenas peso diferente, como no original) */
body.kairum-site .display b,
body.kairum-site .display strong{
  font-weight:500;color:inherit !important;-webkit-text-fill-color:currentColor;background:none;
}
/* Seções de fundo claro invertem a cor do título para o verde */
body.kairum-site .serv .display,
body.kairum-site .serv h1,body.kairum-site .serv h2,body.kairum-site .serv h3,
body.kairum-site .serv__top .display{color:var(--green) !important;}
body.kairum-site .serv .display b,body.kairum-site .serv__top .display b{color:var(--green) !important;}

/* ------------------------------------------------------------------
   Tamanho padronizado dos títulos de seção. As seções que herdavam
   apenas o .display base ficavam pequenas; aqui igualamos todas ao
   mesmo porte editorial do restante do site.
   ------------------------------------------------------------------ */
body.kairum-site .kairum-why__title,
body.kairum-site .vpreview__head .display,
body.kairum-site .catalog__head .display,
body.kairum-site .proof .display,
body.kairum-site .steps .display,
body.kairum-site .adv__main .display,
body.kairum-site .faq__intro .display{
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:200;
}

.btn,
body.kairum-site .btn{
  font-family:var(--t-display);font-weight:500;font-size:.92rem;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.9em;border-radius:100px;
  border:1px solid transparent;cursor:pointer;transition:.45s var(--ease);will-change:transform;
  text-decoration:none;line-height:1;
}
.btn .arc{width:18px;height:18px;transition:.45s var(--ease)}
.btn--solid,
body.kairum-site .btn--solid{background:var(--gray) !important;color:var(--green) !important;-webkit-text-fill-color:var(--green)}
.btn--solid:hover,
body.kairum-site .btn--solid:hover{background:var(--paper) !important;transform:translateY(-2px)}
.btn--ghost,
body.kairum-site .btn--ghost{border-color:var(--line);color:var(--paper) !important;-webkit-text-fill-color:var(--paper);background:transparent}
.btn--ghost:hover,
body.kairum-site .btn--ghost:hover{border-color:var(--gray);background:rgba(197,197,197,.06)}
.btn:hover .arc{transform:rotate(45deg)}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-on{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* No editor, nada fica invisível */
.elementor-editor-active .reveal,.elementor-editor-preview .reveal{opacity:1;transform:none}