/* ==========================================================================
   LAVE & PEGUE — folha de estilo do template de home.

   NAO EDITE ESTE ARQUIVO A MAO: ele e gerado a partir do index.html.
   Toda regra e prefixada com #lp-site para vencer, por especificidade, o CSS
   que o tema e o Elementor injetam sobre h1, a e button.
   ========================================================================== */

/* O template nao usa o header do tema, entao zera a margem do documento. */
body { margin: 0; background: #FFFFFF; }

/* Logado no WordPress, a barra de admin ocupa o topo da janela. Sem isto,
   o cabecalho fixo ficaria escondido atras dela. */
body.admin-bar #lp-site .lp-topo { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #lp-site .lp-topo { top: 46px; }
}

/* ==========================================================================
   LAVE & PEGUE — HERO
   Todas as classes usam o prefixo .lp- para nao colidir com o CSS do tema.
   ========================================================================== */

#lp-site .lp-hero,
#lp-site .lp-hero *,
#lp-site .lp-hero *::before,
#lp-site .lp-hero *::after { box-sizing: border-box; }

#lp-site .lp-hero {
  /* ---- Tokens ---- */
  --lp-fonte-titulo: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lp-fonte-texto:  "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --lp-rosa:   #C77CA6;
  --lp-ciano:  #1CC3D4;
  --lp-branco: #FFFFFF;
  --lp-transicao: .32s cubic-bezier(.4, 0, .2, 1);
  --lp-transicao-rapida: .16s cubic-bezier(.4, 0, .2, 1);   /* hover do menu */

  /* Arte oficial da bolha: 470x470, RGBA com transparencia. */
  --lp-arte-bolha: url('bolha.png');

  /* Intensidade geral das bolhas. Cada bolha tem seu peso relativo (--o);
     este token multiplica todos de uma vez, preservando a variacao entre
     elas. 0 some, 1 mostra a arte com opacidade cheia. */
  --lp-bolha-forca: .45;

  --lp-raio: 60px;        /* arredondamento inferior */

  /* Grid de 12 colunas. Lateral = 1 coluna de cada lado (8,33% da tela),
     deixando 10 colunas de conteudo. Para calibrar, mexa so no multiplicador:
     0.5 afina, 1.5 engrossa. O piso de 20px protege telas de 320px. */
  --lp-colunas: 12;
  --lp-lateral: max(20px, calc(100% / var(--lp-colunas) * 1));

  /* ESCALA MESTRE. Governa o ritmo vertical E o corpo da tipografia, para que
     a composicao encolha inteira, em bloco, em vez de o texto crescer enquanto
     os espacos encolhem (ou o contrario).

     min() entre largura e altura de proposito: numa tela larga e baixa — um
     notebook 1366x768 — so a largura mandaria, e o vazio acima do titulo
     sozinho comeria metade da tela. Com o min(), a altura assume o comando
     nessas telas e a composicao inteira se ajusta.

     Calibrada para coincidir com 1vw em 1920x1080, que e a tela onde o
     desenho foi aprovado: la nada muda. */
  --lp-escala: min(1vw, 1.6vh);

  /* Barra do topo. Como ela e fixa, nao ocupa espaco no fluxo — a altura
     precisa ser reservada no padding-top do hero. 39px = altura da logo. */
  --lp-topo-pad: clamp(14px, calc(var(--lp-escala) * 1.4), 24px);
  --lp-topo-alt: calc(var(--lp-topo-pad) * 2 + 39px);

  position: relative;
  background: var(--lp-rosa);
  border-radius: 0 0 var(--lp-raio) var(--lp-raio);
  font-family: var(--lp-fonte-texto);
  color: var(--lp-branco);
  padding-top: var(--lp-topo-alt);      /* espaco da barra fixa */
  padding-bottom: clamp(56px, calc(var(--lp-escala) * 5.5), 94px);
  -webkit-font-smoothing: antialiased;
}

#lp-site .lp-hero__inner {
  /* Sem max-width: a lateral e proporcional, o conteudo acompanha a tela.

     container-type continua aqui por um motivo estrutural, nao tipografico:
     ele aplica contain, que faz deste elemento o bloco de contencao de
     descendentes com position: fixed. E por isso que a barra do topo mora
     FORA daqui — se estivesse dentro, ficaria presa ao hero em vez de
     grudar na janela. */
  container-type: inline-size;
  padding-inline: var(--lp-lateral);

  position: relative;   /* mantem o conteudo acima da camada de bolhas */
  z-index: 1;
}

/* ------------------------------------------------------------- BOLHAS --- */
/* Camada decorativa atras de todo o conteudo do hero.
   O proprio container recorta no arredondamento do hero (border-radius
   herdado + overflow), entao as bolhas podem sangrar pelas bordas sem
   vazar para fora da forma rosa. */
#lp-site .lp-bolhas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

#lp-site .lp-bolha {
  position: absolute;
  width: var(--t);
  aspect-ratio: 1;
  opacity: calc(var(--o, .8) * var(--lp-bolha-forca));
  background-image: var(--lp-arte-bolha);
  background-size: cover;
  background-repeat: no-repeat;

  /* O empurrao do mouse entra por transform, via JS. Avisar o navegador
     evita repintura a cada quadro. */
  will-change: transform;
}

/* Tamanho (--t), peso relativo (--o) e posicao de cada bolha.
   --o e relativo, nao opacidade final: a opacidade sai de --o multiplicado
   por --lp-bolha-forca. Tamanhos em clamp() e posicoes em % para a
   composicao se manter em qualquer largura; valores negativos sangram. */
#lp-site .lp-bolha:nth-child(1) { --t: clamp(220px, 26vw, 480px); --o: .55; top:    -8%; right:  2%; }
#lp-site .lp-bolha:nth-child(2) { --t: clamp(120px, 14vw, 260px); --o: .75; top:    34%; right: 14%; }
#lp-site .lp-bolha:nth-child(3) { --t: clamp(60px,   7vw, 120px); --o: 1;   top:    18%; right: 30%; }
#lp-site .lp-bolha:nth-child(4) { --t: clamp(180px, 21vw, 380px); --o: .50; bottom:-10%; right: -4%; }
#lp-site .lp-bolha:nth-child(5) { --t: clamp(70px,   8vw, 140px); --o: .90; bottom: 22%; right: 22%; }
#lp-site .lp-bolha:nth-child(6) { --t: clamp(50px,   6vw, 100px); --o: .75; top:    22%; left:  12%; }
#lp-site .lp-bolha:nth-child(7) { --t: clamp(140px, 17vw, 300px); --o: .38; top:    56%; left:  -7%; }
#lp-site .lp-bolha:nth-child(8) { --t: clamp(40px, 4.5vw,  78px); --o: .95; top:    52%; right:  8%; }

/* Bolhas menores, preenchendo os vazios que sobraram: calha esquerda,
   faixa larga acima do titulo, lado direito do botao, folga entre botao e
   numeros, borda direita e rodape. */
#lp-site .lp-bolha:nth-child(9)  { --t: clamp(34px, 3.8vw, 62px); --o: .85; top:    12%; left:   4%; }
#lp-site .lp-bolha:nth-child(10) { --t: clamp(26px, 2.8vw, 46px); --o: 1;   top:     8%; right: 44%; }
#lp-site .lp-bolha:nth-child(11) { --t: clamp(44px,   5vw, 86px); --o: .60; top:    27%; right: 46%; }
#lp-site .lp-bolha:nth-child(12) { --t: clamp(30px, 3.2vw, 54px); --o: .90; top:    66%; left:  34%; }
#lp-site .lp-bolha:nth-child(13) { --t: clamp(52px,   6vw, 96px); --o: .55; bottom: -4%; left:   1%; }
#lp-site .lp-bolha:nth-child(14) { --t: clamp(38px, 4.2vw, 70px); --o: .80; bottom:  8%; right: 26%; }
#lp-site .lp-bolha:nth-child(15) { --t: clamp(28px,   3vw, 50px); --o: 1;   top:    40%; right:  2%; }
#lp-site .lp-bolha:nth-child(16) { --t: clamp(46px, 5.4vw, 90px); --o: .50; top:    74%; right: 36%; }

/* Montserrat nos titulos, nav, botao e numeros.
   Roboto (herdado de .lp-hero) no texto corrido. */
#lp-site .lp-nav a,
#lp-site .lp-titulo,
#lp-site .lp-btn,
#lp-site .lp-numero__valor { font-family: var(--lp-fonte-titulo); }

/* --------------------------------------------------------------- TOPO --- */
/* Barra fixa ao topo da janela. Fica dentro de .lp-hero apenas para herdar
   os tokens — position: fixed a desprende do fluxo de qualquer forma, e o
   .lp-hero nao cria bloco de contencao (sem transform, filter ou contain). */
#lp-site .lp-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--lp-topo-pad);
  transition: background-color var(--lp-transicao),
              box-shadow      var(--lp-transicao),
              padding-block   var(--lp-transicao);
}

/* Ao sair do topo a barra precisa de fundo proprio: o texto e a logo sao
   brancos e passariam por cima da secao branca. */
#lp-site .lp-topo.is-fixo {
  background: var(--lp-rosa);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  padding-block: 18px;
}

#lp-site .lp-topo__inner {
  position: relative;          /* ancora o menu suspenso do mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--lp-lateral);
}

/* A moldura retangular ja faz parte do vetor — nao ha borda em CSS aqui.
   O SVG tem fill #fff embutido, entao ja nasce correto sobre o rosa. */
#lp-site .lp-logo {
  display: block;
  flex: none;
  line-height: 0;          /* remove o espaco de linha sob a imagem */
}
#lp-site .lp-logo img {
  display: block;
  width: 165px;            /* altura sai de viewBox 283,09 x 66 = ~38,5px */
  height: auto;
}

/* --------------------------------------------------------------- NAV ---- */
#lp-site .lp-nav { display: flex; align-items: center; gap: 16px; }

#lp-site .lp-nav a {
  color: var(--lp-branco);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;

  /* A Montserrat e carregada como fonte variavel (wght@300..700), por isso
     o peso interpola de forma continua em vez de saltar de 400 para 700. */
  transition: font-weight var(--lp-transicao-rapida);
}

#lp-site .lp-nav a:hover,
#lp-site .lp-nav a:focus-visible { font-weight: 700; }

/* Botao hamburguer (so aparece no mobile) */
#lp-site .lp-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--lp-branco);
}
#lp-site .lp-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
#lp-site .lp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#lp-site .lp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#lp-site .lp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ CHAMADA --- */
/* O respiro abaixo (.lp-numeros) compensa exatamente o que sai daqui,
   para que so o titulo e o botao subam e o bloco de numeros fique parado. */
#lp-site .lp-chamada { margin-top: clamp(64px, calc(var(--lp-escala) * 20), 344px); }

#lp-site .lp-titulo {
  margin: 0;
  font-size: clamp(30px, calc(var(--lp-escala) * 5), 86px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;                /* em, nao px: acompanha o corpo */
  text-transform: uppercase;
}
#lp-site .lp-titulo strong {
  font-weight: 700;
  font-style: italic;
}

/* --------------------------------------------------------------- CTA ---- */
#lp-site .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(24px, calc(var(--lp-escala) * 2.3), 40px);
  min-height: 70px;
  padding: 0 46px;
  background: var(--lp-ciano);
  color: var(--lp-branco);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
#lp-site .lp-btn:hover,
#lp-site .lp-btn:focus-visible { filter: brightness(1.06); transform: translateY(-2px); }

/* ------------------------------------------------------------ NUMEROS --- */
#lp-site .lp-numeros {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(52px, calc(var(--lp-escala) * 10.5), 180px);
}

#lp-site .lp-numero { padding: 0 34px; }   /* respiro maior: os numeros cresceram ~40% */
#lp-site .lp-numero:first-child { padding-left: 0; }

/* divisoria vertical entre as colunas */
#lp-site .lp-numero + .lp-numero { border-left: 1px solid rgba(255, 255, 255, .45); }

#lp-site .lp-numero__valor {
  display: block;
  font-size: clamp(34px, calc(var(--lp-escala) * 4.55), 78px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;               /* em, nao px: acompanha o corpo */
}

/* Alvo do contador. inline-block para aceitar a trava de largura que o JS
   aplica durante a contagem; tabular-nums mantem os digitos do mesmo corpo. */
#lp-site .lp-numero__valor [data-contador] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
#lp-site .lp-numero__label {
  display: block;
  margin-top: 12px;
  font-size: clamp(15px, calc(var(--lp-escala) * 1.16), 20px);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
}

/* --------------------------------------------------- PROXIMA SECAO ------ */
/* Placeholder vazio: existe so para dar curso de rolagem enquanto as demais
   secoes nao entram. Substituir pelo conteudo real (ou apagar). */
#lp-site .lp-espaco {
  min-height: 120vh;
  background: #FFFFFF;
}

/* ============================== RESPONSIVO ============================== */

@media (max-width: 1100px) {
  #lp-site .lp-nav { gap: 12px; }
  #lp-site .lp-nav a { font-size: 12px; letter-spacing: .3px; }
}

@media (max-width: 860px) {
  #lp-site .lp-hero {
    --lp-raio: 36px;
    --lp-topo-alt: calc(var(--lp-topo-pad) * 2 + 32px);   /* logo menor */
  }

  #lp-site .lp-logo img { width: 138px; }

  /* A mesma quantidade de bolhas numa area muito menor carregaria o fundo:
     no celular saem as quatro mais centrais. */
  #lp-site .lp-bolha:nth-child(10),
  #lp-site .lp-bolha:nth-child(11),
  #lp-site .lp-bolha:nth-child(15),
  #lp-site .lp-bolha:nth-child(16) { display: none; }

  #lp-site .lp-nav-toggle { display: block; }

  #lp-site .lp-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 14px;
    padding: 8px 0;
    background: var(--lp-rosa);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
  }
  #lp-site .lp-nav[hidden] { display: none; }
  #lp-site .lp-nav a { width: 100%; padding: 13px 20px; font-size: 14px; }

  #lp-site .lp-btn {
    min-height: 60px;
    padding: 0 34px;
    font-size: 16px;
    width: 100%;
    max-width: 340px;
  }

  #lp-site .lp-numeros { gap: 30px 0; }
  #lp-site .lp-numero { flex: 1 1 100%; padding: 0; }
  #lp-site .lp-numero + .lp-numero {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    padding-top: 30px;
  }
}

/* ---------------------------------------------------------- ARMADURA --- */
/* O tema do WordPress declara font-family, font-weight e color em h1 com
   !important. Contra !important nao existe especificidade que resolva — nem
   ID, nem mil classes — entao a unica saida e repetir com !important.
   Sao so estas tres: as demais propriedades do titulo (tamanho, entrelinha,
   espacejamento, caixa alta) o tema nao disputa, e ficam sem o reforco.
   Se um dia o tema parar de forcar, este bloco inteiro pode sair. */
#lp-site .lp-titulo {
  font-family: var(--lp-fonte-titulo) !important;
  font-weight: 300 !important;
  color: var(--lp-branco) !important;
}

#lp-site .lp-titulo strong {
  font-weight: 700 !important;
  font-style: italic !important;
}

/* O tema tambem limita a largura dos titulos — temas de bloco aplicam em h1
   o content-size do theme.json, algo em torno de 650px. Com a caixa estreita,
   as tres linhas do titulo quebravam em cinco. Libera a largura e desliga o
   balanceamento automatico, que reparte as linhas por conta propria e ignora
   os <br> do desenho. */
#lp-site .lp-chamada,
#lp-site .lp-titulo {
  max-width: none !important;
  width: auto !important;
  text-wrap: wrap !important;
}

/* Respeita quem desativou animacoes no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  #lp-site .lp-hero *,
  #lp-site .lp-hero *::before,
  #lp-site .lp-hero *::after {
    transition: none !important;
  }
}