/* ==========================================================================
   INSTITUTO LU MORAES — Design System
   Estética: sofisticada, natural, contemporânea.
   Paleta: areia + verde profundo + off-white + dourado discreto.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* Paleta */
  --green-deep: #1E3A2E;
  --green-deeper: #142821;
  --green-mid: #33513F;
  --green-soft: #4C6D57;
  --sand: #D9C7A3;
  --sand-light: #EFE6D3;
  --off-white: #FAF7F1;
  --white: #FFFFFF;
  --gold: #B4915A;
  --gold-soft: #CBAD7C;
  --ink: #24281F;
  --ink-soft: #4A4E42;
  --pink: #EC3BF1; /* cor de destaque da marca, extraída do logo */

  /* Tipografia */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Espaçamento */
  --gap: clamp(1.25rem, 2vw, 2.5rem);
  --section-pad: clamp(4rem, 8vw, 8rem);
  --container: 1180px;

  /* Outros */
  --radius: 2px;
  --shadow-soft: 0 20px 60px -25px rgba(20, 40, 33, 0.35);
  --transition: 0.4s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--off-white);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--green-deeper);
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 4.5vw, 4.2rem); font-weight: 400; }
h2{ font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 400; }
h3{ font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
p{ margin: 0 0 1.2em; color: var(--ink-soft); }
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
section{ padding: var(--section-pad) 0; }
.section-tight{ padding: clamp(2.5rem,5vw,4rem) 0; }

/* Eyebrow / kicker */
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.1em;
}
.kicker::before{
  content:"";
  width: 28px; height: 1px;
  background: var(--gold);
  display:inline-block;
}

/* ---- Buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1em 2.2em;
  border-radius: 999px; /* contorno ovalado, não retangular */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary{
  background: var(--green-deep);
  color: var(--off-white);
  border-color: var(--green-deep);
}
.btn-primary:hover{ background: var(--green-deeper); border-color: var(--green-deeper); transform: translateY(-2px); }
.btn-gold{
  background: var(--gold);
  color: var(--off-white);
  border-color: var(--gold);
}
.btn-gold:hover{ background: #9d7c47; border-color:#9d7c47; transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn-outline:hover{ background: var(--green-deep); color: var(--off-white); }
.btn-outline-light{
  background: transparent;
  color: var(--off-white);
  border-color: rgba(250,247,241,0.55);
}
.btn-outline-light:hover{ background: var(--off-white); color: var(--green-deeper); border-color: var(--off-white); }
.btn-arrow::after{ content:"→"; transition: transform var(--transition); }
.btn:hover .btn-arrow::after,.btn.btn-arrow:hover::after{ transform: translateX(4px); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; pointer-events:none; }

/* ---- Header / Nav ---- */
.site-header{
  position: sticky;
  top: 0;
  /* Precisa ser maior que o z-index do botão flutuante do WhatsApp (200):
     .site-header cria seu próprio contexto de empilhamento, então o
     z-index alto do menu mobile (.nav-links, 300) só vale DENTRO desse
     contexto — quem decide se o cabeçalho (e o menu aberto dentro dele)
     fica acima ou abaixo do WhatsApp é o z-index do próprio .site-header. */
  z-index: 400;
}
/* O fundo com vidro fosco vive numa camada separada, atrás do conteúdo do
   cabeçalho. Isso é proposital: "backdrop-filter" (e "filter"/"transform")
   em QUALQUER ancestral cria um novo "containing block" para elementos
   position:fixed dentro dele — se ficasse direto no .site-header, o menu
   mobile (que é position:fixed) ficaria preso dentro da altura do
   cabeçalho em vez de cobrir a tela toda. Por isso o efeito de vidro fica
   num elemento irmão do menu, não um ancestral dele. */
.site-header__bg{
  position:absolute; inset:0; z-index:-1;
  background: rgba(250,247,241,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30,58,46,0.08);
}
:root{ --header-h: clamp(104px, 11vw, 148px); }

.nav-wrap{
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 3.5vw, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1.5rem;
}
.brand{ display:flex; align-items:center; gap:0.85em; flex-shrink:0; }
.brand img{ height: clamp(64px, 7.5vw, 92px); width:auto; transition: height var(--transition); }
.nav-links{ display:flex; align-items:center; gap: clamp(0.8rem, 1.4vw, 1.5rem); }
.nav-links a{
  font-size: 0.76rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  position: relative;
  padding: 0.3em 0;
  white-space: nowrap;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background: var(--gold);
  transition: width var(--transition);
}
.nav-links a:hover::after, .nav-links a.active::after{ width: 100%; }
.nav-links a.active{ color: var(--gold); }
.nav-cta{ margin-left: 0.4em; flex-shrink:0; white-space:nowrap; }
/* .nav-links a already sets color:var(--ink) with equal-or-higher specificity
   than .btn-primary alone, which was silently overriding the button's own
   text color and making "Quero Começar" read as near-black-on-dark-green.
   These rules target the exact element (.nav-links a.nav-cta) so they win,
   and use the brand's pink from the logo as requested. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover{ color: var(--pink); }
.nav-links a.nav-cta::after{ content: none; }
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 32px; height: 22px; position:relative;
  flex-shrink:0;
}
.nav-toggle span{
  position:absolute; left:0; width:100%; height:1.5px; background: var(--green-deeper);
  transition: all var(--transition);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:50%; margin-top:-0.75px; }
.nav-toggle span:nth-child(3){ bottom:0; }
.nav-toggle.open span:nth-child(1){ transform: translateY(10.25px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-10.25px) rotate(-45deg); }

@media (max-width: 1130px){
  .nav-links{
    position: fixed; inset: var(--header-h) 0 0 0;
    z-index: 300; /* acima do botão flutuante do WhatsApp (200) */
    background: var(--off-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem clamp(1.25rem,5vw,3rem) 2.5rem;
    gap: 1.1rem;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size: 1rem; white-space:normal; }
  .nav-toggle{ display:block; z-index: 310; position:relative; }
  .nav-cta{ margin-left:0; margin-top:0.4rem; }
}

/* ---- Hero ---- */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  color: var(--off-white);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
}
/* Parallax sutil no fundo do hero — só em telas maiores e com mouse (evita
   o comportamento instável de background-attachment:fixed em touchscreens). */
@media (min-width: 900px) and (hover:hover){
  .hero-bg, .page-hero-bg{ background-attachment: fixed; }
}
.scroll-cue{
  position:absolute; left:50%; bottom: 2.2rem;
  transform: translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  color: rgba(250,247,241,0.75);
  font-size: 0.68rem; letter-spacing:0.18em; text-transform:uppercase;
}
.scroll-cue span{
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(250,247,241,0.9), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue span::after{
  content:"";
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background: var(--gold-soft);
  animation: scroll-cue-drop 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-drop{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue span::after{ animation:none; }
  .hero-bg, .page-hero-bg{ background-attachment: scroll !important; }
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,40,33,0.55) 0%, rgba(20,40,33,0.72) 55%, rgba(20,40,33,0.88) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: 760px; }
.hero h1{ color: var(--off-white); }
.hero p.lead{ color: rgba(250,247,241,0.88); font-size: 1.15rem; max-width: 560px; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top: 2.2rem; }

.page-hero{
  position: relative;
  padding: clamp(6rem,12vw,9rem) 0 clamp(3rem,6vw,5rem);
  color: var(--off-white);
  background: linear-gradient(160deg, var(--green-deeper), var(--green-deep) 60%, var(--green-mid));
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute; right:-10%; top:-30%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(180,145,90,0.18), transparent 65%);
}
.page-hero .kicker{ color: var(--gold-soft); }
.page-hero h1{ color: var(--off-white); max-width: 780px; }
.page-hero p.lead{ color: rgba(250,247,241,0.82); max-width: 620px; font-size: 1.08rem; }

/* ---- Sections generic ---- */
.section-alt{ background: var(--sand-light); }
.section-dark{ background: var(--green-deeper); color: var(--off-white); }
.section-dark h2, .section-dark h3{ color: var(--off-white); }
.section-dark p{ color: rgba(250,247,241,0.78); }

.intro-block{ max-width: 760px; }
.intro-block.center{ margin: 0 auto; text-align:center; }

/* ---- Grids & Cards ---- */
.grid{ display:grid; gap: var(--gap); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  padding: 2.4rem 2.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(30,58,46,0.08);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.card .icon{ font-size:1.6rem; margin-bottom:1rem; display:block; transition: transform 0.45s ease; }
.card:hover .icon{ transform: scale(1.18) rotate(-6deg); }
.card h3{ margin-bottom:0.5em; }
.card p:last-child{ margin-bottom: 0; }
.card a.card-link{
  display:inline-flex; align-items:center; gap:0.4em;
  font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--gold); font-weight:500; margin-top:1rem;
}
.card a.card-link::after{ content:"→"; transition: transform var(--transition); }
.card a.card-link:hover::after{ transform: translateX(4px); }

.path-card{
  background: var(--off-white);
  border-left: 2px solid var(--gold);
  padding: 2.4rem;
}

/* ---- Signs list (bullet dots) ---- */
.dot-list li{
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.8em;
  color: var(--ink-soft);
}
.dot-list li::before{
  content:"";
  position:absolute; left:0; top:0.65em;
  width:6px; height:6px; border-radius:50%;
  background: var(--gold);
}
.check-list li{
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.7em;
  color: var(--ink-soft);
}
.check-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color: var(--gold);
  font-size: 0.85em;
}

/* ---- Image frame ---- */
/* Fotos menores e com borda suave/gradual — sem o corte retangular seco de
   antes. A máscara radial esmaece as bordas da imagem até a cor de fundo da
   seção, como uma vinheta discreta, em vez de terminar numa linha reta. */
.img-frame{
  overflow:hidden;
  border-radius: 26px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 40px 70px -38px rgba(20,40,33,0.45);
  /* Duas máscaras em gradiente linear (uma por eixo), combinadas por
     interseção, esmaecem todas as quatro bordas igualmente — a foto some
     aos poucos na cor de fundo em vez de terminar numa linha reta. */
  --feather: 34px;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  -webkit-mask-composite: source-in, source-over;
}
.img-frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1s ease; }
.img-frame:hover img{ transform: scale(1.06); }
.ratio-portrait{ aspect-ratio: 4/5; }
.ratio-square{ aspect-ratio: 1/1; }
.ratio-wide{ aspect-ratio: 16/10; }

/* fotos do hero (fundo full-bleed) não devem herdar a moldura/vinheta das
   fotos de conteúdo — continuam cobrindo a seção inteira normalmente. */
.hero-bg.img-frame, .hero-bg{ mask-image:none; -webkit-mask-image:none; max-width:none; border-radius:0; box-shadow:none; margin:0; }

/* Modificador para corte seco (sem esmaecimento gradual nas bordas) —
   usado na foto da Lu Moraes, a pedido dela. Mantém cantos arredondados
   e a sombra, só remove a máscara de vinheta. */
.img-frame--crisp{
  mask-image: none;
  -webkit-mask-image: none;
}

/* ---- Split (text + image) ---- */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.split.reverse .split-media{ order: 2; }
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order: 0; }
}

/* ---- Steps (Sentir / Entender / Ressignificar) ---- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); counter-reset: step; }
@media (max-width: 900px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top: 2.4rem; border-top: 1px solid rgba(30,58,46,0.15); }
.step .step-num{
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  display:block;
  margin-bottom: 1rem;
}

/* ---- Encontros (numbered timeline) ---- */
.encontro{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(250,247,241,0.15);
}
.encontro:last-child{ border-bottom:none; }
.encontro-num{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold-soft);
  line-height:1;
}
.encontro h3{ margin-bottom:0.3em; }
.encontro .q{ font-style: italic; color: var(--sand); margin-bottom:0.4em; display:block; font-family: var(--font-display); }

/* ---- Quote / manifesto ---- */
.quote-block{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.4;
  max-width: 840px;
}
.quote-block em{ font-style: italic; color: var(--gold-soft); }

/* ---- Testimonials ---- */
.testimonial{
  background: var(--white);
  padding: 2.6rem;
  border-radius: var(--radius);
  border-top: 2px solid var(--gold);
  height: 100%;
}
.testimonial p{ font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--green-deeper); }
.testimonial .quote-mark{ font-family: var(--font-display); font-size: 3rem; color: var(--gold); line-height:0.5; display:block; margin-bottom:0.6rem; }

/* ---- Bio ---- */
.bio-photo{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
}
.signature{ font-family: var(--font-display); font-style: italic; font-size:1.4rem; color: var(--green-deep); margin-top: 1rem; }

/* ---- CTA band ---- */
.cta-band{
  background: var(--green-deep);
  color: var(--off-white);
  text-align:center;
  padding: clamp(4rem,8vw,6rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(180,145,90,0.15), transparent 50%);
}
.cta-band h2{ color: var(--off-white); position:relative; }
.cta-band p{ color: rgba(250,247,241,0.8); max-width:560px; margin-left:auto; margin-right:auto; position:relative; }
.cta-band .btn-row{ position:relative; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* ---- Footer ---- */
.site-footer{
  background: var(--green-deeper);
  color: rgba(250,247,241,0.7);
  padding: clamp(3rem,6vw,4.5rem) 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(250,247,241,0.12);
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand img{ height:46px; margin-bottom:1rem; }
.footer-brand p{ color: rgba(250,247,241,0.6); font-size:0.9rem; max-width:280px; }
.footer-col h4{
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.footer-col a{ display:block; font-size:0.9rem; color: rgba(250,247,241,0.7); margin-bottom:0.7rem; transition: color var(--transition); }
.footer-col a:hover{ color: var(--gold-soft); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top: 1.8rem;
  font-size: 0.8rem;
  color: rgba(250,247,241,0.45);
}

/* ---- Utilities ---- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.small{ font-size:0.85rem; }
.gold-text{ color: var(--gold); }
.divider{
  width:100%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(30,58,46,0.18), transparent);
  margin: 0;
}
.tag-list{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.tag{
  padding: 0.5em 1.1em;
  border: 1px solid rgba(30,58,46,0.18);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--green-deep);
  letter-spacing:0.02em;
}
.tag-dark{ border-color: rgba(250,247,241,0.25); color: var(--off-white); }

.badge-todo{
  display:inline-block;
  background: #fff4e0;
  border:1px dashed var(--gold);
  color:#7a5b1f;
  font-size:0.72rem;
  letter-spacing:0.03em;
  padding: 0.35em 0.7em;
  border-radius: 3px;
  margin-left: 0.6em;
  font-family: var(--font-body);
  text-transform: none;
  vertical-align: middle;
}

.form-field{ margin-bottom: 1.4rem; }
.form-field label{ display:block; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.5em; color: var(--ink-soft); }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding: 0.9em 1em; border:1px solid rgba(30,58,46,0.2);
  background: var(--white); font-family: var(--font-body); font-size:1rem; border-radius: var(--radius);
}
.form-field textarea{ min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(30,58,46,0.12);
}

.contact-info-item{ display:flex; align-items:flex-start; gap:1rem; padding: 1.4rem 0; border-bottom:1px solid rgba(30,58,46,0.1); }
.contact-info-item .ci-icon{ font-size:1.3rem; }
.contact-info-item h4{ margin:0 0 0.2em; font-family: var(--font-body); font-weight:500; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--green-deep); }

/* ---- Transição suave entre páginas ----
   IMPORTANTE: nunca anime "transform" no <body>. Qualquer transform (mesmo
   vindo de uma animação que termina em "none") faz o body virar um novo
   "containing block" para todo filho position:fixed — foi isso que fazia o
   botão do WhatsApp e o menu mobile pararem de flutuar sobre a página e
   passarem a se comportar como se estivessem "presos" dentro do conteúdo.
   Por isso a transição usa só opacity, que não tem esse efeito colateral. */
@media (prefers-reduced-motion: no-preference){
  html.pt-ready body{
    animation: pt-enter 0.5s ease both;
  }
}
@keyframes pt-enter{
  from{ opacity:0; }
  to{ opacity:1; }
}
body.pt-exiting{
  opacity:0;
  transition: opacity 0.28s ease;
}

/* ---- Fade-up reveal on scroll ----
   Visible by default (no JS / reduced motion / anything goes wrong = content
   still shows). Only hidden-then-revealed once JS confirms it can animate
   safely, and a timed safety net force-reveals everything regardless. */
.fade-up{ opacity:1; transform: none; }
html.js-anim .fade-up{
  opacity:0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js-anim .fade-up.in-view{ opacity:1; transform:none; }

/* ---- Video placeholder block (para a Lu gravar depois) ---- */
.video-block{
  position:relative;
  display:block;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 26px;
  overflow:hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 45px 80px -35px rgba(20,40,33,0.5);
}
.video-block img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(0.7) saturate(1.05);
  transition: transform 1.1s ease, filter 0.4s ease;
}
.video-block:hover img{ transform: scale(1.045); filter: brightness(0.6) saturate(1.05); }
.video-block::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,40,33,0.05), rgba(20,40,33,0.35));
}
.video-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.video-play > span{
  width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px);
  border-radius:50%;
  background: rgba(250,247,241,0.94);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 18px 36px -12px rgba(20,40,33,0.55);
  transition: transform var(--transition);
}
.video-block:hover .video-play > span{ transform: scale(1.08); }
.video-play svg{ width: 28%; height:28%; margin-left:6%; color: var(--green-deep); }

/* ---- Floating WhatsApp button ---- */
.whatsapp-float{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(20,40,33,0.55);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float svg{ width: 30px; height: 30px; position:relative; z-index:2; }
.whatsapp-float:hover{ transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 40px -10px rgba(20,40,33,0.6); }
.whatsapp-float::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:#25D366;
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform: scale(1); opacity: 0.55; }
  100%{ transform: scale(1.9); opacity: 0; }
}
.whatsapp-float .wa-tooltip{
  position:absolute;
  right: 72px;
  white-space: nowrap;
  background: var(--green-deeper);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 0.6em 1em;
  border-radius: 4px;
  opacity:0;
  transform: translateX(6px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events:none;
}
.whatsapp-float:hover .wa-tooltip{ opacity:1; transform: translateX(0); }
@media (max-width: 600px){
  .whatsapp-float{ width:54px; height:54px; }
  .whatsapp-float svg{ width:26px; height:26px; }
  .whatsapp-float .wa-tooltip{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{ animation: none; }
}

/* ==========================================================================
   FORMULÁRIO DE CAPTAÇÃO (captacao.html)
   Blocos progressivos: Sentir → Entender → Ressignificar
   ========================================================================== */

/* Cabeçalho mínimo, sem menu, para manter o foco na conversão */
.lead-header .nav-wrap{ justify-content: space-between; }
.lead-header__back{
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  transition: color var(--transition);
}
.lead-header__back:hover{ color: var(--green-deep); }

.lead-hero{
  position: relative;
  padding: clamp(5.5rem,11vw,8rem) 0 clamp(2rem,4vw,3rem);
  background: linear-gradient(160deg, var(--green-deeper), var(--green-deep) 60%, var(--green-mid));
  color: var(--off-white);
  overflow:hidden;
}
.lead-hero::before{
  content:"";
  position:absolute; right:-10%; top:-30%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(180,145,90,0.18), transparent 65%);
}
.lead-hero .kicker{ color: var(--gold-soft); justify-content:center; }
.lead-hero h1{ color: var(--off-white); position:relative; }
.lead-hero p.lead{ color: rgba(250,247,241,0.85); max-width: 620px; margin: 0 auto; position:relative; }

.lead-form-section{
  background: var(--sand-light);
  padding: 0 0 clamp(4rem,8vw,7rem);
}
.lead-card{
  position:relative;
  max-width: 760px;
  margin: 0 auto;
  margin-top: clamp(-3.5rem, -6vw, -2.5rem);
  background: var(--white);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  box-shadow: var(--shadow-soft);
}

/* Indicador de progresso */
.lead-steps{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 0.4rem;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.lead-steps[hidden]{ display:none; }
.lead-step-dot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5em;
  flex-shrink:0;
}
.lead-step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px; height: 34px;
  border-radius:50%;
  border: 1px solid rgba(30,58,46,0.25);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.85rem;
  transition: all var(--transition);
}
.lead-step-label{
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--transition);
}
.lead-step-dot.is-active .lead-step-num{
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--off-white);
}
.lead-step-dot.is-active .lead-step-label{ color: var(--green-deep); font-weight:500; }
.lead-step-dot.is-complete .lead-step-num{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--off-white);
}
.lead-step-line{
  flex: 1 1 auto;
  height: 1px;
  background: rgba(30,58,46,0.18);
  margin-top: 17px;
  min-width: 24px;
  max-width: 90px;
}

/* Painéis do formulário — mostra só o passo ativo */
.lead-step{ display:none; }
.lead-step.is-active{ display:block; animation: lead-step-in 0.45s ease both; }
@keyframes lead-step-in{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform:none; }
}
.lead-step .kicker{ margin-bottom:0.8em; }
.lead-step h2{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.lead-step-intro{ margin-bottom: 1.8rem; }

/* Grupos de opções (checkbox / radio) estilizados como cartões seleção */
.lead-checks{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.lead-checks--row{ grid-template-columns: repeat(2, 1fr); max-width: 420px; }
@media (max-width: 560px){ .lead-checks{ grid-template-columns: 1fr; } }

.lead-check{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.7em;
  padding: 0.85em 1.1em;
  border: 1px solid rgba(30,58,46,0.18);
  border-radius: 12px;
  cursor:pointer;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: all var(--transition);
}
.lead-check input{
  appearance:none; -webkit-appearance:none;
  width: 15px; height:15px; flex-shrink:0;
  margin:0; padding:0;
  vertical-align: middle;
  border: 1.5px solid rgba(30,58,46,0.35);
  background: var(--white);
  position:relative;
  top:0;
  cursor:pointer;
  transition: all var(--transition);
}
.lead-check input[type="checkbox"]{ border-radius: 4px; }
.lead-check input[type="radio"]{ border-radius: 50%; }
.lead-check input:checked{ background: var(--green-deep); border-color: var(--green-deep); }
.lead-check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; left:4px; top:1px;
  width:4px; height:8px;
  border: solid var(--off-white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.lead-check input[type="radio"]:checked::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:7px; height:7px;
  border-radius:50%;
  background: var(--off-white);
  transform: translate(-50%,-50%);
}
.lead-check:has(input:checked){
  border-color: var(--green-deep);
  background: rgba(30,58,46,0.05);
  color: var(--green-deep);
}
.lead-check span{ line-height:1.35; }

.lead-step-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(30,58,46,0.1);
}
@media (max-width: 480px){
  .lead-step-actions{ flex-direction:column-reverse; align-items:stretch; }
  .lead-step-actions .btn{ justify-content:center; }
}

.lead-error{
  background: rgba(178,58,58,0.08);
  border: 1px solid rgba(178,58,58,0.3);
  color: #9c3b3b;
  font-size: 0.85rem;
  padding: 0.9em 1.1em;
  border-radius: 8px;
  margin: 0 0 1.2rem;
}

/* Confirmação */
.lead-success{ text-align:center; padding: 1rem 0; }
.lead-success__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  background: var(--green-deep);
  color: var(--off-white);
  font-size: 1.6rem;
  margin: 0 auto 1.2rem;
}
.lead-success h2{ margin-bottom:0.5em; }
.lead-success p{ max-width: 460px; margin: 0 auto 1.6rem; }

@media (max-width: 640px){
  .lead-card{ border-radius:16px; margin-top: -1.5rem; }
  .lead-step-label{ display:none; }
  .lead-step-line{ min-width:14px; }
}