/* =================================================================
   Ondieh: landing page
   HTML/CSS/JS puros, mobile primeiro.

   Do design system do app vêm só a identidade: cores da marca
   (--ondieh-*), escala roxa e rosa, gradientes, fonte Isidora e logos
   (design-system/reference/styles.css). Escala de tipo, espaço, raios,
   sombras e movimento abaixo são do site: a página é de captação, não
   uma tela do app, e por isso tem escala de display, ângulos e
   movimento autoral (direção registrada em .impeccable/surfaces/).
   ================================================================= */

/* ----------------------------- Tokens ---------------------------- */
:root {
  --fundo: var(--ondieh-cream);
  --fundo-alto: var(--ondieh-white);
  --fundo-suave: #F8E7C8;
  --tinta: var(--ondieh-indigo);
  --tinta-2: #4E4468;
  --linha: rgba(41, 21, 92, .12);
  --linha-forte: rgba(41, 21, 92, .24);
  /* Contorno de campo, chip e caixa de marcar: 3:1 contra o cartão e o fundo (WCAG 1.4.11) */
  --borda-campo: #8A82A0;
  /* Anel de foco: 3:1 ou mais contra o que estiver em volta. Seções escuras trocam a cor */
  --foco: var(--ondieh-purple);
  --sucesso: #17804A;
  --erro: #C0242F;
  --aviso: #A96A06;
  --verde-conversa: #DCF8C6;
  --brilho-1: rgba(225, 29, 111, .16);
  --brilho-2: rgba(130, 10, 209, .18);

  --sombra-1: 0 1px 2px rgba(41, 21, 92, .06), 0 8px 24px rgba(41, 21, 92, .08);
  --sombra-2: 0 2px 6px rgba(41, 21, 92, .06), 0 28px 64px rgba(41, 21, 92, .18);
  --sombra-marca: 0 12px 28px rgba(130, 10, 209, .32);
  --sombra-marca-forte: 0 18px 36px rgba(130, 10, 209, .4);

  --raio-s: 12px;
  --raio-m: 18px;
  --raio-l: 28px;
  --raio-xl: 44px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --rapido: 180ms;
  --medio: 360ms;
  --lento: 700ms;
  --entrada: 900ms;

  --caixa: 1200px;
  --respiro: clamp(20px, 4vw, 48px);
  --secao: clamp(80px, 10vw, 140px);

  --t-display: clamp(2.6rem, 1.3rem + 4vw, 4.6rem);
  --t-h2: clamp(2.1rem, 1.25rem + 3.2vw, 3.9rem);
  --t-h3: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem);
  --t-lead: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  --t-corpo: 1.0625rem;
  --t-peq: .9375rem;
  --t-mini: .8125rem;
}

/* Celular: a mesma página numa escala menor (o desktop fica como está) */
@media (max-width: 599px) {
  :root {
    --secao: 72px;
    --t-display: clamp(2rem, 1.2rem + 3.6vw, 2.4rem);
    --t-h2: clamp(1.6rem, 1.1rem + 2.4vw, 1.95rem);
    --t-h3: 1.25rem;
    --t-lead: 1rem;
    --t-corpo: 1rem;
    --t-peq: .875rem;
  }
}

[data-theme="dark"] {
  --fundo: var(--ondieh-black);
  --fundo-alto: #1A1720;
  --fundo-suave: #221F28;
  --tinta: #F4F2F7;
  --tinta-2: #BDB6CB;
  --linha: rgba(244, 242, 247, .12);
  --linha-forte: rgba(244, 242, 247, .26);
  --borda-campo: #7A7390;
  --foco: var(--purple-300);
  --sucesso: #4CC985;
  --erro: #F0727B;
  --aviso: #F0B14A;
  --brilho-1: rgba(225, 29, 111, .22);
  --brilho-2: rgba(130, 10, 209, .32);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .3), 0 28px 64px rgba(0, 0, 0, .55);
  /* No escuro a sombra da marca vira neutra: halo roxo em fundo escuro é brilho, não profundidade */
  --sombra-marca: 0 12px 28px rgba(0, 0, 0, .5);
  --sombra-marca-forte: 0 18px 36px rgba(0, 0, 0, .55);
}

/* ------------------------------ Base ----------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  scrollbar-color: var(--linha-forte) var(--fundo);
  background: var(--fundo);
  /* A faixa inclinada e os palcos passam da borda; nada de rolagem lateral */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-corpo);
  line-height: 1.5;
  caret-color: var(--ondieh-purple);
  overflow-x: clip;
  transition: background-color var(--medio) var(--ease), color var(--medio) var(--ease);
}

::selection { background: var(--ondieh-pink); color: #fff; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

[data-theme="dark"] .so-claro,
:root:not([data-theme="dark"]) .so-escuro { display: none; }

[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 8px;
}

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

.pular {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--tinta); color: var(--fundo); font-weight: 700; text-decoration: none;
}
.pular:focus { top: 16px; color: var(--fundo); }
.pular:focus-visible { border-radius: 999px; }

/* ------------------------------ Botões --------------------------- */
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-peq);
  line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition:
    transform var(--rapido) var(--ease),
    box-shadow var(--medio) var(--ease),
    background-color var(--medio) var(--ease),
    color var(--medio) var(--ease),
    border-color var(--medio) var(--ease);
}
.botao .icone { transition: transform var(--medio) var(--ease); }
.botao:active { transform: scale(.97); }
.botao--grande { min-height: 58px; padding: 0 28px; font-size: var(--t-corpo); }
.botao--largo { width: 100%; }
.botao--topo { min-height: 44px; padding: 0 18px; font-size: var(--t-mini); }

.botao--primario { background: var(--ondieh-gradient); color: #fff; box-shadow: var(--sombra-marca); border: 0; }
.botao--primario:hover, .botao--primario:focus-visible { color: #fff; }
/* Brilho que atravessa o botão no hover */
.botao--primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
}

.botao--escuro { background: var(--tinta); color: var(--fundo); }
.botao--escuro:hover { color: var(--fundo); }
.botao--contorno { border-color: var(--tinta); color: var(--tinta); }
.botao--contorno:hover { background: var(--tinta); color: var(--fundo); }
.botao--claro { background: #fff; color: var(--ondieh-indigo); }
.botao--claro:hover { color: var(--ondieh-indigo); }

@media (hover: hover) {
  .botao:hover { transform: translateY(-2px); }
  .botao:active { transform: translateY(0) scale(.97); }
  .botao:hover .icone { transform: translateX(3px); }
  .botao--contorno:hover .icone { transform: translateY(3px); }
  .botao--primario:hover { box-shadow: var(--sombra-marca-forte); }
  .botao--primario:hover::after { transform: translateX(120%); transition: transform 900ms var(--ease); }
  .botao--escuro:hover, .botao--claro:hover { box-shadow: var(--sombra-1); }
}

.botao[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.botao[aria-busy="true"] { cursor: progress; }
.botao__giro { display: none; }
.botao[aria-busy="true"] .botao__giro {
  display: block; width: 20px; height: 20px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: giro 700ms linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--fundo-alto); color: var(--tinta);
  cursor: pointer;
  transition: transform var(--rapido) var(--ease), background-color var(--medio) var(--ease), color var(--medio) var(--ease), border-color var(--medio) var(--ease);
}
.botao-icone:active { transform: scale(.94); }
.botao-icone:focus-visible { border-radius: 50%; }
@media (hover: hover) { .botao-icone:hover { transform: rotate(-12deg); } }

/* Selo em pílula */
.selo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--fundo-alto); border: 1px solid var(--linha);
  font-size: var(--t-mini); font-weight: 700; color: var(--tinta);
  box-shadow: var(--sombra-1);
}
.selo__ponto { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--ondieh-gradient); }
.selo__ponto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--ondieh-pink); opacity: 0;
  animation: pulso 2.4s var(--ease) infinite;
}
@keyframes pulso { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.selo--claro { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }

.cartao { background: var(--fundo-alto); border: 1px solid var(--linha); border-radius: var(--raio-l); box-shadow: var(--sombra-2); }

/* Avatar redondo: iniciais agora, foto quando houver */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cor, var(--ondieh-purple)) center/cover no-repeat;
  border: 3px solid var(--fundo-alto);
  color: #fff; font-size: var(--t-mini); font-weight: 700;
}
.avatar.com-foto { color: transparent; }

/* Balão de conversa */
.balao {
  display: inline-flex; flex-direction: column;
  padding: 10px 16px 11px; border-radius: 18px 18px 18px 6px;
  background: #fff; color: #17141C;
  font-size: var(--t-peq); font-weight: 700; line-height: 1.25;
  box-shadow: var(--sombra-1);
}
.balao--verde { background: var(--verde-conversa); }
.balao__quem { font-size: 11px; font-weight: 700; color: var(--ondieh-purple); margin-bottom: 2px; }

.carimbo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  background: var(--ondieh-gradient); color: #fff;
  font-weight: 700; font-size: var(--t-peq); white-space: nowrap;
  box-shadow: var(--sombra-marca);
}

/* ------------------------------ Header --------------------------- */
.topo { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; padding: 0 12px; pointer-events: none; }
.topo__pilula {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  max-width: var(--caixa); height: 64px; margin: 0 auto;
  padding: 0 10px 0 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--fundo-alto) 70%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--linha);
  transition: box-shadow var(--medio) var(--ease), background-color var(--medio) var(--ease), height var(--medio) var(--ease);
}
.topo.rolou .topo__pilula { box-shadow: var(--sombra-1); height: 58px; background: color-mix(in srgb, var(--fundo-alto) 86%, transparent); }
.topo__marca { display: flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 999px; text-decoration: none; }
.topo__simbolo { height: 34px; width: auto; transition: transform var(--lento) var(--ease); }
.topo__nome { height: 21px; width: auto; }
@media (hover: hover) { .topo__marca:hover .topo__simbolo { transform: rotate(-10deg) scale(1.06); } }
.topo__nav { display: none; }
.topo__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }

@media (max-width: 359px) {
  .topo__nome { display: none !important; }
}
@media (min-width: 900px) {
  .topo__nav { display: flex; gap: 2px; margin-left: auto; }
  .topo__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 999px; font-size: var(--t-peq); font-weight: 700; text-decoration: none;
    transition: background-color var(--rapido) var(--ease);
  }
  .topo__nav a:hover { background: var(--linha); }
  .topo__nav a:focus-visible { border-radius: 999px; }
  .topo__acoes { margin-left: 12px; }
}

/* ------------------------------- Hero ---------------------------- */
.hero {
  position: relative;
  padding: 116px 0 clamp(72px, 9vw, 120px);
  background:
    radial-gradient(60% 55% at 8% 4%, var(--brilho-1), transparent 70%),
    radial-gradient(55% 60% at 92% 30%, var(--brilho-2), transparent 70%);
}
.hero__grade { display: grid; gap: clamp(56px, 8vw, 72px); align-items: center; }
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

.hero__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-display); line-height: .98; letter-spacing: -.035em;
}
.hero__titulo .linha { display: block; overflow: hidden; padding: 0 .04em .08em 0; margin-bottom: -.08em; }
.hero__titulo .entra-linha { display: inline-block; }

/* Sublinhado de marca, inclinado, atrás da palavra */
.marcador { position: relative; z-index: 0; white-space: nowrap; }
.marcador::before {
  content: ""; position: absolute; z-index: -1;
  left: -.06em; right: -.08em; bottom: .06em; height: .34em;
  border-radius: .2em; background: var(--ondieh-gradient); opacity: .5;
  transform: rotate(-2deg); transform-origin: left center;
}
/* No claro a barra fica mais leve: o índigo da palavra mantém 3:1 sobre a ponta roxa.
   No escuro a palavra é clara e a barra pode ir mais forte. */
[data-theme="dark"] .marcador::before { opacity: .85; }

.hero__sub { font-size: var(--t-lead); color: var(--tinta-2); max-width: 32em; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Palco do convite: camadas em 3D que seguem o ponteiro */
.palco { position: relative; width: 100%; max-width: 620px; margin: 0 auto; container-type: inline-size; }
.palco__cena {
  position: relative; aspect-ratio: 1 / 1.02;
  transform-style: preserve-3d;
}
.palco__cena > .camada { position: absolute; transform: translateZ(calc(var(--z) * 1px)); }
/* perspective() no próprio transform: sem ela o giro vira só um achatamento lateral */
.palco__cena[data-inclinar] { transform: perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 600ms var(--ease); }

.palco__forma {
  inset: 9% 4% 6% 14%;
  border-radius: var(--raio-xl);
  background: var(--ondieh-gradient-diagonal);
  rotate: -7deg;
  box-shadow: 0 30px 60px rgba(15, 13, 19, .22);
}
/* Textura de pontos sutil sobre a forma */
.palco__forma::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask: linear-gradient(135deg, #000 10%, transparent 70%);
  mask: linear-gradient(135deg, #000 10%, transparent 70%);
}

.palco__fone { right: 0; top: 2%; width: 44%; rotate: 8deg; }
.palco__fone img { width: 100%; filter: drop-shadow(0 24px 40px rgba(15, 13, 19, .35)); }

.convite {
  left: 0; top: 13%; width: 58%;
  rotate: -5deg;
  background: #fff; color: var(--ondieh-indigo);
  border-radius: 6.5cqi; padding: 2.4cqi;
  box-shadow: 0 2px 6px rgba(15, 13, 19, .1), 0 40px 80px rgba(15, 13, 19, .3);
}
.convite__foto { border-radius: 4.4cqi; overflow: hidden; aspect-ratio: 3 / 2; background: #F8E7C8; }
.convite__foto img { width: 100%; height: 100%; object-fit: cover; }
.convite__corpo { padding: 3.2cqi 2.4cqi 1.6cqi; }
.convite__titulo { font-family: var(--font-display); font-weight: 700; font-size: max(1.15rem, 5.4cqi); line-height: 1.05; letter-spacing: -.02em; }
.convite__meta { display: flex; align-items: center; gap: 6px; margin-top: 1.4cqi; color: #5C5865; font-size: max(.8rem, 2.5cqi); }
.convite__meta .icone { width: 1.1em; height: 1.1em; }
.convite__galera { display: flex; align-items: center; gap: 10px; margin-top: 2.8cqi; }
.avatares { display: flex; padding-left: 8px; }
.avatares .avatar { width: max(28px, 6.6cqi); height: max(28px, 6.6cqi); margin-left: -8px; border-color: #fff; }
.convite__mais { font-weight: 700; font-size: max(.8rem, 2.5cqi); }
.convite .carimbo { position: absolute; right: -6cqi; top: 52%; rotate: 11deg; font-size: max(.75rem, 2.6cqi); padding: 1.8cqi 2.8cqi; }
.convite .carimbo .icone { width: 1.2em; height: 1.2em; }

.conversa { right: 0; bottom: 0; width: 52%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqi; }
.conversa .balao { font-size: max(.8rem, 2.7cqi); }
.conversa .balao:nth-child(2) { align-self: flex-end; border-radius: 18px 18px 6px 18px; }
.conversa .balao:nth-child(3) { margin-left: 6%; }

.palco__legenda { margin-top: 26px; text-align: center; font-size: var(--t-mini); color: var(--tinta-2); }

@media (min-width: 1000px) {
  .hero { padding-top: 136px; min-height: min(100svh, 980px); display: flex; align-items: center; }
  .hero__grade { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 48px; }
  .palco { margin-right: -16px; }
}

@media (max-width: 999px) {
  /* Celular e tablet: o convite entra na primeira tela, logo depois do título.
     A ação principal segue visível no header fixo. */
  .hero { padding-top: 100px; }
  .hero__grade { gap: 20px; }
  .hero__texto { display: contents; }
  .hero__texto .selo { order: 1; justify-self: start; }
  .hero__titulo { order: 2; }
  .palco { order: 3; margin-top: 4px; }
  .hero__sub { order: 4; margin-top: 12px; }
  .hero__acoes { order: 5; }
}

@media (max-width: 599px) {
  .palco__cena { aspect-ratio: 1 / 1.32; }
  .convite { top: 8%; width: 64%; }
  .palco__fone { width: 46%; top: 4%; }
  .palco__forma { inset: 8% 2% 12% 10%; }
  .conversa { width: 62%; }
}

/* Coreografia de entrada do hero (CSS puro: não depende do JS) */
.entra-linha, .entra { animation: subir var(--entrada) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.entra-linha { animation-name: subir-linha; }
.marcador::before { animation: riscar 700ms var(--ease) 650ms both; }
.palco__forma { animation: forma-entra 1100ms var(--ease) 200ms both; }
.palco__fone { animation: fone-entra 1100ms var(--ease) 380ms both; }
.convite { animation: convite-entra 1100ms var(--ease) 520ms both; }
.convite .avatar { animation: pop 500ms var(--ease) both; }
.convite .avatar:nth-child(1) { animation-delay: 1150ms; }
.convite .avatar:nth-child(2) { animation-delay: 1240ms; }
.convite .avatar:nth-child(3) { animation-delay: 1330ms; }
.convite .avatar:nth-child(4) { animation-delay: 1420ms; }
.convite__mais { animation: subir 500ms var(--ease) 1500ms both; }
.convite .carimbo { animation: carimbar 650ms var(--ease) 1650ms both; }
.conversa .balao { animation: balao-entra 600ms var(--ease) both; animation-delay: calc(2000ms + var(--n) * 650ms); transform-origin: left bottom; }
.palco__legenda { animation: subir 600ms var(--ease) 2200ms both; }
.conversa { animation: flutuar 7s ease-in-out 3.6s infinite alternate; }

@keyframes subir { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes subir-linha { from { translate: 0 105%; } to { translate: 0 0; } }
@keyframes riscar { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes forma-entra { from { opacity: 0; scale: .7; rotate: 6deg; } to { opacity: 1; scale: 1; rotate: -7deg; } }
@keyframes fone-entra { from { opacity: 0; translate: 30% 6%; rotate: 22deg; } to { opacity: 1; translate: 0 0; rotate: 8deg; } }
@keyframes convite-entra { from { opacity: 0; translate: -6% -14%; rotate: -18deg; } to { opacity: 1; translate: 0 0; rotate: -5deg; } }
@keyframes pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes carimbar { from { opacity: 0; scale: 1.9; rotate: 32deg; } to { opacity: 1; scale: 1; rotate: 11deg; } }
@keyframes balao-entra { from { opacity: 0; translate: 0 14px; scale: .85; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes flutuar { from { translate: 0 0; } to { translate: 0 -10px; } }

/* ------------------------- Faixa inclinada ----------------------- */
.faixa {
  --foco: #fff;
  position: relative; z-index: 2;
  width: 112%; margin: -36px 0 0 -6%;
  rotate: -3deg;
  background: var(--ondieh-gradient);
  color: #fff; overflow: hidden;
  box-shadow: var(--sombra-marca);
}
/* Arrastável: o gesto lateral é da faixa, o vertical continua da página */
.faixa__janela {
  overflow: hidden; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  /* O texto some antes do botão de pausa, que fica lido como controle */
  --fim-visivel: calc(100% - 100% * 6 / 112);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--fim-visivel) - 120px), transparent calc(var(--fim-visivel) - 24px));
  mask-image: linear-gradient(90deg, #000 calc(var(--fim-visivel) - 120px), transparent calc(var(--fim-visivel) - 24px));
}
html:not(.js) .faixa__janela { -webkit-mask-image: none; mask-image: none; }
.faixa.arrastando .faixa__janela { cursor: grabbing; }
.faixa__trilho {
  display: flex; width: max-content;
  padding: 18px 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); white-space: nowrap;
  will-change: transform;
}
/* O espaço depois do último item vai dentro do grupo: as cópias encaixam sem emenda */
.faixa__grupo { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex-shrink: 0; }
.faixa__trilho .icone { width: 26px; height: 26px; fill: currentColor; stroke: none; opacity: .85; }
/* A faixa passa 6% da tela de cada lado: o botão fica dentro da parte visível */
.faixa__pausa {
  position: absolute; top: 50%; right: calc(6% / 1.12 + 12px); translate: 0 -50%;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(41, 21, 92, .38); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.faixa__pausa .icone { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.faixa__pausa:focus-visible { border-radius: 50%; }
.faixa__pausa:active { transform: scale(.94); }
@media (hover: hover) { .faixa__pausa:hover { background: rgba(41, 21, 92, .6); } }
.faixa__icone-tocar, .faixa__pausa[aria-pressed="true"] .faixa__icone-pausa { display: none; }
.faixa__pausa[aria-pressed="true"] .faixa__icone-tocar { display: block; }
html:not(.js) .faixa__pausa { display: none; }

/* ---------------------------- Seções ----------------------------- */
.secao { padding: var(--secao) 0; }
.secao__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance;
}
.secao__sub { margin-top: 18px; font-size: var(--t-lead); color: var(--tinta-2); max-width: 30em; }

/* ------------------------- Como funciona ------------------------- */
.passos { padding-top: calc(var(--secao) + 24px); }
.passos .secao__titulo { max-width: 12em; }
.passos__grade { margin-top: clamp(40px, 6vw, 72px); }
.passos__palco { display: none; }

.passos__lista { position: relative; display: grid; gap: 72px; }
.passo { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 8px 20px; align-items: start; }
.passo__numero {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--linha-forte); background: var(--fundo);
  /* O gradiente do passo ativo cobre também a borda transparente;
     sem isso ele se repete ali e deixa lascas nas laterais */
  background-origin: border-box;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  transition: background-color var(--medio) var(--ease), color var(--medio) var(--ease), border-color var(--medio) var(--ease), scale var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}
.passo__texto { display: grid; gap: 10px; padding-top: 8px; }
.passo__titulo { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.02em; }
.passo__desc { font-size: var(--t-lead); color: var(--tinta-2); max-width: 26em; }
.passo__tela {
  grid-column: 1 / -1; justify-self: center;
  width: min(300px, 76vw); margin-top: 24px;
  rotate: var(--giro, 0deg);
}
.passo__tela img { width: 100%; filter: drop-shadow(0 24px 40px rgba(41, 21, 92, .28)); }
.passo.ativo .passo__numero, .js .passo.visivel .passo__numero {
  /* border-box no próprio atalho: "background:" zera a origem definida na regra base */
  background: var(--ondieh-gradient) border-box; border-color: transparent; color: #fff; box-shadow: var(--sombra-marca);
}

@media (min-width: 1000px) {
  .passos { padding-bottom: 0; }
  .passos__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .passos__palco { display: block; }
  .passo__tela { display: none; }
  .passos__lista { gap: 0; }
  .passo { min-height: 64vh; align-content: center; grid-template-columns: 64px 1fr; }
  .passo__numero { width: 64px; height: 64px; font-size: 1.6rem; }
  .js .passo.visivel:not(.ativo) .passo__numero { background: var(--fundo); color: var(--tinta); border-color: var(--linha-forte); box-shadow: none; }
  .passo.ativo .passo__numero { scale: 1.08; }

  /* Trilho de progresso ligado à rolagem */
  .passos__lista::before, .passos__lista::after {
    content: ""; position: absolute; left: 31px; top: 38vh; bottom: 38vh; width: 2px; border-radius: 2px;
    background: var(--linha);
  }
  .passos__lista::after {
    background: var(--ondieh-gradient-diagonal);
    transform-origin: top; scale: 1 var(--progresso, 0);
  }
  .passo__numero { position: relative; z-index: 1; }

  .passos__cena {
    position: sticky; top: calc(50vh - 330px);
    width: 340px; height: 660px; margin: 0 auto;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform 600ms var(--ease);
  }
  /* Profundidade: brilho atrás, aparelho no meio, peças soltas na frente */
  .passos__brilho { transform: translateZ(-70px); }
  .passos__fone { transform: translateZ(10px); }
  .extra { transform: translateZ(100px); }
  /* Forma inclinada atrás do aparelho, que gira com o passo */
  .passos__brilho {
    position: absolute; inset: 14% -8% 8% -8%; border-radius: var(--raio-xl);
    background: var(--ondieh-gradient-diagonal);
    box-shadow: 0 30px 60px rgba(15, 13, 19, .2);
    rotate: 6deg; transition: rotate var(--lento) var(--ease), translate var(--lento) var(--ease);
  }
  .passos__fone {
    position: relative; display: grid; width: 300px; margin: 0 auto;
    rotate: -4deg; transition: rotate var(--lento) var(--ease);
  }
  [data-passo-atual="role-aberto"] .passos__fone { rotate: 4deg; }
  [data-passo-atual="role-garantido"] .passos__fone { rotate: -2deg; }
  [data-passo-atual="role-aberto"] .passos__brilho { rotate: -5deg; translate: 4% 0; }
  [data-passo-atual="role-garantido"] .passos__brilho { rotate: 3deg; translate: -4% 2%; }
  .passos__fone img {
    grid-area: 1 / 1; width: 100%;
    opacity: 0; translate: 0 28px; scale: .96;
    filter: drop-shadow(0 30px 48px rgba(41, 21, 92, .32));
    transition: opacity var(--medio) var(--ease), translate var(--lento) var(--ease), scale var(--lento) var(--ease);
  }
  .passos__fone img.ativa { opacity: 1; translate: 0 0; scale: 1; }

  .extra {
    position: absolute; z-index: 2;
    opacity: 0; translate: 0 20px; scale: .92;
    transition: opacity var(--medio) var(--ease), translate var(--lento) var(--ease), scale var(--lento) var(--ease);
  }
  .extra.ativa { opacity: 1; translate: 0 0; scale: 1; transition-delay: 160ms; }
  .extra--lugar {
    left: -96px; top: 16%; rotate: -5deg;
    display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px;
    background: #fff; color: #17141C; border-radius: var(--raio-m); box-shadow: var(--sombra-2);
  }
  .extra--lugar img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
  .extra--lugar b, .extra--link b { display: block; font-size: var(--t-peq); }
  .extra__aberto { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); font-weight: 700; color: #17804A; }
  .extra__aberto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .extra--link { right: -110px; top: 30%; display: grid; gap: 8px; justify-items: end; rotate: 4deg; }
  .extra__link {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: #fff; border-radius: var(--raio-m); box-shadow: var(--sombra-2);
    font-size: var(--t-mini); color: #5C5865;
  }
  .extra__link b { color: #17141C; }
  .extra__link .icone { color: var(--ondieh-purple); }
  .extra--pix { left: -110px; bottom: 16%; display: grid; gap: 8px; justify-items: start; rotate: -3deg; }
  .extra__pago {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
    background: #fff; color: #17141C; border-radius: 999px; box-shadow: var(--sombra-1);
    font-size: var(--t-peq); font-weight: 700;
  }
  .extra__pago::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #17804A; }
  .carimbo--solto { rotate: -6deg; margin-left: 24px; }
}

.passos__legenda { margin-top: 14px; font-size: var(--t-mini); color: var(--tinta-2); }

/* No escuro o bezel do aparelho (#0F0D13) some no fundo: um contorno claro e fino */
[data-theme="dark"] .palco__fone img,
[data-theme="dark"] .passos__fone img,
[data-theme="dark"] .passo__tela img,
[data-theme="dark"] .donos__fone img {
  filter: drop-shadow(0 0 1.5px rgba(244, 242, 247, .6)) drop-shadow(0 28px 44px rgba(0, 0, 0, .5));
}

/* --------------------------- Para donos -------------------------- */
.donos {
  position: relative;
  padding: calc(var(--secao) * .7 + 5vw) 0 calc(var(--secao) * .6 + 5vw);
  --foco: #fff;
  background: linear-gradient(160deg, #3A0E5C 0%, #1B0E3F 45%, #29155C 100%);
  color: #fff;
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
.donos__grade { display: grid; gap: 56px; align-items: center; }
.donos__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.donos .secao__titulo { max-width: 13em; }
.donos__para { margin-top: -6px; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); color: var(--pink-300); }
.donos__lista { display: grid; gap: 16px; margin: 6px 0 10px; }
.donos__lista li { display: flex; align-items: center; gap: 16px; font-size: var(--t-lead); }
.donos__icone {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--pink-300);
  rotate: -6deg;
}
.donos__icone .icone { width: 22px; height: 22px; }

.donos__cena { position: relative; aspect-ratio: 1 / .95; width: 100%; max-width: 600px; margin: 0 auto; transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 600ms var(--ease); }
.donos__cena > .camada { position: absolute; transform: translateZ(calc(var(--z) * 1px)); }
.donos__foto { left: 0; top: 14%; width: 76%; rotate: -5deg; border-radius: var(--raio-l); overflow: hidden; border: 6px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.donos__foto img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.donos__fone { right: 2%; top: 0; width: 42%; rotate: 7deg; }
.donos__fone img { width: 100%; filter: drop-shadow(0 30px 48px rgba(0, 0, 0, .45)); }
.pedido {
  left: 6%; bottom: 6%; rotate: -3deg;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 78%; padding: 14px 16px; border-radius: var(--raio-m);
  background: #fff; color: #17141C; box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
}
.pedido .avatar { border-color: #fff; width: 42px; height: 42px; }
.pedido__texto { display: grid; font-size: var(--t-mini); color: #5C5865; }
.pedido__texto b { color: #17141C; font-size: var(--t-peq); }
.pedido__botoes { display: flex; gap: 8px; margin-left: auto; }
.pedido__sim, .pedido__nao { padding: 8px 14px; border-radius: 999px; font-size: var(--t-mini); font-weight: 700; }
.pedido__sim { background: var(--ondieh-indigo); color: #fff; }
.pedido__nao { border: 1.5px solid #DEDBE4; }
.donos__legenda { margin-top: 24px; font-size: var(--t-mini); color: rgba(255, 255, 255, .72); text-align: center; }

/* O pedido chega quando a cena aparece */
.js .donos__cena .pedido { opacity: 0; translate: -18% 0; transition: opacity var(--lento) var(--ease) 300ms, translate var(--entrada) var(--ease) 300ms; }
.js .donos__cena.visivel .pedido { opacity: 1; translate: 0 0; }

@media (min-width: 1000px) {
  .donos__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
}

/* ------------------------------ Time ----------------------------- */
/* Retratos em cartões brancos inclinados, como fotos soltas na mesa */
.time { padding-bottom: 0; }
.time__lista {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(14px, 3vw, 24px);
  margin-top: clamp(40px, 6vw, 64px);
}
.membro__cartao {
  height: 100%; padding: 8px 8px 18px;
  background: var(--fundo-alto); border: 1px solid var(--linha); border-radius: var(--raio-l);
  box-shadow: var(--sombra-1);
  rotate: calc(var(--giro, 0deg) * .6);
  transition: rotate var(--lento) var(--ease), scale var(--lento) var(--ease), box-shadow var(--medio) var(--ease);
}
.membro__foto {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: calc(var(--raio-l) - 8px); background: var(--fundo-suave);
}
.membro__nome {
  margin: 14px 8px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem); line-height: 1.15; letter-spacing: -.015em;
}
.membro__cargo { margin: 4px 8px 0; font-size: var(--t-peq); font-weight: 700; line-height: 1.3; }
.membro__formacao { display: flex; align-items: flex-start; gap: 6px; margin: 10px 8px 0; font-size: var(--t-mini); line-height: 1.35; color: var(--tinta-2); }
.membro__formacao .icone { width: 16px; height: 16px; margin-top: 1px; }
@media (hover: hover) {
  .membro:hover .membro__cartao { rotate: 0deg; scale: 1.03; box-shadow: var(--sombra-2); }
}
@media (min-width: 900px) {
  .time__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .membro__cartao { rotate: var(--giro, 0deg); }
  /* Alturas desencontradas: lê como fotos espalhadas, não como grade de cards */
  .membro:nth-child(even) { padding-top: 40px; }
}

/* ------------------------- Fila de espera ------------------------ */
.fila__grade { display: grid; gap: 48px; align-items: start; }
.fila__texto { display: flex; flex-direction: column; align-items: flex-start; }
.fila__dados {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 30em; margin-top: 28px;
  font-size: var(--t-peq); line-height: 1.5; color: var(--tinta-2);
}
.fila__dados .icone { margin-top: 1px; color: var(--tinta); }
.fila__dados a { color: var(--tinta); font-weight: 700; text-decoration: underline; }

.fila__cartao { padding: clamp(22px, 4vw, 40px); }

@media (min-width: 1000px) {
  .fila__grade { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 72px; }
  .fila__texto { position: sticky; top: 120px; }
}

/* Formulário */
.form { display: grid; gap: 20px; }
.form__nota { margin-bottom: -4px; font-size: var(--t-mini); color: var(--tinta-2); }
.form__dono { display: grid; gap: 20px; }
.form__dono:not([hidden]) { animation: subir var(--medio) var(--ease) both; }

.segmentado { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--fundo-suave); }
.segmentado__opcao { flex: 1; position: relative; }
.segmentado__opcao input, .chip input, .caixa-marcar input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmentado__opcao span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 10px; border-radius: 999px;
  color: var(--tinta-2); font-size: var(--t-peq); font-weight: 700; text-align: center; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--medio) var(--ease), color var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}
.segmentado__opcao input:checked + span { background: var(--tinta); color: var(--fundo); box-shadow: var(--sombra-1); }
.segmentado__opcao input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

.campo { display: grid; gap: 8px; }
.campo__rotulo { font-size: var(--t-peq); font-weight: 700; padding: 0; }
.campo__opcional { font-weight: 500; color: var(--tinta-2); }
.campo__entrada {
  width: 100%; height: 54px; padding: 0 18px;
  border: 1.5px solid var(--borda-campo); border-radius: 14px;
  background: var(--fundo); color: var(--tinta);
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  transition: border-color var(--medio) var(--ease), box-shadow var(--medio) var(--ease), background-color var(--medio) var(--ease);
}
.campo__entrada::placeholder { color: var(--tinta-2); opacity: .85; }
.campo__entrada:hover { border-color: var(--tinta-2); }
/* Foco do campo: borda de 3 px na cor do foco */
.campo__entrada:focus, .campo__entrada:focus-visible { outline: none; border-color: var(--foco); box-shadow: 0 0 0 1.5px var(--foco); }
.campo__entrada[aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { font-size: var(--t-mini); font-weight: 700; color: var(--erro); }
.campo__erro:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--borda-campo); border-radius: 999px;
  font-size: var(--t-peq); font-weight: 700; cursor: pointer;
  transition: background-color var(--medio) var(--ease), color var(--medio) var(--ease), border-color var(--medio) var(--ease), transform var(--rapido) var(--ease);
}
.chip span:active { transform: scale(.96); }
@media (hover: hover) { .chip span:hover { border-color: var(--tinta); } }
.chip input:checked + span { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.chip input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.campo--chips[data-invalido] .chip span { border-color: var(--erro); }

.caixa-marcar { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; cursor: pointer; }
.caixa-marcar__quadro {
  display: grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 1px;
  border: 1.5px solid var(--borda-campo); border-radius: 8px; background: var(--fundo); color: var(--fundo);
  transition: background-color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.caixa-marcar__quadro .icone { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transition: opacity var(--rapido) var(--ease); }
.caixa-marcar input:checked + .caixa-marcar__quadro { background: var(--tinta); border-color: var(--tinta); }
.caixa-marcar input:checked + .caixa-marcar__quadro .icone { opacity: 1; }
.caixa-marcar input:focus-visible + .caixa-marcar__quadro { outline: 3px solid var(--foco); outline-offset: 2px; }
.caixa-marcar input[aria-invalid="true"] + .caixa-marcar__quadro { border-color: var(--erro); }
.caixa-marcar__texto { font-size: var(--t-peq); line-height: 1.45; }
.caixa-marcar__texto a { text-decoration: underline; font-weight: 700; }
.campo--marcar + .campo--marcar { margin-top: -12px; }

.form__aviso { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-peq); font-weight: 700; }
.form__aviso:empty { display: none; }
.form__aviso::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: currentColor; }
.form__aviso[data-tipo="erro"] { color: var(--erro); }
.form__aviso[data-tipo="info"]::before { background: var(--aviso); }

.pote { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.confirmacao { display: grid; justify-items: start; gap: 10px; }
.confirmacao:not([hidden]) { animation: subir var(--lento) var(--ease) both; }
.confirmacao:focus-visible { border-radius: var(--raio-s); }
.confirmacao__icone { width: 44px; height: 44px; color: var(--sucesso); margin-bottom: 4px; }
.confirmacao__titulo { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.1; }
.confirmacao__texto { font-size: var(--t-lead); color: var(--tinta-2); }

.toast {
  position: fixed; z-index: 150; left: 50%; bottom: 24px;
  display: flex; align-items: center; gap: 12px;
  width: min(calc(100% - 40px), 400px); padding: 16px 18px; border-radius: var(--raio-m);
  background: var(--tinta); color: var(--fundo); box-shadow: var(--sombra-2);
  font-weight: 700; translate: -50% 0;
}
.toast:not([hidden]) { animation: toast-entra var(--lento) var(--ease) both; }
.toast.saindo { animation: toast-sai var(--rapido) var(--ease) both; }
@keyframes toast-entra { from { opacity: 0; translate: -50% 20px; } to { opacity: 1; translate: -50% 0; } }
@keyframes toast-sai { to { opacity: 0; } }

/* ------------------------------ Rodapé --------------------------- */
/* Compacto: marca pequena à esquerda, dados legais ao lado, links à direita */
.rodape {
  --foco: var(--purple-300);
  padding: 44px 0 28px;
  background: var(--ondieh-black); color: #F4F2F7;
  border-top: 1px solid rgba(244, 242, 247, .08);
}
.rodape__grade { display: grid; gap: 24px 48px; }
.rodape__empresa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; }
.rodape__marca { display: flex; align-items: center; gap: 8px; border-radius: 10px; text-decoration: none; }
.rodape__simbolo { width: 30px; height: auto; }
.rodape__nome { display: none; width: 96px; height: auto; }
.rodape__dados {
  display: grid; gap: 2px; max-width: 46ch;
  padding-left: 18px; border-left: 1px solid rgba(244, 242, 247, .16);
  font-style: normal; font-size: var(--t-mini); line-height: 1.55; color: rgba(244, 242, 247, .78);
}
.rodape__razao { font-weight: 700; color: #F4F2F7; }
.rodape__dados a { color: #F4F2F7; text-decoration: underline; text-underline-offset: 3px; }
.rodape__dados a:hover { color: #fff; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape__links a, .rodape__botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  border: 0; background: none; color: #F4F2F7;
  font-family: var(--font-body); font-size: var(--t-peq); font-weight: 700; text-decoration: none;
  cursor: pointer;
}
.rodape__links a:hover, .rodape__botao:hover { text-decoration: underline; color: #F4F2F7; }
.rodape__links a[aria-current="page"] { text-decoration: underline; }
.rodape__ano {
  padding-top: 18px; border-top: 1px solid rgba(244, 242, 247, .1);
  font-size: var(--t-mini); color: rgba(244, 242, 247, .7);
}
@media (min-width: 600px) {
  .rodape__nome { display: block; }
}
@media (min-width: 1000px) {
  .rodape__grade { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .rodape__links { justify-content: flex-end; max-width: 420px; }
  .rodape__ano { grid-column: 1 / -1; }
}

/* --------------------------- Aviso de cookies --------------------- */
/* Não bloqueia a página: cartão fixo no canto, recusar e aceitar com o mesmo peso */
.cookies {
  position: fixed; z-index: 140; left: 12px; right: 12px; bottom: 12px;
  display: grid; gap: 10px;
  max-width: 460px; padding: 20px;
  background: var(--fundo-alto); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio-l); box-shadow: var(--sombra-2);
}
.cookies:not([hidden]) { animation: subir var(--lento) var(--ease) both; }
.cookies__titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.cookies__titulo:focus-visible { border-radius: 6px; }
.cookies__texto { font-size: var(--t-peq); line-height: 1.5; color: var(--tinta-2); }
.cookies__texto a { color: var(--tinta); font-weight: 700; text-decoration: underline; }
.cookies__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
@media (min-width: 600px) { .cookies { left: 20px; bottom: 20px; right: auto; } }

/* -------------------- Política de privacidade -------------------- */
.legal { padding: 128px 0 var(--secao); }
.legal__caixa { max-width: 760px; display: grid; gap: 16px; }
.legal__titulo { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.03em; }
.legal__meta { font-size: var(--t-peq); color: var(--tinta-2); margin-bottom: 12px; }
.legal h2 { margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; scroll-margin-top: 104px; }
.legal h3 { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.legal p, .legal li { font-size: var(--t-corpo); }
.legal ul, .legal ol { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.legal ol { list-style: decimal; }
/* Resumo no topo: o essencial antes do texto inteiro */
.legal__resumo { padding: clamp(20px, 4vw, 28px); background: var(--fundo-alto); border: 1px solid var(--linha); border-radius: var(--raio-l); }
.legal__resumo h2 { margin-top: 0; font-size: 1.15rem; }
.legal__resumo ul { margin-top: 12px; }
.legal__indice { columns: 2 220px; column-gap: 32px; }
.legal__indice li { break-inside: avoid; margin-bottom: 6px; }
/* Tabelas: rolam na horizontal no celular, sem empurrar a página */
.legal__tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--fundo-alto); }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-peq); line-height: 1.45; }
.legal th, .legal td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.legal th { font-weight: 700; background: var(--fundo-suave); }
.legal tr:last-child td { border-bottom: 0; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.legal li::marker { color: var(--ondieh-pink); }
.legal a:not(.botao) { text-decoration: underline; font-weight: 700; }
.legal__voltar { margin-top: 32px; }

/* ------------------------ Escala do celular ----------------------- */
/* Componentes acompanham a escala de tipo menor: menos altura, mais ar */
@media (max-width: 599px) {
  .topo__pilula { height: 56px; padding: 0 8px 0 14px; }
  .topo.rolou .topo__pilula { height: 52px; }
  .topo__simbolo { height: 30px; }
  .topo__nome { height: 18px; }
  .botao--grande { min-height: 52px; padding: 0 22px; }

  .hero { padding-top: 92px; }
  .hero__titulo { line-height: 1.02; }
  .hero__sub { margin-top: 8px; }
  .selo { padding: 6px 14px 6px 10px; }

  .faixa { margin-top: -24px; }
  .faixa__trilho { padding: 14px 0; }
  .faixa__grupo { gap: 26px; padding-right: 26px; }
  .faixa__trilho .icone { width: 20px; height: 20px; }

  .passos__grade { margin-top: 32px; }
  .passos__lista { gap: 56px; }
  .passo { grid-template-columns: 44px 1fr; gap: 6px 16px; }
  .passo__numero { width: 44px; height: 44px; font-size: 1.15rem; }
  .passo__texto { gap: 6px; padding-top: 7px; }

  .donos__grade { gap: 44px; }
  .donos__texto { gap: 18px; }
  .donos__lista { gap: 14px; }
  .donos__lista li { gap: 14px; }
  .donos__icone { width: 40px; height: 40px; border-radius: 13px; }
  .donos__icone .icone { width: 19px; height: 19px; }

  .secao__sub { margin-top: 12px; }
  .time__lista { gap: 24px 14px; margin-top: 32px; }
  .membro__cartao { padding: 6px 6px 14px; border-radius: 22px; }
  .membro__foto { border-radius: 17px; }
  .membro__nome { margin: 12px 6px 0; font-size: 1rem; }
  .membro__cargo { margin: 3px 6px 0; font-size: .8125rem; }
  .membro__formacao { margin: 8px 6px 0; font-size: .75rem; }
  .membro__formacao .icone { width: 14px; height: 14px; }

  .fila__grade { gap: 32px; }
  .fila__dados { margin-top: 20px; }
  .fila__cartao { padding: 20px 18px; border-radius: 24px; }
  .form, .form__dono { gap: 16px; }
  .campo { gap: 6px; }
  .campo__entrada { height: 50px; padding: 0 16px; }
  .chip span { padding: 0 16px; }

  .cookies { padding: 18px; }
  .legal { padding-top: 104px; }
  .rodape { padding: 36px 0 24px; }
}

/* ---------------------------- Movimento -------------------------- */
/* Revelar ao entrar na tela: sobe, desfoca e aparece, uma vez.
   Se o JS não rodar, a animação de segurança mostra tudo em 2 s. */
.js .revelar {
  opacity: 0; translate: 0 32px; filter: blur(6px);
  animation: revelar-seguranca 0s 2s forwards;
}
.js .revelar.visivel {
  opacity: 1; translate: 0 0; filter: blur(0);
  animation: none;
  transition: opacity var(--lento) var(--ease), translate var(--entrada) var(--ease), filter var(--lento) var(--ease);
  transition-delay: calc(var(--ordem, 0) * 80ms);
}
@keyframes revelar-seguranca { to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* Telas do passo a passo no celular: entram girando de leve */
.js .passo__tela { opacity: 0; translate: 0 40px; rotate: calc(var(--giro, 0deg) * 3); transition: opacity var(--lento) var(--ease), translate var(--entrada) var(--ease), rotate var(--entrada) var(--ease); }
.js .passo.visivel .passo__tela { opacity: 1; translate: 0 0; rotate: var(--giro, 0deg); }

/* Reduzir movimento: sem deslocamento, giro, desfoque ou laço;
   tudo vira um fade curto e o estado continua visível. O spinner fica. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .botao[aria-busy="true"] .botao__giro { animation-duration: 700ms !important; animation-iteration-count: infinite !important; }
  .js .revelar { translate: none; filter: none; }
  .js .revelar.visivel { transition: opacity 200ms linear; transition-delay: 0s; }
  .js .passo__tela { translate: none; rotate: var(--giro, 0deg); }
  .faixa__pausa { display: none; }
  .faixa__janela { -webkit-mask-image: none; mask-image: none; }
  .membro__cartao { transition: none; }
  .selo__ponto::after { display: none; }
  .palco__cena[data-inclinar], .donos__cena, .passos__cena { transform: none !important; }
  .botao:hover, .botao-icone:hover { transform: none; }
  .js .donos__cena .pedido { translate: none; }
}