/* Juntos Outra Vez — tokens e componentes. Fonte única de cores, espaços e raios. */
:root {
  --fundo: #FBF6EE; --cartao: #FFFDF9; --tinta: #2A1A1F; --suave: #66525A; --linha: #E8DCCD; --linha-forte: #B7A08F;
  --vinho: #7A1F3D; --vinho-press: #5E1730; --vinho-hover: #8C2A49; --sobre-vinho: #FFFFFF; --marca: #5E1730;
  --rosa: #F5E6E3; --rosa-tinta: #4A1226; --ouro: #F6EBD3; --ouro-tinta: #5C4310; --ouro-forte: #7A4E0E;
  --verde: #23664A; --verde-fundo: #DDEBDF; --verde-tinta: #1A4F38; --erro: #A3261C; --erro-fundo: #FBE5E1; --erro-tinta: #8A1F17;
  --desativado: #E0D1BF; --foto-a: #CFC6B8; --foto-b: #E2C9B5; --foto-c: #DDB89A;
  --sombra-1: 0 1px 2px rgba(42,26,31,.08), 0 8px 16px rgba(94,23,48,.08), 0 24px 48px rgba(94,23,48,.14);
  --sombra-2: 0 1px 2px rgba(42,26,31,.05), 0 10px 24px rgba(94,23,48,.07);
  --sombra-botao: 0 1px 2px rgba(122,31,61,.30), 0 10px 24px rgba(122,31,61,.26);
  --serifa: Fraunces, Georgia, "Times New Roman", serif; --texto: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-s: 12px; --r-m: 18px; --r-g: 24px; --r-x: 28px; --tempo: 200ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --fundo: #1A1114; --cartao: #261A1E; --tinta: #F7EEE6; --suave: #D2C0BA; --linha: #3A2A2F; --linha-forte: #6B5560;
    --vinho: #EFC987; --vinho-press: #D9B06A; --vinho-hover: #F7DDB0; --sobre-vinho: #2A1A08; --marca: #EFC987;
    --rosa: #3A2228; --rosa-tinta: #F3D9D4; --ouro: #2E2118; --ouro-tinta: #F1DDB2; --ouro-forte: #EFC987;
    --verde: #8FD6AE; --verde-fundo: #18362A; --verde-tinta: #BFEBD2; --erro: #F0A39B; --erro-fundo: #3B1B18; --erro-tinta: #F8C9C3;
    --desativado: #3A2A2F; --foto-a: #6B625A; --foto-b: #7A6352; --foto-c: #8A6A55;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5); --sombra-2: 0 1px 2px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.32); --sombra-botao: 0 8px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="escuro"] {
  --fundo: #1A1114; --cartao: #261A1E; --tinta: #F7EEE6; --suave: #D2C0BA; --linha: #3A2A2F; --linha-forte: #6B5560;
  --vinho: #EFC987; --vinho-press: #D9B06A; --vinho-hover: #F7DDB0; --sobre-vinho: #2A1A08; --marca: #EFC987;
  --rosa: #3A2228; --rosa-tinta: #F3D9D4; --ouro: #2E2118; --ouro-tinta: #F1DDB2; --ouro-forte: #EFC987;
  --verde: #8FD6AE; --verde-fundo: #18362A; --verde-tinta: #BFEBD2; --erro: #F0A39B; --erro-fundo: #3B1B18; --erro-tinta: #F8C9C3;
  --desativado: #3A2A2F; --foto-a: #6B625A; --foto-b: #7A6352; --foto-c: #8A6A55;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5); --sombra-2: 0 1px 2px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.32); --sombra-botao: 0 8px 20px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: color-mix(in srgb, var(--vinho) 40%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
*:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--vinho) 40%, transparent); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 17px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
em { font-style: italic; font-weight: 500; }
a { color: var(--vinho); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 460px; margin: 0 auto; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 60px; padding: 8px 16px; }
.topo--passo { padding: 8px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 21px/1 var(--serifa); letter-spacing: -.3px; color: var(--marca); }
.marca img { width: 36px; height: 36px; border-radius: 10px; flex: none; box-shadow: 0 1px 2px rgba(60, 30, 20, .12), 0 4px 10px rgba(60, 30, 20, .10); }
.marca span { white-space: nowrap; }
button.marca, a.marca { min-height: 44px; margin: 0 0 0 -6px; padding: 4px 10px 4px 6px; border: 0; border-radius: 14px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 180ms ease, transform 180ms ease; }
button.marca:hover, a.marca:hover { background: color-mix(in srgb, var(--marca) 8%, transparent); }
button.marca:active, a.marca:active { transform: scale(.98); }
button.marca:focus-visible, a.marca:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button.marca, a.marca { transition: none; } button.marca:active, a.marca:active { transform: none; } }
@media (max-width: 380px) { .marca { font-size: 18px; gap: 8px; } .marca img { width: 32px; height: 32px; } }
.topo__acoes { display: flex; gap: 8px; align-items: center; }
.redondo { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid var(--linha); background: var(--cartao); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; transition: background var(--tempo), transform var(--tempo); }
.redondo:hover { background: var(--rosa); }
.redondo[aria-pressed="false"] { color: var(--suave); }
.redondo--bandeira { padding: 0; width: 44px; }
.bandeira { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--linha-forte); }
.redondo--som { gap: 8px; }
.elo { min-height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--marca); text-decoration: underline; text-underline-offset: 3px; transition: background var(--tempo); }
.elo:hover { background: var(--rosa); }
.onde { display: flex; flex-direction: column; gap: 12px; }
.onde__cartao { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-m); background: var(--ouro); color: var(--ouro-tinta); }
.onde__qr { width: 64px; height: 64px; flex: none; border-radius: 8px; border: 6px solid #FFFFFF; background: #FFFFFF conic-gradient(#2A1A1F 25%, #FFFFFF 0 50%, #2A1A1F 0 75%, #FFFFFF 0) 0 0 / 16px 16px; }
.onde__codigo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onde__codigo small { font-size: 14px; font-weight: 600; }
.onde__codigo b { font: 700 24px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 3px; }
.subtitulo { margin: 0; font: 600 22px/1.2 var(--serifa); letter-spacing: -.3px; }
.selo--topo { align-self: center; } .selo--topo .icone-topo { width: 16px; height: 16px; }
.pagar__form, .pagar__resumo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.item-compra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-m); background: var(--rosa); color: var(--rosa-tinta); font-size: 18px; }
.item-compra > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .item-compra small { font-size: 15px; }
/* O preço nunca se parte no meio ("R$" numa linha e o valor na outra"): quem cede largura é o texto, não o número. */
.item-compra > b { flex: none; white-space: nowrap; }
.metodo { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; border: 2px solid var(--vinho); background: var(--cartao); }
.metodo > span:last-child { display: flex; flex-direction: column; gap: 2px; } .metodo small { font-size: 15px; color: var(--suave); line-height: 1.4; }
.metodo__ponto { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 7px solid var(--vinho); background: var(--cartao); }
.caixa-preco { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-g); background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra-2); }
.caixa-preco__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 600; }
.pronta { display: flex; flex-direction: column; }
.pronta__lado { display: contents; }
.pronta__cabeca { order: 0; } .pronta__foto { order: 1; } .pronta__lado > :not(.pronta__cabeca) { order: 2; }
.porcento { font: 600 40px/1 var(--serifa); letter-spacing: -.8px; text-align: center; font-variant-numeric: tabular-nums; }
.trilho--medido > i { width: 0; transition: width 500ms linear; }
.acoes-centro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.elo { display: inline-flex; align-items: center; }
.pe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; padding: 8px 0; font-size: 13px; }
.pe a, .nota a { color: var(--marca); font-weight: 600; text-underline-offset: 3px; }
.pe a { min-height: 36px; display: inline-flex; align-items: center; font-weight: 500; color: var(--suave); text-decoration-color: color-mix(in srgb, var(--suave) 45%, transparent); transition: color var(--tempo); }
.pe a:hover, .pe a:focus-visible { color: var(--marca); }
.pe .elo { font-size: 13px; min-height: 36px; }
.pagina { max-width: 720px; margin: 0 auto; padding: 8px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
.pagina h1 { margin: 8px 0 0; } .pagina h2 { margin: 16px 0 0; font: 600 24px/1.2 var(--serifa); letter-spacing: -.3px; }
.pagina p, .pagina li { font-size: 17px; line-height: 1.6; } .pagina ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.pagina a { color: var(--marca); font-weight: 600; text-underline-offset: 3px; }
.pagina .cartao a.botao { color: var(--sobre-vinho); }
.heroi { display: flex; flex-direction: column; gap: 22px; }
.heroi__foto { position: relative; }
.heroi__texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.som-cartao { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--r-m); background: var(--ouro); color: var(--ouro-tinta); }
.som-cartao > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.som-cartao b { font-size: 16px; }
.som-ondas { display: flex; align-items: center; gap: 3px; height: 24px; flex: none; }
.som-ondas i { width: 3px; height: 8px; border-radius: 2px; background: currentColor; animation: onda 1100ms ease-in-out infinite; }
.som-ondas i:nth-child(2) { animation-delay: -200ms; } .som-ondas i:nth-child(3) { animation-delay: -400ms; } .som-ondas i:nth-child(4) { animation-delay: -600ms; } .som-ondas i:nth-child(5) { animation-delay: -800ms; }
.som-ondas--paradas i { animation: none; opacity: .5; }
/* O navegador segurou o som até um toque: o botão e o cartão pulsam de leve para convidar. */
.redondo--chama, .som-cartao--chama { animation: chama 1800ms ease-in-out infinite; }
@keyframes chama { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ouro-forte) 55%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ouro-forte) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .redondo--chama, .som-cartao--chama { animation: none; outline: 2px solid var(--ouro-forte); outline-offset: 2px; } }
@keyframes onda { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.redondo:active { transform: scale(.96); }
.voltar { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; }
.voltar:hover { background: var(--rosa); }
.passo { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.passo__texto { font-size: 14px; font-weight: 600; color: var(--suave); }
.trilho { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.trilho > i { display: block; height: 100%; border-radius: 3px; background: var(--vinho); transition: width 250ms; }

.trilho__1 { width: 20%; } .trilho__2 { width: 40%; } .trilho__3 { width: 60%; } .trilho__4 { width: 80%; } .trilho__5 { width: 100%; }
.icone-topo { flex: none; margin-top: 2px; }
.vao { width: 44px; flex: none; }
.gira--fixa { flex: none; }
.preco-g { font-size: 32px; font-weight: 700; letter-spacing: -.5px; }
.preco-x { font-size: 40px; font-weight: 700; letter-spacing: -.8px; }
.faixa--entre { align-items: center; justify-content: space-between; }

.conteudo { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: 8px 16px 24px; }
.conteudo--rodape { padding-bottom: 150px; }
.titulo { font: 600 34px/1.14 var(--serifa); letter-spacing: -.6px; }
.titulo--g { font-size: 38px; letter-spacing: -.8px; }
.titulo--m { font-size: 28px; letter-spacing: -.4px; }
.sub { font-size: 18px; line-height: 1.5; color: var(--suave); }
.nota { font-size: 15px; line-height: 1.45; color: var(--suave); }
.centro { text-align: center; }
.bloco { display: flex; flex-direction: column; gap: 14px; }
.cresce { flex: 1; }

.foto { border-radius: var(--r-x); background: var(--foto-c); box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.foto--hero { aspect-ratio: 4 / 5; max-height: 460px; background: var(--foto-c) var(--img-juntas, none) center 22% / cover; }
.foto--quadro { aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--foto-c) var(--img-quadro, none) center / cover; }
.foto > img, .foto > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Foto paga sendo preparada em alta qualidade: aviso no meio da moldura, no lugar da foto que ainda não chegou. */
.foto__preparando { position: absolute; inset: 0; margin: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; font-size: 15px; line-height: 1.45; color: var(--suave); }
.foto__gira { width: 28px; height: 28px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: var(--ouro-forte); animation: gira .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .foto__gira { animation: none; } }
.rotulo { position: absolute; left: 8px; bottom: 8px; font-size: 13px; font-weight: 600; background: var(--cartao); color: var(--tinta); padding: 4px 10px; border-radius: 10px; }
.rotulo--vinho { background: var(--vinho); color: var(--sobre-vinho); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exemplo { height: 156px; border-radius: var(--r-m); position: relative; }
.exemplo--a { background: var(--foto-a) var(--img-exemplo-antiga, none) center 20% / cover; } .exemplo--b { background: var(--foto-b) var(--img-exemplo-hoje, none) center 22% / cover; } .exemplo--c { background: var(--foto-c) var(--img-cena-jardim, none) center 24% / cover; height: 236px; }

.botao { min-height: 60px; padding: 0 20px; border: 0; border-radius: var(--r-m); background: var(--vinho); color: var(--sobre-vinho); font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; box-shadow: var(--sombra-botao); transition: background var(--tempo), transform var(--tempo), box-shadow var(--tempo); }
.botao:hover { background: var(--vinho-hover); }
.botao:active { background: var(--vinho-press); transform: scale(.98); }
.botao[disabled], .botao[aria-disabled="true"] { background: var(--desativado); color: var(--suave); box-shadow: none; cursor: not-allowed; transform: none; }
.botao[aria-busy="true"] { pointer-events: none; }
.botao--claro { background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--linha); box-shadow: none; min-height: 52px; font-size: 16px; font-weight: 600; }
.botao--claro:hover { background: var(--rosa); }
.botao--texto { background: transparent; color: var(--tinta); box-shadow: none; min-height: 48px; font-size: 16px; font-weight: 600; }
.botao--texto:hover { background: var(--rosa); }
.botao--verde { background: var(--verde); color: var(--fundo); box-shadow: none; }
.gira { width: 20px; height: 20px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: gira 800ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; }
.rodape__caixa { max-width: 460px; margin: 0 auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--cartao); border-top: 1px solid var(--linha); box-shadow: 0 -8px 24px rgba(42,26,31,.10); display: flex; flex-direction: column; gap: 8px; }

.passos li { display: flex; gap: 14px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 16px; }
.passos { display: flex; flex-direction: column; gap: 10px; }
.numero { width: 40px; height: 40px; flex: none; border-radius: 20px; background: var(--rosa); color: var(--marca); font: 600 20px/1 var(--serifa); display: flex; align-items: center; justify-content: center; }
.passos b { display: block; font-size: 17px; }
.passos span { font-size: 15px; color: var(--suave); line-height: 1.45; }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-2); }
.faixa { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-m); padding: 14px; font-size: 15px; line-height: 1.45; }
.faixa--rosa { background: var(--rosa); color: var(--rosa-tinta); }
.faixa--ouro { background: var(--ouro); color: var(--ouro-tinta); }
.faixa--verde { background: var(--verde-fundo); color: var(--verde-tinta); }
.faixa--erro { background: var(--erro-fundo); color: var(--erro-tinta); font-weight: 600; }
.selo { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; color: var(--verde-tinta); background: var(--verde-fundo); padding: 6px 12px; border-radius: 12px; }
.lista-ok { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.lista-ok li { display: flex; gap: 10px; align-items: center; }
.lista-ok li::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--verde); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label, .rotulo-campo { font-size: 16px; font-weight: 700; }
.entrada { height: 58px; width: 100%; border-radius: 16px; border: 1.5px solid var(--linha-forte); background: var(--cartao); padding: 0 16px; font-size: 18px; transition: border-color var(--tempo), box-shadow var(--tempo); }
.entrada:focus { outline: none; border: 2px solid var(--vinho); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vinho) 16%, transparent); }
.entrada[aria-invalid="true"] { border: 2px solid var(--erro); }
.entrada--codigo { height: 72px; font-size: 30px; font-weight: 700; letter-spacing: 8px; text-align: center; text-transform: uppercase; }
.ajuda-erro { font-size: 15px; font-weight: 600; color: var(--erro-tinta); }

.vaga { display: flex; flex-direction: column; gap: 8px; }
.vaga__alvo { height: 216px; border-radius: 22px; border: 2px dashed var(--linha-forte); background: var(--cartao); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--vinho); position: relative; overflow: hidden; padding: 0; transition: background var(--tempo), border-color var(--tempo); }
.vaga__alvo:hover { background: var(--rosa); }
.vaga__alvo--cheia { border: 0; box-shadow: var(--sombra-2); }
.vaga__alvo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vaga__bola { width: 56px; height: 56px; border-radius: 28px; background: var(--rosa); display: flex; align-items: center; justify-content: center; }
.vaga__ok { position: absolute; left: 8px; top: 8px; font-size: 13px; font-weight: 600; background: var(--verde); color: var(--fundo); padding: 5px 9px; border-radius: 10px; }
.vaga__trocar { position: absolute; right: 8px; bottom: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--cartao); color: var(--tinta); font-size: 14px; font-weight: 600; display: flex; align-items: center; }
.vaga .vaga__aviso { color: var(--erro-tinta); background: var(--erro-fundo); padding: 8px 10px; border-radius: 10px; font-weight: 600; }
.vaga b { font-size: 16px; } .vaga small { font-size: 14px; color: var(--suave); line-height: 1.4; }
.linha-opcao { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 14px; width: 100%; }
.linha-opcao:hover { background: var(--rosa); }
.linha-opcao__icone { width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--ouro); color: var(--ouro-forte); display: flex; align-items: center; justify-content: center; }
.linha-opcao__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.linha-opcao__texto b { font-size: 16px; } .linha-opcao__texto small { font-size: 14px; color: var(--suave); }
.preco-extra { font-size: 15px; font-weight: 700; color: var(--ouro-forte); white-space: nowrap; }

.grupo legend { font-size: 17px; font-weight: 700; margin-bottom: 12px; padding: 0; }
.escolha { border: 2px solid var(--linha); background: var(--cartao); border-radius: var(--r-m); font-size: 17px; font-weight: 600; min-height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; text-align: left; transition: background var(--tempo), border-color var(--tempo), transform var(--tempo); }
.escolha:hover { background: var(--rosa); }
.escolha:active { transform: scale(.98); }
.escolha[aria-pressed="true"] { border-color: var(--vinho); background: var(--rosa); }
.escolha--cena { flex-direction: column; padding: 6px 6px 12px; gap: 8px; align-items: center; font-size: 16px; font-weight: 700; }
.escolha__miniatura { display: block; width: 100%; height: 92px; border-radius: 12px; }
/* Momento do retrato: as quatro histórias com foto e o retrato livre na linha de baixo. */
.momentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.escolha--momento { align-items: stretch; }
.escolha--momento .escolha__miniatura { height: auto; aspect-ratio: 5 / 4; }
.escolha__rotulo { display: block; text-align: center; line-height: 1.25; padding: 0 4px; }
.escolha__rotulo small { margin-top: 2px; line-height: 1.35; }
.escolha--livre { padding: 0 14px; min-height: 60px; font-size: 16px; white-space: nowrap; }
.momento-pais { background: #D9C6B4 var(--img-momento-pais, none) center 30% / cover; } .momento-casamento { background: #D8CEC4 var(--img-momento-casamento, none) center 30% / cover; } .momento-avos { background: #C9C4AE var(--img-momento-avos, none) center 30% / cover; } .momento-casal { background: #D6C4B8 var(--img-momento-casal, none) center 30% / cover; }
.grupo .linha-opcao { margin-top: 8px; }
/* Quantas pessoas na foto: quatro botões iguais, número grande. */
.quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.escolha--numero { justify-content: center; padding: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Contador de pessoas: menos, número grande, mais. O valor do adicional aparece logo abaixo. */
.contador { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 8px; border: 2px solid var(--linha); border-radius: var(--r-m); background: var(--cartao); }
.contador__botao { width: 56px; height: 56px; border-radius: 16px; border: 0; display: grid; place-items: center; background: var(--rosa); color: var(--vinho); transition: background var(--tempo), transform var(--tempo), opacity var(--tempo); }
.contador__botao:hover:not(:disabled) { background: color-mix(in srgb, var(--rosa) 80%, var(--vinho)); }
.contador__botao:active:not(:disabled) { transform: scale(.94); }
.contador__botao:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; }
.contador__botao:disabled { opacity: .35; cursor: not-allowed; }
.contador__meio { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 16px; color: var(--suave); }
.contador__meio b { font-size: 32px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.contador__valor { margin: 12px 0 4px; font-size: 16px; font-weight: 600; }
.contador__valor b { color: var(--ouro-forte); white-space: nowrap; }
/* Cenários com as pessoas do momento escolhido. Sem a foto daquele momento, fica a de sempre. */
.app[data-momento="casamento"] .cena-jardim { background-image: var(--img-cena-casamento-jardim, var(--img-cena-jardim, none)); } .app[data-momento="casamento"] .cena-praia { background-image: var(--img-cena-casamento-praia, var(--img-cena-praia, none)); } .app[data-momento="casamento"] .cena-estudio { background-image: var(--img-cena-casamento-estudio, var(--img-cena-estudio, none)); }
.app[data-momento="avos"] .cena-jardim { background-image: var(--img-cena-avos-jardim, var(--img-cena-jardim, none)); } .app[data-momento="avos"] .cena-praia { background-image: var(--img-cena-avos-praia, var(--img-cena-praia, none)); } .app[data-momento="avos"] .cena-estudio { background-image: var(--img-cena-avos-estudio, var(--img-cena-estudio, none)); }
.app[data-momento="casal"] .cena-jardim { background-image: var(--img-cena-casal-jardim, var(--img-cena-jardim, none)); } .app[data-momento="casal"] .cena-praia { background-image: var(--img-cena-casal-praia, var(--img-cena-praia, none)); } .app[data-momento="casal"] .cena-estudio { background-image: var(--img-cena-casal-estudio, var(--img-cena-estudio, none)); }
.cena-jardim { background: #C9D2AE var(--img-cena-jardim, none) center 24% / cover; } .cena-praia { background: #E6C9A8 var(--img-cena-praia, none) center 24% / cover; } .cena-estudio { background: #D8C8BC var(--img-cena-estudio, none) center 20% / cover; }
.escolha__ponto { width: 22px; height: 22px; flex: none; border-radius: 11px; border: 2px solid var(--linha-forte); background: var(--cartao); }
.escolha[aria-pressed="true"] .escolha__ponto { border: 7px solid var(--vinho); }
.coluna { display: flex; flex-direction: column; gap: 8px; }
.formato { width: 22px; height: 28px; flex: none; border: 2px solid var(--marca); border-radius: 4px; }
.formato--deitada { width: 30px; height: 18px; }
.escolha small { display: block; font-size: 13px; font-weight: 400; color: var(--suave); }

.pilha { display: flex; justify-content: center; padding: 20px 8px 14px; }
.pilha > div { position: relative; flex: none; transition: transform 240ms ease; }
@media (prefers-reduced-motion: reduce) { .pilha > div { transition: none; } }
.pilha > div { width: 140px; height: 178px; border-radius: 22px; border: 5px solid var(--cartao); box-shadow: var(--sombra-1); background: var(--foto-a) center / cover; transform: rotate(-6deg); }
.pilha > div + div { background-color: var(--foto-b); transform: rotate(6deg); margin-left: -28px; }
.trilho--g { height: 16px; border-radius: 8px; }
.trilho--corre > i { width: 40%; animation: corre 1600ms ease-in-out infinite; }
@keyframes corre { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.previa { aspect-ratio: 4 / 5; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.previa--deitada { aspect-ratio: 16 / 9; }
.previa canvas { pointer-events: none; }
.previa--oculta canvas { filter: blur(28px); }
.previa__escudo { position: absolute; inset: 0; }

.pix-codigo { font: 500 14px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; max-height: 96px; overflow-y: auto; }
.pix-qr { width: 196px; height: 196px; align-self: center; border-radius: 12px; background: #FFFFFF; padding: 8px; }
.total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; }
.linha-total { display: flex; justify-content: space-between; font-size: 16px; }
.marcar { display: flex; gap: 12px; align-items: flex-start; background: var(--cartao); border: 2px solid var(--linha); border-radius: 22px; padding: 16px; }
.marcar:has(input:checked) { border-color: var(--vinho); background: var(--rosa); }
.marcar input { width: 28px; height: 28px; margin: 0; accent-color: var(--vinho); flex: none; }
.marcar span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.marcar b { font-size: 17px; } .marcar small { font-size: 15px; color: var(--suave); line-height: 1.4; }

.aviso { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; max-width: min(92vw, 420px); background: var(--tinta); color: var(--fundo); font-size: 16px; font-weight: 600; padding: 14px 18px; border-radius: 16px; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 14px 28px rgba(0,0,0,.24); }
.sem-js { padding: 24px; text-align: center; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 900px) {
  .app { max-width: 1200px; }
  .topo { height: 84px; padding: 20px 24px; } .marca { font-size: 26px; letter-spacing: -.4px; } .topo__acoes { gap: 12px; }
  .redondo--som { padding: 0 14px 0 12px; border-color: transparent; background: var(--ouro); color: var(--ouro-tinta); }
  .redondo--som:hover { background: color-mix(in srgb, var(--ouro) 80%, var(--ouro-forte)); }
  .redondo--som[aria-pressed="false"] { background: var(--cartao); border-color: var(--linha); color: var(--suave); }
  .app[data-tela="entrada"] .conteudo { gap: 88px; padding: 24px 24px 72px; }
  .heroi { flex-direction: row; align-items: center; gap: 56px; }
  .heroi__texto { flex: 1 1 440px; gap: 24px; order: 1; }
  .heroi__foto { flex: 1 1 420px; order: 2; display: flex; justify-content: center; padding: 24px 0; min-width: 0; }
  .heroi__foto .foto--hero { width: 78%; height: 560px; max-height: none; aspect-ratio: auto; border-radius: 32px; }
  .heroi__antiga { position: absolute; left: 0; top: 0; z-index: 1; width: 34%; height: 190px; border-radius: 18px; border: 6px solid var(--cartao); background: var(--foto-a) var(--img-exemplo-antiga, none) center 18% / cover; transform: rotate(-7deg); box-shadow: 0 1px 2px rgba(42,26,31,.10), 0 16px 32px rgba(94,23,48,.16); }
  .app[data-tela="entrada"] .titulo--g { font-size: 68px; line-height: 1.05; letter-spacing: -1.6px; }
  .app[data-tela="entrada"] .sub { font-size: 22px; max-width: 520px; }
  .heroi__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .heroi__acao .nota { font-size: 16px; line-height: 23px; max-width: 220px; }
  .botao--g { height: 68px; padding: 0 40px; border-radius: 20px; font-size: 21px; }
  .vantagens { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 16px; }
  .vantagens li { display: flex; gap: 8px; align-items: center; } .vantagens svg { color: var(--verde); flex: none; }
  .simples { gap: 32px; } .simples .titulo { font-size: 40px; letter-spacing: -.8px; text-align: center; }
  .simples .passos { gap: 20px; } .simples .passos li { padding: 28px; gap: 14px; border-radius: 26px; box-shadow: var(--sombra-2); }
  .simples .numero { width: 52px; height: 52px; border-radius: 26px; font-size: 26px; }
  .simples .passos b { font-size: 21px; margin-bottom: 6px; } .simples .passos span { font-size: 17px; line-height: 25px; }
  .app[data-tela="previa"] .conteudo, .app[data-tela="bilhete"] .conteudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 24px 24px 64px; }
  .app[data-tela="previa"] .conteudo { gap: 64px; }
  .app:not([data-tela="entrada"]):not([data-tela="previa"]):not([data-tela="bilhete"]):not([data-tela="pagar"]):not([data-tela="pronta"]) .conteudo:not(.pagar):not(.minhas) { max-width: 560px; width: 100%; margin: 0 auto; }
  .app[data-tela="pagar"] .conteudo, .app[data-tela="pix"] .conteudo.pagar { max-width: 1040px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 56px; align-items: start; padding: 24px 24px 64px; }
  .app[data-tela="pagar"] .titulo, .app[data-tela="pix"] .pagar .titulo { grid-column: 1 / -1; }
  .pagar__resumo { position: sticky; top: 24px; } .pagar__resumo .cartao { padding: 24px; }
  .app[data-tela="pronta"] .conteudo { max-width: 1100px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 20px 64px; align-items: start; padding: 24px 24px 64px; }
  .pronta__cabeca { grid-column: 1; grid-row: 1; } .pronta__foto { grid-column: 1; grid-row: 2; }
  .pronta__lado > :not(.pronta__cabeca) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pagar__resumo .botao { width: 100%; }
  .app[data-tela="previa"] .titulo, .app[data-tela="pronta"] .titulo { font-size: 56px; line-height: 1.06; letter-spacing: -1.2px; }
  .app[data-tela="bilhete"] .titulo--g { font-size: 64px; line-height: 1.05; }
  .titulo--g { font-size: 60px; letter-spacing: -1.5px; }
  .titulo { font-size: 44px; }
  .rodape { position: static; } .rodape__caixa { max-width: 560px; background: transparent; border: 0; box-shadow: none; padding: 0 16px 40px; }
  .conteudo--rodape { padding-bottom: 24px; }
  .so-celular { display: none !important; }
  .passos--linha { flex-direction: row; } .passos--linha li { flex: 1; flex-direction: column; }
  .largura-total { grid-column: 1 / -1; }
}
@media (max-width: 899px) { .so-computador { display: none !important; } }
@media (max-height: 480px) and (orientation: landscape) { .foto--hero { max-height: 260px; } .rodape__caixa { padding-top: 8px; } }
/* Celular em pé: a foto cede altura para o título e o preço ("sem cadastro, R$ 14,90") caberem acima do aviso de
   privacidade. Quem vem do anúncio cai aqui e precisa ler a promessa inteira antes de qualquer outra coisa. */
/* A altura limitada não pode encolher a largura (a proporção faria a foto encostar num canto): aqui ela ocupa a
   largura inteira e o recorte `cover` cuida do resto. */
@media (max-width: 520px) and (orientation: portrait) {
  .foto--hero { aspect-ratio: auto; width: 100%; height: min(38dvh, 330px); max-height: none; }
}
@media (max-width: 520px) and (max-height: 740px) and (orientation: portrait) {
  .foto--hero { height: min(30dvh, 250px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } .trilho--corre > i { width: 100%; margin: 0; } }
:root[data-theme="claro"] { color-scheme: light; } :root[data-theme="escuro"] { color-scheme: dark; }

/* Conferência do endereço antes de pagar o quadro */
.revisao { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }

/* Página do cartão */
.ct { max-width: 560px; margin-inline: auto; width: 100%; }
.ct-espera { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: 16px; }
.ct-campos { min-height: 120px; }
.ct-banco { width: 100%; height: min(70dvh, 620px); border: 1px solid var(--linha); border-radius: 16px; background: #fff; }
a.botao { text-decoration: none; }

/* Cena: como a pessoa sonha o lugar */
.sonho { display: grid; gap: 10px; }
.sonho > label { font-size: 17px; font-weight: 700; }
.entrada--texto { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.45; resize: vertical; font: inherit; }

/* Kit digital (fora do Brasil, no lugar do quadro) */
.kit .vantagens { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
.kit .vantagens li { padding-left: 26px; position: relative; }
.kit .vantagens li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 10px; height: 6px; border-left: 2.4px solid var(--verde, #23664A); border-bottom: 2.4px solid var(--verde, #23664A); transform: rotate(-45deg); }

/* Guia para imprimir e emoldurar */
.guia [hidden] { display: none; }
.guia-idiomas .elo[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.guia-tabela { width: 100%; border-collapse: collapse; font-size: 16px; margin: 8px 0 4px; }
.guia-tabela th, .guia-tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.guia-tabela th { font-size: 14px; color: var(--suave); }
.guia-pedido { margin: 8px 0; padding: 16px 18px; border-radius: 16px; background: var(--ouro); color: var(--ouro-tinta); font-size: 17px; line-height: 1.5; }
.guia-lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.guia-lista li { padding-left: 34px; position: relative; }
.guia-lista li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--linha-forte); border-radius: 6px; }
@media print {
  .topo, .guia-acao { display: none !important; }
  body, .app { background: #fff !important; color: #000 !important; }
  .guia { max-width: none; padding: 0; font-size: 12pt; }
  .guia h2 { break-after: avoid; }
  .guia-pedido { background: none; border: 1pt solid #000; color: #000; }
}

/* As fotos do site chegam protegidas e entram por variável (--img-...). Ninguém arrasta nem salva pelo menu. */
.foto, .exemplo, .escolha__miniatura, .heroi__antiga { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Passos em 5 telas (13/11): cada passo cabe na primeira dobra, no celular e no computador */
.titulo--passo { font-size: 26px; line-height: 1.16; letter-spacing: -.4px; }
.conteudo--passo { gap: 16px; }
.conteudo--passo .grupo legend { font-size: 16px; margin-bottom: 8px; }
.conteudo--passo .escolha--momento .escolha__miniatura { aspect-ratio: 3 / 2; }
.conteudo--passo .escolha--cena { padding: 6px 6px 10px; gap: 6px; }
.momento-linha { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.momento-linha .escolha--livre { flex: 0 0 auto; }
.contador--curto { flex: 1 1 0; min-width: 0; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; padding: 6px; }
.contador--curto .contador__botao { width: 44px; height: 44px; border-radius: 13px; }
.contador--curto .contador__meio { gap: 6px; font-size: 15px; }
.contador--curto .contador__meio b { font-size: 26px; }
.momento-qual { display: grid; gap: 8px; }
.momento-qual label { font-size: 16px; font-weight: 700; }
.pessoas-legenda { display: grid; gap: 4px; }
.pessoas-legenda .contador__valor { margin: 0; }
.tres--cena .escolha__miniatura { height: 96px; }
.pose { display: grid; place-items: center; color: var(--vinho); background: linear-gradient(180deg, var(--rosa), color-mix(in srgb, var(--rosa) 60%, var(--cartao))); }
.pose svg { width: 78%; max-width: 132px; height: auto; }
.par { display: grid; gap: 12px; }
.par .sonho { gap: 8px; }
.par .sonho > label { font-size: 16px; }
.entrada--texto.entrada--curta { min-height: 72px; padding: 12px 14px; }
.envio { display: grid; gap: 4px; align-content: start; min-width: 0; }
.envio__alvo { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px 14px 8px 8px; border-radius: var(--r-m); border: 2px dashed var(--linha-forte); background: var(--cartao); color: var(--tinta); text-align: left; transition: background var(--tempo), border-color var(--tempo), transform var(--tempo); }
.envio__alvo:hover { background: var(--rosa); }
.envio__alvo:active { transform: scale(.99); }
.envio__alvo:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; }
.envio__alvo--cheia { border-style: solid; border-color: var(--verde); }
.envio__figura { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--rosa); color: var(--vinho); }
.envio__figura img { width: 100%; height: 100%; object-fit: cover; }
.envio__texto { display: grid; gap: 2px; min-width: 0; }
.envio__texto b { font-size: 16px; font-weight: 700; color: var(--vinho); }
.envio__texto small { font-size: 13px; line-height: 1.35; color: var(--suave); }
.envio__tirar { justify-self: start; min-height: 40px; padding: 0 8px; font-size: 14px; }
/* Lado a lado, "Outro momento" (183 px) e o contador (precisa de 194 px para caber "2 pessoas") pedem 385 px: abaixo
   disso o contador era espremido e a palavra saía cortada ("2 pesso"). Em celular os dois ficam um sob o outro. */
@media (max-width: 440px) { .momento-linha { flex-direction: column; } .momento-linha .escolha--livre { flex: 0 0 auto; } }
@media (prefers-reduced-motion: reduce) { .envio__alvo { transition: none; } .envio__alvo:active { transform: none; } }
@media (min-width: 900px) {
  .conteudo--passo { width: 100%; max-width: 960px; margin: 0 auto; gap: 20px; padding-top: 0; }
  .titulo--passo { font-size: 34px; }
  .conteudo--passo .momentos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .conteudo--passo .escolha--momento .escolha__miniatura { aspect-ratio: 4 / 3; }
  .momento-linha { gap: 12px; margin-top: 12px; }
  .momento-linha .escolha--livre { min-width: 220px; }
  .contador--curto { flex: 0 1 320px; }
  .tres--cena { gap: 12px; }
  .tres--cena .escolha__miniatura { height: 168px; }
  .app[data-tela="como"] .tres--cena .escolha__miniatura { height: 132px; }
  .par { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .par .envio { padding-top: 30px; }
  .app[data-tela="como"] .duas { max-width: 640px; }
}
@media (min-width: 900px) {
  /* No computador os passos usam mais largura: os quatro momentos ficam numa linha só. */
  .app:not([data-tela="entrada"]):not([data-tela="previa"]):not([data-tela="bilhete"]):not([data-tela="pagar"]):not([data-tela="pronta"]) .conteudo.conteudo--passo { max-width: 880px; }
}

/* Foto subindo: a miniatura já aparece, com o aviso por cima. */
.vaga__enviando { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cartao) 72%, transparent); color: var(--vinho); font-size: 16px; font-weight: 700; }

/* ---------- Topo (13/11): ícones menores; nos passos, a barra de progresso fica na altura do centro dos ícones */
.topo .redondo { min-width: 40px; height: 40px; border-radius: 20px; padding: 0 10px; }
.topo .redondo--bandeira { width: 40px; padding: 0; }
.topo .redondo--bandeira svg { width: 24px; height: 24px; }
.topo .redondo--som svg { width: 20px; height: 20px; }
.topo--passo { gap: 8px; padding: 8px 12px; align-items: center; }
.topo--passo .voltar { width: 40px; height: 40px; border-radius: 20px; flex: none; }
.topo--passo .voltar svg { width: 22px; height: 22px; }
.topo--passo .passo { position: relative; height: 40px; flex-direction: row; align-items: center; gap: 0; min-width: 0; }
.topo--passo .passo__texto { position: absolute; left: 0; top: 0; font-size: 12px; line-height: 14px; white-space: nowrap; }
.topo--passo .passo .trilho { flex: 1; }
@media (max-width: 899px) { .topo .redondo--som { width: 40px; padding: 0; } }
@media (min-width: 900px) {
  .topo--passo { gap: 12px; padding: 20px 24px; }
  .topo--passo .passo__texto { font-size: 13px; top: -2px; }
}

/* ---------- Passos no computador (13/11): tudo na mesma linha e na mesma largura do conteúdo */
.topo--passo .trilho { height: 8px; border-radius: 4px; }
.topo--passo .trilho > i { border-radius: 4px; }
@media (min-width: 900px) {
  /* O topo acompanha a coluna do conteúdo: a seta nasce onde o texto começa e a bandeira termina onde os cartões terminam. */
  .topo--passo { width: 100%; max-width: 880px; margin: 0 auto; padding: 20px 16px; }
  .topo--passo .passo { gap: 16px; }
  .topo--passo .passo__texto { position: static; font-size: 14px; line-height: 1; flex: none; }
  .topo--passo .trilho { height: 10px; border-radius: 5px; }
  .topo--passo .trilho > i { border-radius: 5px; }
  /* "Outro momento" e o contador de pessoas dividem a largura toda, alinhados com os cartões de cima. */
  .conteudo--passo .momento-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .conteudo--passo .momento-linha .escolha--livre { min-width: 0; }
  .conteudo--passo .contador--curto { flex: none; width: auto; }
  .conteudo--passo .momento-linha > :only-child { grid-column: 1 / -1; }
  .app[data-tela="como"] .duas { max-width: none; }
}

/* ---------- Aceite da medição de anúncios (LGPD): pequeno, no canto, sem tapar o botão principal */
.aceite { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linha); background: var(--cartao); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 14px 32px rgba(0,0,0,.28); font-size: 13px; line-height: 1.45; color: var(--tinta); animation: aceite-entra 220ms ease both; }
.aceite[hidden] { display: none; }
.aceite p { margin: 0; }
.aceite a { color: var(--marca); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.aceite > div { display: flex; justify-content: flex-end; gap: 8px; }
.aceite__botao { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--linha); background: transparent; color: var(--tinta); font: 600 13px/1 var(--texto, inherit); cursor: pointer; transition: background var(--tempo), transform var(--tempo); }
.aceite__botao:hover { background: var(--rosa); }
.aceite__botao:active { transform: scale(.97); }
.aceite__botao:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; }
.aceite__botao--sim { background: var(--vinho); border-color: transparent; color: var(--sobre-vinho, #fff); }
.aceite__botao--sim:hover { background: color-mix(in srgb, var(--vinho) 88%, #000); }
@keyframes aceite-entra { from { transform: translateY(8px); } to { transform: none; } }
@media (min-width: 900px) { .aceite { left: 24px; right: auto; bottom: 24px; max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .aceite { animation: none; } .aceite__botao { transition: none; } }

/* Antirrobô invisível: a caixa só aparece se o serviço precisar de um toque da pessoa. */
.antirrobo { position: fixed; z-index: 40; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
.antirrobo:empty { display: none; }

/* ---------- Janela de excluir a foto (13/11) */
.botao--discreto { align-self: center; min-height: 40px; font-size: 14px; font-weight: 500; color: var(--suave); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--suave) 45%, transparent); text-underline-offset: 3px; }
.botao--discreto:hover { color: var(--erro-tinta, var(--marca)); }
.botao--perigo { background: var(--erro, #B3261E); color: #fff; }
.botao--perigo:hover:not(:disabled) { filter: brightness(1.08); }
.botao--perigo:disabled { opacity: .45; cursor: not-allowed; }
.modal { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--linha); border-radius: 24px; background: var(--cartao); color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.35); overflow: auto; }
.modal::backdrop { background: rgba(20, 10, 14, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-entra 200ms ease; }
.modal__caixa { display: grid; gap: 14px; padding: 24px; }
.modal__motivos { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.modal__motivos legend { padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.modal__opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 2px solid var(--linha); border-radius: var(--r-m); font-size: 16px; font-weight: 600; cursor: pointer; transition: background var(--tempo), border-color var(--tempo); }
.modal__opcao:hover { background: var(--rosa); }
.modal__opcao:has(input:checked) { border-color: var(--vinho); background: var(--rosa); }
.modal__opcao:has(input:focus-visible) { outline: 3px solid var(--vinho); outline-offset: 2px; }
.modal__opcao input { width: 20px; height: 20px; accent-color: var(--vinho); flex: none; }
.modal__mais { font-size: 15px; font-weight: 600; margin-bottom: -6px; }
.modal__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.modal__acoes .botao { min-height: 52px; }
@keyframes modal-entra { from { transform: translateY(10px) scale(.98); } to { transform: none; } }
@media (max-width: 380px) { .modal__acoes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } .modal__opcao { transition: none; } }

/* Conferência da foto por IA: selo de aviso e giro pequeno enquanto confere. */
.vaga__ok { display: inline-flex; align-items: center; gap: 6px; }
.vaga__ok--ruim { background: var(--erro, #B3261E); color: #fff; }
.gira--mini { width: 12px; height: 12px; border-width: 2px; }

/* Pose com foto (as pessoas do momento escolhido); sem foto, fica o desenho de linha. */
.pose--foto { background: var(--rosa) center 22% / cover no-repeat; }

/* Pagamento na própria tela (13/11): o Pix e o cartão abrem na lateral, com o desenho do site. */
.pix-painel { gap: 14px; }
.pix-painel .total { margin-top: 0; }
.pix-painel .pix-codigo { max-height: 112px; user-select: all; -webkit-user-select: all; }
.pix-painel .pix-qr { width: 168px; height: 168px; }
.pagar--pix .pagar__resumo { order: 1; } .pagar--pix .pagar__form { order: 2; }
.cartao-embutido { margin-top: 4px; border-radius: var(--r-m); padding: 12px; background: #FFFDF9; border: 1px solid #E8DCCD; }
/* Com o cartão aberto o painel ocupa metade da tela e perde recheio: é o que faz validade e código ficarem lado a lado. */
@media (min-width: 900px) {
  .app[data-tela="pagar"][data-metodo="cartao"] .conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
  .app[data-tela="pagar"][data-metodo="cartao"] .pagar__resumo .cartao { padding: 16px; }
}
.cartao-embutido__quadro { display: block; width: 100%; height: 520px; border: 0; background: transparent; color-scheme: normal; transition: height 200ms ease; }
@media (prefers-reduced-motion: reduce) { .cartao-embutido__quadro { transition: none; } }
html.embutido, html.embutido body { background: transparent; min-height: 0; }
html.embutido .app { min-height: 0; padding: 0; background: transparent; }
.ct--embutido { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ct--embutido .nota { margin: 0; }

/* Respiro do formulário do Mercado Pago. A documentação deles pede herança de HTML: as classes e os ids são gerados a
   cada versão e mudam de nome, então aqui só entram elementos (form, div, label, button), nunca classe deles. */
.ct-campos form > * + * { margin-top: 16px; }
.ct-campos form label { display: block; margin-bottom: 6px; line-height: 1.3; }
.ct-campos form button { margin-top: 24px; }
.ct-campos form button + * { margin-top: 16px; }
@media (min-width: 900px) { .pagar--pix .pagar__resumo, .pagar--pix .pagar__form { order: 0; } }

/* Campos seguros do Mercado Pago (número, validade e código): são quadros do site deles e não aceitam cor de fundo por
   configuração. Quem decide a cor do fundo deles é o `color-scheme`, que a página do cartão define na raiz (`cartao.ts`)
   conforme o tema do site; aqui o quadro só fica transparente para essa cor aparecer. */
.ct-campos iframe { background: transparent; }

/* Balão de dica do sistema (nunca `title` cru): vidro, seta no alvo, depois de uma pausa. */
.dica {
  position: fixed; z-index: 90; max-width: min(280px, calc(100vw - 16px)); margin: 0;
  padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--linha-forte) 45%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--cartao) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: var(--sombra-2); color: var(--tinta); font: 500 13px/1.35 var(--texto); text-align: center;
  pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 150ms ease, transform 150ms ease;
}
.dica--baixo { transform: translateY(-3px); }
.dica--vista { opacity: 1; transform: none; }
.dica::after {
  content: ''; position: absolute; left: var(--seta, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px;
  border: 1px solid color-mix(in srgb, var(--linha-forte) 45%, transparent); border-top: 0; border-left: 0; border-bottom-right-radius: 2px;
  background: color-mix(in srgb, var(--cartao) 82%, transparent); transform: rotate(45deg);
}
.dica--baixo::after { bottom: auto; top: -4px; border: 1px solid color-mix(in srgb, var(--linha-forte) 45%, transparent); border-bottom: 0; border-right: 0; border-top-left-radius: 2px; border-bottom-right-radius: 0; }
@media (prefers-reduced-motion: reduce) { .dica { transition: none; transform: none; } .dica--baixo { transform: none; } }

/* ---------- Suas fotos: a tela de quem comprou (foto atual, foto a criar, código de retorno) */
.titulo--p { font-size: 22px; letter-spacing: -.2px; }
.credito { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-g); background: var(--verde-fundo); color: var(--verde-tinta); border: 1px solid color-mix(in srgb, var(--verde) 22%, transparent); }
.credito__texto { display: flex; flex-direction: column; gap: 4px; }
.credito__texto p { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; }
.credito__texto b { font-weight: 800; }
.credito__texto span { font-size: 15px; line-height: 1.4; opacity: .9; }
.credito .botao { min-height: 56px; }
.heroi .credito { text-align: left; }
.minhas { max-width: 560px; width: 100%; margin: 0 auto; }
.minhas__foto { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--r-x); cursor: zoom-in; transition: transform var(--tempo) ease; }
.minhas__foto:hover { transform: translateY(-2px); }
.minhas__foto:active { transform: scale(.99); }
.minhas__foto:focus-visible { outline: 3px solid var(--vinho); outline-offset: 4px; }
.minhas__selo, .galeria__selo { position: absolute; top: 12px; right: 12px; padding: 5px 11px; border-radius: 999px; background: var(--tinta); color: var(--fundo); font-size: 13px; font-weight: 800; letter-spacing: .6px; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.22); }
.minhas__conta { position: absolute; left: 12px; top: 12px; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; background: var(--cartao); color: var(--tinta); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.16); }
.retorno { gap: 14px; }
.retorno__codigo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; border-radius: var(--r-m); background: var(--ouro); color: var(--ouro-tinta); }
.retorno__rotulo { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .85; }
.retorno__valor { font: 700 30px/1.1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: 4px; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }
.retorno__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.retorno__acoes .botao { gap: 8px; padding: 0 12px; font-size: 15px; }
@media (max-width: 380px) { .retorno__acoes { grid-template-columns: minmax(0, 1fr); } .retorno__valor { font-size: 26px; letter-spacing: 3px; } }
@media (min-width: 900px) {
  .app[data-tela="baixar"] .conteudo, .app[data-tela="recuperar"] .conteudo { max-width: 560px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; }
  .credito { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; }
  .credito .botao { flex: none; padding: 0 22px; }
  .minhas .credito, .heroi .credito, .pronta__lado .credito { flex-direction: column; align-items: stretch; }
}

/* ---------- Minhas fotos: a galeria (foto grande, tira de miniaturas com rolagem e os botões de baixar) */
.galeria { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--fundo); color: var(--tinta); overflow: hidden; }
.galeria::backdrop { background: rgba(20, 10, 14, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.galeria[open] { animation: galeria-entra 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes galeria-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.galeria__caixa { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 12px; }
.galeria__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.galeria__topo .titulo { font-size: 24px; }
.galeria__topo .nota { margin: 2px 0 0; font-size: 15px; }
.galeria__fechar { flex: none; width: 44px; padding: 0; }
.galeria__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.galeria__espera, .galeria__vazia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; color: var(--suave); font-size: 17px; padding: 24px; }
.galeria__vazia p { margin: 0; max-width: 34ch; }
.galeria__palco { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.galeria__foto { position: relative; margin: 0; max-width: 100%; max-height: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.galeria__foto img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 20px; background: var(--foto-c); box-shadow: var(--sombra-1); -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.galeria__foto img[hidden] { display: none; }
.galeria__carrega { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--suave); font-size: 15px; padding: 24px; }
.galeria__carrega[hidden] { display: none; }
.galeria__carrega span:last-child { max-width: 30ch; }
.galeria__seta { position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; margin-top: -22px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--linha-forte) 40%, transparent); display: grid; place-items: center; background: color-mix(in srgb, var(--cartao) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.16); cursor: pointer; transition: background var(--tempo), transform var(--tempo); }
.galeria__seta[data-passo="-1"] { left: 4px; } .galeria__seta[data-passo="1"] { right: 4px; }
.galeria__seta[hidden] { display: none; }
.galeria__seta:hover { background: var(--cartao); transform: scale(1.06); }
.galeria__seta:active { transform: scale(.96); }
.galeria__seta:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; }
.galeria__legenda { flex: none; margin: 0; text-align: center; font-size: 15px; line-height: 1.4; color: var(--suave); }
.galeria__tira { flex: none; display: flex; gap: 10px; padding: 4px 2px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--vinho) 45%, transparent) transparent; justify-content: safe center; }
.galeria__tira::-webkit-scrollbar { height: 8px; }
.galeria__tira::-webkit-scrollbar-thumb { border-radius: 4px; background: color-mix(in srgb, var(--vinho) 45%, transparent); }
.galeria__mini { flex: none; width: 60px; height: 75px; padding: 0; border-radius: 14px; border: 2px solid transparent; background: var(--foto-c); overflow: hidden; cursor: pointer; scroll-snap-align: center; opacity: .72; transition: opacity var(--tempo), border-color var(--tempo), transform var(--tempo); }
.galeria__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__mini img:not([src]) { visibility: hidden; }
.galeria__mini:hover { opacity: 1; }
.galeria__mini[aria-selected="true"] { opacity: 1; border-color: var(--vinho); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 8px 16px rgba(94,23,48,.18); }
.galeria__mini:focus-visible { outline: 3px solid var(--vinho); outline-offset: 2px; opacity: 1; }
.galeria__acoes { flex: none; display: grid; gap: 10px; }
.galeria__acoes .botao { gap: 10px; min-height: 56px; }
.galeria__acoes .botao[aria-busy="true"] { opacity: .7; cursor: progress; }
.galeria__status { flex: none; min-height: 22px; margin: 0; text-align: center; font-size: 16px; line-height: 1.4; color: var(--verde-tinta); font-weight: 600; }
.galeria__status[data-erro="true"] { color: var(--erro-tinta); }
.galeria__status:empty { min-height: 0; }
/* Celular deitado: a foto fica à esquerda e os controles à direita, para a foto não virar um selo. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .galeria__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 16px; }
  .galeria__palco { grid-row: 1 / -1; }
  .galeria__tira { justify-content: flex-start; }
  .galeria__acoes .botao { min-height: 48px; }
  .galeria__topo .titulo { font-size: 20px; }
  .galeria__caixa { gap: 8px; }
  .galeria__legenda { text-align: left; }
  .galeria__status { text-align: left; }
}
@media (min-width: 700px) and (min-height: 521px) {
  .galeria { width: min(1080px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 48px)); margin: auto; border: 1px solid var(--linha); border-radius: 28px; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.34); }
  .galeria__caixa { padding: 20px 24px 20px; gap: 14px; }
  .galeria__acoes { grid-auto-flow: column; grid-auto-columns: minmax(0, 260px); justify-content: center; }
  .galeria__mini { width: 68px; height: 85px; }
  .galeria__seta[data-passo="-1"] { left: 8px; } .galeria__seta[data-passo="1"] { right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .galeria[open] { animation: none; } .galeria__mini, .galeria__seta, .minhas__foto { transition: none; } .galeria__mini[aria-selected="true"], .minhas__foto:hover { transform: none; } }
/* Computador: a foto fica à esquerda, em tamanho de gente, e o resto ao lado (na tela das fotos e dentro da galeria). */
@media (min-width: 900px) {
  .app[data-tela="baixar"] .conteudo { max-width: 1100px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px 64px; align-items: start; padding: 24px 24px 64px; }
  .minhas { max-width: none; }
  .minhas > .minhas__foto { grid-column: 1; grid-row: 1 / span 9; position: sticky; top: 24px; }
  .minhas > :not(.minhas__foto) { grid-column: 2; }
  .minhas > .nota.centro { text-align: left; }
  .galeria__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 28px; row-gap: 14px; }
  .galeria__palco { grid-column: 1; grid-row: 1 / -1; }
  .galeria__legenda { grid-column: 2; text-align: left; font-size: 15px; }
  .galeria__tira { grid-column: 2; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; overflow-x: hidden; overflow-y: auto; padding: 4px 6px 4px 4px; scroll-snap-type: none; }
  .galeria__tira::-webkit-scrollbar { width: 8px; height: auto; }
  .galeria__acoes { grid-column: 2; grid-auto-flow: row; grid-auto-columns: auto; justify-content: stretch; }
  .galeria__status { grid-column: 2; text-align: left; }
  .galeria__espera, .galeria__vazia { grid-column: 1 / -1; }
}
/* Aceite dos termos junto do botão de criar: discreto, mas legível, com os links tocáveis. */
.nota--aceite { font-size: 13px; line-height: 1.35; }
.nota--aceite a { font-weight: 600; text-underline-offset: 2px; }
.heroi .nota.centro, .galeria__legenda, .credito__texto p { text-wrap: balance; }