/* =========================================================
   Elleven · landing page
   Identidade: Inter Tight, Playfair itálico (1 palavra por título),
   aura AU6C no topo, vidro líquido, vermelho #E70138 como principal.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --vermelho:#E70138; --vinho:#BB051B; --pink:#FF58B5; --rosa:#FEC5E8;
  --azul:#0412EC; --azul-escuro:#061083; --off-white:#F5F3EA; --grafite:#181717;
  --fundo:#0B0A10;
  --page-bg:#0B0A10;

  --fonte:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fonte-destaque:'Playfair Display',Georgia,serif;

  --raio-sm:12px; --raio-md:20px; --raio-lg:28px; --raio-xl:36px;
  --container:1200px; --gutter:24px;
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --aura-landing: radial-gradient(ellipse 135% 105% at 50% 130%, #BB051B 0%, #E70138 28%, #FF58B5 50%, #0412EC 70%, rgba(4,18,236,0) 88%), #0B0A14;
  --grad-rosa: linear-gradient(180deg,#FEC5E8 0%,#FF58B5 45%,#E70138 100%);
  --grad-progresso: linear-gradient(90deg,#FEC5E8,#E70138);

  --vidro-1: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.25);
  --vidro-2: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.32);
  --vidro-3: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.18), 0 18px 44px rgba(0,0,0,.4);
}

/* Tema escuro (padrão da marca) */
:root,
[data-theme="dark"],
.force-dark{
  --bg:#0B0A10;
  --bg-2:#110F17;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --surface-hover:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#F5F3EA;
  --text-2:#A9A4B6;
  --text-3:#77727F;
  --accent:#FF58B5;
  --destaque:#FEC5E8;
  --btn-bg:#FFFFFF; --btn-fg:#181717; --btn-shadow:inset 0 -2px 0 rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.3);
  --chip-bg:rgba(255,255,255,.06);
  --track:rgba(255,255,255,.07);
  --bar:rgba(255,255,255,.16);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  --icon-bg:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* Tema claro (off-white + grafite, destaque em vermelho) */
[data-theme="light"]{
  --page-bg:#F5F3EA;
  --bg:#F5F3EA;
  --bg-2:#EDEADF;
  --surface:rgba(255,255,255,.62);
  --surface-2:#FFFFFF;
  --surface-hover:#FFFFFF;
  --line:rgba(24,23,23,.09);
  --line-2:rgba(24,23,23,.16);
  --text:#181717;
  --text-2:#5C5763;
  --text-3:#8A8590;
  --accent:#E70138;
  --destaque:#E70138;
  --btn-bg:#E70138; --btn-fg:#FFFFFF; --btn-shadow:0 8px 22px rgba(231,1,56,.28);
  --chip-bg:rgba(24,23,23,.05);
  --track:rgba(24,23,23,.06);
  --bar:rgba(24,23,23,.16);
  --card-shadow:0 1px 2px rgba(24,23,23,.04), 0 12px 32px rgba(24,23,23,.05);
  --icon-bg:rgba(231,1,56,.08);
  color-scheme:light;
}
/* .force-dark precisa vencer o tema claro quando estiver dentro dele */
[data-theme="light"] .force-dark{
  --bg:#0B0A10; --bg-2:#110F17; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --surface-hover:rgba(255,255,255,.07); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#F5F3EA; --text-2:#A9A4B6; --text-3:#77727F; --accent:#FF58B5; --destaque:#FEC5E8;
  --btn-bg:#FFFFFF; --btn-fg:#181717; --btn-shadow:inset 0 -2px 0 rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.3);
  --chip-bg:rgba(255,255,255,.06); --track:rgba(255,255,255,.07); --bar:rgba(255,255,255,.16);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.06); --icon-bg:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--fonte); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; transition:background-color .5s var(--ease), color .5s var(--ease);
}
img,svg,video,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
p{ margin:0; }
h1,h2,h3,h4,h5{ margin:0; font-weight:700; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:8px; }
::selection{ background:var(--vermelho); color:#fff; }

.skip-link{ position:absolute; left:16px; top:-60px; z-index:200; background:#fff; color:#181717; padding:10px 16px; border-radius:999px; font-weight:600; transition:top .2s; }
.skip-link:focus{ top:12px; }

.container{ width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }

/* ---------- Tipografia ---------- */
.h2{ font-size:clamp(2.1rem,1.3rem + 2.9vw,3.6rem); line-height:1.04; letter-spacing:-.04em; text-wrap:balance; }
.h3{ font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem); line-height:1.15; letter-spacing:-.03em; font-weight:650; }
.h4{ font-size:clamp(1.15rem,1rem + .5vw,1.4rem); line-height:1.25; letter-spacing:-.025em; font-weight:600; }
.h5{ font-size:1.125rem; line-height:1.3; letter-spacing:-.02em; font-weight:600; }
.lead{ font-size:clamp(1.02rem,.95rem + .3vw,1.2rem); color:var(--text-2); line-height:1.6; text-wrap:pretty; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.destaque{ font-family:var(--fonte-destaque); font-style:italic; font-weight:500; letter-spacing:-.01em; color:var(--destaque); padding-right:.04em; }
.muted{ color:var(--text-3); }

/* ---------- Botões ---------- */
.btn{
  --h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 26px; border-radius:999px; font-weight:600; font-size:16px; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  isolation:isolate;
}
.btn svg{ transition:transform .35s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.97); }
.btn--sm{ --h:40px; padding:0 18px; font-size:15px; }
.btn--lg{ --h:58px; padding:0 30px; font-size:17px; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--btn-shadow); }
.btn--primary:hover{ transform:translateY(-2px); }
.btn--glass{
  background:var(--surface-2); color:var(--text); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
.btn--glass:hover{ background:var(--surface-hover); transform:translateY(-2px); }
/* Brilho da marca embaixo do botão */
.btn--glow::before{
  content:""; position:absolute; inset:30% 6% -40%; z-index:-1; border-radius:999px;
  background:linear-gradient(90deg,#FF58B5,#E70138,#0412EC); filter:blur(22px); opacity:.75;
  transition:opacity .35s var(--ease), inset .35s var(--ease);
}
.btn--glow:hover::before{ opacity:1; inset:20% 0 -50%; }

/* Vidro líquido (adaptado do componente LiquidButton), no vermelho da Elleven */
.lg, .division{ --lg-sombra:
  0 0 8px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3.5px rgba(255,255,255,.09), inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
  inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6),
  inset 0 0 6px 6px rgba(255,255,255,.12), inset 0 0 2px 2px rgba(255,255,255,.06), 0 0 12px rgba(0,0,0,.15); }
[data-theme="light"] .lg, [data-theme="light"] .division{ --lg-sombra:
  0 0 6px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3px rgba(0,0,0,.9), inset -3px -3px .5px -3px rgba(0,0,0,.85),
  inset 1px 1px 1px -.5px rgba(0,0,0,.6), inset -1px -1px 1px -.5px rgba(0,0,0,.6),
  inset 0 0 6px 6px rgba(0,0,0,.12), inset 0 0 2px 2px rgba(0,0,0,.06), 0 0 12px rgba(255,255,255,.15); }
.lg{ isolation:isolate; overflow:visible; color:#fff; background:transparent; border:0; transition:transform .3s var(--ease-out), filter .3s; }
.lg > *{ position:relative; z-index:1; }
/* vidro: quase transparente, com o brilho nas bordas e um véu vermelho */
.lg::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background-color:rgba(231,1,56,.22); background-image:linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0));
  box-shadow:var(--lg-sombra); transition:background-color .3s, background-image .3s, box-shadow .3s;
}
/* distorce o que está atrás (Chrome e Edge); nos outros, desfoca */
.lg::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; overflow:hidden;
  -webkit-backdrop-filter:blur(6px) saturate(170%); backdrop-filter:url(#container-glass) saturate(170%);
}
.lg--forte::before{ background-color:rgba(231,1,56,.62); box-shadow:var(--lg-sombra), 0 10px 30px rgba(231,1,56,.35); }
/* passar o mouse: cresce 5% (como no componente), clareia e ganha um brilho em cima */
.lg:hover{ transform:scale(1.05); filter:brightness(1.1); }
.lg:hover::before{ background-color:rgba(231,1,56,.3); background-image:linear-gradient(to top, rgba(255,255,255,0) 30%, rgba(255,255,255,.18)); }
.lg--forte:hover::before{ background-color:rgba(231,1,56,.72); }
.lg:active{ transform:scale(.97); filter:brightness(.95); }
[data-theme="light"] .lg:not(.lg--forte){ color:#BB051B; }
[data-theme="light"] .lg:not(.lg--forte)::before{ background-color:rgba(231,1,56,.08); }

.icon-btn{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--chip-bg); border:1px solid var(--line); color:var(--text);
  transition:background-color .25s, transform .3s var(--ease-out), opacity .25s;
}
.icon-btn:hover:not(:disabled){ background:var(--surface-hover); transform:scale(1.05); }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.icon-btn--solid{ background:var(--btn-bg); color:var(--btn-fg); border-color:transparent; }
.icon-btn--solid:hover:not(:disabled){ background:var(--btn-bg); }

.link-arrow{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; color:var(--text-2); transition:color .25s; }
.link-arrow:hover{ color:var(--text); }
.link-arrow svg{ transition:transform .3s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(3px); }

.chip{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.02em; background:var(--chip-bg); border:1px solid var(--line-2); color:var(--text);
}
.chip--glow{ background:rgba(231,1,56,.28); border-color:rgba(254,197,232,.4); color:#fff; box-shadow:0 0 22px rgba(231,1,56,.5), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- Vidro líquido ---------- */
.glass{
  background:
    radial-gradient(ellipse 50% 120% at 12% -20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.10) 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:var(--vidro-2);
  -webkit-backdrop-filter:blur(28px) saturate(200%); backdrop-filter:blur(28px) saturate(200%);
}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--raio-lg);
  box-shadow:var(--card-shadow); transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out);
}

/* ---------- Seções ---------- */
.section{ padding:clamp(80px,7vw + 40px,150px) 0; position:relative; }
.section--tight{ padding:clamp(40px,4vw + 20px,80px) 0; }
.section-head{ display:grid; gap:16px; margin-bottom:clamp(36px,3vw + 20px,64px); max-width:820px; }
.section-head .lead{ max-width:640px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; justify-items:center; }
.section-head--split{ max-width:none; grid-template-columns:1.1fr .9fr; align-items:end; gap:24px 64px; }
.section-head--split > div{ display:grid; gap:16px; }
.row-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }

/* Revelar ao rolar */
.js [data-reveal]{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:var(--d,0s); }
.js [data-reveal].is-in{ opacity:1; transform:none; filter:none; }

/* =========================================================
   MENU
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease-out), height .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(11,10,16,.62); border-bottom-color:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
}
[data-theme="light"] .nav.is-scrolled{ background:rgba(245,243,234,.72); border-bottom-color:rgba(24,23,23,.07); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo .logo{ height:34px; width:auto; }
.logo--red{ display:none; }
[data-theme="light"] .nav.is-scrolled .logo--white,
[data-theme="light"] .footer .logo--white{ display:none; }
[data-theme="light"] .nav.is-scrolled .logo--red,
[data-theme="light"] .footer .logo--red{ display:block; }

.nav__links{ display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500; color:#F5F3EA; }
.nav__links > a:not(.btn){ position:relative; opacity:.88; transition:opacity .25s; }
.nav__links > a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.nav__links > a:not(.btn):hover{ opacity:1; }
.nav__links > a:not(.btn):hover::after,
.nav__links > a.is-active::after{ transform:scaleX(1); }
.nav__links > a.is-active{ opacity:1; }
.nav__sep{ width:28px; height:1px; background:currentColor; opacity:.35; }
.nav .btn--primary{ --btn-bg:#fff; --btn-fg:#181717; }
[data-theme="light"] .nav.is-scrolled .nav__links{ color:#181717; }
[data-theme="light"] .nav.is-scrolled .btn--primary{ --btn-bg:#E70138; --btn-fg:#fff; }
.nav__toggle{ display:none; width:44px; height:44px; place-items:center; border-radius:50%; color:#F5F3EA; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
[data-theme="light"] .nav.is-scrolled .nav__toggle{ color:#181717; border-color:rgba(24,23,23,.15); background:rgba(255,255,255,.6); }

.menu-mobile{
  position:fixed; inset:0; z-index:99; padding:calc(var(--nav-h) + 24px) 24px 32px;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  background:var(--aura-landing); color:#F5F3EA;
  opacity:0; transition:opacity .35s var(--ease);
}
.menu-mobile.is-open{ opacity:1; }
.menu-mobile nav{ display:grid; gap:4px; }
.menu-mobile nav a{ font-size:2rem; font-weight:700; letter-spacing:-.04em; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.menu-mobile .btn{ --btn-bg:#fff; --btn-fg:#181717; }

/* =========================================================
   1. TOPO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--fundo); color:var(--text);
  padding:calc(var(--nav-h) + clamp(40px,6vw,96px)) 0 40px;
  min-height:100vh; min-height:100svh;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero__fallback{ position:absolute; inset:0; z-index:-3; background:var(--aura-landing); }
.hero.has-webgl .hero__fallback{ opacity:0; }
/* grão sutil por cima da aura */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__fade{ position:absolute; inset:auto 0 0; height:140px; z-index:-1; background:linear-gradient(180deg, rgba(11,10,16,0), var(--page-bg)); }

.hero__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__eyebrow{ margin-bottom:22px; color:#FEC5E8; }
.hero__title{
  font-size:clamp(2.45rem,1rem + 5.6vw,5.6rem); line-height:.98; letter-spacing:-.045em; font-weight:700;
  color:#F5F3EA; max-width:1080px; text-wrap:balance;
}
.hero__title-2{ display:block; margin-top:.08em; }
.hero__title .destaque{ color:#FEC5E8; }
.hero__sub{ margin-top:26px; max-width:660px; font-size:clamp(1.05rem,.98rem + .35vw,1.25rem); line-height:1.55; color:rgba(245,243,234,.78); text-wrap:pretty; }

/* animação de entrada do título (palavra por palavra) */
.split-word{ display:inline-block; white-space:pre; }
.js .split-word{ opacity:0; transform:translateY(.45em); filter:blur(10px); animation:wordIn 1s var(--ease-out) forwards; animation-delay:calc(var(--i) * 55ms + 120ms); }
@keyframes wordIn{ to{ opacity:1; transform:none; filter:none; } }
.js [data-intro]{ opacity:0; transform:translateY(22px); animation:wordIn 1.1s var(--ease-out) forwards; animation-delay:var(--intro-d, .6s); }

/* ---------- Vídeo de vendas ---------- */
.video{ position:relative; width:100%; max-width:960px; margin-top:clamp(40px,4vw,60px); }
.video__glow{ position:absolute; inset:8% 4% -6%; z-index:-1; border-radius:40px; background:radial-gradient(ellipse at 50% 60%, rgba(255,88,181,.55), rgba(4,18,236,.35) 45%, transparent 72%); filter:blur(50px); }
.video__frame{
  position:relative; aspect-ratio:16/9; border-radius:var(--raio-xl); overflow:hidden;
  background:#08070c; border:1px solid rgba(255,255,255,.22); box-shadow:var(--vidro-3);
}
.video__frame::before{ /* borda de vidro */ content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.06); }
.video__frame iframe,.video__frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.video__poster{ position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; }
.video__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.2s var(--ease-out), filter .6s; }
.video__poster:hover .video__img{ transform:scale(1.05); }
.video__shade{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(11,10,16,.1), rgba(11,10,16,.55)); }
.video__center{ position:relative; z-index:2; display:grid; justify-items:center; gap:14px; }
.video__play{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center; color:#181717; padding-left:4px;
  background:rgba(255,255,255,.92); box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 18px 50px rgba(231,1,56,.45);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.video__play::after{ content:""; position:absolute; width:88px; height:88px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); animation:pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.7); opacity:0; } }
.video__poster:hover .video__play{ transform:scale(1.07); box-shadow:0 0 0 14px rgba(255,255,255,.16), 0 22px 60px rgba(231,1,56,.6); }
.video__label{ font-size:14px; font-weight:600; letter-spacing:.02em; color:#fff; padding:6px 14px; border-radius:999px; background:rgba(11,10,16,.45); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.video__placeholder{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap; }
.video.has-video .video__placeholder{ display:none; }

/* ---------- Botão principal do topo ---------- */
@property --cta-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.hero__cta{ display:grid; justify-items:center; gap:18px; margin-top:clamp(36px,4vw,56px); }
.cta-quiz{ position:relative; display:inline-flex; padding:3px; border-radius:999px; isolation:isolate; transition:transform .5s var(--ease-out); }
.cta-quiz__ring{ position:absolute; inset:0; z-index:-1; border-radius:inherit; background:conic-gradient(from var(--cta-a), #FEC5E8, #FF58B5, #E70138, #0412EC, #FF58B5, #FEC5E8); animation:ctaSpin 3.2s linear infinite; }
.cta-quiz__glow{ position:absolute; inset:-14px -18px; z-index:-2; border-radius:inherit; background:conic-gradient(from var(--cta-a), #FF58B5, #E70138, #0412EC, #FF58B5); filter:blur(28px); opacity:.75; animation:ctaSpin 3.2s linear infinite, ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaSpin{ to{ --cta-a:360deg; } }
@keyframes ctaPulse{ 50%{ opacity:1; transform:scale(1.06); } }
.cta-quiz__inner{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:22px;
  height:78px; padding:0 12px 0 40px; border-radius:inherit; background:#fff; color:#181717;
  font-size:22px; font-weight:700; letter-spacing:-.03em; box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
.cta-quiz__inner::after{ /* brilho que passa pelo botão */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,88,181,.28), transparent);
  transform:skewX(-20deg); animation:ctaShine 3.6s var(--ease) infinite 1.5s;
}
@keyframes ctaShine{ 0%{ left:-60%; } 45%,100%{ left:130%; } }
.cta-quiz__arrow{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--vermelho); color:#fff; box-shadow:0 6px 18px rgba(231,1,56,.45); transition:transform .45s var(--ease-out); }
.cta-quiz:hover{ transform:translateY(-3px) scale(1.03); }
.cta-quiz:hover .cta-quiz__arrow{ transform:translateX(4px); }
.cta-quiz:active{ transform:scale(.98); }

.hero__micro{ font-size:14px; color:rgba(245,243,234,.7); max-width:520px; }

.hero__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:clamp(48px,6vw,96px); color:rgba(245,243,234,.72); font-size:15px; }
.hero__bottom p{ max-width:340px; }
.hero__scroll{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.22); color:#fff; animation:bob 2.6s ease-in-out infinite; transition:background-color .25s; }
.hero__scroll:hover{ background:rgba(255,255,255,.1); }
@keyframes bob{ 50%{ transform:translateY(6px); } }

/* =========================================================
   DIVISÕES
   ========================================================= */
.divisions{ padding:clamp(56px,5vw,88px) 0 0; }
.divisions__row{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.divisions__row{ position:relative; isolation:isolate; }
.division{ /* mesmo visual da faixa da Turma Fundadora, formato de pílula */
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:96px; padding:0 12px; text-align:center;
  border-radius:999px; border:1px solid rgba(255,88,181,.35);
  background:linear-gradient(90deg, rgba(231,1,56,.16), rgba(255,88,181,.10) 50%, rgba(4,18,236,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s var(--ease-out), border-color .3s;
}
.division:hover{ transform:scale(1.05); border-color:rgba(255,88,181,.6); }
[data-theme="light"] .division{ background:linear-gradient(90deg, rgba(231,1,56,.08), rgba(255,88,181,.06) 50%, rgba(4,18,236,.05)); border-color:rgba(231,1,56,.25); }
.division strong{ font-size:1.25rem; font-weight:700; letter-spacing:-.03em; }
.division span{ font-size:12.5px; color:var(--text-2); }
.division--accent{ flex-direction:row; gap:8px; color:var(--accent); }
.division--accent span{ color:var(--text-2); font-size:14px; font-weight:500; }

/* =========================================================
   2. PARA QUEM É
   ========================================================= */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fit__card{ padding:clamp(28px,3vw,44px); display:grid; gap:24px; align-content:start; }
.fit__card--yes{ position:relative; overflow:hidden; }
.fit__card--yes::before{ content:""; position:absolute; width:420px; height:420px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(255,88,181,.22), transparent 65%); pointer-events:none; }
[data-theme="light"] .fit__card--yes::before{ background:radial-gradient(circle, rgba(231,1,56,.10), transparent 65%); }
.list{ display:grid; gap:18px; }
.list li{ display:grid; grid-template-columns:28px 1fr; gap:14px; color:var(--text-2); line-height:1.55; }
.list__icon{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; margin-top:-1px; }
.list__icon--yes{ background:var(--grad-rosa); color:#fff; box-shadow:0 4px 14px rgba(231,1,56,.35); }
.list__icon--no{ background:var(--chip-bg); border:1px solid var(--line-2); color:var(--text-3); }

/* Para quem é: cartão que se divide e vira (adaptado do componente ScrollSplitCard) */
.split{ position:relative; height:420vh; }
.split__sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; perspective:1200px; }
.split__dica{ position:absolute; top:20%; left:0; right:0; text-align:center; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.split__cards{ position:relative; display:flex; width:100%; max-width:56rem; height:min(480px,62vh); padding:0 16px; transform-style:preserve-3d; will-change:transform; }
.split__card{ position:relative; flex:1; height:100%; transform-style:preserve-3d; will-change:transform; }
.split__face{ position:absolute; inset:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.split__frente{ z-index:2; border-radius:16px 0 0 16px; }
.split__card:nth-child(2) .split__frente{ border-radius:0; }
.split__card:nth-child(3) .split__frente{ border-radius:0 16px 16px 0; }
.split__arte{
  position:absolute; top:0; bottom:0; width:300%; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center;
  background:url(../assets/auras/AU6C-arco-landing-site-1920x1080.jpg) center / cover no-repeat, #0B0A14; color:#F5F3EA;
}
.split__arte .eyebrow{ color:#FEC5E8; }
.split__titulo{ font-size:clamp(2.2rem,1.2rem + 3.6vw,4.4rem); font-weight:700; letter-spacing:-.045em; line-height:1; }
.split__titulo .destaque{ color:#FEC5E8; }
.split__verso{
  z-index:1; transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; gap:14px; padding:26px;
  border-radius:16px; border:1px solid rgba(255,255,255,.05);
}
.split__verso::before{ /* granulado */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.split__verso > *{ position:relative; }
.split__verso--1{ background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%), #E70138; color:#fff; }
.split__verso--2{ background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%), #0412EC; color:#fff; }
.split__verso--3{ background:linear-gradient(135deg, rgba(255,255,255,.5), transparent 60%), #F5F3EA; color:#181717; }
/* emoji "adesivo", como na roda */
.split__emoji{
  align-self:flex-start; display:block; line-height:1; margin-bottom:4px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:calc(clamp(50px,4.6vw,68px) * var(--fs,1)); transform:rotate(var(--rot,0deg));
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));
}
/* texto curto = letra maior, na mesma proporção da roda (--fs vem do JavaScript) */
.split__h{ font-size:calc(clamp(1.15rem,1rem + .5vw,1.45rem) * (1 + (var(--fs,1) - 1) * .6)); line-height:1.12; letter-spacing:-.03em; font-weight:700; }
.split__lista{ display:grid; gap:10px; font-size:calc(13.5px * var(--fs,1)); line-height:1.45; }
.split__lista li{ display:grid; grid-template-columns:20px 1fr; gap:8px; opacity:.9; }
.split__marca{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; margin-top:-1px; }
.split__marca--sim{ background:rgba(255,255,255,.95); color:#E70138; }
.split__verso--2 .split__marca--sim{ color:#0412EC; }
.split__marca--nao{ background:rgba(24,23,23,.1); color:#181717; }
.split__nav{ display:none; }
.split__fim{ position:absolute; bottom:12%; left:0; right:0; padding:0 24px; text-align:center; font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem); font-weight:600; letter-spacing:-.03em; opacity:0; }
/* celular e "reduzir movimento": cartões empilhados, sem a animação */
/* Celular e tablet: o cartão inteiro se abre para a direita em três fichas, que viram; depois é só arrastar */
.split.is-movel{ height:300vh; }
.split.is-movel .split__sticky{ flex-direction:column; gap:18px; perspective:none; }
.split.is-movel .split__dica{ position:static; order:-1; }
.split.is-movel .split__cards{
  max-width:none; height:min(66svh,540px); padding:0 calc((100vw - min(82vw,380px)) / 2); gap:14px;
  overflow:hidden; perspective:1100px; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  transform:none !important;
}
.split.is-movel .split__cards::-webkit-scrollbar{ display:none; }
.split.is-movel.is-swipe .split__cards{ overflow-x:auto; }
.split.is-movel .split__card{ flex:0 0 min(82vw,380px); scroll-snap-align:center; }
.split.is-movel .split__face{ border-radius:20px !important; }
.split.is-movel .split__arte{ left:0 !important; width:100%; padding:0 20px; }
.split.is-movel .split__titulo{ font-size:clamp(2rem,9vw,2.8rem); }
.split.is-movel .split__verso{ padding:24px; }
.split.is-movel .split__lista{ font-size:calc(14px * var(--fs,1)); }
.split.is-movel .split__nav{ display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; }
.split__arrasta{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.split__dots{ display:flex; gap:6px; }
.split__dots i{ width:7px; height:7px; border-radius:999px; background:var(--line-2); transition:width .35s var(--ease-out), background-color .3s; }
.split__dots i.is-on{ width:24px; background:var(--text); }
.split.is-movel .split__fim{ position:static; font-size:1.2rem; padding:0 28px; }

.split.is-static{ height:auto; padding:clamp(64px,8vw,120px) 0; }
.split.is-static .split__sticky{ position:static; height:auto; display:block; perspective:none; overflow:visible; }
.split.is-static .split__dica, .split.is-static .split__frente{ display:none; }
.split.is-static .split__cards{ height:auto; flex-direction:column; gap:14px; margin:0 auto; transform:none !important; }
.split.is-static .split__card{ transform:none !important; height:auto; }
.split.is-static .split__verso{ position:relative; transform:none; min-height:0; box-shadow:none !important; }
.split.is-static .split__emoji{ margin-bottom:8px; }
.split.is-static .split__fim{ position:static; opacity:1 !important; transform:none !important; margin-top:28px; }

/* =========================================================
   3. PROBLEMA + FRASE
   ========================================================= */
.problem__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px clamp(40px,6vw,96px); align-items:start; }
.problem__head{ display:grid; gap:16px; position:sticky; top:calc(var(--nav-h) + 40px); }
.problem__text{ display:grid; gap:22px; font-size:clamp(1.05rem,1rem + .25vw,1.2rem); color:var(--text-2); }
.problem__close{ color:var(--text); font-weight:500; }
.problem__me{
  font-size:clamp(1.2rem,1.05rem + .55vw,1.45rem); line-height:1.4; letter-spacing:-.02em; font-weight:500; color:var(--text);
  padding:6px 0 6px 22px; border-left:2px solid; border-image:var(--grad-rosa) 1;
}

/* =========================================================
   Porta do ginásio
   A porta é a foto (assets/porta/porta.jpg), recortada em moldura + duas folhas
   que giram em 3D. Os visores são vazados: por eles aparece o vídeo.
   Parede e piso são desenhados pelo JS num canvas, nas cores da foto.
   O JS só mexe nas variáveis: --ang (folhas), --abre (0 a 1),
   --s (câmera entrando), --luz (clarão),
   --frase (escurece o fundo), --fora (vinheta some ao entrar) e --p (barra).
   ========================================================= */
.porta{ position:relative; height:480vh; background:#0b0a09; }
.porta__palco{
  --dw:min(96svh,80vw);              /* largura da moldura (a foto) */
  --dh:calc(var(--dw) * 1.009709);   /* altura da moldura (728/721 da foto) */
  --chao:97%;                        /* linha do chão: quase nada de piso */
  --foto:url("../assets/porta/porta.jpg");   /* o JS troca pelo caminho do config.js (portaFoto) */
  --foto-tam:calc(var(--dw) * 1.011096) calc(var(--dw) * 1.019417);
  --ang:0deg; --abre:0; --s:1; --luz:0; --frase:0; --fora:1; --p:0;
  --t:16px;                          /* espessura da folha (o JS ajusta: 4,4 cm) */
  --brilho:calc(-20% + var(--abre) * 140%);
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:#b9ad9f;
}

/* Quadra (vídeo): centralizada no vão da porta, do tamanho certo para cobrir a abertura.
   O JS posiciona o vídeo a cada quadro, acompanhando a câmera até ele ocupar a tela toda. */
.porta__cena{ position:absolute; inset:0; z-index:0; background:#0b0a10; }
.porta__video{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transform-origin:0 0; will-change:transform; }
.porta__cena::after{
  content:""; position:absolute; inset:0; opacity:var(--frase);
  background:linear-gradient(180deg, rgba(7,6,10,.55), rgba(7,6,10,.3) 40%, rgba(7,6,10,.35) 70%, rgba(7,6,10,.7));
}

/* Corredor: parede + piso (canvas), a porta e a luz no chão */
.porta__corredor{ position:absolute; inset:0; z-index:1; transform:scale(var(--s)); transform-origin:50% calc(var(--chao) - var(--dh) / 2); }
.porta__ambiente{ position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.porta__poca{
  position:absolute; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:var(--abre);
  left:calc(50% - var(--dw) * .62); width:calc(var(--dw) * 1.24); top:var(--chao); height:calc(var(--dh) * .5);
  clip-path:polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(255,242,228,.42), rgba(255,236,214,.12) 45%, rgba(255,236,214,0));
}

.porta__porta{
  position:absolute; z-index:1; left:calc(50% - var(--dw) / 2); top:calc(var(--chao) - var(--dh)); width:var(--dw); height:var(--dh);
  perspective:calc(var(--dw) * 2.4); perspective-origin:50% 50%;
  /* Reflexo no piso envernizado (Chrome, Edge e Safari) */
  -webkit-box-reflect:below 0 linear-gradient(transparent 70%, rgba(255,255,255,.26));
}
/* Moldura: a foto inteira com o vão das folhas recortado */
.porta__batente{
  position:absolute; inset:0; z-index:2;
  background:var(--foto) calc(var(--dw) * -.006935) calc(var(--dw) * -.004161) / var(--foto-tam) no-repeat;
  /* a borda de cima da moldura é levemente inclinada na foto */
  clip-path:polygon(evenodd, 0 0, 100% 1.24%, 100% 100%, 0 100%, 0 0, 2.635% 2.747%, 2.635% 100%, 97.503% 100%, 97.503% 2.747%, 2.635% 2.747%);
}

/* Folhas: cada uma é o pedaço dela na foto */
.porta__folha{ position:absolute; top:2.747%; bottom:0; transform-style:preserve-3d; }
.porta__folha--esq{ left:2.635%; width:45.908%; transform-origin:0 50%; transform:rotateY(var(--ang)); }
.porta__folha--dir{ left:48.544%; width:48.96%; transform-origin:100% 50%; transform:rotateY(calc(var(--ang) * -1)); }
.porta__folha::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(255,240,222,0) calc(var(--brilho) - 18%), rgba(255,240,222,.07) var(--brilho), rgba(255,240,222,0) calc(var(--brilho) + 18%)),
    linear-gradient(rgba(0,0,0,calc(var(--abre) * .4)), rgba(0,0,0,calc(var(--abre) * .4))),
    var(--foto-folhas, var(--foto)) 0 0 / var(--foto-tam) no-repeat;
}
.porta__folha--esq::before{
  background-position:0 0, 0 0, calc(var(--dw) * -.033287) calc(var(--dw) * -.0319);
  clip-path:polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 72.21% 12.006%, 72.21% 42.232%, 83.08% 42.232%, 83.08% 12.006%, 72.21% 12.006%);
}
.porta__folha--dir::before{
  background-position:0 0, 0 0, calc(var(--dw) * -.492372) calc(var(--dw) * -.0319);
  clip-path:polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 20.4% 12.006%, 20.4% 42.232%, 30.59% 42.232%, 30.59% 12.006%, 20.4% 12.006%);
}
/* Visores: vazados (dá para ver a quadra), com a espessura da porta por dentro e o vidro no meio */
.porta__visor{ position:absolute; top:12.006%; height:30.226%; transform-style:preserve-3d; }
.porta__visor > i{ position:absolute; display:block; }
.porta__visor .v-vidro{
  inset:0; transform:translateZ(calc(var(--t) * -.5));
  background:linear-gradient(116deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.08)), rgba(232,238,244,.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
.porta__visor .v-cima{ left:0; right:0; top:0; height:var(--t); transform-origin:50% 0; transform:rotateX(-90deg); background:#0d0d0f; }
.porta__visor .v-baixo{ left:0; right:0; bottom:0; height:var(--t); transform-origin:50% 100%; transform:rotateX(90deg); background:linear-gradient(#2a2a2e, #1c1c1f); }
.porta__visor .v-esq{ top:0; bottom:0; left:0; width:var(--t); transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg, #1d1d20, #121214); }
.porta__visor .v-dir{ top:0; bottom:0; right:0; width:var(--t); transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(90deg, #121214, #1d1d20); }

/* Ferragens em 3D: cada peça é uma caixa com a foto na frente e laterais de alumínio.
   O JS cria as peças, dá a profundidade (--d) e compensa a perspectiva para, fechada, ficar igual à foto. */
.porta__peca{ position:absolute; transform-style:preserve-3d; }
.porta__peca > i{ position:absolute; display:block; }
.porta__peca .f-sombra{ inset:0; border-radius:2px; box-shadow:0 calc(var(--d) * .5) calc(var(--d) * .9) rgba(0,0,0,.55); }
.porta__peca .f-frente{ inset:0; transform:translateZ(var(--d)); background:var(--foto) 0 0 / var(--foto-tam) no-repeat; }
.porta__peca .f-cima{ left:0; right:0; top:0; height:var(--d); transform-origin:50% 0; transform:rotateX(90deg); background:linear-gradient(90deg, #c9c9cc, #ececee 50%, #b9b9bd); }
.porta__peca .f-baixo{ left:0; right:0; bottom:0; height:var(--d); transform-origin:50% 100%; transform:rotateX(-90deg); background:linear-gradient(90deg, #47474c, #616166 50%, #424247); }
.porta__peca .f-esq{ top:0; bottom:0; left:0; width:var(--d); transform-origin:0 50%; transform:rotateY(-90deg); background:linear-gradient(180deg, #b4b4b8, #85858a); }
.porta__peca .f-dir{ top:0; bottom:0; right:0; width:var(--d); transform-origin:100% 50%; transform:rotateY(90deg); background:linear-gradient(180deg, #a6a6aa, #77777c); }
.porta__folha--esq .porta__visor{ left:72.21%; width:10.87%; }
.porta__folha--dir .porta__visor{ left:20.4%; width:10.19%; }
/* Espessura da folha (aparece de lado quando ela gira) */
.porta__borda{ position:absolute; top:0; bottom:0; width:calc(var(--dw) * .022); background:linear-gradient(90deg, #110b06, #2c2016 50%, #150e08); }
.porta__folha--esq .porta__borda{ right:0; transform-origin:100% 50%; transform:rotateY(-90deg); }
.porta__folha--dir .porta__borda{ left:0; transform-origin:0 50%; transform:rotateY(90deg); }

/* Vinheta de câmera e grão de filme: juntam a foto, o desenho e o vídeo */
.porta__vinheta{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--fora); background:radial-gradient(ellipse 75% 70% at 50% 48%, rgba(10,7,4,0) 50%, rgba(10,7,4,.5) 100%); }
.porta__grao{ position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:.09; mix-blend-mode:overlay; background-size:180px 180px; }

/* Clarão ao cruzar a porta */
.porta__luz{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:var(--luz);
  background:radial-gradient(ellipse 60% 62% at 50% calc(var(--chao) - var(--dh) / 2), rgba(255,246,236,.95), rgba(255,230,210,.35) 45%, rgba(255,230,210,0) 75%);
}

/* Textos */
.porta__titulo{
  position:absolute; z-index:4; left:calc(50% - min(calc(var(--dw) * .42), calc(50% - var(--gutter)))); width:min(calc(var(--dw) * .84), calc(100% - var(--gutter) * 2));
  top:calc(var(--chao) - var(--dh) * .4); height:calc(var(--dh) * .3);
  display:grid; place-items:center; text-align:center; pointer-events:none;
  font-size:min(calc(var(--dw) * .1), 9.5vw); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; text-wrap:balance; color:var(--text);
  text-shadow:0 2px 18px rgba(0,0,0,.6); will-change:transform,filter,opacity;
}
.porta__frase{
  position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%,-50%); width:min(1000px, calc(100% - var(--gutter) * 2));
  text-align:center; pointer-events:none; color:var(--text);
  font-size:clamp(2.2rem,.9rem + 5.4vw,5.4rem); line-height:1.02; letter-spacing:-.045em; font-weight:700; text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.55);
}
.js .porta__frase .pw{ display:inline-block; white-space:pre; opacity:0; filter:blur(8px); transform:translateY(.14em); will-change:opacity,filter,transform; }
.porta__frase .destaque .pw{ padding-right:.02em; }
.porta__dica{
  position:absolute; left:50%; bottom:clamp(14px,3.5vh,32px); z-index:5; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
  font-size:12px; font-weight:600; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; white-space:nowrap; color:rgba(255,252,246,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.6); transition:opacity .4s var(--ease);
}
.porta__dica svg{ animation:porta-quica 1.6s ease-in-out infinite; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.porta__dica.is-off{ opacity:0; }
.porta__progresso{ position:absolute; left:0; right:0; bottom:0; z-index:5; height:2px; background:rgba(255,255,255,.14); }
.porta__progresso span{ display:block; height:100%; background:var(--grad-progresso); transform:scaleX(var(--p)); transform-origin:0 50%; }
@keyframes porta-quica{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(5px); opacity:1; } }

/* Celular em pé: a porta ocupa a largura e sobra parede em cima e piso embaixo */
@media (max-aspect-ratio:4/5){
  .porta__palco{ --dw:min(140vw,68svh); --chao:97%; }
}
@media (max-width:640px){ .porta{ height:420vh; } }

/* Sem JavaScript: mostra a quadra e a frase, sem a porta */
html:not(.js) .porta{ height:auto; }
html:not(.js) .porta__palco{ position:relative; }
html:not(.js) .porta__corredor,
html:not(.js) .porta__titulo,
html:not(.js) .porta__vinheta,
html:not(.js) .porta__dica,
html:not(.js) .porta__progresso{ display:none; }

@media (prefers-reduced-motion:reduce){
  .porta{ height:auto; }
  .porta__palco{ position:relative; --frase:1; --fora:0; }
  .porta__corredor,.porta__titulo,.porta__vinheta,.porta__dica,.porta__progresso,.porta__luz{ display:none; }
  .js .porta__frase .pw{ opacity:1; filter:none; transform:none; }
  .porta__dica svg{ animation:none; }
}

/* =========================================================
   4. COMO FUNCIONA
   ========================================================= */
.steps{ overflow:hidden; }
.steps__track{
  display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:8px max(var(--gutter), calc((100vw - var(--container)) / 2)) 24px; scroll-padding:0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  scrollbar-width:none; cursor:grab; outline:none;
}
.steps__track::-webkit-scrollbar{ display:none; }
.steps__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.steps__track.is-dragging *{ pointer-events:none; }
.step{
  flex:0 0 clamp(290px,30vw,380px); min-height:440px; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  padding:28px; border-radius:var(--raio-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow);
  transition:border-color .35s, background-color .35s, transform .5s var(--ease-out), opacity .9s var(--ease-out), filter .9s var(--ease-out);
}
.step:hover{ border-color:var(--line-2); background:var(--surface-hover); }
.step__text{ display:grid; gap:10px; }
.step__num{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.step p{ color:var(--text-2); font-size:15.5px; }
.step__art{ margin:0 -8px -8px; border-radius:22px; background:radial-gradient(ellipse at 50% 70%, rgba(255,88,181,.14), transparent 70%); }
.step__art svg{ width:100%; height:auto; transition:transform .8s var(--ease-out); }
.step:hover .step__art svg{ transform:translateY(-6px) rotate(-1.5deg) scale(1.03); }
[data-theme="light"] .step__art{ background:radial-gradient(ellipse at 50% 70%, rgba(24,23,23,.9), #181717 75%); }
/* Setas para quem prefere clicar em vez de arrastar */
.setas{ display:inline-flex; align-items:center; gap:10px; }
.seta{
  width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%;
  color:var(--text); background:var(--chip-bg); border:1px solid var(--line-2);
  transition:background-color .25s, transform .3s var(--ease-out), opacity .25s;
}
.seta:hover{ background:var(--surface-hover); transform:scale(1.06); }
.seta:active{ transform:scale(.94); }
.seta:disabled{ opacity:.3; cursor:default; transform:none; }
.setas--roda{ margin-top:14px; pointer-events:auto; }
.steps__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.steps__close{ font-size:clamp(1.1rem,1rem + .4vw,1.35rem); font-weight:600; letter-spacing:-.02em; }
.drag-hint{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.drag-cursor{
  position:fixed; left:0; top:0; z-index:90; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; pointer-events:none;
  display:grid; place-items:center; font-size:13px; font-weight:600; color:#181717; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.3); transform:translate3d(var(--x,0),var(--y,0),0) scale(0); transition:transform .3s var(--ease-out);
}
.drag-cursor.is-on{ transform:translate3d(var(--x,0),var(--y,0),0) scale(1); }
.drag-cursor.is-down{ transform:translate3d(var(--x,0),var(--y,0),0) scale(.82); }
[data-theme="light"] .drag-cursor{ background:#E70138; color:#fff; }

/* =========================================================
   5. O QUE TEM DENTRO
   ========================================================= */
/* Cartão que endireita na rolagem (adaptado do componente ContainerScroll do 21st.dev) */
.dentro{ padding-top:0; }
.cscroll{ position:relative; display:flex; align-items:center; justify-content:center; min-height:80rem; padding:0 80px; }
.cscroll__stage{ position:relative; width:100%; padding:120px 0 40px; perspective:1000px; display:grid; justify-items:center; gap:28px; }
.cscroll__header{ max-width:64rem; margin:0 auto; text-align:center; display:grid; gap:16px; justify-items:center; will-change:transform; }
.cscroll__card{
  width:100%; max-width:64rem; margin:-1rem auto 0; padding:24px; border:4px solid #6C6C6C; border-radius:30px; background:#222222;
  box-shadow:0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
  transform:rotateX(20deg) scale(1.05); transform-origin:50% 0; will-change:transform;
}
.cscroll__inner{ width:100%; overflow:hidden; border-radius:16px; background:#18181b; padding:16px; }
.cscroll__screen{ position:relative; aspect-ratio:1440/900; border-radius:1.6% / 2.6%; overflow:hidden; background:#0B0A10; }
.screen{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s var(--ease); }
.screen.is-active{ opacity:1; }
.screen img{ width:100%; height:100%; object-fit:contain; }
.screen__fix{ position:absolute; inset:0; width:100%; height:100%; }
/* anel e barras preenchem de acordo com a porcentagem quando a tela aparece */
.fix-arc{ stroke-dasharray:100 100; stroke-dashoffset:100; transition:stroke-dashoffset 1.4s var(--ease-out) .2s; }
.screen.is-active .fix-arc{ stroke-dashoffset:calc(100 - var(--pct)); }
.fix-bar{ transform-box:fill-box; transform-origin:left center; transform:scaleX(0); transition:transform 1.2s var(--ease-out) .2s; }
.screen.is-active .fix-bar{ transform:scaleX(1); }
.screen.is-active .fix-bar:nth-of-type(2n){ transition-delay:.3s; }

.showcase__tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:64rem; }
.tab{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; border-radius:999px;
  font-size:15px; font-weight:500; color:var(--text-2); background:var(--chip-bg); border:1px solid var(--line);
  transition:color .3s, background-color .3s, border-color .3s;
}
.tab svg{ flex:none; }
.tab:hover{ color:var(--text); border-color:var(--line-2); }
.tab.is-active{ color:var(--btn-fg); background:var(--btn-bg); border-color:transparent; }
.tab__progress{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--grad-progresso); }
.tab.is-active .tab__progress{ animation:tabFill var(--tab-time,6s) linear forwards; }
.showcase.is-paused .tab.is-active .tab__progress{ animation-play-state:paused; }
.showcase.is-manual .tab__progress{ display:none; }
@keyframes tabFill{ to{ width:100%; } }
.showcase__panels{ display:grid; max-width:660px; text-align:center; }
.panel{ grid-area:1 / 1; color:var(--text-2); font-size:clamp(1rem,.96rem + .2vw,1.12rem); opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none; }
.panel.is-active{ opacity:1; transform:none; pointer-events:auto; }

.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.feature{ padding:28px; display:grid; gap:12px; align-content:start; }
.feature:hover{ background:var(--surface-hover); border-color:var(--line-2); transform:translateY(-4px); }
.feature p{ color:var(--text-2); font-size:15.5px; }
.feature--wide{ grid-column:span 2; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:32px; background:linear-gradient(135deg, rgba(231,1,56,.10), rgba(4,18,236,.06)); border-color:rgba(255,88,181,.28); }
[data-theme="light"] .feature--wide{ background:linear-gradient(135deg, rgba(231,1,56,.06), rgba(4,18,236,.03)); border-color:rgba(231,1,56,.2); }
.feature--wide .feature__icon{ margin:0; }
.feature__body{ display:grid; gap:8px; max-width:820px; }
.feature--wide p{ font-size:16px; }
.feature__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--icon-bg); border:1px solid var(--line); color:var(--accent); margin-bottom:6px; }
.progress{ height:6px; border-radius:999px; background:var(--track); overflow:hidden; margin-top:6px; }
.progress span{ display:block; height:100%; width:var(--p); border-radius:inherit; background:var(--grad-progresso); }
.feature .progress__label{ font-size:13px; color:var(--text-3); margin-top:-4px; }

.elite{ position:relative; margin-top:20px; border-radius:var(--raio-xl); overflow:hidden; isolation:isolate; background:#0d0b12; border:1px solid rgba(255,255,255,.12); color:var(--text); }
.elite__aura{ position:absolute; inset:0; z-index:-1; background:
  radial-gradient(ellipse 55% 60% at 100% 100%, rgba(231,1,56,.32), transparent 70%),
  radial-gradient(ellipse 45% 50% at 90% 0%, rgba(4,18,236,.22), transparent 70%); }
.elite__content{ padding:clamp(28px,4vw,56px); display:grid; gap:36px; }
.elite__content > .chip{ justify-self:start; }
.elite__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.elite__item{ display:grid; gap:10px; align-content:start; }
.elite__item p{ color:var(--text-2); font-size:15.5px; }
.elite__ai{ display:grid; padding-top:36px; border-top:1px solid rgba(255,255,255,.1); }
.elite__ai-text{ display:grid; gap:24px; }
.ai-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ai-list li{ display:grid; grid-template-columns:38px 1fr; gap:12px; padding:16px; border-radius:var(--raio-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ai-list__icon{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--grad-rosa); color:#fff; }
.ai-list strong{ display:block; font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.ai-list p{ color:var(--text-2); font-size:14px; line-height:1.5; margin-top:2px; }
/* =========================================================
   RODA DE RECURSOS (adaptada do componente WorksWheel)
   ========================================================= */
.wheel{ position:relative; --card-w:520px; --card-h:360px; height:calc(100vh + var(--n,8) * 42vh); margin-top:clamp(40px,6vw,96px); }
.wheel__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.wheel__stage{ position:absolute; inset:0; outline:none; }
.wheel__stage:focus-visible{ outline:2px solid var(--pink); outline-offset:-8px; border-radius:24px; }
.wheel__drum{ position:absolute; left:50%; top:52%; transform-style:preserve-3d; }
.wcard{
  position:absolute; width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2);
  -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform;
}
.wcard__face{
  display:flex; flex-direction:column; gap:calc(var(--card-h) * .03);
  width:100%; height:100%; overflow:hidden; padding:calc(var(--card-h) * .085);
  border-radius:calc(var(--card-h) * .065); background:#16141d; border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -24px rgba(0,0,0,.65);
}
[data-theme="light"] .wcard__face{ background:#FFFFFF; border-color:rgba(24,23,23,.1); box-shadow:0 30px 60px -28px rgba(24,23,23,.3); }
.wcard__face{ position:relative; justify-content:center; }
.wcard__body{ display:flex; flex-direction:column; gap:calc(var(--card-h) * .03); }
.wcard__num{ position:absolute; top:calc(var(--card-h) * .07); right:calc(var(--card-h) * .08); }
/* emoji "adesivo": grande, inclinado e com sombra */
.wcard__emoji{
  align-self:flex-start; display:block; margin-bottom:calc(var(--card-h) * .015);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:calc(var(--card-h) * .15 * var(--fs,1)); line-height:1;
  transform:rotate(var(--rot,0deg)); filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
[data-theme="light"] .wcard__emoji{ filter:drop-shadow(0 8px 14px rgba(24,23,23,.18)); }
.wcard__icon{
  width:calc(var(--card-h) * .14); height:calc(var(--card-h) * .14); display:grid; place-items:center; border-radius:calc(var(--card-h) * .04);
  background:var(--icon-bg); border:1px solid var(--line); color:var(--accent);
}
.wcard__icon svg{ width:46%; height:46%; }
.wcard__num{ font-size:calc(var(--card-h) * .05); font-weight:600; letter-spacing:.08em; color:var(--text-3); font-variant-numeric:tabular-nums; }
.wcard__title{ font-size:calc(var(--card-h) * .072 * (1 + (var(--fs,1) - 1) * .5)); line-height:1.08; letter-spacing:-.035em; font-weight:700; color:var(--text); text-wrap:balance; }
.wcard__text{ font-size:calc(var(--card-h) * .043 * var(--fs,1)); line-height:1.5; color:var(--text-2); }
.wcard .progress{ margin-top:4px; }
.wcard__note{ font-size:calc(var(--card-h) * .036); color:var(--text-3); }
.wcard--destaque .wcard__face{ background:linear-gradient(135deg, #2b0c1b 0%, #16141d 55%, #0e1033 100%); border-color:rgba(255,88,181,.4); }
[data-theme="light"] .wcard--destaque .wcard__face{ background:linear-gradient(135deg, #FFE9F3 0%, #FFFFFF 55%, #EEF0FF 100%); border-color:rgba(231,1,56,.3); }
.wcard--destaque .wcard__icon{ background:var(--grad-rosa); color:#fff; border-color:transparent; }

.wheel__label{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; pointer-events:none; text-align:center; }
.wheel__label > span{ font-size:var(--label,56px); font-weight:700; letter-spacing:-.045em; line-height:1; }
.wheel__label small{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.wheel__count{ position:absolute; left:6%; top:52%; transform:translateY(-50%); display:grid; gap:4px; pointer-events:none; opacity:0; z-index:150; }
.wheel__count b{ font-size:calc(var(--card-h) * .22); font-weight:700; letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums; }
.wheel__count span{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.wheel__index{ position:absolute; right:3%; top:52%; transform:translateY(-50%); display:grid; gap:2px; margin:0; padding:0; list-style:none; text-align:right; max-width:22%; }
.wheel__index button{ display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; padding:5px 0; font-size:14.5px; line-height:1.3; color:var(--text-3); text-align:right; transition:color .25s; }
.wheel__index button::after{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; transition:opacity .25s, transform .35s var(--ease-out), background-color .25s; }
.wheel__index button:hover{ color:var(--text-2); }
.wheel__index button.is-active{ color:var(--text); font-weight:600; }
.wheel__index button.is-active::after{ opacity:1; background:var(--vermelho); transform:scale(1.4); }

/* Versão em grade (sem JavaScript ou com "reduzir movimento") */
.wheel.is-static{ height:auto; }
.wheel.is-static .wheel__sticky{ position:static; height:auto; overflow:visible; }
.wheel.is-static .wheel__stage{ position:static; }
.wheel.is-static .wheel__drum{ position:static; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; max-width:calc(var(--container) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); transform:none !important; }
.wheel.is-static .wcard{ position:static; width:auto; height:auto; margin:0; transform:none !important; opacity:1 !important; }
.wheel.is-static .wcard__face{ height:auto; transform:none !important; --card-h:340px; }
.wheel.is-static .wcard__face{ padding-top:56px; }
.wheel.is-static .wheel__label,
.wheel.is-static .wheel__count,
.wheel.is-static .wheel__index{ display:none; }

/* =========================================================
   BARRAS
   ========================================================= */
/* Anéis em espiral (Veja onde tem espaço) */
.rings{ --r1:#FEC5E8; --r2:#FF58B5; --r3:#E70138; --r4:#8135D0; --r5:#0412EC; /* de dentro para fora: rosinha, rosa, vermelho, lilás da aura, azul */
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:center; padding:clamp(24px,4vw,48px); border-radius:var(--raio-xl); }
[data-theme="light"] .rings{ --r1:#F7A9D3; }
.rings__chart{ position:relative; width:100%; max-width:380px; aspect-ratio:1; margin:0 auto; container-type:inline-size; }
.rings__chart svg{ width:100%; height:100%; transform:rotate(-90deg); }
.rings__chart circle{ fill:none; stroke-linecap:round; }
.rings__track{ stroke:var(--track); }
.rings__arc{ transition:stroke-dashoffset 1.3s var(--ease-out); }
.rings__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:2px; pointer-events:none; }
.rings__center b{ font-size:12cqw; font-weight:700; letter-spacing:-.05em; line-height:1; }
.rings__center span{ font-size:3cqw; color:var(--text-2); max-width:24cqw; line-height:1.2; margin:0 auto; }
.rings__tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--line); margin-bottom:24px; }
.rings__tabs button{ height:38px; padding:0 18px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--text-2); transition:background-color .25s, color .25s; }
.rings__tabs button.is-on{ background:var(--btn-bg); color:var(--btn-fg); }
.rings__legend{ display:grid; gap:12px; }
.rings__legend li{ display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:12px; font-size:15.5px; color:var(--text-2); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rings__legend li.is-in{ opacity:1; transform:none; }
.rings__legend i{ width:14px; height:14px; border-radius:50%; }
.rings__legend b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.rings__callout{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; font-weight:500; color:var(--text); }
.bars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
.bars__title{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:18px; }
.bars__group ul{ display:grid; gap:12px; }
.bars__group li{ display:grid; grid-template-columns:96px 1fr 22px; align-items:center; gap:12px; font-size:13.5px; color:var(--text-2); }
.bars__group li:first-child{ color:var(--text); font-weight:600; }
.bars__group b{ font-weight:600; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
.bar{ height:22px; border-radius:6px; background:var(--track); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; border-radius:6px; background:var(--bar); transition:width 1.3s var(--ease-out); transition-delay:var(--d,0s); }
.bars__group li:first-child .bar i{ background:linear-gradient(90deg,#0412EC,#FF58B5 70%,#E70138); box-shadow:0 0 18px rgba(255,88,181,.35); }
.bars__callout{ display:flex; gap:8px; align-items:center; margin-top:18px; font-size:14px; font-weight:500; color:var(--accent); }
.note{ margin-top:36px; font-size:13.5px; color:var(--text-3); }

/* =========================================================
   6. SOBRE
   ========================================================= */
.about__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,96px); align-items:center; }
.about__text{ display:grid; gap:18px; font-size:clamp(1.02rem,.98rem + .2vw,1.14rem); color:var(--text-2); max-width:620px; }
.about__text .h2{ margin-bottom:8px; }
.about__hello{ font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem); font-weight:650; letter-spacing:-.03em; color:var(--text); line-height:1.2; }
.about__photo{ margin:0; display:grid; justify-items:center; }
.portrait{ position:relative; width:100%; max-width:400px; aspect-ratio:1; border-radius:50%; overflow:hidden; isolation:isolate; }
/* anel no degradê da marca */
.portrait::after{ content:""; position:absolute; inset:0; border-radius:50%; padding:3px; background:conic-gradient(from 200deg, #FEC5E8, #FF58B5, #E70138, #0412EC, #FEC5E8);
  -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 exclude, linear-gradient(#000 0 0); pointer-events:none; }
/* com foto: o fundo branco da foto vira um tom suave da marca */
.portrait.has-photo{ background:radial-gradient(circle at 50% 28%, #FFFFFF 0%, #F5F3EA 38%, #FEC5E8 100%); box-shadow:0 30px 80px rgba(231,1,56,.22); }
.portrait.has-photo .portrait__photo{ mix-blend-mode:multiply; }
.portrait__aura{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait__symbol{ position:absolute; left:50%; top:50%; width:30%; transform:translate(-50%,-50%); opacity:.95; }
.portrait__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait-wrap{ position:relative; width:100%; max-width:400px; cursor:pointer; }
.portrait-wrap .portrait{ max-width:none; transition:transform .5s var(--ease-out); }
.portrait-wrap:hover .portrait, .portrait-wrap.is-oi .portrait{ transform:scale(1.03); }
.oi{
  position:absolute; right:2%; top:4%; z-index:2; font-size:clamp(52px,7vw,84px); line-height:1; pointer-events:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); transform-origin:75% 90%;
  opacity:0; transform:scale(.3) rotate(25deg); transition:opacity .3s, transform .45s var(--ease-out);
}
.portrait-wrap:hover .oi, .portrait-wrap.is-oi .oi{ opacity:1; transform:scale(1) rotate(0); animation:aceno 1.4s ease-in-out .15s infinite; }
@keyframes aceno{ 0%,100%{ transform:scale(1) rotate(0); } 15%{ transform:scale(1) rotate(-24deg); } 30%{ transform:scale(1) rotate(10deg); } 45%{ transform:scale(1) rotate(-20deg); } 60%{ transform:scale(1) rotate(6deg); } 75%{ transform:scale(1) rotate(-8deg); } }
.about__facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.about__facts li{ display:grid; gap:2px; padding:14px 16px; border-radius:var(--raio-md); background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--text-3); line-height:1.35; }
.about__facts strong{ font-size:1.25rem; font-weight:700; letter-spacing:-.03em; color:var(--text); }

/* =========================================================
   7. PLANOS
   ========================================================= */
.plans{ display:grid; grid-template-columns:repeat(2,minmax(0,460px)); justify-content:center; gap:20px; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(26px,3vw,36px); border-radius:var(--raio-xl); overflow:hidden; isolation:isolate; }
.plan--featured{ background:#100c18; border:1px solid rgba(254,197,232,.35); color:var(--text); box-shadow:0 30px 80px rgba(231,1,56,.22); }
.plan__aura{ position:absolute; inset:0; z-index:-1; background:
  radial-gradient(ellipse 90% 60% at 50% 115%, rgba(231,1,56,.55), transparent 70%),
  radial-gradient(ellipse 60% 50% at 100% 0%, rgba(4,18,236,.4), transparent 70%); }
.plan__badge{ position:absolute; top:24px; right:24px; height:30px; padding:0 14px; display:inline-flex; align-items:center; border-radius:999px; font-size:12.5px; font-weight:600; background:rgba(231,1,56,.3); border:1px solid rgba(254,197,232,.45); color:#fff; box-shadow:0 0 20px rgba(231,1,56,.5); }
.plan__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--icon-bg); border:1px solid var(--line); color:var(--accent); }
.plan__name{ font-size:1.5rem; letter-spacing:-.03em; margin-top:6px; }
.plan__desc{ color:var(--text-2); font-size:15px; min-height:2.9em; }
.plan__pricing{ display:grid; gap:6px; margin:6px 0 10px; }
.plan__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.plan__old{ font-size:15px; color:var(--text-3); text-decoration-thickness:1.5px; text-decoration-color:var(--accent); white-space:nowrap; }
.plan__now{ display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.plan__x{ font-size:1.05rem; font-weight:600; color:var(--text-2); }
.plan__currency{ font-size:1.25rem; font-weight:600; color:var(--text-2); }
.plan__value{ font-size:clamp(3rem,2.4rem + 2vw,4.2rem); font-weight:700; letter-spacing:-.05em; line-height:1; }
.plan__total{ font-size:14px; color:var(--text-2); }
/* preço oficial só aparece quando a Turma Fundadora acaba (vagas = 0 em js/config.js) */
.price--oficial{ display:none; }
.sem-fundadora .price--fundadora,
.sem-fundadora .founder{ display:none; }
.sem-fundadora .plan__price.price--oficial{ display:flex; }
.sem-fundadora .plan__total.price--oficial{ display:block; }

/* faixa da Turma Fundadora */
.founder{
  display:flex; align-items:center; gap:14px; max-width:940px; margin:0 auto 24px; padding:16px 22px; border-radius:var(--raio-md);
  background:linear-gradient(90deg, rgba(231,1,56,.16), rgba(255,88,181,.10) 50%, rgba(4,18,236,.10));
  border:1px solid rgba(255,88,181,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:15px; color:var(--text-2); line-height:1.5;
}
[data-theme="light"] .founder{ background:linear-gradient(90deg, rgba(231,1,56,.08), rgba(255,88,181,.06) 50%, rgba(4,18,236,.05)); border-color:rgba(231,1,56,.25); }
.founder strong{ color:var(--text); font-weight:650; }
.founder__count{ display:inline-block; padding:1px 10px; border-radius:999px; background:var(--vermelho); color:#fff; font-weight:600; white-space:nowrap; }
.founder__dot{ flex:none; position:relative; width:10px; height:10px; border-radius:50%; background:var(--vermelho); box-shadow:0 0 12px rgba(231,1,56,.8); }
.founder__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--vermelho); animation:pulse 2s var(--ease-out) infinite; }
.plan__list{ display:grid; gap:12px; padding:20px; margin-bottom:8px; border-radius:var(--raio-md); background:var(--chip-bg); border:1px solid var(--line); flex:1; align-content:start; }
.plan__list li{ display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.plan__list svg{ margin-top:2px; color:var(--accent); }
.plan--featured .plan__list{ background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.1); }
.pricing__note{ display:flex; justify-content:center; align-items:flex-start; gap:8px; max-width:720px; margin:28px auto 0; color:var(--text-2); font-size:14.5px; text-align:left; }
.pricing__note svg{ flex:none; margin-top:3px; }
.pricing__note svg{ color:var(--accent); }

/* =========================================================
   8. GARANTIA
   ========================================================= */
.guarantee{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,52px); border-radius:var(--raio-xl); }
.seal{ width:clamp(110px,12vw,150px); animation:spin 30s linear infinite; }
.seal svg{ width:100%; height:auto; }
.seal text{ animation:spin 30s linear infinite reverse; transform-origin:60px 60px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.guarantee__text{ display:grid; gap:14px; }
.guarantee__text p{ color:var(--text-2); font-size:clamp(1.02rem,.98rem + .2vw,1.15rem); max-width:640px; }

/* =========================================================
   9. FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line); }
.faq__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start; }
.faq__head{ display:grid; gap:16px; position:sticky; top:calc(var(--nav-h) + 40px); }
.faq__list{ display:grid; gap:10px; }
.faq__item{ border-radius:var(--raio-md); background:var(--surface); border:1px solid var(--line); transition:background-color .3s, border-color .3s; }
.faq__item.is-open{ background:var(--surface-2); border-color:var(--line-2); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; text-align:left; font-size:16.5px; font-weight:600; letter-spacing:-.015em; }
.faq__icon{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--chip-bg); transition:transform .45s var(--ease-out), background-color .3s; }
.faq__item.is-open .faq__icon{ transform:rotate(45deg); background:var(--btn-bg); color:var(--btn-fg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 22px 22px; color:var(--text-2); font-size:15.5px; max-width:640px; }

/* =========================================================
   10. CHAMADA FINAL
   ========================================================= */
.final{ position:relative; border-radius:var(--raio-xl); overflow:hidden; isolation:isolate; min-height:440px; display:grid; align-items:center; padding:clamp(32px,5vw,72px); border:1px solid rgba(255,255,255,.12); color:var(--text); background:#0B0A10; }
.final__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transform:scale(1.15); transform-origin:50% 100%; transition:transform 2s var(--ease-out); }
.final.is-in .final__bg{ transform:scale(1); }
.final__content{ max-width:620px; display:grid; gap:20px; }
.final__content p{ color:rgba(245,243,234,.82); font-size:clamp(1.02rem,.98rem + .25vw,1.18rem); }
.final__actions{ margin-top:8px; }

/* =========================================================
   11. RODAPÉ
   ========================================================= */
.footer{ position:relative; overflow:hidden; padding-top:clamp(56px,6vw,96px); border-top:1px solid var(--line); }
.footer__cols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr) auto; gap:32px; }
.footer__brand{ display:grid; gap:14px; align-content:start; }
.footer__brand .logo{ height:38px; width:auto; }
.footer__brand p{ color:var(--text-2); font-size:15px; }
.footer__label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-bottom:14px; }
.footer ul{ display:grid; gap:10px; }
.footer ul a{ color:var(--text); font-size:15px; opacity:.88; transition:opacity .2s, color .2s; }
.footer ul a:hover{ opacity:1; color:var(--accent); }
.footer__social{ display:grid; justify-items:end; align-content:start; gap:10px; text-align:right; }
.social{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--chip-bg); border:1px solid var(--line); transition:background-color .25s, transform .3s var(--ease-out); }
.social:hover{ background:var(--surface-hover); transform:translateY(-2px); }
.footer__small{ font-size:12.5px; color:var(--text-3); }
.footer__disclaimer{ margin-top:48px; padding:16px 20px; border-radius:var(--raio-md); background:var(--chip-bg); border:1px solid var(--line); font-size:13.5px; color:var(--text-2); }
.footer__disclaimer strong{ color:var(--text); font-weight:600; }
.footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; font-size:13.5px; color:var(--text-3); }
.footer__legal{ display:flex; gap:10px; }
.footer__legal a:hover{ color:var(--text); }
.footer__wordmark{ position:relative; margin-top:clamp(28px,4vw,56px); height:clamp(110px,27vw,390px); pointer-events:none; }
.footer__wordmark span{
  position:absolute; left:50%; bottom:-24%; width:min(1300px,96vw); aspect-ratio:1210/438; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,88,181,.38) 0%, rgba(4,18,236,.22) 40%, rgba(11,10,16,0) 85%);
  -webkit-mask:url(../assets/logos/elleven-horizontal-branco.svg) center / contain no-repeat; mask:url(../assets/logos/elleven-horizontal-branco.svg) center / contain no-repeat;
}
[data-theme="light"] .footer__wordmark span{ background:linear-gradient(180deg, rgba(231,1,56,.32) 0%, rgba(255,88,181,.16) 40%, rgba(245,243,234,0) 85%); }

/* ---------- Botão de tema + toast ---------- */
.theme-toggle{
  position:fixed; right:20px; bottom:20px; z-index:95; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-2); box-shadow:0 10px 30px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); transition:transform .4s var(--ease-out), background-color .3s;
}
.theme-toggle:hover{ transform:rotate(20deg) scale(1.06); }
.theme-toggle__moon{ display:none; }
[data-theme="light"] .theme-toggle__sun{ display:none; }
[data-theme="light"] .theme-toggle__moon{ display:block; }

.toast{
  position:fixed; left:50%; bottom:24px; z-index:120; max-width:calc(100% - 32px); padding:12px 18px; border-radius:16px;
  background:#181717; color:#F5F3EA; font-size:14.5px; box-shadow:0 16px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  transform:translate(-50%,140%); opacity:0; transition:transform .5s var(--ease-out), opacity .4s;
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .nav__links{ gap:22px; }
  .nav__links > a[data-nav-link]:nth-child(5){ display:none; }
  .divisions__row{ grid-template-columns:repeat(3,1fr); }
  .features{ grid-template-columns:1fr 1fr; }
  .elite__grid{ grid-template-columns:1fr 1fr; }
  .ai-list{ grid-template-columns:1fr 1fr; }
  .about__facts{ grid-template-columns:1fr 1fr; }
  .feature--wide{ grid-column:auto; grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__social{ justify-items:start; text-align:left; }
}

@media (max-width:900px){
  :root{ --nav-h:68px; }
  .cscroll{ padding:0 40px; }
  .nav__links{ display:none; }
  .nav__toggle{ display:grid; }
  .section-head--split{ grid-template-columns:1fr; }
  .fit,.problem__grid,.about__grid,.faq__grid{ grid-template-columns:1fr; }
  .problem__head,.faq__head{ position:static; }
  .about__photo{ justify-items:start; }
  .portrait, .portrait-wrap{ max-width:260px; }
  .bars__grid{ grid-template-columns:1fr; gap:36px; }
  .rings{ grid-template-columns:1fr; }
  .rings__chart{ max-width:300px; }
  .rings__side{ display:grid; justify-items:center; }
  .rings__legend{ width:100%; max-width:360px; }
  .plans{ grid-template-columns:minmax(0,520px); }
  .showcase__tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; width:calc(100% + var(--gutter) * 2); margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter); scrollbar-width:none; }
  .showcase__tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; }
}

@media (max-width:700px){
  .wcard__face{ padding:calc(var(--card-h) * .068); gap:calc(var(--card-h) * .026); }
  .wcard__title{ font-size:calc(var(--card-h) * .06 * (1 + (var(--fs,1) - 1) * .5)); }
  .wcard__text{ font-size:calc(var(--card-h) * .0355 * var(--fs,1)); line-height:1.48; }
  .wcard__emoji{ font-size:calc(var(--card-h) * .13 * var(--fs,1)); }
  .wcard__icon{ width:calc(var(--card-h) * .12); height:calc(var(--card-h) * .12); }
}

@media (max-width:768px){
  .wheel__index{ display:none; }
  .wheel__count{ left:50%; top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); grid-auto-flow:column; align-items:baseline; gap:8px; }
  .wheel__count b{ font-size:28px; }
  .setas--roda{ margin:0 0 0 6px; }
  .cscroll{ min-height:auto; padding:0 8px; }
  .cscroll__stage{ padding:40px 0 24px; gap:22px; }
  .cscroll__header{ padding:0 8px; }
  .cscroll__card{ padding:8px; margin-top:0; transform:rotateX(20deg) scale(.7); }
  .cscroll__inner{ padding:0; }
  .showcase__tabs{ max-width:100%; width:100%; margin:0; padding:0 8px; }
}

@media (max-width:640px){
  :root{ --gutter:16px; }
  body{ font-size:16px; }
  .hero{ padding-top:calc(var(--nav-h) + 36px); }
  .hero__title-2{ margin-top:.18em; }
  .video__frame{ border-radius:22px; }
  .video__play{ width:68px; height:68px; }
  .video__play::after{ width:68px; height:68px; }
  .video__placeholder{ font-size:10px; bottom:10px; }
  .portrait, .portrait-wrap{ max-width:200px; }
  .cta-quiz__inner{ height:66px; padding:0 9px 0 30px; font-size:19px; gap:16px; }
  .cta-quiz__arrow{ width:48px; height:48px; }
  .hero__bottom p{ font-size:14px; }
  .row-head{ flex-direction:column; align-items:flex-start; }
  .divisions__row{ grid-template-columns:1fr 1fr; }
  .division{ height:84px; }
  .features,.elite__grid,.ai-list{ grid-template-columns:1fr; }
  .feature--wide{ grid-template-columns:1fr; padding:26px; }
  .founder{ align-items:flex-start; padding:14px 16px; font-size:14px; }
  .founder__dot{ margin-top:6px; }
  .feature--wide{ grid-column:auto; }
  .step{ min-height:400px; }
  .steps__foot{ flex-direction:column; align-items:flex-start; }
  .bars__group li{ grid-template-columns:86px 1fr 18px; }
  .guarantee{ grid-template-columns:1fr; justify-items:start; }
  .final{ min-height:380px; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; }
  .theme-toggle{ right:14px; bottom:14px; width:42px; height:42px; }
}

@media (hover:none){
  .drag-cursor{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; filter:none; }
}