.elementor-kit-39{--e-global-color-15c1a5d:#181410;--e-global-color-a5a033e:#2C241C;--e-global-color-f869a17:#D4AF37;--e-global-color-9c52a3a:#050505;--e-global-color-0dec70c:#050505;--e-global-color-d9445a9:#333333;--e-global-color-cc7695f:#000000;--e-global-color-b273890:#F0EADF;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-a5a033e );font-size:16px;line-height:24px;}.elementor-kit-39 button,.elementor-kit-39 input[type="button"],.elementor-kit-39 input[type="submit"],.elementor-kit-39 .elementor-button{background-color:var( --e-global-color-d9445a9 );font-size:12px;font-weight:600;text-transform:uppercase;line-height:24px;letter-spacing:0.14em;color:var( --e-global-color-9c52a3a );border-radius:32px 32px 32px 32px;padding:11px 22px 11px 22px;}.elementor-kit-39 button:hover,.elementor-kit-39 button:focus,.elementor-kit-39 input[type="button"]:hover,.elementor-kit-39 input[type="button"]:focus,.elementor-kit-39 input[type="submit"]:hover,.elementor-kit-39 input[type="submit"]:focus,.elementor-kit-39 .elementor-button:hover,.elementor-kit-39 .elementor-button:focus{background-color:var( --e-global-color-cc7695f );color:var( --e-global-color-0dec70c );}.elementor-kit-39 e-page-transition{background-color:#343434;}.elementor-kit-39 a{color:#D4AF37;font-size:16px;font-weight:600;line-height:24px;}.elementor-kit-39 h1{color:#FFFFFF;font-size:48px;line-height:125px;letter-spacing:-0.48px;}.elementor-kit-39 h2{color:#FFFFFF;font-size:64px;line-height:67px;letter-spacing:-0.2px;}.elementor-kit-39 h3{color:#FFFFFF;font-size:32px;line-height:40px;}.elementor-kit-39 h4{color:#FFFFFF;font-size:28px;line-height:35.84px;}.elementor-kit-39 h5{color:#FFFFFF;font-size:24px;line-height:31.92px;}.elementor-kit-39 h6{color:#FFFFFF;font-size:20px;line-height:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:32px;}.elementor-element{--widgets-spacing:32px 32px;--widgets-spacing-row:32px;--widgets-spacing-column:32px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-39 h1{font-size:36px;line-height:43.92px;letter-spacing:-0.18px;}.elementor-kit-39 h2{font-size:32px;line-height:40px;}.elementor-kit-39 h3{font-size:28px;line-height:35.84px;}.elementor-kit-39 h4{font-size:24px;line-height:31.92px;}.elementor-kit-39 h5{font-size:20px;line-height:28px;}.elementor-kit-39 h6{font-size:18px;line-height:23.94px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   JOÃO LEITE — DESIGN SYSTEM v4
   Cores de títulos e textos gerenciadas pelo Elementor.
   Apenas cores funcionais (eyebrow, gradientes, botões) mantidas.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --gold-1:    #996515;
  --gold-2:    #d4af37;
  --gold-3:    #f9e498;
  --gold-grad: linear-gradient(135deg, #996515 0%, #d4af37 50%, #f9e498 100%);
  --gold-soft: linear-gradient(135deg, rgba(153,101,21,.18) 0%, rgba(212,175,55,.22) 50%, rgba(249,228,152,.18) 100%);

  --black:      #050505;
  --black-soft: #0c0c0c;
  --black-mute: #161412;
  --rule-dark:  rgba(212,175,55,.18);

  --on-dark:      #f0eadf;
  --on-dark-mute: rgba(240,234,223,.62);

  --paper:      #f6f1e7;
  --paper-warm: #ece5d3;
  --rule-light: #d8cfb9;

  --ink:      #181410;
  --ink-soft: #2c241c;
  --muted:    #6c6353;

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   2. BASE
   ============================================================ */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-2); color: var(--black); }

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}


/* ============================================================
   3. TIPOGRAFIA — HEADINGS
   Tag HTML = semântica/SEO.
   elementor-size-* = tamanho visual.
   Cores definidas no Elementor — não sobrescritas aqui.
   ============================================================ */

.elementor-heading-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
}

.elementor-heading-title.elementor-size-xxl {
  font-size: clamp(52px, 7vw, 96px);
  line-height: .95;
  letter-spacing: -0.022em;
}
.elementor-heading-title.elementor-size-xl {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.018em;
}
.elementor-heading-title.elementor-size-large {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.elementor-heading-title.elementor-size-medium {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}
.elementor-heading-title.elementor-size-small {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.elementor-heading-title.elementor-size-default {
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Fallback por tag quando size=default */
h1.elementor-heading-title.elementor-size-default {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2.elementor-heading-title.elementor-size-default {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* <em> = gradiente dourado em qualquer heading */
.elementor-heading-title em {
  font-style: italic;
  font-weight: 400;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}


/* ============================================================
   4. PARÁGRAFOS
   Cor definida no Elementor — não sobrescrita aqui.
   ============================================================ */
p,
.elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
}


/* ============================================================
   5. BOTÕES
   ============================================================ */
.elementor-button,
a.elementor-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 21px;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  background: var(--gold-grad) !important;
  background-size: 200% 200% !important;
  background-position: 0% 0% !important;
  color: var(--black) !important;
  border: none !important;
  box-shadow: 0 8px 24px -10px rgba(212,175,55,.5) !important;
  transition: background-position .4s var(--ease),
              transform .3s var(--ease),
              box-shadow .3s var(--ease) !important;
}
.elementor-button:hover,
a.elementor-button:hover {
  background-position: 100% 100% !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -10px rgba(212,175,55,.65) !important;
}

/* Ghost escuro */
.jl-btn-ghost .elementor-button,
.jl-btn-ghost a.elementor-button {
  background: transparent !important;
  color: var(--on-dark) !important;
  border: 1px solid var(--rule-dark) !important;
  box-shadow: none !important;
}
.jl-btn-ghost .elementor-button:hover,
.jl-btn-ghost a.elementor-button:hover {
  border-color: var(--gold-2) !important;
  background: rgba(212,175,55,.06) !important;
  transform: none !important;
}

/* Ghost claro */
.jl-btn-ghost-light .elementor-button,
.jl-btn-ghost-light a.elementor-button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid rgba(24,20,16,.2) !important;
  box-shadow: none !important;
}
.jl-btn-ghost-light .elementor-button:hover,
.jl-btn-ghost-light a.elementor-button:hover {
  border-color: var(--gold-1) !important;
  color: var(--gold-1) !important;
  background: rgba(153,101,21,.05) !important;
  transform: none !important;
}


/* ============================================================
   6. EYEBROW
   Uso: classe jl-eyebrow no widget Heading
   ============================================================ */
.jl-eyebrow .elementor-heading-title {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--gold-2) !important;
  -webkit-text-fill-color: var(--gold-2) !important;
  line-height: 1 !important;
}
.jl-eyebrow .elementor-heading-title::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold-grad);
  flex-shrink: 0;
}


/* ============================================================
   7. TEXTO DOURADO
   Uso: classe gold-text no widget
   ============================================================ */
.gold-text .elementor-heading-title,
.gold-text p,
.gold-text {
  background: var(--gold-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}


/* ============================================================
   8. HERO TITLE
   Uso: classe jl-hero-title no widget Heading
   ============================================================ */
.jl-hero-title .elementor-heading-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}
.jl-hero-title .elementor-heading-title em {
  -webkit-text-fill-color: transparent !important;
}


/* ============================================================
   9. BIO RIGHT — Texto descritivo
   Uso: classe bio-right no widget Text Editor
   ============================================================ */
.bio-right,
.bio-right p {
  font-size: 16px;
  line-height: 1.85;
  font-weight: 300;
}


/* ============================================================
   10. STAT — Número com borda dourada
   Uso: classe jl-stat no container
   ============================================================ */
.jl-stat {
  padding-left: 24px;
  border-left: 1px solid var(--rule-dark);
  position: relative;
}
.jl-stat::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 32px;
  background: var(--gold-grad);
}

.jl-stat-number .elementor-counter-number-wrapper,
.jl-stat-number .elementor-counter-number,
.bio-stat-num .elementor-counter-number-wrapper,
.bio-stat-num .elementor-counter-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}
.jl-stat-number .elementor-counter-title,
.bio-stat-num .elementor-counter-title {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 6px;
}


/* ============================================================
   11. COUNTER — automático em todos os widgets Counter
   ============================================================ */
.elementor-counter {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.elementor-counter .elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.elementor-counter .elementor-counter-title {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 6px;
}


/* ============================================================
   12. CARD — Bandeiras / áreas
   Uso: classe jl-card no container
   ============================================================ */
.jl-card {
  background: var(--black-soft);
  border: 1px solid var(--rule-dark);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: background .4s var(--ease),
              border-color .4s var(--ease),
              transform .4s var(--ease);
}
.jl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.jl-card:hover {
  background: var(--black-mute);
  border-color: rgba(212,175,55,.35);
  transform: translateY(-3px);
}
.jl-card:hover::before { transform: scaleX(1); }

/* Número do card (01, 02...) */
.jl-card-num .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}


/* ============================================================
   13. TRABALHO — Seção numerada (01–06)
   Uso: trabalho-card em cada item, trabalho-grid no container
   ============================================================ */
.trabalho-card {
  border-top: 1px solid var(--rule-dark);
  padding: 28px 0;
  transition: padding-left .35s var(--ease);
}
.trabalho-card:hover { padding-left: 10px; }

.trabalho-card .elementor-heading-title {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  line-height: 1.15 !important;
}
.trabalho-card p {
  font-size: 13px;
  line-height: 1.75;
}

.trabalho-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
.trabalho-grid .trabalho-card {
  border-left: 1px solid var(--rule-dark);
  padding: 28px 24px;
}
.trabalho-grid .trabalho-card:first-child {
  border-left: none;
  padding-left: 0;
}


/* ============================================================
   14. PULL QUOTE / DIVIDER
   Uso: classe jl-divider no container
   ============================================================ */
.jl-divider .elementor-heading-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 4vw, 52px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  text-align: center;
}
.jl-divider .elementor-heading-title em {
  background: var(--gold-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.jl-divider .jl-eyebrow .elementor-heading-title {
  justify-content: center;
  text-align: center;
}


/* ============================================================
   15. TIMELINE
   Uso: jl-tl-year no widget do período
   ============================================================ */
.jl-tl-year .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(48px, 6vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .35;
}


/* ============================================================
   16. FORM
   Uso: classe jl-form no container do formulário
   ============================================================ */
.jl-form .elementor-field-group input,
.jl-form .elementor-field-group textarea,
.jl-form .elementor-field-group select {
 
  border-radius: 4px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color .25s var(--ease) !important;
}
.jl-form .elementor-field-group input:focus,
.jl-form .elementor-field-group textarea:focus {
  border-color: var(--gold-2) !important;
  outline: none !important;
}
.jl-form .elementor-field-group input::placeholder,
.jl-form .elementor-field-group textarea::placeholder {
  color: var(--on-dark-mute) !important;
}
.jl-form .elementor-field-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}


/* ============================================================
   17. CONTACT LABELS — IDs específicos
   ============================================================ */
#elementor-field-label-0-6fd48c4,
#elementor-field-label-0-df69c80,
#elementor-field-label-0-1b3fc80 {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}


/* ============================================================
   18. WIDGETS — Divider, Icon List, Social Icons, Nav
   ============================================================ */
.elementor-divider-separator {
  border-color: var(--rule-dark) !important;
}

.elementor-icon-list-item .elementor-icon-list-icon i,
.elementor-icon-list-item .elementor-icon-list-icon svg {
  color: var(--gold-2) !important;
  fill: var(--gold-2) !important;
}
.elementor-icon-list-item .elementor-icon-list-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

.elementor-social-icons-wrapper .elementor-icon i,
.elementor-social-icons-wrapper .elementor-icon svg {
  color: var(--on-dark-mute) !important;
  fill: var(--on-dark-mute) !important;
  transition: color .25s var(--ease), fill .25s var(--ease) !important;
}
.elementor-social-icons-wrapper .elementor-icon:hover i,
.elementor-social-icons-wrapper .elementor-icon:hover svg {
  color: var(--gold-2) !important;
  fill: var(--gold-2) !important;
}

.elementor-nav-menu a.elementor-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
.elementor-nav-menu a.elementor-item:hover,
.elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--gold-2) !important;
}


/* ============================================================
   19. REVEAL ANIMATION
   Uso: classe jl-reveal em qualquer widget
   ============================================================ */
.jl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.jl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   20. MOBILE
   ============================================================ */
@media (max-width: 767px) {
  h1.elementor-heading-title.elementor-size-default {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 1.08;
  }
  h2.elementor-heading-title.elementor-size-default {
    font-size: clamp(24px, 7vw, 36px);
  }
  .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(40px, 11vw, 64px);
  }
  .jl-hero-title .elementor-heading-title {
    font-size: clamp(32px, 9vw, 52px) !important;
  }
  .jl-divider .elementor-heading-title {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  .trabalho-grid {
    grid-template-columns: 1fr !important;
  }
  .trabalho-grid .trabalho-card {
    border-left: none !important;
    border-top: 1px solid var(--rule-dark);
    padding: 32px;
  }
  .jl-card { padding: 28px 20px; }
}/* End custom CSS */