/* ======================================================
   REPLAY — LANDING PAGE DE CAPTURA
   Tokens herdados de css/style.css (design system
   "ThetaHealing Intro"). Ver memória:
   reference_thetahealing_design_system.
   ====================================================== */
:root{
  --bg-0:#fdfdfc;
  --bg-1:#f5f4f1;
  --surface:#ffffff;
  --ink-0:#1b4d3e;
  --ink-1:#4a4f49;
  --ink-2:#86887f;
  --line:rgba(23,51,44,.14);
  --line-strong:rgba(23,51,44,.22);
  --brand-green:#0f6b60;
  --accent-violet:#7a3a93;
  --accent-pink:#d9527d;
  --accent-cool:#1d8fae;
  --font-display:"Fraunces","Iowan Old Style",serif;
  --font-body:"Archivo","Helvetica Neue",sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad-x:clamp(1.25rem,5vw,3.5rem);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;min-height:100svh;background:var(--bg-0);color:var(--ink-0);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:1.5;
}
em{font-style:italic;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent-pink);color:#fff;}

/* grain sutil — mesma textura do site principal */
.grain{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* ---------- Ambiente (estático, sem orbs animados) ---------- */
.lp{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(1.75rem,5vh,4rem) var(--pad-x);
  background:
    radial-gradient(120% 90% at 88% 8%, #eaf5f2 0%, transparent 55%),
    radial-gradient(90% 70% at 4% 96%, #f7ecf3 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 55%, #ffffff 100%);
}

.lp__inner{
  position:relative;z-index:1;width:100%;max-width:78rem;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(1.5rem,4vh,3.5rem);
}

/* ---------- Coluna esquerda: conteúdo ----------
   Grid nomeado para poder reordenar a logo por breakpoint:
   no mobile ela entra entre o eyebrow e o H1 (empilhada);
   no desktop vira uma coluna à direita do texto. */
.lp__intro{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "eyebrow"
    "visual"
    "title"
    "subhead"
    "themes";
  row-gap:.85rem;align-items:start;
  max-width:36rem;
}
.lp__intro > *{
  opacity:0;transform:translateY(14px);
  animation:lpFadeUp .7s var(--ease-out) forwards;
}
.lp__eyebrow{grid-area:eyebrow;justify-self:start;animation-delay:0s;}
.lp__visual{grid-area:visual;justify-self:start;animation-delay:.1s;}
.lp__title{grid-area:title;}
.lp__subhead{grid-area:subhead;animation-delay:.32s;}
.lp__themes{grid-area:themes;animation-delay:.44s;}
@keyframes lpFadeUp{to{opacity:1;transform:translateY(0);}}

/* Banco Não Codei #16 — revelar palavra por palavra (via js/effects.js).
   O H1 sai da cascata de fade-up em bloco: quem anima agora é cada .word. */
.lp__title.word-reveal{opacity:1;transform:none;animation:none;}
.word-reveal .word{
  display:inline-block;opacity:0;transform:translateY(14px);
  animation:lpWordIn .6s var(--ease-out) forwards;
  animation-delay:calc(.2s + var(--i,0) * 65ms);
}
@keyframes lpWordIn{to{opacity:1;transform:translateY(0);}}

.tag{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:.35rem;
  font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}
.tag--green{color:var(--brand-green);background:rgba(15,107,96,.12);}

.lp__title{
  margin:0;font-family:var(--font-display);font-weight:400;line-height:1.14;
  letter-spacing:-.01em;font-size:clamp(2.1rem,1.3rem+3.2vw,3.4rem);color:var(--ink-0);
  text-wrap:balance;
}
.lp__title em{font-style:italic;font-weight:500;}
.lp__title em,
.lp__title em .word{
  background:linear-gradient(100deg,var(--accent-pink) 0%,var(--accent-cool) 55%,var(--brand-green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lp__subhead{
  margin:0;font-size:clamp(1.02rem,.85rem+.6vw,1.18rem);line-height:1.65;color:var(--ink-1);
  max-width:32rem;
}

.lp__themes{
  margin:.25rem 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;
}
.lp__themes li{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  display:flex;align-items:center;gap:.6rem;
}
.lp__themes li:first-child::before{content:none;}
.lp__themes li::before{
  content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-2);flex:none;
}

.lp__visual{
  width:100%;max-width:11rem;
}
.lp__visual img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 26px rgba(23,51,44,.16));
  animation:lpFloat 6s ease-in-out infinite;
}
@keyframes lpFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3.5%);}}

/* ---------- Coluna direita: card do formulário ---------- */
.lp__form-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:1.75rem;padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:0 40px 70px -36px rgba(23,51,44,.28),0 14px 26px -16px rgba(23,51,44,.14);
  opacity:0;transform:translateY(14px);
  animation:lpFadeUp .7s var(--ease-out) forwards;animation-delay:.3s;
  width:100%;overflow:hidden;
}
/* Banco Não Codei #12 — luz que segue o mouse (posição via js/effects.js) */
.lp__form-card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(15,107,96,.07), transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.lp__form-card:hover::after{opacity:1;}
.lp__form-card > *{position:relative;z-index:1;}

.lp__form-title{
  margin:0 0 .4rem;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,1rem+1vw,1.65rem);color:var(--ink-0);text-wrap:balance;
}
.lp__form-micro{
  margin:0 0 1.5rem;font-size:.9rem;color:var(--ink-1);line-height:1.5;
}

.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;}
.field label{
  font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--ink-1);
}
.field input{
  width:100%;height:3.25rem;padding:0 1rem;border-radius:.9rem;
  border:1.5px solid var(--line-strong);background:var(--bg-0);
  font-family:var(--font-body);font-size:1rem;color:var(--ink-0);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field input::placeholder{color:var(--ink-2);}
.field input:hover{border-color:rgba(23,51,44,.32);}
.field input:focus{
  outline:none;border-color:var(--brand-green);background:var(--surface);
  box-shadow:0 0 0 4px rgba(15,107,96,.12);
}
.field.has-error input{border-color:var(--accent-pink);}
.field.has-error input:focus{box-shadow:0 0 0 4px rgba(217,82,125,.14);}
.field__error{
  min-height:1.1em;font-size:.78rem;color:var(--accent-pink);
  opacity:0;transform:translateY(-3px);transition:opacity .2s ease,transform .2s ease;
}
.field.has-error .field__error{opacity:1;transform:translateY(0);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border-radius:999px;
  font-family:var(--font-body);font-weight:600;white-space:nowrap;cursor:pointer;border:none;
  transition:transform .35s var(--ease-out),box-shadow .3s ease,opacity .25s ease;
}
.btn:active{transform:scale(.97);}
.btn--cta{
  background:linear-gradient(100deg,var(--brand-green) 0%,#0b564d 100%);color:var(--bg-0);
  box-shadow:0 10px 30px -10px rgba(15,107,96,.4);
}
.btn--cta:hover{box-shadow:0 14px 36px -8px rgba(217,82,125,.35);transform:translateY(-2px);}
.btn--cta:disabled,.btn--cta[aria-busy="true"]{
  opacity:.75;cursor:default;pointer-events:none;transform:none;
}

.lp__submit{
  width:100%;margin-top:.4rem;padding:1.05rem 1.6rem;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.05em;
}

.lp__form-note{
  margin:.9rem 0 0;font-size:.78rem;color:var(--ink-2);text-align:center;line-height:1.5;
}

.lp__form-feedback{
  margin:.9rem 0 0;padding:.8rem 1rem;border-radius:.8rem;
  background:rgba(217,82,125,.08);color:var(--ink-1);font-size:.85rem;line-height:1.5;
  display:none;
}
.lp__form-feedback.is-visible{display:block;}

/* ---------- Rodapé discreto ---------- */
.lp__footer{
  position:relative;z-index:1;text-align:center;
  padding:1.5rem var(--pad-x) max(1.5rem, env(safe-area-inset-bottom));
  font-size:.76rem;color:var(--ink-2);line-height:1.6;
}
.lp__footer p{margin:0;}
.lp__footer p:first-child{font-weight:600;color:var(--ink-1);margin-bottom:.15rem;}

/* ---------- Desktop: duas colunas ---------- */
@media (min-width:960px){
  .lp__inner{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:clamp(3rem,6vw,5.5rem);
  }
  /* dentro da coluna esquerda: texto à esquerda, logo à direita */
  .lp__intro{
    flex:1 1 52%;max-width:none;
    grid-template-columns:1fr 14rem;
    grid-template-areas:
      "eyebrow visual"
      "title   visual"
      "subhead visual"
      "themes  visual";
    column-gap:clamp(2rem,4vw,3.5rem);
  }
  .lp__visual{max-width:14rem;align-self:center;justify-self:end;}
  .lp__form-card{flex:0 0 26rem;max-width:26rem;}
}

@media (max-width:400px){
  .field input{height:3rem;}
}

/* ---------- Mobile: compactar para o formulário aparecer rápido ---------- */
@media (max-width:640px){
  .lp__title{font-size:clamp(1.8rem,1.2rem+3vw,2.3rem);line-height:1.18;}
  .lp__subhead{font-size:.96rem;}
  .lp__themes{display:none;}
  .lp__form-card{padding:1.5rem;}
}

@media (prefers-reduced-motion: reduce){
  .lp__intro > *,.lp__form-card{animation:none !important;opacity:1 !important;transform:none !important;}
  .lp__visual img{animation:none !important;}
}