/* Variables para sistema hibrido */
:root {
  --color-fondo: #f9f9f9;
  --color-texto: #222;
  --color-titulo: #333;
  --color-boton: #2e3c6d;
  --fuente: 'Segoe UI', sans-serif;
}

/* Variables para plantilla mas completa */
:root {
  --verde1: #386534;
}

/* 🔄 Reset general */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #222;
  padding: 30px;
} */

body {
  background-color: var(--color-fondo);
  font-family: var(--fuente);
  color: var(--color-texto);
  padding: 30px;
}

h1, h2, h3, .pregunta-enunciado {
  color: var(--color-titulo);
}

/* contenedor del formulario */

.formulario-container {
  max-width: 900px;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Campos de identificacion y contacto nombre, pais, etc */

.linea-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}

.campo {
  flex: 1;
  min-width: 130px;
}

.campo-compacto {
  flex: 0 0 60px; /* control ancho exacto */
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

/* Campos basicos */

label {
  font-weight: bold;
  margin-bottom: 6px;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #ccc;
  font-size: 15px;
  margin-bottom: 16px;
}

textarea {
  resize: vertical;
}

/*  Botones */

body {
  background-color: var(--color-fondo);
  font-family: var(--fuente);
  color: var(--color-texto);
  padding: 30px;
}

button {
  background-color: var(--color-boton);
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  font-family: inherit;
}

button:hover {
  background-color: #1f2c4d; /* puedes hacer esto dinámico si quieres */
}

/* button {
  background-color: #2e3c6d;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #1f2c4d;
} */



/* Campos de seleccion simple */

.grupo-radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.grupo-radio label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.grupo-radio input[type="radio"] {
  accent-color: #0078d7;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Texto preguntas */

.pregunta-enunciado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  gap: 6px;
}

.instruccion-inline {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  font-style: italic;
}

.img-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 0.7rem;
}

/* Estilos Base (Aplicados a todos, pero diseñados para la disposición horizontal de PC/Tablet) */
.logo-container {
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
    flex-wrap: wrap;
    gap: 15px; 
}

.logo {
    max-width: 14rem; 
    height: auto; 
    margin: 5px; 
}

/* ------------------------------------------------------------------ */
/* MEDIA QUERY para Móviles (Pantallas pequeñas, por ejemplo, < 768px) */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .logo-container {
        flex-direction: column; 
        align-items: center; 
    }

    .logo {
        max-width: 80%; 
    }
}

/* --- Estilos para la Sección de Prueba Social --- */

.social-proof-section {
    padding: 40px 20px;
    text-align: center;
    background-color: #E3E8E0; /* Fondo celeste suave para destacar (puedes ajustarlo) */
    margin: 40px 0;
    border-radius: 22px;
}

/* Estilos de la Métrica (Asistencia) */
.metric {
    margin: 30px auto; /* auto para centrar si es necesario */
    padding: 20px;
    border: 3px solid var(--verde1);
    display: inline-block; 
    border-radius: 5px;
}

.metric .number {
    font-size: 3em;
    font-weight: bold;
    color: var(--verde1); /* Color llamativo */
    margin: 0;
    line-height: 1;
}

.metric .label {
    font-size: 1.2em;
    color: #555;
    margin-top: 5px;
}

/* Contenedor de Testimonios - Flexbox (Horizontal por defecto) */
.testimonial-list {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 30px;
}

/* Tarjetas de Testimonios */
.testimonial-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    
    /* Responsive: Intenta mantener 300px de ancho, se apila si no hay espacio */
    flex: 1 1 300px; 
    max-width: 400px;
}

.testimonial-card p {
    font-style: italic;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
}

.testimonial-card .source {
    font-style: normal;
    font-weight: bold;
    color: var(--verde1);
    text-align: right;
    display: block;
    margin-top: 10px;
}

/* --- Estilos para la Sección "Qué Aprenderás" --- */

.key-learning-section {
    padding: 30px 20px;
    background-color: #ffffff; /* Fondo blanco o color que contraste */
    text-align: center;
}

.key-learning-section h2 {
    color: var(--verde1); /* Color primario del tema */
    margin-bottom: 25px;
    font-size: 1.8em;
}

.learning-list {
    /* Reseteo de estilos de lista por defecto */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px; 
    
    /* Configuración de Flexbox para la lista */
    display: flex;
    flex-wrap: wrap; /* Permite que los ítems bajen de línea */
    justify-content: center;
    gap: 15px; /* Espacio entre los ítems */
}

.learning-list li {
    background-color: #f9f9f9; /* Fondo claro para cada ítem */
    border-left: 5px solid var(--verde1); /* Barra de color llamativa */
    padding: 15px;
    text-align: left;
    font-size: 1.1em;
    line-height: 1.4;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Flexbox: Define el ancho para 2 columnas en PC y 1 en Móvil */
    flex: 1 1 45%; /* Intenta ocupar el 45% del espacio disponible */
    min-width: 280px; /* Ancho mínimo para que se apile en móvil */
}

.learning-list .icon {
    font-size: 1.4em;
    color: var(--verde1);
    margin-right: 10px;
    font-weight: bold;
    display: inline-block; /* Asegura que el icono y el texto estén alineados */
}

.summary-cta {
    margin-top: 30px;
    font-size: 1.2em;
    font-style: italic;
    color: #333;
}

/* Media Query: Asegura que en pantallas muy pequeñas se vea como una columna completa */
@media (max-width: 600px) {
    .learning-list li {
        flex: 1 1 100%; /* Ocupa todo el ancho en móviles */
    }
}

/* --- Estilos para la Sección "Conoce al Exponente" --- */

.speaker-section {
    padding: 40px 20px;
    text-align: center;
    background-color: #f4f4f4; /* Fondo sutil para destacarla */
}

.speaker-section h2 {
    color: #333;
    margin-bottom: 30px;
    font-size: 1.8em;
}

.speaker-card {
    /* Habilita Flexbox */
    display: flex;
    /* Por defecto, los elementos en PC van en fila */
    flex-direction: row; 
    align-items: flex-start; /* Alineación arriba en PC */
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.speaker-image-container {
    /* Define un tamaño fijo para la imagen en PC */
    flex-shrink: 0; 
    margin-right: 30px;
}

.speaker-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Hace la foto redonda */
    object-fit: cover; /* Asegura que la imagen no se distorsione */
    border: 4px solid var(--verde1); /* Borde de color primario */
}

.speaker-info {
    text-align: left;
    /* Permite que el texto ocupe el espacio restante */
    flex-grow: 1; 
}

.speaker-name {
    color: var(--verde1);
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.6em;
}

.speaker-title {
    color: #555;
    font-style: italic;
    margin-bottom: 15px;
}

.speaker-bio {
    color: #333;
    line-height: 1.6;
}

.speaker-highlights {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.speaker-highlights li {
    font-size: 1em;
    color: #333;
    margin-bottom: 5px;
}


/* --- Media Query para Móviles: La foto se va arriba --- */
@media (max-width: 768px) {
    .speaker-card {
        /* Cambia la dirección a columna para apilar foto y texto */
        flex-direction: column; 
        align-items: center; /* Centra todo */
        padding: 20px;
    }

    .speaker-image-container {
        margin-right: 0;
        margin-bottom: 20px; /* Espacio entre la foto y el texto en móvil */
    }

    .speaker-info {
        text-align: center;
    }
}