/* ============================================================
   lp.css — específico da LP Talita Beffa
   Topo: SLOTS de imagem (trocar 1 linha = trocar em toda a LP).
   Depois: estilos por seção (comentados por # da seção).
   Só tokens — nada de hex/px hardcoded de marca.
   ============================================================ */

:root{
  /* ---- SLOTS de imagem (caminho relativo ao lp.css = path-estável) ---- */
  --img-hero-desktop: url(../images/bg/hero-desktop.webp);
  --img-hero-mobile:  url(../images/bg/hero-mobile.webp);
  --img-deco-digital: url(../images/deco/digital-3d.webp);   /* digital 3D (Virada, Clube) */
  --img-deco-silk:    url(../images/deco/silk.webp);         /* silk dourado (Quem, Método, Consultoria) */
  --img-deco-ring:    url(../images/deco/ring.webp);         /* anel dourado borrado (Método, Entregáveis, Podcast) */
  --img-esfera:       url(../images/deco/esfera.webp);       /* esfera glow atrás da foto (Quem) */
  --img-notebook:     url(../images/img/notebook.webp);      /* laptop (Entregáveis) */
  --img-chave:        url(../images/img/chave.webp);         /* chave (Entregáveis) */
  --img-glow:         url(../images/img/glow-particulas.webp); /* golden-glow-lights (screen) */
  --img-ebook:        url(../images/img/ebook.webp);          /* capa do e-book */
  --img-essencia:     url(../images/img/essencia-cast.webp);  /* key art do podcast (Talita+esfera+mic) */
  --img-consultoria:  url(../images/img/consultoria.webp);    /* foto equipe (Consultoria, 23% no bg) */
  --img-goldenribbon: url(../images/deco/goldenribbon.webp);  /* fita dourada (Consultoria, sangra dir) */
  /* --img-bg-texture: url(../images/bg/textura.png);  (off: textura = cor paper) */
}

/* ============================================================
   NAV — pill flutuante [P5]  (hooks: #nav / .tb-nav / [data-spy])
   ============================================================ */
.tb-nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:var(--z-nav);
  width:min(1100px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 12px 9px 22px;border-radius:var(--radius-full);
  background:color-mix(in srgb,var(--color-base-paper) 68%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--border-default);
  transition:padding var(--dur-slow) var(--ease-ease-out),
    background var(--dur-slow),box-shadow var(--dur-slow)}
.tb-nav.shrunk{padding:5px 12px 5px 20px;
  background:color-mix(in srgb,var(--color-base-paper) 92%,transparent);
  box-shadow:var(--shadow-card)}
.tb-nav__brand{display:flex;align-items:center;flex-shrink:0}
.tb-nav__logo{height:36px!important;width:auto!important;max-width:none!important;transition:height var(--dur-slow)}
.tb-nav.shrunk .tb-nav__logo{height:30px!important}
.tb-nav__links{display:flex;gap:2px}
.tb-nav__links a{position:relative;font-size:14px;color:var(--fg-default);
  padding:8px 15px;border-radius:var(--radius-full);
  transition:background var(--dur-default),color var(--dur-default)}
.tb-nav__links a:hover{background:var(--brand-subtle)}
.tb-nav__links a.active{color:var(--brand-hover)}
.tb-nav__links a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;
  background:var(--brand-default);border-radius:2px;transform-origin:left;
  animation:tbUnderline .3s var(--ease-ease-out)}
@keyframes tbUnderline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tb-nav__cta{flex-shrink:0}
.tb-nav__burger{display:none;width:44px;height:44px;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.tb-nav__burger span{display:block;width:22px;height:2px;border-radius:2px;
  background:var(--fg-default);transition:transform var(--dur-default),opacity var(--dur-default)}

/* drawer mobile — FORA do <header> (bug 7.7): só transform + pointer-events */
.tb-drawer{position:fixed;inset:0;z-index:calc(var(--z-nav) + 5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:color-mix(in srgb,var(--color-base-paper) 98%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:translateY(-100%);transition:transform var(--dur-slow) var(--ease-ease-in-out);
  pointer-events:none}
.tb-drawer.open{transform:translateY(0);pointer-events:auto}
.tb-drawer a{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:20px;
  letter-spacing:.01em;color:var(--fg-default)}
.tb-drawer a:hover{color:var(--brand-hover)}
.tb-drawer__close{position:absolute;top:22px;right:26px;font-size:34px;line-height:1;color:var(--fg-muted)}
body.tb-lock{overflow:hidden}

@media (max-width:768px){
  .tb-nav__links,.tb-nav__cta{display:none}
  .tb-nav__burger{display:flex}
}

/* ============================================================
   FITA / MARQUEE [P4] — duas fitas cruzando, costura entre seções
   (hooks: .tb-ribbon-zone / .tb-ribbon / .track)
   ============================================================ */
.tb-ribbon-zone{position:relative;height:0;z-index:20}
.tb-ribbon{position:absolute;left:50%;top:0;width:120vw;overflow:hidden;
  display:flex;align-items:center;
  background-image:var(--gradient-ribbon);color:#ffffff;
  padding:18px 0;white-space:nowrap}
.tb-ribbon--a{transform:translate(-50%,0%) rotate(-1.9deg);z-index:2}          /* frente: nítida */
.tb-ribbon--b{transform:translate(-50%,0%) rotate(1.9deg) scale(.97);z-index:1;
  filter:blur(2.5px);opacity:1}                                                /* trás: distante (blur, opaca) */
.tb-ribbon .track{flex:0 0 auto;will-change:transform;
  font-family:var(--font-sans);font-weight:var(--fw-medium);
  letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.tb-ribbon .track span{padding:0 10px}
.tb-ribbon .track i{font-style:normal;opacity:.6}
@media (max-width:768px){ .tb-ribbon-zone{display:none} }                       /* fita off no mobile (bug 5) */
/* ≤820: fita mais baixa (padding 10) + transforms ajustados (só onde há fita: 769–820) */
@media (max-width:820px){
  .tb-ribbon{padding:10px 0}
  .tb-ribbon--a{transform:translate(-50%,-8%) rotate(-2.6deg)}
  .tb-ribbon--b{transform:translate(-50%,-4%) rotate(2.2deg) scale(.97)}
}

/* ============================================================
   01 · HERO  (hooks: #hero / .heroAnim / .particle)
   bg = composição completa (foto baked). Texto cream sobre warm bg.
   ============================================================ */
#hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  padding-block:clamp(118px,16vh,150px) clamp(60px,9vh,90px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--img-hero-desktop);background-size:cover;background-position:right top}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(27,21,16,.52) 0%,rgba(27,21,16,.30) 40%,rgba(27,21,16,0) 64%)}
#hero .lp-wrap{z-index:3}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:549px}
.hero-text .lp-eyebrow{color:var(--color-gold-200)}            /* legível sobre warm/dark */
.hero-title{font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:clamp(34px,5.2vw,60px);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  background:linear-gradient(90deg,var(--color-coffee-50),var(--color-base-white-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title b{font-weight:var(--fw-semibold)}
.hero-lead{font-size:var(--text-body-lg);line-height:var(--lh-body);
  color:var(--color-gold-100);max-width:541px}
.hero-cta{margin-top:6px}

/* partículas douradas (desktop; lp-anim injeta .particle em #hero) */
.particle{position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--color-base-gold-hi);opacity:.5;pointer-events:none;z-index:2;
  box-shadow:0 0 8px var(--color-base-gold-soft)}
.hero-media,.hero-lens{display:none}   /* base: ocultos; só o mobile empilhado mostra */

/* ---- Hero mobile [P2]: foto ANTES do texto + lente p/ paper; texto escuro ---- */
/* MOBILE (≤768): Hero EMPILHADO — foto em cima, texto centralizado embaixo */
@media (max-width:768px){
  #hero{display:block;min-height:auto;padding-block:96px 0;overflow:visible}
  .hero-bg,.hero-scrim{display:none}
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-media{display:block;order:-1;position:relative;width:100vw;margin-inline:calc(50% - 50vw);
    height:clamp(440px,64vh,640px);background-image:var(--img-hero-mobile);
    background-size:cover;background-position:50% 12%}
  .hero-lens{display:block;position:absolute;left:0;right:0;bottom:-1px;height:42%;
    background:linear-gradient(to bottom,rgba(251,247,239,0),var(--color-base-paper))}
  .hero-text{order:2;max-width:none;align-items:center;text-align:center;padding:24px 0 8px}
  .hero-text .lp-eyebrow{color:var(--brand-hover)}
  .hero-title{font-size:clamp(33px,8.4vw,46px);text-wrap:balance;
    background-image:linear-gradient(90deg,var(--color-coffee-700),var(--brand-default))}
  .hero-lead{color:var(--fg-muted);font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.55;
    max-width:min(94vw,480px);margin-inline:auto;text-wrap:balance}
  .hero-cta{width:100%}
  .hero-cta .lp-btn{width:100%}
  .particle{display:none}
}
/* TABLET (769–1024): MESMO lado-a-lado do desktop, mas altura controlada — em altura moderada
   o cover mostra ~90% da largura da imagem, então a Talita fica à direita e o texto fica livre */
@media (min-width:769px) and (max-width:1024px){
  #hero{min-height:0;height:clamp(490px,62vw,660px)}
}

/* ============================================================
   02 · VIRADA — texto de impacto centralizado (hook: #viradaText apaga→acende)
   ============================================================ */
#virada{padding-block:clamp(80px,11vw,140px)}
.vir-title{font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:var(--text-heading-1);line-height:var(--lh-heading);letter-spacing:var(--ls-display);
  color:var(--fg-default);max-width:680px;margin-inline:auto;text-wrap:balance}
.vir-sub{font-size:var(--text-body-lg);line-height:var(--lh-body);color:var(--fg-muted);
  max-width:536px;margin:18px auto 0}
.vir-sub b{font-weight:var(--fw-semibold);color:var(--fg-default)}
/* digital 3D AO LADO do texto centralizado: right:calc ancora na borda esquerda do texto (nunca em cima).
   parallax via base (.lp-deco transform:translateY(var(--par))). */
.vir-deco{background-image:var(--img-deco-digital);width:clamp(140px,15vw,260px);aspect-ratio:1;
  left:auto;right:calc(50% + 350px);top:14%;opacity:.85}
/* desfoque PROGRESSIVO (Figma layer blur 0→10.9): base nítida + cópia borrada com máscara direcional */
.vir-deco::after{content:"";position:absolute;inset:0;
  background-image:var(--img-deco-digital);background-size:contain;
  background-repeat:no-repeat;background-position:center;filter:blur(11px);
  -webkit-mask-image:linear-gradient(135deg,transparent 20%,#000 78%);
          mask-image:linear-gradient(135deg,transparent 20%,#000 78%)}
@media (max-width:1024px){ .vir-deco{width:clamp(118px,14vw,180px)} }

/* ============================================================
   03 · QUEM É TALITA — foto (esfera glow + cutout) esq · texto dir · bg subtle
   hooks: .photoClip (clip reveal) · [data-count] (counter 0→4)
   ============================================================ */
#sobre{background:var(--bg-subtle);}
.sobre-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;align-items:center}
.sobre-photo{position:relative;justify-self:center;width:min(100%,432px)}
.sobre-esfera{position:absolute;z-index:0;width:130%;aspect-ratio:1;left:-15%;top:6%;
  background-image:var(--img-esfera);background-size:contain;background-repeat:no-repeat;
  filter:blur(16px);opacity:.95;pointer-events:none}
.sobre-img{position:relative;z-index:1;width:100%;height:auto;display:block}
.sobre-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sobre-text h2{font-size:var(--text-heading-2);line-height:var(--lh-heading);
  color:var(--fg-default);max-width:585px;text-wrap:balance}
.sobre-body{font-size:var(--text-body-md);line-height:var(--lh-body);color:var(--fg-muted);max-width:585px}
.sobre-counter{display:flex;align-items:center;gap:18px;margin-top:10px}
/* line-height:1: o "4" (sem descendente) cabe inteiro e o gradiente preenche todo o glifo.
   NÃO usar text-box-trim aqui: com background-clip:text ele recorta o gradiente e "corta" o número. */
.sobre-num{font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:clamp(118px,14vw,200px);line-height:1;letter-spacing:-.01em;
  background-image:linear-gradient(134deg,var(--brand-active) 20%,var(--color-gold-400) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sobre-num-label{font-size:18px;line-height:1.55;color:var(--fg-muted);max-width:335px}
.sobre-deco{background-image:var(--img-deco-silk);width:clamp(280px,30vw,650px);aspect-ratio:1;
  right:clamp(-230px,-11vw,-90px);top:40%;opacity:.95;
  transform:translateY(var(--par)) translate(15%,-95%) rotate(128deg)}
/* silk DESFOCADA à esquerda (deco-ribbon-metodo-esq, sangra ← na junta Quem/Método) */
.sobre-deco-l{background-image:var(--img-deco-silk);width:clamp(230px,26vw,620px);aspect-ratio:1;
  right:86%;left:auto;top:15%;bottom:auto;opacity:.9;filter:blur(10px);
  transform:translateY(var(--par)) rotate(-55deg)}
@media (max-width:1024px){ .sobre-deco-l{width:clamp(160px,22vw,300px);right:80%} }

@media (max-width:1024px){ .sobre-deco{width:clamp(200px,24vw,320px);right:-14%} }
@media (max-width:768px){       /* mobile: TEXTO primeiro, FOTO por último, CORTADA (brusca) no fim da seção */
  #sobre{overflow:hidden;padding-top:36px}
  .sobre-grid{grid-template-columns:1fr;gap:26px;justify-items:center}
  .sobre-text{align-items:center;text-align:center}
  .sobre-text h2,.sobre-body{max-width:none}
  .sobre-counter{justify-content:center}
  .sobre-photo{width:min(86%,360px);order:1;margin-bottom:-26vw}
}

/* ============================================================
   04 · MÉTODO 4 A's — eyebrow + headline centrados · 4 cards numerados (hook: .stepCard)
   bg muted · deco: anel borrado à esquerda (deco-ring-metodo-esq)
   ============================================================ */
#metodo{background:var(--bg-muted);padding-block:clamp(64px,8vw,96px)}
.metodo-head{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:clamp(30px,4vw,48px)}
.metodo-head h2{font-size:var(--text-heading-1);line-height:1.08;letter-spacing:var(--ls-display);
  color:var(--fg-default);margin-top:10px;text-wrap:balance}
.metodo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stepCard{background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:8px;
  transition:transform var(--dur-slow) var(--ease-spring),box-shadow var(--dur-default) var(--ease-ease-out),border-color var(--dur-default)}
.stepCard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brand-default)}
.stepCard__num{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:30px;
  line-height:1.18;color:var(--brand-active)}
.stepCard__title{font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--text-heading-4);line-height:1.25;color:var(--fg-default)}
.stepCard p{font-size:var(--text-body-sm);line-height:1.6;color:var(--fg-muted)}
.metodo-ring{background-image:var(--img-deco-ring);width:clamp(260px,32vw,600px);aspect-ratio:1;
  right:78%;left:auto;top:24%;opacity:.85;filter:blur(8px)}

@media (max-width:1024px){
  .metodo-grid{grid-template-columns:repeat(2,1fr)}
  .metodo-ring{width:clamp(200px,26vw,340px);right:82%}
}
@media (max-width:768px){
  .metodo-grid{grid-template-columns:1fr;gap:14px}
  .stepCard{align-items:center;text-align:center}
}

/* ============================================================
   05 · MENTORIA ESSÊNCIA (âncora #mentoria) — 2 níveis · Nível 2 destaque dourado
   hook: .mCard (stagger). bg paper.
   ============================================================ */
#mentoria{padding-block:clamp(64px,8vw,96px)}
.mentoria-head{text-align:center;max-width:780px;margin-inline:auto;margin-bottom:clamp(30px,4vw,48px)}
.mentoria-head h2{font-size:var(--text-heading-1);line-height:1.08;letter-spacing:var(--ls-display);
  color:var(--fg-default);margin-top:10px;text-wrap:balance}
.mentoria-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mCard{background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--radius-card);padding:26px;display:flex;flex-direction:column;
  gap:10px;align-items:flex-start;
  transition:transform var(--dur-slow) var(--ease-spring),box-shadow var(--dur-default) var(--ease-ease-out),border-color var(--dur-default)}
.mCard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brand-default)}
.mCard--featured{border:2px solid var(--brand-default);box-shadow:var(--shadow-card)}  /* Nível 2 destaque dourado */
.mCard--featured:hover{box-shadow:var(--shadow-lg),var(--shadow-glow-gold)}            /* destaque: glow no hover */
.mCard__title{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:30px;
  line-height:1.18;color:var(--fg-default)}
.mCard__desc{font-size:var(--text-body-sm);line-height:1.6;color:var(--fg-muted)}
.mentoria-feats{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px}
.mentoria-feats li{position:relative;padding-left:18px;font-size:var(--text-body-sm);
  line-height:1.6;color:var(--fg-muted)}
.mentoria-feats li::before{content:"•";position:absolute;left:2px;color:var(--brand-default)}
.mCard .lp-btn,.mCard .lp-ghost{margin-top:auto}   /* botão no rodapé (cards de altura igual) */

@media (max-width:768px){
  .mentoria-cards{grid-template-columns:1fr;gap:18px}
  .mCard{align-items:center;text-align:center}
  .mentoria-feats{text-align:left}        /* bullets legíveis (bloco centralizado) */
}

/* ============================================================
   06 · ENTREGÁVEIS — composite notebook (sangra esq) + texto dir · anel dir
   .lp-img em camadas: back-key → notebook → glow(screen) → 2 front-keys (correção do glow)
   ============================================================ */
#entregaveis{padding-block:clamp(56px,7vw,92px)}
.ent-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:44px;
  align-items:center;min-height:clamp(420px,38vw,540px)}
.ent-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:557px}
.ent-text h2{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.ent-body{font-size:var(--text-body-md);line-height:var(--lh-body);color:var(--fg-muted)}

/* ÂNCORA RESPONSIVA: a borda direita acompanha a borda do texto (conteúdo centrado/capado),
   não a viewport. Em telas largas = posição do 1920; ao estreitar, recua junto com o texto. */
.ent-img{right: calc(59% + max(0px, 57px - 5vw));top: calc(-15% + max(0px, 80px - 1vw));;width:clamp(560px,70vw,1140px);
  aspect-ratio:1200/970;z-index:2}
.ent-img > *{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center}
.ent-notebook{left:51%;top:5%;width:85%;aspect-ratio:967/793;background-image:var(--img-notebook);z-index:2}
.ent-glow{left:49%;top:13%;width:86%;height:66%;background-image:var(--img-glow);
  -webkit-mask-image:var(--img-glow);mask-image:var(--img-glow);mask-mode:luminance;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  mix-blend-mode:screen;opacity:.5;z-index:6;
  filter:hue-rotate(62deg) contrast(5.5) brightness(5.5) blur(24px)}
.ent-key{width:21%;aspect-ratio:262/360;background-image:var(--img-chave);filter:blur(5px) brightness(1.4)}
.ent-key--top{right:-11%;top:1%;transform:rotate(28deg);z-index:4}
.ent-key--left{left:54%;top:33%;width:19%;transform:rotate(96deg);z-index:1}
.ent-key--bottom{left:63%;bottom:22%;width:23%;transform:rotate(-26deg);z-index:4}

.ent-ring{background-image:var(--img-deco-ring);width:clamp(260px,30vw,560px);aspect-ratio:1;
  right:clamp(-260px,-13vw,-120px);top:26%;opacity:.8;filter:blur(7px)}

@media (max-width:1024px){
  .ent-ring{width:clamp(200px,26vw,320px);right:-14%}
}
@media (max-width:768px){     /* mobile: composite no fluxo ACIMA do texto, RE-CENTRADO + menos blur */
  .ent-inner{grid-template-columns:1fr;gap:6px;text-align:center;min-height:0}
  .ent-text{align-items:center;max-width:none}
  .ent-imgcol{display:none}
  .ent-img{width:min(94%,430px)!important;aspect-ratio:1184/1006;margin:0 auto 6px}
  .ent-notebook{ left: -23%;top: -32%;width: 146%;}
  .ent-glow{left:6%;top:30%;width:84%;height:64%;filter:hue-rotate(62deg) contrast(5) brightness(5) blur(14px)}
  .ent-key{filter:blur(1.6px) brightness(1.3)!important}    /* chaves menos borradas no mobile */
  .ent-key--top{right: 3%;top: -32px;left: auto;width: 31%;}
  .ent-key--left{left: -2%;top: -22%;width: 26%;}
  .ent-key--bottom{left: -5%;bottom: -5%;width: 41%;}
}

/* ============================================================
   07 · E-BOOK — texto esq (eyebrow + badge "novo") + composite (silk+cover+glow) sangra DIR · bg muted
   hooks: .bookFloat (capa flutua) · #badge (pulsa)
   ============================================================ */
#ebook{background:var(--bg-muted);padding-block:clamp(56px,7vw,92px)}
.eb-inner{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:40px;
  align-items:center;min-height:clamp(300px,28vw,380px)}
.eb-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:488px}
.eb-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eb-badge{display:inline-flex;align-items:center;background:var(--brand-subtle);color:var(--brand-active);
  font-size:var(--text-caption);letter-spacing:.02em;text-transform:uppercase;
  padding:2px 10px;border-radius:var(--radius-full)}
.eb-text h2{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.eb-body{font-size:var(--text-body-md);line-height:var(--lh-body);color:var(--fg-muted)}
.eb-cta{margin-top:4px}

/* composite sangra à DIREITA — borda esquerda acompanha a borda do texto (espelho da Entregáveis) */
.eb-img{left: calc(35% + max(0px, 57px - 5vw));top: -10%;width: clamp(480px, 70vw, 880px);aspect-ratio:989/633;z-index:2}
.eb-img > *{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center}
.eb-silk{right:-12%;top:2%;width:60%;aspect-ratio:1;background-image:var(--img-deco-silk);
  transform:rotate(-16deg);opacity:.95;z-index:1}
.eb-cover {
    left: 36%;
    top: -3%;
    width: 60%;
    aspect-ratio: 475 / 633;
    background-image: var(--img-ebook);
    z-index: 2;}
.eb-glow{left:12%;top:12%;width:62%;height:76%;background-image:var(--img-glow);
  -webkit-mask-image:var(--img-glow);mask-image:var(--img-glow);mask-mode:luminance;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  mix-blend-mode:screen;opacity:.45;z-index:3;filter:hue-rotate(40deg) brightness(2.6) blur(16px)}

@media (max-width:768px){     /* mobile: composite ACIMA do texto, centralizado */
  .eb-inner{grid-template-columns:1fr;gap:8px;text-align:center;min-height:0}
  .eb-text{align-items:center;max-width:none}
  .eb-imgcol{display:none}
  .eb-eyebrow{justify-content:center}
  .eb-img{width:min(86%,380px)!important;aspect-ratio:989/633;margin:0 auto 6px}
  .eb-cover{
        left: 13%;
        top: -35%;
        width: 69%;
    }
  .eb-silk{right:2%;top:8%;width:48%}
}

/* ============================================================
   08 · MARKETING — eyebrow + headline + 4 flip cards (hover/foco vira → CTA WhatsApp) + hint mouse + CTA · bg paper
   ============================================================ */
#marketing{padding-block:clamp(64px,8vw,96px)}
.mkt-head{text-align:center;margin-inline:auto;display:flex;flex-direction:column;
  gap:14px;align-items:center}
.mkt-title{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.mkt-flips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;margin-top:34px}

.flipCard{position:relative;min-height:180px;perspective:1100px;display:block}
.flipCard__inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.4,.05,.2,1)}
.flipCard:hover .flipCard__inner,.flipCard:focus-within .flipCard__inner{transform:rotateY(180deg)}
.flipCard__face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:28px 20px;border-radius:var(--radius-xl);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.flipCard__front{background:var(--bg-surface);border:1px solid var(--border-default)}
.flipCard__back{background-image:var(--gradient-btn-primary);transform:rotateY(180deg);gap:10px;
  box-shadow:var(--shadow-md)}
.flipCard__title{font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--text-heading-4);line-height:1.25;color:var(--fg-default)}
.flipCard__back .flipCard__title{color:var(--brand-subtle)}
.flipCard__desc{font-family:var(--font-sans);font-size:var(--text-caption);line-height:1.5;
  letter-spacing:.24px;text-transform:uppercase;color:var(--fg-muted)}
.flipCard__backLabel{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(244,237,225,.82)}
.flipCard__cta{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:gap .25s}
.flipCard__cta:hover{gap:10px}

/* hint mouse (desktop only) */
.mkt-hint{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px;color:var(--fg-muted)}
.mkt-hint__mouse{display:block}
.mkt-hint__wheel{animation:mkt-wheel 1.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mkt-wheel{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(3px);opacity:.35}}
.mkt-hint span{font-family:var(--font-sans);font-size:var(--text-caption);letter-spacing:.24px;text-transform:uppercase}
.mkt-cta{margin-top:22px;text-align:center}

@media (prefers-reduced-motion:reduce){
  .flipCard__inner{transition:none}
  .mkt-hint__wheel{animation:none}
}
@media (max-width:980px){ .mkt-flips{grid-template-columns:repeat(2,1fr)} }   /* tablet: 2×2 */
@media (max-width:768px){ .mkt-flips{grid-template-columns:1fr;gap:12px;margin-top:24px} } /* mobile: 1 col */
/* touch (sem hover) OU mobile: cards estáticos só-frente (sem hover não vira), hint off */
@media (hover:none), (max-width:768px){
  .flipCard{min-height:0;perspective:none}
  .flipCard__inner{position:static;transform:none!important}
  .flipCard__face{position:static;-webkit-backface-visibility:visible;backface-visibility:visible}
  .flipCard__back{display:none}
  .mkt-hint{display:none}
}

/* ============================================================
   09 · PODCAST (Essência Cast) — composite key art (sangra ESQ) + texto dir (eyebrow+h2+body+waveform+ghost) · bg subtle
   espelho da Entregáveis · waveform animada (CSS) · anel borrado esq
   ============================================================ */
#podcast{background:var(--bg-subtle);}
.pod-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:44px;
  align-items:center;min-height:clamp(360px,32vw,440px)}
.pod-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:495px}
.pod-text h2{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.pod-body{font-size:var(--text-body-md);line-height:1.7;color:var(--fg-muted)}

/* composite sangra à ESQUERDA — borda direita acompanha a borda do texto (espelho da Entregáveis).
   ANCORADO PELO BOTTOM: o overhang é fração da própria largura (--w) → a Consultoria corta SEMPRE ~19% (canelas),
   consistente em qualquer largura (top em % da seção variava demais entre 1440 e 1024). cabeça sangra p/ cima naturalmente. */
.pod-img{--w:clamp(380px,44vw,620px);width:var(--w);aspect-ratio:722/903;
  right:calc(50% + max(0px, 44px - 4vw));
  bottom:calc(var(--w) * -0.24);z-index:2}
.pod-img > *{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center}
.pod-art{scale: 120%;inset:0;background-image:var(--img-essencia);z-index:2}
.pod-glow{left:-8%;top:16%;width:98%;height:80%;background-image:var(--img-glow);
  -webkit-mask-image:var(--img-glow);mask-image:var(--img-glow);mask-mode:luminance;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  mix-blend-mode:screen;opacity:.5;z-index:1;filter:hue-rotate(42deg) contrast(4.5) brightness(4.5) blur(20px)}

/* anel borrado à esquerda (deco-ring-podcast-esq), atrás do composite */
.pod-ring{background-image:var(--img-deco-ring);width:clamp(240px,28vw,520px);aspect-ratio:1;
  left:clamp(-260px,-14vw,-130px);top:30%;opacity:.7;filter:blur(8px);z-index:0}

/* waveform (anim CSS) */
.pod-wave{display:flex;align-items:flex-end;gap:5px;height:50px;margin-top:4px}
.pod-bar{width:5px;border-radius:3px;background:var(--brand-default);transform-origin:bottom;
  animation:pod-wave 1.2s ease-in-out infinite alternate}
@keyframes pod-wave{from{transform:scaleY(.34)}to{transform:scaleY(1)}}
.pod-cta{margin-top:8px}

@media (prefers-reduced-motion:reduce){ .pod-bar{animation:none} }
@media (max-width:1024px){ .pod-ring{width:clamp(190px,24vw,300px);left:-15%} }
@media (max-width:768px){     /* mobile: TEXTO primeiro, FOTO por último, CORTADA (brusca) no fim da seção */
  #podcast{display:flex;flex-direction:column;overflow:hidden;padding-top:36px;padding-bottom:0}
  #podcast .lp-wrap{order:0}
  .pod-inner{grid-template-columns:1fr;gap:10px;text-align:center;min-height:0}
  .pod-text{align-items:center;max-width:none}
  .pod-imgcol{display:none}
  .pod-img{order:1!important;width:min(94%,420px)!important;max-width:none!important;
    aspect-ratio:722/903;height:auto!important;margin:20px auto -26vw!important;align-self:center}
  .pod-glow{filter:hue-rotate(42deg) contrast(4) brightness(4) blur(14px)}
  .pod-wave{justify-content:center}
  .pod-ring{display:none}
}

/* ============================================================
   10 · CONSULTORIA (B2B) — bg OPACO (neutral-200 + foto equipe 23%) que CORTA as pernas da Talita (composite do Podcast).
   z-index acima do Podcast · fita dourada sangra DIR · texto centralizado
   ============================================================ */
#consultoria{position:relative;z-index:3;        /* acima do Podcast (z1) → o bg opaco corta a Talita */
  background:var(--color-neutral-200);            /* #e2ddd4 sólido = a "lâmina" que corta */
  padding-block:clamp(96px,12vw,140px);overflow:visible}
.cons-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}   /* clipa o crop da foto */
.cons-bg::before{content:"";position:absolute;inset:0;background-image:var(--img-consultoria);
  background-size:cover;background-position:center 20%;opacity:.23}
.cons-ribbon{background-image:var(--img-goldenribbon);width:clamp(340px,40vw,720px);aspect-ratio:1;
      right: clamp(-300px, -20vw, -130px);top:-26%;opacity:.9;z-index:1;filter:saturate(1.05);rotate: 125deg}
#consultoria .lp-wrap{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:18px;text-align:center}
.cons-text-h2{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default);max-width:780px}
.cons-body{font-size:var(--text-body-md);line-height:1.7;color:var(--fg-muted);max-width:640px}
.cons-cta{margin-top:6px}

@media (max-width:768px){     /* mobile: sem sobreposição (composite do podcast vira fluxo) — seção normal */
  #consultoria{padding-block:clamp(64px,12vw,96px)}
  .cons-ribbon{display:none}
  .cons-text-h2{font-size:clamp(26px,7vw,34px)}
}

/* ============================================================
   11 · NETWEAVING CLUB — eyebrow + headline + grid 3×2 de benefícios + ghost CTA · deco digital dir · bg paper
   hook: .clubCard (scale/opacity in)
   ============================================================ */
#clube{padding-block:clamp(64px,8vw,96px);position:relative;overflow:visible}
.clube-head{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;margin-inline:auto}
.clube-title{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.clube-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;margin-top:34px}
.clubCard{display:flex;align-items:center;gap:13px;background:var(--bg-surface);
  border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:20px 24px;
  transition:transform .3s var(--ease-spring),box-shadow .3s,border-color .3s}
.clubCard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-default)}
.clubCard__dot{flex-shrink:0;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);
  background-image:var(--gradient-btn-primary)}      /* losango dourado */
.clubCard p{font-family:var(--font-sans);font-size:var(--text-body-md);line-height:1.4;color:var(--fg-default)}
.clube-cta{margin-top:30px;text-align:center}
.clube-deco{background-image:var(--img-deco-digital);width:clamp(130px,18vw,240px);aspect-ratio:1;
  left:clamp(50px, -5vw, -40px);top:0;opacity:.85;filter:blur(4px);}

@media (max-width:980px){ .clube-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:768px){
  .clube-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .clubCard{justify-content:center;text-align:center}
  .clube-deco{display:none}
}

/* ============================================================
   12 · PROVA SOCIAL — eyebrow + headline + 3 vídeos depoimento (poster + play custom) · bg subtle
   hook JS: .prova-card (click no play → video.play + .is-playing)
   ============================================================ */
#prova{background:var(--bg-subtle);padding-block:clamp(64px,8vw,96px)}
.prova-head{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;margin-inline:auto}
.prova-title{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.prova-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin-top:34px}
.prova-card{position:relative;aspect-ratio:9/16;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--color-neutral-900);box-shadow:var(--shadow-md)}
.prova-video{width:100%;height:100%;object-fit:cover;display:block}
.prova-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 32%,transparent 58%,rgba(0,0,0,.45));
  transition:opacity .35s}
.prova-card.is-playing::after{opacity:0}
.prova-name{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:15px;letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.55);transition:opacity .35s}
.prova-card.is-playing .prova-name{opacity:0}
.prova-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;
  background-image:var(--gradient-btn-primary);box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .3s var(--ease-spring),opacity .3s}
.prova-play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.prova-play:hover{transform:scale(1.08)}
.prova-card.is-playing .prova-play{opacity:0;pointer-events:none}

@media (max-width:768px){
  .prova-grid{grid-template-columns:1fr;gap:18px;max-width:330px;margin-inline:auto;margin-top:24px}
}

/* ============================================================
   13 · FAQ + WHATSAPP — esq: eyebrow+headline+card WhatsApp · dir: accordion 4 perguntas · bg paper
   hook JS: .faq-head (toggle .is-open, single-open)
   ============================================================ */
#faq{padding-block:clamp(64px,8vw,96px)}
.faq-inner{display:grid;grid-template-columns:360px minmax(0,1fr);gap:36px;align-items:start}
.faq-left{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.faq-left h2{font-size:var(--text-heading-2);line-height:1.12;color:var(--fg-default)}
.faq-wa-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);
  padding:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%;margin-top:4px}
.faq-wa-card p{font-size:var(--text-body-md);line-height:1.7;color:var(--fg-default)}
.faq-items{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:2px 20px;transition:border-color .3s,box-shadow .3s}
.faq-item.is-open{border-color:var(--brand-default);box-shadow:0 0 0 1px var(--brand-default)}  /* simula border-2 sem shift */
.faq-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:14px 0;cursor:pointer;border:0;background:none;text-align:left}
.faq-q{font-family:var(--font-sans);font-size:var(--text-body-md);line-height:1.5;color:var(--fg-default)}
.faq-icon{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:22px;color:var(--brand-active);
  flex-shrink:0;line-height:1;width:18px;text-align:center}
.faq-icon::after{content:"+"}
.faq-item.is-open .faq-icon::after{content:"−"}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-ease-out)}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}
.faq-answer__inner{overflow:hidden}
.faq-answer p{font-size:var(--text-body-sm);line-height:1.6;color:var(--fg-muted);padding-bottom:14px}

@media (max-width:860px){
  .faq-inner{grid-template-columns:1fr;gap:22px}
  .faq-left{align-items:center;text-align:center}
  .faq-wa-card{align-items:center;text-align:center}
}

/* ============================================================
   14 · FECHAMENTO / LEGADO — seção ESCURA (data-theme=dark): headline serif (cream) + script dourado + CTA WhatsApp
   bg = ink + foto da Talita esmaecida (20%)
   ============================================================ */
#legado{position:relative;overflow:hidden;background:var(--bg-canvas);
  padding-block:clamp(84px,12vw,120px);text-align:center}
.legado-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--img-hero-desktop);background-size:cover;background-position-x:center;background-position-y:27%;opacity:.18}
#legado .lp-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px}
.legado-title{font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:clamp(34px,6vw,60px);line-height:1.04;letter-spacing:-.01em;color:var(--fg-default)}
.legado-script{font-size:clamp(24px,3.4vw,32px);color:var(--brand-default);line-height:1.12;max-width:780px}
.legado-cta{margin-top:14px}
[data-theme="dark"] .lp-btn{color:var(--fg-default)}    /* texto claro sobre o botão dourado no dark */

/* ============================================================
   15 · FOOTER — barra ESCURA (data-theme=dark): logo branca esq · Instagram centro · copyright dir
   ============================================================ */
#footer{background:var(--bg-surface);padding-block:30px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-logo{display:inline-flex;flex-shrink:0}
.footer-logo img{height:44px;width:auto;display:block}
.footer-meta{font-size:var(--text-body-sm);line-height:1.6;color:var(--fg-muted)}
.footer-meta a{color:var(--fg-muted);transition:color var(--dur-default)}
.footer-meta a:hover{color:var(--brand-default)}
@media (max-width:768px){
  .footer-inner{flex-direction:column;text-align:center;gap:16px}
}