/* ---------- perguntas ---------- */
.q-head { padding: var(--safe-top) 12px 0; display: flex; align-items: center; justify-content: space-between; }
.q-head span { font-size: 15px; font-weight: 500; color: var(--sec); }
.progress { margin: 2px 24px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.progress button { height: 20px; padding: 0; border: 0; background: none; display: flex; align-items: center; }
.progress button:disabled { cursor: default; }
.progress button i { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); transition: background .25s; }
.progress button.on i { background: var(--brand); }
.progress button:not(:disabled):hover i { background: var(--sec); }
.progress button.on:hover i { background: var(--brand); }
.q-body { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 24px 16px; display: flex; flex-direction: column; gap: 24px; }
.q-title { display: flex; flex-direction: column; gap: 8px; }
.q-foot { flex: none; padding: 12px 24px 34px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.q-foot p { font-size: 15px; text-align: center; color: var(--sec); }

.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 52px; background: var(--fill); border-radius: 12px; }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--ink); }
.search input:focus-visible { outline: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.rows { display: flex; flex-direction: column; }
.row-btn { min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.row-btn .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; }
.row-btn .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.row-btn strong { font-size: 17px; font-weight: 600; }
.row-btn small { font-size: 14px; color: var(--sec); }
.empty { padding: 20px 0; font-size: 15px; color: var(--sec); }

.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head strong { font-size: 17px; font-weight: 600; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-week { text-align: center; font-size: 13px; font-weight: 600; color: var(--sec); }
.cal-grid { row-gap: 4px; }
.day { height: 44px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.day span { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.day.in { background: var(--fill); }
.day.s.both { background: linear-gradient(to right, transparent 50%, var(--fill) 50%); }
.day.e.both { background: linear-gradient(to right, var(--fill) 50%, transparent 50%); }
.day.s span, .day.e span { background: var(--brand); color: var(--surface); font-weight: 600; }
.day:disabled { cursor: default; }
.day.today:not(.s):not(.e) span { box-shadow: inset 0 0 0 1.5px #D4D4D9; font-weight: 600; }
.q-skip { min-width: 44px; min-height: 44px; }
.day:disabled span { color: var(--muted); }

.amount { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amount-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.amount-field { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 2px 8px; border-radius: 12px; cursor: text; transition: background .15s; }
.amount-field:hover, .amount-field:focus-within { background: var(--fill); }
.amount-field span { font-size: 22px; font-weight: 600; color: var(--sec); }
.amount-field input { border: 0; outline: none; background: transparent; padding: 0; font: inherit; font-size: 44px; font-weight: 700; letter-spacing: -1.2px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; min-width: 2ch; max-width: 220px; }
.amount-mid small { font-size: 15px; color: var(--sec); font-variant-numeric: tabular-nums; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 0%; --a: 0%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ink) 0 var(--p), #D2D2D7 var(--p) var(--a), var(--fill) var(--a) 100%); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ink) 0 var(--p), #D2D2D7 var(--p) var(--a), var(--fill) var(--a) 100%); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.08); transition: transform .15s; }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.icon-btn:disabled { opacity: .3; cursor: default; }
#quiz .dist { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.dist-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.dist-bar i { display: block; height: 100%; transition: width .3s ease; }
.cats { display: flex; flex-direction: column; gap: 10px; }
.cat { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.cat-top { display: flex; align-items: center; gap: 12px; }
.cat .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.cat .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat .nm strong { font-size: 15px; font-weight: 600; }
.cat .nm small { font-size: 13px; color: var(--sec); font-variant-numeric: tabular-nums; }
.stepper { flex: none; display: flex; align-items: center; gap: 4px; }
.stepper strong { min-width: 64px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper .icon-btn { width: 40px; height: 40px; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--surface); color: var(--sec); font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.pill[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--surface); }
.seg { display: grid; padding: 2px; gap: 2px; background: var(--fill); border-radius: 10px; }
.seg button { min-height: 40px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(17, 17, 17, .25); }
.group { display: flex; flex-direction: column; gap: 10px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; }
/* interesses: grade em mosaico, cada cartão com sua própria ilustração que ganha vida ao ser escolhido */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 70px; grid-auto-flow: dense; gap: 8px; }
.b { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 10px 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1px; text-align: left; transition: background .3s, color .3s, border-color .3s, transform .15s; }
.b.wide { grid-column: span 2; }
.b.tall { grid-row: span 2; }
.b:hover { border-color: #C9C9CF; }
.b:active { transform: scale(.97); }
.b[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.b b { position: relative; z-index: 1; font-size: 15px; font-weight: 600; }
.b small { position: relative; z-index: 1; font-size: 12px; color: var(--sec); transition: color .3s; }
.b[aria-pressed="true"] small { color: #C7C7CC; }
.b .art { position: absolute; pointer-events: none; display: block; }
/* As ilustrações se mexem sempre; escolher o cartão só inverte as cores. */
.b .w { animation: wave 2.4s linear infinite; }
.b .st { animation: twinkle 2.2s ease-in-out infinite; }
.b .wiggle { animation: wiggle 4s ease-in-out infinite; }
.b .bounce { animation: bounce 3.6s ease-in-out infinite; }
.b .pop { animation: pop 4.2s ease-in-out infinite; }
.b .needle { transform-box: view-box; transform-origin: 12px 12px; animation: needle 5s ease-in-out infinite; }
.b .sun { animation: sunrise 10s ease-in-out infinite; }
.b .moonc { animation: moonrise 10s ease-in-out infinite; }
.b .flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 1.4s ease-in-out infinite; }
.b .gull { transform-box: fill-box; animation: glide 2.6s ease-in-out infinite; }
.b .rays { animation: glow 2.4s ease-in-out infinite; }
.b .win { animation: flicker 3s steps(1) infinite; }
.b .stm { animation: steam 1.8s ease-in-out infinite; }
.b .mtn { fill: var(--surface); transition: fill .3s; }
.b[aria-pressed="true"] .mtn { fill: var(--ink); }
@keyframes wave { to { transform: translateX(-40px); } }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes wiggle { 0%, 18%, 100% { transform: rotate(0); } 5% { transform: rotate(-14deg); } 11% { transform: rotate(12deg); } }
@keyframes bounce { 0%, 22%, 100% { transform: translateY(0); } 10% { transform: translateY(-7px); } }
@keyframes pop { 0%, 20%, 100% { transform: scale(1); } 10% { transform: scale(1.2); } }
@keyframes needle { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(25deg); } }
@keyframes sunrise { 0% { transform: translateY(48px); } 15%, 38% { transform: translateY(0); } 50%, 100% { transform: translateY(48px); } }
@keyframes moonrise { 0%, 50% { transform: translateY(48px); } 65%, 88% { transform: translateY(0); } 100% { transform: translateY(48px); } }
@keyframes flag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(10deg) scaleX(.82); } }
@keyframes glide { 50% { transform: translate(6px, -3px); } }
@keyframes glow { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 50% { opacity: .25; } 56% { opacity: 1; } }
@keyframes steam { 0% { transform: translateY(4px); opacity: 0; } 50% { opacity: .9; } 100% { transform: translateY(-6px); opacity: 0; } }

/* ---------- orçamento em anel ---------- */
.ring { position: relative; width: min(180px, 22vh); height: min(180px, 22vh); margin: 0 auto; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring .trk { stroke: var(--fill); }
.ring .seg { stroke-linecap: butt; transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease, opacity .2s; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ring .amount-field span { font-size: 18px; }
.ring .amount-field input { font-size: 36px; letter-spacing: -1px; max-width: 150px; }
.cat-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cat-row { min-height: 56px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.cat-row > i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.cat-row b { flex: 1; font-size: 16px; font-weight: 500; }
.cat-in { width: 96px; border: 0; border-radius: 8px; background: transparent; padding: 6px 4px; font: inherit; font-size: 16px; font-weight: 600; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; outline: none; }
.cat-in:hover, .cat-in:focus { background: var(--fill); }

/* referência visual: telas em cinza-claro, campos e listas em branco */
#quiz { background: var(--screen); }
#quiz .search { background: var(--fill); border-radius: 999px; }
#quiz .rows { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 0 16px; }
#quiz .rows .row-btn:last-child { border-bottom: 0; }

/* a tela inteira rola: o botão Continuar fica no fim do conteúdo, não preso embaixo */
#quiz { overflow-y: auto; overscroll-behavior: contain; }
#quiz .q-body { flex: 1 0 auto; min-height: auto; overflow: visible; }
#quiz .q-foot { border-top: 0; padding-top: 4px; }
/* faixa entre a ida e a volta, visível sobre o fundo cinza */
#quiz .day.in { background: var(--brand-soft); }
#quiz .day.in span { color: var(--brand); font-weight: 600; }
#quiz .day.s.both { background: linear-gradient(to right, transparent 50%, var(--brand-soft) 50%); }
#quiz .day.e.both { background: linear-gradient(to right, var(--brand-soft) 50%, transparent 50%); }
#quiz .cal-grid > .day:nth-child(7n + 1).in { border-radius: 22px 0 0 22px; }
#quiz .cal-grid > .day:nth-child(7n).in { border-radius: 0 22px 22px 0; }
/* trilho do orçamento aparece no fundo cinza */
#quiz .ring .trk { stroke: var(--line); }

/* destino: foto redonda da cidade no lugar do pino */
.row-btn .city-ph { width: 52px; height: 52px; padding: 0; overflow: hidden; background: var(--fill); }
.row-btn .city-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.row-btn:hover .city-ph img { transform: scale(1.08); }
.row-btn[aria-pressed="true"] .city-ph { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* orçamento: total só para ver, no meio do anel */
.amount-view { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 0; }
.amount-view span { font-size: 18px; font-weight: 600; color: var(--sec); }
.amount-view b { font-size: 38px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cat-row b { display: inline-flex; align-items: center; gap: 8px; }
.cat-row b svg { color: var(--sec); flex: none; }
.cat-row { min-height: 56px; }
/* linhas do orçamento alinhadas em colunas fixas */
.cat-row { display: grid !important; grid-template-columns: 10px minmax(0, 1fr) 40px 88px 40px; align-items: center; column-gap: 10px; }
.cat-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cat-row .cat-in { width: 100%; text-align: center; }

/* cabeçalho das etapas fixo no topo, com um degradê branco embaixo quando o conteúdo rola por trás */
.q-top { position: sticky; top: 0; z-index: 5; background: var(--surface); padding-bottom: 10px; }
.q-top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--surface), rgba(255,255,255,0)); pointer-events: none; }
/* orçamento: o total se define direto (−/+ e valores rápidos); as categorias dividem esse total */
.total-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; }
.total-ctl .icon-btn { width: 48px; height: 48px; border: 1px solid var(--line); }
.total-ctl .icon-btn:hover { border-color: var(--ink); }
.total-ctl span { font-size: 14px; font-weight: 600; color: var(--sec); min-width: 110px; text-align: center; }

/* interesses: grade de fotos; escolhido ganha contorno preto, selo de check e a foto fica viva */
.ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.int { position: relative; aspect-ratio: 1 / 1.05; border: 0; padding: 0; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; text-align: left; display: flex; align-items: flex-end; -webkit-mask-image: -webkit-radial-gradient(white, black); animation: rise-in .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 45ms); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.int:active { transform: scale(.96); }
.int img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.85) brightness(.9); transform: scale(1.04); transition: filter .4s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.int::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72)); }
.int-tx { display: flex; flex-direction: column; gap: 1px; padding: 14px; }
.int-tx b { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.int-tx small { font-size: 12px; opacity: .85; }
.int-ok { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.7); color: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.int[aria-pressed="true"] img { filter: none; transform: scale(1); }
.int[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #111; }
.int[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 3px #111, inset 0 0 0 6px #fff; pointer-events: none; }
.int[aria-pressed="true"] .int-ok { background: #111; border-color: #fff; color: #fff; transform: scale(1.08); }

/* galeria: tamanhos diferentes e fotos sempre vivas (o escolhido se destaca pelo contorno e pelo check) */
.ints { grid-auto-rows: 86px; grid-auto-flow: dense; }
.int { aspect-ratio: auto; grid-row: span 2; }
.int-praia, .int-compras { grid-row: span 3; }
.int-natureza { grid-column: 1 / -1; grid-row: span 2; }
.int img { filter: saturate(1.25) contrast(1.06) brightness(1.04); transform: scale(1.02); }
.int[aria-pressed="true"] img { filter: saturate(1.3) contrast(1.08) brightness(1.06); }
.int:not([aria-pressed="true"]) .int-tx { opacity: .95; }
.int::after { background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6)); }
.int-noite img { filter: saturate(1.3) contrast(1.1) brightness(1.25); }

/* interesses em bolhas: fotos redondas de tamanhos variados, flutuando; a escolhida cresce, ganha anel preto e check */
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 10px; padding: 6px 0 4px; }
.bub { width: calc(var(--s) + 8px); border: 0; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: bub-in .55s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * 60ms); }
.bub:nth-child(even) { margin-top: 22px; }
@keyframes bub-in { from { opacity: 0; transform: scale(.5); } }
.bub-ph { position: relative; width: var(--s); height: var(--s); border-radius: 50%; padding: 3px; background: transparent; box-shadow: 0 0 0 1.5px var(--line); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; animation: bub-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes bub-float { 50% { translate: 0 -5px; } }
.bub-ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(1.2) contrast(1.05); display: block; }
.bub b { font-size: 14px; font-weight: 600; color: var(--sec); transition: color .2s; white-space: nowrap; }
.bub-ok { position: absolute; right: 0; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; border: 3px solid #fff; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.bub:active .bub-ph { transform: scale(.92); }
.bub[aria-pressed="true"] .bub-ph { transform: scale(1.08); box-shadow: 0 0 0 3px var(--ink), 0 10px 24px rgba(0,0,0,.18); }
.bub[aria-pressed="true"] .bub-ok { transform: scale(1); }
.bub[aria-pressed="true"] b { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bub-ph { animation: none; } }

/* interesses: galeria em mosaico com ícones de traço; escolhido fica preto e o ícone se mexe */
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(64px, 10.5vh, 104px); gap: 8px;
  grid-template-areas: "praia praia noite" "praia praia comida" "natureza compras comida" "natureza relax relax" "cultura cultura aventura"; }
.gal-it { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 22px; background: var(--fill); color: var(--ink); text-align: left; cursor: pointer;
  animation: gal-in .5s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * 55ms + 80ms); transition: background .3s, color .3s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gal-in { from { opacity: 0; transform: scale(.86) translateY(10px); } }
.gal-it:hover { background: #EDEDEF; }
.gal-it:active { transform: scale(.95); }
.gal-ic { position: absolute; left: 12px; top: 12px; display: grid; color: inherit; }
.gal-it[data-k="praia"] .gal-ic { left: 50%; top: 42%; transform: translate(-50%, -50%); }
.gal-it[data-k="comida"] .gal-ic, .gal-it[data-k="natureza"] .gal-ic { top: 16px; }
.gal-tx { position: absolute; left: 12px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; }
.gal-tx b { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-tx small { font-size: 12px; font-weight: 500; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.gal-it[data-k="praia"] .gal-tx { left: 16px; bottom: 14px; }
.gal-it[data-k="praia"] .gal-tx b { font-size: 22px; letter-spacing: -0.5px; }
.gal-ok { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #D4D4D9; color: transparent; transition: background .2s, color .2s, border-color .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
/* escolhido: fundo preto, texto e ícone brancos, check branco */
.gal-it[aria-pressed="true"] { background: var(--brand); color: #fff; }
.gal-it[aria-pressed="true"] .gal-tx small { color: rgba(255,255,255,.7); }
.gal-it[aria-pressed="true"] .gal-ok { background: #fff; border-color: #fff; color: var(--brand); transform: scale(1.1); }
.gal-it.pop { animation: gal-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gal-pop { 40% { transform: scale(.93); } }
/* movimento de cada ícone: devagar parado, mais vivo quando escolhido */
.gal-ic svg { transform-origin: 50% 80%; animation: 3.2s ease-in-out infinite; }
.mv-sway svg { animation-name: mv-sway; } @keyframes mv-sway { 50% { transform: rotate(-7deg); } }
.mv-bob svg { animation-name: mv-bob; } @keyframes mv-bob { 50% { transform: translateY(-4px); } }
.mv-twinkle svg { animation-name: mv-tw; } @keyframes mv-tw { 50% { transform: scale(.88) rotate(-8deg); opacity: .7; } }
.mv-rise svg { animation-name: mv-rise; } @keyframes mv-rise { 50% { transform: translateY(-3px) scale(1.04); } }
.mv-steam svg { animation-name: mv-steam; } @keyframes mv-steam { 50% { transform: rotate(4deg) translateY(-2px); } }
.mv-spin svg { transform-origin: 50% 50%; animation-name: mv-spin; animation-timing-function: linear; animation-duration: 8s; } @keyframes mv-spin { to { transform: rotate(360deg); } }
.gal-it[aria-pressed="true"] .gal-ic svg { animation-duration: 1.6s; }
.gal-it[aria-pressed="true"] .mv-spin svg { animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) { .gal-it, .gal-it.pop, .gal-ic svg { animation: none !important; } }
/* calendário: arrastar sem rolar a página; a grade nova entra do lado do mês escolhido */
#calGrid { touch-action: none; user-select: none; -webkit-user-select: none; }
.cal-head, .cal-week { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal-head .icon-btn:disabled { opacity: .3; }
.cal-grid.from-r > * { animation: cal-in-r .32s cubic-bezier(.2, .8, .2, 1) both !important; }
.cal-grid.from-l > * { animation: cal-in-l .32s cubic-bezier(.2, .8, .2, 1) both !important; }
@keyframes cal-in-r { from { opacity: 0; transform: translateX(24px); } }
@keyframes cal-in-l { from { opacity: 0; transform: translateX(-24px); } }
/* orçamento sem rolagem: linhas de categoria um pouco mais baixas */
.cat-row { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .cal-grid.from-r > *, .cal-grid.from-l > * { animation: none !important; } }
.ring .amount-view b { font-size: 30px; }
.ring .amount-view span { font-size: 15px; }
/* blocos pequenos da galeria: nome em até duas linhas e sem a frase */
.gal-it[data-k="noite"] .gal-tx small, .gal-it[data-k="compras"] .gal-tx small, .gal-it[data-k="aventura"] .gal-tx small, .gal-it[data-k="comida"] .gal-tx small { display: none; }
.gal-it[data-k="noite"] .gal-tx b, .gal-it[data-k="compras"] .gal-tx b, .gal-it[data-k="aventura"] .gal-tx b, .gal-it[data-k="comida"] .gal-tx b { white-space: normal; line-height: 1.15; overflow-wrap: normal; hyphens: none; font-size: 14px; }
.gal-tx { left: 10px; right: 10px; }
/* orçamento: botões das categorias mais estreitos para o nome caber */
.cat-row { grid-template-columns: 10px minmax(0, 1fr) 36px 84px 36px !important; column-gap: 8px !important; }
/* por dia e noites embaixo do anel (antes ficava apertado dentro dele) */
.ring-note { margin: -6px 0 0; text-align: center; font-size: 14px; color: var(--sec); font-variant-numeric: tabular-nums; }

/* foto de fundo de cada interesse; ícone, textos e check continuam iguais, em branco sobre a foto */
.gal-it { isolation: isolate; color: #fff; background: #222; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.03); transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .3s; filter: saturate(1.15) brightness(.92); }
.gal-it::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.65) 100%); transition: background .3s; }
.gal-it:hover { background: #222; }
.gal-it:hover .gal-bg { transform: scale(1.08); }
.gal-it .gal-tx small { color: rgba(255,255,255,.82); }
.gal-it .gal-ok { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gal-it[aria-pressed="true"] { background: #111; color: #fff; box-shadow: inset 0 0 0 3px #111; }
.gal-it[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 3px #111, inset 0 0 0 6px #fff; pointer-events: none; }
.gal-it[aria-pressed="true"]::before { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.6) 100%); }
.gal-it:not([aria-pressed="true"]) .gal-bg { filter: saturate(1.05) brightness(.8); }