/* Accenture IA v3: modo PC (canvas de projeto 1920x1080 escalado por var(--u); SPEC seção 2.1).
   Carregado com media="(min-width: 1024px) and (min-aspect-ratio: 5/4)". Cada medida abaixo está em px de projeto
   e vira calc(N * var(--u)). Sem rolagem de página: o fundo cobre a tela e o canvas fica centralizado. */

:root { --btn-h: max(48px, calc(60 * var(--u))); --btn-px: calc(32 * var(--u)); --glow: 0 0 calc(30 * var(--u)) rgba(130, 0, 255, 0.55); --tr-title: -0.055em; --tr-lead: -0.027em; --tr-body: -0.05em; --tr-tip: -0.07em; }

/* ---------- fundos ---------- */
.bg[data-bg='login'] { background-image: url('../../img/v3/bg-login.webp'); }
.bg[data-bg='main'] { background-image: url('../../img/v3/bg-main.webp'); }
.bg[data-bg='values'] { background-image: url('../../img/v3/bg-values.webp'); }
.bg[data-bg='final'] { background-image: url('../../img/v3/bg-final.webp'); background-position: center; }
.bg[data-bg='final'].is-on { animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.02) translateX(-1%); } }

/* ---------- casca ---------- */
html, body { overflow: hidden; height: 100%; }
.app { position: fixed; left: 50%; top: 50%; width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); min-height: 0; transform: translate(-50%, -50%); }
.stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; min-height: 0; margin: 0; }
.logo { left: calc(100 * var(--u)); top: calc(100 * var(--u)); width: calc(73 * var(--u)); margin: 0; }
.back { left: auto; right: calc(100 * var(--u)); top: calc(40 * var(--u)); min-width: 0; height: max(44px, calc(52 * var(--u))); padding: 0 calc(24 * var(--u)) 0 calc(16 * var(--u)); font-size: max(14px, calc(18 * var(--u))); }
.back-label { display: inline; }
.counter { left: calc(100 * var(--u)); right: auto; top: calc(982 * var(--u)); bottom: auto; font-size: max(13px, calc(24 * var(--u))); }
.boot { min-height: 0; height: 100%; }
.boot-chev { width: calc(73 * var(--u)); height: calc(78 * var(--u)); }

/* ---------- componentes ---------- */
.pill { min-width: calc(254 * var(--u)); gap: calc(14 * var(--u)); font-size: max(14px, calc(20 * var(--u))); }
.pill--login { min-width: calc(352 * var(--u)); }
.pill--wide { min-width: calc(428 * var(--u)); padding: 0 calc(24 * var(--u)); }
.pill--download { min-width: calc(254 * var(--u)); }
.pill--small { min-width: calc(254 * var(--u)); padding: 0 calc(24 * var(--u)); }
.pill-icon { height: auto; min-height: 0; }
.pill-icon[src$='icon-like.png'] { width: calc(32 * var(--u)); }
.pill-icon[src$='icon-retake.png'] { width: calc(25 * var(--u)); }
.pill-icon[src$='icon-download.png'] { width: calc(16 * var(--u)); }
.pill-stack, .result-actions, .confirm-actions, .msg-actions, .final-links, .final-actions, .cam-actions, .gen-slow-actions { gap: calc(16 * var(--u)); width: calc(428 * var(--u)); }
.result-actions, .final-actions { width: calc(300 * var(--u)); }
.final-links { flex-direction: row; width: auto; }
.final-links .pill { width: auto; min-width: calc(254 * var(--u)); }
.result-actions { display: flex; }
.result-actions .pill + .pill { padding: 0 var(--btn-px); }
.banner { font-size: max(14px, calc(18 * var(--u))); border-radius: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); }
.field-box { min-height: max(48px, calc(76 * var(--u))); border-radius: calc(16 * var(--u)); }
.field-icon { left: calc(32 * var(--u)); width: calc(40 * var(--u)); }
.field-input { min-height: max(48px, calc(76 * var(--u))); padding: 0 calc(32 * var(--u)); font-size: max(16px, calc(24 * var(--u))); }
.field-box.has-icon .field-input { padding-left: calc(102 * var(--u)); }
.field-error { font-size: max(14px, calc(18 * var(--u))); }
.check-body { font-size: max(12px, calc(16 * var(--u))); }
@media (pointer: fine) {
  .check-row { grid-template-columns: max(24px, calc(34 * var(--u))) 1fr; }
  .check-wrap { width: max(24px, calc(34 * var(--u))); height: max(24px, calc(34 * var(--u))); }
  .check-body { padding-top: calc(5 * var(--u)); }
}

/* ---------- tipografia comum ---------- */
.screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 0; padding: 0; display: block; }
/* O tracking negativo iguala a largura das linhas da arte, mas fecha os espaços entre palavras: word-spacing devolve o vão. */
.screen-title { margin: 0; font-size: max(28px, calc(68 * var(--u))); line-height: calc(80 * var(--u)); text-align: left; word-spacing: 0.12em; }
.screen-body-text { margin: 0; font-size: max(15px, calc(24 * var(--u))); line-height: calc(31 * var(--u)); text-align: left; }
.quota-hint { font-size: max(13px, calc(16 * var(--u))); text-align: left; }

/* ---------- login / intro ---------- */
.screen--login { padding: 0; }
.login-content { position: absolute; left: 0; right: 0; top: calc(120 * var(--u)); padding: 0; transform: scale(var(--fit, 1)); transform-origin: top center; }
.screen--login.extras-1 { --fit: 0.96; }
.screen--login.extras-2 { --fit: 0.88; }
.screen--login.extras-3 { --fit: 0.8; }
.screen--login.extras-4 { --fit: 0.74; }
.login-logo { width: calc(260 * var(--u)); }
.login-title { margin-top: calc(97 * var(--u)); }
.title-img { width: calc(914 * var(--u)); }
.login-lead { margin-top: calc(38 * var(--u)); font-size: max(16px, calc(26 * var(--u))); line-height: calc(34 * var(--u)); }
.login-body { margin-top: calc(10 * var(--u)); max-width: calc(700 * var(--u)); font-size: max(15px, calc(24 * var(--u))); line-height: calc(31 * var(--u)); }
.login-form { margin-top: calc(48 * var(--u)); }
.field { width: calc(634 * var(--u)); }
.field + .field { margin-top: calc(16 * var(--u)); }
.cities { margin-top: calc(46 * var(--u)); }
.city-list { flex-wrap: nowrap; column-gap: calc(36 * var(--u)); }
.city { min-height: 0; padding: 0; gap: calc(8 * var(--u)); }
.city-name { font-size: max(13px, calc(22 * var(--u))); line-height: calc(28 * var(--u)); }
.city-dot { width: max(16px, calc(26 * var(--u))); height: max(16px, calc(26 * var(--u))); border-width: 2px; }
.city-dot::after { left: 50%; top: 50%; right: auto; bottom: auto; width: max(8px, calc(12 * var(--u))); height: max(8px, calc(12 * var(--u))); margin: calc(max(8px, 12 * var(--u)) / -2) 0 0 calc(max(8px, 12 * var(--u)) / -2); }
@media (pointer: coarse) { .city { min-height: 44px; min-width: 44px; padding: 2px 4px; } }
.consents { width: calc(800 * var(--u)); margin-top: calc(20 * var(--u)); padding: 0; border-radius: 0; background: none; }
.banner-box { width: calc(640 * var(--u)); margin-top: calc(12 * var(--u)); }
.login-actions { margin-top: calc(16 * var(--u)); gap: calc(18 * var(--u)); }
.login-submit { min-width: calc(352 * var(--u)); }

/* ---------- câmera (1/6 e 2/6) e confirmar (3/6) ---------- */
.screen--camera, .screen--confirm { display: block; padding: 0; }
.screen--camera .cam-copy, .screen--confirm .cam-copy { position: absolute; left: calc(98 * var(--u)); top: calc(355 * var(--u)); width: calc(640 * var(--u)); display: block; }
.screen--camera .screen-title, .screen--confirm .screen-title { max-width: none; margin-top: calc(-14 * var(--u)); }
.screen--camera .screen-body-text { margin-top: calc(27 * var(--u)); max-width: calc(520 * var(--u)); }
.cam-tips { margin-top: calc(35 * var(--u)); row-gap: calc(19 * var(--u)); }
.cam-tip { gap: calc(14 * var(--u)); min-height: calc(40 * var(--u)); font-size: max(14px, calc(22 * var(--u))); }
.tip-icon-box { width: calc(40 * var(--u)); min-width: 0; }
.tip-icon { min-width: 0; }
.cam-tip:nth-child(1) .tip-icon { width: calc(41 * var(--u)); }
.cam-tip:nth-child(2) .tip-icon { width: calc(36 * var(--u)); }
.cam-tip:nth-child(3) .tip-icon { width: calc(36 * var(--u)); }
.cam-frame, .photo-frame { position: absolute; left: calc(797 * var(--u)); top: calc(98 * var(--u)); width: calc(1020 * var(--u)); height: calc(814 * var(--u)); aspect-ratio: auto; margin: 0; border-radius: calc(28 * var(--u)); }
.cam-frame { transition: top 0.4s var(--ease-out); }
.is-countdown .cam-frame { top: calc(133 * var(--u)); }
.face-guide { width: calc(687 * var(--u)); height: calc(719 * var(--u)); }
.cam-state { gap: calc(18 * var(--u)); padding: calc(20 * var(--u)); }
.cam-msg { font-size: max(16px, calc(30 * var(--u))); max-width: calc(700 * var(--u)); }
.cam-hint { font-size: max(14px, calc(22 * var(--u))); max-width: calc(700 * var(--u)); }
.cam-state-icon, .cam-state-icon .chev-mask-img { width: calc(72 * var(--u)); height: calc(58 * var(--u)); }
.cam-pulse { width: calc(80 * var(--u)); height: calc(85 * var(--u)); }
.cam-actions { width: calc(480 * var(--u)); gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.cam-note { left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(20 * var(--u)); font-size: max(14px, calc(20 * var(--u))); }
.shutter { position: absolute; left: calc(1206 * var(--u)); top: calc(837 * var(--u)); width: calc(200 * var(--u)); margin: 0; padding: 0; gap: calc(20 * var(--u)); }
.shutter-disc { width: calc(136 * var(--u)); height: calc(136 * var(--u)); min-width: 56px; min-height: 56px; box-shadow: 0 0 calc(36 * var(--u)) rgba(138, 64, 255, 0.5); }
.shutter-disc img { width: calc(72 * var(--u)); min-width: 28px; }
.shutter-label { font-size: max(13px, calc(24 * var(--u))); letter-spacing: -0.033em; }
.cam-digit { left: calc(187 * var(--u)); right: auto; width: calc(400 * var(--u)); top: calc(433 * var(--u)); font-size: calc(230 * var(--u)); line-height: calc(230 * var(--u)); }
.screen--confirm .screen-title { margin-top: calc(-11 * var(--u)); }
.screen--confirm .screen-body-text { margin-top: calc(24 * var(--u)); max-width: calc(560 * var(--u)); }
.confirm-actions { margin-top: calc(41 * var(--u)); gap: calc(20 * var(--u)); width: calc(500 * var(--u)); margin-left: calc(4 * var(--u)); }
.quota-hint { margin-top: calc(24 * var(--u)); }
.photo-frame { top: calc(133 * var(--u)); }
.frame-border { left: calc(-4 * var(--u)); top: calc(-3 * var(--u)); width: calc(1030 * var(--u)); height: calc(823 * var(--u)); max-width: none; }

/* ---------- valores (4/6) ---------- */
.screen--values { display: block; padding: 0; }
.values-title { position: absolute; left: calc(360 * var(--u)); top: calc(167 * var(--u)); width: calc(1200 * var(--u)); max-width: none; font-size: max(24px, calc(62 * var(--u))); line-height: calc(72 * var(--u)); letter-spacing: -0.05em; word-spacing: 0.12em; }
.values { position: absolute; left: 0; right: 0; top: calc(389 * var(--u)); margin: 0; }
.values-row { display: flex; justify-content: center; gap: calc(28 * var(--u)); }
.value-card { width: calc(245 * var(--u)); }
.value-img { width: calc(245 * var(--u)); border-radius: calc(12 * var(--u)); }
.value-radio { margin-top: calc(37 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-width: 2px; min-width: 16px; min-height: 16px; }
.value-radio::after { left: 50%; top: 50%; right: auto; bottom: auto; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: calc(-7 * var(--u)) 0 0 calc(-7 * var(--u)); }
.value-card:hover, .value-card.is-selected { transform: translateY(calc(-8 * var(--u))); }
.value-card:hover .value-img { box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) color-mix(in srgb, var(--sw) 55%, transparent); }
.value-card.is-selected .value-img { box-shadow: 0 0 0 3px #fff; box-shadow: 0 0 0 3px #fff, 0 calc(16 * var(--u)) calc(48 * var(--u)) color-mix(in srgb, var(--sw) 60%, transparent); }
.values-hint { position: absolute; left: 0; right: 0; top: calc(842 * var(--u)); margin: 0; font-size: max(14px, calc(20 * var(--u))); }
.values-banner { position: absolute; left: calc(610 * var(--u)); top: calc(832 * var(--u)); width: calc(700 * var(--u)); margin: 0; }
.values-actions { position: absolute; left: 0; right: 0; top: calc(892 * var(--u)); margin: 0; display: flex; justify-content: center; }
@keyframes card-in { from { opacity: 0; transform: translateY(calc(24 * var(--u))); } to { opacity: 1; transform: none; } }

/* ---------- gerando ---------- */
.screen--generating { display: block; padding: 0; }
.screen--generating { padding: 0; }
.gen-center { position: absolute; left: 50%; top: 50%; width: calc(1100 * var(--u)); margin-left: calc(-550 * var(--u)); transform: translateY(-54%); }
.gen-loader { --size: calc(220 * var(--u)); margin-bottom: calc(60 * var(--u)); }
.gen-ring { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.gen-title { font-size: max(26px, calc(56 * var(--u))); word-spacing: 0.12em; }
.gen-phrase { margin-top: calc(22 * var(--u)); font-size: max(18px, calc(32 * var(--u))); }
.gen-progress { width: calc(480 * var(--u)); height: max(4px, calc(6 * var(--u))); margin-top: calc(34 * var(--u)); }
.gen-sub { margin-top: calc(20 * var(--u)); font-size: max(15px, calc(22 * var(--u))); }
.gen-slow { width: calc(720 * var(--u)); margin-top: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
.gen-slow-text { font-size: max(15px, calc(22 * var(--u))); }
.gen-slow-actions { width: calc(428 * var(--u)); }
@keyframes echo-out { 0%, 100% { transform: translateX(0); opacity: var(--o); } 60% { transform: translateX(calc(24 * var(--u))); opacity: calc(var(--o) * 0.3); } }
@keyframes echo-out-l { 0%, 100% { transform: scaleX(-1) translateX(0); opacity: var(--o); } 60% { transform: scaleX(-1) translateX(calc(24 * var(--u))); opacity: calc(var(--o) * 0.3); } }

/* ---------- resultado (5/6) ---------- */
.screen--result { display: block; padding: 0; }
.res-title { position: absolute; left: calc(98 * var(--u)); top: calc(388 * var(--u)); width: calc(480 * var(--u)); max-width: none; }
.res-body { position: absolute; left: calc(98 * var(--u)); top: calc(572 * var(--u)); width: calc(500 * var(--u)); max-width: none; margin: 0; letter-spacing: -0.07em; }
.result-actions { position: absolute; left: calc(101 * var(--u)); top: calc(675 * var(--u)); margin: 0; gap: calc(16 * var(--u)); }
.res-label { position: absolute; left: calc(690 * var(--u)); top: calc(173 * var(--u)); margin: 0; font-size: max(14px, calc(24 * var(--u))); line-height: calc(30 * var(--u)); text-align: left; letter-spacing: -0.035em; }
.res-image { position: absolute; left: calc(690 * var(--u)); top: calc(241 * var(--u)); width: calc(1140 * var(--u)); height: calc(641 * var(--u)); aspect-ratio: auto; margin: 0; border-radius: calc(20 * var(--u)); }
.res-hashtag { position: absolute; left: calc(690 * var(--u)); top: calc(922 * var(--u)); margin: 0; font-size: max(14px, calc(24 * var(--u))); line-height: calc(30 * var(--u)); text-align: left; letter-spacing: -0.03em; }

/* ---------- final (6/6) ---------- */
.screen--final { display: block; padding: 0; }
.final-title { position: absolute; left: calc(98 * var(--u)); top: calc(347 * var(--u)); width: calc(800 * var(--u)); max-width: none; font-size: max(32px, calc(80 * var(--u))); line-height: calc(97 * var(--u)); letter-spacing: -0.03em; }
.final-body { position: absolute; left: calc(98 * var(--u)); top: calc(563 * var(--u)); width: calc(640 * var(--u)); max-width: none; margin: 0; font-size: max(15px, calc(22 * var(--u))); line-height: calc(30 * var(--u)); letter-spacing: -0.01em; }
.final-actions { position: absolute; left: calc(98 * var(--u)); top: calc(640 * var(--u)); margin: 0; }
.final-links { position: absolute; left: calc(98 * var(--u)); top: calc(640 * var(--u)); margin: 0; gap: calc(16 * var(--u)); }
.final-headline { position: absolute; left: calc(95 * var(--u)); top: calc(775 * var(--u)); width: calc(678 * var(--u)); margin: 0; }

/* ---------- mensagens ---------- */
.screen--message { display: block; padding: 0; }
.msg-col { position: absolute; left: calc(98 * var(--u)); top: calc(355 * var(--u)); width: calc(700 * var(--u)); padding: 0; align-items: flex-start; text-align: left; }
.msg-title { max-width: none; text-align: left; }
.msg-body { margin-top: calc(20 * var(--u)); max-width: calc(560 * var(--u)); text-align: left; }
.msg-actions { margin-top: calc(36 * var(--u)); gap: calc(20 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .bg[data-bg='final'].is-on { animation: none; }
  .cam-frame { transition: none; }
}