/* ============================================================================
   SayProposals · pantalla de acceso pública
   Clon exacto del gate de saysells.com/propuesta-todovision.
   Medidas, colores, fuentes y animaciones tomadas 1:1 del archivo original.
   Todo scopeado bajo #gate para no pelear con propuesta.css.
   ========================================================================== */

#gate {
  --g-navy: #1c2b48;
  --g-celeste: #8eb1d1;
  --g-bg: #e8ecef;
  --g-gray: #8a8f98;
  --g-red: #C62828;

  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--g-bg);
  font-family: 'Montserrat', sans-serif;
  /* El original no declara line-height en body: hereda `normal`. propuesta.css
     pone 1.6 en body, así que lo devolvemos a normal para no correr el interlineado. */
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

#gate.oculto { display: none; }

#gate * { margin: 0; padding: 0; box-sizing: border-box; }

#gate .gate-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(28, 43, 72, .10);
  width: 100%;
  max-width: 430px;
  padding: 56px 48px 48px;
  text-align: center;
  animation: gate-entrada .45s ease both;
}

@keyframes gate-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#gate .gate-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -.5px;
  color: var(--g-navy);
}
#gate .gate-logo span { color: var(--g-celeste); }

#gate .gate-sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--g-gray);
  margin-top: 10px;
}

#gate form { margin-top: 40px; text-align: left; }

#gate label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-navy);
  margin-bottom: 8px;
}

#gate input {
  width: 100%;
  background: #f5f6f8;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  color: #222;
  outline: none;
  transition: border-color .18s, background .18s;
}
#gate input:focus { border-color: var(--g-celeste); background: #fff; }
#gate input::placeholder { color: #9aa0a8; }

#gate button {
  width: 100%;
  margin-top: 32px;
  background: var(--g-navy);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
#gate button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28, 43, 72, .25); }
#gate button:disabled { opacity: .7; cursor: default; transform: none; box-shadow: none; }

#gate .gate-err {
  display: none;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-red);
  text-align: center;
}
#gate .gate-err.is-on { display: block; }

#gate .gate-card.shake { animation: gate-shake .4s; }
@keyframes gate-shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* Nota de recuperación: solo aparece cuando la propuesta ya venció. */
#gate .gate-nota {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--g-gray);
  text-align: center;
}
#gate .gate-nota:empty { display: none; }

@media (max-width: 480px) {
  #gate .gate-card { padding: 44px 26px 36px; border-radius: 16px; }
  #gate .gate-logo { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  #gate * { animation: none !important; transition: none !important; }
}