/* Página /porta: só a conferência de localização e os campos da Sislav (rodada 8).
   Identidade Wash Go: azul #0062E0, cinza #F4F6F8, Montserrat. Ocupa a tela inteira em qualquer largura. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#F4F6F8;color:#14181D;font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}

.pp-top{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:max(18px,env(safe-area-inset-top)) 20px 18px;background:linear-gradient(135deg,#0047B3 0%,#0062E0 55%,#2F86FF 100%);color:#fff;text-align:center}
.pp-logo{display:block;background:#fff;border-radius:14px;padding:7px 14px;box-shadow:0 8px 20px -12px rgba(0,20,70,.6)}
.pp-logo img{display:block;height:34px;width:auto}
.pp-h{margin:0;font-size:clamp(22px,6.4vw,30px);line-height:1.1;font-weight:900;letter-spacing:-.03em}

.pp-main{flex:1;display:flex;flex-direction:column;min-height:0}
.pp-st{width:100%;max-width:620px;margin:0 auto;padding:28px 20px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pp-st[hidden]{display:none}
.pp-spin{width:46px;height:46px;border-radius:50%;border:4px solid #DCE6F5;border-top-color:#0062E0;animation:pp-gira .8s linear infinite;margin:12px 0 16px}
@keyframes pp-gira{to{rotate:360deg}}
.pp-ill{width:58px;height:58px;border-radius:18px;background:#FFF3E0;color:#C25E00;display:grid;place-items:center;margin:4px 0 12px}
.pp-ill svg{width:30px;height:30px}
.pp-t{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.pp-p{margin:0;font-size:14px;line-height:1.55;color:#4A525C;max-width:460px}
.pp-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:460px;min-height:52px;margin-top:18px;border:0;border-radius:99px;background:#0062E0;color:#fff;font:800 15px/1.2 Montserrat,Arial,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 12px 26px -14px rgba(0,98,224,.9);padding:0 20px}
.pp-btn[hidden]{display:none}
.pp-btn-2{background:#fff;color:#0062E0;box-shadow:inset 0 0 0 1.5px #0062E0}
.pp-btn + .pp-btn-2{margin-top:10px}
.pp-link{margin-top:12px;color:#0062E0;font-size:13px;font-weight:700;text-decoration:none;padding:6px}
.pp-link[hidden]{display:none}
.pp-mini{margin:14px 0 0;font-size:12px;line-height:1.5;color:#6B7480;max-width:400px}
.pp-btn:focus-visible,.pp-link:focus-visible,.pp-ext:focus-visible,.pp-logo:focus-visible{outline:3px solid #8FC1FF;outline-offset:3px}

/* campos da Sislav ocupam todo o espaço entre o topo e o rodapé */
.pp-st-porta{flex:1;max-width:none;padding:0;min-height:520px}
.pp-frame{flex:1;width:100%;display:flex;background:#fff}
.pp-frame iframe{flex:1;display:block;width:100%;min-height:480px;border:0}
.pp-ext{flex:none;display:block;width:100%;padding:10px 16px;font-size:12px;font-weight:700;color:#0062E0;text-decoration:none;background:#F4F6F8;border-top:1px solid #E3E8EF;text-align:center}

.pp-foot{flex:none;padding:6px 16px max(10px,env(safe-area-inset-bottom));text-align:center;background:#F4F6F8}
.portlink-sign-wrap{text-align:center;margin-top:6px}
.portlink-sign{display:inline-flex;align-items:baseline;gap:5px;text-decoration:none;font-family:'Poppins',sans-serif;transition:color .2s ease;padding-bottom:8px;color:rgba(23,25,28,.6)}
.portlink-sign:hover,.portlink-sign:focus-visible{color:#17191c}
.portlink-by{font-size:12px;font-weight:300;font-style:normal}
.portlink-word{font-size:14px;letter-spacing:.01em;white-space:nowrap}
.portlink-port{font-weight:300}
.portlink-link{font-weight:700}

@media (prefers-reduced-motion:reduce){.pp-spin{animation-duration:2.4s}}

/* ===== App Wash Go (rodada 10): máquinas primeiro, porta depois ===== */
.pp-sub{margin:0;font-size:12.5px;font-weight:600;opacity:.92}
.is-app .pp-top{padding-bottom:16px}
.ap-main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:14px}
.ap-sec{background:#fff;border-radius:22px;padding:16px 14px 14px;box-shadow:0 12px 30px -24px rgba(0,40,110,.55),inset 0 0 0 1px #E6EBF1}
.ap-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ap-h{margin:0;font-size:19px;font-weight:900;letter-spacing:-.02em;color:#14181D}
.ap-vivo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#157A3E;background:#E8F8EE;padding:5px 9px;border-radius:99px}
.ap-vivo i{width:7px;height:7px;border-radius:50%;background:#2BC46A;box-shadow:0 0 0 3px rgba(43,196,106,.25);animation:ap-pulso 1.6s ease-in-out infinite}
@keyframes ap-pulso{50%{opacity:.35}}
.ap-resumo{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;font-size:13px;color:#4A525C}
.ap-resumo b{color:#0062E0;font-weight:900}
.ap-upd{margin:10px 0 0;font-size:11.5px;color:#6B7480;text-align:center}
.is-erro .ap-upd{color:#A1261B;font-weight:600}

/* parede de máquinas: 3 em cima, 3 embaixo, como na loja */
.mq-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mq-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 4px 9px;border-radius:14px;background:linear-gradient(180deg,#FFFFFF,#EEF1F4);box-shadow:inset 0 0 0 1px #DCE2E9}
.mq-tag{position:absolute;left:6px;top:6px;padding:3px 6px;border-radius:5px;background:#E4352B;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.mq-c.lavadora .mq-tag{background:#0062E0}
.mq-tag b{font-weight:900}
.mq-ic{width:56px;height:56px}
.mq-st{display:flex;flex-direction:column;align-items:center;min-width:76%;padding:4px 8px;border-radius:99px;font-size:12px;font-weight:800;line-height:1.15;text-align:center}
.mq-st small{font-size:10.5px;font-weight:700;opacity:.85}
.is-livre .mq-st{background:#E8F8EE;color:#157A3E}
.is-ocup .mq-st{background:#FFF3E0;color:#B35400;border-radius:12px}
.is-off .mq-st{background:#EEF1F4;color:#6B7480}
.mq-c::after{content:"";position:absolute;right:7px;top:9px;width:8px;height:8px;border-radius:50%;background:#B8C0CA}
.is-livre::after{background:#2BC46A;box-shadow:0 0 0 2px rgba(43,196,106,.25),0 0 8px rgba(43,196,106,.8)}
.is-ocup::after{background:#F5A524;box-shadow:0 0 0 2px rgba(245,165,36,.25)}
.mq-grade:empty{min-height:250px;border-radius:14px;background:linear-gradient(90deg,#F1F4F7 25%,#E7ECF1 50%,#F1F4F7 75%) 0 0/200% 100%;animation:ap-carrega 1.2s linear infinite}
@keyframes ap-carrega{to{background-position:-200% 0}}
@media (max-width:349px){.mq-tag{font-size:8.5px;padding:3px 4px}.mq-ic{width:48px;height:48px}.mq-st{font-size:11px}}

/* seção da porta dentro do app */
.ap-porta{display:flex;flex-direction:column}
.ap-st{padding:6px 2px 4px}
.ap-dist{margin:0 0 4px;padding:9px 12px;border-radius:12px;background:#F1F5FB;color:#33425A;font-size:13px;font-weight:700;text-align:center}
.is-perto .ap-dist{background:#E8F8EE;color:#157A3E}
.ap-ir{gap:10px;margin-top:14px}
.ap-ir svg{width:22px;height:22px;flex:none}
.is-perto .ap-ir{animation:ap-chegou 1.6s ease-in-out infinite}
@keyframes ap-chegou{50%{box-shadow:0 0 0 8px rgba(0,98,224,.18),0 12px 26px -14px rgba(0,98,224,.9)}}
.ap-st-porta{min-height:0;margin:4px -14px -14px;border-radius:0 0 22px 22px;overflow:hidden}
.ap-st-porta .pp-frame iframe{height:600px;min-height:600px}

/* botão "Adicionar à tela inicial" (cria o atalho do app no celular) */
.pp-inst{display:grid;grid-template-columns:44px minmax(0,1fr) 32px;gap:4px 12px;align-items:center;padding:12px;border-radius:18px;background:#fff;box-shadow:0 10px 26px -20px rgba(0,40,110,.55),inset 0 0 0 1px #DCE6F5;text-align:left}
.pp-inst[hidden]{display:none}
.pp-inst > img{width:44px;height:44px;border-radius:12px}
.pp-inst-t{display:flex;flex-direction:column;gap:2px}
.pp-inst-t b{font-size:14px;font-weight:800}
.pp-inst-t span{font-size:12px;line-height:1.4;color:#5A636E}
.pp-inst-x{width:32px;height:32px;border:0;border-radius:50%;background:#F1F4F7;color:#4A525C;display:grid;place-items:center;cursor:pointer;align-self:start}
.pp-inst-x svg{width:15px;height:15px}
.pp-inst-btn{grid-column:1/-1;margin-top:8px;min-height:46px;border:0;border-radius:99px;background:#0062E0;color:#fff;font:800 14px/1.2 Montserrat,Arial,sans-serif;cursor:pointer}
.pp-inst-dica{grid-column:1/-1;margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#EAF2FF;color:#33425A;font-size:12.5px;line-height:1.5}
.pp-inst-dica[hidden]{display:none}
.pp-inst-btn:focus-visible,.pp-inst-x:focus-visible{outline:3px solid #8FC1FF;outline-offset:2px}
.pp-foot .pp-inst{max-width:620px;margin:6px auto 4px}
.pp-foot .pp-link{display:inline-block;margin:4px 0 0}
@media (prefers-reduced-motion:reduce){.ap-vivo i,.is-perto .ap-ir,.mq-grade:empty{animation:none}}

/* ===== Rodada 12: a porta só abre pelo app da tela inicial; no navegador, convite para adicionar ===== */
.pp-st-instalar{align-items:stretch;text-align:left}
.pp-inst-porta{grid-template-columns:44px minmax(0,1fr)}
.pp-inst-porta .pp-inst-t b{font-size:15px}
.pp-passos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pp-passos li{display:flex;gap:12px;align-items:center;background:#F4F6F8;border-radius:14px;padding:11px 12px}
.pp-passos li > span{flex:none;width:28px;height:28px;border-radius:50%;background:#101010;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.pp-passos p{margin:0;font-size:13px;line-height:1.45;color:#4A525C}
.pp-passos b{color:#14181D}
.pp-st-instalar .pp-mini,.pp-st-instalar .pp-link{align-self:center;text-align:center}
body:not(.is-app) .pp-st-instalar{max-width:620px}

/* ===== Rodada 16: esconde o topo da tela da Sislav (logo + "Acesso à Lavanderia / Wash e go")
   e mostra só o cartão do CPF. A tela é de outro site: não dá para mudar o que tem dentro,
   então a moldura sobe 164 px e corta o topo. Medido em 320, 360, 390 e 430 px: o topo da Sislav
   termina em 156 px e o cartão começa em 181 px em todas. Se a Sislav mudar o layout, ajustar --corte. */
.pp-frame{--corte:164px;overflow:hidden}
.pp-frame iframe{margin-top:calc(-1 * var(--corte));min-height:calc(480px + var(--corte))}
/* Rodada 21: Sislav fora do ar — máquinas esmaecidas e aviso com o horário da última atualização */
.is-velho .mq-grade{opacity:.45;filter:grayscale(.6);transition:opacity .3s}
.is-velho .ap-upd{color:#A1261B;font-weight:600}