/* ============================================================
   LP Consultor NR-1 — Ikigai Brasil + Strategic AI
   Layout de 18/08/2026 (PDF "EDUCACAO CORPORATIVA NR1").

   Folha PROPRIA desta LP. A /styles.css continua existindo para a
   pagina de politica de privacidade — mexer nela para ajustar esta
   pagina quebraria aquela sem aviso.

   Escrita MOBILE FIRST: as regras base valem para o celular e sao
   ampliadas por min-width. A quase totalidade do trafego chega pelo
   celular, entao o layout pequeno e o caso principal.
   ============================================================ */

/* Montserrat servida deste dominio (ver o comentario no <head> do HTML).
   O arquivo cobre os pesos 700 e 800 porque a Montserrat do Google e uma fonte
   VARIAVEL — um woff2 so, nao um por peso.
   'swap' e proposital: o texto aparece na hora com a fonte do aparelho e troca
   quando a Montserrat chega. Com 'block' o titulo ficaria invisivel ate la. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Dourado da marca, do claro ao escuro. O gradiente dos botoes e das
     molduras e sempre montado com estes tres. */
  --ouro-claro: #F7E4A0;
  --ouro: #E8B93B;
  --ouro-escuro: #A97C15;
  --amarelo: #F5D75E;   /* titulos dos cards, como no material impresso */

  --preto: #000;
  --preto-2: #0B0B0D;
  --grafite: #131316;
  --linha: rgba(232, 185, 59, .28);

  --texto: #FFF;
  --texto-2: #CFCFD4;
  --texto-3: #92929A;

  --zap: #25D366;
  --zap-escuro: #1EBE5A;

  --raio: 16px;
  --raio-g: 26px;
  --topo: 64px;         /* altura do cabecalho fixo */

  --fonte-titulo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Cabecalho fixo: sem isto a ancora para o formulario esconde o titulo dele. */
  scroll-padding-top: calc(var(--topo) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--texto-2);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  /* A textura de fundo do layout e um brilho central sobre preto. Feita em CSS
     de proposito: como imagem custava 174 KB e o resultado e o mesmo. */
  background-color: var(--preto);
  background-image: radial-gradient(120% 60% at 50% 40%, #1A1A1E 0%, #0A0A0C 55%, #000 100%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--texto);
  margin: 0 0 16px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.6rem, 6.4vw, 2.6rem); text-transform: uppercase; }
h2 {
  font-size: clamp(1.35rem, 5.4vw, 2.15rem);
  text-transform: uppercase;
  text-align: center;
}
h3 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 16px; }
strong { color: var(--texto); font-weight: 700; }

.ouro { color: var(--ouro); }
.amarelo { color: var(--amarelo); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.wrap--estreito { max-width: 760px; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--ouro); color: #000; padding: 10px 16px; z-index: 999;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.pular:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }

/* ============================================================
   BOTAO DOURADO — o botao do layout, em formato de pilula
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #1A1200;
  background: linear-gradient(180deg, var(--ouro-claro) 0%, var(--ouro) 42%, #C9962A 100%);
  box-shadow:
    0 0 0 2px rgba(247, 228, 160, .55),
    0 10px 26px rgba(232, 185, 59, .28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--grande { font-size: clamp(1rem, 3.6vw, 1.18rem); padding: 18px 34px; width: 100%; max-width: 420px; }
.btn--pequeno { font-size: .78rem; padding: 10px 18px; box-shadow: 0 0 0 1.5px rgba(247, 228, 160, .5); }
.btn--bloco { width: 100%; }

/* Verde so no botao que realmente abre o WhatsApp — o dourado leva ao
   formulario. Cores diferentes evitam que a pessoa ache que ja falou com
   alguem so por ter clicado no primeiro botao da pagina. */
.btn--zap {
  color: #04250F;
  background: linear-gradient(180deg, #5BE68C 0%, var(--zap) 45%, var(--zap-escuro) 100%);
  box-shadow: 0 0 0 2px rgba(91, 230, 140, .45), 0 10px 26px rgba(37, 211, 102, .26);
}
.ico-zap { width: 20px; height: 20px; flex: 0 0 auto; }

.cta-linha { display: flex; justify-content: center; margin-top: 30px; }

/* ============================================================
   CABECALHO
   ============================================================ */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--topo);
  display: flex; align-items: center;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .2s ease, border-color .2s ease;
}
.topo.is-scrolled { background: rgba(0, 0, 0, .92); border-bottom-color: var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo__marcas { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.topo__ikigai { width: auto; height: 26px; }
.topo__sai { width: auto; height: 21px; }
.topo__mais { color: var(--texto-3); font-size: .8rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* Sem respiro embaixo no celular: a foto do professor termina em fundo escuro
     e qualquer padding ali vira uma faixa preta vazia entre ele e a proxima
     secao. No desktop o padding volta, porque la a foto fica ao lado do texto. */
  padding: calc(var(--topo) + 14px) 0 0;
  overflow: hidden;
}
/* Foto da plateia: fica no fundo, bem apagada. Como <div> e nao <img> porque
   e decoracao — leitor de tela nao tem o que anunciar aqui. */
.hero__fundo {
  position: absolute; inset: 0;
  background: url('/assets/img/lp/hero-fundo.webp') center top / cover no-repeat;
  opacity: .55;
}
.hero__fundo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 55%, #000 100%);
}
.hero .wrap { position: relative; z-index: 1; }

/* Selo e foto sao medidos, no celular, para caber selo + titulo + professor +
   BOTAO na primeira tela de um aparelho comum (844 px de altura). Aumentar
   qualquer um dos dois empurra o botao para baixo da dobra — que e o unico
   lugar da pagina onde ele nao pode estar. */
.hero__selo {
  width: min(60vw, 230px);
  margin: 0 auto 4px;
  filter: drop-shadow(0 8px 26px rgba(232, 185, 59, .22));
}

/* 30% menor que o h1 padrao da folha (clamp(1.6rem, 6.4vw, 2.6rem)), a pedido
   do cliente em 19/08/2026. O h1 global fica como esta porque a pagina de
   politica de privacidade tambem o usa. */
.hero h1 {
  text-align: center;
  margin-bottom: 10px;
  text-wrap: balance;
  font-size: clamp(1.12rem, 4.48vw, 1.82rem);
}

/* O professor e o botao sao um bloco so, colados. A foto e cortada na cintura
   pela propria arte: qualquer respiro entre ela e o botao faz ele parecer
   flutuando em vez de apoiado. */
.hero__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__foto {
  width: min(78vw, 320px);
  margin: 0 auto;
  display: block;
  /* Dissolve so as laterais e o topo, onde o fundo escuro da foto encostaria na
     plateia do fundo do hero e desenharia um retangulo. A base NAO entra na
     mascara (a parada vertical vai ate 100%): e por ali que ele se apoia no
     botao. Navegador sem suporte mostra a foto inteira, sem quebrar nada. */
  -webkit-mask-image: radial-gradient(ellipse 74% 100% at 50% 42%, #000 72%, rgba(0, 0, 0, .55) 90%, transparent 100%);
          mask-image: radial-gradient(ellipse 74% 100% at 50% 42%, #000 72%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}

/* Encostado na foto: a margem negativa cobre a sombra do proprio botao. */
.hero__figura .btn {
  margin-top: -6px;
  position: relative;
  z-index: 1;
}

.hero__nota {
  margin: 14px 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--texto-3);
}

@media (min-width: 900px) {
  .hero { padding: calc(var(--topo) + 40px) 0 40px; }
  /* 'start' alinha o topo das duas colunas. Como o selo e a foto foram
     recortados para comecarem com desenho no primeiro pixel, isso poe o topo da
     cabeca do professor na mesma linha da coroa do selo — que e o alinhamento
     pedido no layout. Nao usar 'stretch' aqui: esticar a coluna sobraria altura
     acima da foto e a cabeca desceria de novo. */
  .hero__grade {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: start;
    gap: 30px;
  }
  .hero__selo { width: min(30vw, 420px); margin-left: 0; margin-right: 0; }
  .hero h1 { font-size: clamp(1.33rem, 1.82vw, 1.75rem); margin-bottom: 0; }

  .hero__foto { width: 100%; max-width: 560px; }
  .hero .btn--grande { max-width: 420px; }
}

/* ============================================================
   SECOES
   ============================================================ */
.secao { padding: 52px 0; }
.secao--linha { border-top: 1px solid rgba(255, 255, 255, .06); }

.olho {
  font-family: var(--fonte-titulo);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
  text-align: center;
  margin: 0 0 10px;
}

.lead {
  font-size: clamp(1rem, 3.4vw, 1.1rem);
  color: var(--texto-2);
  text-align: center;
  max-width: 660px;
  margin: 0 auto 8px;
}

/* ============================================================
   VIDEO
   ============================================================ */
/* O quadro NAO fixa proporcao — quem manda e o arquivo. Assim trocar o video
   por um de outro formato nao pede ajuste aqui. A largura maxima acompanha o
   video horizontal de hoje; se um dia entrar um vertical, reduzir este numero. */
.video-quadro {
  max-width: 660px;
  margin: 22px auto 0;
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 2px solid rgba(232, 185, 59, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 60px rgba(232, 185, 59, .1);
  background: #000;
}
.video-quadro video { width: 100%; height: auto; display: block; }

/* ============================================================
   FORMULARIO
   ============================================================ */
.inscricao__grade { display: grid; gap: 26px; margin-top: 26px; }

.form-card {
  background: linear-gradient(165deg, rgba(247, 228, 160, .16), rgba(232, 185, 59, .06) 60%, rgba(0, 0, 0, .2));
  border: 1px solid rgba(247, 228, 160, .3);
  border-radius: var(--raio-g);
  padding: 22px 20px 24px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: 7px;
}
.campo input {
  width: 100%;
  /* 16px e o minimo que impede o iPhone de dar zoom ao focar o campo — com
     15px a pagina "pula" e o visitante perde o contexto do formulario. */
  font-size: 16px;
  font-family: inherit;
  color: #16161A;
  background: #FFF;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: #9A9AA2; }
.campo input:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 4px rgba(232, 185, 59, .22);
}
.campo input[aria-invalid='true'] { border-color: #E0564B; }

.campo__erro {
  display: none;
  margin: 6px 0 0;
  font-size: .8rem;
  color: #FF9B92;
}
.campo input[aria-invalid='true'] ~ .campo__erro { display: block; }

.form-card .btn { width: 100%; margin-top: 6px; }
.form__aviso {
  margin: 12px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--texto-3);
  text-align: center;
}
.form__aviso a { color: var(--texto-2); }

/* Estado depois do envio: o formulario some e entra a confirmacao com o botao
   do WhatsApp. O contato ja esta salvo neste ponto — se a pessoa nao clicar,
   ela aparece no painel como "nao abriu o WhatsApp". */
.form-ok { display: none; text-align: center; padding: 8px 0 4px; }
.form-ok.is-visible { display: block; }
.form-card.is-enviado .form-corpo { display: none; }
.form-ok__titulo { font-family: var(--fonte-titulo); font-weight: 800; color: var(--texto); font-size: 1.15rem; margin-bottom: 8px; }
.form-ok p { color: var(--texto-2); font-size: .93rem; }

/* 20% acima do corpo de texto padrao (16px), a pedido do cliente em
   19/08/2026 — este bloco fica ao lado do formulario e precisa competir com
   ele em peso visual. */
.inscricao__texto p { margin-bottom: 12px; font-size: 1.2rem; }

/* O professor desta foto e recortado na altura dos pes: com respiro embaixo ele
   fica boiando no meio do preto, sem pernas.
   A margem negativa consome o padding final da secao (52px) e mais um tanto, de
   modo que a figura AVANCE sobre a secao seguinte — a divisa deixa de existir
   para o olho e ele passa a se apoiar no bloco de baixo.
   O z-index e obrigatorio: sem ele o fundo da secao seguinte, que vem depois no
   documento, pintaria por cima da figura. */
.inscricao__figura {
  position: relative;
  z-index: 2;
  margin: 18px 0 -84px;
}

/* Preto, mas entrando por degrade. O fundo do site tem um brilho central que
   aqui desenhava uma faixa mais clara logo abaixo do professor e denunciava a
   divisa entre as duas secoes. Preto CHAPADO resolvia o brilho e criava outro
   problema: a troca de tom virava uma linha reta atravessando a tela. Comecando
   transparente, os primeiros 120 px se fundem com o que vem de cima e a divisa
   deixa de existir para o olho. Sem borda superior pela mesma razao. */
#aprendizado {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 120px);
  border-top: 0;
}

@media (min-width: 900px) {
  /* 'stretch' e o que faz a coluna da direita ir ate o fim da seccao mesmo
     quando o formulario, ao lado, e mais alto que ela. Com 'start' ela parava
     antes, a margem negativa nao alcancava a divisa e sobrava um vao — o
     professor voltava a flutuar. */
  .inscricao__grade { grid-template-columns: .86fr 1.14fr; align-items: stretch; gap: 26px; }
  .inscricao__texto { display: flex; flex-direction: column; }
  /* 'auto' empurra a figura para o rodape da coluna, seja qual for o tamanho do
     texto acima dela. */
  .inscricao__figura { margin: 18px 0 -84px; margin-top: auto; }
  .form-card { padding: 28px 26px 30px; }
}

/* ============================================================
   CARDS COM MOLDURA DOURADA
   A moldura do layout e um contorno com gradiente. Feita com mascara em vez de
   imagem: acompanha qualquer altura de card e nao custa download.
   ============================================================ */
.grade { display: grid; gap: 16px; margin-top: 26px; }
.grade--3 { grid-template-columns: 1fr; }
.grade--4 { grid-template-columns: 1fr 1fr; }

.moldura {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, #0D0D10 0%, #000 100%);
  padding: 22px 18px;
}
.moldura::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(155deg, var(--ouro-claro) 0%, var(--ouro) 38%, #7A5A10 72%, var(--ouro-claro) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.card-acao { text-align: center; }
.card-acao h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 8px;
}
.card-acao p { margin: 0; font-size: .95rem; color: var(--texto-2); }

/* Cards de entrega: a imagem JA traz o titulo e a moldura desenhados, entao
   aqui nao ha texto nem borda — so o brilho de fundo. */
.card-entrega img { border-radius: 18px; }

@media (min-width: 760px) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   MENTOR
   ============================================================ */
.mentor__grade { display: grid; gap: 22px; margin-top: 24px; }
.mentor__foto { width: min(86vw, 400px); margin: 0 auto; }
/* 20% acima do corpo padrao (16px), a pedido do cliente em 19/08/2026. */
.mentor__texto p { margin-bottom: 14px; font-size: 1.2rem; }
.mentor__nome { font-family: var(--fonte-titulo); font-weight: 800; color: var(--ouro); }
.mentor__prova { margin-top: 26px; }
.mentor__prova img { border-radius: 14px; margin: 0 auto; }

@media (min-width: 900px) {
  .mentor__grade { grid-template-columns: .85fr 1.15fr; align-items: center; }
  .mentor__foto { width: 100%; }
  .mentor__prova { max-width: 900px; margin: 30px auto 0; }
}

/* ============================================================
   FECHAMENTO DA SECAO DE ENTREGA
   ============================================================ */
.fecho {
  margin: 28px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  color: var(--texto-2);
}
.fecho strong { color: var(--amarelo); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__item {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .028);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq__item[open] { border-color: var(--linha); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 16px;
  position: relative;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .96rem;
  color: var(--texto);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ouro);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
}
.faq__item[open] summary::after { content: '\2212'; }
.faq__resposta { padding: 0 16px 16px; font-size: .94rem; }
.faq__resposta p { margin: 0; }

/* ============================================================
   RODAPE
   ============================================================ */
.rodape {
  padding: 38px 0 96px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
  font-size: .82rem;
  color: var(--texto-3);
}
.rodape__marcas { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.rodape__marcas img { height: 30px; width: auto; opacity: .82; }
.rodape__marcas .rodape__sai { height: 26px; }
.rodape__links { margin: 10px 0; }
.rodape__links a { color: var(--texto-2); }
.rodape__aviso { max-width: 640px; margin: 14px auto 0; font-size: .74rem; line-height: 1.55; color: #6E6E76; }

/* ============================================================
   BOTAO FLUTUANTE DO WHATSAPP
   ============================================================ */
.flutuante {
  position: fixed; right: 14px; bottom: 14px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--zap);
  color: #04250F;
  font-weight: 800;
  font-size: .88rem;
  font-family: var(--fonte-titulo);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.flutuante svg { width: 20px; height: 20px; }

/* Some enquanto a primeira tela esta a vista: ali ele cobria justamente o botao
   dourado do hero, e ter dois convites concorrendo no mesmo canto nao ajuda
   ninguem. Fica VISIVEL por padrao e some por classe: se o script falhar, o
   botao continua na tela como antes, em vez de sumir de vez. */
.flutuante {
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.flutuante.is-oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/* O aviso de cookies foi removido em 18/08/2026 — ver o comentario no fim do
   index.html. Nada de .cookies mora mais aqui. */

@media (min-width: 700px) {
  .flutuante { right: 16px; bottom: 16px; }
}

/* ============================================================
   ANIMACAO DE ENTRADA
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}