/* DEMO HERO / FORMULARIO */
.demo-hero{
  position:relative;
  overflow:hidden;
  /* Similar al hero de la landing, pero más suave */
  background: linear-gradient(to top, #fcfcfc, #e9fbfc); 
  padding: 60px 0 60px;
}

.demo-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px; /* Aumenta el gap para separar más el texto del formulario */
  align-items:center;
}

.demo-hero__title{
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.1;
  margin:0 0 8px 0;
  font-weight: 800;
}
.demo-hero__tagline{
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight:700;
  margin:10px 0 6px;
  color: var(--rf); /* Para destacar el eslogan, usa la variable definida en base.css */
}
.demo-hero__subtitle{
  color:#444;
  font-size: 16px;
  line-height:1.5;
  max-width: 520px;
}

.demo-hero__stats{
  margin-top: 24px;
  display:flex; gap:12px; flex-wrap:wrap;
}

.demo-hero__form-container{
  background:#fff;
  border:1px solid #f0f0f0;
  padding: 30px;
  border-radius: var(--radius); /* Usa la variable definida en base.css */
  box-shadow: var(--shadow); /* Usa la variable definida en base.css */
  max-width: 450px; /* Limita el ancho del formulario */
  width: 100%;
  margin: 0 auto; /* Centrar en móvil/columnas */
}

/* Estilos del formulario */
.demo-form .form-group{
  margin-bottom: 18px;
}

.demo-form label{
  display:block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--soft-black); /* Usa la variable definida en base.css */
}

.demo-form input[type="text"], 
.demo-form input[type="email"],
.demo-form select{
  width:100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  color: var(--black); /* Usa la variable definida en base.css */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.demo-form input:focus,
.demo-form select:focus{
  border-color: var(--rf); /* Usa la variable definida en base.css */
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,196,204,.2);
}

.btn--full{
  width: 100%;
  margin-top: 10px;
}

/* RESPONSIVE para la demo */
@media (max-width: 920px){
  .demo-hero__grid{ grid-template-columns: 1fr; }
  .demo-hero__content{ order: 2; text-align:center; }
  .demo-hero__form-container{ order: 1; }
  .demo-hero__subtitle{ margin-left: auto; margin-right: auto; }
  .demo-hero__stats{ justify-content:center; }
}