:root{
  --brand-start:#6a00ff;
  --brand-end:#b517ff;
  --brand-dark:#4f00cc;
  --brand-dark2:#9900ff;
  --text:#0f172a; --muted:#475569; --bg:#ffffff; --ink:#000000;
}
html{scroll-behavior:smooth}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif}
h1,h2,h3,.h{font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif}
.btn-primary{
  background-image:linear-gradient(to right,var(--brand-start),var(--brand-end));
  color:#fff;border-radius:12px;padding:.9rem 1.25rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  box-shadow:0 14px 30px rgba(106,0,255,.22)
}
.btn-primary:hover{background-image:linear-gradient(to right,var(--brand-dark),var(--brand-dark2))}
.chip{background:#fff;border:1px solid #eee;border-radius:999px;padding:.4rem .75rem}
.topband{background:#000;color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.5px}
.headline{ text-transform:uppercase; font-weight:900; letter-spacing:.5px }
.section-title{ text-transform:uppercase; font-weight:900; letter-spacing:.4px }
.card{background:#fff;border:1px solid #f1f5f9;border-radius:16px}
.soft{box-shadow:0 12px 32px rgba(2,6,23,.10)}
.glass{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px)}
.cta-fab{position:fixed;right:1rem;bottom:1rem;z-index:60}
.cta-fixed{position:fixed;right:1rem;bottom:1rem;z-index:60}


/* ----------------------------- */
/* Formulario de Systeme.io en horizontal */
/* ----------------------------- */
.systemeio-form form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}
.systemeio-form form input[type="text"],
.systemeio-form form input[type="email"],
.systemeio-form form input[type="tel"],
.systemeio-form form select {
  flex: 1 1 auto !important;
  min-width: 180px !important;
  margin: 0 !important;
}
.systemeio-form form button[type="submit"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  background-image: linear-gradient(to right, var(--brand-start), var(--brand-end)) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.9rem 1.25rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 14px 30px rgba(106, 0, 255, 0.22) !important;
  border: none !important;
  cursor: pointer !important;
}
.systemeio-form form button[type="submit"]:hover {
  background-image: linear-gradient(to right,var(--brand-dark),var(--brand-dark2)) !important;
}
/* Ajuste botón de formulario de Systeme en móviles */
@media (max-width: 768px) {
  .systemeio-form form button[type="submit"],
  .systeme-button {
    display: block !important;
    width: 100% !important;
    font-size: 1rem !important;   /* un poco más grande */
    padding: 1rem !important;     /* más alto */
  }
}
#gala-text {
  height: 100%;
}
#modal-card {
  -webkit-overflow-scrolling: touch; /* iOS scroll suave */
  overscroll-behavior: contain;
}

/* Que el iframe no se pase de alto */
#systeme-form-slot iframe{
  width: 100% !important;
  height: 400px !important;   /* ↓ prueba 520–580 según tu formulario */
  min-height: 0 !important;
  border: 0;
  display: block;
}

/* Quita “colchón” extra por márgenes del último elemento del modal */
#modal-card > *:last-child{ margin-bottom: 0 !important; }

/* Scroll suave dentro del modal en móvil */
#modal-card{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* En móvil, un poco más bajo para reducir hueco */
@media (max-width: 640px){
  #systeme-form-slot iframe{ height: 520px !important; }
}

/* el contenedor que scrollea */
#modal-body{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* quita relleno extra del último hijo del modal */
#modal-card > *:last-child{ margin-bottom: 0 !important; }

/* el slot y el iframe deben ocupar el 100% del alto disponible */
#systeme-form-slot,
#systeme-form-slot iframe{
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  display: block;
  min-height: 0 !important; /* evita mínimos exagerados */
}

/* si aún queda hueco en móviles, ajusta la altura del iframe */
@media (max-width: 640px){
  #systeme-form-slot iframe{ height: 520px !important; }
}