/* ------------------------------------------------------------------ *
 * A Escalada — estilos da LP
 *
 * So o que nenhum controle nativo do Elementor expoe. Tudo o mais mora
 * nos controles, pra poder ser ajustado no painel.
 *
 * As ancoras sao CLASSES (esc-*), gravadas no campo "Classes CSS" de
 * cada elemento — nunca .elementor-element-<id>. O import do Elementor
 * REGERA os ids (testado: zzz1111 virou 6fbc664), entao qualquer regra
 * presa a id morre ao migrar de servidor. Classe viaja no settings e
 * sobrevive.
 *
 * Onde a regra disputa com o CSS por-widget que o Elementor gera
 * (`.elementor-<post> .elementor-element.elementor-element-<id>`, que
 * chega a 6 classes no acordeao), a classe-ancora vem repetida pra
 * passar na especificidade sem !important.
 * ------------------------------------------------------------------ */

/* 1. Destaque manuscrito: e uma palavra DENTRO do heading, e os controles
   de tipografia valem pro widget inteiro. Vai como <span> no titulo.
   Quando o destaque precisa de um corpo proprio, o tamanho vai INLINE no
   span e sempre em `em`, nunca em px — assim ele acompanha o tamanho do
   titulo em cada breakpoint em vez de ficar preso no valor do desktop. */
.esc-hand{font-family:'Briem Hand',cursive;font-weight:400;color:#A85A33;font-size:1.2em;line-height:inherit;}
.esc-hand--pele{color:#F2D5B8;}
.esc-hand--terra-claro{color:#C88E66;}
/* O destaque de "com novos olhos?" e o unico bem maior que o resto do
   titulo (1,68x, do Figma). Vai por classe, e nao inline, pra poder
   encolher no celular — la 1,68 deixava a palavra quase o dobro das
   outras na mesma frase. */
.esc-hand--xl{font-size:1.68em;}

/* 2. white-space: nowrap nos tres textos do header e da pill do hero, que
   no Figma sao HUG e fecham a linha no milimetro (105+10+3+10+120 = 248
   exatos). So no desktop: no celular o nowrap empurrava o texto pra fora
   e criava 28px de rolagem horizontal na pagina inteira. */
@media (min-width:1025px){
  .esc-nav-datas .elementor-heading-title,
  .esc-nav-semanas .elementor-heading-title,
  .esc-pill-texto .elementor-heading-title{white-space:nowrap;}
}

/* 3. FAQ. As cores do icone ficam nos controles nativos do widget
   (icon_color / icon_active_color) — aqui so o que nao tem controle. */
.elementor .esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-accordion-item{
  border:0; border-bottom:1px solid #DFD2C2;
}
.elementor .esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-accordion-item:first-child{
  border-top:1px solid #DFD2C2;
}
.elementor .esc-faq.esc-faq.esc-faq .elementor-tab-title{
  display:flex;align-items:center;gap:24px;padding:26px 4px;
  transition:padding-left .25s ease;
}
/* o icone vem antes do titulo no HTML; order:2 devolve ele pra direita */
.elementor .esc-faq.esc-faq.esc-faq .elementor-accordion-icon{
  order:2;float:none;width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #DFD2C2;border-radius:50%;
  transition:background-color .2s ease,border-color .2s ease;
}
.elementor .esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-accordion-icon svg{
  width:11px;height:11px;
}
.esc-faq .elementor-accordion-title{order:1;flex:1;transition:color .2s ease;}
.esc-faq .elementor-tab-title:hover{padding-left:10px;}
.esc-faq .elementor-tab-title:hover .elementor-accordion-title{color:#A85A33;}
.esc-faq .elementor-tab-title:hover .elementor-accordion-icon{border-color:#C88E66;}
.esc-faq .elementor-tab-title.elementor-active{padding-left:10px;}
.elementor .esc-faq.esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{
  background:#A85A33;border-color:#A85A33;
}
.elementor .esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-tab-content{
  border:0;padding:0 90px 30px 10px;
}

/* 4. O frontend.min.css do Elementor poe uma transicao global de
   `transform var(--e-transform-transition-duration,.4s)` em todo widget.
   Como o GSAP reescreve o transform a cada quadro, cada quadro disparava
   uma transicao de .4s por cima — dois eases somados, movimento arrastado.
   Zerar a variavel usa o proprio botao do Elementor em vez de brigar com
   `transition:none`. A classe so existe durante a animacao (o script tira
   ela no onComplete), entao os hovers continuam intactos. */
.esc-anim{--e-transform-transition-duration:0s;}

/* 5. Cards do "Talvez seja para voce se...". O icon-box empilha icone e
   titulo colados no topo; no layout o icone fica no alto e a frase
   encostada embaixo. Tres coisas sao necessarias:
   - esticar o wrapper ate a altura do card (a grade ja e stretch);
   - tirar o flex-grow:1 que o Elementor da ao bloco de conteudo, senao
     ele engole toda a folga e o space-between nao tem o que distribuir;
   - o min-height segura o card quando a frase e curta. As frases longas
     continuam empurrando a altura da linha inteira da grade. */
.esc-grid-talvez > .elementor-widget-icon-box{display:flex;}
.esc-grid-talvez .elementor-icon-box-wrapper{
  display:flex;flex-direction:column;justify-content:space-between;
  flex:1;min-height:168px;
}
.esc-grid-talvez .elementor-icon-box-content{flex:0 0 auto;}

/* ------------------------------------------------------------------ *
 * 6. Celular.
 * ------------------------------------------------------------------ */
@media (max-width:767px){

  /* 6.0 Titulos. O destaque grande encolhe pra nao dobrar de tamanho ao
     lado das outras palavras da mesma frase. */
  .esc-hand--xl{font-size:1.25em;}
  /* Quebras de linha compostas pro desktop. Nos titulos onde o <br> corta
     UMA frase no meio ("...da sua historia" / "ainda vivem dentro de
     voce?"), o celular ja quebra sozinho e o <br> so produzia linha orfa
     de uma palavra. Ele vem envolvido em .esc-br pra poder sumir aqui.
     Nos titulos em que o <br> separa DUAS frases, ele fica — ali a quebra
     e sentido, nao diagramacao. */
  .esc-br{display:none;}

  /* 6.1 Altura minima da escada. Deitada ela emparelha os degraus; numa
     coluna so vira buraco, com degraus de 214 a 538px cada. Aqui cada um
     volta a ter a altura do proprio conteudo.
     A altura dos cards de pergunta e de ganho no celular fica nos
     controles nativos de cada card (min_height_mobile), ajustavel no
     painel — de proposito nao esta aqui. */
  .elementor .esc-escada.esc-escada > .elementor-element{--min-height:0px;}
  .esc-grid-talvez .elementor-icon-box-wrapper{min-height:0;gap:14px;}

  /* 6.2 Cards de ganho: mais ar embaixo do numero. O gap do container e
     unico pros tres filhos (numero, titulo, texto) — uma margem so no
     primeiro afasta o numero sem espalhar titulo e texto. */
  .elementor .esc-grid-ganhos.esc-grid-ganhos > .elementor-element > .elementor-widget:first-child{
    margin-bottom:10px;
  }

  /* 6.3 "Como funciona a Jornada". Cada passo e uma linha de selo + texto.
     O selo ja tem largura fixa (52px, tambem nos breakpoints), mas o bloco
     de texto e um container aninhado, e o Elementor da width:100% a esses
     — 52 + 32 de gap + 100% nao cabe, a linha quebrava e o numero virava
     um bloco de 92px sozinho em cima do texto. */
  .elementor .esc-passos.esc-passos > .elementor-element{
    flex-wrap:nowrap; --gap:18px; gap:18px;
  }
  .elementor .esc-passos.esc-passos > .elementor-element > .e-con:last-child{
    --width:auto; flex:1 1 auto; min-width:0;
  }
  /* o titulo dessa secao e sticky pra acompanhar a lista no desktop de duas
     colunas. Numa coluna so, ele flutua por cima dos proprios passos.
     Vai por CSS: o controle "Position" nao tem variante por breakpoint —
     position_mobile grava no painel, mas nao chega a renderizar. */
  .elementor .esc-passos-titulo.esc-passos-titulo{position:static;}

  /* 6.4 Os 7 patamares. Deitada, a escada precisa de 1140px — nao ha versao
     honesta dela em 375. Empilhada, cada degrau entra 8px mais que o
     anterior: as bordas de cima e da esquerda que ja existem passam a
     desenhar a mesma escada, agora acompanhando a leitura de cima pra
     baixo. A largura acompanha o recuo pra nada estourar a direita. */
  .elementor .esc-escada.esc-escada > .elementor-element{padding:16px 14px 18px;}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(2){margin-left:8px;--width:calc(100% - 8px);}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(3){margin-left:16px;--width:calc(100% - 16px);}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(4){margin-left:24px;--width:calc(100% - 24px);}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(5){margin-left:32px;--width:calc(100% - 32px);}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(6){margin-left:40px;--width:calc(100% - 40px);}
  .elementor .esc-escada.esc-escada > .elementor-element:nth-child(7){margin-left:48px;--width:calc(100% - 48px);}

  /* 6.5 FAQ: nao ha espaco pro recuo de 90px na resposta */
  .elementor .esc-faq.esc-faq.esc-faq .elementor-accordion .elementor-tab-content{
    padding:0 8px 24px 0;
  }
  .elementor .esc-faq.esc-faq.esc-faq .elementor-tab-title{gap:14px;padding:20px 0;}
}