:root{
  --text:#2a1f1d;
  --muted:#7b6964;
  --line:rgba(111,83,67,.14);
  --gold:#b78a4a;
  --gold-deep:#9f7642;
  --choco:#3a2a27;
  --shadow-lg:0 30px 85px rgba(59,35,24,.14);
  --whatsapp:#25D366;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(217,177,165,.22), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(217,191,148,.22), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(217,177,165,.18), transparent 22%),
    linear-gradient(180deg,#fdfaf6 0%,#f8f1e9 45%,#fdfaf6 100%);
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  width:320px;
  height:320px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.75), transparent 65%);
  opacity:.58;
  filter:blur(4px);
  z-index:0;
}

body::before{top:-80px;left:-90px}
body::after{bottom:-120px;right:-90px}

a{text-decoration:none}

h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  letter-spacing:.01em;
}

.page-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:28px 0;
  position:relative;
  z-index:1;
}

.brand-top{
  position:fixed;
  top:18px;
  left:0;
  right:0;
  z-index:10;
}

.brand-wrap{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 18px 50px rgba(53,35,25,.09);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:999px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  color:var(--choco);
  font-size:1.05rem;
}

.brand-mark{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#fff8ee,#efd9b5);
  color:#9c7238;
  font-size:1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 10px 25px rgba(183,138,74,.16);
}

.nav-mini{
  color:#6c5953;
  font-weight:700;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  transition:.25s ease;
}

.nav-mini:hover{
  color:var(--gold);
  transform:translateY(-1px);
}

.auth-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  border:1px solid rgba(111,83,67,.08);
  border-radius:40px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  position:relative;
}

.form-wrap{
  min-height:720px;
  padding:48px 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62));
}

.form-card{
  width:100%;
  max-width:470px;
}

.form-card h2{
  font-size:3rem;
  line-height:1;
  margin-bottom:10px;
}

.muted{
  color:var(--muted);
}

.small-link{
  color:var(--gold-deep);
  font-weight:800;
}

.small-link:hover{
  color:var(--gold);
}

.field{
  margin-top:18px;
}

.label{
  font-size:.92rem;
  font-weight:800;
  color:#5e4b46;
  margin-bottom:8px;
  display:block;
}

.input-shell{
  position:relative;
}

.input-shell i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#b08956;
  font-size:1.15rem;
  pointer-events:none;
}

.input-lux{
  width:100%;
  height:58px;
  border-radius:18px;
  border:1px solid rgba(111,83,67,.10);
  background:rgba(255,255,255,.82);
  padding:0 18px 0 48px;
  font-size:1rem;
  color:var(--text);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  transition:.25s ease;
}

.input-lux:focus{
  border-color:rgba(183,138,74,.35);
  box-shadow:0 0 0 4px rgba(183,138,74,.10);
  background:#fff;
}

.helper-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:14px;
  flex-wrap:wrap;
}

.helper-chip{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,248,238,.78);
  border:1px solid rgba(183,138,74,.14);
  color:#755f58;
  font-size:.9rem;
  font-weight:700;
}

.hint-box{
  margin-top:18px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,248,238,.78);
  border:1px solid rgba(183,138,74,.14);
  color:#755f58;
  font-size:.95rem;
}

.btn-main{
  width:100%;
  border:none;
  margin-top:22px;
  background:linear-gradient(135deg,#bb9357,#9d7440);
  color:#fff;
  border-radius:999px;
  padding:16px 22px;
  font-weight:800;
  box-shadow:0 14px 32px rgba(183,138,74,.28);
  transition:.28s ease;
}

.btn-main:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(183,138,74,.33);
}

.btn-soft{
  width:100%;
  margin-top:12px;
  background:rgba(255,255,255,.7);
  color:var(--choco);
  border:1px solid var(--line);
  border-radius:999px;
  padding:15px 22px;
  font-weight:800;
  transition:.28s ease;
}

.btn-soft:hover{
  transform:translateY(-2px);
  color:var(--gold);
}

.divider{
  margin:24px 0 16px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#8d7a72;
  font-size:.9rem;
  font-weight:700;
}

.divider::before,
.divider::after{
  content:"";
  height:1px;
  background:rgba(111,83,67,.12);
  flex:1;
}

.alert-inline{
  padding:14px 16px;
  border-radius:18px;
  font-weight:700;
  margin:0 0 18px;
  border:1px solid transparent;
}

.alert-success-soft{
  background:rgba(223,244,231,.85);
  color:#225b3d;
  border-color:rgba(34,91,61,.12);
}

.alert-danger-soft{
  background:rgba(255,234,233,.85);
  color:#8a3330;
  border-color:rgba(138,51,48,.12);
}

.wa-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:64px;
  height:64px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--whatsapp);
  color:#fff;
  box-shadow:0 16px 35px rgba(37,211,102,.28);
  z-index:20;
  transition:.25s ease;
  font-size:1.8rem;
}

.wa-fab:hover{
  transform:translateY(-2px) scale(1.02);
  color:#fff;
}

@media (max-width:991px){
  .page-shell{
    padding-top:92px;
    padding-bottom:26px;
  }

  .form-wrap{
    min-height:auto;
    padding:36px 26px;
  }

  .brand-wrap{
    border-radius:28px;
  }
}

@media (max-width:575px){
  .form-wrap{
    padding:30px 18px;
  }

  .auth-panel{
    border-radius:28px;
  }

  .form-card h2{
    font-size:2.4rem;
  }

  .brand-wrap{
    padding:10px 12px;
  }

  .nav-mini{
    padding:11px 14px;
  }

  .wa-fab{
    width:58px;
    height:58px;
    right:14px;
    bottom:14px;
  }
}