/* Outlet das Alianças · /app/ · layout do "Monte o seu par" (celular primeiro; no desktop a vitrine fica à esquerda) */
.ap { min-height: 100dvh; }
.ap-vitrine { position: relative; height: 38vh; min-height: 250px; max-height: 360px; background: var(--mg-noite); color: var(--mg-marfim); overflow: hidden; }
.ap-vitrine__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s var(--mg-ease), transform .6s var(--mg-ease); }
.ap-vitrine__foto.troca { opacity: 0; transform: scale(1.02); }
.ap-vitrine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,10,15,.62) 0, rgba(42,10,15,0) 34%, rgba(42,10,15,0) 52%, rgba(42,10,15,.86) 100%); pointer-events: none; }
.ap-vitrine__topo { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: max(10px, env(safe-area-inset-top)) var(--mg-margem) 0; height: 64px; }
.ap-logo img { width: 112px; height: auto; filter: drop-shadow(0 0 14px rgba(242, 238, 230, .3)); }
.ap-volta { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; color: var(--mg-marfim); }
.ap-volta svg { width: 22px; height: 22px; }
.ap-vitrine__passo { position: absolute; z-index: 2; left: var(--mg-margem); bottom: 34px; display: flex; align-items: baseline; gap: 8px; }
.ap-vitrine__passo span { font: 400 2.6rem/1 var(--mg-f-destaque); letter-spacing: -.02em; }
.ap-vitrine__passo small { font: 600 .8125rem/1 var(--mg-f-leitura); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-marfim-2); }
.ap-vitrine__regua { position: absolute !important; z-index: 2; left: var(--mg-margem); right: var(--mg-margem); bottom: 10px; height: 16px; }

.ap-corpo { outline: none; }
.ap-miolo { max-width: 600px; margin: 0 auto; padding: 32px var(--mg-margem) calc(48px + var(--mg-rodape) + 56px); display: grid; gap: 22px; align-content: start; }
.ap-miolo.enviando { opacity: .5; pointer-events: none; transition: opacity .2s; }
.ap-h1 { font-size: clamp(3.2rem, 15vw, 4.6rem); line-height: .95; }
.ap-h2 { font-size: clamp(2.3rem, 10vw, 3.1rem); line-height: 1; }
.ap-h3 { font: 500 1.75rem/1.1 var(--mg-f-destaque); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ap-h3 small { font: 500 .9375rem/1 var(--mg-f-leitura); color: var(--mg-tinta-2); letter-spacing: 0; }
.ap-h4 { font: 600 1rem/1.3 var(--mg-f-leitura); margin: 6px 0 0; }
.ap-lead { color: var(--mg-tinta-2); font-size: 1.0625rem; max-width: 34em; margin-top: -8px; }
.ap-nota { font-size: .9375rem; color: var(--mg-tinta-2); }
.ap-acoes { display: grid; gap: 10px; justify-items: center; }
.ap-sec { display: grid; gap: 18px; padding-top: 10px; }
.ap-sec-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--mg-linha); padding-top: 22px; }
.ap-sec-topo h2 { font-size: 1.75rem; }
.ap-sec-topo small { color: var(--mg-tinta-2); font-size: .875rem; }

/* opções (linha, modelo): linhas de lista, não cartões iguais */
.ap-opcoes { display: grid; border-top: 1px solid var(--mg-linha); }
.ap-opcao {
  display: grid; gap: 4px; text-align: left; padding: 18px 40px 18px 0; position: relative; min-height: 72px;
  background: none; border: 0; border-bottom: 1px solid var(--mg-linha); cursor: pointer; transition: padding .25s var(--mg-ease), background .2s;
}
.ap-opcao::after { content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1px solid #B9B2A4; transition: border .2s, background .2s; }
.ap-opcao[aria-pressed="true"] { padding-left: 14px; background: linear-gradient(90deg, rgba(30,89,98,.07), transparent 70%); }
.ap-opcao[aria-pressed="true"]::after { border: 7px solid var(--mg-agua-funda); }
.ap-opcao__nome { font: 500 1.5rem/1.1 var(--mg-f-destaque); }
.ap-opcao__frase { color: var(--mg-tinta-2); font-size: .9688rem; line-height: 1.45; }
.ap-opcao__meta { font: 600 .8125rem/1.3 var(--mg-f-leitura); letter-spacing: .04em; color: var(--mg-agua-funda); }
.ap-opcao--foto { grid-template-columns: 76px 1fr; column-gap: 16px; align-items: center; }
.ap-opcao--foto img { width: 76px; height: 76px; object-fit: cover; grid-row: span 2; }
.ap-opcao--foto .ap-opcao__meta { grid-column: 2; }
.ap-opcao--foto > span:first-of-type { display: grid; gap: 2px; }

/* largura: a faixa desenha a espessura de verdade */
.ap-larguras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-larg { flex-direction: column; min-height: 104px; gap: 6px; padding: 14px 8px; }
.ap-larg__faixa { width: 70%; height: calc(var(--mm) * 2.2px); border-radius: 20px; background: linear-gradient(180deg, #d9cdb6, #b49f7c 55%, #8f7a58); }
.ap-larg[aria-pressed="true"] .ap-larg__faixa { background: linear-gradient(180deg, #f2eee6, #c9d9db 60%, #A6D6DC); }
.ap-larg b { font: 500 1.375rem/1 var(--mg-f-destaque); }
.ap-larg small { font-size: .8125rem; opacity: .85; }

/* medidas */
.ap-surpresa { padding: 14px 0; border-block: 1px solid var(--mg-linha); }
.ap-surpresa b { display: block; font-weight: 600; }
.ap-surpresa small { display: block; color: var(--mg-tinta-2); font-size: .9375rem; }
.ap-pessoa, .ap-grav { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.ap-pessoa + .ap-pessoa, .ap-grav + .ap-grav { padding-top: 22px; border-top: 1px solid var(--mg-linha); }
.ap-pessoa legend, .ap-grav legend { font: 500 1.375rem/1.2 var(--mg-f-destaque); padding: 0; margin-bottom: 12px; }
.ap-modo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-modo .mg-chip { padding: 0 6px; font-size: .9063rem; line-height: 1.1; text-align: center; min-height: 52px; }
.ap-numero { display: flex; align-items: center; justify-content: center; gap: 28px; }
.ap-numero output { font: 400 3.6rem/1 var(--mg-f-destaque); min-width: 2.6ch; text-align: center; }
.ap-numero output small, .ap-medir__res output small { font: 600 .875rem/1 var(--mg-f-leitura); color: var(--mg-tinta-2); margin-right: 4px; vertical-align: 1.6em; }
.ap-passo { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--mg-linha); background: var(--mg-branco); font: 300 1.75rem/1 var(--mg-f-leitura); cursor: pointer; }
.ap-regua-num { display: flex; justify-content: space-between; margin: -8px calc(100% / 27 * 2 - 6px) 0 calc(100% / 27 * 2 - 6px); font: 500 .75rem/1 var(--mg-f-leitura); color: var(--mg-tinta-2); }
.ap-comprador { margin-top: -4px; }

/* gravação */
.ap-grav__campos { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.mg-grav__vazio { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .8125rem; color: var(--mg-tinta-2); }

/* resumo */
.ap-ficha { margin: 0; border-top: 1px solid var(--mg-linha); }
.ap-ficha > div { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mg-linha); align-items: baseline; }
.ap-ficha dt { font: 600 .8125rem/1.4 var(--mg-f-leitura); letter-spacing: .1em; text-transform: uppercase; color: var(--mg-tinta-2); }
.ap-ficha dd { margin: 0; }
.ap-ficha a { font-size: .875rem; color: var(--mg-agua-funda); min-height: 32px; display: inline-flex; align-items: center; }
.ap-total { display: grid; gap: 6px; padding: 26px 22px; background: var(--mg-noite); color: var(--mg-marfim); }
.ap-total .mg-rotulo { color: var(--mg-marfim-2); }
.ap-total__v { font: 400 clamp(2.8rem, 13vw, 3.6rem)/1 var(--mg-f-destaque); letter-spacing: -.02em; }
.ap-total__fixo { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--mg-noite-linha); font-size: .9375rem; color: var(--mg-marfim-2); }
.ap-esperar h2 { font: 500 1.375rem/1.2 var(--mg-f-destaque); margin-bottom: 8px; }
.ap-esperar ul, .ap-retirado ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--mg-tinta-2); }

/* loja e visita */
.ap-lojas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-loja { display: grid; gap: 4px; align-content: start; text-align: left; padding: 16px 14px; min-height: 120px; border: 1px solid var(--mg-linha); border-radius: var(--mg-raio); background: var(--mg-branco); cursor: pointer; }
.ap-loja b { font: 500 1.375rem/1.1 var(--mg-f-destaque); }
.ap-loja small { font-size: .8125rem; color: var(--mg-tinta-2); line-height: 1.35; }
.ap-loja[aria-pressed="true"] { border-color: var(--mg-agua-funda); box-shadow: inset 0 0 0 1px var(--mg-agua-funda); background: rgba(30,89,98,.05); }
.ap-dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--mg-margem) * -1); padding: 2px var(--mg-margem); }
.ap-dias::-webkit-scrollbar { display: none; }
.ap-dia { flex: none; flex-direction: column; gap: 4px; min-width: 62px; min-height: 68px; padding: 0 8px; }
.ap-dia small { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.ap-dia b { font: 500 1.5rem/1 var(--mg-f-destaque); }
.ap-periodos, .ap-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-periodos small { font-size: .8125rem; opacity: .8; }
.ap-contato { display: grid; gap: 14px; padding-top: 6px; }

/* rodapé com o valor */
.ap-rodape {
  position: fixed; z-index: 60; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 92px; padding: 12px var(--mg-margem) calc(12px + env(safe-area-inset-bottom));
  background: rgba(244, 241, 234, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--mg-linha);
}
.ap-valor { display: grid; gap: 2px; min-width: 0; }
.ap-valor small { font-size: .78rem; color: var(--mg-tinta-2); white-space: nowrap; }
.ap-valor b { font: 500 1.75rem/1.05 var(--mg-f-destaque); letter-spacing: -.01em; }
.ap-rodape .mg-botao { flex: none; padding: 0 18px; }
.com-rodape ~ .mg-demo { display: none; }

/* início */
.ap-meus { display: grid; gap: 16px; margin-top: 18px; }
.ap-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.ap-lista a { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--mg-linha); text-decoration: none; }
.ap-lista img { width: 64px; height: 64px; object-fit: cover; }
.ap-lista b { font: 500 1.25rem/1.1 var(--mg-f-destaque); display: block; }
.ap-lista small { color: var(--mg-tinta-2); font-size: .875rem; }
.ap-vazio { color: var(--mg-tinta-2); padding: 18px 0; border-block: 1px solid var(--mg-linha); }
.ap-codigo { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.ap-codigo input { text-transform: uppercase; }

/* acompanhar */
.ap-sucesso { display: grid; gap: 12px; padding: 24px 22px; background: var(--mg-noite); color: var(--mg-marfim); }
.ap-sucesso .mg-rotulo { color: var(--mg-agua); }
.ap-sucesso__cod { font: 400 clamp(3.4rem, 17vw, 4.6rem)/1 var(--mg-f-destaque); letter-spacing: -.01em; }
.ap-sucesso .mg-botao { background: var(--mg-agua); color: var(--mg-noite); }
.ap-sucesso .ap-nota { color: var(--mg-marfim-2); }
.ap-prazo { display: grid; gap: 4px; padding: 16px 18px; border-left: 3px solid var(--mg-agua-funda); background: rgba(30,89,98,.06); }

.ap-prazo small { color: var(--mg-tinta-2); font-size: .9375rem; }
.ap-prazo.atraso { border-color: var(--mg-atraso); background: var(--mg-atraso-fundo); }
.ap-aprovar { display: grid; gap: 14px; padding: 22px 20px; background: var(--mg-branco); border: 1px solid var(--mg-linha); }
.ap-aprovar .mg-rotulo { color: var(--mg-aviso); }
.ap-aprovar__item { display: grid; gap: 6px; }
.ap-aprovar__item small { font: 600 .75rem/1 var(--mg-f-leitura); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-tinta-2); }
.ap-aprovada { display: grid; gap: 8px; justify-items: start; }
.ap-chave { display: grid; gap: 14px; padding: 20px; background: var(--mg-branco); border: 1px solid var(--mg-linha); }
.ap-retirada { display: grid; gap: 12px; padding: 22px 20px; background: var(--mg-ok-fundo); }
.ap-retirada .mg-rotulo { color: var(--mg-ok); }
.ap-retirada__quando { font: 500 1.75rem/1.1 var(--mg-f-destaque); }
.ap-retirada .mg-chip { background: rgba(255,255,255,.75); }
.ap-retirada .mg-chip[aria-pressed="true"] { background: var(--mg-agua-funda); }
.ap-retirada .ap-dias { margin: 0 -20px; padding: 2px 20px; }
.ap-retirado { display: grid; gap: 12px; }
.ap-certificado { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--mg-linha); background: var(--mg-branco) radial-gradient(circle at 100% 0, rgba(166,214,220,.35), transparent 50%); }
.ap-certificado b { font: 500 1.375rem/1.1 var(--mg-f-destaque); }
.ap-certificado small { color: var(--mg-tinta-2); }

/* medir no celular (diálogo) */
.ap-medir { width: 100%; max-width: 600px; height: 100dvh; max-height: none; margin: 0 auto; padding: 0; border: 0; background: var(--mg-perola); color: var(--mg-tinta); }
.ap-medir::backdrop { background: rgba(42, 10, 15, .6); }
.ap-medir__passo { display: grid; gap: 16px; padding: 56px var(--mg-margem) 32px; }
.ap-medir h2 { font-size: 2.1rem; }
.ap-medir h2 em { font-style: italic; }
.ap-medir__fechar { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border: 0; background: none; font: 300 2rem/1 var(--mg-f-leitura); cursor: pointer; }
.ap-cartao { height: 0; padding-bottom: 0; aspect-ratio: auto; min-height: 120px; max-width: 100%; margin-left: calc(var(--mg-margem) * -1); border: 2px dashed var(--mg-agua-funda); border-left: 0; border-radius: 0 12px 12px 0; display: grid; place-items: center; background: rgba(30,89,98,.06); }
.ap-cartao span { font: 600 .8125rem/1 var(--mg-f-leitura); letter-spacing: .14em; text-transform: uppercase; color: var(--mg-agua-funda); }
.ap-slider { width: 100%; height: 44px; accent-color: var(--mg-agua-funda); }
.ap-circulo { display: grid; place-items: center; height: 300px; background: radial-gradient(circle, #fff 0, var(--mg-perola) 70%); }
.ap-circulo i { display: block; border-radius: 50%; border: 2px solid var(--mg-agua-funda); box-shadow: 0 0 0 1px rgba(30,89,98,.2), inset 0 0 0 1px rgba(30,89,98,.2); }
.ap-medir__res { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.ap-medir__res output { font: 400 3.4rem/1 var(--mg-f-destaque); }
.ap-medir__res small { color: var(--mg-tinta-2); }

@media (min-width: 900px) {
  .ap { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
  .ap-vitrine { position: sticky; top: 0; height: 100dvh; max-height: none; }
  .ap-vitrine__passo span { font-size: 4rem; }
  .ap-miolo { padding-top: 72px; }
  .ap-rodape { left: max(380px, 44%); }
  .ap-larguras { grid-template-columns: repeat(6, 1fr); }
}
.ap-prazo > span { font: 500 1.5rem/1.1 var(--mg-f-destaque); }
.ap-prazo span.mg-ex { font: 600 .6875rem/1 var(--mg-f-leitura); }
.ap-pessoa + .ap-pessoa, .ap-grav + .ap-grav { border-top: 0; padding-top: 26px; background: linear-gradient(var(--mg-linha), var(--mg-linha)) top / 100% 1px no-repeat; }
.ap-pessoa legend, .ap-grav legend { float: left; width: 100%; }
/* correção 4: o início do app abre no pérola, com o mesmo par da abertura do site (sem bloco escuro) */
.ap-vitrine--perola { background: var(--mg-perola); color: var(--mg-tinta); height: 36vh; max-height: 40vh; }
.ap-vitrine--perola::after { display: none; }
.ap-vitrine--perola .ap-vitrine__foto { object-fit: contain; object-position: 50% 70%; opacity: 1; mix-blend-mode: darken; top: 40px; height: calc(100% - 40px);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.ap-vitrine--perola .ap-logo img { filter: brightness(.12); }
@media (min-width: 900px) { .ap-vitrine--perola { height: auto; max-height: none; } }

/* medir: ajuste fino com − e + dos dois lados do deslizador */
.ap-medir { overflow-y: auto; }
.ap-ajuste { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; }
.ap-ajuste .ap-passo { width: 52px; height: 52px; }
.ap-circulo { height: min(300px, 42vh); }
/* os dois passos do medir apareciam juntos: display:grid vencia o atributo hidden */
.ap-medir__passo[hidden] { display: none; }

/* números do app (valor, número do anel, código do pedido, datas) em Figtree com largura fixa:
   a Bodoni fica só nos títulos; nos números as hastes finas confundiam 1, 7 e l */
.ap-numero output, .ap-total__v, .ap-valor b, .ap-sucesso__cod, .ap-medir__res output, .ap-dia b, .ap-larg b,
.ap-prazo > span, .ap-vitrine__passo span, .ap-retirada__quando, .mg-num {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; font-variation-settings: normal;
}
.ap-numero output, .ap-medir__res output { font-size: 3rem; }
.ap-total__v, .ap-sucesso__cod { font-size: clamp(2.4rem, 11vw, 3.2rem); }