:root{
  --pink-header: rgba(216,138,151,0.47);
  --green-stripe: #b7bd91;
  --pink-light: #fec8c8;
  --pink-label: #d88a97;
  --pink-title: #d88a98;
  --pink-input-bg: rgba(249,208,213,0.22);
  --pink-glow: #f9d0d5;
  --pink-link: #d78996;
  --logo-e: #fcc6c4;
  --logo-f: #fec8c8;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background:#ffffff;
  font-family:'Be Vietnam Pro', sans-serif;
  overflow-x:hidden;
}

/* ===== estrutura geral (preenche a tela toda) ===== */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:100%;
}

/* ===== barra superior ===== */
.topbar{
  flex:0 0 auto;
  width:100%;
}
.topbar-pink{
  background:var(--pink-header);
  width:100%;
  padding: clamp(10px, 1.8vw, 18px) clamp(20px, 4vw, 60px);
  display:flex;
  align-items:center;
}
.topbar-green{
  background:var(--green-stripe);
  width:100%;
  height:clamp(10px, 1.8vh, 22px);
}
.logo-text{
  margin:0;
  line-height:1;
  color:#1a1a1a;
  white-space:nowrap;
}
.logo-text .lux{ font-family:'Luxurious Script', cursive; font-size:clamp(24px, 2.6vw, 44px); }
.logo-text .ita{ font-family:'Italiana', serif; font-size:clamp(18px, 2vw, 32px); letter-spacing:1px; }
.logo-text .imp{ font-family:'Imperial Script', cursive; font-size:clamp(24px, 2.6vw, 44px); }

/* ===== corpo: imagem + formulário ===== */
.main{
  flex:1 1 auto;
  display:flex;
  width:100%;
  min-height:0;
}

/* ---- lado esquerdo: foto + logo em vidro ---- */
.photo-side{
  position:relative;
  flex:1 1 55%;
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ddd;
}
.photo-side img.flower-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.photo-side::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.08);
}

.logo-circle-wrap{
  position:relative;
  z-index:2;
  width:min(34vw, 420px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* circulo de trás: efeito de vidro (glassmorphism) */
.circle-glass{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 8px 32px rgba(255,255,255,0.25) inset, 0 4px 24px rgba(0,0,0,0.08);
}

/* circulo da frente: efeito normal (sólido, sem blur) */
.circle-normal{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:#fbe6e8;
  box-shadow:0 4px 18px rgba(0,0,0,0.06);
}

.logo-circle-text{
  position:relative;
  z-index:3;
  margin:0;
  text-align:center;
  line-height:0.95;
}
.logo-circle-text .big-e{ font-family:'Mea Culpa', cursive; color:var(--logo-e); font-size:clamp(34px, 7vw, 84px); }
.logo-circle-text .big-f{ font-family:'Mea Culpa', cursive; color:var(--logo-f); font-size:clamp(34px, 7vw, 84px); }
.logo-circle-text .fell{ font-family:'IM Fell French Canon', serif; color:var(--green-stripe); font-size:clamp(22px, 4.6vw, 54px); }

/* ---- lado direito: formulário ---- */
.form-side{
  flex:1 1 45%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 3vw, 48px);
  background:#ffffff;
}

.form-card{
  position:relative;
  width:100%;
  max-width:520px;
  background:#ffffff;
  border-radius:20px;
  padding:clamp(24px, 3.6vw, 48px) clamp(22px, 3.4vw, 46px);
  box-shadow:0 0 70px 8px var(--pink-glow);
}

.form-card h1{
  margin:0 0 clamp(14px, 2vw, 20px) 0;
  text-align:center;
  color:var(--pink-title);
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:clamp(22px, 2.4vw, 32px);
}

.instructions{
  margin:0 0 clamp(24px, 3vw, 36px) 0;
  text-align:center;
  color:var(--pink-label);
  font-size:clamp(14px, 1.4vw, 19px);
  line-height:1.5;
}

.field{
  margin-bottom:clamp(20px, 3vw, 30px);
}
.field label{
  display:block;
  color:var(--pink-label);
  font-size:clamp(15px, 1.6vw, 20px);
  margin-bottom:6px;
  font-weight:500;
}
.field input{
  width:100%;
  border:none;
  outline:none;
  background:var(--pink-input-bg);
  border-radius:36px;
  height:clamp(46px, 5.4vw, 62px);
  padding:0 clamp(18px, 2.4vw, 26px);
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:clamp(14px, 1.5vw, 18px);
  color:#8a4a55;
  transition:box-shadow .2s ease, background .2s ease;
}
.field input::placeholder{ color:var(--pink-light); }
.field input:focus{
  box-shadow:0 0 0 3px rgba(254,200,200,0.6);
  background:rgba(249,208,213,0.35);
}

/* ===== botão "Enviar link de recuperação" ===== */
.btn-recuperar{
  position:relative;
  width:100%;
  border:none;
  cursor:pointer;
  background:var(--pink-light);
  color:var(--pink-link);
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:clamp(16px, 1.8vw, 24px);
  border-radius:11px;
  height:clamp(52px, 6vw, 70px);
  margin-top:clamp(6px, 1vw, 10px);
  padding:0 12px;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  animation: btn-respirar 2.6s ease-in-out infinite;
}
.btn-recuperar:hover{
  background:#ffd6d6;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 16px rgba(254,200,200,0.5);
  animation-play-state:paused;
}
.btn-recuperar:active{
  transform:scale(0.94);
  transition:transform .1s ease;
}
@keyframes btn-respirar{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

.back-link{
  display:block;
  text-align:center;
  margin-top:clamp(14px, 2vw, 20px);
  color:var(--pink-link);
  font-size:clamp(14px, 1.5vw, 18px);
  text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

/* ===================================================
   MOBILE — mostra APENAS o formulário, sempre inteiro
   =================================================== */
@media (max-width: 768px){
  .topbar,
  .photo-side{
    display:none;
  }
  .main{
    min-height:100vh;
  }
  .form-side{
    width:100%;
    min-height:100vh;
    padding:20px;
  }
  .form-card{
    max-width:440px;
    width:100%;
    box-shadow:0 0 40px 4px var(--pink-glow);
  }
}

@media (max-width: 360px){
  .form-card{ padding:22px 16px; border-radius:16px; }
}