/* Operação — fundo de cada Central, Liquid Glass, sorteio no céu e carta holográfica */
html, body { height: 100%; overflow: hidden; }
:root {
  /* Unidade que respeita a dimensão limitante: 1vw em 16:9; menor quando a tela é mais "baixa". */
  --u: min(1vw, 1.778vh);
  /* Escala das superfícies de vidro (cartão, pílulas, botões): 70% da unidade do título */
  --g: calc(var(--u) * .7);
  --on-glass: #fff;
  --tile-a: .5;
  --title-shadow: 0 2px 28px rgba(5, 18, 42, .30), 0 1px 2px rgba(5, 18, 42, .18);
  --halo: rgba(140, 185, 255, .55);
}
:root[data-tone="light"] { --tile-a: .46; --title-shadow: 0 2px 26px rgba(10, 45, 95, .32), 0 1px 2px rgba(10, 45, 95, .2); --halo: rgba(255, 255, 255, .6); }
:root[data-tone="dark"] { --tile-a: .6; --halo: rgba(120, 165, 255, .5); }
body.op { background: var(--sky-zenith, #1d325d); overscroll-behavior: none; color: var(--on-glass); }

/* ================= Fundo (cena) ================= */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky-zenith, #1d325d); }
.scene-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
/* O "rig" tem 2 telas de altura: céu estendido em cima, foto embaixo. A câmera desloca o rig. */
.scene-cam { position: absolute; left: 0; right: 0; top: -100%; height: 200%; will-change: transform; }
/* O céu avança 5% (10% da tela) por trás da foto, cobrindo toda a faixa onde a foto se dissolve no céu */
.scene-sky { position: absolute; left: 0; right: 0; top: 0; height: 55%; }
.scene-img { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background-size: cover; background-position: center;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 7%); mask: linear-gradient(180deg, transparent 0, #000 7%); }
/* Leve escurecimento do lado do conteúdo para garantir leitura do título branco */
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 900ms var(--ease-out);
  background: linear-gradient(90deg, rgba(8, 22, 48, .22), rgba(8, 22, 48, 0) 52%); }
:root[data-side="right"] .scene::after { background: linear-gradient(270deg, rgba(8, 18, 40, .26), rgba(8, 18, 40, 0) 55%); }
:root[data-tone="light"] .scene::after { background: linear-gradient(90deg, rgba(20, 60, 120, .16), rgba(20, 60, 120, 0) 50%); }
:root.in-sky .scene::after { opacity: 0; }

/* ================= Liquid Glass ================= */
.lg {
  --lg-r: calc(3.6 * var(--g));
  position: relative; isolation: isolate; border-radius: var(--lg-r);
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 42%, rgba(255,255,255,.13) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(175%) brightness(1.05); backdrop-filter: blur(22px) saturate(175%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.7),            /* luz no topo da espessura */
    inset 0 -1.5px 0 rgba(255,255,255,.22),          /* rebatida na base */
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 22px 40px -30px rgba(255,255,255,.65),   /* volume interno */
    inset 0 -30px 46px -36px rgba(255,255,255,.45),
    0 34px 80px -34px rgba(4, 12, 28, .6), 0 6px 18px -8px rgba(4, 12, 28, .28);
}
.lg.lg-refract { -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); }
/* Brilho difuso que acompanha o ponteiro + véu mais fosco na base (como na referência) */
.lg::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at var(--lx, 18%) var(--ly, 0%), rgba(255,255,255,.17), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.10)); }
/* Aro especular: borda clara, mais intensa onde a luz (ponteiro) incide */
.lg::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: radial-gradient(38% 55% at var(--lx, 18%) var(--ly, 0%), #fff, rgba(255,255,255,0) 72%),
    linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.22) 26%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.18) 78%, rgba(255,255,255,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lg-chip { --lg-r: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.12),
  0 18px 40px -22px rgba(4, 12, 28, .55); }

/* Elementos sobre o vidro */
.btn-glass { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.btn-glass:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.btn-white { background: #fff; color: var(--navy); box-shadow: 0 14px 30px -16px rgba(4, 12, 28, .55), inset 0 -2px 0 rgba(27,45,75,.06); }
.btn-white:hover:not(:disabled) { background: #F4F7FC; }
/* Vidro levemente escurecido: texto branco legível mesmo sobre fundos claros (céu, grama) */
.btn-frost { background: rgba(16, 32, 62, .26); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.14); text-shadow: 0 1px 6px rgba(5,18,42,.35); }
.btn-frost:hover:not(:disabled) { background: rgba(16, 32, 62, .36); }

/* ================= Telas de seleção ================= */
.steps { position: fixed; inset: 0; z-index: 1; overflow: hidden auto; }
.brandbar { position: absolute; top: calc(13 * var(--u) / 1.778); display: flex; align-items: center; gap: calc(1.3 * var(--u)); pointer-events: none;
  right: calc(6.8 * var(--u)); filter: drop-shadow(0 2px 14px rgba(5, 18, 42, .22)); }
:root[data-side="right"] .brandbar { right: auto; left: calc(5.6 * var(--u)); }
.brand-santer { width: calc(12.1 * var(--u)); height: auto; }
.brand-product { height: calc(var(--logo-h, 4.3) * var(--u)); width: auto; }

.col { position: absolute; top: calc(12 * var(--u) / 1.778); left: calc(5.8 * var(--u)); display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(2.5 * var(--u)); max-width: calc(100% - 11 * var(--u)); }
:root[data-side="right"] .col { left: auto; right: calc(6.4 * var(--u)); align-items: flex-end; text-align: right; }

.hero { min-width: 0; color: #fff; text-shadow: var(--title-shadow); }
.hero h1 { margin: 0; font-weight: 500; font-size: calc(4.35 * var(--u)); line-height: 1.04; letter-spacing: -.04em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-project { position: relative; margin: .02em 0 0; font-weight: 250; font-style: italic; font-size: calc(4.35 * var(--u)); line-height: 1.14; letter-spacing: -.055em;
  min-height: 1.14em; white-space: nowrap; }
.hero-project span { display: inline-block; padding-right: .08em; }
.hero-project span.leaving { position: absolute; top: 0; left: 0; pointer-events: none; }
:root[data-side="right"] .hero-project span.leaving { left: auto; right: 0; }

.card-slot { position: relative; width: calc(36 * var(--g)); min-width: min(300px, calc(100vw - 32px)); text-align: left; }
.card { padding: calc(2.6 * var(--g)); display: flex; flex-direction: column; justify-content: center; min-height: calc(16 * var(--g)); }
.card-inner { display: flex; flex-direction: column; gap: calc(1 * var(--g)); }
.crumb { position: absolute; left: calc(1.4 * var(--g)); bottom: calc(100% + .7 * var(--g)); display: inline-flex; align-items: center; gap: 8px;
  height: calc(2.3 * var(--g)); min-height: 28px; padding: 0 12px 0 8px; border: 0; color: #fff; font-weight: 600; font-size: max(13px, calc(.82 * var(--g)));
  max-width: 100%; transition: transform 160ms var(--ease-out); text-shadow: 0 1px 8px rgba(5,18,42,.3); }
.crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb:active { transform: scale(.96); }
:root[data-side="right"] .crumb { left: auto; right: calc(1.4 * var(--g)); }

/* Faixa superior — "Selecione a Central", busca */
.pill { display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--g));
  min-height: calc(4.4 * var(--g)); padding: 0 calc(1.7 * var(--g)); border-radius: 999px;
  background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  font-size: calc(2.05 * var(--g)); font-weight: 500; letter-spacing: -.03em; color: #fff; text-shadow: 0 1px 10px rgba(5,18,42,.22); }
.search { justify-content: flex-start; cursor: text; transition: box-shadow 200ms, background 200ms; }
.search:focus-within { background: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(255,255,255,.35); }
.search .search-ico { font-size: calc(2.3 * var(--g)); color: rgba(255,255,255,.8); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: inherit; font-weight: 400; letter-spacing: -.03em; color: #fff; height: 100%;
  text-shadow: inherit; }
.search input::placeholder { color: rgba(255,255,255,.72); opacity: 1; }
.search .clear { border: 0; background: rgba(255,255,255,.22); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.search .clear .fi { font-size: 11px; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Linhas de opção (Central / Roleta) */
.options { display: grid; gap: calc(.8 * var(--g)); }
.option { position: relative; display: grid; grid-template-columns: calc(4.2 * var(--g)) 1fr auto; align-items: center; gap: calc(1.2 * var(--g));
  min-height: calc(5.4 * var(--g)); padding: 0 calc(2 * var(--g)) 0 calc(1.6 * var(--g)); border: 0; border-radius: calc(1.5 * var(--g));
  background: rgba(255,255,255,var(--tile-a)); text-align: left; color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: background 200ms, box-shadow 260ms var(--ease-out), transform 180ms var(--ease-out); }
.option:hover:not([aria-disabled="true"]) { background: rgba(255,255,255,.78); }
.option:active:not([aria-disabled="true"]) { transform: scale(.98); transition-duration: 90ms; }
.option[aria-checked="true"] { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10,108,255,.55), 0 18px 34px -20px rgba(4,12,28,.6); }
.option[aria-disabled="true"] { cursor: not-allowed; background: rgba(255,255,255,calc(var(--tile-a) * .55)); color: rgba(27,45,75,.75); }
.opt-icon { display: grid; place-items: center; font-size: calc(2.5 * var(--g)); color: var(--navy); }
.opt-name { font-size: calc(1.85 * var(--g)); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.opt-badge { display: block; margin-top: 4px; font-size: max(11px, calc(.68 * var(--g))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.radio { width: calc(3 * var(--g)); height: calc(3 * var(--g)); border-radius: 50%; border: max(2px, calc(.16 * var(--g))) solid var(--navy); display: grid; place-items: center; transition: border-color 200ms; }
.radio::after { content: ''; width: 62%; height: 62%; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform 600ms var(--spring-bouncy); }
.option[aria-checked="true"] .radio { border-color: var(--blue); }
.option[aria-checked="true"] .radio::after { transform: scale(1); }
.option .lock { font-size: calc(1.4 * var(--g)); color: var(--ink-2); }

/* Busca — resultados */
.results { position: relative; overflow: hidden; border-radius: calc(1.5 * var(--g)); min-height: calc(10.5 * var(--g)); color: var(--navy);
  background: rgba(255,255,255,var(--tile-a)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.skeleton { padding: calc(1.2 * var(--g)) calc(2.6 * var(--g)); display: grid; }
.skeleton div { display: flex; gap: calc(.45 * var(--g)); padding: calc(1.1 * var(--g)) 0; border-bottom: 1px solid rgba(27,45,75,.1); }
.skeleton div:last-child { border-bottom: 0; }
.skeleton i { width: calc(.9 * var(--g)); height: calc(.9 * var(--g)); border-radius: 50%; background: rgba(27,45,75,.2); }
.list { list-style: none; margin: 0; padding: calc(.5 * var(--g)); max-height: calc(19 * var(--g)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.list li { margin: 0; }
.result { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 12px;
  background: transparent; text-align: left; color: var(--navy); transition: background 140ms; }
.result:hover, .result.active { background: rgba(255,255,255,.88); box-shadow: 0 8px 20px -16px rgba(4,12,28,.6); }
.result b { display: block; font-weight: 600; font-size: max(15px, calc(1.05 * var(--g))); letter-spacing: -.02em; line-height: 1.25; }
.result b mark { background: none; color: var(--blue); }
.result small { display: block; color: var(--ink-2); font-size: max(12px, calc(.78 * var(--g))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { display: grid; place-items: center; text-align: center; gap: 10px; padding: calc(2 * var(--g)); color: var(--ink-2); min-height: inherit; font-size: max(14px, calc(.9 * var(--g))); }
.empty .fi { font-size: 28px; color: var(--ink-2); }
.card > .card-inner > .empty, .card-inner > .empty { color: #fff; }

/* Cartão do corretor selecionado */
.profile { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(1.2 * var(--g)); padding: calc(1.9 * var(--g)) calc(2.2 * var(--g)); }
.profile .avatar { font-size: calc(5.9 * var(--g)); color: var(--navy); }
.profile h3 { margin: 0; font-size: calc(1.95 * var(--g)); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; color: var(--navy); }
.profile .sub { margin: 4px 0 0; font-size: calc(1.1 * var(--g)); letter-spacing: -.03em; color: var(--navy); }
.profile .sub .sep { display: inline-block; width: 1.5px; height: .95em; background: var(--navy); margin: 0 .5em; vertical-align: -.1em; }
.profile .sub .grp { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(27,45,75,.08); font-size: max(11px, calc(.7 * var(--g))); font-weight: 600; color: var(--ink-2); }
.chip .fi { font-size: 1.05em; }
.chip.warn { background: rgba(199,119,0,.14); color: var(--warning); }
.complete { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(27,45,75,.1); }
.complete p { margin: 0; font-size: .85rem; color: var(--warning); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.complete .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.actions-row { display: flex; justify-content: space-between; gap: 12px; }
.actions-row .btn { --h: calc(3.3 * var(--g)); min-height: max(38px, var(--h)); min-width: calc(12.7 * var(--g)); font-size: calc(1.6 * var(--g)); font-weight: 500; letter-spacing: .04em; border-radius: calc(.95 * var(--g)); }
.link-new { align-self: center; border: 0; background: none; color: #fff; font-weight: 600; font-size: max(13px, calc(.82 * var(--g))); display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 14px; border-radius: 999px; transition: background 160ms; text-shadow: 0 1px 8px rgba(5,18,42,.3); }
.link-new:hover { background: rgba(255,255,255,.16); }

/* Acesso (login e troca de senha) */
.login-form { display: grid; gap: 10px; }
.login-form h2 { margin: 0; font-size: max(22px, calc(1.75 * var(--g))); font-weight: 600; letter-spacing: -.03em; color: #fff; text-shadow: 0 1px 12px rgba(5,18,42,.25); }
.login-form p { margin: -6px 0 6px; color: rgba(255,255,255,.9); font-size: max(14px, calc(.9 * var(--g))); text-shadow: 0 1px 8px rgba(5,18,42,.25); }
.login-form .field > span { color: #fff; font-size: max(13px, calc(.8 * var(--g))); text-shadow: 0 1px 2px rgba(5,18,42,.45), 0 1px 10px rgba(5,18,42,.3); }
.login-form .input { min-height: max(40px, calc(3.3 * var(--g))); border-radius: calc(1 * var(--g)); border: 0; background: rgba(255,255,255,.9); color: var(--navy);
  font-size: max(15px, calc(1.05 * var(--g))); box-shadow: inset 0 1px 2px rgba(27,45,75,.12); }
.login-form .input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.login-form .btn { --h: max(42px, calc(3.4 * var(--g))); font-size: max(15px, calc(1.15 * var(--g))); margin-top: 6px; border-radius: calc(1 * var(--g)); }
.pw-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: max(12px, calc(.78 * var(--g))); color: rgba(255,255,255,.9); }
.pw-rules li { display: flex; gap: 8px; align-items: center; }

/* Usuário conectado */
.userbar { position: absolute; bottom: calc(3.4 * var(--u) / 1.778 + 8px); right: calc(5.8 * var(--u)); display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px;
  color: #fff; font-size: max(12px, calc(.8 * var(--g))); font-weight: 600; text-shadow: 0 1px 8px rgba(5,18,42,.3); }
:root[data-side="right"] .userbar { right: auto; left: calc(5.8 * var(--u)); }
.userbar .fi { font-size: 1.25em; }
.userbar .role { font-weight: 500; }
.userbar .who { display: flex; align-items: center; gap: 8px; max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userbar .btn { --h: 28px; padding: 0 11px; font-size: 11.5px; letter-spacing: .04em; }

/* ================= Sorteio (céu) ================= */
.spin { position: fixed; inset: 0; z-index: 2; overflow: hidden; --D: min(83vw, 150vh); --top: 43vh; color: #fff; }
.spin-title { position: absolute; left: clamp(20px, 5.7vw, 120px); top: clamp(20px, 9.6vh, 110px); text-shadow: var(--title-shadow); }
.spin-title h1 { margin: 0; font-size: clamp(20px, 2.35vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; max-width: 9.5em; }
.spin-title p { margin: 0; font-size: clamp(20px, 2.35vw, 48px); font-weight: 250; font-style: italic; letter-spacing: -.055em; line-height: 1.15; }
.broker-chip { position: absolute; right: clamp(20px, 5.6vw, 116px); top: clamp(20px, 10vh, 110px); display: flex; align-items: center; gap: clamp(6px, .5vw, 10px);
  padding: clamp(7px, .52vw, 11px) clamp(13px, 1.55vw, 32px) clamp(7px, .52vw, 11px) clamp(7px, .63vw, 13px); max-width: 34vw; --lg-r: clamp(14px, 1.12vw, 22px); }
.broker-chip .fi { font-size: clamp(26px, 2.25vw, 45px); color: #fff; filter: drop-shadow(0 2px 8px rgba(5,18,42,.3)); }
.broker-chip b { display: block; font-size: clamp(13px, .82vw, 17px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(5,18,42,.3); }
.broker-chip small { display: block; font-size: clamp(10px, .52vw, 11px); letter-spacing: -.01em; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(5,18,42,.3); }

.wheel { position: absolute; left: calc(50% - var(--D) / 2); top: var(--top); width: var(--D); height: var(--D); }
/* Aro de vidro e brilho: mantêm a roleta legível em qualquer céu (claro ou escuro) */
.wheel::before { content: ''; position: absolute; inset: -1.6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 96%, rgba(255,255,255,.22) 98.2%, rgba(255,255,255,.55) 99.4%, transparent 100%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 0 calc(var(--D) * .06) calc(var(--D) * .008) var(--halo); }
:root[data-tone="light"] .wheel::before { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 0 calc(var(--D) * .05) rgba(255,255,255,.55), 0 calc(var(--D) * .03) calc(var(--D) * .08) rgba(10, 35, 80, .35); }
:root[data-tone="dark"] .wheel-pointer { filter: drop-shadow(0 0 18px rgba(140,185,255,.7)) drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
:root[data-tone="dark"] .wheel-rotor, :root[data-tone="mid"] .wheel-rotor { filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }

.spin-btn { position: absolute; z-index: 4; left: 50%; top: calc(var(--D) * .265); translate: -50% -50%;
  width: calc(var(--D) * .22); height: calc(var(--D) * .081); min-width: 150px; min-height: 58px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #2B82FF 0%, #0A6CFF 55%, #005FE6 100%); color: #fff;
  font-weight: 700; font-size: max(24px, calc(var(--D) * .04)); letter-spacing: .06em;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -3px 0 rgba(0,40,120,.2) inset, 0 20px 40px -14px rgba(10,108,255,.75);
  transition: transform 160ms var(--ease-out), filter 200ms, box-shadow 200ms; }
.spin-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%); pointer-events: none; }
.spin-btn::after { content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 3px solid rgba(10,108,255,.35); opacity: 0; pointer-events: none; }
.spin-btn.ready::after { animation: ring 2.4s var(--ease-out) infinite; }
@keyframes ring { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
.spin-btn:hover:not(:disabled) { filter: brightness(1.06); }
.spin-btn:active:not(:disabled), .spin-btn.pressed { transform: scale(.95); transition-duration: 80ms; }
.spin-btn:disabled { cursor: default; }
.spin-btn.busy { background: linear-gradient(180deg, #2A4470, var(--navy)); box-shadow: 0 16px 30px -16px rgba(27,45,75,.7); font-size: max(18px, calc(var(--D) * .026)); }

.spin-tools { position: absolute; left: clamp(16px, 2vw, 40px); bottom: clamp(16px, 3vh, 40px); z-index: 10; display: flex; gap: 4px; padding: 4px; transition: opacity 400ms, transform 400ms var(--ease-out); }
.spin-tools .btn { --h: 34px; }
.spin-tools .btn .fi { font-size: 14px; }
body.tools-hidden .spin-tools { opacity: 0; transform: translateY(12px); pointer-events: none; }
body.tools-hidden .spin { cursor: none; }
body.fullscreen .spin-tools .hide-fs { display: none; }

/* ================= Transição para o sorteio ================= */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; color: #fff; text-shadow: var(--title-shadow); }
.intro-box { display: grid; justify-items: center; gap: clamp(10px, 1.2vh, 20px); text-align: center; }
.intro-icon { width: clamp(84px, 8vw, 160px); height: clamp(84px, 8vw, 160px); border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: clamp(36px, 3.6vw, 72px); background: radial-gradient(circle at 30% 25%, #4D95FF, var(--blue) 55%, #0050D0);
  box-shadow: 0 0 0 clamp(8px, .8vw, 16px) rgba(255,255,255,.14), 0 0 0 clamp(18px, 1.8vw, 36px) rgba(255,255,255,.07), 0 30px 60px -20px rgba(0,0,0,.5); }
.intro-kicker { font-size: clamp(12px, .8vw, 16px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 8px; }
.intro-name { font-size: clamp(40px, 5vw, 110px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.intro-broker { font-size: clamp(18px, 1.6vw, 34px); font-weight: 300; font-style: italic; letter-spacing: -.04em; }
.intro-dots { display: flex; gap: 8px; margin-top: 10px; }
.intro-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: dot 900ms ease-in-out infinite; }
.intro-dots i:nth-child(2) { animation-delay: 150ms; } .intro-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 100% { transform: scale(.5); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }

/* ================= Celebração: carta holográfica ================= */
.celebration { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; --prize: var(--blue); }
.cel-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sky-zenith, #1d325d) 55%, transparent), rgba(4,10,24,.86));
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.cel-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* Confetes atrás da carta: a festa acontece em volta, sem cobrir o texto */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.cel-stage { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: clamp(16px, 2.6vh, 30px); width: 100%; height: 100%; padding: 20px; }
.cel-rays { position: absolute; left: 50%; top: 50%; width: min(150vmin, 1600px); aspect-ratio: 1; translate: -50% -52%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(160,200,255,.16) 0deg 7deg, rgba(160,200,255,0) 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 66%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 30%, transparent 66%);
  animation: rays 30s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }

.holo-wrap { position: relative; z-index: 2; perspective: 1600px; height: min(74vh, 760px, calc(88vw * 7 / 5)); aspect-ratio: 5 / 7; }
.holo-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.holo { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 5.2% / 3.7%; container-type: inline-size;
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --gx: 50%; --gy: 30%; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.holo-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,.75), 0 0 80px -26px rgba(255,255,255,.4); }
/* Moldura de metal prateado: as faixas de luz giram com a inclinação da carta */
.holo-face::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: conic-gradient(from calc(var(--ry) * 5 + 200deg) at var(--px) var(--py), #ffffff, #c2c8d0, #f5f7fa, #8b95a2, #ffffff, #b4bcc6, #eef1f5, #9aa3af, #ffffff); }
.holo-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.45) 0 1px, rgba(255,255,255,0) 1px 5px); mix-blend-mode: overlay; }

.holo-back { transform: rotateY(180deg); }
.holo-back .back-inner { position: absolute; inset: 3.4%; z-index: 1; border-radius: 4% / 2.9%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #ffffff, #e8ecf1 55%, #c6cdd6); box-shadow: inset 0 0 0 1px rgba(27,45,75,.12); }
.holo-back .back-inner::before { content: ''; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(27,45,75,.05) 0 6deg, transparent 6deg 15deg); }
.holo-back img { position: relative; width: 34%; filter: drop-shadow(0 8px 18px rgba(27,45,75,.25)); }
.holo-back .back-word { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; color: var(--navy); opacity: .75; font-size: 3.4cqw; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; }

.holo-front .front-inner { position: absolute; inset: 3.4%; z-index: 1; border-radius: 4% / 2.9%; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto;
  background: linear-gradient(180deg, #ffffff, #edf0f4); box-shadow: inset 0 0 0 1px rgba(27,45,75,.12); }
.holo-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 4.6cqw 5.4cqw 4cqw;
  background: linear-gradient(180deg, #f8f9fb, #e3e7ec); box-shadow: inset 0 -1px 0 rgba(27,45,75,.08); }
/* Brilho metálico (cinza/branco) que corre pelas faixas conforme a carta inclina */
.holo-head::after, .holo-foot::before { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .9;
  background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.95) 38%, rgba(140,150,162,.55) 50%, rgba(255,255,255,.9) 62%, rgba(255,255,255,0) 80%);
  background-size: 260% 100%; background-position: var(--px) 0; }
.holo-foot::before { z-index: -1; background-position: calc(100% - var(--px)) 0; }
.holo-head h2 { position: relative; z-index: 1; margin: 0; white-space: nowrap; color: var(--navy); font-size: 9.2cqw; font-weight: 800; letter-spacing: -.035em; line-height: 1; text-shadow: 0 1px 0 #fff; }
.holo-head h2 span { display: inline-block; }
/* Logo do empreendimento em azul-marinho (o arquivo é branco; a cor vem da máscara) */
.holo-logo { position: relative; z-index: 1; flex: none; height: auto; max-height: 7.2cqw; max-width: 25cqw; background: var(--navy);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.holo-art { position: relative; display: grid; place-items: center; overflow: hidden; margin: 0 3.6cqw; border-radius: 3cqw;
  background: radial-gradient(circle at 50% 52%, #ffffff 0%, #eef1f5 38%, #cfd5dd 72%, #b7bfc9 100%);
  box-shadow: inset 0 0 0 1px rgba(27,45,75,.12), inset 0 -22px 40px -26px rgba(27,45,75,.35), inset 0 18px 30px -24px #fff; }
.holo-art::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.75) 0 7deg, rgba(27,45,75,.04) 7deg 22.5deg);
  animation: rays 40s linear infinite; }
.holo-medal { position: relative; z-index: 2; width: 46cqw; aspect-ratio: 1; }
.holo-medal .ring { position: absolute; inset: -6%; border-radius: 50%; background: conic-gradient(from 0deg, #fff, #aab2bd, #fff, #7c8794, #fff, #cfd5dc, #fff);
  animation: rays 7s linear infinite; box-shadow: 0 10px 30px -10px rgba(27,45,75,.45), 0 0 0 1px rgba(27,45,75,.08); }
/* Única cor da carta: o ícone do prêmio */
.holo-medal .core { position: absolute; inset: 3%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 22cqw;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--prize) 55%, #fff), var(--prize) 52%, color-mix(in srgb, var(--prize) 68%, #000));
  box-shadow: inset 0 -10px 24px rgba(0,0,0,.25), inset 0 8px 18px rgba(255,255,255,.35), 0 18px 40px -12px rgba(27,45,75,.45); }
.holo-medal .core .fi { filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
/* Reflexo metálico em tons de cinza sobre a arte (sem arco-íris) */
.holo-foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 3%, rgba(255,255,255,0) 7%),
    linear-gradient(120deg, #ffffff 0%, #9aa3ae 20%, #ffffff 40%, #7d8794 60%, #ffffff 80%, #b9c0c9 100%);
  background-size: 260% 260%, 320% 320%; background-position: var(--px) var(--py), calc(100% - var(--px)) var(--py); }
.holo-art .holo-foil { opacity: .35; }
.holo-plate { position: relative; z-index: 4; margin: 3.6cqw 3.6cqw 0; padding: 3.8cqw 4.4cqw 4.2cqw; border-radius: 3cqw; text-align: center;
  background: #fff; color: var(--navy); box-shadow: 0 10px 22px -16px rgba(27,45,75,.5), inset 0 0 0 1px rgba(27,45,75,.1); }
.holo-plate .you { margin: 0; font-size: 3.1cqw; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.holo-plate .prize { margin: 1.4cqw 0 0; font-size: 8.4cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--navy); text-wrap: balance; }
.holo-foot { position: relative; z-index: 4; isolation: isolate; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3cqw; padding: 3.8cqw 5cqw 4.6cqw; color: var(--navy); }
.holo-foot .who { margin: 0; font-size: 5cqw; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.holo-foot .meta { margin: 1.2cqw 0 0; font-size: 2.7cqw; color: var(--ink-2); letter-spacing: .01em; }
.holo-foot img { width: 20cqw; }
/* Reflexo que acompanha a inclinação da carta */
.holo-glare { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--gx) var(--gy), rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 26%, rgba(27,45,75,.14) 90%); opacity: .6; }
.holo-sweep { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; overflow: hidden; }
.holo-sweep::before { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-70%); animation: sweep 4.2s 1.6s var(--ease-in-out) infinite; mix-blend-mode: soft-light; }
@keyframes sweep { 0% { transform: translateX(-70%); } 40%, 100% { transform: translateX(70%); } }

.cel-next { position: relative; z-index: 3; --h: clamp(52px, 6.5vmin, 64px); font-size: clamp(16px, 2.1vmin, 20px); padding: 0 2em; }

/* ================= Acesso: tela simples em branco ================= */
.scene { transition: opacity 900ms var(--ease-out); }
.brand-santer-azul { display: none; }
:root.plain body.op { background: #fff; }
:root.plain .scene { opacity: 0; pointer-events: none; }
:root.plain .brand-santer, :root.plain .brand-product { display: none; }
:root.plain .brand-santer-azul { display: block; width: calc(12.1 * var(--u)); height: auto; }
:root.plain .brandbar { filter: none; }
:root.plain .brandbar, :root.plain[data-side="right"] .brandbar { left: auto; right: calc(6.8 * var(--u)); }
:root.plain .col, :root.plain[data-side="right"] .col { left: calc(5.8 * var(--u)); right: auto; align-items: flex-start; text-align: left; }
:root.plain .hero { color: var(--navy); text-shadow: none; }
:root.plain .lg { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(27,45,75,.08), 0 30px 70px -34px rgba(27,45,75,.35), 0 6px 18px -10px rgba(27,45,75,.15); }
:root.plain .lg::before, :root.plain .lg::after { display: none; }
:root.plain .login-form h2, :root.plain .login-form p, :root.plain .login-form .field > span { color: var(--navy); text-shadow: none; }
:root.plain .login-form p { color: var(--ink-2); }
:root.plain .login-form .input { background: #F3F5F8; box-shadow: inset 0 0 0 1px rgba(27,45,75,.12); }
:root.plain .login-form .input:focus { background: #fff; box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px rgba(10,108,255,.14); }
:root.plain .login-form .btn-white { background: var(--navy); color: #fff; box-shadow: 0 12px 26px -14px rgba(27,45,75,.7); }
:root.plain .login-form .btn-white:hover:not(:disabled) { background: var(--navy-700); }
:root.plain .userbar { color: var(--navy); text-shadow: none; }
:root.plain .userbar .btn-frost { background: rgba(27,45,75,.08); color: var(--navy); text-shadow: none; box-shadow: none; }

/* ================= Responsivo ================= */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root { --u: 2.2vw; }
  .steps { padding: 0 20px 110px; }
  .brandbar, :root[data-side="right"] .brandbar { position: relative; top: auto; left: auto; right: auto; justify-content: center; padding: max(20px, 4vh) 0 0; gap: 14px; }
  .brand-santer { width: clamp(110px, 30vw, 180px); }
  .brand-product { height: clamp(28px, calc(var(--logo-h) * 1.9vw), 64px); }
  .col, :root[data-side="right"] .col { position: relative; top: auto; left: auto; right: auto; margin: 4vh auto 0; align-items: stretch; text-align: left;
    width: min(560px, 100%); max-width: none; gap: 52px; }
  .hero h1, .hero-project { font-size: clamp(30px, 8.4vw, 56px); }
  :root[data-side="right"] .hero-project span.leaving { left: 0; right: auto; }
  .card-slot { width: 100%; min-width: 0; }
  .card { padding: 16px; min-height: 0; --lg-r: 24px; }
  .crumb { left: 14px; } :root[data-side="right"] .crumb { right: auto; left: 14px; }
  .pill { font-size: clamp(16px, 4.4vw, 22px); min-height: 46px; }
  .search .search-ico { font-size: 24px; }
  .option { grid-template-columns: 36px 1fr auto; min-height: 52px; padding: 0 14px 0 10px; border-radius: 14px; }
  .opt-icon { font-size: 21px; } .opt-name { font-size: clamp(16px, 4.2vw, 20px); }
  .radio { width: 24px; height: 24px; border-width: 2px; }
  .results { min-height: 150px; border-radius: 18px; }
  .list { max-height: 300px; }
  .profile { padding: 14px; } .profile .avatar { font-size: 50px; } .profile h3 { font-size: clamp(20px, 5vw, 28px); } .profile .sub { font-size: clamp(13px, 3.4vw, 17px); }
  .actions-row .btn { min-width: 0; flex: 1; font-size: 16px; --h: 44px; border-radius: 12px; }
  .complete .grid2 { grid-template-columns: 1fr; }
  .userbar .role { display: none; }
  :root.plain .brandbar { position: relative; left: auto; right: auto; }
  :root.plain .brand-santer-azul { width: clamp(120px, 34vw, 190px); }
  :root.plain .col, :root.plain[data-side="right"] .col { position: relative; left: auto; right: auto; align-items: stretch; }
  .userbar, :root[data-side="right"] .userbar { position: fixed; left: 50%; right: auto; translate: -50% 0; bottom: 18px; }
  .scene::after, :root[data-side="right"] .scene::after { background: linear-gradient(180deg, rgba(8,22,48,.3), rgba(8,22,48,.05) 60%); }

  .spin { --D: min(150vw, 74vh); --top: max(calc(112px + 4.2em + 9vw), calc(100dvh - var(--D) * .8)); font-size: clamp(16px, 2.6vw, 30px); }
  .spin-title { left: 20px; top: 20px; right: 20px; }
  .spin-title h1, .spin-title p { font-size: clamp(22px, 4.2vw, 40px); line-height: 1.15; }
  .spin-title h1 { max-width: 11.5em; }
  .broker-chip { left: 20px; right: 20px; top: calc(36px + 3 * 1.15 * clamp(22px, 4.2vw, 40px)); max-width: none; padding: 10px 16px 10px 10px; }
  .broker-chip .fi { font-size: 34px; }
  .broker-chip b { font-size: clamp(15px, 2.4vw, 22px); }
  .broker-chip small { font-size: clamp(11px, 1.6vw, 15px); }
  .spin-tools { left: 50%; translate: -50% 0; bottom: 14px; }
  .spin-btn { font-size: 26px; }
  .holo-wrap { height: auto; width: min(84vw, 420px, calc(70vh * 5 / 7)); }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .card { padding: 18px; }
  .option { min-height: 54px; }
  .pill { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .cel-rays, .holo-art::before, .holo-medal .ring, .holo-sweep::before, .spin-btn.ready::after { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg.lg-refract { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 36, 64, .92); }
  .cel-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,12,26,.94); }
}
@media (prefers-contrast: more) {
  .lg { background: rgba(12, 24, 46, .9); box-shadow: 0 0 0 2px #fff; }
  .option, .results { background: #fff; }
}