/* Apoyo para la landing de administradores de fincas.
   Complementa /landing-zonas/styles.css (Tailwind compilado de Lovable)
   y /landing-zonas/landing-zonas.css (selector de idioma, [hidden], FAQ). */

/* --- main: hueco para la CTA fija en movil --- */
.ge-main { padding-bottom: 5rem; }
@media (min-width: 768px) { .ge-main { padding-bottom: 0; } }

/* --- Campos del formulario (equivalente al inputCls del diseno) --- */
.ge-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background-color: var(--background);
  color: var(--foreground);
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.45;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ge-input::placeholder { color: var(--muted-foreground); opacity: 1; }
.ge-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(17, 68, 129, .15); }
textarea.ge-input { resize: vertical; }

/* Select con chevron propio (el nativo no admite estilos consistentes) */
select.ge-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23114481' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.05rem 1.05rem;
}
select.ge-input:invalid, select.ge-input option[value=""] { color: var(--muted-foreground); }

/* iOS alinea mal los input[type=date] sin esto */
input[type="date"].ge-input { min-height: 2.9rem; }
input[type="date"].ge-input::-webkit-date-and-time-value { text-align: left; }

.ge-field-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* --- CTA fija en movil (conversion desde el QR de la feria) --- */
.ge-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: block;
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background-color: rgba(17, 68, 129, .95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
}
@media (min-width: 768px) { .ge-sticky-cta { display: none; } }

/* --- Banda inferior del footer --- */
.ge-band { background: #fff; color: #404040; }
.ge-band-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .ge-band-grid { grid-template-columns: 220px 1fr; } }
.ge-band-name { font-size: .875rem; font-weight: 600; color: #404040; }
.ge-band-text { margin: 0; font-size: .75rem; line-height: 1.65; color: #525252; }

/* --- Reveal al entrar en viewport.
       La clase la anade el JS: sin JS el contenido nace visible. --- */
.ge-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.ge-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ge-reveal, .ge-reveal.is-visible { opacity: 1; transform: none; transition: none; }
}