/* Componente "celular" — moldura, notch e as telas do app redesenhadas em HTML.
   Escala por container query: 1u = 1px do desenho original de 430px de largura.
   Usado apenas por index.html. */

.phone-frame {
    border: 12px solid #191c1e;
    border-radius: 48px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    background: #fff;
}
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34.9cqw;
    height: 6.98cqw;
    background: #191c1e;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

/* Telas dos celulares: modelo 3 (BeHancer) refeito em HTML, nitido em qualquer densidade.
   1u = 1px do desenho original, cuja tela mede 430px de largura. */
.phone-frame { container-type: inline-size; }
.phone-screen {
    --u: 0.642px;
    --texto: #0F172A;
    --texto-apoio: #475569;
    --texto-fraco: #6B6B7A;
    --rosa: #EC4899;
    --borda: #DCE3ED;
    --gradiente: linear-gradient(135deg, #D97757, #EC4899, #B044E5);
    --fatia: calc(var(--u) * 74);
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: #fff; color: var(--texto);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: calc(var(--u) * 14); line-height: 1.4;
    overflow: hidden;
}
@supports (width: 1cqw) { .phone-screen { --u: 0.23256cqw; } }
.phone-screen .icone { flex: none; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.m3-avatar { border-radius: 999px; background: var(--gradiente); flex: none; width: calc(var(--u) * 108); height: calc(var(--u) * 108); padding: calc(var(--u) * 3.5); }
.m3-avatar span {
    width: 100%; height: 100%; border-radius: 999px; background: var(--gradiente);
    box-shadow: inset 0 0 0 calc(var(--u) * 3.5) #fff;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: calc(var(--u) * 46);
}
.m3-selo-live {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
    background: var(--gradiente); color: #fff;
    font-size: calc(var(--u) * 10.5); font-weight: 700; letter-spacing: calc(var(--u) * 1.1);
    text-transform: uppercase; border-radius: 999px;
    padding: calc(var(--u) * 5) calc(var(--u) * 12) calc(var(--u) * 5) calc(var(--u) * 10);
}
.m3-ponto { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 999px; background: #fff; animation: pulsar 1.8s ease-in-out infinite; flex: none; }
.m3-pilula { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 12.5); color: var(--texto-apoio); }
.m3-nao-afiliado { text-align: center; font-size: calc(var(--u) * 11.5); color: var(--texto-fraco); }

/* Tela 1 — a porta de entrada pelo @ */
.m3-porta { align-items: center; justify-content: center; text-align: center; padding: calc(var(--u) * 48) calc(var(--u) * 34); }
.m3-identidade { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 13); }
.m3-loja { font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: calc(var(--u) * 0.1); }
.m3-loja::first-letter { text-transform: uppercase; }
.m3-titulo { font-size: calc(var(--u) * 34); line-height: 1.14; font-weight: 700; letter-spacing: calc(var(--u) * -0.7); margin: calc(var(--u) * 36) 0 0; }
.m3-texto { font-size: calc(var(--u) * 15); line-height: 1.55; color: var(--texto-apoio); margin: calc(var(--u) * 12) 0 0; max-width: 31ch; }
.m3-campo-arroba {
    width: 100%; margin-top: calc(var(--u) * 32); flex: none;
    display: flex; align-items: center; height: calc(var(--u) * 58);
    background: #F3F3F7; border: calc(var(--u) * 1.5) solid transparent; border-radius: 999px;
    padding-left: calc(var(--u) * 20);
}
.m3-arroba-marca { font-size: calc(var(--u) * 17); font-weight: 700; color: var(--texto-fraco); }
.m3-entrada { flex: 1; padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 16); color: #9A9AA8; text-align: left; }
.m3-cta {
    width: 100%; height: calc(var(--u) * 58); flex: none; margin-top: calc(var(--u) * 12);
    display: flex; align-items: center; justify-content: center;
    background: var(--gradiente); color: #fff; border-radius: 999px;
    font-size: calc(var(--u) * 16.5); font-weight: 700;
    box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(236, 72, 153, .28);
}
.m3-porta .m3-pilula { margin-top: calc(var(--u) * 24); }
.m3-porta .m3-nao-afiliado { margin-top: calc(var(--u) * 14); }

/* Tela 2 — o catálogo ao fundo */
.m3-catalogo { display: block; overflow: hidden; }
.m3-topo { display: flex; align-items: center; gap: calc(var(--u) * 11); padding: calc(var(--u) * 48) calc(var(--u) * 22) 0; }
.m3-topo .m3-avatar { width: calc(var(--u) * 34); height: calc(var(--u) * 34); padding: calc(var(--u) * 2); }
.m3-topo .m3-avatar span { background: var(--rosa); box-shadow: inset 0 0 0 calc(var(--u) * 2) #fff; font-size: calc(var(--u) * 13); }
.m3-topo-nome { font-size: calc(var(--u) * 14.5); font-weight: 700; letter-spacing: calc(var(--u) * -0.1); }
.m3-topo-nome::first-letter { text-transform: uppercase; }
.m3-topo-apoio { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12.5); color: var(--rosa); font-weight: 600; margin-top: calc(var(--u) * 1); }
.m3-ponto-vivo { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 999px; background: var(--rosa); animation: pulsar 1.8s ease-in-out infinite; flex: none; }
.m3-destaque {
    margin: calc(var(--u) * 18) calc(var(--u) * 22) 0; padding: calc(var(--u) * 1.5);
    border-radius: calc(var(--u) * 26); background: var(--gradiente);
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(236, 72, 153, .16);
}
.m3-destaque-miolo { display: flex; gap: calc(var(--u) * 15); padding: calc(var(--u) * 13); border-radius: calc(var(--u) * 24.5); background: #fff; }
.m3-destaque-foto { width: calc(var(--u) * 116); flex: none; aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 17); overflow: hidden; background: #F1F5F9; }
.m3-destaque-corpo { display: flex; flex-direction: column; min-width: 0; padding: calc(var(--u) * 3) 0; }
.m3-agora {
    align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
    background: var(--gradiente); color: #fff; font-size: calc(var(--u) * 10.5); font-weight: 700;
    letter-spacing: calc(var(--u) * 0.7); text-transform: uppercase; border-radius: 999px;
    padding: calc(var(--u) * 5) calc(var(--u) * 11) calc(var(--u) * 5) calc(var(--u) * 9);
}
.m3-agora .m3-ponto-vivo { background: #fff; }
.m3-destaque-nome { font-size: calc(var(--u) * 15); font-weight: 600; line-height: 1.32; margin-top: calc(var(--u) * 11); }
.m3-destaque-preco { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * -0.3); margin-top: calc(var(--u) * 6); }
.m3-destaque-saldo { font-size: calc(var(--u) * 12); color: var(--texto-fraco); margin-top: calc(var(--u) * 3); }
.m3-cod-chip {
    display: inline-block; align-self: flex-start; margin-top: auto;
    font: 700 calc(var(--u) * 11)/1 ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: calc(var(--u) * 0.3); color: #fff; background: var(--gradiente);
    border-radius: 999px; padding: calc(var(--u) * 5) calc(var(--u) * 9); flex: none;
}
.m3-cabecalho-lista { padding: calc(var(--u) * 30) calc(var(--u) * 22) 0; }
.m3-cabecalho-lista h4 { font-size: calc(var(--u) * 25); line-height: 1.15; font-weight: 700; letter-spacing: calc(var(--u) * -0.5); margin: 0; }
.m3-cabecalho-lista p { font-size: calc(var(--u) * 14); color: var(--texto-apoio); margin: calc(var(--u) * 6) 0 0; }
.m3-filtros { display: flex; gap: calc(var(--u) * 3); margin: calc(var(--u) * 18) calc(var(--u) * 22) 0; padding: calc(var(--u) * 4); background: #F2F2F6; border-radius: 999px; }
.m3-filtro {
    flex: 1 1 auto; min-width: 0; height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 10);
    display: flex; align-items: center; justify-content: center; border-radius: 999px;
    color: var(--texto-apoio); font-size: calc(var(--u) * 13); font-weight: 600; white-space: nowrap;
}
.m3-filtro-ativo { background: var(--gradiente); color: #fff; font-weight: 700; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(236, 72, 153, .30); }
.m3-grade { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 24) calc(var(--u) * 14); padding: calc(var(--u) * 20) calc(var(--u) * 22) 0; }
.m3-produto { display: flex; flex-direction: column; min-width: 0; }
.m3-produto-foto { display: block; aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 20); overflow: hidden; background: #F1F5F9; }
.m3-produto-nome { font-size: calc(var(--u) * 13.5); font-weight: 600; line-height: 1.35; margin-top: calc(var(--u) * 11); }
.m3-produto-linha { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 7); }
.m3-produto-preco { font-size: calc(var(--u) * 15.5); font-weight: 700; letter-spacing: calc(var(--u) * -0.2); }
.m3-produto .m3-cod-chip { margin-top: 0; font-size: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 8); }
.m3-foto-cheia { width: 100%; height: 100%; object-fit: cover; display: block; }

.m3-barra {
    position: absolute; z-index: 4; left: calc(var(--u) * 20); right: calc(var(--u) * 20);
    bottom: calc(var(--u) * 22); height: calc(var(--u) * 70);
    background: #17171D; border-radius: 999px;
    box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(11, 11, 15, .28);
}
.m3-abas { display: flex; align-items: center; height: 100%; padding: 0 calc(var(--u) * 10); }
.m3-aba {
    flex: 1; min-width: 0; height: calc(var(--u) * 54);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--u) * 5); border-radius: calc(var(--u) * 18); color: #fff;
}
.m3-aba-rotulo { display: block; height: calc(var(--u) * 13); font-size: calc(var(--u) * 10.5); line-height: calc(var(--u) * 13); font-weight: 600; letter-spacing: calc(var(--u) * 0.1); }
.m3-aba-ativa .m3-aba-rotulo { font-weight: 700; }
.m3-aba-ativa .m3-aba-icone { opacity: 0; }
.m3-marca {
    position: absolute; top: calc(var(--u) * -22); left: calc(var(--u) * 10);
    margin-left: calc(var(--fatia) / 2 - var(--u) * 29);
    width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 999px;
    background: var(--gradiente); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(236, 72, 153, .42);
    transform: translateX(calc(var(--i, 0) * var(--fatia)));
}

/* Telas 2, 4 e 5 da jornada */
.m3-topo-tela { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 46) calc(var(--u) * 22) calc(var(--u) * 4); }
.m3-redondo { width: calc(var(--u) * 38); height: calc(var(--u) * 38); flex: none; border-radius: 999px; border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; color: var(--texto); }
.m3-topo-tela h4 { font-size: calc(var(--u) * 19); font-weight: 700; letter-spacing: calc(var(--u) * -0.3); margin: 0; }
.m3-topo-tela p { font-size: calc(var(--u) * 12.5); color: var(--texto-fraco); margin: calc(var(--u) * 2) 0 0; }

.m3-prazo {
    display: flex; align-items: center; gap: calc(var(--u) * 8);
    margin: calc(var(--u) * 14) calc(var(--u) * 22) 0; padding: calc(var(--u) * 11) calc(var(--u) * 14);
    border-radius: calc(var(--u) * 16); background: #FFF7FD; border: 1px solid #FFE1F3;
    color: var(--rosa); font-size: calc(var(--u) * 12.5); font-weight: 600;
}
.m3-prazo b { margin-left: auto; font-variant-numeric: tabular-nums; }

.m3-itens { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 22) 0; }
.m3-item { display: flex; gap: calc(var(--u) * 13); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 22); border: 1px solid #F1F5F9; background: #fff; }
.m3-item-foto { width: calc(var(--u) * 76); flex: none; aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 16); overflow: hidden; background: #F1F5F9; }
.m3-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m3-item-nome { font-size: calc(var(--u) * 14); font-weight: 600; line-height: 1.3; }
.m3-item-chips { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 8); }
.m3-item-tam { border: 1px solid var(--borda); border-radius: 999px; padding: calc(var(--u) * 4) calc(var(--u) * 9); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--texto-apoio); }
.m3-item-baixo { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 8); margin-top: auto; padding-top: calc(var(--u) * 10); }
.m3-contagem { display: flex; align-items: center; gap: calc(var(--u) * 8); border: 1px solid var(--borda); border-radius: 999px; padding: calc(var(--u) * 3) calc(var(--u) * 8); }
.m3-contagem span { min-width: calc(var(--u) * 14); text-align: center; font-size: calc(var(--u) * 13); font-weight: 700; }
.m3-contagem i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 999px; background: #17171D; color: #fff; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 14); font-weight: 700; line-height: 0; }
.m3-item-total { font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: calc(var(--u) * -0.3); }

.m3-resumo { margin: calc(var(--u) * 18) calc(var(--u) * 22) 0; padding: calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 22); background: #F1F5F9; }
.m3-resumo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 13.5); }
.m3-resumo-linha + .m3-resumo-linha { margin-top: calc(var(--u) * 9); }
.m3-resumo-fraco { color: var(--texto-fraco); font-size: calc(var(--u) * 12.5); }
.m3-resumo-total { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 13); padding-top: calc(var(--u) * 13); border-top: 1px solid var(--borda); font-size: calc(var(--u) * 14.5); font-weight: 700; }
.m3-resumo-total strong { font-size: calc(var(--u) * 21); letter-spacing: calc(var(--u) * -0.5); }
.m3-fechar { position: absolute; z-index: 4; left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 116); height: calc(var(--u) * 60); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9); background: var(--gradiente); color: #fff; border-radius: 999px; font-size: calc(var(--u) * 16); font-weight: 700; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(236, 72, 153, .34); }

/* Tela 03 — a peça aberta sobre o catálogo, como no modelo 3 */
.m3-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(8px) saturate(1.04); transform: scale(1.04); }
.m3-fundo::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 15, .46); }
.m3-fundo > .phone-screen { position: absolute; inset: 0; }
.m3-cartao {
    position: relative; z-index: 1; margin-top: calc(var(--u) * 74);
    min-height: calc(100% - var(--u) * 74); padding: calc(var(--u) * 44) 0 calc(var(--u) * 116);
    background: #fff; filter: drop-shadow(0 calc(var(--u) * -5) calc(var(--u) * 14) rgba(11, 11, 15, .22));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120L0 72L0.1 70.1L0.3 68.2L0.6 66.3L1.0 64.4L1.6 62.6L2.3 60.8L3.1 59.1L4.1 57.5L5.1 55.9L6.3 54.3L7.5 52.9L8.9 51.5L10.3 50.3L11.9 49.1L13.5 48.1L15.1 47.1L16.8 46.3L18.6 45.6L20.4 45.0L22.3 44.6L24.2 44.3L26.1 44.1L28.0 44.0L154.2 44L155.3 44.0L156.4 43.8L157.5 43.7L158.6 43.4L159.7 43.0L160.7 42.6L161.7 42.1L162.7 41.6L163.6 41.0L164.5 40.3L165.3 39.5L166.1 38.7L166.8 37.9L167.5 37.0L168.0 36.0L168.6 35.1L169.0 34.0L169.4 33.0L170.6 29.9L171.9 26.8L173.5 23.9L175.3 21.1L177.3 18.4L179.4 15.8L181.7 13.4L184.2 11.2L186.9 9.1L189.6 7.3L192.5 5.6L195.5 4.1L198.6 2.9L201.8 1.8L205.0 1.0L208.3 0.5L211.7 0.1L215.0 0.0L218.3 0.1L221.7 0.5L225.0 1.0L228.2 1.8L231.4 2.9L234.5 4.1L237.5 5.6L240.4 7.3L243.1 9.1L245.8 11.2L248.3 13.4L250.6 15.8L252.7 18.4L254.7 21.1L256.5 23.9L258.1 26.8L259.4 29.9L260.6 33.0L261.0 34.0L261.4 35.1L262.0 36.0L262.5 37.0L263.2 37.9L263.9 38.7L264.7 39.5L265.5 40.3L266.4 41.0L267.3 41.6L268.3 42.1L269.3 42.6L270.3 43.0L271.4 43.4L272.5 43.7L273.6 43.8L274.7 44.0L275.8 44.0L402 44L403.9 44.1L405.8 44.3L407.7 44.6L409.6 45.0L411.4 45.6L413.2 46.3L414.9 47.1L416.5 48.1L418.1 49.1L419.7 50.3L421.1 51.5L422.5 52.9L423.7 54.3L424.9 55.9L425.9 57.5L426.9 59.1L427.7 60.8L428.4 62.6L429.0 64.4L429.4 66.3L429.7 68.2L429.9 70.1L430.0 72.0L430 120Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
    -webkit-mask-size: 100% calc(var(--u) * 120), 100% calc(100% - var(--u) * 120 + 1px);
    -webkit-mask-position: top, 0 calc(var(--u) * 120 - 1px);
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120L0 72L0.1 70.1L0.3 68.2L0.6 66.3L1.0 64.4L1.6 62.6L2.3 60.8L3.1 59.1L4.1 57.5L5.1 55.9L6.3 54.3L7.5 52.9L8.9 51.5L10.3 50.3L11.9 49.1L13.5 48.1L15.1 47.1L16.8 46.3L18.6 45.6L20.4 45.0L22.3 44.6L24.2 44.3L26.1 44.1L28.0 44.0L154.2 44L155.3 44.0L156.4 43.8L157.5 43.7L158.6 43.4L159.7 43.0L160.7 42.6L161.7 42.1L162.7 41.6L163.6 41.0L164.5 40.3L165.3 39.5L166.1 38.7L166.8 37.9L167.5 37.0L168.0 36.0L168.6 35.1L169.0 34.0L169.4 33.0L170.6 29.9L171.9 26.8L173.5 23.9L175.3 21.1L177.3 18.4L179.4 15.8L181.7 13.4L184.2 11.2L186.9 9.1L189.6 7.3L192.5 5.6L195.5 4.1L198.6 2.9L201.8 1.8L205.0 1.0L208.3 0.5L211.7 0.1L215.0 0.0L218.3 0.1L221.7 0.5L225.0 1.0L228.2 1.8L231.4 2.9L234.5 4.1L237.5 5.6L240.4 7.3L243.1 9.1L245.8 11.2L248.3 13.4L250.6 15.8L252.7 18.4L254.7 21.1L256.5 23.9L258.1 26.8L259.4 29.9L260.6 33.0L261.0 34.0L261.4 35.1L262.0 36.0L262.5 37.0L263.2 37.9L263.9 38.7L264.7 39.5L265.5 40.3L266.4 41.0L267.3 41.6L268.3 42.1L269.3 42.6L270.3 43.0L271.4 43.4L272.5 43.7L273.6 43.8L274.7 44.0L275.8 44.0L402 44L403.9 44.1L405.8 44.3L407.7 44.6L409.6 45.0L411.4 45.6L413.2 46.3L414.9 47.1L416.5 48.1L418.1 49.1L419.7 50.3L421.1 51.5L422.5 52.9L423.7 54.3L424.9 55.9L425.9 57.5L426.9 59.1L427.7 60.8L428.4 62.6L429.0 64.4L429.4 66.3L429.7 68.2L429.9 70.1L430.0 72.0L430 120Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
    mask-size: 100% calc(var(--u) * 120), 100% calc(100% - var(--u) * 120 + 1px);
    mask-position: top, 0 calc(var(--u) * 120 - 1px);
    mask-repeat: no-repeat, no-repeat;
}
.m3-fechar-peca {
    position: absolute; z-index: 3; top: calc(var(--u) * 118); left: 50%; transform: translate(-50%, -50%);
    width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 999px; background: #fff; color: var(--texto);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(0, 0, 0, .12);
}
.m3-palco { position: relative; margin: calc(var(--u) * 14) calc(var(--u) * 14) 0; border-radius: calc(var(--u) * 22); overflow: hidden; background: #F1F5F9; }
.m3-palco-foto { display: block; height: calc(var(--u) * 372); background: #fff; }
.m3-palco-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m3-miniaturas { position: absolute; top: 50%; right: calc(var(--u) * 12); transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 18); background: rgba(255, 255, 255, .72); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(11, 11, 15, .10); }
.m3-mini { width: calc(var(--u) * 46); height: calc(var(--u) * 58); border-radius: calc(var(--u) * 12); overflow: hidden; background: #fff; opacity: .55; }
.m3-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m3-mini-ativa { opacity: 1; box-shadow: 0 0 0 2px var(--rosa); }
.m3-peca-texto { padding: calc(var(--u) * 18) calc(var(--u) * 24) 0; }
.m3-peca-alto { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 14); }
.m3-peca-nome { flex: 1; min-width: 0; font-size: calc(var(--u) * 22); line-height: 1.18; font-weight: 700; letter-spacing: calc(var(--u) * -0.6); margin: 0; }
.m3-peca-preco { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * -0.4); white-space: nowrap; }
.m3-peca-texto > .m3-cod-chip { margin-top: calc(var(--u) * 9); }
.m3-escolhas { display: flex; align-items: flex-start; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 6); }
.m3-escolha { min-width: 0; }
.m3-escolha-cor { margin-left: auto; }
.m3-secao { display: flex; align-items: baseline; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 20); }
.m3-secao-titulo { font-size: calc(var(--u) * 14.5); font-weight: 700; }
.m3-secao-apoio { font-size: calc(var(--u) * 12); color: var(--texto-fraco); }
.m3-tamanhos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 11); }
.m3-tamanho { min-width: calc(var(--u) * 50); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 16); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; color: var(--texto-apoio); font-size: calc(var(--u) * 13.5); font-weight: 600; }
.m3-tamanho-ativo { background: var(--gradiente); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(236, 72, 153, .30); }
.m3-cores { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 11); }
.m3-cor { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: none; border: 1.5px solid var(--borda); border-radius: 999px; background: var(--tinta); color: #fff; display: flex; align-items: center; justify-content: center; }
.m3-cor-ativa { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--rosa); }
.m3-descricao { margin-top: calc(var(--u) * 22); border-top: 1px solid #F1F5F9; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); padding: calc(var(--u) * 15) 0; font-size: calc(var(--u) * 14.5); font-weight: 700; }
.m3-descricao::after { content: ""; width: calc(var(--u) * 9); height: calc(var(--u) * 9); flex: none; margin-right: calc(var(--u) * 4); border-right: 2px solid var(--texto-fraco); border-bottom: 2px solid var(--texto-fraco); transform: translateY(calc(var(--u) * -2)) rotate(45deg); }
.m3-comprar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 22); background: linear-gradient(to top, #fff 62%, rgba(255, 255, 255, 0)); }
.m3-passo-qtd { width: calc(var(--u) * 40); height: calc(var(--u) * 40); flex: none; border-radius: 999px; background: #17171D; color: #fff; display: flex; align-items: center; justify-content: center; }
.m3-passo-frio { background: var(--borda); color: var(--texto-fraco); }
.m3-numero { min-width: calc(var(--u) * 26); text-align: center; font-size: calc(var(--u) * 16); font-weight: 700; font-variant-numeric: tabular-nums; }
.m3-add { display: flex; align-items: center; justify-content: center; flex: 1; height: calc(var(--u) * 56); border-radius: 999px; background: var(--gradiente); color: #fff; font-size: calc(var(--u) * 16); font-weight: 700; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(236, 72, 153, .32); }


/* Telas 5 a 10 da jornada: cadastro, frete, pedidos e meus dados */
.m3-secao-topo { padding: calc(var(--u) * 50) calc(var(--u) * 22) 0; }
.m3-secao-topo h4 { font-size: calc(var(--u) * 26); line-height: 1.15; font-weight: 700; letter-spacing: calc(var(--u) * -0.5); margin: 0; }
.m3-secao-topo p { font-size: calc(var(--u) * 14); line-height: 1.5; color: var(--texto-apoio); margin: calc(var(--u) * 7) 0 0; }

.m3-grupo { margin: calc(var(--u) * 24) calc(var(--u) * 22) 0; display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.m3-grupo-titulo { font-size: calc(var(--u) * 11.5); font-weight: 700; letter-spacing: calc(var(--u) * 1); text-transform: uppercase; color: var(--texto-fraco); margin: 0; }

.m3-campo { display: flex; flex-direction: column; gap: calc(var(--u) * 6); min-width: 0; }
.m3-campo-rotulo { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 600; color: var(--texto-apoio); }
.m3-campo-opcional { font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: calc(var(--u) * 0.6); text-transform: uppercase; color: var(--texto-fraco); background: #F1F5F9; border-radius: 999px; padding: calc(var(--u) * 3) calc(var(--u) * 7); }
.m3-campo-entrada { height: calc(var(--u) * 52); display: flex; align-items: center; border: 1.5px solid transparent; border-radius: 999px; background: #F2F2F6; padding: 0 calc(var(--u) * 18); font-size: calc(var(--u) * 15); color: var(--texto); }
.m3-campo-vazio .m3-campo-entrada { border-color: var(--rosa); background: #FFF7FD; color: #A9A9B4; }
.m3-par { display: flex; gap: calc(var(--u) * 10); }
.m3-par > * { flex: 1; min-width: 0; }
.m3-par-num > :last-child { flex: 0 0 calc(var(--u) * 96); }
.m3-par-uf > :last-child { flex: 0 0 calc(var(--u) * 82); }

.m3-falta { display: flex; flex-direction: column; gap: calc(var(--u) * 4); margin: calc(var(--u) * 18) calc(var(--u) * 22) 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 18); background: #FFF7FD; border: 1px solid #FFE1F3; }
.m3-falta strong { font-size: calc(var(--u) * 13.5); }
.m3-falta span { font-size: calc(var(--u) * 12.5); line-height: 1.45; color: var(--texto-apoio); }

.m3-trilho { display: flex; align-items: flex-start; gap: calc(var(--u) * 4); margin: calc(var(--u) * 20) calc(var(--u) * 22) 0; padding: 0; list-style: none; }
.m3-trilho-item { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 7); }
.m3-trilho-item + .m3-trilho-item::before { content: ""; position: absolute; top: calc(var(--u) * 15); right: 50%; left: -50%; height: calc(var(--u) * 2); margin: 0 calc(var(--u) * 20); border-radius: 999px; background: var(--borda); }
.m3-trilho-feito::before { background: var(--gradiente); }
.m3-trilho-bola { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; color: var(--texto-fraco); font-size: calc(var(--u) * 13); font-weight: 700; position: relative; z-index: 1; }
.m3-trilho-feito .m3-trilho-bola, .m3-trilho-agora .m3-trilho-bola { background: var(--gradiente); color: #fff; }
.m3-trilho-agora .m3-trilho-bola { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(236, 72, 153, .14); }
.m3-trilho-nome { font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--texto-fraco); }
.m3-trilho-agora .m3-trilho-nome { color: var(--texto); font-weight: 700; }

.m3-linha { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 15); border: 1.5px solid var(--borda); border-radius: calc(var(--u) * 20); background: #fff; }
.m3-linha-ativa { border-color: var(--rosa); background: #FFF7FD; }
.m3-linha-marca { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; color: #fff; }
.m3-linha-ativa .m3-linha-marca { border-color: transparent; background: var(--gradiente); }
.m3-linha-corpo { flex: 1; min-width: 0; }
.m3-linha-corpo strong { display: block; font-size: calc(var(--u) * 14); }
.m3-linha-corpo span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 12); line-height: 1.45; color: var(--texto-apoio); }
.m3-linha-valor { font-size: calc(var(--u) * 14); font-weight: 700; white-space: nowrap; }

.m3-revisao { display: flex; align-items: flex-start; gap: calc(var(--u) * 12); padding: calc(var(--u) * 15); border: 1px solid #F1F5F9; border-radius: calc(var(--u) * 20); background: #fff; }
.m3-revisao-corpo { flex: 1; min-width: 0; }
.m3-revisao-corpo strong { display: block; font-size: calc(var(--u) * 13.5); }
.m3-revisao-quem { display: block; margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 13); font-weight: 600; }
.m3-revisao-corpo > span:last-child { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 12); line-height: 1.5; color: var(--texto-apoio); }
.m3-alterar { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); flex: none; padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 5) calc(var(--u) * 8); border: 1px solid var(--borda); border-radius: 999px; color: var(--texto-apoio); font-size: calc(var(--u) * 11.5); font-weight: 700; }

.m3-recortes { display: flex; gap: calc(var(--u) * 7); margin: calc(var(--u) * 18) calc(var(--u) * 22) 0; }
.m3-recorte { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 12); border: 1px solid var(--borda); border-radius: 999px; font-size: calc(var(--u) * 12); font-weight: 600; color: var(--texto-apoio); white-space: nowrap; }
.m3-recorte-conta { font-size: calc(var(--u) * 10.5); font-weight: 700; background: #F1F5F9; border-radius: 999px; padding: calc(var(--u) * 1) calc(var(--u) * 6); }
.m3-recorte-ativo { border-color: transparent; background: var(--gradiente); color: #fff; }
.m3-recorte-ativo .m3-recorte-conta { background: rgba(255,255,255,.24); color: #fff; }

.m3-pedidos { display: flex; flex-direction: column; gap: calc(var(--u) * 12); margin: calc(var(--u) * 16) calc(var(--u) * 22) 0; }
.m3-pedido { padding: calc(var(--u) * 14); border: 1px solid #F1F5F9; border-radius: calc(var(--u) * 22); background: #fff; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(11, 11, 15, .04); }
.m3-pedido-topo { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.m3-pedido-id { font: 700 calc(var(--u) * 12)/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: calc(var(--u) * 0.3); }
.m3-pedido-data { flex: 1; min-width: 0; font-size: calc(var(--u) * 11.5); color: var(--texto-fraco); }
.m3-selo { flex: none; font-size: calc(var(--u) * 11.5); font-weight: 700; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 5) calc(var(--u) * 9); white-space: nowrap; }
.m3-pedido-meio { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 13); }
.m3-pilha { display: flex; flex: none; }
.m3-pilha span { width: calc(var(--u) * 42); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 12); overflow: hidden; border: 2px solid #fff; background: #F1F5F9; }
.m3-pilha span + span { margin-left: calc(var(--u) * -16); }
.m3-pedido-texto { flex: 1; min-width: 0; }
.m3-pedido-texto strong { display: block; font-size: calc(var(--u) * 13.5); line-height: 1.35; }
.m3-pedido-texto span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 11.5); color: var(--texto-apoio); }
.m3-pedido-valor { font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: calc(var(--u) * -0.3); white-space: nowrap; }
.m3-regua { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 13); }
.m3-regua span { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 9.5); color: var(--texto-fraco); }
.m3-regua i { height: calc(var(--u) * 4); border-radius: 999px; background: var(--borda); }
.m3-regua .venceu i { background: var(--gradiente); }
.m3-regua .venceu { color: var(--texto-apoio); font-weight: 600; }

.m3-lista-pedidos, .m3-meus-dados, .m3-cadastro, .m3-frete { padding-bottom: calc(var(--u) * 116); }
.m3-cadastro, .m3-frete, .m3-sacola { padding-bottom: calc(var(--u) * 200); }
.m3-fecho-tela { margin: calc(var(--u) * 22) calc(var(--u) * 22) 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12); }

/* Tela 09 — o detalhe do pedido, como o modelo 3 monta */
.m3-detalhe { padding-bottom: calc(var(--u) * 200); }
.m3-detalhe-cabeca { display: flex; flex-direction: column; align-items: flex-start; }
.m3-trocar { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 10); border-radius: 999px; background: #F1F5F9; color: var(--texto-apoio); font-size: calc(var(--u) * 12.5); font-weight: 600; }
.m3-detalhe-cabeca > .m3-trocar { margin-top: 0; }
.m3-detalhe-topo { display: flex; align-items: flex-start; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 16); align-self: stretch; }
.m3-detalhe-topo > div { flex: 1; min-width: 0; }
.m3-detalhe-topo h4 { font-size: calc(var(--u) * 25); font-weight: 700; line-height: 1.15; letter-spacing: calc(var(--u) * -0.5); margin: 0; }
.m3-detalhe-topo p { font-size: calc(var(--u) * 13); color: var(--texto-apoio); margin: calc(var(--u) * 6) 0 0; }
.m3-detalhe-agora { display: flex; align-items: center; gap: calc(var(--u) * 13); margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 14) calc(var(--u) * 15); border-radius: calc(var(--u) * 20); background: #FFF7FD; border: 1px solid #FFE1F3; align-self: stretch; }
.m3-detalhe-agora > div strong { display: block; font-size: calc(var(--u) * 13.5); line-height: 1.35; }
.m3-detalhe-agora > div span { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 12); line-height: 1.45; color: var(--texto-apoio); }
.m3-detalhe-marca { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--gradiente); color: #fff; }

.andamento { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.andamento-item { display: flex; gap: calc(var(--u) * 11); align-items: stretch; }
.andamento-marca { display: flex; flex-direction: column; align-items: center; flex: none; }
.andamento-bola { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--borda); background: #fff; color: #fff; }
.est-feito .andamento-bola { background: #16A34A; border-color: #16A34A; }
.est-agora .andamento-bola { border-color: var(--rosa); background: #FFF7FD; }
.est-agora .andamento-bola::after { content: ''; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 999px; background: var(--rosa); }
.andamento-fio { width: calc(var(--u) * 2); flex: 1; min-height: calc(var(--u) * 16); margin: calc(var(--u) * 4) 0; border-radius: 999px; background: var(--borda); }
.est-feito .andamento-fio { background: #16A34A; }
.andamento-texto { flex: 1; padding-bottom: calc(var(--u) * 14); }
.andamento-item:last-child .andamento-texto { padding-bottom: 0; }
.andamento-titulo { font-size: calc(var(--u) * 14); font-weight: 700; }
.est-depois .andamento-titulo { color: var(--texto-fraco); }
.andamento-apoio { font-size: calc(var(--u) * 12.5); color: var(--texto-fraco); margin-top: calc(var(--u) * 2); }

.m3-detalhe-itens { display: flex; flex-direction: column; gap: calc(var(--u) * 13); }
.m3-detalhe-item { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.m3-detalhe-foto { width: calc(var(--u) * 56); height: calc(var(--u) * 70); flex: none; border-radius: calc(var(--u) * 17); overflow: hidden; background: #F1F5F9; }
.m3-detalhe-item-corpo { flex: 1; min-width: 0; }
.m3-detalhe-item-corpo strong { display: block; font-size: calc(var(--u) * 13.5); line-height: 1.35; }
.m3-detalhe-item-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 8); }
.m3-detalhe-item-valor { text-align: right; }
.m3-detalhe-item-valor strong { display: block; font-size: calc(var(--u) * 14); letter-spacing: calc(var(--u) * -0.2); }
.m3-detalhe-item-valor span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 11); color: var(--texto-fraco); white-space: nowrap; }

.m3-recibo { margin: calc(var(--u) * 24) calc(var(--u) * 22) 0; padding: calc(var(--u) * 6) calc(var(--u) * 18); border-radius: calc(var(--u) * 22); border: 1px solid #F1F5F9; background: #fff; }
.m3-recibo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 14); padding: calc(var(--u) * 13) 0; font-size: calc(var(--u) * 12.5); color: var(--texto-apoio); }
.m3-recibo-linha + .m3-recibo-linha { border-top: 1px solid #F1F5F9; }
.m3-recibo-linha > span:last-child { text-align: right; color: var(--texto); font-weight: 600; }
.m3-recibo-forte > span:first-child { font-size: calc(var(--u) * 13.5); font-weight: 700; color: var(--texto); }
.m3-recibo-forte > span:last-child { font-size: calc(var(--u) * 21); font-weight: 700; letter-spacing: calc(var(--u) * -0.5); }

.m3-detalhe-entrega { display: flex; align-items: flex-start; gap: calc(var(--u) * 13); }
.m3-detalhe-entrega > div { flex: 1; min-width: 0; }
.m3-detalhe-entrega > div strong { display: block; font-size: calc(var(--u) * 13.5); }
.m3-detalhe-entrega > div span { display: block; margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 12.5); line-height: 1.5; color: var(--texto-apoio); }
.m3-detalhe-entrega > div .m3-detalhe-prazo { color: var(--rosa); font-weight: 600; }
.m3-detalhe .m3-grupo > .m3-trocar { align-self: flex-start; }

.m3-rodape-pedido { position: absolute; z-index: 4; left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 116); height: calc(var(--u) * 76); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18); border-radius: 999px; background: #fff; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(11, 11, 15, .16); border: 1px solid #F1F5F9; }
.m3-rodape-valor { flex: 1; min-width: 0; line-height: 1.15; }
.m3-rodape-valor span { display: block; font-size: calc(var(--u) * 10.5); color: var(--texto-fraco); }
.m3-rodape-valor strong { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * -0.5); white-space: nowrap; }
.m3-rodape-botao { flex: none; height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 22); display: flex; align-items: center; gap: calc(var(--u) * 7); border-radius: 999px; background: var(--gradiente); color: #fff; font-size: calc(var(--u) * 15); font-weight: 700; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(236, 72, 153, .32); }

.m3-resumo-unico .m3-resumo-total { margin-top: 0; padding-top: 0; border-top: 0; }
.m3-vazio-marca { color: var(--rosa); font-weight: 700; }
.m3-revisao-itens { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.m3-revisao-item { display: flex; align-items: center; gap: calc(var(--u) * 11); }
.m3-revisao-foto { width: calc(var(--u) * 44); height: calc(var(--u) * 54); flex: none; border-radius: calc(var(--u) * 12); overflow: hidden; background: #F1F5F9; }
.m3-revisao-nome { flex: 1; min-width: 0; font-size: calc(var(--u) * 13); font-weight: 600; line-height: 1.3; }
.m3-revisao-nome span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 11.5); font-weight: 400; color: var(--texto-apoio); }
.m3-revisao-item > strong { font-size: calc(var(--u) * 13.5); white-space: nowrap; }