/* auth.css — base compartilhada de login.php e recuperar_senha.php
   (antes duplicada em <style> nas duas páginas). Regras só de uma página
   continuam no <style> dela, carregado depois. */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: 660px;
}

/* ============= LADO ESQUERDO — verde fotográfico ============= */
.left {
  position: relative;
  overflow: hidden;
  background: var(--green-deep);
  color: #fff;
  isolation: isolate;
}

.left::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255,236,180,0.10), transparent 55%),
    radial-gradient(90% 60% at 80% 110%, rgba(8,20,14,0.85), transparent 60%),
    linear-gradient(180deg, #14361F 0%, #0D2818 55%, #08180E 100%);
  z-index: 0;
}

.left::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjU1IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCglMjNuKScgb3BhY2l0eT0nMC40NScvPjwvc3ZnPg==");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

.left .rays {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%, transparent 38%,
    rgba(255, 240, 200, 0.045) 46%,
    rgba(255, 240, 200, 0.075) 50%,
    rgba(255, 240, 200, 0.045) 54%,
    transparent 62%, transparent 100%);
  background-size: 220% 220%;
  animation: rayDrift 22s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.left .mist {
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(180, 220, 190, 0.08), transparent 70%),
    radial-gradient(35% 25% at 75% 60%, rgba(200, 230, 210, 0.06), transparent 70%);
  animation: mistDrift 28s ease-in-out infinite;
}

@keyframes rayDrift {
  0%   { background-position:   0%   0%; opacity: 0.7; }
  50%  { background-position: 100% 100%; opacity: 1.0; }
  100% { background-position:   0%   0%; opacity: 0.7; }
}

@keyframes mistDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(2%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.horizon {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.18) 70%, transparent 100%);
  z-index: 2;
}

.horizon.faint { bottom: 22%; opacity: 0.45; }

.land {
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  z-index: 2;
  background:
    radial-gradient(120% 110% at 30% 0%, rgba(255,255,255,0.04), transparent 55%),
    linear-gradient(180deg, #0A1F12 0%, #061309 100%);
  clip-path: polygon(0% 28%, 6% 22%, 14% 26%, 22% 18%, 32% 24%, 42% 16%, 54% 22%, 64% 14%, 74% 20%, 84% 12%, 92% 18%, 100% 14%, 100% 100%, 0% 100%);
}

.left .pad {
  position: absolute;
  inset: 0;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 5;
}

.top-row {
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.top-row .small-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff;
  letter-spacing: 0.16em;
}

.small-mark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: 0.85;
}

.hero { max-width: 560px; }

.display .it { font-style: italic; font-weight: 500; color: rgba(255,255,255,0.92); }

.lede {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  font-weight: 400;
  max-width: 460px;
}

.rule {
  width: 56px; height: 1px;
  background: rgba(255,255,255,0.4);
  margin: 28px 0 0;
}

/* ============= LADO DIREITO — branco limpo ============= */
.right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg);
  position: relative;
}

.corner {
  position: absolute;
  top: 28px; right: 32px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.corner a {
  color: var(--green-900);
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}

@keyframes cardRise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

.brand .mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--green-deep);
}

.brand .name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--green-deep);
  letter-spacing: -0.01em;
}

.brand .name .it { font-style: italic; }

.btn:hover { background: #234E39; box-shadow: 0 8px 24px -10px rgba(13,40,24,0.45); }

.btn:active { transform: translateY(1px); }