/* zodiwave.com · tokens iguais aos do app (src/theme.ts). Cor só nas auras; o resto é papel e tinta. */
:root {
  --paper: #F4F2EE; --card: #FFFFFF; --ink: #1B1A1F; --ink-soft: #8C8A93; --line: #E6E3DE;
  --lilas: #B7A6F2; --pessego: #F2B8A2; --manteiga: #F3D98B; --ceu: #A9BDF0; --noite: #141319;
  --raio: 28px; --lado: 80px; --largura: 1280px;
  /* grão das auras: ruído em SVG por cima do gradiente */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 400 18px/1.5 "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(48px, 6vw, 88px); }
h2 { font-size: clamp(34px, 3.6vw, 52px); }
.kicker { color: var(--ink-soft); font-size: 18px; letter-spacing: -.02em; }
.sub { color: var(--ink-soft); font-size: 22px; line-height: 1.45; letter-spacing: -.02em; text-wrap: pretty; }
main > section, .topo, .rodape { max-width: calc(var(--largura) + 2 * var(--lado)); margin-inline: auto; padding-inline: var(--lado); }

/* marca: o pingo do i é uma aurinha lilás */
.marca { font-size: 30px; font-weight: 500; letter-spacing: -.06em; }
.marca .i { position: relative; }
.marca .i::before { content: ""; position: absolute; left: 50%; top: .02em; width: .3em; height: .3em; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #E9D9FF, var(--lilas)); }

/* botões */
.pilula { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.pilula svg { width: 18px; height: 18px; }
.pilula.clara { background: var(--paper); color: var(--ink); height: 60px; padding: 0 34px; font-size: 20px; }
.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 26px 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.loja svg { width: 24px; height: 24px; flex: none; }
.loja span { text-align: left; }
.loja small { display: block; font-size: 14px; font-weight: 400; color: #C9C7CF; letter-spacing: -.01em; margin-bottom: 4px; }
.pilula, .loja { transition: transform .2s; }
.pilula:hover, .loja:hover { transform: translateY(-1px); }
:focus-visible { outline: 2px solid var(--lilas); outline-offset: 3px; }

/* topo */
/* topo fixo: o fundo vaza pras laterais (box-shadow + clip-path) sem mudar a largura do conteúdo */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 88px; background: rgba(244, 242, 238, .86); box-shadow: 0 0 0 100vmax rgba(244, 242, 238, .86); clip-path: inset(0 -100vmax); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
main section[id] { scroll-margin-top: 96px; }
.menu { display: flex; gap: 40px; margin-left: auto; margin-right: 40px; color: var(--ink-soft); font-size: 20px; letter-spacing: -.02em; }
.menu a:hover { color: var(--ink); }
.topo .linguas { margin-right: 24px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 15px; }
.topo .linguas a:hover { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 120px; }
.hero h1 { margin: 36px 0 32px; }
.hero .lojas { margin-top: 40px; }
.hero .sub { max-width: 560px; }
.hero-arte { position: relative; aspect-ratio: 535 / 650; border-radius: var(--raio); overflow: hidden; background: url(/img/aura-hills.webp) 30% 100% / auto 80% no-repeat, var(--paper); }
.hero-arte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 10%, transparent 45%); }
.tela { border-radius: 9% / 4.2%; box-shadow: 0 30px 60px -20px rgba(27, 26, 31, .22), 0 0 0 1px rgba(27, 26, 31, .04); background: var(--paper); }
.hero-arte .tela { position: absolute; width: 41%; height: auto; }
.tela-tras { left: 17%; top: 15%; --giro: -4deg; transform: rotate(var(--giro)); }
.tela-frente { left: 51%; top: 9%; --giro: 2deg; transform: rotate(var(--giro)); }
.anima .hero-arte .tela { animation: boia 9s ease-in-out infinite; }
.anima .tela-frente { animation-delay: -4.5s !important; }
@keyframes boia { 50% { transform: rotate(var(--giro)) translateY(-10px); } }

/* dor: horóscopo genérico x leitura do mapa */
.dor { padding-bottom: 140px; }
.dor h2 { max-width: 900px; margin: 24px 0 56px; }
.comparo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.comparo > div { position: relative; isolation: isolate; overflow: hidden; padding: 36px 40px 40px; border-radius: var(--raio); }
.comparo small { display: block; margin-bottom: 18px; font-size: 15px; color: var(--ink-soft); }
.comparo p { font-size: 26px; line-height: 1.3; letter-spacing: -.03em; }
.generico { border: 1px dashed #D5D1CA; }
.generico p { color: #B4B1B9; text-decoration: line-through; text-decoration-color: rgba(140, 138, 147, .45); text-decoration-thickness: 1px; }
.seu { background: var(--card); }
.seu::before { content: ""; position: absolute; z-index: -1; right: -20%; top: -40%; width: 70%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, var(--lilas), transparent), radial-gradient(closest-side at 30% 70%, var(--pessego), transparent); filter: blur(40px); opacity: .45; }
.dor > .sub { max-width: 820px; }

/* pra quem */
.quem { padding-bottom: 160px; }
.quem h2 { margin: 24px 0 40px; }
.quem ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.quem li { display: flex; align-items: center; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
.ponto { flex: none; width: 28px; height: 28px; border-radius: 50%; filter: blur(3px); }
.ponto.lilas { background: var(--lilas); }
.ponto.pessego { background: var(--pessego); }
.ponto.ceu { background: var(--ceu); }

/* entrada das seções */
.anima .revela { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.anima .revela.visto { opacity: 1; transform: none; }

/* zodi */
.zodi { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 160px; }
.zodi-arte { position: relative; display: grid; place-items: center; }
.zodi-arte::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side at 40% 45%, var(--lilas), transparent), radial-gradient(closest-side at 62% 60%, var(--pessego), transparent); filter: blur(60px); opacity: .35; }
.zodi-corpo { position: relative; width: 100%; max-width: 520px; translate: var(--x, 0) var(--y, 0); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1); }
.zodi-arte img { width: 100%; -webkit-mask: radial-gradient(circle, #000 42%, transparent 68%); mask: radial-gradient(circle, #000 42%, transparent 68%); }
/* o zodi boia, respira e dá um pulinho quando responde */
.anima .zodi-arte::before { animation: pulsa 7s ease-in-out infinite; }
.anima .zodi-corpo img { animation: flutua 7s ease-in-out infinite; }
.anima .zodi-corpo.fala { animation: pulinho .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes flutua { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-16px) scale(1.015, .985); } }
@keyframes pulsa { 50% { transform: scale(1.15); opacity: .55; } }
@keyframes pulinho { 40% { scale: 1.04 .96; } 70% { scale: .98 1.03; } }
.zodi h2 { margin: 28px 0 32px; }
.chat { display: grid; max-width: 520px; margin-bottom: 36px; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
/* as três trocas ocupam o mesmo lugar (altura da maior); só a ativa aparece */
.troca { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; visibility: hidden; }
.troca.ativa { visibility: visible; }
.anima .troca.ativa .eu { animation: chega .6s cubic-bezier(.2, .7, .2, 1) both; }
.anima .troca.ativa .ele { animation: chega .6s cubic-bezier(.2, .7, .2, 1) .8s both; }
.anima .troca.ativa .digitando { animation: some .3s ease 2s both; }
.anima .troca.ativa .ele span { animation: texto .5s ease 2s both; }
.digitando { display: none; }
.anima .digitando { display: flex; gap: 5px; position: absolute; left: 20px; top: 20px; }
.digitando b { width: 7px; height: 7px; border-radius: 50%; background: var(--lilas); animation: pontinho 1s ease-in-out infinite; }
.digitando b:nth-child(2) { animation-delay: .15s; }
.digitando b:nth-child(3) { animation-delay: .3s; }
@keyframes chega { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes some { to { opacity: 0; } }
@keyframes texto { from { color: transparent; } }
@keyframes pontinho { 50% { transform: translateY(-4px); opacity: .5; } }
.chat .eu { justify-self: end; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 20px; }
.chat .ele { display: flex; align-items: flex-start; gap: 12px; }
.chat .ele img { width: 30px; height: 30px; border-radius: 50%; }
.chat .ele span { position: relative; background: var(--card); padding: 14px 20px; border-radius: 20px; max-width: 460px; }
.zodi .sub { font-size: 19px; max-width: 520px; }

/* três jeitos */
.tres { padding-bottom: 160px; }
.tres h2 { margin-bottom: 64px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { position: relative; overflow: hidden; height: 540px; padding: 40px 40px 0; border-radius: var(--raio); background: var(--card); isolation: isolate; }
.card h3 { font-size: 32px; margin-bottom: 14px; }
.card p { color: var(--ink-soft); font-size: 17px; line-height: 1.45; }
.card .tela { width: 60%; margin: 56px auto 0; }
.card::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 34%; height: 50%; border-radius: 50%; background: var(--aura); filter: blur(50px); opacity: .55; }
.aura-manteiga { --aura: var(--manteiga); }
.aura-ceu { --aura: var(--ceu); }
.aura-pessego { --aura: var(--pessego); }

/* match: a única seção escura */
.match { max-width: none !important; background: var(--noite); color: #fff; text-align: center; padding-top: 140px !important; padding-bottom: 140px !important; }
.match-aura { position: relative; width: 380px; height: 300px; margin: 0 auto 40px; display: grid; place-items: center; }
.match-aura::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side at 38% 50%, var(--lilas), transparent), radial-gradient(closest-side at 64% 50%, var(--pessego), transparent); filter: blur(28px); opacity: .9; }
.match-aura::after, .cta::after { content: ""; position: absolute; inset: 0; background: var(--grao); opacity: .18; mix-blend-mode: overlay; border-radius: inherit; pointer-events: none; }
.match-aura span { position: relative; z-index: 1; font-size: 96px; font-weight: 500; letter-spacing: -.05em; }
.match h2 { font-size: clamp(38px, 4.4vw, 64px); }
.match .sub { max-width: 720px; margin: 28px auto 40px; color: #A9A7B0; font-size: 20px; }
.match .exemplo { margin-top: 28px; color: #6E6C76; font-size: 15px; }

/* cta final */
.cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 32px; height: 500px; margin-top: 160px; margin-bottom: 100px; padding: 80px !important; border-radius: var(--raio); background: url(/img/aura-haze.webp) 50% 50% / cover; max-width: var(--largura) !important; }
.cta h2 { font-size: clamp(40px, 4.6vw, 66px); text-align: right; }
.cta .loja { height: 58px; font-size: 18px; padding: 0 22px 0 18px; }
.cta .loja small { font-size: 12px; }
.cta .loja svg { width: 22px; height: 22px; }
.anima .cta { animation: deriva 24s ease-in-out infinite alternate; background-size: 112%; }
@keyframes deriva { from { background-position: 40% 45%; } to { background-position: 60% 55%; } }
main > .cta { width: calc(100% - 2 * var(--lado)); }

/* rodapé */
.rodape { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 96px; border-top: 1px solid var(--line); max-width: none; color: var(--ink-soft); font-size: 16px; }
.linguas { display: flex; gap: 10px; }
.linguas [aria-current] { color: var(--ink); font-weight: 600; }
.links { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-self: end; }
.rodape a:hover { color: var(--ink); }

/* lista de espera (no lugar dos botões das lojas até o lançamento) */
.sr, .isca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lista { display: flex; gap: 8px; max-width: 520px; padding: 6px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(27, 26, 31, .25); }
.lista .campo { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 400 18px "Inter Tight", system-ui, sans-serif; letter-spacing: -.01em; }
.lista .campo::placeholder { color: var(--ink-soft); }
.lista .campo:focus { outline: none; }
.lista:focus-within { box-shadow: 0 0 0 2px var(--lilas), 0 18px 40px -24px rgba(27, 26, 31, .25); }
.lista button { flex: none; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 500 17px "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; cursor: pointer; }
.lista button:disabled { opacity: .6; }
.lista-nota { max-width: 520px; margin-top: 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.lista-nota.ok { color: var(--ink); font-size: 18px; }
.lista-nota.ok::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--lilas); box-shadow: 0 0 12px var(--lilas); }
.lista-nota.erro { color: #B4452C; }
.em-breve { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink-soft); font-size: 14px; }
.em-breve svg { width: 15px; height: 15px; opacity: .7; }
.hero .lista { margin-top: 40px; }
.cta .lista, .cta .lista-nota { width: min(480px, 100%); }
.cta .lista-nota, .cta .em-breve { color: #4A4852; text-align: right; justify-content: flex-end; }
.so-sol .lista { margin-top: 28px; }

/* perguntas */
.perguntas { padding-top: 140px; }
.perguntas h2 { margin-bottom: 40px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.03em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--ink-soft); font-size: 28px; font-weight: 300; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 760px; padding-bottom: 28px; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.faq a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* compatibilidade entre signos */
.compat { max-width: 760px; margin: 24px auto 120px; padding-inline: 24px; }
.trilha { margin-bottom: 40px; font-size: 15px; color: var(--ink-soft); }
.trilha a:hover { color: var(--ink); }
.compat h1 { font-size: clamp(40px, 5.4vw, 68px); margin: 18px 0 40px; }
.compat h2 { font-size: 28px; margin: 48px 0 14px; }
.compat > p, .dupla p, .so-sol p { color: #3C3A42; font-size: 19px; line-height: 1.55; }
.placar { position: relative; display: grid; justify-items: center; padding: 56px 32px 40px; border-radius: var(--raio); background: var(--card); text-align: center; overflow: hidden; isolation: isolate; }
.duo { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: center; align-items: center; filter: blur(34px); opacity: .55; }
.duo .bola { width: 220px; height: 220px; margin: 0 -40px; filter: none; }
.pct { font-size: 96px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.placar small { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.placar .frase { margin-top: 18px; font-size: 22px; letter-spacing: -.02em; }
.bola.manteiga { background: var(--manteiga); }
.bola.ceu { background: var(--ceu); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.dupla > div { padding: 28px 30px; border-radius: 24px; background: var(--card); }
.dupla h3 { font-size: 22px; margin-bottom: 10px; }
.so-sol { margin-top: 56px; padding: 40px; border-radius: var(--raio); background: linear-gradient(135deg, rgba(183, 166, 242, .25), rgba(242, 184, 162, .25)); }
.so-sol h2 { margin-top: 0; }
.so-sol .lojas { margin-top: 24px; }
.mais { margin-top: 56px; }
.mais b { display: block; margin-bottom: 14px; font-weight: 500; font-size: 18px; }
.mais div, .linha > div { display: flex; flex-wrap: wrap; gap: 8px; }
.mais a, .linha a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 15px; transition: color .2s, border-color .2s; }
.mais a:hover, .linha a:hover { color: var(--ink); border-color: var(--ink-soft); }
.compat-indice { padding-top: 24px; padding-bottom: 120px; }
.compat-indice .sub { max-width: 640px; margin: 20px 0 48px; }
.grade-signos { display: grid; gap: 4px; border-top: 1px solid var(--line); }
.linha { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.linha b { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 22px; letter-spacing: -.03em; }
.linha .bola { width: 16px; height: 16px; filter: blur(2px); }

/* privacidade e termos */
.texto { max-width: 760px; margin: 40px auto 120px; padding-inline: 24px; }
.texto h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 12px; }
.texto .sub { font-size: 16px; margin-bottom: 48px; }
.texto h2 { font-size: 28px; margin: 48px 0 16px; }
.texto p, .texto li { margin-bottom: 12px; color: #3C3A42; }
.texto ul { padding-left: 22px; }
.texto a { text-decoration: underline; text-underline-offset: 3px; }
.texto b { font-weight: 600; color: var(--ink); }
.rascunho { display: inline-block; margin-bottom: 28px; padding: 6px 14px; border-radius: 999px; background: #FBE3DC; color: #B4452C !important; font-size: 15px; }

/* 404 */
.perdida { text-align: center; padding-top: 20px; padding-bottom: 140px; }
.perdida img { width: 280px; margin: 0 auto 8px; }
.perdida h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 20px; }
.voltar { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 36px; color: var(--ink-soft); }

/* convite (prancha convite-mobile): uma coluna, botão no pé da tela */
.convite { display: flex; flex-direction: column; align-items: center; min-height: 100svh; max-width: 460px; margin: 0 auto; padding: 28px 24px max(28px, env(safe-area-inset-bottom)); text-align: center; }
.convite .marca { font-size: 34px; }
.par { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 22px; width: 100%; margin: 72px 0 52px; }
.par::before { content: ""; position: absolute; inset: -60px -10px -50px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side at 32% 50%, rgba(183, 166, 242, .7), transparent), radial-gradient(closest-side at 70% 50%, rgba(242, 184, 162, .7), transparent); filter: blur(30px); }
.bola { justify-self: center; width: 64px; height: 64px; border-radius: 50%; filter: blur(5px); }
.bola.lilas { background: var(--lilas); }
.bola.pessego { background: var(--pessego); }
.q { font-size: 40px; font-weight: 600; color: #3C3A42; }
.par small { color: var(--ink-soft); font-size: 13px; }
.par small:first-of-type { grid-column: 1; }
.par small:last-of-type { grid-column: 3; }
.convite h1 { text-wrap: wrap; font-size: 34px; letter-spacing: -.05em; line-height: 1.05; }
.convite .sub { margin-top: 18px; font-size: 17px; }
.fim { width: 100%; margin-top: auto; padding-top: 48px; }
.fim .lojas { flex-direction: column; }
.fim .loja { width: 100%; justify-content: center; height: 60px; }
.guardado { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 24px; margin-top: 14px; color: var(--ink-soft); font-size: 14px; }
.guardado svg { width: 16px; height: 16px; flex: none; }

/* celular */
@media (max-width: 900px) {
  :root { --lado: 20px; }
  body { font-size: 16px; }
  .topo { height: 68px; }
  main section[id] { scroll-margin-top: 76px; }
  .marca { font-size: 26px; }
  .menu { display: none; }
  .topo .pilula { height: 40px; padding: 0 18px; font-size: 15px; }
  .topo .linguas { margin-left: auto; margin-right: 10px; padding: 5px 10px; font-size: 14px; gap: 6px; }
  .sub { font-size: 17px; }
  .kicker { font-size: 15px; }
  .hero, .zodi { grid-template-columns: 1fr; gap: 0; }
  .hero { padding-top: 24px; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 56px); margin: 24px 0 20px; }
  .hero .lojas { margin: 28px 0 36px; }
  .loja { height: 58px; font-size: 18px; padding: 0 20px 0 18px; }
  .loja small { font-size: 12px; }
  .dor { padding-bottom: 96px; }
  .dor h2 { font-size: 32px; margin: 16px 0 32px; }
  .comparo { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
  .comparo > div { padding: 26px 24px 28px; }
  .comparo p { font-size: 20px; }
  .quem { padding-bottom: 96px; }
  .quem h2 { font-size: 32px; margin: 16px 0 24px; }
  .quem li { gap: 16px; padding: 22px 0; font-size: 20px; }
  .ponto { width: 20px; height: 20px; }
  .hero-arte { aspect-ratio: 350 / 450; }
  .tela-tras { left: 8%; top: 17%; width: 44% !important; }
  .tela-frente { left: 43%; top: 10%; width: 50% !important; }
  .zodi { text-align: center; padding-bottom: 96px; }
  .zodi-corpo { max-width: 320px; }
  .zodi h2 { font-size: 34px; margin: 16px 0 24px; }
  .chat { text-align: left; font-size: 14px; }
  .chat .ele img { width: 26px; height: 26px; }
  .zodi .sub { display: none; }
  .tres { padding-bottom: 96px; }
  .tres h2 { font-size: 30px; margin-bottom: 28px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { height: 500px; padding: 28px 28px 0; }
  .card h3 { font-size: 26px; }
  .card p { font-size: 15px; }
  .card .tela { width: 62%; margin-top: 36px; }
  .match { padding-top: 96px !important; padding-bottom: 96px !important; }
  .match-aura { width: 280px; height: 220px; margin-bottom: 28px; }
  .match-aura span { font-size: 64px; }
  .match h2 { font-size: 36px; }
  .match .sub { font-size: 16px; margin: 20px auto 32px; }
  .match .exemplo { display: none; }
  .cta .lojas { justify-content: center; }
  .cta { align-items: center; height: 560px; margin-top: 96px; margin-bottom: 56px; padding: 40px 20px !important; background-position: 22% 50%; gap: 22px; }
  .cta h2 { font-size: 32px; text-align: center; }
  .rodape { grid-template-columns: 1fr; height: auto; padding-top: 28px; padding-bottom: 36px; gap: 16px; font-size: 15px; }
  .links { justify-self: start; gap: 22px; }
  .rodape .linguas { order: -1; }
  .hero .lista { margin-top: 28px; }
  .lista .campo { height: 48px; padding: 0 14px; font-size: 16px; }
  .lista button { height: 48px; padding: 0 18px; font-size: 15px; }
  .cta .lista-nota, .cta .em-breve { text-align: center; justify-content: center; }
  .hero .em-breve { margin-bottom: 36px; }
  .perguntas { padding-top: 96px; }
  .perguntas h2 { font-size: 32px; margin-bottom: 20px; }
  .faq summary { padding: 20px 0; }
  .faq details p { font-size: 16px; }
  .compat h1 { margin-bottom: 28px; }
  .pct { font-size: 72px; }
  .placar .frase { font-size: 18px; }
  .dupla { grid-template-columns: 1fr; }
  .so-sol { padding: 28px 22px; }
  .linha { grid-template-columns: 1fr; gap: 10px; }
  .linha a { padding: 6px 11px; font-size: 14px; }
  .copy { order: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pilula, .loja, .zodi-corpo { transition: none; } }

/* páginas de cada signo */
.signo .duo .bola { margin: 0; }
.ficha { display: flex; gap: 40px; margin-top: 28px; }
.ficha div { text-align: center; }
.ficha dt { color: var(--ink-soft); font-size: 14px; }
.ficha dd { margin: 4px 0 0; font-size: 20px; }
.signo .dupla ul { padding-left: 18px; color: #3C3A42; font-size: 18px; line-height: 1.7; }
.melhores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.melhores a { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.melhores a:hover { border-color: var(--ink-soft); }
.melhores .bola, .signos .bola { width: 56px; height: 56px; filter: blur(6px); }
.melhores b { font-weight: 500; }
.melhores span { font-size: 28px; letter-spacing: -.03em; }
.signos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.signos a { display: grid; justify-items: center; gap: 6px; padding: 32px 12px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.signos a:hover { border-color: var(--ink-soft); }
.signos b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.signos small { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 900px) {
  .ficha { gap: 22px; }
  .melhores { gap: 8px; }
  .melhores a { padding: 18px 8px; font-size: 13px; }
  .melhores span { font-size: 22px; }
  .signos { grid-template-columns: repeat(2, 1fr); }
}