/* =========================================================================
   MovCode — /produtos
   Um celular só para os cinco produtos. O palco fica preso na tela enquanto
   a pessoa rola: o celular começa na tela inicial, abre o primeiro app de
   dentro do ícone e depois troca de app como no iPhone (o app vira um
   cartão, desliza e o próximo abre). Junto
   com ele mudam o fundo, a fonte, o nome gigante e os cartões em volta (as
   cores e as fontes vêm das variáveis --p-* das classes .h-marca-* da home).
   Sem JS: a tela inicial parada e os produtos um embaixo do outro.
   ========================================================================= */

@property --pf1 { syntax: "<color>"; inherits: true; initial-value: #111214; }
@property --pf2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 90, 31, 0.24); }
@property --pf3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 74%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 46%; }

/* ---------- O palco ---------- */
.pr-show { position: relative; background: var(--noite); }
html.pr-js .pr-show { overflow: clip; }
.pr-palco {
    --tel-h: min(640px, calc(100svh - 120px));
    --tel-w: calc(var(--tel-h) * 880 / 1832);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--sobre-noite);
    background:
        radial-gradient(52% 62% at var(--gx) var(--gy), var(--pf2), transparent 70%),
        radial-gradient(45% 50% at 6% 96%, var(--pf3), transparent 70%),
        var(--pf1);
    transition: --pf1 0.9s ease, --pf2 0.9s ease, --pf3 0.9s ease, --gx 1.4s cubic-bezier(0.3, 0.7, 0.2, 1), --gy 1.4s cubic-bezier(0.3, 0.7, 0.2, 1);
}
html.pr-js .pr-palco { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; }
.pr-palco[data-ativo="0"] { --pf1: #111214; --pf2: rgba(255, 90, 31, 0.24); --pf3: transparent; --gx: 74%; --gy: 46%; --pr-anel: #FFFFFF; }
.pr-palco[data-ativo="1"] { --pf1: #F6F8FB; --pf2: rgba(41, 148, 242, 0.22); --pf3: transparent; --gx: 82%; --gy: 14%; --pr-anel: #176BD0; }
.pr-palco[data-ativo="2"] { --pf1: #0A2531; --pf2: rgba(255, 107, 91, 0.4); --pf3: rgba(89, 131, 146, 0.5); --gx: 88%; --gy: 10%; --pr-anel: #FF8B7D; }
.pr-palco[data-ativo="3"] { --pf1: #FAF7F2; --pf2: rgba(194, 65, 12, 0.14); --pf3: transparent; --gx: 70%; --gy: 82%; --pr-anel: #C2410C; }
.pr-palco[data-ativo="4"] { --pf1: #0B1220; --pf2: rgba(155, 39, 48, 0.42); --pf3: rgba(47, 74, 138, 0.3); --gx: 92%; --gy: 8%; --pr-anel: #D0646B; }
.pr-palco[data-ativo="5"] { --pf1: #F28C38; --pf2: rgba(255, 243, 229, 0.5); --pf3: transparent; --gx: 22%; --gy: 86%; --pr-anel: #29231F; }
/* o papel milimetrado do ForLabs e o granulado da Lojinha, só no estado de cada um */
.pr-palco::before, .pr-palco::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.pr-palco::before { background: linear-gradient(rgba(23, 107, 208, 0.07) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(23, 107, 208, 0.07) 1px, transparent 1px) 0 0 / 28px 28px; }
.pr-palco::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E"); }
.pr-palco[data-ativo="1"]::before { opacity: 1; }
.pr-palco[data-ativo="2"]::after { opacity: 0.08; }
/* as passagens de um produto para o outro: cada uma ocupa uma tela de rolagem */
.pr-passos { display: none; }
html.pr-js .pr-passos { display: block; }
.pr-passos i { display: block; height: 100svh; }
.pr-passos i:last-child { height: 130svh; }

/* as classes .h-marca-* da home trazem fundo; aqui quem pinta o fundo é o palco */
.pr-gigante, .pr-texto, .pr-cartoes { background: none; }
.pr-gigante::before, .pr-texto::before, .pr-cartoes::before { content: none !important; }

/* ---------- O nome gigante ao fundo ---------- */
.pr-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pr-gigante {
    position: absolute;
    left: 50%;
    top: 54%;
    font: 800 min(19vw, 44svh) / 0.8 var(--p-fonte, var(--f-display));
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--p-texto, #fff) 7%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) translateX(22%) scale(0.96);
    transition: opacity 0.7s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}
.pr-gigante.antes { transform: translate(-50%, -50%) translateX(-22%) scale(0.96); }
.pr-gigante.ativo { opacity: 1; transform: translate(-50%, -50%) translateX(calc(var(--mx, 0) * -2%)); }
.pr-gigante[data-pr-gigante="0"] { color: rgba(255, 255, 255, 0.05); }
.pr-gigante[data-pr-gigante="3"], .pr-gigante[data-pr-gigante="4"] { font-size: min(15.5vw, 44svh); }
.pr-gigante.h-marca-forbarber { font-weight: 700; font-style: italic; letter-spacing: -0.02em; }
.pr-gigante.h-marca-lojinha { font-weight: 700; }
.pr-gigante.h-marca-pratuca { color: rgba(255, 243, 229, 0.2); }
.pr-gigante.h-marca-forlabs { color: rgba(23, 107, 208, 0.07); }

/* ---------- Texto e celular lado a lado ---------- */
.pr-grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
html.pr-js .pr-grade { height: 100%; padding-top: 76px; padding-bottom: 12px; }
.pr-textos { position: relative; }
html.pr-js .pr-textos { display: grid; }
.pr-texto { color: var(--p-texto); }
html.pr-js .pr-texto { grid-area: 1 / 1; align-self: center; pointer-events: none; }
html.pr-js .pr-texto.ativo { pointer-events: auto; }

/* cada peça do texto entra subindo, uma depois da outra, e sai subindo também */
html.pr-js .pr-anda { opacity: 0; transform: translateY(40px); }
html.pr-js .pr-texto.ativo .pr-anda { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(0.3s + var(--a) * 0.08s); }
html.pr-js .pr-texto.saindo .pr-anda { opacity: 0; transform: translateY(-30px); transition: opacity 0.3s ease, transform 0.4s ease-in; transition-delay: calc(var(--a) * 0.03s); }

/* a chegada: o celular sobe e o texto da abertura entra junto */
html.pr-js .pr-cena { animation: pr-chega 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards; }
html.pr-js .pr-intro .pr-anda { animation: pr-chega-texto 1s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(0.15s + var(--a) * 0.1s); }
@keyframes pr-chega { from { opacity: 0; translate: 0 90px; } }
@keyframes pr-chega-texto { from { opacity: 0; translate: 0 40px; } }

/* abertura */
.pr-intro .sv-titulo { font-size: clamp(44px, min(6.2vw, 12svh), 96px); }
.pr-intro .sv-titulo em { color: var(--destaque-noite); }
.pr-intro .sv-sub { margin-bottom: 30px; color: var(--sobre-noite-2); }
.pr-dica { display: inline-flex; align-items: center; gap: 12px; color: var(--sobre-noite-2); font: 600 15px var(--f-texto); }
.pr-dica i { position: relative; width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; }
.pr-dica i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--laranja); animation: pr-rolar 1.8s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes pr-rolar { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* os produtos */
.pr-texto .h-produto-marca { margin: 0; line-height: 1; }
.pr-texto .h-produto-marca > :first-child { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 13px; }
.pr-texto .pr-frase { max-width: 15ch; margin: clamp(18px, 3svh, 30px) 0 0; }
.pr-junto { white-space: nowrap; }
.pr-descricao { max-width: 42ch; margin: clamp(14px, 2.4svh, 20px) 0 0; color: var(--p-texto-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; text-wrap: pretty; }
.pr-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.6svh, 32px); }
.pr-texto .btn-acao { background: var(--p-botao); color: var(--p-botao-txt); box-shadow: var(--p-botao-sombra, none); }
.pr-texto .btn-acao:hover { background: var(--p-botao-hover); }
.pr-texto .h-produto-site { border-color: var(--p-linha); background: transparent; color: var(--p-texto); }
.pr-texto .h-produto-site:hover { border-color: var(--p-texto); }
.pr-texto :focus-visible { outline-color: var(--p-foco); }
.pr-texto.h-marca-forlabs .h-produto-marca { font-size: 30px; }
.pr-texto.h-marca-forlabs .pr-frase { max-width: 14ch; font-size: clamp(34px, min(4vw, 8svh), 58px); }
.pr-texto.h-marca-lojinha .h-produto-marca { font-size: 30px; }
.pr-texto.h-marca-lojinha .pr-frase { font-size: clamp(40px, min(4.6vw, 9.6svh), 72px); }
.pr-texto.h-marca-forcondom { --p-botao: #C2410C; --p-botao-txt: #FFFFFF; --p-botao-hover: #9A3412; }
.pr-texto.h-marca-forcondom .h-produto-marca { font-size: 32px; }
.pr-texto.h-marca-forcondom .pr-frase { font-size: clamp(36px, min(4.2vw, 8.6svh), 64px); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; }
.pr-texto.h-marca-forcondom .pr-frase em { color: #C2410C; font-style: normal; }
.pr-texto.h-marca-forbarber { --p-botao: #9B2730; --p-botao-txt: #F4EFE6; --p-botao-hover: #B3323C; }
.pr-texto.h-marca-forbarber .h-produto-marca { font-size: 40px; }
.pr-texto.h-marca-forbarber .pr-frase { font-size: clamp(48px, min(5.6vw, 11svh), 92px); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; }
.pr-texto.h-marca-forbarber .pr-frase em { color: var(--p-acento); font-style: italic; }
.pr-texto.h-marca-pratuca { --p-botao: #29231F; --p-botao-txt: #FFF3E5; --p-botao-hover: #3D332C; --p-linha: rgba(41, 35, 31, 0.4); }
.pr-texto.h-marca-pratuca .h-produto-marca { font-size: 34px; }
.pr-texto.h-marca-pratuca .h-produto-marca > :first-child { width: 52px; }
.pr-texto.h-marca-pratuca .pr-frase { font-size: clamp(38px, min(4.4vw, 9svh), 66px); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.pr-texto.h-marca-pratuca .pr-frase em { color: #FFF3E5; font-style: normal; }

/* ---------- O celular (o mockup do iPhone 17 Pro por cima da tela) ---------- */
.pr-cena { position: relative; display: grid; place-items: center; height: 100%; perspective: 1600px; }
.pr-giro { transform-style: preserve-3d; transform: rotateX(calc(var(--my, 0) * -3deg)) rotateY(calc(var(--mx, 0) * 4deg)); animation: pr-boia 7s ease-in-out infinite; }
@keyframes pr-boia { 50% { translate: 0 -12px; } }
.pr-tel { position: relative; isolation: isolate; height: var(--tel-h); aspect-ratio: 880 / 1832; }
.pr-tel::before { content: ""; position: absolute; inset: 1% 1.4%; z-index: -1; border-radius: 20% / 9.7%; box-shadow: 0 50px 90px -34px rgba(0, 0, 0, 0.7), 0 0 120px -20px var(--pf2); pointer-events: none; }
.pr-tel::after { content: ""; position: absolute; inset: 0; z-index: 5; background: url(../images/iphone-17-pro.svg) center / 100% 100% no-repeat; pointer-events: none; }
.pr-tel-tela { position: absolute; inset: 1.86% 3.41%; overflow: hidden; border-radius: 15.85% / 7.37%; container-type: inline-size; background: #0E0F12; font-family: var(--f-texto); }
/* a troca de apps do iPhone: o app encolhe num cartão, os cartões deslizam e o próximo abre; atrás
   aparece o papel de parede e o dedo arrasta a barrinha de baixo */
.pr-tel-tela.trocando { --dir: -1; background: radial-gradient(120% 60% at 15% 0%, #3B2A22, transparent 60%), radial-gradient(90% 55% at 100% 100%, rgba(255, 90, 31, 0.4), transparent 70%), linear-gradient(#17181D, #0E0F12); }
.pr-tel-tela.trocando.volta { --dir: 1; }
.pr-tela.sai, .pr-tela.sai-volta, .pr-tela.entra, .pr-tela.entra-volta { z-index: 3; box-shadow: 0 3cqi 10cqi rgba(0, 0, 0, 0.5); animation: 1s cubic-bezier(0.45, 0, 0.2, 1) both; }
.pr-tela.sai { animation-name: pr-cartao-sai; }
.pr-tela.sai-volta { animation-name: pr-cartao-sai-volta; }
.pr-tela.entra { animation-name: pr-cartao-entra; }
.pr-tela.entra-volta { animation-name: pr-cartao-entra-volta; }
@keyframes pr-cartao-sai { 0% { transform: none; border-radius: 0; } 26% { transform: scale(0.8); border-radius: 13cqi; } 70%, 100% { transform: translateX(-92%) scale(0.8); border-radius: 13cqi; } }
@keyframes pr-cartao-sai-volta { 0% { transform: none; border-radius: 0; } 26% { transform: scale(0.8); border-radius: 13cqi; } 70%, 100% { transform: translateX(92%) scale(0.8); border-radius: 13cqi; } }
@keyframes pr-cartao-entra { 0%, 26% { transform: translateX(92%) scale(0.8); border-radius: 13cqi; } 70% { transform: scale(0.8); border-radius: 13cqi; } 100% { transform: none; border-radius: 0; } }
@keyframes pr-cartao-entra-volta { 0%, 26% { transform: translateX(-92%) scale(0.8); border-radius: 13cqi; } 70% { transform: scale(0.8); border-radius: 13cqi; } 100% { transform: none; border-radius: 0; } }
.pr-barra { position: absolute; left: 50%; bottom: 2.2cqi; z-index: 20; width: 34cqi; height: 1.3cqi; margin-left: -17cqi; border-radius: 1cqi; background: #fff; transition: background-color 0.3s ease, opacity 0.3s ease; pointer-events: none; }
.pr-tel-tela[data-tela="0"]:not(.trocando) .pr-barra { opacity: 0; }
.pr-tel-tela.trocando .pr-barra { animation: pr-barra 1s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes pr-barra { 15% { transform: translateY(-1.2cqi); } 60% { transform: translate(calc(var(--dir) * 16cqi), -1.2cqi); } }

.pr-status { position: absolute; top: 5.4cqi; left: 11cqi; right: 9cqi; z-index: 20; display: flex; align-items: center; justify-content: space-between; color: #fff; font: 600 4.4cqi/1 var(--f-texto); transition: color 0.3s ease; pointer-events: none; }
.pr-status i { width: 8.4cqi; height: 3.6cqi; border-radius: 1cqi; background: linear-gradient(90deg, currentColor 75%, color-mix(in srgb, currentColor 35%, transparent) 0); }
.pr-tel-tela[data-tela="1"] .pr-status, .pr-tel-tela[data-tela="3"] .pr-status, .pr-tel-tela[data-tela="4"] .pr-status, .pr-tel-tela[data-tela="5"] .pr-status { color: #111; }
.pr-tel-tela[data-tela="1"] .pr-barra, .pr-tel-tela[data-tela="3"] .pr-barra, .pr-tel-tela[data-tela="4"] .pr-barra, .pr-tel-tela[data-tela="5"] .pr-barra { background: #111; }

/* cada tela do celular */
.pr-tela { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 16cqi 6cqi 7cqi; overflow: hidden; isolation: isolate; visibility: hidden; color: var(--p-texto); font-size: 4.2cqi; line-height: 1.3; }
.pr-tela.ativa { visibility: visible; }
.pr-tela svg { flex: none; }
.pr-tela b, .pr-tela small, .pr-tela em, .pr-tela i { font-style: normal; }
.pr-tela.abrindo { z-index: 3; transform-origin: var(--ox, 50%) var(--oy, 40%); animation: pr-abre 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
.pr-tela.fechando { z-index: 3; transform-origin: var(--ox, 50%) var(--oy, 40%); animation: pr-fecha 0.48s cubic-bezier(0.5, 0, 0.75, 0.2) both; }
@keyframes pr-abre { from { transform: scale(0.15); border-radius: 30%; opacity: 0.3; } 45% { opacity: 1; } to { transform: none; border-radius: 0; opacity: 1; } }
@keyframes pr-fecha { from { transform: none; border-radius: 0; opacity: 1; } 70% { opacity: 1; } to { transform: scale(0.15); border-radius: 30%; opacity: 0; } }
.pr-tela.reinicia { animation: pr-pisca 0.7s ease both; }
@keyframes pr-pisca { 45%, 55% { opacity: 0; } }

/* as peças que aparecem em cada passo (data-ve) e as que somem (data-ate) */
html.pr-js .pr-tela [data-ve]:not(.ve) { display: none; }
.pr-tela [data-ve].ve { animation: pr-surge 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes pr-surge { from { opacity: 0; transform: translateY(4cqi) scale(0.96); } }
.pr-tela [data-ate].passou { display: none; }
/* o dedo */
.ap-toque { position: absolute; left: 0; top: 0; z-index: 25; width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi; border-radius: 50%; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2cqi 6cqi rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }
.ap-toque.toca { animation: pr-toque 0.6s ease-out; }
.ap-toque.arrasta, .ap-toque.arrasta-volta { animation: pr-arrasta 1s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes pr-arrasta { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(0.85); } 60% { opacity: 1; transform: translateX(calc(var(--dir, -1) * 40cqi)) scale(0.85); } 78%, 100% { opacity: 0; transform: translateX(calc(var(--dir, -1) * 44cqi)) scale(1.4); } }
@keyframes pr-toque { 0% { opacity: 0; transform: scale(1.7); } 30% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(2.1); } }
.pr-tela [data-toque] { transition: scale 0.18s ease; }
.pr-tela .apertado { scale: 0.94; }

/* os ícones das marcas */
.pr-icone > img, .pr-icone > svg, .pr-icone > span { display: block; width: 100%; height: 100%; }
.pr-ic-lojinha, .pr-ic-poste, .pr-ic-pratuca { display: grid !important; place-items: center; }
.pr-ic-lojinha { background: #FF6B5B; color: #fff; }
.pr-ic-lojinha svg { width: 56%; height: 56%; }
.pr-ic-poste { background: #0B1220; box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.2); }
.pr-ic-poste i { width: 24%; height: 64%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #9B2730 0 3px, #F4EFE6 3px 6px, #2F4A8A 6px 9px, #F4EFE6 9px 12px); box-shadow: 0 0 0 1.5px #F4EFE6; }
.pr-ic-pratuca { background: #F28C38; }
.pr-ic-pratuca svg { width: 70%; height: auto; }
.ap-topo { display: flex; align-items: center; gap: 2.6cqi; font: 700 5.4cqi/1 var(--p-fonte); }
.ap-topo > img, .ap-topo > svg, .ap-topo > span:first-child { width: 9cqi; height: 9cqi; border-radius: 2.4cqi; overflow: hidden; }

/* Tela inicial */
.ap-inicio { color: #fff; background: radial-gradient(120% 60% at 15% 0%, #3B2A22, transparent 60%), radial-gradient(90% 55% at 100% 100%, rgba(255, 90, 31, 0.55), transparent 70%), linear-gradient(#17181D, #0E0F12); }
.ap-inicio.saindo { animation: pr-zoom 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
.ap-inicio.voltando { animation: pr-zoom 0.48s cubic-bezier(0.2, 0.85, 0.25, 1) reverse both; }
@keyframes pr-zoom { to { transform: scale(1.14); opacity: 0.2; } }
.ap-widget { display: flex; align-items: center; gap: 4cqi; padding: 5cqi; border-radius: 7cqi; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ap-widget .duo { --w: 11cqi; }
.ap-widget b { display: block; font: 700 4.6cqi/1.1 var(--f-texto); }
.ap-widget small { display: block; margin-top: 1.2cqi; color: rgba(255, 255, 255, 0.65); font: 500 3.6cqi/1.2 var(--f-texto); }
.ap-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6cqi 5cqi; margin-top: 9cqi; padding-inline: 1cqi; }
.ap-app { display: grid; justify-items: center; gap: 2cqi; font: 500 3.1cqi/1 var(--f-texto); white-space: nowrap; }
.ap-app .pr-icone { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 24%; box-shadow: 0 2.4cqi 5cqi -2cqi rgba(0, 0, 0, 0.6); transition: transform 0.2s ease, filter 0.2s ease; }
.ap-app.tocando .pr-icone { filter: brightness(0.75); transform: scale(0.88); }
/* uma onda passa pelos ícones de tempos em tempos */
.ap-inicio.ativa .ap-app .pr-icone { animation: pr-onda 4.5s ease-in-out infinite; }
.ap-inicio.ativa .ap-app:nth-child(2) .pr-icone { animation-delay: 0.1s; }
.ap-inicio.ativa .ap-app:nth-child(3) .pr-icone { animation-delay: 0.2s; }
.ap-inicio.ativa .ap-app:nth-child(4) .pr-icone { animation-delay: 0.3s; }
.ap-inicio.ativa .ap-app:nth-child(5) .pr-icone { animation-delay: 0.4s; }
@keyframes pr-onda { 0%, 12%, 100% { translate: 0 0; } 6% { translate: 0 -2cqi; } }
.ap-avisos { display: grid; gap: 2.2cqi; margin-top: auto; }
.ap-aviso { display: flex; align-items: center; gap: 2.6cqi; padding: 2.8cqi 3.2cqi; border-radius: 5cqi; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 3.1cqi; line-height: 1.25; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ap-aviso:nth-child(n+4) { display: none; }
.ap-aviso:nth-child(2) { opacity: 0.85; }
.ap-aviso:nth-child(3) { opacity: 0.6; }
.ap-aviso .pr-icone { flex: none; width: 8cqi; height: 8cqi; overflow: hidden; border-radius: 2.2cqi; }
.ap-aviso > span:last-child { min-width: 0; color: rgba(255, 255, 255, 0.78); }
.ap-aviso small { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.6); font-size: 2.7cqi; }
.ap-aviso b { display: block; color: #fff; font-size: 3.3cqi; }
.ap-aviso.novo { animation: pr-aviso 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
@keyframes pr-aviso { from { opacity: 0; transform: translateY(-40%) scale(0.92); } }
.ap-pontos { display: flex; gap: 2cqi; justify-content: center; margin-top: 4cqi; }
.ap-pontos i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.ap-pontos i:first-child { background: #fff; }

/* ForLabs: o teste de cor na bancada */
.ap-forlabs { background: linear-gradient(rgba(23, 107, 208, 0.06) 1px, transparent 1px) 0 0 / 7cqi 7cqi, linear-gradient(90deg, rgba(23, 107, 208, 0.06) 1px, transparent 1px) 0 0 / 7cqi 7cqi, #FFFFFF; }
.ap-forlabs .ap-topo b { letter-spacing: -0.03em; }
.ap-forlabs .ap-topo b span { color: var(--p-texto-2); font-weight: 400; }
.ap-avatar { display: grid; place-items: center; width: 8cqi; height: 8cqi; margin-left: auto; border-radius: 50%; background: #E7F0FB; color: #176BD0; font: 700 3cqi/1 var(--f-texto); }
.ap-t { margin-top: 7cqi; font: 700 6.6cqi/1.1 var(--p-fonte); letter-spacing: -0.03em; }
.ap-s { margin-top: 1.4cqi; color: var(--p-texto-2); font-size: 3.6cqi; }
.fl-alvo { position: relative; display: grid; place-items: center; height: 46cqi; margin-top: 5cqi; overflow: hidden; border-radius: 5cqi; background: radial-gradient(70% 70% at 50% 50%, #1B2A4A, #0B1530); }
.fl-alvo::before { content: ""; position: absolute; inset: 5cqi; background: linear-gradient(#fff, #fff) 0 0 / 6cqi 0.8cqi, linear-gradient(#fff, #fff) 0 0 / 0.8cqi 6cqi, linear-gradient(#fff, #fff) 100% 0 / 6cqi 0.8cqi, linear-gradient(#fff, #fff) 100% 0 / 0.8cqi 6cqi, linear-gradient(#fff, #fff) 0 100% / 6cqi 0.8cqi, linear-gradient(#fff, #fff) 0 100% / 0.8cqi 6cqi, linear-gradient(#fff, #fff) 100% 100% / 6cqi 0.8cqi, linear-gradient(#fff, #fff) 100% 100% / 0.8cqi 6cqi; background-repeat: no-repeat; opacity: 0.8; }
.fl-gota { width: 22cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, #E9A23B 70%); box-shadow: inset 0 -2cqi 4cqi rgba(0, 0, 0, 0.18), 0 0 0 2cqi rgba(255, 255, 255, 0.06); }
.ap-forlabs .fl-varre.ve { position: absolute; inset: 0 0 auto; height: 30%; background: linear-gradient(transparent, rgba(41, 148, 242, 0.6) 85%, #7CC0FF); animation: pr-varre 1.1s linear infinite; }
@keyframes pr-varre { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
.fl-escala { position: relative; height: 3.2cqi; margin-top: 6cqi; border-radius: 99px; background: linear-gradient(90deg, #FFF2C6, #F7C15C, #E9A23B, #C9702A, #8E3B1E); }
.fl-marca { position: absolute; top: 50%; left: 46%; width: 5.6cqi; height: 5.6cqi; margin: -2.8cqi 0 0 -2.8cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1cqi #176BD0, 0 1cqi 2cqi rgba(0, 0, 0, 0.25); }
.ap-forlabs .fl-marca.ve { animation: pr-marca 1s cubic-bezier(0.3, 1.3, 0.4, 1) both; }
@keyframes pr-marca { from { left: 4%; opacity: 0; } 20% { opacity: 1; } }
.fl-res { display: inline-flex; align-self: flex-start; align-items: center; gap: 1.6cqi; margin-top: 4cqi; padding: 1.8cqi 3cqi; border-radius: 99px; background: rgba(16, 185, 129, 0.12); color: #047857; font-size: 3.6cqi; font-weight: 700; }
html.pr-js .ap-forlabs .fl-res:not(.ve) { display: inline-flex; visibility: hidden; }
.fl-res svg, .fl-btn svg { width: 3.6cqi; height: 3.6cqi; }
.fl-btn { display: grid; margin-top: 5cqi; padding: 3.6cqi; border-radius: 3.4cqi; background: #176BD0; color: #fff; font-size: 4cqi; font-weight: 700; text-align: center; transition: scale 0.18s ease, background-color 0.3s ease; }
.fl-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqi; }
.ap-forlabs[data-passo="3"] .fl-btn, .ap-forlabs[data-passo="4"] .fl-btn { background: #047857; }
.fl-hist { display: grid; gap: 2cqi; margin: 5cqi 0 0; padding: 0; list-style: none; }
.fl-hist li { display: flex; align-items: baseline; gap: 1.4cqi; padding: 2.6cqi 3cqi; border-radius: 3cqi; background: #F1F4F9; color: var(--p-texto); font-size: 3.5cqi; }
.fl-hist li span { margin-left: auto; color: #8A93A6; font-size: 3.2cqi; }
.fl-hist li.ve { background: #E7F0FB; }

/* Lojinha Pronta: escolhe, paga e o e-mail sai sozinho */
.ap-lojinha .ap-topo { font-size: 6.4cqi; }
.ap-lojinha .ap-topo > span:first-child { border-radius: 2.6cqi; }
.ap-lojinha .lj-carrinho { position: relative; display: grid; place-items: center; width: 9cqi; height: 9cqi; margin-left: auto; border-radius: 2.8cqi; background: rgba(247, 245, 242, 0.1); overflow: visible; }
.lj-carrinho svg { width: 5cqi; height: 5cqi; }
.lj-carrinho em { position: absolute; top: -1.6cqi; right: -1.6cqi; min-width: 4.8cqi; height: 4.8cqi; border-radius: 2.4cqi; background: #FF6B5B; color: #fff; font: 700 3cqi/4.8cqi var(--f-texto); text-align: center; }
.lj-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqi; margin-top: 6cqi; }
.lj-item { display: grid; gap: 1cqi; padding: 2.2cqi; border-radius: 4cqi; background: rgba(247, 245, 242, 0.07); font-family: var(--f-texto); transition: box-shadow 0.3s ease, scale 0.18s ease, background-color 0.3s ease; }
.lj-foto { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 1cqi; border-radius: 3cqi; background: var(--c); color: #0A2531; }
.lj-foto svg { width: 46%; height: 46%; }
.lj-item b { font-size: 3.8cqi; font-weight: 600; }
.lj-item small { color: var(--p-texto-2); font-size: 3.4cqi; }
.lj-item.sel { background: rgba(255, 139, 125, 0.16); box-shadow: 0 0 0 0.7cqi #FF8B7D; }
.lj-folha { position: absolute; left: 3cqi; right: 3cqi; bottom: 3cqi; z-index: 4; display: grid; gap: 3cqi; padding: 5cqi; border-radius: 6cqi; background: #F7F5F2; color: #0A2531; box-shadow: 0 -4cqi 12cqi rgba(0, 0, 0, 0.35); font-family: var(--f-texto); }
.lj-folha::before { content: ""; justify-self: center; width: 10cqi; height: 1.2cqi; margin-top: -2cqi; border-radius: 1cqi; background: rgba(10, 37, 49, 0.2); }
.ap-lojinha .lj-folha.ve { animation: pr-folha 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes pr-folha { from { transform: translateY(110%); } }
.lj-linha { display: flex; justify-content: space-between; font-size: 4.2cqi; }
.lj-linha b { font: 700 5cqi/1.1 var(--p-fonte); }
.lj-pagar { display: grid; padding: 3.6cqi; border-radius: 3.4cqi; background: #009EE3; color: #fff; font-size: 3.8cqi; font-weight: 700; text-align: center; transition: scale 0.18s ease, background-color 0.3s ease; }
.lj-pagar > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqi; }
.lj-pagar svg { width: 3.8cqi; height: 3.8cqi; }
.ap-lojinha[data-passo="3"] .lj-pagar, .ap-lojinha[data-passo="4"] .lj-pagar { background: #0F9D58; }
.lj-aviso { position: absolute; top: 14cqi; left: 3cqi; right: 3cqi; z-index: 6; display: flex; align-items: center; gap: 3cqi; padding: 3.4cqi; border-radius: 5cqi; background: rgba(247, 245, 242, 0.95); color: #0A2531; box-shadow: 0 3cqi 10cqi rgba(0, 0, 0, 0.35); font-family: var(--f-texto); }
.ap-lojinha .lj-aviso.ve { animation: pr-desce 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
@keyframes pr-desce { from { transform: translateY(-160%); } }
.lj-aviso > svg { width: 9cqi; height: 9cqi; padding: 2cqi; border-radius: 2.6cqi; background: #FF6B5B; color: #fff; }
.lj-aviso b { display: block; font-size: 3.8cqi; }
.lj-aviso small { display: block; color: #4B5B62; font-size: 3.2cqi; line-height: 1.3; }

/* ForCondom: a vitrine fechada do condomínio */
.ap-forcondom { background: #FFFFFF; }
.ap-forcondom .ap-topo { font-size: 5.6cqi; letter-spacing: -0.035em; }
.fc-so { display: inline-flex; align-items: center; gap: 1.2cqi; margin-left: auto; padding: 1.6cqi 2.6cqi; border-radius: 99px; background: #FBEFE7; color: #9A3412; font: 600 3cqi/1 var(--f-texto); letter-spacing: 0; white-space: nowrap; }
.fc-so svg { width: 3.2cqi; height: 3.2cqi; }
.fc-abas { display: flex; gap: 1.8cqi; margin-top: 6cqi; }
.fc-abas i { padding: 2cqi 3.2cqi; border-radius: 99px; background: #F4EEE6; color: #6B635A; font: 600 3.5cqi/1 var(--p-fonte); transition: background-color 0.3s ease, color 0.3s ease, scale 0.18s ease; }
.fc-abas i.sel { background: #1F1B16; color: #FAF7F2; }
.fc-fixado { display: flex; align-items: center; gap: 2.6cqi; margin-top: 4cqi; padding: 3.2cqi; border: 1px solid #FED7AA; border-radius: 4cqi; background: #FFF7ED; font-family: var(--p-fonte); }
.fc-fixado svg { width: 5cqi; height: 5cqi; color: #C2410C; }
.fc-fixado b { display: block; font-size: 3.8cqi; }
.fc-fixado small { color: #6B635A; font-size: 3.2cqi; }
.fc-lista { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2.6cqi; margin: 4cqi 0 0; padding: 0; list-style: none; font-family: var(--p-fonte); }
.fc-lista li { display: flex; align-items: center; gap: 3cqi; padding: 2.6cqi; border: 1px solid #EFE8DD; border-radius: 4cqi; background: #fff; }
.ap-forcondom .fc-lista li.ve { animation-name: pr-entra-lado; }
@keyframes pr-entra-lado { from { opacity: 0; transform: translateX(14cqi); } }
.fc-foto { display: grid; place-items: center; flex: none; width: 11cqi; height: 11cqi; border-radius: 3cqi; background: var(--c); color: #1F1B16; }
.fc-foto svg { width: 6cqi; height: 6cqi; }
.fc-lista li > span:nth-child(2) { min-width: 0; }
.fc-lista b { display: block; font-size: 3.7cqi; font-weight: 600; }
.fc-lista small { color: #6B635A; font-size: 3.1cqi; }
.fc-lista em { margin-left: auto; font-size: 3.7cqi; font-weight: 700; white-space: nowrap; }

/* ForBarber: o cliente marca sozinho */
.ap-forbarber { background: radial-gradient(90% 40% at 100% 0%, rgba(155, 39, 48, 0.12), transparent 70%), #F4EFE6; color: #0B1220; font-family: var(--f-texto); }
.ap-forbarber .ap-topo { font-size: 7cqi; font-weight: 700; }
.ap-forbarber .ap-topo > span:first-child { border-radius: 2.6cqi; }
.fb-rotulo { margin: 7.4cqi 0 2.6cqi; color: rgba(11, 18, 32, 0.6); font-size: 3.2cqi; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-chips, .fb-barbeiros { display: flex; flex-wrap: wrap; gap: 2cqi; }
.fb-chips i { padding: 2.6cqi 3.4cqi; border: 1px solid rgba(11, 18, 32, 0.18); border-radius: 99px; font-size: 3.5cqi; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, scale 0.18s ease; }
.fb-barbeiros span { display: inline-flex; align-items: center; gap: 2cqi; padding: 1.4cqi 3.4cqi 1.4cqi 1.4cqi; border: 1px solid rgba(11, 18, 32, 0.18); border-radius: 99px; font-size: 3.5cqi; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, scale 0.18s ease; }
.fb-barbeiros span i { display: grid; place-items: center; width: 7cqi; height: 7cqi; border-radius: 50%; background: #2F4A8A; color: #F4EFE6; font: 700 3.6cqi/1 var(--p-fonte); }
.fb-barbeiros span + span i { background: #9B2730; }
.fb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; }
.fb-slot { padding: 3cqi 0; border: 1px solid rgba(11, 18, 32, 0.18); border-radius: 2.8cqi; font-size: 3.5cqi; font-weight: 600; text-align: center; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, scale 0.18s ease; }
.fb-ocupado { color: rgba(11, 18, 32, 0.3); text-decoration: line-through; }
.ap-forbarber .sel { border-color: #9B2730; background: #9B2730; color: #F4EFE6; }
.fb-barbeiros span.sel i { box-shadow: 0 0 0 0.6cqi #F4EFE6; }
.fb-confirmar { margin-top: auto; padding: 3.6cqi; border-radius: 3.4cqi; background: #0B1220; color: #F4EFE6; font-size: 4cqi; font-weight: 700; text-align: center; transition: scale 0.18s ease; }
.fb-ok { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 2.4cqi; padding: 10cqi; background: rgba(11, 18, 32, 0.96); color: #F4EFE6; text-align: center; }
.ap-forbarber .fb-ok.ve { animation: pr-aparece 0.45s ease both; }
@keyframes pr-aparece { from { opacity: 0; } }
.fb-ok > span { display: grid; place-items: center; width: 20cqi; height: 20cqi; margin-bottom: 3cqi; border-radius: 50%; background: #9B2730; animation: pr-carimbo 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s both; }
.fb-ok > span svg { width: 10cqi; height: 10cqi; }
@keyframes pr-carimbo { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } }
.fb-ok b { font: 700 8cqi/1 var(--p-fonte); }
.fb-ok small { color: rgba(244, 239, 230, 0.75); font-size: 3.6cqi; }

/* Pratuca: o pedido sai do cardápio e chega no WhatsApp */
.ap-pratuca { background: radial-gradient(90% 40% at 0% 0%, rgba(242, 140, 56, 0.2), transparent 70%), #FFF8EF; color: #29231F; font-family: var(--p-fonte); }
.pt-titulo { font-size: 6.6cqi; font-weight: 700; letter-spacing: -0.03em; }
.pt-menu { display: grid; gap: 2.4cqi; margin: 5cqi 0 0; padding: 0; list-style: none; }
.pt-menu li { display: flex; align-items: center; gap: 2.4cqi; padding: 3cqi; border-radius: 4cqi; background: #fff; box-shadow: 0 0.4cqi 0 rgba(41, 35, 31, 0.06); transition: box-shadow 0.3s ease; }
.pt-menu li > span { flex: 1; min-width: 0; }
.pt-menu b { display: block; font-size: 3.6cqi; font-weight: 600; }
.pt-menu small { display: block; overflow: hidden; color: #7A6A5E; font-size: 3cqi; text-overflow: ellipsis; white-space: nowrap; }
.pt-menu em { font-size: 3.4cqi; font-weight: 700; white-space: nowrap; }
.pt-menu i { display: grid; place-items: center; flex: none; width: 7.4cqi; height: 7.4cqi; border-radius: 50%; background: #FDE7CF; color: #C2611B; font-size: 4cqi; font-weight: 700; transition: background-color 0.3s ease, color 0.3s ease, scale 0.18s ease; }
.pt-menu i > span { grid-area: 1 / 1; }
.ap-pratuca:not([data-passo="0"]) .pt-menu li:first-child { box-shadow: 0 0 0 0.6cqi #F28C38; }
.ap-pratuca:not([data-passo="0"]) .pt-menu li:first-child i { background: #F28C38; color: #fff; }
.pt-pedir { display: flex; align-items: center; justify-content: center; gap: 1.6cqi; margin-top: auto; padding: 3.6cqi; border-radius: 3.4cqi; background: #1FAF54; color: #fff; font-size: 3.7cqi; font-weight: 700; white-space: nowrap; transition: scale 0.18s ease; }
.pt-pedir svg { width: 4.4cqi; height: 4.4cqi; }
.pt-total { display: inline-grid; }
.pt-total > span { grid-area: 1 / 1; }
.pt-chat { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: 3cqi; padding: 0 0 6cqi; background: #EFEAE2; font-family: var(--f-texto); }
.ap-pratuca .pt-chat.ve { animation: pr-folha 0.55s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.pt-chat-topo { display: flex; align-items: center; gap: 2.6cqi; padding: 15cqi 5cqi 3.4cqi; background: #008069; color: #fff; }
.pt-chat-topo i { display: grid; place-items: center; width: 8.4cqi; height: 8.4cqi; border-radius: 50%; background: #F28C38; color: #29231F; font-size: 3.2cqi; font-weight: 700; }
.pt-chat-topo b { font-size: 4.2cqi; }
.pt-msg { max-width: 80%; margin: 0 4cqi; padding: 2.6cqi 3.2cqi; border-radius: 3.4cqi; color: #111B21; font-size: 3.6cqi; line-height: 1.35; box-shadow: 0 0.4cqi 0 rgba(0, 0, 0, 0.08); }
.pt-eu { align-self: flex-end; border-top-right-radius: 0.8cqi; background: #D9FDD3; }
.pt-ele { align-self: flex-start; border-top-left-radius: 0.8cqi; background: #fff; }
.ap-pratuca .pt-msg.ve { animation-delay: 0.35s; }
.pr-tel-tela[data-tela="5"]:has(.pt-chat.ve) .pr-status { color: #fff; }

/* ---------- Os cartões que flutuam em volta do celular ---------- */
.pr-cartoes { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--f-texto); }
.pr-cartoes { --sobra: 26px; }
.pr-cartao { position: absolute; width: min(220px, 17vw); opacity: 0; transform: translateY(46px) scale(0.86) rotate(-6deg); transition: opacity 0.35s ease, transform 0.5s ease; translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px); }
.pr-cartao-a { top: calc(50% - var(--tel-h) * 0.34); left: calc(50% + var(--tel-w) / 2 - var(--sobra)); }
.pr-cartao-b { top: calc(50% + var(--tel-h) * 0.1); right: calc(50% + var(--tel-w) / 2 - var(--sobra)); transform: translateY(46px) scale(0.86) rotate(6deg); translate: calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -22px); }
.pr-cartoes.ativo .pr-cartao { opacity: 1; transform: rotate(var(--r, 3deg)); transition: opacity 0.6s ease 0.45s, transform 1s cubic-bezier(0.2, 1.2, 0.3, 1) 0.45s; }
.pr-cartoes.ativo .pr-cartao-a { --r: 3deg; }
.pr-cartoes.ativo .pr-cartao-b { --r: -3deg; transition-delay: 0.65s; }
.pr-cartao-in { padding: 14px 16px; border-radius: 18px; background: #FFFFFF; color: #0B1530; font-size: 14px; line-height: 1.35; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); animation: pr-boia-cartao 6s ease-in-out infinite; }
.pr-cartao-b .pr-cartao-in { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes pr-boia-cartao { 50% { translate: 0 -10px; } }
.pr-cartao-in b { display: block; font-weight: 700; }
.pr-cartao-in small { display: block; color: #5B6577; font-size: 13px; }
.pc-doc, .pc-mp, .pc-email, .pc-aviso, .pc-vizinhos { display: flex; align-items: center; gap: 12px; }
.pc-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; }
.pc-ic svg { width: 21px; height: 21px; }
.pc-ic-vermelho { background: #FDECEA; color: #D9443B; }
.pc-ic-mp { background: #009EE3; }
.pc-ic-coral { background: #FF6B5B; }
.pc-ic-laranja { background: #FFF1E6; color: #C2410C; }
.pc-hist, .pc-agenda, .pc-mes, .pc-pedidos { display: grid; gap: 8px; }
.pc-hist span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pc-hist i, .pc-rostos i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E7F0FB; color: #176BD0; font: 700 10px/1 var(--f-texto); font-style: normal; }
.pc-hist em { margin-left: auto; color: #8A93A6; font-size: 12px; font-style: normal; }
.pc-rostos { display: flex; flex: none; }
.pc-rostos i { width: 30px; height: 30px; margin-left: -9px; border: 2px solid #fff; background: #F6C9A8; color: #7C2D12; }
.pc-rostos i:first-child { margin-left: 0; }
.pc-rostos i:nth-child(2) { background: #CFE3D4; color: #14532D; }
.pc-rostos i:nth-child(3) { background: #D7DDF0; color: #1E3A8A; }
/* por produto */
.h-marca-forlabs .pr-cartao-in { font-family: var(--p-fonte); }
.h-marca-lojinha .pr-cartao-in { background: #F7F5F2; color: #0A2531; }
.h-marca-lojinha .pr-cartao-in b { font-family: var(--p-fonte); font-size: 16px; }
.h-marca-forcondom .pr-cartao-in { color: #1F1B16; font-family: var(--p-fonte); }
.h-marca-forcondom .pr-cartao-in small { color: #6B635A; }
.h-marca-forbarber .pr-cartao-in { background: #111A2C; color: #F4EFE6; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(244, 239, 230, 0.12); }
.h-marca-forbarber .pr-cartao-in > div > b { font: 700 20px/1.1 var(--p-fonte); }
.h-marca-forbarber .pr-cartao-in small { color: rgba(244, 239, 230, 0.6); }
.pc-agenda { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.pc-agenda > b { grid-column: 1 / -1; }
.pc-col { display: grid; gap: 6px; align-content: start; }
.pc-col i { min-height: 30px; padding: 6px 8px; border-left: 3px solid #6E8BD6; border-radius: 8px; background: rgba(47, 74, 138, 0.45); font-size: 12px; font-style: normal; }
.pc-col i.pc-vazio { border-left-color: transparent; background: repeating-linear-gradient(-45deg, rgba(244, 239, 230, 0.05) 0 6px, transparent 6px 12px); }
.pc-col i.pc-novo { border-left-color: #D0646B; background: rgba(155, 39, 48, 0.6); box-shadow: 0 0 0 1px rgba(208, 100, 107, 0.7); animation: pr-pulso 2.4s ease-in-out infinite; }
@keyframes pr-pulso { 50% { box-shadow: 0 0 0 4px rgba(208, 100, 107, 0.25); } }
.pc-mes span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(244, 239, 230, 0.1); }
.pc-mes em { font: 700 18px/1 var(--p-fonte); font-style: normal; }
.h-marca-pratuca .pr-cartao-in { background: #29231F; color: #FFF3E5; font-family: var(--p-fonte); }
.h-marca-pratuca .pr-cartao-in small { color: rgba(255, 243, 229, 0.7); }
.pc-pedidos span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 243, 229, 0.08); font-size: 13px; }
.pc-pedidos i { padding: 3px 8px; border-radius: 99px; background: #F28C38; color: #29231F; font-size: 11px; font-style: normal; font-weight: 700; }
.pc-pedidos i.pc-feito { background: rgba(126, 226, 168, 0.2); color: #7EE2A8; }
.pc-pedidos em { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; }
.h-marca-pratuca .pr-cartao-b .pr-cartao-in { background: #FFF3E5; color: #29231F; }
.h-marca-pratuca .pr-cartao-b small { color: #5B4636; }
.pc-comissao b { font-size: 26px; line-height: 1; letter-spacing: -0.03em; }

/* ---------- Os cinco ícones na lateral ---------- */
.pr-doca { position: absolute; top: 50%; right: max(12px, calc((100% - var(--largura)) / 2 - 64px)); z-index: 3; display: grid; gap: 14px; transform: translateY(-50%); }
.pr-doca::before, .pr-doca::after { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: color-mix(in srgb, var(--pr-anel, #fff) 22%, transparent); }
.pr-doca::after { background: var(--pr-anel, #fff); transform: scaleY(var(--pr-prog, 0)); transform-origin: top; }
.pr-doca-item { position: relative; z-index: 1; display: block; width: 42px; height: 42px; border-radius: 12px; text-decoration: none; opacity: 0.6; transform: scale(0.86); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1), box-shadow 0.3s ease; }
.pr-doca-item .pr-icone { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5); }
.pr-doca-item:hover, .pr-doca-item:focus-visible { opacity: 1; }
.pr-doca-item.ativo { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px var(--pf1), 0 0 0 4px var(--pr-anel, #fff); }
.pr-doca-nome { position: absolute; top: 50%; right: calc(100% + 12px); padding: 6px 12px; border-radius: 99px; background: rgba(17, 18, 20, 0.88); color: #fff; font: 600 13px/1 var(--f-texto); white-space: nowrap; opacity: 0; transform: translate(6px, -50%); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.pr-doca-item:hover .pr-doca-nome, .pr-doca-item:focus-visible .pr-doca-nome { opacity: 1; transform: translate(0, -50%); }

/* ---------- Fechamento ---------- */
.pr-final { background: var(--noite); color: var(--sobre-noite); }
.pr-final .sv-titulo em { color: var(--destaque-noite); }
.pr-final .sv-final-texto p { color: var(--sobre-noite-2); }

/* ---------- Sem JS: os produtos um embaixo do outro, o celular parado ao lado ---------- */
html:not(.pr-js) .pr-grade { align-items: start; padding-block: 48px var(--secao); }
html:not(.pr-js) .pr-textos { display: grid; gap: 20px; }
html:not(.pr-js) .pr-texto:not(.pr-intro) { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--p-linha); border-radius: var(--r-xl); background: var(--p-fundo); }
html:not(.pr-js) .pr-texto.h-marca-forlabs { background: #F6F8FB; }
html:not(.pr-js) .pr-texto.h-marca-lojinha { background: #0A2531; }
html:not(.pr-js) .pr-texto.h-marca-forbarber { background: #0B1220; }
html:not(.pr-js) .pr-intro { padding-block: 40px 20px; }
html:not(.pr-js) .pr-dica, html:not(.pr-js) .pr-fundo, html:not(.pr-js) .pr-cartoes, html:not(.pr-js) .pr-doca { display: none; }
html:not(.pr-js) .pr-cena { position: sticky; top: 100px; height: auto; }
html:not(.pr-js) .pr-tela:not(.ap-inicio) { display: none; }

/* ---------- Telas médias ---------- */
@media (max-width: 1180px) {
    .pr-grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .pr-palco { --tel-h: min(540px, calc(100svh - 130px)); }
    .pr-cartoes { --sobra: 22px; }
    .pr-cartao { width: 152px; }
    .pr-cartao-a { top: calc(50% - var(--tel-h) * 0.42); }
    .pr-doca { right: 6px; gap: 12px; }
    .pr-doca-item { width: 34px; height: 34px; border-radius: 10px; }
    .pr-cartao-in { padding: 12px 14px; font-size: 13px; }
    .pc-comissao b { font-size: 22px; }
    .pc-mes span, .pc-pedidos span { flex-wrap: wrap; gap: 2px 8px; }
    .pc-mes em { font-size: 16px; }
}

/* ---------- Celular: o aparelho em cima, o texto embaixo ---------- */
@media (max-width: 1000px) {
    .pr-cartao-a { display: none; }
}
@media (max-width: 900px) {
    .pr-palco { --tel-h: min(520px, 47svh); }
    .pr-cartao-a { display: block; }
    html.pr-js .pr-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 18px; padding-top: 84px; padding-bottom: 16px; }
    html.pr-js .pr-cena { order: -1; height: auto; }
    html.pr-js .pr-texto { align-self: start; }
    .pr-giro { animation: none; }
    .pr-intro .sv-titulo { font-size: clamp(36px, min(10vw, 6svh), 60px); }
    .pr-intro .sv-sub { margin: 14px 0 18px; font-size: 16px; }
    .pr-dica { font-size: 14px; }
    .pr-texto .h-produto-marca { gap: 10px; }
    .pr-texto .h-produto-marca > :first-child { width: 36px; height: 36px; border-radius: 10px; }
    .pr-texto.h-marca-forlabs .h-produto-marca, .pr-texto.h-marca-lojinha .h-produto-marca { font-size: 23px; }
    .pr-texto.h-marca-forcondom .h-produto-marca { font-size: 25px; }
    .pr-texto.h-marca-forbarber .h-produto-marca { font-size: 31px; }
    .pr-texto.h-marca-pratuca .h-produto-marca { font-size: 26px; }
    .pr-texto.h-marca-pratuca .h-produto-marca > :first-child { width: 40px; }
    .pr-texto .pr-frase, .pr-texto.h-marca-forlabs .pr-frase { max-width: none; margin-top: 12px; }
    .pr-texto.h-marca-forlabs .pr-frase { font-size: clamp(26px, min(7.4vw, 4.2svh), 40px); }
    .pr-texto.h-marca-lojinha .pr-frase { font-size: clamp(30px, min(9vw, 5svh), 48px); }
    .pr-texto.h-marca-forcondom .pr-frase { font-size: clamp(28px, min(8vw, 4.6svh), 44px); }
    .pr-texto.h-marca-forbarber .pr-frase { font-size: clamp(36px, min(11vw, 6svh), 60px); }
    .pr-texto.h-marca-pratuca .pr-frase { font-size: clamp(30px, min(8.6vw, 4.8svh), 46px); }
    .pr-descricao { margin-top: 10px; font-size: 15px; line-height: 1.5; }
    .pr-acoes { gap: 10px; margin-top: 16px; }
    .pr-acoes .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
    .pr-gigante { top: 32%; font-size: min(26vw, 30svh); }
    .pr-gigante[data-pr-gigante="3"], .pr-gigante[data-pr-gigante="4"] { font-size: min(20vw, 30svh); }
    /* os cartões menores, encostados no celular (no celular estreito não cabem) */
    .pr-cartoes { --sobra: 30px; }
    .pr-cartao { width: 172px; }
    .pr-cartao-in { padding: 10px 12px; border-radius: 14px; font-size: 12px; }
    .pr-cartao-in small { font-size: 11px; }
    .pc-ic { width: 32px; height: 32px; border-radius: 10px; }
    .pc-ic svg { width: 17px; height: 17px; }
    .pc-doc, .pc-mp, .pc-aviso { gap: 9px; }
    .pc-agenda .pc-col i { font-size: 11px; }
    .h-marca-forbarber .pr-cartao-in > div > b { font-size: 16px; }
    .pr-doca { top: calc(84px + var(--tel-h) / 2); right: 10px; gap: 10px; }
    .pr-doca::before, .pr-doca::after { top: 16px; bottom: 16px; }
    .pr-doca-item { width: 32px; height: 32px; border-radius: 9px; }
    .pr-doca-nome { display: none; }
    html:not(.pr-js) .pr-grade { grid-template-columns: minmax(0, 1fr); }
    html:not(.pr-js) .pr-cena { display: none; }
}
@media (max-width: 560px) {
    .pr-cartoes { display: none; }
}
@media (max-width: 900px) and (max-height: 760px) {
    .pr-palco { --tel-h: min(360px, 40svh); }
    .pr-descricao { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .pr-intro .sv-sub { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
}
@media (max-width: 380px) {
    .pr-cartao { width: 150px; }
}

/* ---------- Movimento reduzido: tudo troca sem animar ---------- */
@media (prefers-reduced-motion: reduce) {
    .pr-palco, .pr-palco::before, .pr-palco::after, .pr-gigante, .pr-cartao, .pr-doca-item, .pr-status { transition: none !important; }
    html.pr-js .pr-anda { transition: none !important; animation: none !important; }
    html.pr-js .pr-cena { animation: none; }
    .pr-giro, .pr-cartao-in, .pr-dica i::after, .ap-inicio .pr-icone, .pc-col i.pc-novo, .pr-tela [data-ve].ve, .fb-ok > span { animation: none !important; }
    .pr-giro { transform: none; }
}