/* Esmaltei, página inicial nova (prévia, novembro de 2026), segunda rodada.
   Mistura quatro referências que o dono mandou, trazidas para o rosa e branco da marca:
   - SaaS de painel inclinado: barra em pílula, selo "Novo", o produto inclinado no topo com órbitas e chão quadriculado
   - Plataforma de IA: cartões de vidro flutuando em volta do produto, ícones em azulejo
   - Portfólio de vidro: painéis foscos sobre fundo claro em degradê, o anel da Thay, contato em vidro
   - Fone de jogo: ficha técnica com rótulo preto inclinado, número gigante ao lado do aparelho,
     painel preto em diagonal com as telas ao lado, faixa de garantias no fim
   Pedido do dono na segunda rodada: nada de unhas desenhadas, texto curto e tudo alinhado na mesma linha.
   Topo (skill site de 10k): o painel de verdade se endireita com a rolagem e os cartões chegam um a um.
   Movimento (apple-design): o topo segue a rolagem com interpolação que descansa, molas que partem do valor atual. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --white: #ffffff; --black: #000000; --pink: #d61f69; --pink-dark: #b0154f; --pink-soft: #ffe8f0; --gray: #5c5c5c; --line: #e6e6e6;
  --ink-2: #3a3a3a;
  --pink-line: rgba(214, 31, 105, .16);
  --glass: rgba(255, 255, 255, .58);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #fff;
  --glass-shadow: 0 30px 60px -40px rgba(176, 21, 79, .45);
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.075, 0.227, 0.39, 0.536, 0.656, 0.75, 0.821, 0.873, 0.911, 0.938, 0.957, 0.971, 0.98, 0.986, 0.991, 0.994, 0.996, 0.997, 0.998, 1); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: #fff; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { font-family: var(--font); color: var(--black); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--black); color: #fff; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { max-width: 62ch; }

/* Um só alinhamento: todo título e todo texto começam na mesma linha da esquerda, com a mesma largura */
.wrap { width: min(1200px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.sec { position: relative; padding-block: clamp(110px, 13vw, 180px); }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); letter-spacing: -0.045em; }
.lead { margin-top: 16px; font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: var(--ink-2); max-width: 38ch; }
.head { max-width: 640px; margin-bottom: clamp(44px, 5vw, 72px); }
.head--tight { margin-bottom: 0; }
.split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__grid--top { align-items: start; }
.split__copy { max-width: 480px; }

/* Fundo fixo: brilhos rosa bem leves atrás de tudo (nunca uma tela branca pura) */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55vw 45vw at 92% -8%, rgba(255, 214, 231, .5), transparent 62%), radial-gradient(48vw 40vw at -12% 46%, rgba(255, 232, 240, .65), transparent 66%), radial-gradient(40vw 30vw at 60% 110%, rgba(255, 226, 238, .5), transparent 70%); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 100ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.04rem; }
.btn--block { width: 100%; }
.btn--pink { background: var(--pink); color: #fff; box-shadow: 0 16px 30px -16px rgba(214, 31, 105, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--glass { background: rgba(255, 255, 255, .62); color: var(--black); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--pink-line), 0 12px 26px -20px rgba(176, 21, 79, .45); }
.btn--outline { border-color: var(--black); color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .btn--pink:hover { background: var(--pink-dark); }
  .btn--glass:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--pink), 0 12px 26px -20px rgba(176, 21, 79, .45); }
  .btn--outline:hover { background: var(--black); color: #fff; }
}

/* listas com o tique rosa */
.ticks { display: grid; gap: 12px; color: var(--ink-2); font-size: .95rem; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks svg { width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--pink-soft); color: var(--pink); stroke-width: 3.2; }
.ticks--row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .9rem; }
.ticks--dark { color: rgba(255, 255, 255, .9); }
.ticks--dark svg { background: var(--pink); color: #fff; }

/* ---------- Barra do topo: pílula de vidro ---------- */
.nav { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; pointer-events: none; }
.nav__inner { pointer-events: auto; display: flex; align-items: center; gap: 22px; width: min(1200px, calc(100% - 24px)); height: 64px; margin-inline: auto; padding: 0 9px 0 24px; border-radius: 999px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--glass-edge), 0 14px 34px -24px rgba(176, 21, 79, .5); transition: background-color 220ms var(--ease-out); }
.nav.is-scrolled .nav__inner { background: rgba(255, 255, 255, .8); }
.wordmark { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.045em; color: var(--black); text-decoration: none; }
.wordmark::after { content: ""; display: inline-block; width: 7px; height: 10px; margin-left: 2px; background: var(--pink); border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; }
.nav__links { display: flex; gap: 26px; margin-inline: auto; }
.nav__links a { color: var(--ink-2); font-size: .94rem; font-weight: 500; text-decoration: none; transition: color 150ms var(--ease-out); }
.nav__login { font-weight: 600; text-decoration: none; padding: 8px 6px; }
@media (hover: hover) { .nav__links a:hover, .nav__login:hover { color: var(--pink-dark); } }
.nav__cta { min-height: 46px; padding: 0 20px; }

/* =====================================================================
   TOPO
   Estático é o padrão (sem JS, celular, movimento reduzido): o painel já aparece no lugar.
   Com a classe .scrub (só no computador), o palco gruda na tela e a rolagem (--p, de 0 a 1)
   endireita o painel, sobe o celular e traz os cartões de vidro.
   ===================================================================== */
.hero { position: relative; }
.stage { --p: 1; position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; display: flex; align-items: center; padding: 120px 0 80px;
  background: radial-gradient(44vw 34vw at 74% 50%, rgba(255, 222, 236, .95), rgba(255, 222, 236, 0) 70%), radial-gradient(40vw 30vw at 8% 18%, rgba(255, 238, 245, .9), rgba(255, 238, 245, 0) 70%), linear-gradient(#fff, #fff8fb); }
.floor { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -4%; height: 34%; background-image: linear-gradient(rgba(214, 31, 105, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 31, 105, .1) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(600px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 80%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 80%); }
.hero__copy { position: relative; z-index: 3; margin-left: calc((100% - min(1200px, 100% - 2 * var(--gutter))) / 2); }
.news { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--pink-line); color: var(--ink-2); font-size: .88rem; font-weight: 500; text-decoration: none; transition: box-shadow 150ms var(--ease-out); }
@media (hover: hover) { .news:hover { box-shadow: inset 0 0 0 1px var(--pink); } }
.news__tag { padding: 3px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-size: .78rem; font-weight: 700; }
.hero__title { margin-top: 24px; font-size: clamp(2.5rem, 4.4vw, 4.2rem); line-height: .98; letter-spacing: -0.052em; }
.hero__sub { margin-top: 22px; font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: var(--ink-2); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* o celular do topo: quatro telas desenhadas para o site (não são fotos do painel) */
.hero__copy { width: min(440px, 33vw); margin-left: max(var(--gutter), calc((100% - 1340px) / 2)); }
.demo { position: absolute; z-index: 2; left: 56vw; top: 50%; transform: translate(-50%, -48%); }
.demo .orbits { position: absolute; z-index: -1; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.orbit { fill: none; stroke: rgba(214, 31, 105, .22); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); vector-effect: non-scaling-stroke; }
.orbit--2 { stroke: rgba(214, 31, 105, .12); }
.orbit__dot { fill: var(--pink); opacity: .55; }
.demo .iphone--hero { --w: min(310px, 23vw, calc((100vh - 150px) * .462)); padding: calc(var(--w) * .054); border-radius: calc(var(--w) * .18); background: linear-gradient(90deg, #8f9196 0, #f7f8fa 1.2%, #c4c6cb 3.2%, #e6e7ea 8%, #e6e7ea 92%, #bfc1c6 96.8%, #f4f5f7 98.8%, #8a8c91 100%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .95), inset 0 -2px 2px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(0, 0, 0, .2), 0 70px 100px -55px rgba(176, 21, 79, .6), 0 26px 40px -30px rgba(0, 0, 0, .35); transform: perspective(1800px) rotateY(calc((-16 + 11 * var(--p)) * 1deg)) rotateX(calc((7 - 4 * var(--p)) * 1deg)); }
.demo .iphone--hero .iphone__screen { border-radius: calc(var(--w) * .126); box-shadow: 0 0 0 calc(var(--w) * .026) #000; container-type: inline-size; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 6cqw; opacity: 0; transform: translateY(3%) scale(.985); transition: opacity 380ms var(--ease-out), transform 640ms var(--spring); pointer-events: none; }
.scr.is-on { opacity: 1; transform: none; }
.sbar { display: flex; justify-content: space-between; align-items: center; height: 14cqw; padding: 3cqw 3cqw 0; font-size: 4cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbar i { width: 6.4cqw; height: 3.2cqw; border: 1.5px solid currentColor; border-radius: 1cqw; opacity: .9; box-shadow: inset -1.6cqw 0 0 -0.2cqw currentColor; }
.sbar--light { color: #fff; }
/* 1. a cliente marcou */
.scr--done { background: linear-gradient(#fff 0%, #fff6fa 100%); }
.sd__top { display: flex; align-items: center; gap: 3cqw; margin-top: 2cqw; }
.sav { flex: none; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--pink); color: #fff; font-size: 3.6cqw; font-weight: 800; }
.sd__top b { display: block; font-size: 4.4cqw; }
.sd__top small { display: block; color: var(--gray); font-size: 3.3cqw; }
.sd__check { display: grid; place-items: center; width: 22cqw; height: 22cqw; margin: 10cqw auto 0; border-radius: 50%; background: var(--pink); color: #fff; box-shadow: 0 5cqw 9cqw -4cqw rgba(214, 31, 105, .8); }
.sd__check svg { width: 11cqw; height: 11cqw; stroke-width: 3; }
.sd__t { margin: 5cqw auto 0; font-size: 7.6cqw; font-weight: 800; letter-spacing: -0.035em; text-align: center; }
.sd__s { margin: 1cqw auto 0; color: var(--gray); font-size: 4cqw; text-align: center; }
.sd__card { margin-top: 6cqw; padding: 0 5cqw; border-radius: 5cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 4cqw 8cqw -6cqw rgba(176, 21, 79, .35); }
.sd__card div { display: flex; justify-content: space-between; gap: 3cqw; padding: 3.6cqw 0; border-top: 1px solid var(--line); }
.sd__card div:first-child { border-top: 0; }
.sd__card dt { color: var(--gray); font-size: 3.6cqw; }
.sd__card dd { font-size: 3.8cqw; font-weight: 700; text-align: right; }
.sd__note { margin: 4cqw auto 0; color: var(--gray); font-size: 3.4cqw; text-align: center; }
.sbtn { display: grid; place-items: center; height: 13cqw; margin: auto 0 9cqw; border-radius: 999px; background: var(--pink); color: #fff; font-size: 4.2cqw; font-weight: 700; }
/* 2. o lembrete na tela de bloqueio */
.scr--lock { color: #fff; background: radial-gradient(70% 50% at 20% 85%, rgba(255, 170, 205, .7), transparent 70%), radial-gradient(60% 40% at 90% 20%, rgba(255, 120, 175, .6), transparent 70%), linear-gradient(170deg, #ffb6d1 0%, #e5468d 45%, #8e0f40 100%); }
.lk__date { margin: 6cqw auto 0; font-size: 4.4cqw; font-weight: 600; text-align: center; opacity: .92; }
.lk__time { margin: 0 auto; font-size: 23cqw; font-weight: 800; letter-spacing: -0.05em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.ntf { display: flex; gap: 3cqw; margin-top: 9cqw; padding: 3.8cqw; border-radius: 5.4cqw; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--black); font-size: 3.6cqw; line-height: 1.35; box-shadow: 0 5cqw 10cqw -6cqw rgba(60, 2, 26, .6); }
.ntf--2 { margin-top: 3cqw; opacity: .9; }
.ntf > div { flex: 1; min-width: 0; }
.ntf__ic { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 2.6cqw; background: var(--pink); color: #fff; font-size: 3cqw; font-weight: 800; }
.ntf__h { display: flex; justify-content: space-between; align-items: baseline; max-width: none; }
.ntf__h b { font-size: 3.6cqw; }
.ntf__h small { color: var(--gray); font-size: 3cqw; }
.ntf__btns { display: flex; gap: 2cqw; margin-top: 2.8cqw; }
.ntf__btns i { flex: 1; padding: 2cqw 0; border-radius: 999px; background: rgba(214, 31, 105, .12); color: var(--pink-dark); font-size: 3.4cqw; font-style: normal; font-weight: 700; text-align: center; }
.ntf__btns i:first-child { background: var(--pink); color: #fff; }
/* 3. o dia da nail designer */
.scr--hoje { background: #fff; }
.hj__date { margin-top: 2cqw; color: var(--pink-dark); font-size: 3.6cqw; font-weight: 600; }
.hj__hi { font-size: 7.2cqw; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
/* o Início do painel no celular, igual ao de verdade: cartão rosa com a cliente de agora e a linha do dia, depois Horários de hoje */
.hj__now { display: grid; gap: 1cqw; margin-top: 4cqw; padding: 4.6cqw 4.4cqw 4cqw; border-radius: 5.6cqw; background: #fce7f3; }
.hj__now small { display: flex; align-items: center; gap: 1.6cqw; color: var(--pink-dark); font-size: 3.3cqw; font-weight: 700; }
.hj__dot { width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--pink); }
.hj__now b { font-size: 6.6cqw; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.hj__now > span { color: var(--ink-2); font-size: 3.3cqw; }
.hj__btns { display: flex; gap: 2cqw; margin-top: 2.4cqw; }
.hj__btns i { padding: 2.2cqw 4cqw; border-radius: 999px; background: var(--pink); color: #fff; font-size: 3.2cqw; font-style: normal; font-weight: 700; }
.hj__btns i.is-sec { background: #fff; color: var(--pink-dark); }
.hj__line { position: relative; display: block; height: 8cqw; margin-top: 3cqw; padding: 1.2cqw; border-radius: 2.6cqw; background: #fff; }
.hj__line u { position: absolute; top: 1.2cqw; bottom: 1.2cqw; left: calc(1.2cqw + var(--a) * .94); width: calc(var(--w) * .94); border-radius: 1.6cqw; background: var(--pink); }
.hj__line u.is-now { box-shadow: 0 0 0 .6cqw #fff, 0 0 0 1cqw var(--pink); }
.hj__line u.is-free { background: transparent; border: 1px dashed rgba(219, 39, 119, .4); }
.hj__hours { display: flex; justify-content: space-between; margin-top: .8cqw; color: var(--pink-dark); font-size: 2.6cqw; font-weight: 700; }
.hj__hours em { font-style: normal; }
.hj__box { margin-top: 3cqw; padding: 3.6cqw 4cqw 1.6cqw; border-radius: 5cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.hj__bh { display: flex; justify-content: space-between; align-items: baseline; max-width: none; }
.hj__bh b { font-size: 3.9cqw; font-weight: 800; letter-spacing: -0.02em; }
.hj__bh small { color: var(--pink-dark); font-size: 2.9cqw; font-weight: 700; }
.hj__list { margin-top: 1cqw; }
.hj__box--av { padding-bottom: 3.4cqw; }
.hj__av { display: flex; align-items: center; gap: 2cqw; max-width: none; margin-top: 2.4cqw; font-size: 3.3cqw; }
.hj__av i { width: 1.8cqw; height: 2.4cqw; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: var(--pink); }
.hj__list li { display: grid; grid-template-columns: 12cqw minmax(0, 1fr) auto; align-items: center; gap: 2cqw; padding: 2.6cqw 0; border-top: 1px solid var(--line); }
.hj__list li:first-child { border-top: 0; }
.hj__list time { color: var(--pink-dark); font-size: 3.6cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.hj__list b { display: block; font-size: 3.7cqw; }
.hj__list small { display: block; color: var(--gray); font-size: 2.9cqw; }
.hj__list em { padding: .8cqw 2.6cqw; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dark); font-size: 2.8cqw; font-style: normal; font-weight: 700; }
.tabbar { display: flex; justify-content: space-around; align-items: center; height: 17cqw; margin: auto -6cqw 0; padding-bottom: 3cqw; border-top: 1px solid var(--line); background: #fff; color: #8a8a8a; }
.tabbar svg { width: 6cqw; height: 6cqw; }
.tabbar span { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--pink); color: #fff; }
/* 4. a Thay */
.scr--thay { background: linear-gradient(#fff9fb 0%, #ffeef5 100%); }
.th__head { display: flex; align-items: center; gap: 3cqw; padding: 2cqw 0 4cqw; border-bottom: 1px solid var(--pink-line); }
.scr .tgem--sm { width: 10cqw; height: 10cqw; border-radius: 3.4cqw; font-size: 4.4cqw; }
.th__head b { display: block; font-size: 4.4cqw; }
.th__head small { display: block; color: var(--gray); font-size: 3.2cqw; }
.th__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.6cqw; padding: 4cqw 0; }
.sb { max-width: 84%; padding: 3cqw 4cqw; border-radius: 4.6cqw; font-size: 3.8cqw; line-height: 1.38; }
.sb--me { align-self: flex-end; background: var(--pink); color: #fff; border-bottom-right-radius: 1.4cqw; }
.sb--thay { align-self: flex-start; background: #fff; border-bottom-left-radius: 1.4cqw; box-shadow: inset 0 0 0 1px var(--pink-line); }
.th__in { display: flex; justify-content: space-between; align-items: center; height: 13cqw; margin-bottom: 8cqw; padding: 0 1.6cqw 0 5cqw; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--pink-line); color: var(--gray); font-size: 3.6cqw; }
.th__in i { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--pink); color: #fff; }
.th__in svg { width: 5cqw; height: 5cqw; }

/* computador: o painel reto (sem inclinar, para a foto ficar nítida), e os passos numa fileira embaixo */
.demo-pc { --tw: min(57vw, 800px, calc((100vh - 300px) * 1.6)); position: absolute; z-index: 2; top: 104px; right: max(var(--gutter), calc((100% - 1340px) / 2)); width: var(--tw); margin: 0; perspective: 2400px; }
.demo-pc .orbits { position: absolute; z-index: -1; left: -10%; top: -16%; width: 120%; height: 140%; overflow: visible; }
.demo-pc .tablet { transform: none; }
.pcs { position: relative; display: block; overflow: hidden; aspect-ratio: 1600 / 1000; border-radius: 19px; background: #fff; }
.pcs img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transform: scale(1.012); transition: opacity 460ms var(--ease-out), transform 700ms var(--spring); }
.pcs img.is-on { opacity: 1; transform: none; }
.demo-pc .pop--pc { right: auto; left: -7%; top: 62%; }
.demo-pc .pop--pc .pop__i { right: auto; left: 0; }
.demo { display: none; }

/* o aviso de vidro que muda junto com a tela */
.pop { position: absolute; z-index: 3; right: calc(100% + 22px); top: 13%; width: 240px; height: 52px; }
.pop__i { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 10px; max-width: none; padding: 13px 18px; border-radius: 16px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: var(--glass-edge), 0 22px 44px -26px rgba(176, 21, 79, .55); font-size: .88rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.95); filter: blur(4px); transition: opacity 320ms var(--ease-out), transform 560ms var(--spring), filter 360ms var(--ease-out); }
.pop__i.is-on { opacity: 1; transform: none; filter: none; }
.pop__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }

/* os quatro passos ao lado: a rolagem acende um de cada vez (e dá para clicar) */
.steps { position: absolute; z-index: 3; top: calc(104px + min(57vw, 800px, calc((100vh - 300px) * 1.6)) * .625 + 52px); right: max(var(--gutter), calc((100% - 1340px) / 2)); width: min(57vw, 800px, calc((100vh - 300px) * 1.6)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.steps__b { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; width: 100%; height: 100%; padding: 12px 12px; border-radius: 18px; text-align: left; opacity: .45; transition: opacity 300ms var(--ease-out), background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.steps__b.is-on { opacity: 1; background: rgba(255, 255, 255, .72); box-shadow: var(--glass-edge), 0 18px 36px -26px rgba(176, 21, 79, .5); }
@media (hover: hover) { .steps__b:not(.is-on):hover { opacity: .8; } }
.steps__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-dark); font-size: .82rem; font-weight: 800; transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.steps__b.is-on .steps__n { background: var(--pink); color: #fff; }
.steps__b b { display: block; font-size: .92rem; letter-spacing: -0.015em; line-height: 1.25; }
.steps__b small { display: block; margin-top: 4px; color: var(--gray); font-size: .78rem; line-height: 1.38; }
.cue { display: none; }

/* Modo de rolagem */
.scrub .hero { height: 330vh; }
.scrub .stage { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 0; }
.scrub .cue { display: flex; flex-direction: column; align-items: center; gap: 8px; position: absolute; z-index: 5; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--gray); font-size: .82rem; font-weight: 500; transition: opacity 300ms var(--ease-out); }
.cue i { display: block; width: 2px; height: 24px; border-radius: 2px; background: var(--pink); transform-origin: top; animation: cue 2.4s var(--ease-out) infinite -0.6s; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-height: 820px) { .scrub .cue { display: none; } }

/* Os cinco portões: iguais, caractere por caractere, aos do JavaScript. Com qualquer um, o topo é estático (os passos viram botões). */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .scrub .hero { height: auto; }
  .scrub .stage { position: relative; height: auto; min-height: 100vh; padding: 120px 0 80px; }
  .scrub .cue { display: none; }
}
/* computador: os quatro passos ficam todos acesos, como uma fileira de benefícios (nada troca) */
.steps__b, .steps__b.is-on { opacity: 1; background: rgba(255, 255, 255, .72); box-shadow: var(--glass-edge), 0 18px 36px -26px rgba(176, 21, 79, .5); pointer-events: none; cursor: default; }
.steps__b .steps__n { background: var(--pink); color: #fff; }
/* Retrato e celular: texto, o celular e os passos, um embaixo do outro */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {
  .stage, .scrub .stage { flex-direction: column; align-items: stretch; min-height: 0; padding: 104px 0 56px; }
  .hero__copy { width: auto; margin-inline: var(--gutter); }
  .demo-pc { display: none; }
  .demo { display: block; position: relative; left: auto; top: auto; transform: none; align-self: center; margin-top: 56px; }
  .demo .iphone--hero { --w: min(300px, 74vw); transform: none; }
  .demo .orbits { width: 160%; }
  .pop { display: none; }
  .steps { position: relative; top: auto; left: auto; right: auto; width: auto; transform: none; margin: 28px var(--gutter) 0; grid-template-columns: 1fr; gap: 6px; }
  .steps__b { padding: 14px 16px; pointer-events: auto; cursor: pointer; }
  .steps__b:not(.is-on) { background: none; box-shadow: none; }
  .steps__b:not(.is-on) .steps__n { background: var(--pink-soft); color: var(--pink-dark); }
  .steps__b b { font-size: 1rem; }
  .steps__b small { font-size: .86rem; }
  .steps__b { opacity: .6; }
}

/* ---------- Para quem é ---------- */
.made { padding: clamp(64px, 8vw, 104px) 0 0; }
.made__t { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--gray); }
.made__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 34px; margin-top: 22px; }
.made__list li { display: inline-flex; align-items: center; gap: 10px; color: #6e6e6e; font-size: clamp(1.05rem, 1.55vw, 1.32rem); font-weight: 700; letter-spacing: -0.025em; }
.made__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #efb3cb; }

/* ---------- Ficha técnica: rótulo preto inclinado ---------- */
.specs { padding: clamp(40px, 5vw, 64px) 0 0; }
.specs__bar { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 34px 60px -46px rgba(176, 21, 79, .4); }
.specs__label { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px 60px 24px 30px; background: var(--black); color: #fff; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); }
.specs__label h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.02em; }
.specs__label span { width: 44px; height: 2px; border-radius: 2px; background: var(--pink); }
.specs__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.specs__list > div { padding: 24px 20px; border-left: 1px solid var(--line); }
.specs__list > div:first-child { border-left: 0; }
.specs__list dt { color: var(--gray); font-size: .78rem; font-weight: 500; }
.specs__list dd { margin-top: 6px; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

/* ---------- 23h40: o número gigante ao lado do celular ---------- */
.night { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; }
.hud { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateX(-12%); overflow: visible; }
.hud__ring { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1600ms var(--ease-out); }
.hud__ring--dash { stroke: rgba(214, 31, 105, .35); stroke-dasharray: .006 .012; transition: opacity 900ms var(--ease-out) 500ms; }
.hud__ring--thin { stroke: rgba(0, 0, 0, .08); transition-delay: 250ms; }
.hud__dot { fill: var(--pink); transition: opacity 500ms var(--ease-out) 1100ms; }
.js .night:not(.in) .hud__ring:not(.hud__ring--dash) { stroke-dashoffset: 1; }
.js .night:not(.in) .hud__ring--dash, .js .night:not(.in) .hud__dot { opacity: 0; }
.night__phone { position: relative; width: min(280px, 46%); height: auto; transform: translateX(-26%); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .16)); }
.night__label { position: absolute; left: 63%; top: 30%; }
.night__label b { display: block; font-size: clamp(4.5rem, 9vw, 8rem); font-weight: 800; letter-spacing: -0.06em; line-height: .85; font-variant-numeric: tabular-nums; }
.night__label span { display: block; margin-top: 10px; color: var(--gray); font-size: .95rem; font-weight: 600; max-width: 12ch; }
.night figcaption { position: absolute; bottom: 0; right: 0; color: var(--gray); font-size: .78rem; }


/* ---------- As três dores (23h40) ---------- */
.pains { display: grid; gap: 18px; margin-top: 34px; }
.pains > div { padding-left: 18px; border-left: 2px solid var(--pink); }
.pains dt { font-weight: 700; letter-spacing: -0.01em; }
.pains dd { margin-top: 2px; color: var(--gray); font-size: .95rem; }

/* ---------- No computador: o painel inclinado com um cartão de vidro ---------- */
.split__grid--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.pc { position: relative; margin: 0; perspective: 2400px; }
.tablet { padding: 11px; border-radius: 28px; background: linear-gradient(145deg, #ffffff 0%, #f6edf1 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(214, 31, 105, .08), 0 70px 100px -60px rgba(176, 21, 79, .55), 0 26px 40px -32px rgba(0, 0, 0, .25); }
.pc .tablet { transform: rotateY(12deg) rotateX(6deg) rotateZ(-1deg); }
.tablet__crop { display: block; overflow: hidden; border-radius: 19px; }
.tablet__crop img { display: block; width: 100%; height: auto; }
.chip--pc { position: absolute; z-index: 2; left: -4%; bottom: 10%; display: grid; gap: 2px; width: 200px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: var(--glass-edge), 0 22px 44px -26px rgba(176, 21, 79, .55); }
.chip--pc small { color: var(--gray); font-size: .78rem; }
.chip--pc .chip__big { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chip--pc .chip__bar { height: 6px; margin-top: 6px; border-radius: 6px; background: var(--pink-soft); overflow: hidden; }
.chip--pc .chip__bar i { display: block; height: 100%; width: 72%; border-radius: 6px; background: linear-gradient(90deg, #ec5a97, var(--pink)); }
.pc figcaption { margin-top: 22px; color: var(--gray); font-size: .78rem; }

/* ---------- Link de agendamento ---------- */
.flow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.flow li { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--line); font-size: .92rem; font-weight: 600; }
.flow span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-dark); font-size: .78rem; font-weight: 800; }
.booking__device { position: relative; display: grid; place-items: center; padding: 20px 0; }
.plinth { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(255, 232, 240, .85) 46%, rgba(255, 232, 240, 0) 70%); }
.plinth::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(214, 31, 105, .25); }

/* celular desenhado */
.iphone { --w: 320px; position: relative; width: var(--w); aspect-ratio: 390 / 844; padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .165); background: #000; box-shadow: inset 0 0 0 calc(var(--w) * .006) #3a3a3a, 0 50px 90px -40px rgba(0, 0, 0, .45), 0 18px 36px -24px rgba(0, 0, 0, .35); flex: none; }
.iphone__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .132); background: #fff; color: var(--black); }
.iphone__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone__island { position: absolute; z-index: 4; top: calc(var(--w) * .058); left: 50%; width: calc(var(--w) * .29); height: calc(var(--w) * .085); transform: translateX(-50%); background: #000; border-radius: 99px; }
.ios-status { display: flex; justify-content: space-between; align-items: center; height: calc(var(--w) * .145); padding: calc(var(--w) * .02) calc(var(--w) * .085) 0; font-size: calc(var(--w) * .044); font-weight: 600; font-variant-numeric: tabular-nums; }
.ios-status__icons { display: inline-flex; gap: 5px; align-items: center; }
.ios-status .sig { width: 16px; height: 10px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 4.3px, currentColor 4.3px 7.3px, transparent 7.3px 8.6px, currentColor 8.6px 11.6px, transparent 11.6px 12.9px, currentColor 12.9px 16px); clip-path: polygon(0 70%, 25% 70%, 25% 45%, 52% 45%, 52% 22%, 78% 22%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.ios-status .bat { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: .9; }
.ios-status .bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.iphone--live { --w: 340px; padding: calc(var(--w) * .054); border-radius: calc(var(--w) * .18); background: linear-gradient(90deg, #8f9196 0, #f7f8fa 1.2%, #c4c6cb 3.2%, #e6e7ea 8%, #e6e7ea 92%, #bfc1c6 96.8%, #f4f5f7 98.8%, #8a8c91 100%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .95), inset 0 -2px 2px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(0, 0, 0, .2), 0 70px 100px -55px rgba(176, 21, 79, .55), 0 26px 40px -30px rgba(0, 0, 0, .35); transform: perspective(1800px) rotateY(-9deg) rotateX(3deg); transition: transform 700ms var(--spring); }
.iphone--live .iphone__screen { border-radius: calc(var(--w) * .126); box-shadow: 0 0 0 calc(var(--w) * .026) #000; }
.iphone--live .iphone__screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 26%); }
.iphone--live:hover, .iphone--live:focus-within { transform: perspective(1800px) rotateY(0deg) rotateX(0deg); }
.phone { padding: 4px 18px 22px; }
.phone__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.phone__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; font-weight: 800; }
.phone__studio { font-weight: 800; }
.phone__url { font-size: .82rem; color: var(--gray); }
.phone__progress { height: 4px; background: var(--line); border-radius: 99px; margin-bottom: 22px; overflow: hidden; }
.phone__progress span { display: block; height: 100%; background: var(--pink); transform: scaleX(var(--p, .25)); transform-origin: left; transition: transform 500ms var(--spring); }
.phone__q { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.phone.is-live-step .phone__step:not([hidden]) { animation: stepx 500ms var(--spring); }
.phone.is-live-step[data-dir="back"] .phone__step:not([hidden]) { --dir: -1; }
@keyframes stepx { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 16px)); } }
.opt { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; min-height: 56px; transition: border-color 160ms var(--ease-out), transform 100ms var(--ease-out); }
.opt small { display: block; color: var(--gray); font-size: .82rem; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot, .day { min-height: 50px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; transition: border-color 160ms var(--ease-out), transform 100ms var(--ease-out); }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; font-size: 1.1rem; }
.day small { font-size: .72rem; color: var(--gray); font-weight: 500; }
.slot:disabled, .day:disabled { color: #767676; text-decoration: line-through; cursor: not-allowed; background: #fafafa; }
.opt:active, .slot:active:not(:disabled), .day:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .opt:hover, .slot:hover:not(:disabled), .day:hover:not(:disabled) { border-color: var(--pink); } }
.back { margin-top: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
.phone__summary { color: var(--gray); }
.phone__confirm, .phone__done { text-align: center; }
.phone__confirm .phone__summary { margin: 0 auto 18px; }
/* segurar para confirmar: o círculo rosa fecha enquanto ela segura */
.hold { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 28px 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; border-radius: 20px; }
.hold__ring { position: relative; display: grid; place-items: center; width: 84px; height: 84px; transition: transform 160ms var(--ease-out); }
.hold__ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); stroke: var(--line); stroke-width: 5; }
.hold__fill { stroke: var(--pink); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hold, 0)); }
.hold__check { width: 30px; height: 30px; color: var(--pink); stroke-width: 3; opacity: calc(.3 + .7 * var(--hold, 0)); }
.hold.is-holding .hold__ring { transform: scale(.95); }
.hold__label { font-weight: 800; }
.hold__hint { font-size: .85rem; color: var(--gray); margin: 2px auto 0; }
.phone__done:not([hidden]) > * { animation: rise 520ms var(--ease-out) both; }
.phone__done:not([hidden]) > :nth-child(2) { animation-delay: 110ms; }
.phone__done:not([hidden]) > :nth-child(3) { animation-delay: 220ms; }
.phone__done:not([hidden]) > :nth-child(4) { animation-delay: 330ms; }
.phone__done { padding-top: 24px; outline: none; }
.phone__done .phone__summary { margin-inline: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.check { display: block; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--pink); position: relative; }
.check::after { content: ""; position: absolute; left: 22px; top: 16px; width: 14px; height: 26px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }

/* ---------- Recursos: uma placa só, dividida por linhas finas ---------- */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -60px rgba(176, 21, 79, .45); }
.feat { padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat:nth-child(3n) { border-right: 0; }
.feat:nth-last-child(-n + 3) { border-bottom: 0; }
.feat__i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: var(--pink); background: linear-gradient(160deg, #fff 0%, var(--pink-soft) 100%); box-shadow: inset 0 0 0 1px var(--pink-line), 0 12px 22px -14px rgba(214, 31, 105, .55); }
.feat__i svg { width: 23px; height: 23px; }
.feat h3 { margin-top: 20px; font-size: 1.12rem; letter-spacing: -0.02em; }
.feat p { margin-top: 6px; color: var(--gray); font-size: .95rem; }

/* ---------- Thay: painéis de vidro sobre um fundo claro em degradê ---------- */
.thay { overflow: hidden; }
.thay::before { content: ""; position: absolute; inset: 8% -10%; z-index: -1; background: radial-gradient(34% 40% at 22% 64%, rgba(255, 184, 214, .55), transparent 70%), radial-gradient(30% 36% at 80% 50%, rgba(233, 200, 255, .38), transparent 70%), radial-gradient(40% 40% at 55% 88%, rgba(255, 214, 231, .6), transparent 72%); filter: blur(20px); }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border-radius: 26px; box-shadow: var(--glass-edge), var(--glass-shadow); }
.thay__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.thay__chat { display: flex; flex-direction: column; padding: 20px; }
.thay__bar { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--pink-line); }
.thay__bar small { display: block; color: var(--gray); font-size: .8rem; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px 0; }
.bub { max-width: 78%; padding: 11px 15px; border-radius: 18px; font-size: .98rem; line-height: 1.4; }
.bub--me { align-self: flex-end; background: var(--pink); color: #fff; border-bottom-right-radius: 6px; }
.bub--thay { align-self: flex-start; background: rgba(255, 255, 255, .9); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px var(--pink-line); }
.js .chat .bub { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 360ms var(--ease-out), transform 520ms var(--spring); }
.js .chat.in .bub { opacity: 1; transform: none; }
.js .chat.in .bub:nth-child(2) { transition-delay: 700ms; }
.js .chat.in .bub:nth-child(3) { transition-delay: 1500ms; }
.js .chat.in .bub:nth-child(4) { transition-delay: 2200ms; }
.thay__input { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 6px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--gray); font-size: .9rem; }
.thay__input i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); color: #fff; }
.thay__input svg { width: 18px; height: 18px; }
.thay__ring { padding: 26px 24px; }
.thay__ring h3 { font-size: 1.08rem; letter-spacing: -0.02em; }
.ring2 { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 22px auto 0; }
.ring2 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring2__c { fill: none; stroke: rgba(214, 31, 105, .38); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1500ms var(--ease-out); }
.js .thay__ring:not(.in) .ring2__c { stroke-dashoffset: 1; }
.ring2 .tgem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ring2__n { position: absolute; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--pink-line), 0 10px 20px -14px rgba(176, 21, 79, .5); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.ring2__n--t { left: 50%; top: 13.3%; }
.ring2__n--r { left: 86.7%; top: 50%; }
.ring2__n--b { left: 50%; top: 86.7%; }
.ring2__n--l { left: 13.3%; top: 50%; }
/* a joia T: vidro rosa com brilho em cima */
.tgem { position: relative; flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 30px; color: #fff; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(150deg, #ff7eb0 0%, #e8327f 45%, #b0154f 100%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .65), inset 0 -12px 20px rgba(120, 6, 50, .45), inset 0 14px 24px rgba(255, 255, 255, .22), 0 26px 44px -20px rgba(176, 21, 79, .75); text-shadow: 0 2px 8px rgba(120, 6, 50, .35); overflow: hidden; }
.tgem::before { content: ""; position: absolute; left: 12%; top: 7%; width: 64%; height: 34%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.tgem--sm { width: 42px; height: 42px; border-radius: 14px; font-size: 1.1rem; }
.tgem--xs { width: 40px; height: 40px; border-radius: 13px; font-size: 1.05rem; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -6px 10px rgba(120, 6, 50, .35); }

/* ---------- Torneios: painel preto em diagonal e as telas do torneio ao lado ---------- */
.cups { padding-block: clamp(90px, 11vw, 160px); }
.cups__band { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); width: min(1320px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.cups__panel { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 64px) clamp(80px, 9vw, 130px) clamp(40px, 5vw, 64px) clamp(32px, 4.4vw, 60px); border-radius: 30px 0 0 30px; background: var(--black); color: #fff; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.cups__panel h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.cups__panel p { margin-top: 14px; color: rgba(255, 255, 255, .78); max-width: 24ch; }
.cups__panel .ticks { margin-top: 28px; }
.cups__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: center; min-width: 0; margin-left: -12%; padding: 36px 32px 26px 15%; border-radius: 0 30px 30px 0; background: linear-gradient(160deg, #f7f4f5 0%, #fdf0f5 100%); box-shadow: inset 0 0 0 1px var(--line); }
.cup { display: flex; flex-direction: column; gap: 14px; min-height: 236px; padding: 20px 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 40px -30px rgba(0, 0, 0, .3); }
.cup > small { color: var(--gray); font-size: .78rem; font-weight: 600; }
.cup__theme { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.cup__meta { margin-top: auto; color: var(--gray); font-size: .84rem; line-height: 1.45; }
.cup--theme { background: linear-gradient(160deg, #fff 0%, #ffeef5 100%); }
.rank { display: grid; gap: 14px; }
.rank li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.rank b { overflow: hidden; font-size: .84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rank em { color: var(--pink-dark); font-size: .84rem; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank i { grid-column: 2 / -1; height: 5px; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #ec5a97, var(--pink)); }
.selo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, #ff7eb0, var(--pink-dark)); color: #fff; font-size: .72rem; font-weight: 800; }
.seal { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #fff5f9; box-shadow: inset 0 0 0 1px var(--pink-line); }
.seal__av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pink); color: #fff; font-size: .78rem; font-weight: 800; }
.seal b { display: block; font-size: .86rem; }
.seal em { display: block; color: var(--gray); font-size: .72rem; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seal span:last-child { min-width: 0; }
.seal__tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 8px 12px; border-radius: 999px; background: var(--black); color: #fff; font-size: .8rem; font-weight: 700; }
.seal__tag svg { width: 16px; height: 16px; color: #ff7eb0; }
.cups__cap { grid-column: 1 / -1; color: var(--gray); font-size: .78rem; }

/* ---------- Planos ---------- */
.pricing__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 44px; }
.period { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.period button { position: relative; z-index: 1; height: 42px; padding: 0 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; transition: color 220ms var(--ease-out); }
.period button.is-on { color: #fff; }
.period__pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--pill-w, 0); border-radius: 999px; background: var(--black); transform: translateX(var(--pill-x, 0)); }
.period.is-ready .period__pill { transition: transform 520ms var(--spring), width 520ms var(--spring); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: 30px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -56px rgba(176, 21, 79, .5); }
.plan h3 { font-size: 1.5rem; }
.plan__for { margin-top: 6px; color: var(--gray); }
.plan__price { margin-top: 24px; font-size: 1.15rem; font-weight: 700; }
.plan__price span { font-size: clamp(2.8rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.plan__price small { color: var(--gray); font-size: 1rem; font-weight: 500; }
.plan__billed { color: var(--gray); font-size: .86rem; }
.swap { animation: swap 360ms var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }
.plan .ticks { margin: 26px 0 32px; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan--pro { background: var(--black); color: #fff; box-shadow: 0 50px 80px -50px rgba(176, 21, 79, .6); }
.plan--pro .plan__for, .plan--pro .plan__billed, .plan--pro .plan__price small { color: rgba(255, 255, 255, .72); }
.plan--pro .ticks { color: rgba(255, 255, 255, .9); }
.plan--pro .ticks svg { background: var(--pink); color: #fff; }
.plan__tag { position: absolute; top: clamp(28px, 3vw, 40px); right: clamp(28px, 3vw, 40px); padding: 5px 12px; border-radius: 999px; background: var(--pink); color: #fff; font-size: .78rem; font-weight: 700; }
.compare { margin-top: 22px; border-radius: 22px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.compare summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 24px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 22px; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after, .faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform 300ms var(--spring); }
.compare[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.compare__wrap { overflow-x: auto; padding: 0 24px 18px; }
.compare table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; }
.compare th, .compare td { padding: 14px 10px; border-top: 1px solid var(--line); text-align: left; }
.compare thead th { border-top: 0; color: var(--gray); font-size: .82rem; font-weight: 600; }
.compare td { width: 26%; }
.compare tbody th { font-weight: 500; }
.yes, .no { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.yes { background: var(--pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D61F69' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.no { background: linear-gradient(#b5b5b5, #b5b5b5) center / 10px 2px no-repeat; }

/* ---------- Dúvidas ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 40px 24px 0; color: var(--gray); }

/* ---------- Fechamento: contato em vidro e as garantias ---------- */
.final { padding: clamp(60px, 8vw, 120px) 0 clamp(60px, 7vw, 96px); }
.final__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 38px; background: radial-gradient(60% 80% at 92% 90%, rgba(255, 200, 224, .7), transparent 70%), linear-gradient(135deg, #fff7fa 0%, #ffeaf2 60%, #fde3ee 100%); box-shadow: var(--glass-edge), 0 60px 100px -70px rgba(176, 21, 79, .6); }
.final__copy h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.form { padding: 24px; }
.form__fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 600; }
.field input { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--pink-line); border-radius: 14px; background: rgba(255, 255, 255, .92); font-size: 16px; transition: border-color 150ms var(--ease-out); }
.field input:focus-visible { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(214, 31, 105, .15); }
.field input[aria-invalid="true"] { border-color: var(--pink-dark); }
.form__error { color: var(--pink-dark); font-size: .88rem; font-weight: 600; }
.form__done { outline: none; text-align: center; }
.form__done .check { margin-bottom: 14px; }
.form__done-title { font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; }
.form__done p { margin-inline: auto; color: var(--ink-2); font-size: .92rem; }
.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 52px); }
.promise li { display: flex; align-items: center; gap: 14px; padding: 8px 22px; border-left: 1px solid var(--line); }
.promise li:first-child { border-left: 0; padding-left: 0; }
.promise svg { width: 28px; height: 28px; stroke-width: 1.6; }
.promise b { display: block; font-size: .95rem; letter-spacing: -0.01em; }
.promise span { color: var(--gray); font-size: .84rem; line-height: 1.35; }

/* ---------- Rodapé ---------- */
.footer { padding: 56px 0 36px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .7); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 32px; }
.footer__brand p { margin-top: 12px; color: var(--gray); max-width: 36ch; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col p { color: var(--gray); font-size: .85rem; font-weight: 600; }
.footer__col a { text-decoration: none; font-weight: 500; }
@media (hover: hover) { .footer__col a:hover { color: var(--pink-dark); } }
.footer__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--gray); font-size: .82rem; }

/* =====================================================================
   Telas menores
   ===================================================================== */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; }
  .specs__bar { grid-template-columns: 1fr; }
  .specs__label { clip-path: none; padding: 18px 24px; flex-direction: row; align-items: center; justify-content: space-between; }
  .cups__band { grid-template-columns: 1fr; }
  .cups__panel { border-radius: 30px 30px 0 0; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); padding: 44px 32px 72px; }
  .cups__cards { margin: -46px 0 0; padding: 66px 24px 24px; border-radius: 0 0 30px 30px; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .nav__login { margin-left: auto; }
  .split__grid { grid-template-columns: 1fr; }
  .night { max-width: 560px; width: 100%; margin-inline: auto; }
  .specs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specs__list > div:nth-child(4) { border-left: 0; }
  .specs__list > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .feats { grid-template-columns: 1fr 1fr; }
  .feat:nth-child(3n) { border-right: 1px solid var(--line); }
  .feat:nth-child(2n) { border-right: 0; }
  .feat:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .feat:nth-last-child(-n + 2) { border-bottom: 0; }
  .thay__grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .final__panel { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .promise li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .sec { padding-block: clamp(84px, 20vw, 120px); }
  .nav { top: 10px; }
  .nav__inner { height: 58px; padding-left: 18px; gap: 10px; }
  .nav__login { display: none; }
  .nav__cta { min-height: 42px; padding: 0 16px; font-size: .92rem; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.1rem); }
  .hero__actions .btn { width: 100%; }
  .made__list { justify-content: flex-start; gap: 10px 22px; }
  .specs__label { flex-direction: column; align-items: flex-start; gap: 10px; }
  .specs__list { grid-template-columns: 1fr 1fr; }
  .specs__list > div { border-left: 0; border-top: 1px solid var(--line); }
  .specs__list > div:nth-child(-n + 2) { border-top: 0; }
  .specs__list > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .night__phone { width: 42%; transform: translateX(-46%); }
  .pc .tablet { transform: none; padding: 6px; border-radius: 18px; }
  .tablet__crop { aspect-ratio: 1 / 1; border-radius: 12px; }
  .tablet__crop img { width: 270%; max-width: none; margin: -9% 0 0 -12%; }
  .chip--pc { left: auto; right: -2%; bottom: -8%; width: 160px; padding: 10px 12px; }
  .chip--pc .chip__big { font-size: 1.2rem; }
  .night__label { left: 54%; top: 26%; }
  .iphone--live { --w: min(330px, calc(100vw - 40px)); transform: none; }
  .feats { grid-template-columns: 1fr; }
  .feat { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .feat:last-child { border-bottom: 0 !important; }
  .cups__cards { grid-template-columns: 1fr; }
  .cup { min-height: 0; }
  .cup__meta { margin-top: 6px; }
  .seal__tag { margin-top: 4px; }
  .final__panel { padding: 28px 20px; border-radius: 28px; }
  .form { padding: 18px; }
  .promise { grid-template-columns: 1fr; }
  .promise li { border-left: 0 !important; padding-left: 0 !important; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .btn:active, .opt:active, .slot:active, .day:active { transform: none; }
  .iphone--live, .iphone--live:hover, .iphone--live:focus-within { transform: none; }
  .hold { touch-action: manipulation; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav__inner, .glass, .chip--pc, .pop__i, .steps__b, .news, .btn--glass, .specs__bar, .feats, .plan { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .plan--pro { background: var(--black); }
}
@media (prefers-contrast: more) {
  .made__list li, .lead, .feat p { color: #2a2a2a; }
  .glass, .chip--pc, .pop__i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
}

/* =====================================================================
   Celulares iguais à página de agendamento de verdade (10/11/2026)
   A mesma ordem da página da cliente: capa com o leque de unhas, o estúdio, passo X de 3,
   o título, e tudo alinhado na mesma margem da esquerda.
   ===================================================================== */
/* celular do topo: tela 1, Horário marcado */
.scr--done { background: #fff; }
.sd__capa { position: relative; flex: none; height: 30cqw; margin-top: 1cqw; overflow: hidden; border-radius: 6cqw; background: #fdf2f8; }
.sd__capa img { position: absolute; left: 50%; bottom: -14%; width: 120%; height: auto; max-width: none; transform: translateX(-46%); }
.sd__top { position: relative; flex-direction: column; align-items: flex-start; gap: 2cqw; margin-top: -7cqw; padding-left: 1cqw; }
.scr--done .sav { width: 14cqw; height: 14cqw; font-size: 4cqw; box-shadow: 0 0 0 1.2cqw #fff; }
.scr--done .sd__top > span:last-child { padding-left: .4cqw; }
.sd__check { width: 13cqw; height: 13cqw; margin: 5cqw 0 0; box-shadow: none; }
.sd__check svg { width: 7.4cqw; height: 7.4cqw; }
.sd__t { margin: 3cqw 0 0; font-size: 7.4cqw; text-align: left; }
.sd__s { margin: .6cqw 0 0; font-size: 3.8cqw; text-align: left; }
.sd__card { margin-top: 4cqw; padding: 0 4.4cqw; background: #fdf2f8; box-shadow: none; }
.sd__card div { border-top-color: #fbcfe8; padding: 3cqw 0; }
.sd__card dt { font-size: 3.3cqw; }
.sd__card dd { font-size: 3.5cqw; }
.scr--done .sbtn { height: 12cqw; margin: 5cqw 0 0; font-size: 3.9cqw; }
.scr--done .sbtn--linha { margin: 2.4cqw 0 0; background: #fff; color: var(--pink-dark); box-shadow: inset 0 0 0 1.5px var(--pink); }
.scr--done .sd__note { margin: 5cqw 0 0; text-align: left; }

/* celular de testar */
.phone { padding: 2px 16px 20px; }
.ph-capa { position: relative; height: 92px; overflow: hidden; border-radius: 18px; background: #fdf2f8; }
.ph-capa img { position: absolute; left: 50%; bottom: -14%; width: 120%; height: auto; max-width: none; transform: translateX(-46%); }
.ph-est { padding: 0 2px; }
.ph-av { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -25px; position: relative; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 0 0 4px #fff; }
.ph-nome { margin-top: 6px; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.ph-com { color: var(--gray); font-size: .8rem; }
.ph-topo { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 12px 0 6px; }
.ph-n { color: var(--gray); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-voltar { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 12px 0 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 600; }
.ph-voltar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phone .phone__q { margin-bottom: 10px; font-size: 1.1rem; letter-spacing: -0.03em; }
.ph-svc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 58px; margin-bottom: 8px; padding: 9px 14px; border: 1px solid var(--pink-line); border-radius: 14px; background: #fff; text-align: left; transition: border-color 150ms var(--ease-out), transform 100ms var(--ease-out); }
.ph-svc__n { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.ph-svc__m { display: grid; justify-items: end; flex: none; font-variant-numeric: tabular-nums; }
.ph-svc__m small { color: var(--gray); font-size: .74rem; }
.ph-svc__m b { font-size: .88rem; }
.ph-dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ph-dia { display: grid; justify-items: center; gap: 0; padding: 7px 2px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-variant-numeric: tabular-nums; transition: border-color 150ms var(--ease-out); }
.ph-dia small { color: var(--gray); font-size: .64rem; font-weight: 600; }
.ph-dia b { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.ph-dia em { color: var(--pink-dark); font-size: .56rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.ph-dia.is-on { border-color: var(--pink); background: var(--pink); color: #fff; }
.ph-dia.is-on small, .ph-dia.is-on em { color: #fff; }
.ph-dia.is-off, .ph-dia:disabled { background: #faf8f9; cursor: not-allowed; }
.ph-dia:disabled b, .ph-dia:disabled em { color: #8a8a8a; }
.ph-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ph-hora { min-height: 38px; border: 1px solid var(--pink-line); border-radius: 999px; background: #fff; font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; transition: border-color 150ms var(--ease-out); }
.ph-hora:disabled { border-color: var(--line); background: #faf8f9; color: #8a8a8a; text-decoration: line-through; cursor: not-allowed; }
.ph-hora.is-on { border-color: var(--pink); background: var(--pink); color: #fff; }
.ph-btn { display: grid; place-items: center; width: 100%; min-height: 44px; margin-top: 14px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 700; font-size: .92rem; transition: opacity 150ms var(--ease-out), transform 100ms var(--ease-out); }
.ph-btn:disabled { opacity: .45; cursor: not-allowed; }
.ph-resumo { display: grid; padding: 0 14px; border-radius: 14px; background: #fdf2f8; }
.ph-resumo div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 8px 0; }
.ph-resumo div + div { border-top: 1px solid #fbcfe8; }
.ph-resumo dt { color: var(--gray); font-size: .74rem; }
.ph-resumo dd { font-size: .8rem; font-weight: 600; }
.ph-campo { display: grid; gap: 4px; margin-top: 10px; }
.ph-campo span { font-size: .74rem; font-weight: 600; }
.ph-campo input { height: 38px; padding: 0 12px; border: 1px solid var(--pink-line); border-radius: 10px; background: #fff; font: inherit; font-size: .88rem; pointer-events: none; }
.phone__done { text-align: left; padding-top: 14px; }
.ph-ok { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: var(--pink); color: #fff; }
.ph-ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.phone__done .phone__q { margin-bottom: 2px; }
.ph-ate { margin-bottom: 12px; color: var(--gray); font-size: .86rem; }
.ph-btn--falso { cursor: default; }
.ph-link { display: block; margin: 10px auto 0; padding: 6px 4px; color: var(--pink-dark); font-weight: 700; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; }
.ph-svc:active, .ph-dia:active:not(:disabled), .ph-hora:active:not(:disabled), .ph-btn:active:not(:disabled), .ph-voltar:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .ph-svc:hover, .ph-dia:hover:not(:disabled):not(.is-on), .ph-hora:hover:not(:disabled):not(.is-on) { border-color: var(--pink); }
  .ph-voltar:hover { background: #fdf2f8; }
}
@media (prefers-reduced-motion: reduce) { .ph-svc:active, .ph-dia:active, .ph-hora:active, .ph-btn:active, .ph-voltar:active { transform: none; } }

/* a dor: a frase que fecha a lista */
.pains__fim { margin-top: 22px; max-width: 40ch; font-weight: 600; color: var(--pink-dark); }

/* torneios: quatro cartões em duas colunas, com os prêmios */
.cups__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cup { min-height: 200px; }
.prizes { display: grid; gap: 12px; }
.prizes li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.prize__i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff0f6; color: var(--pink); }
.prize__i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prizes b { display: block; font-size: .9rem; line-height: 1.2; }
.prizes em { display: block; color: var(--gray); font-size: .76rem; font-style: normal; }
@media (max-width: 720px) { .cups__cards { grid-template-columns: 1fr; } }

/* área de membros: o celular da cliente com cupom e dica (mesmo desenho da página de verdade) */
.iphone--membros .phone { padding-bottom: 18px; }
.ph-topo .ph-oi { margin: 0; }
.iphone--membros .ph-voltar { height: 30px; }
.ph-sub { margin: 12px 0 8px; font-size: .84rem; font-weight: 800; letter-spacing: -0.01em; }
.ph-cupom { display: grid; gap: 1px; padding: 12px 14px; border: 1.5px dashed #f9c3dc; border-radius: 14px; background: #fdf2f8; }
.ph-cupom b { font-size: .9rem; }
.ph-cupom small { color: var(--pink-dark); font-size: .7rem; font-weight: 700; }
.ph-cupom__cod { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ph-cupom__cod code { padding: 5px 10px; border-radius: 8px; background: #fff; font-family: var(--font); font-size: .82rem; font-weight: 800; letter-spacing: .06em; box-shadow: inset 0 0 0 1px var(--pink-line); }
.ph-cupom__cod i { padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pink); color: var(--pink-dark); font-size: .7rem; font-style: normal; font-weight: 700; }
.ph-dica { display: grid; gap: 2px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ph-dica b { font-size: .84rem; }
.ph-dica span { color: #3a3a3a; font-size: .76rem; line-height: 1.4; }
.iphone--membros .ph-btn { margin-top: 12px; }

/* torneios: como funciona, em quatro passos */
.cups__como { margin-top: clamp(40px, 5vw, 64px); }
.cups__como-t { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.035em; }
.cups__passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 0; list-style: none; }
.cups__passos li { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cups__n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; background: var(--pink); color: #fff; font-size: .85rem; font-weight: 800; }
.cups__passos b { font-size: 1.02rem; letter-spacing: -0.02em; }
.cups__passos p { color: var(--gray); font-size: .92rem; }
.cups__inc { margin-top: 18px; font-weight: 700; color: var(--pink-dark); }
@media (max-width: 960px) { .cups__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cups__passos { grid-template-columns: 1fr; } }
.split__copy .lead + .ticks { margin-top: 24px; }

/* as abas do app no celular da área de membros */
.iphone--membros .iphone__screen { display: flex; flex-direction: column; }
.iphone--membros .phone { flex: 1; overflow: hidden; }
.ph-abas { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 4px 14px; border-top: 1px solid var(--line); background: #fff; color: #8a8a8a; font-size: .58rem; font-weight: 600; text-align: center; }
.ph-abas .is-on { color: var(--pink); }
.ph-abas__mais { display: grid; place-items: center; width: 34px; height: 34px; margin: -14px auto 0; border-radius: 50%; background: var(--pink); color: #fff; font-size: 1.1rem; font-weight: 700; }