/* ================================================== */
/* ==== 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 ==== */
/* ============================================= */

/*
==============================================
--- ESTILOS DEL BLOQUE DE TÍTULO DEL CURSO ---
==============================================
*/

/* 1. Contenedor principal: Modificado para Flexbox */
.titulo-curso {
  display: flex;         /* Clave: Activa Flexbox */
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: baseline;   /* Alinea por la base del texto (ideal para h1 + etiqueta) */
  flex-wrap: wrap;       /* Permite que los elementos se reordenen en pantallas chicas */
  gap: 10px 16px;        /* Espacio vertical y horizontal entre elementos */
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* 2. Etiqueta animada "NUEVO" (Nuevo elemento) */
.etiqueta-animada-icono {
  padding: 5px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #007BFF; /* Azul para "Nuevo" */
  border-radius: 50px;
  text-transform: uppercase;
  animation: pulso-suave 2s infinite;
  line-height: 1.5; /* Mejora la alineación vertical con el título */
  margin-bottom: 4px; / Añade un pequeño margen inferior */
}

/* 3. Animación de la etiqueta (Nuevo elemento) */
@keyframes pulso-suave {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* 4. Título principal (H1) (Sin cambios, solo se adapta a Flexbox) */
.titulo-curso h1 {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-principal);
  line-height: 1.3;
  margin: 0;
  /* El h2 ahora irá abajo por el flex-wrap, así que necesitamos ordenar */
  width: 100%; /* Hacemos que h1 y h2 ocupen su propia línea dentro del flex */
  order: 2; /* Orden: etiqueta (1), h1 (2), h2 (3), precio (4) */
}

/* 5. Subtítulo (H2) - Necesita un selector y orden */
.titulo-curso h2 {
  width: 100%;
  order: 3;
  font-size: 1.1rem; /* Asumiendo un tamaño de fuente razonable */
  font-weight: 400;
  margin: 0.25rem 0 0 0;
}

/* 6. Precio del curso (Modificado para Flexbox) */
.titulo-curso .precio-curso {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-acento);
  margin-top: 0.75rem;
  width: 100%;
  order: 4;
}

/* 7. Responsive para móviles (Sin cambios) */
@media (max-width: 600px) {
  .titulo-curso h1 {
    font-size: 1.7rem;
    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: 1rem; /* <-- Cambiado a un tamaño estándar (generalmente 16px) */
    line-height: 1.7; /* Aumentamos un poco el interlineado para más comodidad */
    margin-left: 36px;
    color: #4A5568; /* Un gris oscuro más suave y profesional que #333 */
}
.info-curso-adicional .info-item:not(:last-child) {
margin-bottom: 25px;
}

/* ============================================= */
/* == CSS MEJORADO PARA PRECIOS Y CUPOS       == */
/* ============================================= */

/* --- Estilos para la sección de Precio --- */
.precio-curso {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem; /* Ajustamos el espacio que antes daban los <br> */
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    background-color: #f7f9fa;
    padding: 1.25rem; /* Aumentamos un poco el padding */
    border-radius: 12px; /* Bordes un poco más redondeados */
    border: 1px solid #e2e8f0;
}

.precio-curso span {
    font-size: 1.3em;
    font-weight: 300; /* Letra más fina para "Precio:" */
    color: #4a5568; /* Color gris oscuro */
}

.precio-curso span b {
    font-weight: 600; /* Semi-bold para el monto */
    color: #1a202c; /* Negro suave */
}

.precio-curso .precio-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    border: none;
    background-color: transparent;
}

.precio-curso .badge-off {
    background-color: #154071;
    color: #ffffff;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8em;
    text-transform: uppercase;
    margin-left: 1rem; /* Añade un margen por si acaso */
}

.precio-linea {
    display: inline-flex; /* Permite que el span se comporte como un contenedor flexible */
    align-items: center;  /* Centra verticalmente el texto y la imagen */
    gap: 8px;             /* Añade un pequeño espacio entre el precio y el logo */
}

.logo-mercado-pago {
    height: 1.2em;      /* ajusta la altura del logo al tamaño del texto */
    width: auto;        /* Mantiene la proporción */
    vertical-align: middle; /* Ayuda a la alineación en algunos navegadores */
}

/* --- Estilos para la sección de Cupos (Más Sutil) --- */
.cupos-disponibles {
    background-color: #eff6ff; /* Azul muy pálido */
    border: 1px solid #dbeafe; /* Borde azul un poco más oscuro */
    border-radius: 12px;
    padding: 1.25rem;
    margin: 2rem auto;
    max-width: 800px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: #1e3a8a; /* Azul oscuro para el texto */
    box-shadow: none; /* Quitamos la sombra para un look más limpio */
}

.cupos-disponibles .icono-cupos {
    flex-shrink: 0;
    background-color: #dbeafe;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cupos-disponibles svg {
    width: 28px;
    height: 28px;
    color: #2563eb; /* Azul principal */
}

.cupos-disponibles .texto-cupos strong {
    display: block;
    font-size: 1.1em; /* Reducimos el tamaño */
    color: #1e40af; /* Azul más oscuro */
    margin-bottom: 4px;
    font-weight: 600; /* Usamos semibold en vez de bold */
}

.cupos-disponibles .texto-cupos span {
    font-size: 1em;
    line-height: 1.4;
}