/* ============================================================
   PRODUCTO — formulario de demo.

   El formulario REUTILIZA las clases del de contacto de la home
   (.form-row, .form-group, .form-foot, .form-success), así que la
   página carga también contact.css. No se duplican aquí: si alguien
   cambia el estilo de los campos del sitio, este formulario tiene
   que cambiar con él, no quedarse atrás.

   Aquí solo va lo que el de contacto no tiene: la rejilla a dos
   columnas, el <select> de tramos, el honeypot y el aviso de error.
   ============================================================ */

.pr-demo__grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .pr-demo__grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
}

/* Los tres reductores de fricción, justo al lado del formulario: es
   donde aparece la duda de "¿en qué me estoy metiendo?". */
.pr-demo__bullets {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

.pr-demo__bullets li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--neutral-400);
}

/* ── Campos ──────────────────────────────────────────────────
   El <select> no existe en el formulario de contacto, así que se
   alinea a mano con lo que hacen .form-group input/textarea. */

.pr-demo__form .form-group select {
  background: none;
  border: none;
  outline: none;
  padding: 0.25rem 0;
  /* Explícito y no heredado: en el <select> nativo de Windows, sin
     color declarado las opciones salen en negro sobre negro. */
  color: var(--neutral-100);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  width: 100%;
  cursor: pointer;
}

.pr-demo__form .form-group select option {
  background: var(--dark-soft);
  color: var(--neutral-100);
}

/* El texto de la opción vacía, más apagado que una respuesta real. El
   <select> no lleva `required`, así que no vale `:invalid`: se mira si
   sigue seleccionada la opción sin valor. */
.pr-demo__form .form-group select:has(option[value='']:checked) {
  color: var(--neutral-500);
}

/* Etiqueta de campo opcional, como en el formulario de contacto. */
.pr-demo__optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--neutral-500);
  font-size: 0.62rem;
}

/* ── Honeypot ────────────────────────────────────────────────
   Fuera de la vista pero NO con `display:none`: algunos bots lo
   detectan y entonces deja de servir para nada. Con posición
   absoluta el campo existe y es rellenable por un robot, que es
   justo lo que queremos que ocurra. */

.pr-demo__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Aviso de error ──────────────────────────────────────────── */

.pr-demo__error {
  margin-top: 1rem;
  border: 1px solid rgba(var(--danger-rgb), 0.4);
  border-radius: var(--radius-btn);
  background: rgba(var(--danger-rgb), 0.06);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--neutral-200);
}

.pr-demo__error a { color: var(--teal-300); }

/* ── Confirmación ────────────────────────────────────────────
   Sustituye al formulario entero cuando el envío sale bien: dejar
   los campos rellenos al lado de un "recibido" invita a enviarlo
   otra vez. */

.pr-demo__sent {
  max-width: 36rem;
  margin-inline: auto;
  border: 1px solid var(--teal-500);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: 2.5rem;
  text-align: center;
}

.pr-demo__sent svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--teal-500);
  margin-inline: auto;
}

.pr-demo__sent h2 { margin-top: 1.25rem; }

.pr-demo__sent p {
  margin-top: 0.75rem;
  line-height: 1.7;
  color: var(--neutral-400);
  text-wrap: pretty;
}