/* PersonalHub · landing. Tokens primeiro; o motor (scrollcraft.css) deriva deles. */
:root {
  --sc-canvas: #05070F;
  --sc-surface: #0C1226;
  --sc-ink: #F2F5FB;
  --sc-ink-soft: #A3ADC4;
  --sc-accent: #22B8FF;           /* ciano do logo PersonalHub */
  --sc-accent-ink: #021018;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 228 60% 2%;

  --laranja: #F26D19;             /* laranja do logo, só para a conversão */
  --laranja-ink: #160700;
  --vidro: rgb(255 255 255 / .06);
  --vidro-borda: rgb(255 255 255 / .12);
  --claro: #F3F5FA;
  --claro-ink: #0A0F1F;
  --claro-soft: #48506A;
  --nav-h: 64px;
}

body { background: var(--sc-canvas); }
h1, h2, h3, p { margin: 0; }
.sc-display { font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }

/* ------------------------------------------------------------- botões -- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.botao:active { transform: scale(0.97); }
.botao--cta { background: var(--laranja); color: var(--laranja-ink); box-shadow: 0 10px 30px -10px rgb(242 109 25 / .55), inset 0 1px 0 rgb(255 255 255 / .3); }
.botao--fantasma { color: var(--sc-ink); border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .04); }
.botao--p { height: 40px; padding: 0 18px; font-size: 14px; }
.botao--g { height: 56px; padding: 0 30px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .botao--cta:hover { background: #FF7D2C; box-shadow: 0 14px 36px -10px rgb(242 109 25 / .7), inset 0 1px 0 rgb(255 255 255 / .3); }
  .botao--fantasma:hover { background: rgb(255 255 255 / .1); }
}
.botao:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 999px; }

.selo { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.selo span { width: 22px; height: 1px; background: currentColor; }
.selo--claro { color: #0B7FC0; }

/* ---------------------------------------------------------------- nav -- */
.nav {
  position: fixed; z-index: var(--sc-z-chrome); top: 14px; left: 50%; translate: -50% 0;
  width: min(980px, calc(100% - 24px)); height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 12px 0 22px; border-radius: 999px;
  background: rgb(9 13 28 / .72); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 1px .5px rgb(0 0 0 / .2), 0 12px 24px -12px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .08);
}
.nav__marca img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 6px; }
.nav__links a { color: var(--sc-ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 999px; transition: color 150ms, background-color 150ms; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--sc-ink); background: rgb(255 255 255 / .06); } }

/* ------------------------------------------------------- o iPhone (CSS) -- */
.fone {
  --w: 300px;
  position: relative; width: var(--w); aspect-ratio: 414 / 868;
  padding: 2.9%;
  border-radius: calc(var(--w) * 0.152);
  background: linear-gradient(150deg, #5B5F68 0%, #1C1D22 22%, #0D0E11 55%, #34373E 82%, #1A1B1F 100%);
  box-shadow:
    inset 0 0 0 1.5px #74787F, inset 0 0 0 3px #0A0B0D,
    0 2px 4px hsl(var(--sc-shadow-color) / .3),
    0 30px 60px -20px hsl(var(--sc-shadow-color) / .75),
    0 70px 120px -40px hsl(var(--sc-shadow-color) / .7);
}
.fone::before { /* botão lateral */
  content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 12%;
  border-radius: 2px; background: linear-gradient(90deg, #1b1c20, #4a4d54);
}
.fone::after { /* reflexo do vidro */
  content: ""; position: absolute; inset: 2.9%; border-radius: calc(var(--w) * 0.126); pointer-events: none; z-index: 6;
  background: linear-gradient(118deg, rgb(255 255 255 / .1) 0%, rgb(255 255 255 / .02) 28%, transparent 40%);
}
.fone__tela { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.126); background: #000; isolation: isolate; }
.fone__tela::after { /* dynamic island */
  content: ""; position: absolute; z-index: 5; top: 1.4%; left: 50%; width: 31%; height: 4.1%;
  translate: -50% 0; border-radius: 999px; background: #000;
}
.fone__tela > img { width: 100%; height: auto; }

/* ------------------------------------------------------------- aviso -- */
.aviso {
  display: flex; align-items: center; gap: 12px; width: 300px; padding: 12px 14px;
  border-radius: 20px; color: #0A0F1F;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 1px 1px .5px rgb(0 0 0 / .04), 0 6px 12px -3px rgb(2 6 20 / .25), 0 24px 40px -12px rgb(2 6 20 / .45);
  rotate: var(--r, 0deg);
}
.aviso__icone { width: 34px; height: 34px; border-radius: 9px; flex: none; background: #021E52 url(assets/marca/icone-joao.png) center / cover; }
.aviso__txt { flex: 1; min-width: 0; line-height: 1.3; }
.aviso__txt b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.aviso__txt small { display: block; font-size: 13px; color: #5B6377; }
.aviso time { align-self: flex-start; font-size: 12px; color: #6B7388; }
.aviso--azul { box-shadow: inset 3px 0 0 #4F8CFF, 0 0 0 1px rgb(0 0 0 / .04), 0 6px 12px -3px rgb(2 6 20 / .25), 0 24px 40px -12px rgb(2 6 20 / .45); }
.aviso--laranja { box-shadow: inset 3px 0 0 var(--laranja), 0 0 0 1px rgb(0 0 0 / .04), 0 6px 12px -3px rgb(2 6 20 / .25), 0 24px 40px -12px rgb(2 6 20 / .45); }
@media (prefers-reduced-motion: no-preference) {
  .flutua { animation: flutua 6s var(--sc-ease-in-out) var(--d, 0s) infinite alternate; }
}
@keyframes flutua { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 8px, 0); } }

/* ============================================================ 1 · HERO == */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 7 15 / .92) 0%, rgb(5 7 15 / .7) 30%, rgb(5 7 15 / .15) 58%, transparent 75%),
    linear-gradient(0deg, rgb(5 7 15 / .85) 0%, transparent 30%);
}
.hero__copy { left: var(--sc-gutter); right: auto; top: 50%; bottom: auto; translate: 0 -46%; max-width: 40rem; }
.hero__titulo { font-size: clamp(3rem, 1.8rem + 4.6vw, 6.4rem); margin-top: 22px; }
.hero__lede { margin-top: 26px; max-width: 30rem; font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.55; color: #C3CBDD; text-wrap: pretty; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__cena { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.hero__brilho {
  position: absolute; right: 8%; top: 18%; width: 46vw; height: 70vh;
  background: radial-gradient(closest-side, rgb(34 120 255 / .32), rgb(34 120 255 / .08) 55%, transparent);
  filter: blur(10px);
}
/* Um palco do tamanho do iPhone; os avisos se posicionam em volta dele, não da janela. */
.hero__ancora { --w: min(300px, calc((100svh - 160px) / 2.1)); position: absolute; right: clamp(9rem, 17vw, 18rem); top: 50%; width: var(--w); height: calc(var(--w) * 2.097); translate: 0 -46%; }
.hero__fone { position: absolute; inset: 0; }
.fone--hero { --w: inherit; rotate: -4deg; }
.hero__card { position: absolute; }
.hero__card--a { right: 78%; top: 8%; }
.hero__card--b { left: 80%; top: 30%; }
.hero__card--c { right: 86%; top: 58%; }
.hero__card--d { left: 74%; top: 80%; }

/* ============================================================ 2 · CAOS == */
.caos__palco { background: radial-gradient(80% 70% at 50% 50%, #0E1430 0%, #070A16 70%); }
.caos__frag { position: absolute; inset: 0; }
.frag {
  --k: 1; position: absolute; left: var(--x); top: var(--y);
  transform: translate3d(calc(var(--sc-p, 0) * var(--dx) * var(--k) * 1vw), calc(var(--sc-p, 0) * var(--dy) * var(--k) * 1vh), 0) rotate(calc(var(--r) * (1 + var(--sc-p, 0) * 2)));
  opacity: calc(1 - var(--sc-p, 0) * 1.25);
}
.frag--1 { --k: 1.4; z-index: 3; }
.frag--2 { --k: 1; z-index: 2; filter: blur(1.2px); }
.frag--2 > * { opacity: .75; }
.frag--3 { --k: .6; z-index: 1; filter: blur(2.6px); scale: .85; }
.frag--3 > * { opacity: .5; }
.arq {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 10px;
  background: #F4F5F7; color: #262A33; font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7);
}
.arq::before { content: ""; width: 26px; height: 30px; border-radius: 4px; background: var(--c, #1D8F4E); }
.arq--xls { --c: #1D8F4E; } .arq--pdf { --c: #D23B30; } .arq--img { --c: #6B7280; }
.msg {
  display: inline-block; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 15px; white-space: nowrap;
  background: #1F2633; color: #E8ECF3; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7);
}
.msg--eu { border-radius: 16px 16px 4px 16px; background: #2B3A52; }
.tique { font-style: normal; color: #8A93A6; margin-left: 6px; font-size: 13px; }
.planilha {
  display: grid; grid-template-columns: auto auto; gap: 0; background: #fff; color: #333; font-size: 12px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7);
}
.planilha > * { padding: 5px 12px; border: 1px solid #E2E4E8; }
.planilha b { background: #EEF1F4; font-weight: 600; }
.caos__frases { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; z-index: 5; padding: 0 var(--sc-gutter); }
/* Uma mancha escura só onde as frases ficam, para os fragmentos claros não roubarem o contraste. */
.caos__frases::before { content: ""; grid-area: 1 / 1; width: min(60rem, 100%); height: min(28rem, 60vh); background: radial-gradient(closest-side, rgb(7 10 22 / .92), rgb(7 10 22 / .7) 55%, transparent); }
.caos__frase {
  grid-area: 1 / 1; max-width: min(15ch, 100%); text-align: center;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5.4rem);
  text-shadow: 0 2px 30px rgb(5 7 15 / .9);
}
.caos__frase em { font-style: normal; color: var(--sc-ink-soft); }

/* =========================================================== 3 · TOQUE == */
.toque__palco { background: #011E39; }
.toque__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.toque__fone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform-origin: var(--ox, 50%) var(--oy, 50%); will-change: transform, opacity; }
.fone--toque { --w: min(320px, calc((100svh - 150px) / 2.1)); }
.toque__icone { position: absolute; left: 0; top: 0; width: 100px; height: 100px; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.toque__icone img { width: 100%; height: 100%; border-radius: 22.5%; }
.toque__toque { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: rgb(255 255 255 / .35); opacity: 0; pointer-events: none; }
.toque__copy { position: absolute; z-index: 4; left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 7rem); max-width: 34rem; }
.toque__copy--a { left: auto; right: var(--sc-gutter); text-align: right; }
.toque__titulo { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.8rem); text-shadow: 0 2px 30px rgb(2 16 41 / .8); }
.toque__titulo--p { font-size: clamp(1.8rem, 1.1rem + 1.9vw, 3.1rem); }
.toque__copy--b { max-width: 31rem; bottom: clamp(1.75rem, 6vh, 4rem); }
/* faixa escura sob a frase final, para ela ler sobre qualquer quadro da abertura */
.toque__copy--b::before { content: ""; position: absolute; z-index: -1; inset: -40% -30% -60% -50%; background: radial-gradient(closest-side, rgb(1 14 32 / .82), rgb(1 14 32 / 0)); pointer-events: none; }
.toque__copy p { margin-top: 18px; font-size: 18px; line-height: 1.55; color: #C9D3EA; max-width: 30rem; }
.url { font-weight: 600; color: #fff; white-space: nowrap; border-bottom: 1px solid rgb(255 255 255 / .4); }

/* ========================================================== 4 · MARCAS == */
.marcas__palco { background: #05070F; }
.marcas__fundo, .marcas__luz { position: absolute; inset: 0; }
.marcas__luz { opacity: 0; will-change: opacity; }
.marcas__luz[data-t="0"] { opacity: 1; background: radial-gradient(60% 70% at 50% 55%, #0A2A6B 0%, #041232 45%, #02060F 100%); }
.marcas__luz[data-t="1"] { background: radial-gradient(60% 70% at 50% 55%, #FFE6D5 0%, #F1E3DA 40%, #D9CDC4 100%); }
.marcas__luz[data-t="2"] { background: radial-gradient(60% 70% at 50% 55%, #0B4A2C 0%, #052616 45%, #010A05 100%); }
.marcas__nomes { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.marcas__nomes span {
  grid-area: 1 / 1; font-weight: 800; letter-spacing: -0.06em; line-height: .9; white-space: nowrap;
  font-size: clamp(5rem, 17vw, 19rem); color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / .16); opacity: 0; will-change: transform, opacity;
}
.marcas__nomes span[data-t="1"] { -webkit-text-stroke-color: rgb(60 30 10 / .22); }
.marcas__intro { position: absolute; z-index: 4; left: var(--sc-gutter); top: calc(var(--nav-h) + 56px); max-width: 26rem; }
.marcas__titulo { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4.2rem); }
.marcas__fone { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -46%; display: grid; justify-items: center; gap: 18px; }
.fone--marcas { --w: min(320px, calc((100svh - 190px) / 2.1)); }
.marcas__url { position: relative; display: grid; font-size: 14px; font-weight: 500; height: 34px; min-width: 280px; }
.marcas__url span {
  grid-area: 1 / 1; justify-self: center; align-self: center; padding: 7px 14px; border-radius: 999px;
  background: rgb(5 8 18 / .55); border: 1px solid rgb(255 255 255 / .14); color: #E9EEF8; opacity: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap;
}
.marcas__url span[data-t="0"] { opacity: 1; }
/* Painel de vidro escuro: lê igual sobre as três marcas, inclusive a clara. */
.marcas__lista {
  position: absolute; z-index: 4; right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  list-style: none; margin: 0; padding: 24px 24px 20px; display: grid; gap: 16px; width: 18.5rem;
  border-radius: 22px; background: rgb(6 9 20 / .72); border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 60px -30px rgb(0 0 0 / .6);
}
.marcas__lista li { padding-left: 16px; border-left: 1px solid rgb(255 255 255 / .22); color: #C7CFE0; font-size: 14.5px; line-height: 1.45; }
.marcas__lista b { display: block; color: #fff; font-weight: 600; font-size: 16.5px; }
.marcas__lista .marcas__nota { margin-top: 4px; padding: 14px 0 0; border: 0; border-top: 1px solid rgb(255 255 255 / .12); font-size: 12.5px; color: #9CA6BD; }

/* ------------------------------------- a tela do app, montada em código -- */
.fone__tela--app { container-type: inline-size; }
.app {
  --bg: #000; --t: #F2F6FF; --ts: #AAB3C5; --a: #4F8CFF; --ai: #010A1F;
  --v: rgb(255 255 255 / .06); --vb: rgb(255 255 255 / .12); --glow: rgb(79 140 255 / .2);
  position: absolute; inset: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--k, 0.75));
  font-family: "Geist", system-ui, sans-serif; color: var(--t); line-height: 1.2;
  background: radial-gradient(70% 45% at 85% 4%, var(--glow) 0%, transparent 70%), radial-gradient(60% 40% at 10% 62%, color-mix(in oklab, var(--glow) 60%, transparent) 0%, transparent 70%), var(--bg);
  will-change: clip-path;
}
.tema-joao { --a: #4F8CFF; --ai: #010A1F; --glow: rgb(79 140 255 / .22); }
.tema-rafa { --bg: #F5F3F0; --t: #1C1714; --ts: #6E645C; --a: #E8590C; --ai: #FFF6EF; --v: rgb(0 0 0 / .04); --vb: rgb(0 0 0 / .08); --glow: rgb(232 89 12 / .16); }
.tema-bia { --bg: #010805; --a: #2FD07A; --ai: #02130A; --glow: rgb(47 208 122 / .2); --ts: #A6BBB0; }
.tema-seu { --a: #4F8CFF; --ai: #050B18; --glow: color-mix(in oklab, var(--a) 24%, transparent); }
.app__status { height: 54px; padding: 18px 32px 0 40px; display: flex; justify-content: space-between; font-size: 17px; font-weight: 600; }
.app__status i { width: 62px; height: 12px; margin-top: 3px; border-radius: 3px; background: linear-gradient(90deg, currentColor 0 28%, transparent 28% 38%, currentColor 38% 58%, transparent 58% 64%, currentColor 64%); opacity: .9; }
.app__topo { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px 0; }
.app__marca { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 7px; border-radius: 999px; background: var(--v); border: 1px solid var(--vb); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.app__marca img, .app__mono { width: 34px; height: 34px; border-radius: 10px; }
.app__mono { display: grid; place-items: center; background: var(--a); color: var(--ai); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; }
.app__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--v); border: 1px solid var(--vb); font-weight: 600; font-size: 17px; }
.app__data { margin: 22px 20px 0; font-size: 15px; color: var(--ts); }
.app__ola { margin: 2px 20px 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.app__hoje { margin: 18px 20px 0; padding: 20px; border-radius: 26px; background: var(--a); color: var(--ai); box-shadow: 0 16px 40px color-mix(in oklab, var(--a) 35%, transparent); }
.app__rot { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.app__rot span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.app__hoje b { display: block; margin-top: 14px; font-size: 32px; letter-spacing: -0.02em; }
.app__hoje small { display: block; margin-top: 2px; font-size: 15px; opacity: .8; }
.app__pilulas { display: flex; gap: 8px; margin-top: 14px; }
.app__pilulas span { padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in oklab, var(--ai) 14%, transparent); }
.app__btn { display: grid; place-items: center; margin-top: 18px; height: 52px; border-radius: 999px; background: var(--ai); color: var(--a); font-weight: 600; font-size: 16px; }
.app__semana { margin: 12px 20px 0; padding: 16px 18px; border-radius: 24px; background: var(--v); border: 1px solid var(--vb); }
.app__semana .app__rot { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ts); }
.app__semana .app__rot b { font-size: 28px; color: var(--t); margin-right: 4px; }
.app__semana .app__rot span:last-child { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; opacity: 1; }
.app__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 12px; }
.app__dias i { aspect-ratio: 1; border-radius: 50%; background: var(--v); border: 1px solid var(--vb); }
.app__dias i.f { background: var(--a); border-color: var(--a); }
.app__dias i.h { border: 2px solid var(--a); }
.app__prox { display: flex; align-items: center; gap: 14px; margin: 12px 20px 0; padding: 14px 16px; border-radius: 22px; background: var(--v); border: 1px solid var(--vb); font-size: 16px; font-weight: 600; }
.app__prox small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ts); margin-bottom: 2px; }
.app__cal { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vb); background: radial-gradient(circle, var(--a) 0 4px, transparent 5px); }
.app__tab { position: absolute; left: 50%; bottom: 34px; translate: -50% 0; display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--v); border: 1px solid var(--vb); font-size: 15px; font-weight: 600; }
.app__tab span { padding: 10px 18px; border-radius: 999px; color: var(--ts); }
.app__tab .on { background: color-mix(in oklab, var(--a) 22%, transparent); color: var(--a); }
.app[data-camada="1"], .app[data-camada="2"] { clip-path: circle(0% at 50% 9%); }

/* --- layouts: além da cor, cada personal escolhe a estrutura da tela */
.tab-icones { position: absolute; left: 22px; right: 22px; bottom: 30px; display: flex; justify-content: space-between; padding: 8px; border-radius: 999px; background: var(--v); border: 1px solid var(--vb); backdrop-filter: blur(16px); }
.tab-icones span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--ts); }
.tab-icones svg, .tab-rotulos svg { width: 24px; height: 24px; }
.tab-icones .on { background: var(--a); color: var(--ai); }
.tab-rotulos { position: absolute; left: 0; right: 0; bottom: 0; height: 98px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-top: 1px solid var(--vb); background: var(--bg); }
.tab-rotulos span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ts); }
.tab-rotulos .on { color: var(--a); }

/* capa: foto do personal no topo, cartões lado a lado */
.app--capa { background: var(--bg); }
.app--capa .app__status { position: relative; color: #fff; }
.capa__foto { position: absolute; left: 0; top: 0; width: 100%; height: 440px; object-fit: cover; object-position: 50% 16%; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
.capa__foto--seu { object-position: 62% 50%; }
.capa__topo { position: absolute; left: 22px; right: 22px; top: 262px; }
.capa__marca { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a); white-space: nowrap; }
.capa__marca .app__mono { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; letter-spacing: 0; }
.capa__ola { margin-top: 10px; font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .55); }
.capa__cards { position: absolute; left: 16px; right: 16px; top: 420px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.capa__card { position: relative; min-height: 206px; padding: 16px; border-radius: 24px; background: var(--v); border: 1px solid var(--vb); }
.capa__rot { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts); }
.capa__card > b { display: block; margin-top: 14px; font-size: 25px; letter-spacing: -0.02em; }
.capa__card > small { display: block; margin-top: 2px; font-size: 14px; color: var(--ts); }
.capa__meta { margin-top: 10px; font-size: 12px; color: var(--ts); }
.capa__ir { position: absolute; left: 16px; bottom: 16px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--a); color: var(--ai); font-size: 20px; font-weight: 700; box-shadow: 0 10px 26px color-mix(in oklab, var(--a) 45%, transparent); }
.anel { --n: .5; position: relative; width: 120px; aspect-ratio: 1; margin: 16px auto 0; display: grid; place-content: center; text-align: center; }
.anel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--a) calc(var(--n) * 1turn), var(--vb) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); }
.anel b { font-size: 28px; letter-spacing: -0.02em; }
.anel small { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ts); }
.capa__linha { position: absolute; left: 16px; right: 16px; top: 638px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--v); border: 1px solid var(--vb); font-size: 15px; font-weight: 600; }
.capa__linha small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ts); }
.capa__linha i { margin-left: auto; font-style: normal; font-size: 24px; color: var(--ts); }

/* grade: tela clara em blocos, data grande */
.app--grade { --bg: #F5F3F0; --t: #1C1714; --ts: #6E645C; --v: #FFFFFF; --vb: rgb(28 23 20 / .07); --glow: transparent; }
.grade__topo { display: flex; align-items: center; gap: 10px; padding: 8px 22px 0; }
.grade__topo .app__mono { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
.grade__estudio { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade__topo .app__avatar { width: 42px; height: 42px; background: var(--v); }
.grade__dia { margin: 18px 22px 0; font-size: 112px; line-height: .9; font-weight: 200; letter-spacing: -0.06em; }
.grade__mes { margin: 4px 22px 0; font-size: 20px; color: var(--ts); }
.grade__treino { position: relative; margin: 20px 16px 0; padding: 18px 20px 20px; border-radius: 26px; background: var(--a); color: var(--ai); box-shadow: 0 18px 36px -14px color-mix(in oklab, var(--a) 60%, transparent); }
.grade__ico { width: 28px; height: 28px; }
.grade__rot { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.grade__treino b { display: block; margin-top: 4px; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.grade__treino small { display: block; margin-top: 6px; font-size: 14px; opacity: .85; }
.grade__seta { position: absolute; right: 20px; top: 50%; translate: 0 -50%; font-size: 24px; }
.grade__par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 16px 0; }
.grade__bloco { position: relative; padding: 16px 18px; border-radius: 22px; background: var(--v); border: 1px solid var(--vb); }
.grade__bloco .grade__rot { margin-top: 0; font-size: 11px; color: var(--ts); opacity: 1; }
.grade__bloco small { font-size: 13px; color: var(--ts); }
.grade__pontos { display: flex; gap: 6px; margin: 14px 0 10px; }
.grade__pontos i { width: 14px; height: 14px; border-radius: 50%; background: var(--vb); }
.grade__pontos i.f { background: var(--a); }
.grade__pontos i.h { background: transparent; box-shadow: inset 0 0 0 2px var(--a); }
.grade__num { display: block; font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -0.04em; }
.grade__bloco--largo { margin: 10px 16px 0; }
.grade__bloco--largo b { display: block; margin-top: 6px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }

/* lista: semana em cápsulas e o treino do dia aberto */
.lista__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 22px 16px 0; }
.lista__dias span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ts); }
.lista__dias b { font-size: 16px; color: var(--t); }
.lista__dias .on { background: var(--a); color: var(--ai); }
.lista__dias .on b { color: var(--ai); }
.lista__t { margin: 24px 20px 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.lista__s { margin: 4px 20px 0; font-size: 15px; color: var(--ts); }
.lista__ex { list-style: none; margin: 16px 16px 0; padding: 0; }
.lista__ex li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--vb); }
.lista__ex img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: #1A1D24; }
.lista__ex span { flex: 1; min-width: 0; }
.lista__ex b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista__ex small { font-size: 13px; color: var(--ts); }
.lista__ex i { font-style: normal; font-size: 20px; color: var(--ts); }
.lista__btn { position: absolute; left: 16px; right: 16px; bottom: 116px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--a); color: var(--ai); font-size: 17px; font-weight: 600; box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--a) 60%, transparent); }

/* no configurador, só o layout escolhido aparece */
/* layout Foco: o treino do dia ocupa a tela */
.foco__rot { margin: 120px 24px 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ts); }
.foco__t { margin: 6px 22px 0; font-size: 84px; font-weight: 800; letter-spacing: -0.05em; line-height: .95; }
.foco__s { margin: 14px 24px 0; font-size: 19px; color: var(--ts); }
.foco__tags { display: flex; gap: 8px; margin: 20px 24px 0; }
.foco__tags span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vb); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.foco__btn { display: grid; place-items: center; height: 62px; margin: 34px 24px 0; border-radius: 999px; background: var(--a); color: var(--ai); font-size: 19px; font-weight: 600; box-shadow: 0 16px 34px -12px color-mix(in oklab, var(--a) 60%, transparent); }
.foco__pe { position: absolute; left: 24px; right: 24px; bottom: 124px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 1px solid var(--vb); }
.foco__pe small { display: block; font-size: 12px; color: var(--ts); }
.foco__pe b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }

/* layout Carrossel: faixas que deslizam de lado, com o próximo card cortado na borda */
.carro__ola { margin: 22px 20px 0; font-size: 28px; color: var(--ts); letter-spacing: -0.02em; }
.carro__ola b { display: block; color: var(--t); font-weight: 700; }
.carro__sec { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 20px 10px; }
.carro__sec b { font-size: 18px; font-weight: 600; }
.carro__sec span { font-size: 14px; font-weight: 600; color: var(--a); }
.carro__faixa { display: flex; gap: 10px; padding-left: 20px; overflow: hidden; }
.carro__card { flex: none; width: 150px; padding: 14px; border-radius: 20px; background: var(--v); border: 1px solid var(--vb); display: grid; gap: 4px; }
.carro__card small { font-size: 12px; color: var(--ts); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.carro__card b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.carro__card span { font-size: 13px; color: var(--ts); }
.carro__card--a { position: relative; width: 270px; padding: 18px; background: var(--a); border: 0; color: var(--ai); }
.carro__card--a small, .carro__card--a span { color: inherit; opacity: .8; }
.carro__card--a b { font-size: 22px; }
.carro__card--a i { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ai); color: var(--a); font-style: normal; font-weight: 700; }
.carro__card--p { width: 128px; }
.carro__card--p b { font-size: 26px; }
.carro__card--sem { width: 190px; }
.carro__dias { display: flex; gap: 6px; margin-top: 10px; }
.carro__dias i { width: 16px; height: 16px; border-radius: 50%; background: var(--vb); }
.carro__dias i.f { background: var(--a); }

.app[data-seu] { opacity: 0; visibility: hidden; transition: opacity var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base); }
.app[data-seu].on { opacity: 1; visibility: visible; transition: opacity var(--sc-d-base) var(--sc-ease-out); }

/* =========================================================== 5 · ALUNO == */
.aluno__palco { display: flex; align-items: center; background: radial-gradient(80% 60% at 30% 40%, #0B1430, #070B18 70%); }
.trilho { align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 var(--sc-gutter); }
.trilho > * { flex: none; }
.trilho__abre { width: min(30rem, 80vw); }
.trilho__titulo { margin-top: 20px; font-size: clamp(2.4rem, 1.5rem + 3vw, 4.6rem); }
.trilho__lede { margin-top: 22px; font-size: 18px; line-height: 1.55; color: var(--sc-ink-soft); max-width: 26rem; }
.passo { width: clamp(15rem, 22vw, 20rem); }
.passo__fone .fone { --w: min(clamp(15rem, 22vw, 20rem), calc((100svh - 280px) / 2.1)); margin-inline: auto; }
.passo h3 { margin-top: 26px; font-size: 26px; letter-spacing: -0.03em; font-weight: 700; }
.passo p { margin-top: 8px; color: var(--sc-ink-soft); line-height: 1.5; font-size: 15.5px; }
.trilho__fecha { width: min(22rem, 78vw); padding-left: 28px; border-left: 1px solid var(--sc-hairline-strong); }
.trilho__fecha-t { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.trilho__fecha p + p { margin-top: 14px; color: var(--sc-ink-soft); line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .passo { --q: clamp(0, calc(var(--sc-p, 0) * 6 - var(--i, 0) * 0.9 + 0.4), 1); opacity: calc(0.55 + var(--q) * 0.45); transform: translate3d(0, calc((1 - var(--q)) * 40px), 0); }
  .passo:nth-of-type(1) { --i: 0; } .passo:nth-of-type(2) { --i: 1; } .passo:nth-of-type(3) { --i: 2; } .passo:nth-of-type(4) { --i: 3; }
}

/* ========================================================== 6 · PAINEL == */
.painel__palco { background: #070B18; }
.painel__folha {
  --e: clamp(0, calc(var(--sc-p, 0) / 0.12), 1);
  position: absolute; inset: 0; background: var(--claro); color: var(--claro-ink);
  clip-path: inset(calc((1 - var(--e)) * 14%) calc((1 - var(--e)) * 9%) round calc((1 - var(--e)) * 40px));
}
.painel__grade { height: 100%; max-width: 76rem; margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--sc-gutter) 32px; display: grid; grid-template-columns: 1fr minmax(0, 0.9fr); align-items: center; gap: 48px; }
.painel__titulo { margin-top: 18px; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.6rem); color: var(--claro-ink); max-width: 13ch; }
.painel__passos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 4px; max-width: 32rem; }
.painel__passos li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid rgb(10 15 31 / .1); opacity: .38; transition: opacity 360ms var(--sc-ease-out); }
.painel__passos li::before { content: ""; position: absolute; left: 0; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: #9AA2B5; transition: background-color 300ms, scale 300ms var(--sc-ease-out); }
.painel__passos li.ativo { opacity: 1; }
.painel__passos li.ativo::before { background: #0B7FC0; scale: 1.3; }
.painel__passos b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.painel__passos span { display: block; margin-top: 4px; color: var(--claro-soft); line-height: 1.5; font-size: 15.5px; }
.painel__fone { display: grid; place-items: center; }
.fone--painel { --w: min(320px, calc((100svh - 150px) / 2.15)); }
.painel__tela { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.painel__tela--home {
  --s: clamp(0, calc((var(--sc-p, 0) - 0.1) / 0.24), 1);
  transform: translate3d(0, calc(var(--s) * -42.2%), 0);
}
.painel__tela--agenda { clip-path: inset(calc((1 - clamp(0, calc((var(--sc-p, 0) - 0.38) / 0.08), 1)) * 100%) 0 0 0); }
.painel__tela--presente { opacity: clamp(0, calc((var(--sc-p, 0) - 0.52) / 0.05), 1); }
.painel__tela--aviso { clip-path: inset(calc((1 - clamp(0, calc((var(--sc-p, 0) - 0.68) / 0.08), 1)) * 100%) 0 0 0); }

/* ========================================================== 7 · BIBLIO == */
.biblio { position: relative; min-height: 165vh; overflow: clip; display: grid; place-items: center; background: #04060C; }
.biblio__parede { position: absolute; inset: -12% -2%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; opacity: .55; }
.biblio__col { display: grid; gap: 14px; align-content: start; }
.biblio__col:nth-child(even) { margin-top: 18vh; }
.biblio__col img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.biblio::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 40% at 50% 50%, rgb(4 6 12 / .95) 0%, rgb(4 6 12 / .75) 45%, rgb(4 6 12 / .2) 100%), linear-gradient(180deg, #05070F 0%, transparent 18%, transparent 82%, #05070F 100%); }
.biblio__centro { position: relative; z-index: 2; text-align: center; padding: 0 var(--sc-gutter); max-width: 44rem; }
.biblio__num { font-size: clamp(6rem, 3rem + 13vw, 15rem); font-weight: 800; letter-spacing: -0.06em; line-height: .85; padding-bottom: .06em; display: flex; justify-content: center; align-items: baseline; }
.biblio__mais { color: var(--sc-accent); font-weight: 600; margin-right: .02em; }
.biblio__titulo { margin-top: 18px; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.biblio__lede { margin: 18px auto 0; max-width: 34rem; color: var(--sc-ink-soft); font-size: 17px; line-height: 1.55; }

/* ======================================================== 7b · DETALHES == */
.detalhes { padding-top: clamp(3rem, 6vw, 6rem); }
.detalhes__grade { display: grid; gap: clamp(4rem, 8vw, 8rem); }
.detalhe { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.detalhe--chat { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.detalhe--chat .chat { order: 2; }
.detalhe__titulo { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); margin-bottom: 18px; }
/* o Story real do aluno, num iPhone, com dois selos em profundidades diferentes */
.story { position: relative; justify-self: center; margin: 0; display: grid; justify-items: center; }
.fone--story { --w: min(300px, 68vw); }
.fone__tela > .story__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.story__barras { position: absolute; top: 7%; left: 5%; right: 5%; display: flex; gap: 4px; }
.story__barras i { flex: 1; height: 2.5px; border-radius: 2px; background: rgb(255 255 255 / .45); }
.story__barras i:first-child { background: #fff; }
.story__selo { position: absolute; z-index: 2; padding: 11px 15px; border-radius: 14px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 24px 40px -18px rgb(0 0 0 / .9); }
.story__selo--a { left: -16%; top: 66%; background: rgb(12 18 36 / .82); backdrop-filter: blur(12px); }
.story__selo--b { right: -14%; top: 24%; background: #4F8CFF; color: #010A1F; }
.story__ponto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2FD07A; vertical-align: 1px; }
.story__legenda { margin-top: 20px; font-size: 13px; color: var(--sc-ink-soft); text-align: center; }
.story__lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.story__lista li { position: relative; padding-left: 22px; color: #C3CBDD; line-height: 1.45; }
.story__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); }
.story__lista b { color: #fff; }
.detalhe--story .selo { margin-bottom: 16px; }
.chat { justify-self: center; width: min(380px, 100%); display: grid; gap: 10px; padding: 24px; border-radius: 28px; background: var(--sc-surface); border: 1px solid var(--sc-hairline); box-shadow: var(--sc-edge), var(--sc-e3); }
.chat__b { max-width: 85%; padding: 12px 16px; border-radius: 20px; line-height: 1.45; font-size: 15px; }
.chat__b--ele { background: rgb(255 255 255 / .08); border-bottom-left-radius: 6px; }
.chat__b--eu { justify-self: end; background: #4F8CFF; color: #010A1F; border-bottom-right-radius: 6px; font-weight: 500; }
.chat__visto { justify-self: end; font-size: 12px; color: var(--sc-ink-soft); }

/* ============================================================= 8 · FIM == */
.fim { position: relative; overflow: clip; padding: clamp(6rem, 12vw, 10rem) 0 0; }
.fim__fundo { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 60% 50%; opacity: .8; }
.fim__veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 7 15 / .95) 0%, rgb(5 7 15 / .8) 40%, rgb(5 7 15 / .35) 100%), linear-gradient(180deg, #05070F 0%, transparent 25%, transparent 70%, #05070F 100%); }
.fim__grade { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.fim__titulo { font-size: clamp(2.6rem, 1.5rem + 4vw, 5.6rem); }
.fim__lede { margin-top: 20px; font-size: 18px; line-height: 1.55; color: #C3CBDD; max-width: 30rem; }
.monte { margin-top: 36px; display: grid; gap: 22px; max-width: 30rem; }
.monte__campo span, .monte__cores legend { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 10px; padding: 0; }
.monte__campo input {
  width: 100%; height: 56px; padding: 0 18px; border-radius: 14px; font-size: 18px; font-weight: 500;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .18); color: var(--sc-ink);
  transition: border-color 150ms, background-color 150ms;
}
.monte__campo input:focus { outline: none; border-color: var(--sc-accent); background: rgb(255 255 255 / .09); box-shadow: 0 0 0 3px rgb(34 184 255 / .25); }
.monte__cores { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.monte__cores legend { width: 100%; }
.monte__cores label { position: relative; cursor: pointer; }
.monte__cores input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
/* amostra de paleta: o destaque sobre o fundo dela */
.monte__cores span { display: block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 42%, var(--f) 45%); font-size: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); transition: scale 140ms var(--sc-ease-out), box-shadow 140ms; }
.monte__cores input:checked + span { box-shadow: 0 0 0 3px var(--sc-canvas), 0 0 0 5px #fff; }
.monte__cores input:focus-visible + span { box-shadow: 0 0 0 3px var(--sc-canvas), 0 0 0 5px var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .monte__cores label:hover span { scale: 1.08; } }
.monte__layouts { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.monte__layouts legend { grid-column: 1 / -1; display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 10px; padding: 0; }
.monte__layouts label { position: relative; cursor: pointer; }
.monte__layouts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.monte__layouts span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .03); font-size: 13px; font-weight: 600; color: var(--sc-ink-soft); transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.monte__layouts input:checked + span { border-color: #fff; background: rgb(255 255 255 / .08); color: #fff; }
.monte__layouts input:focus-visible + span { box-shadow: 0 0 0 3px var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .monte__layouts label:hover span { border-color: rgb(255 255 255 / .4); } }
/* miniatura esquemática de cada layout */
.mini { width: 28px; height: 46px; border-radius: 6px; border: 1.5px solid currentColor; --m: color-mix(in oklab, currentColor 55%, transparent); }
.mini--classico { background: linear-gradient(var(--m) 0 0) 50% 40% / 74% 30% no-repeat, linear-gradient(var(--m) 0 0) 50% 82% / 74% 12% no-repeat; }
.mini--capa { background: linear-gradient(var(--m) 0 0) 50% 0 / 100% 46% no-repeat, linear-gradient(var(--m) 0 0) 18% 80% / 38% 24% no-repeat, linear-gradient(var(--m) 0 0) 82% 80% / 38% 24% no-repeat; }
.mini--grade { background: linear-gradient(var(--m) 0 0) 50% 42% / 78% 18% no-repeat, linear-gradient(var(--m) 0 0) 16% 70% / 36% 18% no-repeat, linear-gradient(var(--m) 0 0) 84% 70% / 36% 18% no-repeat, linear-gradient(var(--m) 0 0) 50% 92% / 78% 10% no-repeat; }
.mini--foco { background: linear-gradient(var(--m) 0 0) 50% 34% / 74% 22% no-repeat, linear-gradient(var(--m) 0 0) 50% 66% / 74% 10% no-repeat; }
.mini--carrossel { background: linear-gradient(var(--m) 0 0) 0 26% / 86% 18% no-repeat, linear-gradient(var(--m) 0 0) 0 56% / 40% 14% no-repeat, linear-gradient(var(--m) 0 0) 100% 56% / 40% 14% no-repeat, linear-gradient(var(--m) 0 0) 0 84% / 40% 14% no-repeat, linear-gradient(var(--m) 0 0) 100% 84% / 40% 14% no-repeat; }
.mini--lista { background: repeating-linear-gradient(180deg, var(--m) 0 3px, transparent 3px 7px) 50% 70% / 74% 50% no-repeat, linear-gradient(var(--m) 0 0) 50% 18% / 74% 8% no-repeat; }
.monte .botao { justify-self: start; }
.exemplo { font-size: 14px; line-height: 1.5; color: var(--sc-ink-soft); padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .04); border: 1px dashed rgb(255 255 255 / .16); }
.selo-exemplo { position: absolute; z-index: 7; top: -14px; left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #05070F; background: rgb(255 255 255 / .85); pointer-events: none; }
.monte__nota { font-size: 14px; color: var(--sc-ink-soft); line-height: 1.5; }
.fim__fone { display: grid; place-items: center; }
.fone--fim { --w: min(310px, 72vw); rotate: 3deg; }
.rodape { position: relative; z-index: 3; margin-top: clamp(5rem, 10vw, 8rem); padding-top: 32px; padding-bottom: 40px; border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; color: var(--sc-ink-soft); font-size: 14px; }
.rodape > img { height: 30px; width: auto; }
.rodape p { display: flex; align-items: center; gap: 10px; }
.rodape__complex { height: 18px; width: auto; opacity: .85; }
.rodape__mini { flex-basis: 100%; font-size: 12.5px; opacity: .75; }

/* ======================================================== 7a · COBRANÇA == */
/* azul do Asaas (#0038E5) sobre o marinho da marca dele (#000A2B) */
.cobra__palco { background: radial-gradient(60% 70% at 78% 50%, rgb(0 56 229 / .32), transparent 70%), #000A2B; }
.cobra__grade { height: 100%; max-width: 76rem; margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--sc-gutter) 32px; display: grid; grid-template-columns: 1fr minmax(0, 0.95fr); align-items: center; gap: 48px; }
.selo--asaas { color: #7F9CFF; }
.cobra__titulo { margin-top: 18px; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); max-width: 14ch; }
.cobra__lede { margin-top: 22px; max-width: 33rem; color: #B6C0DD; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.cobra__lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 33rem; }
.cobra__lista li { position: relative; padding-left: 26px; }
.cobra__lista li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #2F62FF; box-shadow: 0 0 0 4px rgb(47 98 255 / .22); }
.cobra__lista b { display: block; font-size: 17px; letter-spacing: -0.01em; }
.cobra__lista span { display: block; margin-top: 2px; color: #9AA6C8; font-size: 15px; line-height: 1.5; }
.cobra__cena { position: relative; display: grid; place-items: center; }
.fone--cobra { --w: min(310px, calc((100svh - 150px) / 2.15)); }
/* os avisos chegam um a um e saem de cena quando o fechamento assume */
.cobra__aviso { position: absolute; z-index: 3; --q: clamp(0, calc((var(--sc-p, 0) - var(--de)) / 0.1), 1); --s: clamp(0, calc((var(--sc-p, 0) - 0.56) / 0.08), 1); opacity: calc(var(--q) * (1 - var(--s))); }
.cobra__aviso--1 { --de: 0.08; --dx: -1; left: -4%; top: 12%; --r: -2deg; }
.cobra__aviso--2 { --de: 0.24; --dx: 1; right: -6%; top: 40%; --r: 1.5deg; }
.cobra__aviso--3 { --de: 0.4; --dx: -1; left: 0; top: 70%; --r: -1deg; }
.aviso--asaas { box-shadow: inset 3px 0 0 #0038E5, 0 0 0 1px rgb(0 0 0 / .04), 0 6px 12px -3px rgb(2 6 20 / .25), 0 24px 40px -12px rgb(2 6 20 / .45); }
@media (prefers-reduced-motion: no-preference) {
  .cobra__aviso { transform: translate3d(calc(var(--s) * var(--dx) * 24px), calc((1 - var(--q)) * 28px), 0) scale(calc(0.94 + var(--q) * 0.06 - var(--s) * 0.06)); }
}

/* a tela do financeiro, na mesma escala 390x844 das outras */
.app--fin { --f: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.22), 1); }
.fin__rot { margin: 22px 20px 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ts); }
.fin__titulo { margin: 4px 20px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.fin__total { margin: 18px 20px 0; padding: 20px; border-radius: 26px; display: grid; gap: 6px; background: linear-gradient(150deg, #2F62FF, #0038E5); color: #FFFFFF; box-shadow: 0 16px 40px rgb(0 56 229 / .45); }
.fin__total-rot { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.fin__total b { font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
.fin__barra { height: 8px; margin-top: 8px; border-radius: 99px; background: rgb(255 255 255 / .22); overflow: hidden; }
.fin__barra i { display: block; height: 100%; width: calc(87% * (0.25 + var(--f) * 0.75)); border-radius: inherit; background: #FFFFFF; }
.fin__total-pe { font-size: 14px; font-weight: 500; }
.fin__par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 20px 0; }
.fin__bloco { padding: 16px; border-radius: 22px; background: var(--v); border: 1px solid var(--vb); display: grid; gap: 4px; }
.fin__bloco span { font-size: 13px; color: var(--ts); }
.fin__bloco b { font-size: 24px; letter-spacing: -0.03em; }
.fin__bloco small { font-size: 13px; color: var(--ts); }
.fin__bloco--atraso b { color: #FF8A3D; }
.fin__graf { margin: 12px 20px 0; padding: 16px 16px 30px; border-radius: 22px; background: var(--v); border: 1px solid var(--vb); }
.fin__graf-rot { font-size: 13px; color: var(--ts); }
.fin__colunas { height: 74px; margin-top: 10px; display: flex; align-items: flex-end; gap: 12px; }
.fin__colunas i { position: relative; flex: 1; height: calc(var(--h) * 64px * (0.3 + var(--f) * 0.7)); border-radius: 8px; background: rgb(255 255 255 / .14); }
.fin__colunas i.ativa { background: #2F62FF; }
.fin__colunas em { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-style: normal; font-size: 11px; color: var(--ts); }
.fin__alunos { list-style: none; margin: 14px 20px 0; padding: 0; display: grid; gap: 8px; }
.fin__alunos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--v); }
.fin__ini { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgb(255 255 255 / .1); font-size: 13px; font-weight: 700; }
.fin__nome { flex: 1; font-size: 15px; font-weight: 600; }
.fin__nome small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ts); }
.fin__st { padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.fin__st--ok { background: rgb(47 98 255 / .2); color: #9CB3FF; }
.fin__st--atraso { background: rgb(255 138 61 / .16); color: #FF8A3D; }

/* ========================================================= responsivo == */
@media (max-width: 1100px) {
  .marcas__lista { display: none; }
  .hero__card--a, .hero__card--c { right: auto; left: 46%; }
}
@media (max-width: 860px) {
  :root { --nav-h: 56px; }
  .nav { top: 10px; padding: 0 8px 0 16px; }
  .nav__links { display: none; }
  .nav__marca img { height: 28px; }

  .hero__scrim { background: linear-gradient(180deg, rgb(5 7 15 / .9) 0%, rgb(5 7 15 / .6) 38%, rgb(5 7 15 / .2) 60%, rgb(5 7 15 / .8) 100%); }
  .hero__copy { top: calc(var(--nav-h) + 34px); translate: none; inset-inline: var(--sc-gutter); }
  .hero__titulo { font-size: clamp(2.4rem, 11vw, 3.6rem); margin-top: 14px; }
  .hero__lede { margin-top: 14px; font-size: 15.5px; }
  .hero__acoes { margin-top: 20px; }
  .hero__acoes .botao--fantasma { display: none; }
  .hero__ancora { --w: min(250px, 62vw); right: auto; left: 50%; top: auto; bottom: calc(var(--w) * -1.15); translate: -50% 0; }
  .fone--hero { rotate: -3deg; }
  .hero__brilho { right: -10%; top: auto; bottom: 0; width: 120vw; height: 50vh; }
  .aviso { width: 238px; padding: 9px 11px; gap: 9px; border-radius: 16px; }
  .aviso__icone { width: 28px; height: 28px; }
  .aviso__txt b { font-size: 13px; } .aviso__txt small { font-size: 11.5px; } .aviso time { display: none; }
  .hero__card--a { left: -14%; right: auto; top: -12%; }
  .hero__card--b { left: auto; right: -12%; top: 30%; }
  .hero__card--c, .hero__card--d { display: none; }

  .caos__frase { font-size: clamp(2rem, 9.5vw, 3rem); }
  .msg { font-size: 13px; } .arq { font-size: 12px; } .planilha { font-size: 10.5px; }
  .frag[style*="--x:70%"], .frag[style*="--x:78%"], .frag[style*="--x:82%"] { --x: 58% !important; }

  .toque__copy, .toque__copy--a { left: var(--sc-gutter); right: var(--sc-gutter); text-align: left; bottom: 32px; }
  .toque__copy--a { top: calc(var(--nav-h) + 30px); bottom: auto; }
  .toque__copy p { font-size: 15.5px; }
  .fone--toque { --w: min(230px, 58vw, calc((100svh - 300px) / 2.1)); }
  .toque__fone { top: 54%; }
  .toque__video { object-fit: contain; }

  .marcas__intro { top: calc(var(--nav-h) + 30px); right: var(--sc-gutter); }
  .marcas__titulo { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .marcas__fone { top: auto; bottom: 46px; translate: -50% 0; }
  .fone--marcas { --w: min(280px, 66vw, calc((100svh - 260px) / 2.1)); }
  .marcas__nota { left: 0; right: 0; text-align: center; bottom: 14px; }

  .passo { width: 70vw; }
  .passo__fone .fone { --w: min(64vw, calc((100svh - 300px) / 2.1)); }
  .trilho__abre { width: 82vw; }
  .trilho__lede { font-size: 16px; }

  .painel__grade { grid-template-columns: 1fr; align-content: start; gap: 20px; padding-top: calc(var(--nav-h) + 30px); padding-bottom: 20px; }
  .painel__titulo { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-top: 10px; }
  .painel__passos { margin-top: 14px; }
  .painel__passos li { display: none; padding: 10px 0 0 22px; border: 0; }
  .painel__passos li.ativo { display: block; }
  .painel__passos li::before { top: 18px; }
  .painel__passos b { font-size: 17px; } .painel__passos span { font-size: 14px; }
  .fone--painel { --w: min(240px, 60vw, calc((100svh - 380px) / 2.1)); }

  .biblio { min-height: 130vh; }
  .biblio__parede { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .biblio__parede { inset: -6% -4%; align-content: start; }
  .biblio__col:nth-child(even) { margin-top: 8vh; }

  .detalhe, .detalhe--chat { grid-template-columns: 1fr; }
  .detalhe--chat .chat { order: 0; }
  .story__selo--a { left: -8%; }
  .story__selo--b { right: -6%; }

  .fim__grade { grid-template-columns: 1fr; }
  .fim__fone { order: -1; }
  .fone--fim { --w: min(240px, 60vw); }
  /* no celular a foto vira uma faixa: o toque de mãos aparece entre o iPhone e o título */
  .fim__grade { gap: 0; }
  .fim__fone { margin-bottom: 170px; }
  .fim__fundo { top: 290px; height: 580px; object-position: 50% 50%; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 100%); }
  .fim__veu { background: linear-gradient(180deg, #05070F 0, transparent 120px, transparent 700px, rgb(5 7 15 / .55) 820px, rgb(5 7 15 / .7) 100%); }
  .monte .botao { justify-self: stretch; }
  .monte__cores { gap: 6px; }
  .monte__cores span { width: 38px; height: 38px; }

  .cobra__grade { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: calc(var(--nav-h) + 26px); padding-bottom: 16px; }
  .cobra__titulo { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-top: 10px; }
  .cobra__lede { margin-top: 12px; font-size: 14.5px; }
  .cobra__lista { display: none; }
  .fone--cobra { --w: min(230px, 58vw, calc((100svh - 400px) / 2.1)); }
  .cobra__aviso--1 { left: -2%; top: 6%; }
  .cobra__aviso--2 { right: -2%; top: 40%; }
  .cobra__aviso--3 { left: 0; top: 72%; }
}

/* ===================================================== movimento reduzido == */
@media (prefers-reduced-motion: reduce) {
  .frag { transform: none; opacity: calc(1 - var(--sc-p, 0) * 1.25); }
  .painel__folha { clip-path: none; }
  .painel__tela--home { transform: none; }
}