.nb-mail{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  /* El acceso tiene atmósfera propia: siempre oscuro, en los dos temas.
     El navbar y el pie sí siguen el tema del visitante. */
  --nb-ink:#F2F3FB; --nb-muted:#B9BEDD; --nb-faint:#8E94BC;
  --nb-surface:rgba(23,26,48,.72); --nb-field:rgba(12,14,32,.66); --nb-line:rgba(123,92,246,.28);
  --nb-t:240ms cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;overflow:hidden;
  /* La isla del menu flota encima y acaba en y=95: con 64 px el
     titulo le quedaba justo debajo. Se amplia para que la barra
     quede DENTRO del campo de la red neuronal, no encima de el. */
  padding:clamp(178px,15vw,214px) 0 clamp(96px,11vw,138px);
  background:#080A16;
}
/* lienzo de la red */
.nb-net{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
}
/* viñeta: apaga los bordes para que el foco caiga en el formulario */
.nb-mail::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 0%, transparent 38%, rgba(8,10,22,.55) 74%, rgba(8,10,22,.9) 100%);
}
.nb-mail__wrap{position:relative;z-index:2}
.nb-mail__card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Red de seguridad para el pie: si por lo que sea no cargan los estilos
   de Croster, los enlaces legales siguen separados y en su sitio. */
.sfooter .btn-container ul.nav{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:0;padding:0;list-style:none;
}
.sfooter .btn-container ul.nav li{margin:0}
.sfooter .footer-last{gap:14px 24px;flex-wrap:wrap}
/* Pie en móvil: todo centrado y en columna. Sin esto el copyright
   quedaba a la izquierda y los enlaces desbordaban a dos líneas. */
@media (max-width:767px){
  .sfooter .footer-last{flex-direction:column;text-align:center;gap:18px}
  .sfooter .footer-copyright{text-align:center}
  .sfooter .btn-container{flex-direction:column;align-items:center;gap:14px;width:100%}
  .sfooter .btn-container ul.nav{justify-content:center;gap:10px 20px}
  .sfooter .back-to-top{margin:0}
}

/* la página ocupa el alto de la ventana: sin hueco blanco al final */
html,body{min-height:100%}
.body-container{display:flex;flex-direction:column;min-height:100vh}
.body-container > main.nb-mail{flex:1 0 auto}
.body-container > .sec.footer{flex-shrink:0;margin-top:auto}
.nb-mail *{box-sizing:border-box}
.nb-mail__wrap{max-width:560px;margin:0 auto;padding:0 20px}
.nb-mail__head{text-align:center;margin-bottom:clamp(28px,4vw,40px)}
.nb-mail__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#B49BFF;background:rgba(123,92,246,.16);border:1px solid rgba(123,92,246,.30);
  padding:7px 15px;border-radius:100px;margin-bottom:22px;
}
.nb-mail__title{
  font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:700;line-height:1.08;
  letter-spacing:-.025em;color:var(--nb-ink);margin:0 0 14px;text-wrap:balance;
}
.nb-mail__title span{
  background:var(--nb-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.nb-mail__sub{font-size:1.02rem;line-height:1.62;color:var(--nb-muted);max-width:42ch;margin:0 auto}
.nb-mail__card{
  background:var(--nb-surface);border:1px solid var(--nb-line);border-radius:16px;
  padding:clamp(26px,4vw,34px);box-shadow:0 10px 40px rgba(123,92,246,.10);
  position:relative;overflow:hidden;
}
.nb-mail__card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nb-grad)}
.nb-mail__label{display:block;font-size:.86rem;font-weight:600;color:var(--nb-ink);margin:0 0 9px}
.nb-mail__input{
  width:100%;border:1.5px solid var(--nb-line);border-radius:12px;padding:14px 16px;
  font-size:1rem;font-family:inherit;color:var(--nb-ink);background:var(--nb-field);
  transition:border-color var(--nb-t),box-shadow var(--nb-t),background var(--nb-t);
}
.nb-mail__input::placeholder{color:var(--nb-faint)}
.nb-mail__input:focus{
  outline:none;border-color:var(--nb-violet);background:var(--nb-surface);
  box-shadow:0 0 0 4px rgba(123,92,246,.14);
}
.nb-mail__hint{
  font-size:.85rem;color:var(--nb-faint);margin:10px 0 0;
  display:flex;align-items:flex-start;gap:7px;line-height:1.5;
}
.nb-mail__hint i{margin-top:3px;flex-shrink:0}
.nb-mail__hint strong{color:var(--nb-muted);font-weight:600}
.nb-mail__btn{
  width:100%;margin-top:22px;border:0;border-radius:12px;background:var(--nb-grad);color:#fff;
  font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:.01em;padding:15px 20px;
  cursor:pointer;box-shadow:0 8px 22px rgba(123,92,246,.28);
  transition:transform var(--nb-t),box-shadow var(--nb-t);
}
.nb-mail__btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(123,92,246,.36)}
.nb-mail__btn:active{transform:translateY(0)}
.nb-mail__btn:focus-visible{outline:3px solid var(--nb-violet);outline-offset:3px}
.nb-mail__error{
  display:flex;align-items:flex-start;gap:10px;background:rgba(232,64,152,.08);
  border:1px solid rgba(232,64,152,.28);border-radius:12px;padding:13px 15px;margin:0 0 20px;
  font-size:.9rem;line-height:1.5;color:var(--nb-ink);
}
.nb-mail__error i{color:var(--nb-pink);margin-top:2px;flex-shrink:0}
.nb-mail__help{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  margin:26px 0 0;font-size:.88rem;color:var(--nb-faint);
}
.nb-mail__help a{color:#A98CFF;font-weight:600;text-decoration:none}
.nb-mail__help a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .nb-mail *{transition:none!important}
  .nb-mail__btn:hover{transform:none}
}
/* ── sus dominios, para que no tenga que escribirlos ──────────
   Solo salen con sesion iniciada y cuando NO le hemos puesto ya su
   direccion. Heredan las variables de `.nb-mail`, que es el ambito
   oscuro: aqui no se redeclara ni un color. */
.nb-mail__suyos{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:16px 0 2px;
}
.nb-mail__suyos-tit{
  font-family:"Outfit",system-ui,-apple-system,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--nb-faint);margin-right:2px;
}
.nb-mail__dom{
  font-family:"Figtree",system-ui,-apple-system,sans-serif;
  font-size:0.86rem;line-height:1;
  color:var(--nb-muted);background:rgba(123,92,246,0.10);
  border:1px solid var(--nb-line);border-radius:999px;
  padding:7px 13px;cursor:pointer;
  transition:color var(--nb-t),background var(--nb-t),
             border-color var(--nb-t),transform var(--nb-t);
}
.nb-mail__dom:hover{
  color:var(--nb-ink);background:rgba(123,92,246,0.20);
  border-color:rgba(123,92,246,0.55);transform:translateY(-1px);
}
.nb-mail__dom:focus-visible{outline:2px solid #A594FF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .nb-mail__dom:hover{transform:none}
}