/* ==========================================================================
   Aprimored — estilos do app.

   Superfície clara e cartões elevados ("gloss premium"): fundo levemente
   azulado, cartões brancos com sombra em duas camadas, ladrilhos de ícone
   com o gradiente da marca e brilho colorido por baixo.

   A exceção é a área da foto: dentro do comparador e da prévia o fundo é
   escuro, porque branco em volta de uma imagem falseia a percepção de
   brilho e contraste — e é exatamente isso que o usuário veio julgar.

   Todas as cores do espectro saem do ícone da marca. Ver README.
   ========================================================================== */

:root{
  /* ── Espectro da marca (amostrado de brand/aprimored.jpeg) ────────── */
  --cyan:#00BFF2;
  --indigo:#2E6FE8;
  --violeta:#6B45E2;
  --magenta:#9D4BD9;
  --coral:#FF7A45;
  --verde:#12B981;
  --anel:#B5BAE2;

  /* A varredura diagonal é a assinatura. Só nos pontos fundos do espectro:
     sobre o ciano puro, texto branco dá 2,16:1 e some. */
  --gradiente:linear-gradient(135deg, var(--indigo) 0%, var(--violeta) 55%, var(--magenta) 100%);
  --gradiente-cyan:linear-gradient(135deg, #22C8F5, var(--indigo));
  --gradiente-coral:linear-gradient(135deg, #FFA36B, var(--coral));
  --gradiente-verde:linear-gradient(135deg, #34D8A0, var(--verde));

  /* ── Superfície ───────────────────────────────────────────────────
     O cinza do fundo puxa para o índigo da marca, não para o neutro. */
  --fundo:#F3F5FB;
  --fundo-2:#E9EDF7;
  --cartao:#FFFFFF;
  --cartao-alto:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  --borda:rgba(46,111,232,.10);
  --borda-forte:rgba(46,111,232,.18);

  --tinta:#151935;
  --tinta-media:#586084;
  --tinta-fraca:#8A91AE;

  /* Foco/acento: o índigo do ícone. 6,6:1 sobre o fundo claro. */
  --foco:#2E6FE8;
  --foco-fundo:rgba(46,111,232,.09);
  --foco-linha:rgba(46,111,232,.28);

  --bom:#0E9E6E;
  --bom-fundo:rgba(18,185,129,.12);
  --ruim:#E0453C;

  /* ── Elevação: a base do "gloss" ──────────────────────────────────
     Duas camadas — uma justa que define a borda, outra difusa que dá o
     descolamento. Uma sombra só sempre parece chapada. */
  --sombra:0 1px 2px rgba(21,25,53,.04), 0 4px 14px -2px rgba(21,25,53,.07);
  --sombra-alta:0 2px 4px rgba(21,25,53,.04), 0 16px 34px -10px rgba(21,25,53,.14);
  --brilho-marca:0 8px 22px -8px rgba(107,69,226,.55);
  --brilho-cyan:0 8px 20px -8px rgba(46,111,232,.5);
  --brilho-verde:0 8px 20px -8px rgba(18,185,129,.45);
  --brilho-coral:0 8px 20px -8px rgba(255,122,69,.45);

  /* Realce interno no topo dos elementos coloridos: é o que dá o
     acabamento "envidraçado" em vez de cor chapada. */
  --gloss:inset 0 1px 0 rgba(255,255,255,.32);

  --raio:14px;
  --raio-g:20px;
  --raio-gg:24px;
  --seguro-topo:env(safe-area-inset-top,0px);
  --seguro-base:env(safe-area-inset-bottom,0px);

  /* Outfit é geométrica como o wordmark "APRIMORED". */
  --fonte-titulo:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fonte-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

/*
  O atributo `hidden` precisa vencer sempre.

  O navegador esconde [hidden] com uma regra de mesma especificidade que
  qualquer classe — e como o CSS do autor tem prioridade sobre o dele, um
  `.visor{display:flex}` faz o elemento aparecer mesmo marcado como hidden.
  Foi assim que o visor do mapa de diferenças ficou visível por cima da tela
  de login, com seu fundo cobrindo o app inteiro.
*/
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

#app{position:relative; height:100dvh; overflow:hidden}

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

/* ── Telas ───────────────────────────────────────────────────────── */
.tela{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  padding-top:var(--seguro-topo);
  background:var(--fundo);
  /* Um halo do espectro no topo, bem diluído: liga a tela à marca sem
     virar decoração. */
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(107,69,226,.10), transparent 62%),
    radial-gradient(90% 50% at 12% 0%, rgba(0,191,242,.08), transparent 60%);
}
.tela.ativa{display:flex}

.conteudo{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 18px calc(26px + var(--seguro-base));
  display:flex; flex-direction:column; gap:16px;
}
.conteudo.com-aba{padding-bottom:calc(92px + var(--seguro-base))}

.centro{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:20px; padding:24px 22px calc(24px + var(--seguro-base)); text-align:center;
}

/* ── Cabeçalhos ──────────────────────────────────────────────────── */
.topo{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px 8px; flex:none;
}
.topo h2{
  font-family:var(--fonte-titulo); font-weight:700; font-size:19px;
  letter-spacing:-.01em; margin:0; flex:1;
}
.icone{
  width:38px; height:38px; flex:none; border-radius:12px;
  background:var(--cartao); color:var(--tinta); font-size:17px; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sombra);
  border:1px solid var(--borda);
}
.icone:active{background:var(--fundo-2)}

.saudacao{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px}
.saudacao h2{
  font-family:var(--fonte-titulo); font-weight:700; font-size:23px;
  letter-spacing:-.015em; margin:2px 0 0; overflow-wrap:anywhere;
}

.rotulo{
  font-family:var(--fonte-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-fraca); margin:0;
}

/* ── Marca ───────────────────────────────────────────────────────── */
/*
  A marca é a imagem em `marca.png`, recortada da arte original com os
  cantos já arredondados e transparentes. O container não desenha fundo nem
  borda — o ícone traz a própria forma; um fundo atrás dele viraria um
  quadrado aparecendo nos cantos.
*/
.marca{
  width:62px; height:62px; flex:none;
  display:grid; place-items:center;
  filter:drop-shadow(0 10px 20px rgba(107,69,226,.32));
}
.marca img{width:100%; height:100%; display:block}
.marca.grande{width:80px; height:80px}

/* Reproduz o wordmark: "APRI" leve, "MORED" pesado, caixa alta com o
   mesmo espaçamento largo da arte original. */
.titulo-app h1{
  font-family:var(--fonte-titulo); font-weight:800; font-size:25px;
  text-transform:uppercase; letter-spacing:.045em; margin:0 0 6px;
  color:var(--tinta);
}
.titulo-app h1 span{font-weight:500; color:var(--tinta-media)}

/* ── Formulários ─────────────────────────────────────────────────── */
.pilha{display:flex; flex-direction:column; gap:11px; width:100%; max-width:344px}

.campo{display:block}
.campo input{
  width:100%; background:var(--cartao); border:1px solid var(--borda);
  border-radius:var(--raio); padding:15px 16px;
  color:var(--tinta); font-family:var(--fonte); font-size:15px;
  box-shadow:var(--sombra);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder{color:var(--tinta-fraca)}
.campo input:focus{
  outline:none; border-color:var(--foco);
  box-shadow:var(--sombra), 0 0 0 3px var(--foco-fundo);
}

.botao{
  border:none; border-radius:var(--raio); cursor:pointer;
  font-family:var(--fonte); font-weight:600; font-size:15px;
  padding:15px 16px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s ease, box-shadow .2s ease, opacity .15s ease;
}
.botao:active{transform:translateY(1px)}
.botao.alto{padding:17px}
.botao.primario{
  background:var(--gradiente); color:#fff;
  box-shadow:var(--brilho-marca), var(--gloss);
}
.botao.primario:active{box-shadow:0 4px 12px -6px rgba(107,69,226,.6), var(--gloss)}
.botao.fantasma{
  background:var(--cartao); color:var(--tinta);
  border:1px solid var(--borda); box-shadow:var(--sombra);
}
.botao.fantasma:active{background:var(--fundo-2)}
.botao[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.botao.ocupado{opacity:.6; pointer-events:none}

.duplo{display:flex; gap:10px}
.duplo .botao{flex:1}

.link{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--foco); font-family:var(--fonte); font-size:inherit; font-weight:600;
}
.rodape-link{color:var(--tinta-media); font-size:14px; margin:0}
.dica{color:var(--tinta-media); font-size:12.5px; margin:0}
.dica.centralizada{text-align:center}
/* A câmera do sistema não aceita zoom por intent (o Android não tem
   esse parâmetro), então a orientação fica na interface. */
.dica-zoom{background:var(--foco-fundo); border:1px solid var(--foco-linha);
  border-radius:var(--raio); padding:11px 14px; line-height:1.45}
.dica-zoom b{color:var(--foco)}

.erro{color:var(--ruim); font-size:13px; margin:0; min-height:0}
.erro:empty{display:none}

:focus-visible{outline:2px solid var(--foco); outline-offset:2px}

/* Separador "ou" entre entrar com senha e com biometria. */
.ou{display:flex; align-items:center; gap:12px; color:var(--tinta-fraca);
  font-family:var(--fonte-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; margin:2px 0}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:var(--borda-forte)}

/* ── Cartões ─────────────────────────────────────────────────────
   A base do visual: branco levemente esbatido no rodapé, borda finíssima
   azulada e sombra em duas camadas. */
.cartao{
  position:relative;
  background:var(--cartao-alto); border:1px solid var(--borda);
  border-radius:var(--raio-gg); padding:18px;
  box-shadow:var(--sombra);
}

/* Faixa de acento no topo, como nos cartões da referência. */
.cartao.faixa{overflow:hidden}
.cartao.faixa::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--gradiente);
}

.cartao.cota{display:flex; align-items:center; gap:16px}
.cota-texto strong{display:block; font-size:15px; font-family:var(--fonte-titulo); font-weight:700}
.cota-texto p{margin:3px 0 0; color:var(--tinta-media); font-size:12.5px}

.anel{
  --p:0%;
  width:74px; height:74px; border-radius:50%; flex:none;
  background:conic-gradient(from -90deg,
    var(--cyan) 0deg, var(--indigo) 40%, var(--violeta) var(--p), var(--fundo-2) 0);
  display:grid; place-items:center;
  transition:background .4s ease;
  box-shadow:0 6px 16px -8px rgba(107,69,226,.5);
}
.anel-centro{
  width:58px; height:58px; border-radius:50%; background:var(--cartao);
  display:grid; place-items:center; text-align:center; line-height:1.1;
}
.anel-centro b{font-family:var(--fonte-mono); font-size:20px; font-weight:600}
/* Sem cota: o coral do topo do ícone, que avisa sem alarmar como um
   vermelho de erro — não é falha, é limite atingido. */
.anel.vazio-cota .anel-centro b{color:var(--coral)}
.anel-centro span{font-size:8px; color:var(--tinta-fraca); letter-spacing:.06em; text-transform:uppercase}

.cartao.lista{padding:2px 18px}
.linha{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--borda); font-size:14px;
}
.linha:last-child{border-bottom:none}
.linha span{color:var(--tinta-media)}
.linha b{font-family:var(--fonte-mono); font-variant-numeric:tabular-nums}

.cartao.restante{display:flex; align-items:center; gap:13px; padding:15px 18px}
.cartao.restante b{
  font-family:var(--fonte-mono); font-size:20px; flex:none; font-weight:600;
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cartao.restante p{margin:0; font-size:12.5px; color:var(--tinta-media)}

/* Convite à biometria: cartão dispensável na tela inicial. */
.cartao.convite{display:flex; flex-direction:column; gap:14px; padding-top:22px}
.convite-topo{display:flex; align-items:flex-start; gap:13px}
.convite-topo strong{display:block; font-size:14.5px; font-family:var(--fonte-titulo); font-weight:700}
.convite-topo p{margin:3px 0 0; font-size:12.5px; color:var(--tinta-media)}
.fechar-convite{
  position:absolute; top:14px; right:12px; z-index:2;
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--tinta-fraca); font-size:13px; line-height:1;
}
.fechar-convite:active{color:var(--tinta)}

/* ── Ladrilhos de ícone ──────────────────────────────────────────
   O elemento mais característico do padrão: quadrado arredondado com
   gradiente, ícone branco por cima, realce interno no topo e um brilho
   da própria cor por baixo. */
.ladrilho{
  width:44px; height:44px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-size:20px; line-height:1;
  color:#fff; background:var(--gradiente);
  box-shadow:var(--brilho-marca), var(--gloss);
}
.ladrilho.cyan{background:var(--gradiente-cyan); box-shadow:var(--brilho-cyan), var(--gloss)}
.ladrilho.verde{background:var(--gradiente-verde); box-shadow:var(--brilho-verde), var(--gloss)}
.ladrilho.coral{background:var(--gradiente-coral); box-shadow:var(--brilho-coral), var(--gloss)}
.ladrilho.pequeno{width:34px; height:34px; border-radius:11px; font-size:15px}

/* ── Selos ───────────────────────────────────────────────────────── */
.selo{
  font-family:var(--fonte-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; border-radius:100px; flex:none;
  background:var(--fundo-2); color:var(--tinta-media); font-weight:500;
  border:1px solid var(--borda);
}
.selo.pro,.selo.ouro{
  background:var(--gradiente); color:#fff; font-weight:600;
  border-color:transparent; box-shadow:var(--brilho-marca), var(--gloss);
}
.selo.bom{background:var(--bom-fundo); color:var(--bom); border-color:rgba(18,185,129,.2)}

/* ── Modos ───────────────────────────────────────────────────────── */
.modos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modo{
  position:relative; overflow:hidden;
  background:var(--cartao-alto); border:1px solid var(--borda); border-radius:var(--raio-g);
  padding:13px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:9px; color:var(--tinta);
  font-family:var(--fonte); box-shadow:var(--sombra);
  transition:border-color .15s ease, box-shadow .2s ease, transform .1s ease;
}
.modo:active{transform:translateY(1px)}
.modo .n{font-weight:600; font-size:13.5px; font-family:var(--fonte-titulo)}
.modo .d{font-family:var(--fonte-mono); font-size:10px; color:var(--tinta-fraca)}
.modo.escolhido{border-color:var(--foco-linha); box-shadow:var(--sombra-alta)}
.modo.escolhido::after{
  content:"✓"; position:absolute; top:12px; right:12px;
  width:20px; height:20px; border-radius:50%; background:var(--gradiente);
  color:#fff; font-size:11px; display:grid; place-items:center;
  box-shadow:var(--gloss);
}

.interruptor{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer}
.interruptor strong{font-size:14px; font-family:var(--fonte-titulo); font-weight:700}
.interruptor p{margin:2px 0 0; font-size:11.5px; color:var(--tinta-media)}
.interruptor input{position:absolute; opacity:0; width:0; height:0}
.chave{
  width:46px; height:26px; border-radius:100px; background:var(--fundo-2);
  position:relative; flex:none; transition:background .2s ease;
  border:1px solid var(--borda);
}
.chave::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(21,25,53,.3);
}
.interruptor input:checked ~ .chave{background:var(--gradiente); border-color:transparent}
.interruptor input:checked ~ .chave::after{transform:translateX(20px)}
.interruptor input:focus-visible ~ .chave{outline:2px solid var(--foco); outline-offset:2px}

/* ── Área da foto ────────────────────────────────────────────────
   Aqui o fundo é escuro de propósito: branco em volta da imagem falseia
   a percepção de brilho, e é a imagem que o usuário veio julgar. */
/*
  A prévia existe para o usuário conferir a foto que escolheu, então tem que
  mostrá-la INTEIRA. Já esteve com `object-fit:cover` numa caixa deitada e
  recortava o topo e a base de qualquer foto em retrato.

  A caixa não tem proporção fixa quando há foto: ela toma a forma da imagem.
  Assim não há corte (como no `cover`) nem tarja preta em volta (como seria
  com `contain` numa caixa de proporção diferente da foto). O teto de altura
  impede que um retrato alto empurre os botões para fora da tela.
*/
.previa{
  border-radius:var(--raio-gg); overflow:hidden; background:#11142A;
  border:1px solid var(--borda);
  display:grid; place-items:center;
  box-shadow:var(--sombra);
}
.previa:not(.tem-foto){aspect-ratio:4/3}
.previa img{
  width:auto; height:auto; max-width:100%; max-height:46vh;
  object-fit:contain; display:block;
}
.previa-vazia{color:#7F86A8; font-size:13px; margin:0; padding:0 20px; text-align:center}

.cena-scan{
  width:min(220px,62vw); aspect-ratio:1/1; border-radius:var(--raio-gg);
  position:relative; overflow:hidden; background:#11142A;
  box-shadow:var(--sombra-alta);
}
.cena-scan img{width:100%; height:100%; object-fit:contain; filter:blur(1px) brightness(.85)}
.cena-scan::after{
  content:""; position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(180deg,transparent,rgba(0,191,242,.30),transparent);
  animation:varredura 2.1s ease-in-out infinite;
}
@keyframes varredura{0%{top:-40%}100%{top:100%}}

.txt-centro h2{font-family:var(--fonte-titulo); font-weight:700; font-size:22px; margin:0}
.txt-centro .sub{color:var(--tinta-media); font-size:13.5px; margin:6px 0 0}
.nota-cota{
  background:var(--cartao-alto); border:1px solid var(--borda); border-radius:var(--raio);
  padding:13px 16px; font-size:11.5px; color:var(--tinta-media); margin:0; max-width:320px;
  box-shadow:var(--sombra);
}
.nota-cota b{font-family:var(--fonte-mono); color:var(--foco)}

.carregando{display:flex; gap:6px; justify-content:center}
.carregando i{width:7px; height:7px; border-radius:50%; background:var(--violeta); animation:pulsa 1.2s infinite}
.carregando i:nth-child(2){animation-delay:.18s; background:var(--indigo)}
.carregando i:nth-child(3){animation-delay:.36s; background:var(--cyan)}
@keyframes pulsa{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}

/* ── Comparador antes/depois ─────────────────────────────────────── */
.comparador{
  position:relative; border-radius:var(--raio-gg); overflow:hidden;
  background:#11142A; touch-action:none; user-select:none; cursor:ew-resize;
  aspect-ratio:1/1; box-shadow:var(--sombra-alta);
}
.comparador .camada{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
.comparador .depois{clip-path:inset(0 0 0 50%)}
/* O divisor e o puxador são a mira sobre a foto — brancos como os anéis
   do ícone, não o acento da interface. */
.divisor{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:4;
  background:#fff; box-shadow:0 0 14px rgba(181,186,226,.75);
}
.puxador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:40px; height:40px; border-radius:50%; background:#fff; color:var(--indigo);
  display:grid; place-items:center; font-size:16px;
  box-shadow:0 4px 16px rgba(10,14,40,.5);
}
.etiqueta{
  position:absolute; top:12px; z-index:4; font-family:var(--fonte-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:8px; background:rgba(10,13,35,.62);
  backdrop-filter:blur(6px); color:#fff;
}
.etiqueta.esq{left:12px}
.etiqueta.dir{right:12px; color:#8FE3FF}

/* ── Registro de uso (histórico sem imagens) ─────────────────────── */
.registros{display:flex; flex-direction:column; gap:8px}
.reg{
  display:flex; align-items:center; gap:13px; padding:14px 16px;
  background:var(--cartao-alto); border:1px solid var(--borda);
  border-radius:var(--raio-g); font-size:13.5px; box-shadow:var(--sombra);
}
.reg-data{display:flex; flex-direction:column; line-height:1.25; flex:none; min-width:76px}
.reg-data b{font-family:var(--fonte-mono); font-size:13px; font-variant-numeric:tabular-nums}
.reg-data span{font-family:var(--fonte-mono); font-size:10.5px; color:var(--tinta-fraca)}
.reg-modo{flex:1; color:var(--tinta-media); overflow-wrap:anywhere}
.reg .f{
  font-family:var(--fonte-mono); font-size:12px; flex:none; font-weight:600;
  color:var(--bom); background:var(--bom-fundo); padding:4px 9px; border-radius:100px;
}
.vazio{color:var(--tinta-fraca); font-size:13.5px; text-align:center; padding:30px 20px; margin:0}

/* ── Aviso de privacidade ────────────────────────────────────────── */
.cartao.privacidade{
  display:flex; gap:13px; align-items:flex-start;
  border-color:var(--foco-linha);
  background:linear-gradient(135deg, rgba(46,111,232,.07), rgba(107,69,226,.05));
}
.cartao.privacidade > span:not(.ladrilho){font-size:19px; line-height:1.1; flex:none}
.cartao.privacidade strong{display:block; font-size:14px; color:var(--foco); font-family:var(--fonte-titulo); font-weight:700}
.cartao.privacidade p{margin:4px 0 0; font-size:12px; color:var(--tinta-media)}

/* ── Consentimento ───────────────────────────────────────────────── */
.consentimento{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  font-size:12.5px; color:var(--tinta-media); line-height:1.45;
}
.consentimento input{position:absolute; opacity:0; width:0; height:0}
.consentimento .marca-check{
  width:22px; height:22px; border-radius:7px; flex:none; margin-top:1px;
  border:1.5px solid var(--borda-forte); background:var(--cartao);
  position:relative; transition:background .15s ease, border-color .15s ease;
}
.consentimento input:checked ~ .marca-check{background:var(--gradiente); border-color:transparent; box-shadow:var(--gloss)}
.consentimento input:checked ~ .marca-check::after{
  content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(42deg);
}
.consentimento input:focus-visible ~ .marca-check{outline:2px solid var(--foco); outline-offset:2px}
.consentimento b{color:var(--tinta)}
.consentimento .link{font-size:inherit}

/* ── Texto longo (termo) ─────────────────────────────────────────── */
.conteudo.texto{gap:0; max-width:38rem; margin:0 auto; width:100%}
.conteudo.texto h3{
  font-family:var(--fonte-titulo); font-weight:700; font-size:16px;
  margin:24px 0 8px; letter-spacing:-.005em;
}
.conteudo.texto p{margin:0 0 12px; font-size:14px; color:var(--tinta-media)}
.conteudo.texto p b,.conteudo.texto li b{color:var(--tinta); font-weight:600}
.conteudo.texto ul{margin:0 0 12px; padding-left:20px}
.conteudo.texto li{font-size:14px; color:var(--tinta-media); margin-bottom:7px}
.destaque{
  background:linear-gradient(135deg, rgba(46,111,232,.08), rgba(107,69,226,.06));
  border:1px solid var(--foco-linha);
  border-radius:var(--raio-g); padding:16px 18px; font-size:14px;
  color:var(--tinta-media); margin:6px 0 8px; box-shadow:var(--sombra);
}
.destaque b{color:var(--foco)}

/* ── Assinatura ──────────────────────────────────────────────────── */
.pro-topo{display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; padding-top:6px}
.pro-titulo{
  font-family:var(--fonte-titulo); font-weight:800; font-size:26px; line-height:1.12;
  margin:0; letter-spacing:-.02em;
}
.cartao.preco{
  text-align:center; border-color:var(--foco-linha);
  background:linear-gradient(135deg, rgba(46,111,232,.07), rgba(157,75,217,.06));
  box-shadow:var(--sombra-alta);
}
.cartao.preco b{
  font-family:var(--fonte-mono); font-size:32px; font-weight:600;
  background:var(--gradiente); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cartao.preco span{color:var(--tinta-media)}
.cartao.preco p{margin:3px 0 0; font-size:11.5px; color:var(--tinta-fraca)}
.beneficios{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.beneficios li{display:flex; align-items:flex-start; gap:11px; font-size:14px}
.beneficios li span{
  color:#fff; background:var(--gradiente-verde); flex:none;
  width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; box-shadow:var(--gloss);
}
.beneficios s{color:var(--tinta-fraca)}

/* ── Abas ────────────────────────────────────────────────────────── */
.abas{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around;
  padding:10px 8px calc(10px + var(--seguro-base));
  background:rgba(255,255,255,.86); backdrop-filter:blur(16px);
  border-top:1px solid var(--borda);
  box-shadow:0 -4px 20px -8px rgba(21,25,53,.10);
}
.aba{
  background:none; border:none; cursor:pointer; flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--tinta-fraca); font-family:var(--fonte); font-size:10.5px; padding:5px 0;
  transition:color .15s ease;
}
.aba span{font-size:17px; line-height:1}
.aba.ativa{color:var(--foco); font-weight:600}

/* ── Modal ───────────────────────────────────────────────────────
   Aparece quando a cota acaba. É interrupção deliberada: o usuário tocou
   em "Aprimorar" esperando um resultado, então merece saber por que não
   veio e o que fazer a respeito — um aviso que some em 3s não daria conta. */
.modal{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,19,45,.55); backdrop-filter:blur(6px);
  animation:aparece .18s ease;
}
.modal-caixa{
  background:var(--cartao-alto); border:1px solid var(--borda);
  border-radius:var(--raio-gg); padding:26px 22px 20px;
  width:100%; max-width:330px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 24px 60px -18px rgba(15,19,45,.55);
  animation:sobe-modal .22s cubic-bezier(.2,.8,.3,1);
}
.modal-caixa h3{
  font-family:var(--fonte-titulo); font-weight:700; font-size:19px;
  margin:2px 0 0; letter-spacing:-.01em;
}
.modal-caixa p{margin:0; font-size:14px; color:var(--tinta-media); line-height:1.5}
.modal-caixa .botao{margin-top:6px}
.modal-caixa .link{font-size:13.5px; color:var(--tinta-fraca); padding:6px}
@keyframes aparece{from{opacity:0} to{opacity:1}}
@keyframes sobe-modal{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}

/* ── Visor do heatmap ────────────────────────────────────────────── */
.visor{
  position:absolute; inset:0; z-index:40; background:rgba(10,13,32,.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:calc(20px + var(--seguro-topo)) 20px calc(20px + var(--seguro-base));
  backdrop-filter:blur(4px);
}
.visor img{max-width:100%; max-height:74%; object-fit:contain; border-radius:var(--raio-g);
  box-shadow:0 20px 50px -20px #000}
.visor-legenda{font-family:var(--fonte-mono); font-size:11px; color:#B9C0DC; text-align:center; margin:0}
.icone.fechar{
  position:absolute; top:calc(14px + var(--seguro-topo)); right:16px;
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff;
}

/* ── Aviso flutuante ─────────────────────────────────────────────── */
.aviso{
  position:absolute; left:16px; right:16px; bottom:calc(104px + var(--seguro-base)); z-index:50;
  background:var(--tinta); color:#fff; border-radius:var(--raio-g);
  padding:14px 17px; font-size:13.5px; text-align:center;
  box-shadow:0 16px 34px -12px rgba(21,25,53,.55);
  animation:sobe .25s ease;
}
.aviso.ruim{background:var(--ruim)}
@keyframes sobe{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* Telas baixas: o comparador não pode empurrar os botões para fora. */
@media (max-height:700px){
  .comparador{aspect-ratio:4/3}
  .cena-scan{width:min(170px,50vw)}
}


/* ── Tipo de foto (zoom / câmera simples / foto antiga) ─────────────── */
.categorias{display:grid; gap:12px}
.categoria{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--cartao-alto); border:1px solid var(--borda); border-radius:var(--raio-gg);
  padding:16px; cursor:pointer; color:var(--tinta); font-family:var(--fonte);
  box-shadow:var(--sombra);
  transition:border-color .15s ease, box-shadow .2s ease, transform .1s ease;
}
.categoria:active{transform:translateY(1px)}
.categoria .ladrilho{flex:none}
.categoria .t{display:flex; flex-direction:column; gap:3px; padding-right:26px}
.categoria .n{font-weight:700; font-size:15px; font-family:var(--fonte-titulo)}
.categoria .d{font-size:12.5px; color:var(--tinta-media); line-height:1.35}
.categoria.escolhida{border-color:var(--foco-linha); box-shadow:var(--sombra-alta)}
.categoria.escolhida::after{
  content:"✓"; position:absolute; top:14px; right:14px;
  width:20px; height:20px; border-radius:50%; background:var(--gradiente);
  color:#fff; font-size:11px; display:grid; place-items:center;
  box-shadow:var(--gloss);
}

/* Atalho "Trocar" no cabeçalho da tela de modo. */
.topo .trocar{margin-left:auto; border:0; cursor:pointer; font:inherit; font-size:12px}

/* Em foto antiga a galeria vem primeiro: a foto já existe. */
.duplo.galeria-primeiro #btn-galeria{order:-1}

/* Aviso de que colorir é interpretação, não restauração. */
.aviso-interp{
  background:rgba(224,69,60,.07); border:1px solid rgba(224,69,60,.28);
  border-radius:var(--raio-g); padding:11px 13px; line-height:1.4;
}
.aviso-interp b{color:#C43A32}


/* ── Recorte da foto antiga ───────────────────────────────────────── */
.recorte-area{
  position:relative; display:flex; justify-content:center; align-items:center;
  background:#0E1220; border-radius:var(--raio-g); overflow:hidden;
  max-height:62vh; min-height:200px; touch-action:none; user-select:none;
}
.recorte-area img{display:block; max-width:100%; max-height:62vh; object-fit:contain; pointer-events:none}
.recorte-caixa{
  position:absolute; box-sizing:border-box;
  border:2px solid #fff; border-radius:4px;
  box-shadow:0 0 0 9999px rgba(14,18,32,.62);
  cursor:move;
}
.recorte-caixa::before,.recorte-caixa::after{
  content:""; position:absolute; pointer-events:none; opacity:.55; border:0 solid rgba(255,255,255,.7);
}
.recorte-caixa::before{left:33.33%; right:33.33%; top:0; bottom:0; border-width:0 1px}
.recorte-caixa::after{top:33.33%; bottom:33.33%; left:0; right:0; border-width:1px 0}
.alca{
  position:absolute; width:28px; height:28px; box-sizing:border-box;
  border:3px solid #fff; border-radius:2px; touch-action:none;
}
.alca::after{content:""; position:absolute; inset:-14px}  /* área de toque maior */
.alca[data-alca="nw"]{left:-3px; top:-3px; border-right:0; border-bottom:0; cursor:nwse-resize}
.alca[data-alca="ne"]{right:-3px; top:-3px; border-left:0; border-bottom:0; cursor:nesw-resize}
.alca[data-alca="sw"]{left:-3px; bottom:-3px; border-right:0; border-top:0; cursor:nesw-resize}
.alca[data-alca="se"]{right:-3px; bottom:-3px; border-left:0; border-top:0; cursor:nwse-resize}