/* academia — tela de entrada (09/11: versão A "Vitrine" do mock _uilab/academia-login-mocks.php).
   Fundo = as capas com foto subindo devagar em colunas inclinadas; frase + formulário à esquerda. */
:root{--red:#E11D48;--bg:#07070C;--mu:#8E8E99}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* mosaico do fundo */
.mos{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
.mos .tr{position:absolute;top:-30%;right:-8%;width:78%;height:160%;display:flex;gap:18px;transform:rotate(-9deg)}
.mos .col{flex:1;display:flex;flex-direction:column;gap:18px;animation:sobe 60s linear infinite}
.mos .col:nth-child(2){animation-duration:75s;animation-direction:reverse}
.mos .col:nth-child(3){animation-duration:66s}
.mos .col:nth-child(4){animation-duration:82s;animation-direction:reverse}
.mos .col img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;display:block;filter:saturate(.95) brightness(.85)}
@keyframes sobe{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.mos:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,#07070C 0%,#07070C 30%,rgba(7,7,12,.82) 46%,rgba(7,7,12,.35) 70%,rgba(7,7,12,.15) 100%),
  linear-gradient(0deg,#07070C 0%,rgba(7,7,12,0) 22%),linear-gradient(180deg,rgba(7,7,12,.7) 0%,rgba(7,7,12,0) 18%)}
@media(prefers-reduced-motion:reduce){.mos .col{animation:none}}

/* página */
.pag{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;padding:48px 7vw}
.esq{width:100%;max-width:560px}
.mr{position:fixed;top:34px;left:7vw;z-index:2;display:flex;align-items:flex-end;gap:12px}
.mr img{height:30px;width:auto;display:block}
.mr .sep{width:1px;height:18px;background:rgba(255,255,255,.25);margin:0 2px 2px}
.mr b{font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#A1A1AA;line-height:1;padding-bottom:3px}
.fz{font-family:'Oswald',sans-serif;font-weight:700;-webkit-text-stroke:1.4px currentColor;letter-spacing:.035em;text-transform:uppercase;line-height:1;font-size:58px;color:#fff;margin:0 0 34px}
.fz em{font-style:normal;color:var(--red)}
.sl{position:fixed;right:28px;bottom:26px;z-index:1;display:flex;gap:8px}
.sl span{font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:8px 13px;border-radius:30px;background:rgba(7,7,12,.7);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.sl span i{color:var(--red);margin-right:6px}

/* formulário */
.fm{width:100%;max-width:400px}
.fm h1{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:0 0 8px}
.fm p{font-size:14.5px;color:var(--mu);margin:0 0 30px}
.cpo{position:relative;margin-bottom:12px}
.cpo .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:18px;color:#6B6B76;pointer-events:none;transition:color .2s}
.cpo input{width:100%;height:58px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font:500 15px 'Plus Jakarta Sans',sans-serif;padding:0 50px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.cpo input::placeholder{color:#6B6B76}
.cpo input:focus{border-color:var(--red);background:rgba(225,29,72,.07);box-shadow:0 0 0 4px rgba(225,29,72,.14)}
.cpo input:-webkit-autofill,.cpo input:-webkit-autofill:hover,.cpo input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #15151C inset;-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 9999s}
.cpo:focus-within .ic{color:#fff}
.cpo .olho{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#8E8E99;font-size:18px;cursor:pointer}
.bt{width:100%;height:58px;border:0;border-radius:14px;background:var(--red);color:#fff;font:700 15.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 34px -10px rgba(225,29,72,.7);transition:transform .15s,box-shadow .2s}
.bt:hover{transform:translateY(-1px);box-shadow:0 18px 40px -10px rgba(225,29,72,.85)}
.bt i{font-size:17px;transition:transform .2s}.bt:hover i{transform:translateX(3px)}
.rod{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--mu);flex-wrap:wrap}
.rod>a{color:#C9C9D1;text-decoration:underline;text-underline-offset:3px}
.rod b{color:#fff}
.erro{background:rgba(225,29,72,.12);border:1px solid rgba(225,29,72,.4);color:#FECDD3;font-size:13px;border-radius:10px;padding:10px 14px;margin:-14px 0 16px}

/* celular */
@media(max-width:900px){
  .mos .tr{top:-20%;right:-30%;width:150%;height:90%}
  .mos:after{background:linear-gradient(0deg,#07070C 0%,#07070C 50%,rgba(7,7,12,.55) 68%,rgba(7,7,12,.2) 100%)}
  .pag{align-items:flex-end;padding:30vh 20px 36px}
  .mr{position:absolute;top:24px;left:20px}
  .fz{font-size:34px;-webkit-text-stroke:1.1px currentColor;margin-bottom:26px}
  .fm h1{font-size:26px}
  .fm p{margin-bottom:24px}
  .sl{display:none}
}
@media(max-width:360px){.fz{font-size:29px}}
@media(max-width:900px) and (max-height:640px){.pag{padding-top:20vh}}