/* Porta na linha Mata (CVO 01/11/2026: "se inspire principalmente no Mata app"). Foto de ponta a ponta que muda sozinha, marca sobre a foto, véu que escurece para baixo. * O formulário fica em papel (diretriz 30/10: entrada sem rolagem, formulário claro). Só pele: ids e handlers da Porta v5 seguem iguais. */ #aS.porta{--pe:#2A2520;--ne:#6D6963;--o:#B08A3E;--er:#B3261E;background:#14100C!important;padding:0!important;align-items:flex-end!important;color:#2A2520} #aS.porta .porta-fundo{overflow:hidden;background:#14100C url(/css/casca/obra-heroi.jpg) center/cover no-repeat;animation:portaZoom 26s ease-in-out infinite alternate} #aS.porta .porta-fundo::before,#aS.porta .porta-fundo::after{content:"";position:absolute;inset:0;background:center/cover no-repeat;opacity:0;animation:portaTroca 24s linear infinite} #aS.porta .porta-fundo::before{background-image:url(/libs/chat-kit/fundo-padrao.webp)} #aS.porta .porta-fundo::after{background-image:url(/css/casca/porta-foz.jpg);animation-delay:12s} @keyframes portaTroca{0%,8%{opacity:0}16%,42%{opacity:1}50%,100%{opacity:0}} @keyframes portaZoom{from{transform:scale(1)}to{transform:scale(1.07)}} #aS.porta::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,14,10,.42) 0%,rgba(18,14,10,.08) 24%,rgba(18,14,10,.2) 60%,rgba(18,14,10,.8) 100%)} #aS.porta .porta-cartao{max-width:none;margin:0;padding:22px 22px 86px;border:0;border-radius:28px 28px 0 0;background:#FAF8F3;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -18px 50px rgba(18,14,10,.28);animation:none} #aS.porta .porta-cab{position:fixed;top:clamp(26px,6vh,64px);left:0;right:0;margin:0;padding:0;border:0;pointer-events:none} #aS.porta .porta-assinatura{width:190px;filter:drop-shadow(0 2px 14px rgba(18,14,10,.55))} #aS.porta .porta-saud{font-size:28px!important;color:#2A2520!important;margin:0 0 2px!important} #aS.porta .porta-saud em{color:#2A2520!important} #aS.porta .porta-sub{font-size:14px;line-height:1.4;color:#6D6963;margin:0 auto 12px;max-width:none} #aS.porta .porta-claim{display:none} #aS.porta .porta-btn{border-radius:999px!important} #aS.porta .porta-par{margin:0 0 6px} #aS.porta .porta-par .porta-btn-pri{background:#F7DF8C!important;background-image:none!important;border:1px solid #F7DF8C!important;box-shadow:none!important;color:#2A2520!important} #aS.porta .porta-btn-apple{background:transparent!important;border:1px solid rgba(42,37,32,.16)!important;color:#6D6963!important;opacity:1} #aS.porta .porta-btn-apple *{color:#6D6963!important;fill:#6D6963} #aS.porta #btnLogin{background:#2A2520!important;background-image:none!important;border:1px solid #2A2520!important;box-shadow:none!important;color:#fff!important} #aS.porta #btnLogin *{color:#fff!important} #aS.porta .porta-btn-sec{background:#fff!important;border:1px solid rgba(42,37,32,.16)!important;color:#2A2520!important} #aS.porta .porta-rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #aS.porta .porta-campo{height:46px;margin:0 0 8px;border-radius:14px;background:#fff!important;border:1px solid rgba(42,37,32,.14)!important;color:#2A2520!important} #aS.porta .porta-campo::placeholder{color:#6D6963!important} #aS.porta .porta-campo:focus{border-color:#2A2520!important;box-shadow:0 0 0 3px rgba(42,37,32,.1)!important} #aS.porta .porta-campo:-webkit-autofill{-webkit-text-fill-color:#2A2520;-webkit-box-shadow:0 0 0 40px #fff inset!important;caret-color:#2A2520} #aS.porta .porta-lembrar,#aS.porta .porta-lembrar *{color:#38342F!important} #aS.porta .porta-div{margin:10px 0 8px;color:#6D6963!important;font-size:10.5px;letter-spacing:.18em!important} #aS.porta .porta-div::before,#aS.porta .porta-div::after{background:rgba(42,37,32,.12)} #aS.porta .porta-links,#aS.porta .porta-links a,#aS.porta .porta-senha-abrir,#aS.porta .porta-legal,#aS.porta .porta-legal *,#aS.porta .porta-seg{color:#6D6963!important;border-color:rgba(42,37,32,.2)!important} #aS.porta .porta-portas{gap:6px} #aS.porta .porta-porta{flex-direction:row;min-height:44px;gap:5px;padding:6px;border-radius:999px;background:#fff!important;border:1px solid rgba(42,37,32,.14)!important} #aS.porta .porta-porta:hover{background:#fff!important;border-color:#2A2520!important} #aS.porta .porta-porta svg{width:16px;height:16px;stroke:#2A2520} #aS.porta .porta-porta .l{font-size:12.5px;color:#2A2520!important} #aS.porta .i18n-opt{color:#6D6963!important}#aS.porta .i18n-opt.on{color:#2A2520!important} #aS.porta .porta-aviso,#aS.porta .porta-aviso *{color:#2A2520!important} #aS.porta .porta-erro{color:#B3261E!important} /* computador: a foto ocupa a tela, a marca à esquerda sobre ela e o formulário em cartão de papel à direita */ @media (min-width:821px){ #aS.porta{align-items:center!important;justify-content:flex-end!important;padding:18px clamp(28px,6vw,96px) 18px 18px!important} #aS.porta::before{background:linear-gradient(90deg,rgba(18,14,10,.55) 0%,rgba(18,14,10,.18) 55%,rgba(18,14,10,.28) 100%)} #aS.porta .porta-cartao{width:440px;max-width:440px;padding:28px 34px 20px;border-radius:28px;box-shadow:0 30px 80px rgba(18,14,10,.4)} #aS.porta .porta-cab{top:50%;left:clamp(40px,8vw,130px);right:auto;transform:translateY(-50%)} #aS.porta .porta-assinatura{width:clamp(240px,24vw,340px);max-width:none} } @media (prefers-reduced-motion:reduce){#aS.porta .porta-fundo,#aS.porta .porta-fundo::before,#aS.porta .porta-fundo::after{animation:none}} /* folgas: conteúdo maior que a tela rola sem cortar o topo (flex-end cortaria); telas baixas abrem mão da marca */ #aS.porta{align-items:flex-start!important} #aS.porta .porta-cartao{margin-top:auto} #aS.porta .porta-fundo{filter:saturate(.72) brightness(.82)} #aS.porta .porta-assinatura{filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(18,14,10,.6))} #aS.porta .porta-lembrar{margin:0 0 6px;min-height:24px} #aS.porta .porta-lembrar label{color:#38342F!important} #aS.porta .porta-lembrar input{accent-color:#2A2520} #aS.porta .porta-i18n{margin:8px 0 0} #aS.porta .i18n-sel{background:transparent;border-color:rgba(42,37,32,.12)} #aS.porta .i18n-opt{min-height:26px;padding:2px 8px} #aS.porta .i18n-opt.on{background:#2A2520!important;color:#fff!important} #aS.porta .porta-legal{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(42,37,32,.1)} #aS.porta .porta-legal a{color:#6D6963!important} #aS.porta .porta-links{margin:2px 0 0!important} #aS.porta .porta-portas{grid-template-columns:repeat(3,minmax(0,1fr))!important} #aS.porta .porta-porta{min-width:0} #aS.porta .porta-porta .l{font-size:12px;line-height:1.15;text-align:left} @media (max-width:820px){ #aS.porta .porta-cartao{padding:18px 18px 74px} #aS.porta .porta-seg{display:none} #aS.porta .porta-sub{font-size:13px;margin-bottom:10px} #aS.porta .porta-porta svg{display:none} #aS.porta .porta-porta .l{text-align:center} } @media (max-width:820px) and (max-height:700px){#aS.porta .porta-cab,#aS.porta .porta-sub{display:none}} @media (min-width:821px){ #aS.porta{align-items:center!important} #aS.porta .porta-cartao{margin:auto 0} #aS.porta::before{background:linear-gradient(90deg,rgba(18,14,10,.72) 0%,rgba(18,14,10,.42) 45%,rgba(18,14,10,.2) 100%)} } /* painéis de código e link (montados com estilo em linha no index) e o que acompanha a porta */ body.auth-active [id$="-overlay"]{background:rgba(18,14,10,.55)!important} body.auth-active [id$="-overlay"]>div{background:#FAF8F3!important;background-image:none!important;border:0!important;border-radius:28px!important;box-shadow:0 30px 80px rgba(18,14,10,.4)!important} body.auth-active [id$="-overlay"]>div *{color:#2A2520!important} body.auth-active [id$="-overlay"] input{background:#fff!important;border:1px solid rgba(42,37,32,.16)!important;border-radius:14px!important} body.auth-active [id$="-overlay"] button{border-radius:999px!important} body.auth-active [id$="-overlay"] button[style*="gradient"],body.auth-active [id$="-overlay"] button[style*="background:#"]{background:#2A2520!important;background-image:none!important;color:#fff!important;border:0!important} body.auth-active .aj-bt{background:#fff!important;background-image:none!important;color:#2A2520!important;border:1px solid rgba(42,37,32,.12)!important;box-shadow:0 8px 24px rgba(18,14,10,.25)!important} body.auth-active .aj-bt *{color:#2A2520!important;stroke:#2A2520!important} body.auth-active #ispFooter{background:rgba(18,14,10,.72)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* painéis: papel no lugar do azul-noite (as regras antigas vivem no