.beach{min-height:100vh;display:grid;background:#3a1f10 url(/img/fundo-padrao.jpg) 30% center/cover no-repeat;position:relative}
.beach::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(20,35,59,.15),rgba(20,35,59,.05) 45%,rgba(20,35,59,.55))}
.beach-in{position:relative;display:grid;grid-template-columns:1fr minmax(0,400px);gap:24px;align-items:center;max-width:1100px;width:100%;margin:0 auto;padding:32px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
.beach-in > *{min-width:0}
.beach-copy{display:grid;gap:12px;align-self:start;color:#fff}
.beach-copy img{width:150px;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:50%;padding:12px;box-shadow:0 0 0 5px rgba(255,214,120,.55),0 10px 30px rgba(0,0,0,.3)}
.beach-copy .voltar{justify-self:start;color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;background:rgba(20,35,59,.45);backdrop-filter:blur(6px);border-radius:999px;padding:6px 14px}
.beach-copy .voltar:hover{background:rgba(20,35,59,.7)}
.beach-copy .logo-link{justify-self:start;border-radius:50%}
.beach-copy p{margin:0;max-width:26ch;font-size:1.05rem;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.auth-card{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-radius:18px;padding:24px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(20,35,59,.35)}
.auth-card h1{font-size:1.9rem}
.auth-card .sub{margin:-4px 0 0;color:var(--muted)}
.auth-card .link{font-size:.85rem;justify-self:end}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sand);border-radius:10px;padding:4px;gap:4px}
.seg a{text-align:center;text-decoration:none;color:var(--muted);border-radius:8px;padding:8px;font-weight:600}
.seg a[aria-current="page"]{background:var(--surface);color:var(--ink)}
@media (max-width:700px){
  .beach{background-position:22% center}
  .beach::before{background:linear-gradient(180deg,rgba(20,35,59,.1),rgba(20,35,59,.6))}
  .beach-in{grid-template-columns:1fr}
  .beach-copy{justify-items:center;text-align:center}
  .beach-copy .voltar,.beach-copy .logo-link{justify-self:center}
  .beach-copy img{width:110px}
}