/* ================================================== */
/* ==== ARCHIVO FINAL: ESTILOS-FORMULARIO.CSS ==== */
/* ================================================== */

/* 1. Contenedor principal que centra TODO el contenido.
/* Esta es la única regla que necesita 'margin: auto'. */
.inscripcion-container {
  max-width: 750px;
  margin: 0 auto;
  padding: 2rem 20px; /* Espaciado vertical y lateral */
}

/* 2. Quitamos el centrado individual de los elementos internos.
/* Ahora simplemente ocupan el 100% de su padre (.inscripcion-container). */
.form-inscripcion,
.titulo-curso,
.subtitulo-formulario,
.alerta-exito, 
.alerta-error,
.testimonio-lateral {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================= */
/* ==== ESTILOS DE CADA ELEMENTO ESPECÍFICO ==== */
/* ============================================= */

/* Estilo para el título del curso (Corregido para controlar el tamaño) */
.titulo-curso {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
  /* Quitamos el font-size de aquí para controlar el h1 directamente */
}

.titulo-curso h1 {
  font-size: 2.1rem; /* Tamaño base reducido y controlado */
  font-weight: 700;
  color: var(--color-principal);
  line-height: 1.3; /* Ligeramente más compacto para títulos largos */
  margin-top: 0;
  margin-bottom: 0;
}

/* Aprovechamos para darle un estilo explícito al precio */
.titulo-curso .precio-curso {
  display: block; /* Asegura que esté en su propia línea */
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-acento);
  margin-top: 0.75rem;
}

/* --- Responsive para el título en móviles --- */
@media (max-width: 600px) {
  .titulo-curso h1 {
    font-size: 1.7rem; /* Hacemos el título más pequeño en pantallas chicas */
    line-height: 1.4;
  }
}

/* Testimonio lateral */
.testimonio-lateral {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 2rem;
  background-color: #eef5fc;
  border-left: 4px solid var(--color-celeste);
  border-radius: 0 8px 8px 0;
}

.testimonio-lateral blockquote {
  margin: 0;
  font-style: italic;
  font-size: 1.1em;
  color: var(--color-principal);
}

.testimonio-lateral cite {
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  text-align: right;
  color: var(--color-acento);
}

/* Estilo para el subtítulo del formulario (ahora dentro del form) */
.subtitulo-formulario {
  font-size: 1.2rem;
  font-weight: 400;
  color: #555;
  margin-bottom: 2rem; /* Aumentamos el espacio inferior */
  text-align: center;
  line-height: 1.5;
}

/* Estilos para el contenedor principal del formulario */
.form-inscripcion {
  margin-top: 2rem;
  padding: 2.5em;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Contenedor para cada par de etiqueta y campo */
.form-group {
  margin-bottom: 1.5em;
}

/* Estilo de las etiquetas (labels) */
.form-inscripcion label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 0.95em;
}

/* Estilo general para campos de texto, email y select */
.form-inscripcion input[type="text"],
.form-inscripcion input[type="email"],
.form-inscripcion input[type="tel"],
.form-inscripcion select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
  font-family: inherit;
  background-color: #fdfdfd;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-inscripcion input:focus,
.form-inscripcion select:focus {
  outline: none;
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(21, 64, 113, 0.2);
  background-color: #fff;
}

.btn-primary { /* Aplicado al botón directamente */
  display: block;
  width: 100%;
  padding: 15px;
  background-color: var(--color-principal);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 1.5em;
}

.btn-primary:hover {
  background-color: var(--color-acento);
  transform: translateY(-2px);
}

/* Texto de confianza debajo del botón */
.texto-privacidad {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    font-size: 0.9em;
    color: #6c757d;
}

/* Alertas de éxito y error */
.alerta-exito { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 15px 20px; border-radius: 8px; text-align: center; margin-bottom: 1.5rem; }
.alerta-error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 15px 20px; border-radius: 8px; margin-bottom: 1.5rem; }
.alerta-error ul { margin: 0; padding-left: 20px; text-align: left; }

/* Estilos de validación */
.form-inscripcion input.invalid,
.form-inscripcion select.invalid { border-color: #d93025; background-color: #fce8e6; }

.form-inscripcion input.invalid:focus,
.form-inscripcion select.invalid:focus { border-color: #d93025; box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.25); }

.btn-primary:disabled { background-color: #5a7d9f; cursor: not-allowed; transform: none; }

/* Spinner */
.spinner { display: inline-block; width: 1.2em; height: 1.2em; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 10px; vertical-align: middle; position: relative; top: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Texto de ayuda */
.form-text-muted { display: block; margin-top: 8px; font-size: 0.9em; color: #6c757d; line-height: 1.4; }
/* ============================================= */
/* ==== ESTILOS PARA DETALLES DINÁMICOS DEL CURSO ==== */
/* ============================================= */

.detalles-curso {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #eef5fc; /* Un fondo sutil para destacarlo */
  border-radius: 12px;
  border: 1px solid #dfe9f5;
}

.detalles-curso ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Dos columnas en pantallas grandes */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem 2rem; /* Espaciado vertical y horizontal */
}

.detalles-curso li {
  display: flex;
  align-items: center; /* <-- CAMBIO AQUÍ para centrar verticalmente */
  gap: 12px;
  font-size: 1.05em;
  color: var(--color-gris);
}

.detalles-curso li svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px; /* Pequeño ajuste para alinear con el texto */
  color: var(--color-acento);
}

.detalles-curso li strong {
  display: inline; /* <-- ESTE ES EL CAMBIO CLAVE */
  font-weight: 600;
  color: var(--color-principal);
  margin-right: 6px; /* Añade un pequeño espacio a la derecha de los dos puntos */
}
/* Estilos para el nuevo bloque de información */
.info-curso-adicional {
background-color: #f7f9fa;
border-radius: 8px;
padding: 25px;
margin-top: 2rem;
border: 1px solid #e0e0e0;
}
.info-curso-adicional h2 {
display: flex;
align-items: center;
font-size: 1.4em;
color: #154071;
margin-top: 0;
margin-bottom: 15px;
}
.info-curso-adicional h2 svg {
margin-right: 12px;
color: #00AEEF;
}
.info-curso-adicional p {
font-size: 1.1em;
line-height: 1.6;
margin-left: 36px; /* Alineado con el texto del título */
color: #333;
}
.info-curso-adicional .info-item:not(:last-child) {
margin-bottom: 25px;
}