.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==================================================================
   JULIA NORIKO YOKOYAMA — ESTILOS

   As fontes NÃO são carregadas aqui. Elas vêm pela tag <link> do
   snippet "fontes-header", no cabeçalho. Isso é de propósito: um
   @import dentro da folha de estilo bloqueia a renderização e cria
   uma requisição em fila, o que atrasa a primeira pintura da página.
   ================================================================== */

/* ==================================================================
   JULIA NORIKO YOKOYAMA — ESTILOS
   Cole TODO este arquivo em:
   Elementor > Configurações do Site > CSS personalizado
   ou em Aparência > Personalizar > CSS adicional
   Não envolva em tags <style>.
   ================================================================== */


/* ==================================================================
   PAINEL DE IMAGENS
   Único lugar para trocar as imagens do site.
   Suba na Biblioteca de Mídia, copie o link e cole dentro do url('').
   Use o caminho SEM o domínio, começando com /wp-content/
   Exemplo: url('/wp-content/uploads/2026/08/capa.jpg')
   ================================================================== */
:root{
  --yj-logo-clara:  url('/wp-content/uploads/2026/08/logo-Branco.png');
  --yj-logo-escura: url('/wp-content/uploads/2026/08/logo-Roxo.png');

  --yj-foto-capa:   url('/wp-content/uploads/2026/09/Banner-HeroDesktop-Hero2.3.png');
  --yj-foto-capa-mobile: url('/wp-content/uploads/2026/09/Banner-HeroMobiles-Hero2.3.png');
  /* --yj-foto-espaco removida: a coluna ao lado do texto da
     apresentação agora mostra a logo, e não uma foto. */

  /* FAIXA DA EXPERIÊNCIA: foto horizontal da bolachinha e guardanapo */
  /* FAIXA DA EXPERIÊNCIA
     Duas fotos que se alternam a cada 5 segundos, com cruzamento
     suave. A foto 1 é a que aparece primeiro, assim que a pessoa
     chega na seção. Cada uma tem versão para desktop e para celular. */
  --yj-detalhe-1:        url('/wp-content/uploads/2026/08/Experiencia-BolachinhaDesktop--scaled.png');
  --yj-detalhe-1-mobile: url('/wp-content/uploads/2026/08/Experiencia-BolachinhaMobile-.png');
  --yj-detalhe-2:        url('/wp-content/uploads/2026/08/Experiencia-BolachinhaDesktop-scaled.png');
  --yj-detalhe-2-mobile: url('/wp-content/uploads/2026/08/Experiencia-BolachinhaMobile.png');

  /* CARROSSEL DE RESULTADOS
     Imagens de antes e depois já montadas, em formato vertical.
     São 7 casos. Para acrescentar, crie a variável aqui, a classe
     .yj-res-8 mais abaixo e o slide no bloco 03-resultados.html. */
  --yj-resultado-1: url('/wp-content/uploads/2026/09/Antes-e-Depois1.1.jpg');
  --yj-resultado-2: url('/wp-content/uploads/2026/08/Antes-e-Depois2-.jpg');
  --yj-resultado-3: url('/wp-content/uploads/2026/08/Antes-e-Depois3-.jpg');
  --yj-resultado-4: url('/wp-content/uploads/2026/08/Antes-e-Depois4-.jpg');
  --yj-resultado-5: url('/wp-content/uploads/2026/08/Antes-e-Depois5-.jpg');
  --yj-resultado-6: url('/wp-content/uploads/2026/08/Antes-e-Depois6-.jpg');
  --yj-resultado-7: url('/wp-content/uploads/2026/09/Antes-e-Depois7.1.jpg');
  --yj-resultado-8: url('/wp-content/uploads/2026/09/Antes-e-Depois8.jpg');

  /* CARROSSEL DE FEEDBACKS
     Prints de conversa já recortados. Mesma regra dos slides. */
  --yj-feedback-1: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia.png');
  --yj-feedback-2: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-2.png');
  --yj-feedback-3: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-3.png');
  --yj-feedback-4: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-4.png');
  --yj-feedback-5: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-5.png');
  --yj-feedback-6: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-6.png');
  --yj-feedback-7: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-7.png');
  --yj-feedback-8: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-8.png');
  --yj-feedback-9: url('/wp-content/uploads/2026/08/FeedBacksFeedbacks-Julia-9.png');

  /* Proporção de cada print, no formato largura/altura.
     Se você padronizar tudo em 1080x1080, pode deixar como está.
     Se usar os prints originais, escreva a medida de cada um,
     por exemplo: --yj-feedback-1-prop: 1320/538; */
  --yj-feedback-1-prop: 1/1;
  --yj-feedback-2-prop: 1/1;
  --yj-feedback-3-prop: 1/1;
  --yj-feedback-4-prop: 1/1;
  --yj-feedback-5-prop: 1/1;
  --yj-feedback-6-prop: 1/1;
  --yj-feedback-7-prop: 1/1;
  --yj-feedback-8-prop: 1/1;
  --yj-feedback-9-prop: 1/1;

}


/* ------------------------------------------------------------------
   FONTE DA MARCA
   A Ergisa é licenciada e não existe em CDN público. Se você tiver o
   arquivo .woff2, suba na Biblioteca de Mídia, cole o caminho abaixo
   e descomente. A Playfair Display substitui até lá.
------------------------------------------------------------------ */
/*
@font-face{
  font-family:'Ergisa';
  src:url('/wp-content/uploads/2026/08/Ergisa.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
*/


/* ==================================================================
   TOKENS
   ================================================================== */
:root{
  --yj-roxo:#50345A;
  --yj-roxo-fundo:#493050;
  --yj-lilas:#DBC9DF;
  --yj-lilas-veu:#F4EFF6;
  --yj-branco:#FFFFFF;
  --yj-tinta:#2F2434;
  --yj-tinta-suave:#6B5E72;

  --yj-display:'Ergisa','Playfair Display',Georgia,serif;
  --yj-corpo:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* LARGURA DA COLUNA CENTRAL. Troque para 1140px se preferir. */
  --yj-largura:1280px;

  --yj-margem:clamp(1.25rem,4vw,2.5rem);
  --yj-ritmo:clamp(4rem,11vw,9rem);
}


/* ==================================================================
   ESTRUTURA
   .yj-full    o fundo vai de ponta a ponta da tela
   .yj-interno o conteúdo fica preso na coluna central
   ================================================================== */
.yj-full{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.yj-interno{
  width:100%;
  max-width:var(--yj-largura);
  margin-inline:auto;
}
body{ overflow-x:hidden; }


/* ==================================================================
   RESET LOCAL
   ================================================================== */
[class^="yj-"], [class*=" yj-"], [class^="yj-"] *, [class*=" yj-"] *{
  box-sizing:border-box;
}
.yj-secao{
  font-family:var(--yj-corpo);
  font-weight:300;
  font-size:clamp(0.875rem,0.82rem + 0.22vw,1rem);
  line-height:1.85;
  color:var(--yj-tinta);
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
/* O :where() deixa o reset com especificidade zero, para que ele
   nunca anule as regras de espaçamento dos componentes abaixo. */
.yj-secao :where(h1,h2,h3,h4,h5,p,ol,ul,blockquote,figure){
  margin:0;
  padding:0;
}
.yj-secao :where(ol,ul){ list-style:none; }
.yj-secao a{ color:inherit; }
.yj-secao ::selection{ background:var(--yj-lilas); color:var(--yj-roxo); }
.yj-secao :focus-visible{ outline:2px solid var(--yj-roxo); outline-offset:4px; }
.yj-escuro :focus-visible,
.yj-hero :focus-visible{ outline-color:var(--yj-lilas); }

.yj-rotulo{
  font-size:clamp(0.56rem,0.5rem + 0.2vw,0.64rem);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  line-height:1.7;
}


/* ==================================================================
   TEXTO SÓ PARA LEITORES DE TELA E BUSCADORES
   Usado quando o texto está dentro da imagem. O conteúdo aqui precisa
   ser a transcrição exata do que aparece na arte, nada além disso.
   Não troque por display:none nem visibility:hidden: os dois tiram o
   texto da árvore de acessibilidade e o Google desconsidera.
   ================================================================== */
.yj-oculto{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ==================================================================
   HERO E CABEÇALHO
   O cabeçalho fica dentro do hero, no topo. Sem posição fixa, porque
   isso exigiria JavaScript. O botão flutuante de WhatsApp cobre a
   necessidade de um atalho permanente.
   ================================================================== */
.yj-hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:8rem var(--yj-margem) clamp(3rem,8vw,6rem);
  padding-bottom:max(clamp(3rem,8vw,6rem), env(safe-area-inset-bottom));
  overflow:hidden;
  background:#C9C1BC;
  isolation:isolate;
}
.yj-hero-foto{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--yj-foto-capa);
  background-size:cover;
  background-position:72% center;
}

/* Escurecimento NEUTRO e localizado, só atrás do texto.
   Preserva o cinza da foto (sem puxar para o roxo) e mantém o topo
   claro, para a logo e o link em roxo funcionarem ali.
   Para suavizar ou reforçar, mexa apenas nos valores de opacidade. */
/* O escurecimento de fundo está DESLIGADO: a legibilidade vem de uma
   um véu bem suave atrás do texto somado a uma sombra discreta nas
   letras. Dividir o trabalho entre os dois evita ter que carregar no
   peso de qualquer um deles, que é o que suja a letra serifada.
   Para clarear a foto, baixe os valores do gradiente abaixo. */
.yj-hero-veu{
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(66% 62% at 24% 50%,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.19) 44%,
    rgba(0,0,0,.06) 76%,
    rgba(0,0,0,0) 100%);
}

.yj-topo{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  padding:clamp(1rem,3vw,1.6rem) var(--yj-margem);
  padding-top:max(clamp(1rem,3vw,1.6rem), env(safe-area-inset-top));
}
.yj-topo .yj-interno{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.yj-marca{
  display:block;
  width:clamp(118px,24vw,180px);
  height:clamp(40px,7.5vw,54px);
  background-image:var(--yj-logo-clara);
  background-size:contain;
  background-position:left center;
  background-repeat:no-repeat;
  text-decoration:none;
  flex:0 0 auto;
}
.yj-topo-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--yj-corpo);
  font-size:clamp(0.55rem,1.6vw,0.62rem);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--yj-roxo);
  text-decoration:none;
  border-bottom:1px solid rgba(80,52,90,.45);
  transition:border-color .4s ease;
  white-space:nowrap;
  flex:0 0 auto;
}
.yj-topo-link:hover{ border-color:var(--yj-roxo); color:var(--yj-roxo); }

.yj-hero .yj-interno{ position:relative; }
.yj-hero-texto{ max-width:none; color:var(--yj-branco); }
/* Sem sombra no desktop: o fundo da capa nova já é escuro o
   suficiente para o texto branco ler sozinho ali. */
.yj-hero-titulo{
  font-family:var(--yj-display);
  font-weight:400;
  font-size:clamp(3rem,8.6vw,6.9rem);
  line-height:1.06;
  color:var(--yj-branco);
}
.yj-hero-titulo em{
  font-style:italic;
  color:var(--yj-lilas);
}
.yj-hero-sub{
  font-family:var(--yj-display);
  font-style:italic;
  font-size:clamp(1.6rem,4vw,2.7rem);
  line-height:1.22;
  margin-top:1.2rem !important;
  color:var(--yj-branco);
}


/* ==================================================================
   APRESENTAÇÃO
   ================================================================== */
/* O respiro de cima é menor que o de baixo porque esta seção vem
   logo depois da capa, que já ocupa a tela inteira. */
.yj-apresentacao{
  background:var(--yj-branco);
  padding:clamp(1.75rem,4vw,3rem) var(--yj-margem) var(--yj-ritmo);
}
.yj-assinatura{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(.6rem,2.5vw,2.25rem);
  padding-bottom:clamp(1.5rem,4vw,2.5rem);
  border-bottom:1px solid var(--yj-lilas);
}
.yj-assinatura h2{
  font-family:var(--yj-display);
  font-weight:400;
  font-size:clamp(1.55rem,4.4vw,2.65rem);
  line-height:1;
  color:var(--yj-roxo);
}
.yj-risco{ width:1px; height:2.2rem; background:var(--yj-lilas); }
.yj-assinatura .yj-rotulo{ color:var(--yj-tinta-suave); }

/* Coluna única: com o texto mais curto, duas colunas deixariam o
   segundo parágrafo solto e desequilibrado. */
.yj-texto-duplo{
  display:grid;
  gap:clamp(1rem,2.5vw,1.5rem);
  margin-top:clamp(2rem,5vw,3rem) !important;
  max-width:46rem;
}

/* Grid de duas colunas da apresentação: texto à esquerda, logo à
   direita. No celular empilha, com a logo vindo antes do texto.
   Dentro desta seção, o texto e a frase grifada ignoram o teto de
   46rem que têm por padrão, porque aqui é a própria coluna do grid
   quem define a largura. Sem isso, o texto parava bem antes da
   borda, e mexer no grid não fazia diferença nenhuma visível. */
.yj-apresentacao-grid .yj-texto-duplo,
.yj-apresentacao-grid .yj-destaque{
  max-width:none;
}
/* A coluna da logo tem largura FIXA de verdade, sem faixa nenhuma:
   ela nunca varia, e o texto absorve tudo o que sobrar. Para mudar o
   tamanho da logo, mexa só no valor abaixo (220px). */
.yj-apresentacao-grid{
  display:grid;
  grid-template-columns:1fr 220px;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
/* Só a logo, sem quadro nem fundo: a arte fica solta na coluna,
   empurrada para a direita. */
.yj-apresentacao-logo{
  aspect-ratio:4/5;
  background-image:var(--yj-logo-escura);
  background-size:auto 68%;
  background-position:right center;
  background-repeat:no-repeat;
  /* Desloca a arte para além da borda da coluna. Puramente visual:
     não mexe no espaço que a coluna ocupa no grid, só empurra a
     logo para a direita dentro dele. Para ajustar, mude só o valor
     do translateX. */
  transform:translateX(clamp(0px,4vw,48px));
}
/* Texto justificado. A hifenização evita os vãos largos entre
   palavras que o justificado costuma abrir em coluna estreita, e a
   última linha fica alinhada à esquerda, como manda a tipografia. */
.yj-texto-duplo p{
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.yj-texto-duplo strong{ font-weight:600; color:var(--yj-roxo); }

/* ------------------------------------------------------------------
   FRASE GRIFADA
   O fundo roxo acompanha só as letras, linha por linha, como um
   marcador de texto. O box-decoration-break: clone é o que faz cada
   linha ganhar o próprio recuo. O line-height alto cria o respiro
   entre as barras.
------------------------------------------------------------------ */
.yj-destaque{
  margin-top:clamp(2.25rem,6vw,4rem) !important;
  padding:0 !important;
  background:none;
  border:0;
  max-width:46rem;
  font-family:var(--yj-display);
  font-style:italic;
  font-size:clamp(1.05rem,2.5vw,1.5rem);
  line-height:2.3;
  color:var(--yj-roxo);
  /* Justificado para as barras do grifo terminarem alinhadas à
     direita. A última linha fica à esquerda: forçá-la a esticar
     abriria vãos enormes entre as poucas palavras que sobram. */
  text-align:justify;
  text-align-last:left;
}
/* Marca-texto: a caixa roxa acompanha cada linha, colada nas letras.
   O box-decoration-break clone é o que faz cada linha ganhar a sua
   própria caixa, em vez de um bloco único. */
.yj-destaque span{
  display:inline;
  background:var(--yj-roxo);
  color:var(--yj-branco);
  padding:.18em .4em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}


/* ==================================================================
   BOTÃO
   ================================================================== */

/* O tema do WordPress define cor para <a> com especificidade alta,
   então o branco do botão precisa ser declarado em todos os estados. */
.yj-secao a.yj-botao,
.yj-secao a.yj-botao:link,
.yj-secao a.yj-botao:visited,
.yj-secao a.yj-botao:hover,
.yj-secao a.yj-botao:focus,
.yj-secao a.yj-botao:active,
.yj-secao a.yj-botao .yj-seta,
.yj-secao a.yj-flutuante,
.yj-secao a.yj-flutuante:link,
.yj-secao a.yj-flutuante:visited,
.yj-secao a.yj-flutuante:hover{
  color:var(--yj-branco) !important;
  text-decoration:none !important;
}
.yj-secao a.yj-botao.yj-claro:hover,
.yj-secao a.yj-botao.yj-claro:hover .yj-seta,
.yj-secao a.yj-botao.yj-nude,
.yj-secao a.yj-botao.yj-nude:link,
.yj-secao a.yj-botao.yj-nude:visited,
.yj-secao a.yj-botao.yj-nude:hover,
.yj-secao a.yj-botao.yj-nude .yj-seta{
  color:var(--yj-roxo) !important;
}

.yj-botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  min-height:42px;
  margin-top:clamp(2rem,5vw,2.75rem);
  padding:.8rem 1.5rem;
  border-radius:999px;
  background:var(--yj-roxo);
  color:var(--yj-branco);
  text-decoration:none;
  font-family:var(--yj-corpo);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  transition:background .3s ease, transform .3s ease;
}
.yj-botao:hover{
  background:#3E2748;
  color:var(--yj-branco);
  transform:translateY(-2px);
}
.yj-seta{ transition:transform .3s ease; }
.yj-botao:hover .yj-seta{ transform:translateX(4px); }
.yj-botao.yj-claro{
  background:transparent;
  color:var(--yj-branco);
  border:1px solid rgba(219,201,223,.55);
}
.yj-botao.yj-claro:hover{
  background:var(--yj-lilas);
  color:var(--yj-roxo);
  border-color:var(--yj-lilas);
}

/* Variante cheia e clara, para usar por cima da foto */
/* Só muda a cor e a sombra: o tamanho é o mesmo dos outros botões */
.yj-botao.yj-nude{
  background:var(--yj-branco);
  border:0;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}
.yj-botao.yj-nude:hover{ background:var(--yj-lilas); transform:translateY(-2px); }


/* ==================================================================
   SEÇÕES ROXAS
   Espaçamento pela metade em cima e embaixo, para não dobrar no
   encontro entre duas seções roxas seguidas.
   ================================================================== */
.yj-escuro{
  background:var(--yj-roxo-fundo);
  color:var(--yj-branco);
  padding:calc(var(--yj-ritmo) * .5) var(--yj-margem);
}

.yj-escuro-inicio{ padding-top:var(--yj-ritmo); }
.yj-escuro-fim{ padding-bottom:var(--yj-ritmo); }


/* ==================================================================
   SEÇÃO LILÁS
   Terceiro tom da paleta, usado para quebrar a sequência de blocos
   roxos. Tudo que era branco ou lilás vira roxo aqui.
   ================================================================== */
.yj-secao-lilas{
  background:var(--yj-lilas);
  color:var(--yj-roxo);
  padding:var(--yj-ritmo) var(--yj-margem);
}
.yj-secao-lilas .yj-cabeca h3{ color:var(--yj-roxo); }
.yj-secao-lilas .yj-cabeca p{ color:var(--yj-roxo); opacity:.88; }
.yj-secao-lilas .yj-fio{ background:var(--yj-roxo); opacity:.35; }
.yj-secao-lilas .yj-depoimento{
  background:var(--yj-branco);
  border:0;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(80,52,90,.10);
}
.yj-secao-lilas .yj-depoimento p{ color:var(--yj-roxo); }
.yj-secao-lilas .yj-depoimento cite{ color:var(--yj-roxo); opacity:.75; }
.yj-secao-lilas .yj-aspas{ color:var(--yj-lilas); opacity:1; }

.yj-cabeca{ text-align:center; max-width:44rem; margin-inline:auto; }
.yj-cabeca h3{
  font-family:var(--yj-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem,3.5vw,2.3rem);
  line-height:1.25;
  color:var(--yj-branco);
  text-wrap:balance;
}
.yj-fio{
  width:min(180px,40%);
  height:1px;
  margin:clamp(1.1rem,3vw,1.6rem) auto 0;
  background:var(--yj-lilas);
  transform-origin:center;
}
.yj-cabeca p{
  margin:clamp(1.1rem,3vw,1.6rem) auto 0 !important;
  color:rgba(255,255,255,.78);
  max-width:38rem;
  text-wrap:pretty;
}


/* ==================================================================
   CARROSSEL — arrastável, com a do meio em foco

   COMO FUNCIONA
   O trilho ocupa a tela inteira e recebe um recuo lateral igual a
   metade da tela menos metade do slide. Esse recuo é o que permite
   que o PRIMEIRO e o ÚLTIMO também fiquem centralizados, e é o que
   faz aparecer uma fatia da anterior e da próxima dos dois lados.
   O scroll-snap encaixa sempre uma no centro.

   Arrasta com o dedo no celular e com a barra ou o trackpad no
   computador. Não gira sozinho e não é infinito: para o loop dar a
   volta seria preciso JavaScript.
   ================================================================== */
.yj-carrossel{
  --yj-vao:clamp(.75rem,2vw,1.5rem);
  position:relative;
  margin-top:clamp(2rem,5vw,3.25rem);
  /* sai da coluna central e ocupa a tela toda, para as fatias das
     laterais virem da borda */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.yj-trilho{
  display:flex;
  gap:var(--yj-vao);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-block:0 .25rem;
  padding-inline:calc(50vw - var(--yj-slide-largura) / 2);
  scroll-padding-inline:calc(50vw - var(--yj-slide-largura) / 2);
}

/* Barra de rolagem escondida: quem navega é o dedo no celular e o
   arrastar com o mouse no computador, ambos ligados pelo script. */
.yj-trilho{ scrollbar-width:none; -ms-overflow-style:none; }
.yj-trilho::-webkit-scrollbar{ display:none; }

/* ---------- setas ----------
   Ficam escondidas até o script assumir, para não sobrar botão morto
   se ele não carregar. Cada uma é centralizada exatamente sobre a
   borda do slide do meio, usando a mesma variável de largura. */
.yj-seta-nav{ display:none; }

.yj-carrossel-ativo .yj-seta-nav{
  display:grid;
  place-content:center;
  position:absolute;
  /* Bem abaixo do meio: em retrato 3:4 o rosto ocupa a metade de
     cima, e a seta centralizada acabava cobrindo perfis. */
  top:80%;
  z-index:4;
  width:46px;
  height:46px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(219,201,223,.5);
  background:rgba(47,29,53,.72);
  backdrop-filter:blur(6px);
  color:var(--yj-branco);
  font-family:var(--yj-corpo);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease;
}
.yj-carrossel-ativo .yj-seta-ant{
  left:calc(50% - var(--yj-slide-largura) / 2);
  transform:translate(-50%,-50%);
}
.yj-carrossel-ativo .yj-seta-prox{
  left:calc(50% + var(--yj-slide-largura) / 2);
  transform:translate(-50%,-50%);
}
.yj-carrossel-ativo .yj-seta-nav:hover{ background:var(--yj-roxo); }

/* Aqui elas saem de cima das fotos e vão para baixo do carrossel,
   com um respiro. O translateX sozinho (sem o -50% vertical dos
   outros carrosséis) é o que ancora a base do botão nessa posição,
   em vez de centralizá-lo sobre a linha dos 100%. */
/* Aqui as setas saem do posicionamento flutuante e viram uma linha
   normal, abaixo das fotos, com o texto entre elas. Isso resolve dois
   problemas de uma vez: o respiro passa a ser automático, herdado do
   fluxo da página, e o vão vazio entre as duas setas ganha conteúdo. */
.yj-carrossel-feedbacks .yj-seta-nav{
  position:static;
  transform:none;
}
.yj-carrossel-feedbacks-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,4vw,2rem);
  margin-top:clamp(1.5rem,4vw,2.25rem);
}
.yj-carrossel-dica{
  margin:0 !important;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--yj-roxo);
  opacity:.9;
  white-space:nowrap;
}

/* Na seção lilás o fundo é claro, então a seta inverte */
.yj-secao-lilas .yj-carrossel-ativo .yj-seta-nav{
  background:rgba(80,52,90,.85);
  border-color:rgba(80,52,90,.5);
}
.yj-secao-lilas .yj-carrossel-ativo .yj-seta-nav:hover{ background:#3E2748; }

/* No carrossel de movimento contínuo o encaixe fica desligado:
   com ele ligado, o snap puxaria de volta a cada instante e o
   deslize ficaria tremido. */
.yj-carrossel-lento .yj-trilho{ scroll-snap-type:none; }

/* Mãozinha de agarrar, para deixar claro que dá para arrastar */
.yj-trilho{ cursor:grab; user-select:none; -webkit-user-select:none; }
.yj-trilho.yj-arrastando{ cursor:grabbing; }

.yj-slide{
  flex:0 0 var(--yj-slide-largura);
  scroll-snap-align:center;
  scroll-snap-stop:always;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(219,201,223,.08);
  border-radius:14px;
}

/* Resultados: imagem ou vídeo vertical com o antes e o depois dentro */
.yj-carrossel-resultados{ --yj-slide-largura:min(430px, 62vw); }
.yj-carrossel-resultados .yj-slide{ aspect-ratio:3/4; overflow:hidden; }

/* Vídeo preenche o slide igual às imagens, com o mesmo recorte */
.yj-slide video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  pointer-events:none;   /* o arrastar continua valendo por cima */
}
.yj-res-1{ background-image:var(--yj-resultado-1); }
.yj-res-2{ background-image:var(--yj-resultado-2); }
.yj-res-3{ background-image:var(--yj-resultado-3); }
.yj-res-4{ background-image:var(--yj-resultado-4); }
.yj-res-5{ background-image:var(--yj-resultado-5); }
.yj-res-6{ background-image:var(--yj-resultado-6); }
.yj-res-7{ background-image:var(--yj-resultado-7); }
.yj-res-8{ background-image:var(--yj-resultado-8); }

/* Feedbacks
   Os slides têm ALTURA fixa e largura livre, calculada pela proporção
   de cada imagem. Assim funciona tanto com prints padronizados no
   mesmo formato quanto com prints em proporções diferentes, sem
   sobrar faixa vazia em nenhum dos casos.

   Se você padronizar tudo em 1080x1080, é só deixar as proporções
   em 1/1 e todos ficam idênticos.

   Fundo transparente: uma vaga sem imagem fica invisível em vez de
   virar um retângulo branco. */
/* Aqui o slide tem ALTURA fixa e largura calculada pela proporção.
   Como os prints são quadrados, a largura é igual à altura, e a
   variável precisa repetir esse mesmo valor: é ela que posiciona as
   setas e o recuo lateral. Se as duas divergirem, as setas saem do
   lugar e vão parar em cima das fotos vizinhas. */
.yj-carrossel-feedbacks{ --yj-slide-largura:clamp(250px, 40vh, 420px); }
.yj-carrossel-feedbacks .yj-slide{
  height:clamp(250px, 40vh, 420px);
  width:auto;
  flex:0 0 auto;
  background-color:transparent;
  background-size:contain;
}
.yj-fb-1{ background-image:var(--yj-feedback-1); aspect-ratio:var(--yj-feedback-1-prop, 1/1); }
.yj-fb-2{ background-image:var(--yj-feedback-2); aspect-ratio:var(--yj-feedback-2-prop, 1/1); }
.yj-fb-3{ background-image:var(--yj-feedback-3); aspect-ratio:var(--yj-feedback-3-prop, 1/1); }
.yj-fb-4{ background-image:var(--yj-feedback-4); aspect-ratio:var(--yj-feedback-4-prop, 1/1); }
.yj-fb-5{ background-image:var(--yj-feedback-5); aspect-ratio:var(--yj-feedback-5-prop, 1/1); }
.yj-fb-6{ background-image:var(--yj-feedback-6); aspect-ratio:var(--yj-feedback-6-prop, 1/1); }
.yj-fb-7{ background-image:var(--yj-feedback-7); aspect-ratio:var(--yj-feedback-7-prop, 1/1); }
.yj-fb-8{ background-image:var(--yj-feedback-8); aspect-ratio:var(--yj-feedback-8-prop, 1/1); }
.yj-fb-9{ background-image:var(--yj-feedback-9); aspect-ratio:var(--yj-feedback-9-prop, 1/1); }

.yj-casos-nota{
  margin:clamp(1.5rem,4vw,2.25rem) auto 0 !important;
  max-width:46rem;
  text-align:center;
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:2;
  color:rgba(219,201,223,.7);
}


/* ==================================================================
   CARTÕES
   ================================================================== */
.yj-cartoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(2.25rem,6vw,4rem);
}
.yj-cartao{
  padding:clamp(1.5rem,3.5vw,2.5rem);
  border:1px solid rgba(219,201,223,.28);
}
.yj-cartao h4{
  font-family:var(--yj-display);
  font-weight:400;
  font-size:clamp(1.2rem,2.7vw,1.38rem);
  line-height:1.2;
  margin-bottom:.9rem !important;
  color:var(--yj-lilas);
}
.yj-cartao p{ color:rgba(255,255,255,.78); font-size:.86rem; }


/* ==================================================================
   DEPOIMENTOS
   ================================================================== */
.yj-depoimentos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(2.25rem,6vw,4rem);
}
.yj-depoimento{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:clamp(1.85rem,3.5vw,2.75rem);
  border:1px solid rgba(219,201,223,.28);
}
.yj-aspas{
  font-family:var(--yj-display);
  font-size:2.75rem;
  line-height:.55;
  color:var(--yj-lilas);
  opacity:.45;
}
.yj-depoimento p{
  font-family:var(--yj-display);
  font-style:italic;
  font-size:clamp(1rem,2vw,1.18rem);
  line-height:1.5;
  color:var(--yj-branco);
}
.yj-depoimento cite{
  margin-top:auto;
  font-family:var(--yj-corpo);
  font-style:normal;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--yj-lilas);
}


/* ==================================================================
   FAIXA DA EXPERIÊNCIA
   Texto em roxo sobre branco, e a foto logo abaixo ocupando a tela
   inteira, sem véu. Assim o dourado e o monograma aparecem limpos.
   ================================================================== */
.yj-faixa{
  background:var(--yj-branco);
  padding-top:var(--yj-ritmo);
}
.yj-faixa-texto{
  max-width:44rem;
  margin-inline:auto;
  padding:0 var(--yj-margem) clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.yj-faixa-texto h3{
  font-family:var(--yj-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem,3.5vw,2.3rem);
  line-height:1.25;
  color:var(--yj-roxo);
  text-wrap:balance;
}
.yj-faixa-texto .yj-fio{
  background:var(--yj-roxo);
  opacity:.35;
}
.yj-faixa-texto p{
  margin:clamp(1.1rem,3vw,1.6rem) auto 0 !important;
  max-width:38rem;
  color:var(--yj-tinta);
  text-wrap:pretty;
}
/* NO DESKTOP: a faixa vira um respiro com a logo roxa centralizada.
   O corte panorâmico de 2400x900 fatiava as fotos no meio e não as
   valorizava. NO CELULAR (regra mais abaixo) as fotos voltam, no
   enquadramento vertical, alternando entre as duas. */
.yj-faixa-fotos{
  position:relative;
  min-height:clamp(15rem,26vw,20rem);
  background-color:var(--yj-lilas-veu);
  background-image:var(--yj-logo-escura);
  background-size:auto clamp(100px,12vw,150px);
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
/* As camadas de foto só existem no celular */
.yj-faixa-foto{ display:none; }
.yj-faixa-foto-2{
  opacity:0;
  animation:yj-alterna 12s ease-in-out infinite;
}
@keyframes yj-alterna{
  0%,   42%  { opacity:0; }
  50%,  92%  { opacity:1; }
  100%       { opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .yj-faixa-foto-2{ animation:none; }
}


/* ==================================================================
   EXPERIÊNCIA
   ================================================================== */
.yj-experiencia{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(1.75rem,5vw,4.5rem);
  margin-top:clamp(2.25rem,6vw,4rem);
}
.yj-quadro{
  aspect-ratio:4/5;
  background-image:var(--yj-foto-espaco);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(219,201,223,.10);
  border:1px solid rgba(219,201,223,.28);
}
.yj-etapas li{
  padding:1.1rem 0;
  border-bottom:1px solid rgba(219,201,223,.25);
  color:rgba(255,255,255,.85);
}
.yj-etapas li:first-child{ border-top:1px solid rgba(219,201,223,.25); }
.yj-etapas span{
  display:block;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--yj-lilas);
  margin-bottom:.3rem;
}


/* ==================================================================
   RODAPÉ
   ================================================================== */
.yj-rodape{
  background:var(--yj-branco);
  text-align:center;
  padding:var(--yj-ritmo) var(--yj-margem) clamp(2rem,6vw,3.5rem);
  padding-bottom:max(clamp(2rem,6vw,3.5rem), env(safe-area-inset-bottom));
}
.yj-rodape-marca{
  width:min(100%,300px);
  height:clamp(70px,15vw,112px);
  margin:0 auto;
  background-image:var(--yj-logo-escura);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.yj-rodape-nome{
  font-family:var(--yj-display);
  font-size:clamp(.95rem,3.2vw,1.35rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--yj-roxo);
  margin:1.25rem 0 .5rem !important;
  line-height:1.3;
}
.yj-rodape .yj-cro{ color:var(--yj-tinta-suave); }

.yj-contatos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(2rem,5vw,2.5rem);
  max-width:64rem;
  margin:clamp(2.5rem,7vw,4.5rem) auto 0;
  padding-top:clamp(2rem,5vw,3.5rem);
  border-top:1px solid var(--yj-lilas);
}
.yj-contatos h5{
  font-family:var(--yj-display);
  font-weight:400;
  font-size:clamp(1rem,2.5vw,1.15rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--yj-roxo);
  margin-bottom:.8rem !important;
}
.yj-contatos a,
.yj-contatos p{
  color:var(--yj-tinta);
  text-decoration:none;
  font-size:.86rem;
  line-height:1.9;
  overflow-wrap:anywhere;
}
.yj-contatos a{ border-bottom:1px solid transparent; transition:border-color .3s ease; }
.yj-contatos a:hover{ border-color:var(--yj-roxo); }

.yj-creditos{
  margin-top:clamp(2.5rem,6vw,4rem) !important;
  padding-top:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--yj-lilas);
  max-width:64rem;
  margin-inline:auto;
  color:var(--yj-tinta-suave);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.8;
}


/* ==================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   Substitui o cabeçalho fixo como atalho permanente.
   ================================================================== */
.yj-flutuante{
  position:fixed;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  bottom:max(clamp(1rem,3vw,2rem), env(safe-area-inset-bottom));
  z-index:9998;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  min-height:52px;
  padding:0 1.5rem;
  border-radius:999px;
  background:var(--yj-roxo);
  color:var(--yj-branco);
  text-decoration:none;
  font-family:var(--yj-corpo);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(47,29,53,.3);
  transition:background .3s ease, transform .3s ease;
}
.yj-flutuante:hover{
  background:#3E2748;
  color:var(--yj-branco);
  transform:translateY(-2px);
}


/* ==================================================================
   ANIMAÇÃO DE ENTRADA
   Feita com scroll-driven animations, sem JavaScript. Navegadores
   que não suportam simplesmente mostram o conteúdo parado.
   ================================================================== */
@keyframes yj-entrada{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@keyframes yj-cresce{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .yj-revela{
      animation:yj-entrada linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 20%;
    }
    .yj-fio{
      animation:yj-cresce linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 25%;
    }
  }
}


/* ==================================================================
   BREAKPOINTS
   ================================================================== */
@media (max-width:1024px){
  .yj-experiencia{ grid-template-columns:1fr; }
  .yj-experiencia .yj-quadro{ max-width:34rem; margin-inline:auto; }
}
@media (max-width:860px){
  .yj-risco{ display:none; }
  .yj-assinatura{ gap:.4rem; }
  .yj-assinatura .yj-rotulo{ flex-basis:100%; }
  .yj-apresentacao-grid{ grid-template-columns:1fr; }
  .yj-apresentacao-logo{ order:-1; aspect-ratio:16/9; max-width:22rem; margin-inline:auto; background-size:auto 55%; background-position:center; transform:none; }
}
@media (max-width:700px){
  .yj-hero{
    min-height:93svh;
    align-items:center;
    padding-top:6rem;
    padding-bottom:6rem;
  }
  .yj-hero-foto{
    background-image:var(--yj-foto-capa-mobile);
    background-position:center center;
  }
  /* No celular o véu acompanha o texto, que fica no meio do quadro */
  .yj-hero-veu{
    background:radial-gradient(92% 50% at 50% 52%,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.20) 46%,
      rgba(0,0,0,.05) 80%,
      rgba(0,0,0,0) 100%);
  }

  .yj-hero-texto{ max-width:100%; }
  /* A sombra volta só aqui: no celular o véu é mais fraco e o texto
     precisa desse reforço extra para não se perder no fundo claro. */
  /* A capa nova é escura nas duas versões: a sombra específica do
     celular saiu, o texto lê bem sozinho sobre o fundo. */
  .yj-hero-titulo{
    font-size:clamp(2.95rem,13vw,4.4rem);
  }



  /* No celular o slide do meio ocupa 72% da tela, deixando as fatias
     da anterior e da próxima visíveis nos dois lados. */
  .yj-carrossel-resultados{ --yj-slide-largura:72vw; }
  .yj-carrossel-feedbacks{ --yj-slide-largura:clamp(230px, 68vw, 340px); }
  .yj-carrossel-feedbacks .yj-slide{ height:clamp(230px, 68vw, 340px); }
  .yj-carrossel-ativo .yj-seta-nav{ width:40px; height:40px; font-size:1rem; }

  .yj-faixa-fotos{
    min-height:0;
    aspect-ratio:1200/1100;
    background-image:none;
  }
  .yj-faixa-foto{
    display:block;
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .yj-faixa-foto-1{ background-image:var(--yj-detalhe-1-mobile); }
  .yj-faixa-foto-2{ background-image:var(--yj-detalhe-2-mobile); }



  /* O botão acompanha o tamanho do texto, sem esticar na largura toda. */
  .yj-botao{ width:auto; }
  .yj-flutuante{ font-size:0; gap:0; width:56px; padding:0; justify-content:center; }
  .yj-flutuante .yj-zap{ font-size:1.25rem; }
}
@media (max-width:400px){
  .yj-topo-link{ letter-spacing:.14em; }
  .yj-hero-titulo{ font-size:2rem; }
  .yj-etapas li{ padding:.95rem 0; }
}
@media (max-height:520px) and (orientation:landscape){
  .yj-hero{ min-height:auto; padding-top:7rem; padding-bottom:3rem; }
}
@media print{
  .yj-flutuante,.yj-topo{ display:none; }
  .yj-escuro{ background:none; color:#000; }
}/* End custom CSS */