*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#fff;background:#1A2856;
  background-image:linear-gradient(rgba(16,26,58,.35),rgba(16,26,58,.55)),url("assets/fondo.jpg");
  background-image:linear-gradient(rgba(16,26,58,.35),rgba(16,26,58,.55)),image-set(url("assets/fondo.webp") type("image/webp"),url("assets/fondo.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;background-attachment:scroll;
  -webkit-font-smoothing:antialiased;
}
.wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 20px 24px;max-width:560px;width:100%;margin:0 auto}
.logo{width:112px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.brand{margin:14px 0 0;font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:#CFE3FF}
h1{margin:22px 0 8px;font-size:2.4rem;line-height:1.1;font-weight:700}
.lead{margin:0 0 28px;font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.9)}
.form{width:100%}
.row{display:flex;flex-direction:column;gap:10px}
input[type=email]{width:100%;font:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;outline:none}
input[type=email]::placeholder{color:rgba(255,255,255,.65)}
input[type=email]:focus{border-color:#A9CCFF;box-shadow:0 0 0 3px rgba(169,204,255,.3)}
input[aria-invalid=true]{border-color:#FFB4B4}
button{font:inherit;font-weight:600;font-size:1rem;padding:14px 22px;border:0;border-radius:12px;
  background:#fff;color:#1A2856;cursor:pointer;transition:transform .1s,background .2s}
button:hover{background:#DCEBFF}
button:active{transform:scale(.98)}
button:disabled{opacity:.7;cursor:default}
.note{margin:12px 0 0;font-size:.85rem;color:rgba(255,255,255,.75)}
.msg{min-height:1.4em;margin:10px 0 0;font-weight:500}
.msg.ok{color:#BFF5D0}.msg.err{color:#FFC4C4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{text-align:center;padding:18px 16px calc(18px + env(safe-area-inset-bottom));font-size:.8rem;color:rgba(255,255,255,.7)}
@media (min-width:600px){
  .logo{width:140px}
  h1{font-size:3.2rem}
  .lead{font-size:1.15rem}
  .row{flex-direction:row}
  .row input{flex:1}
}