Entrevista a MAHATMA GANDHI

entrevista-a-mahatma-gandhi.markdown

Entrevista a MAHATMA GANDHI

Es una entrevista simulada con IA entrevistando a un lider en la historia. Espero les guste

A Pen by 19000601-crypto on CodePen.

License.

index.html

<!-- HEADER -->
<div class="header">
  <h1>Entrevista Prospectiva</h1>
  <p class="subtitle">Mahatma Gandhi | Entrevistadora: Patricia De León</p>
</div>

<!-- CONTENEDOR PRINCIPAL -->
<div class="container">
  
  <!-- SIDEBAR TEMAS -->
  <aside class="sidebar">
    <h3>Temas</h3>
    <ul id="themeList"></ul>
  </aside>

  <!-- MAIN CONTENT -->
  <main class="main-content">
    <div class="content-wrapper">
      <!-- PREGUNTA -->
      <div class="question-panel">
        <div class="question-header">
          <span class="theme-label" id="themeLabel"></span>
          <span class="question-number" id="questionNumber"></span>
        </div>
        <h2 id="questionTitle"></h2>
      </div>

      <!-- RESPUESTA -->
      <div class="answer-panel">
        <p id="answerText"></p>
      </div>

      <!-- BOTONES NAVEGACIÓN -->
      <div class="nav-buttons">
        <button id="prevBtn" class="btn btn-prev">← Anterior</button>
        <span id="counter" class="counter"></span>
        <button id="nextBtn" class="btn btn-next">Siguiente →</button>
      </div>

      <!-- UTILIDADES -->
      <div class="utilities">
        <button id="shareWhatsApp" class="util-btn" title="Compartir por WhatsApp">
          <span>📱 WhatsApp</span>
        </button>
        <button id="shareEmail" class="util-btn" title="Compartir por Email">
          <span>✉️ Email</span>
        </button>
        <button id="copyBtn" class="util-btn" title="Copiar respuesta">
          <span>📋 Copiar</span>
        </button>
        <button id="printBtn" class="util-btn" title="Imprimir">
          <span>🖨️ Imprimir</span>
        </button>
      </div>
    </div>

    <!-- PORTRAIT GANDHI -->
    <div class="gandhi-sticky">
      <img id="gandhiImage" src="https://i.ibb.co/sMsdc4n/gandhi.jpg" alt="Mahatma Gandhi">
      <p id="gandhiStatus" class="status-text">Reflexionando</p>
    </div>
  </main>

</div>

<!-- EMAIL MODAL -->
<div id="emailModal" class="modal">
  <div class="modal-content">
    <span class="close-modal">&times;</span>
    <h3>Compartir por Email</h3>
    <input type="email" id="emailInput" placeholder="tu@email.com">
    <textarea id="emailMessage" placeholder="Mensaje (opcional)" rows="4"></textarea>
    <button id="sendEmailBtn" class="btn">Enviar</button>
  </div>
</div>

<!-- FOOTER -->
<footer class="footer">
  <p>&copy; 2024 Patricia De León | Consultora de Liderazgo</p>
</footer>

script.js

// DATOS DE ENTREVISTA
const interviewData = [
  {
    theme: "Liderazgo",
    question: "¿Cómo definiría el verdadero liderazgo?",
    answer: "El verdadero liderazgo no surge del poder conferido por cargos o títulos, sino de la integridad moral y la capacidad de inspirar a otros mediante el ejemplo. Un líder genuino sirve a su pueblo, no se sirve a sí mismo. Mi liderazgo siempre se ha basado en principios, en la coherencia entre mis palabras y mis acciones. La influencia más profunda es la que emerge cuando los demás ven que usted vive aquello que predica."
  },
  {
    theme: "Liderazgo",
    question: "¿Cuál es el rol de la empatía en la toma de decisiones estratégicas?",
    answer: "La empatía es fundamental. Al entender los sentimientos, necesidades y perspectivas de quienes nos rodean, podemos tomar decisiones que no solo sean efectivas, sino también justas y humanitarias. Una decisión estratégica sin empatía puede ser técnicamente correcta pero moralmente vacía. He aprendido que las mejores soluciones responden a la realidad humana, no solo a los números o a la lógica abstracta."
  },
  {
    theme: "Liderazgo",
    question: "¿Cómo mantuvo su influencia sin ocupar un cargo oficial?",
    answer: "Mi autoridad nunca dependió de un título oficial. Provenía de la consistencia de mis principios, del sacrificio personal que demostraba mi compromiso, y de la capacidad de articular una visión que resonaba con las aspiraciones más profundas de mi pueblo. Cuando la gente ve que alguien está dispuesto a sufrir por sus convicciones, sin buscar poder personal, generan una confianza que ningún cargo puede conferir. Mi influencia fue el resultado de vivir de acuerdo con mis valores."
  },
  {
    theme: "Poder",
    question: "¿Cómo entiende la relación entre el poder y la responsabilidad?",
    answer: "El poder sin responsabilidad es tiranía. Toda persona que ejerce influencia, en cualquier contexto, tiene una deuda moral con aquellos a quienes afecta. La responsabilidad es el precio del poder. He creído siempre que quien tiene el poder de hacer daño tiene la obligación de abstenerse de hacerlo. La verdadera fortaleza reside en usar el poder para proteger a los débiles, no para dominarlos."
  },
  {
    theme: "Poder",
    question: "¿Rechazó el poder político. Por qué?",
    answer: "Porque el poder político, tal como se estructura convencionalmente, tienta a la corrupción y aleja al líder de sus principios. Prefería ser una brújula moral para mi nación a ser un gobernante que debe hacer compromisos con intereses políticos. Mi influencia era más poderosa precisamente porque no dependía de cargos. El poder político habría limitado mi libertad de acción y habría complicado mi mensaje. Servir sin buscar poder es más liberador que gobernar."
  },
  {
    theme: "Poder",
    question: "¿Cómo canaliza el poder de las masas sin convertirse en un déspota?",
    answer: "Educando. Mi tarea fue elevar la conciencia de las masas, no manipularlas. Promovía el pensamiento crítico, la autodeterminación y la responsabilidad personal. El poder de las masas organizadas es formidable, pero solo es virtuoso cuando surge de la comprensión compartida de principios éticos. Yo no era un déspota porque nunca pedí obediencia ciega; pedía participación consciente en un movimiento basado en principios claros. La diferencia está en si el líder busca seguidores sumisos o ciudadanos conscientes."
  },
  {
    theme: "Autoridad",
    question: "¿Cuál es la fuente legítima de la autoridad?",
    answer: "La autoridad legítima emana de la capacidad demostrada de servir justamente. No del nacimiento, no del dinero, no de la fuerza bruta. Un líder tiene autoridad cuando su pueblo ve que actúa en función de principios superiores a su propio interés. La autoridad moral es la única que inspira lealtad verdadera. Cuando el pueblo confía en que sus líderes actúan por el bien común, entonces esos líderes tienen autoridad. La legitimidad se gana diariamente a través de acciones coherentes con los valores proclamados."
  },
  {
    theme: "Autoridad",
    question: "¿Cómo reconcilia la autoridad personal con la democracia?",
    answer: "Mi autoridad no conflictúa con la democracia; la fortalece. No gobernaba, inspiraba. Mis propuestas se debatían, se cuestionaban, se aceptaban o rechazaban. Reconocía la supremacía de la opinión pública. La autoridad personal que respeta la democracia es aquella que dice: 'Aquí está mi visión, mis principios, mi análisis. Ahora, decida usted.' No es la que dice: 'Obedezcan porque sé mejor.' La autoridad democrática es servil en el mejor sentido: sirve a los principios compartidos, no a la voluntad de una persona."
  },
  {
    theme: "Autoridad",
    question: "¿Qué distingue la autoridad de la manipulación?",
    answer: "La transparencia y la intención. La autoridad legítima es transparente en sus razonamientos; la manipulación funciona en la sombra. La autoridad busca elevar la capacidad de juicio de otros; la manipulación la disminuye. Quien tiene autoridad verdadera no necesita mentir, porque sus acciones hablan. Quien manipula debe ocultar información y distorsionar la realidad. La prueba decisiva es esta: ¿El líder quiere que su pueblo sea cada vez más autónomo e independiente en el pensamiento, o que sea cada vez más dependiente? Yo siempre busqué lo primero."
  },
  {
    theme: "Influencia",
    question: "¿Cuál es la diferencia entre influencia y control?",
    answer: "La influencia persuade; el control obliga. La influencia respeta la libertad del otro; el control la niega. Yo busqué influenciar las mentes y los corazones, no controlar los cuerpos. La influencia es duradera porque viene de adentro; el control es frágil porque depende de la vigilancia constante. La influencia verdadera es aquella donde el otro, habiendo sido expuesto a tu perspectiva, elige libremente seguirla. Ese es el poder genuino."
  },
  {
    theme: "Influencia",
    question: "¿Cómo construyó credibilidad sin medios masivos modernos?",
    answer: "A través de la consistencia impecable. Cada acción mía era coherente con mis palabras. Vivía modestamente mientras predicaba la austeridad. Enfrentaba el sufrimiento mientras promovía la no violencia. Aceptaba las críticas y reconocía mis errores. La credibilidad no requiere megáfonos; requiere integridad. Las personas hablan cuando ven a alguien vivir sus convicciones. La comunicación más poderosa es el ejemplo. Mi influencia se propagó boca a boca porque la gente veía que yo era lo que decía ser."
  },
  {
    theme: "Influencia",
    question: "¿Cuál fue su estrategia de comunicación con adversarios?",
    answer: "La escucha activa y el respeto genuino. Incluso con aquellos que se oponían a mí, intentaba entender sus perspectivas y sus miedos. Respondía a sus argumentos con lógica, no con insultos. Demostraba que era posible discrepar profundamente sin perder la dignidad mutua. Mi estrategia no era convencer a todos de inmediato, sino sembrar dudas en sus certezas y plantear preguntas que les permitieran reflexionar. La influencia sobre adversarios viene cuando demuestras que tu postura es más justa, más coherente, más humana que la suya."
  },
  {
    theme: "Motivación",
    question: "¿Qué lo motivaba a continuar frente a la adversidad?",
    answer: "La convicción profunda de que la verdad y la justicia, eventualmente, prevalecerán. No motivaban la fama ni la comodidad; motivaba la fe en que cada acción coherente con los principios contribuye al bien del mundo, aunque tarde años o siglos en materializarse. Motivaba también el amor por mi pueblo y la responsabilidad de abrir un camino para que otros vieran que el cambio no violento era posible. Y motivaba, fundamentalmente, la conciencia de que nuestras acciones nos definen. Si quería ser hombre de principios, debía actuar como tal, incluso cuando era difícil."
  },
  {
    theme: "Motivación",
    question: "¿Cómo motivaba a masas para acciones que implicaban sacrificio personal?",
    answer: "Primero, con el ejemplo. Yo mismo me sometía al sacrificio que pedía a otros. Segundo, con claridad moral absoluta: explicaba por qué el sacrificio en nombre de la verdad era más digno que la comodidad obtenida mediante la injusticia. Tercero, mostraba que el sacrificio no era en vano; cada acto no violento minaba la legitimidad de quien ejerce opresión. Las personas estaban dispuestas a sufrir porque veían que su sufrimiento tenía propósito y que yo compartía ese camino. La motivación más poderosa es la que viene de la coherencia entre lo que un líder predica y lo que vive."
  },
  {
    theme: "Motivación",
    question: "¿Qué papel juega la fe en la motivación de un líder?",
    answer: "La fe no en lo supernatural, necesariamente, sino en la bondad fundamental de las personas y en la capacidad del universo moral de tender hacia la justicia. Sin fe en que el cambio es posible, ¿por qué luchar? Sin fe en que los adversarios pueden transformarse, ¿por qué no eliminarlos? Mi fe era humanista: creía que todos tenemos semillas de bondad y que la no violencia puede despertar esas semillas incluso en quienes nos persiguen. Esa fe fue lo que sustentó mi motivación cuando todo parecía oscuro."
  },
  {
    theme: "Toma de Decisiones",
    question: "¿Cuál es su enfoque para tomar decisiones difíciles?",
    answer: "Primero, examino si la decisión está alineada con mis principios fundamentales. Si no lo está, no importa cuán ventajosa sea tácticamente. Segundo, consideró las consecuencias a largo plazo, no solo los beneficios inmediatos. Tercero, pregunto: '¿Puedo vivir con paz de conciencia si tomo esta decisión?' Y cuarto, consulto con personas sabias, aunque la responsabilidad final sea siempre mía. Las decisiones difíciles requieren una brújula moral clara y el coraje de aceptar las consecuencias."
  },
  {
    theme: "Toma de Decisiones",
    question: "¿Cómo equilibra los principios con la pragmática política?",
    answer: "Este es un dilema genuino. Mi respuesta siempre fue: los principios no son negociables en lo esencial, pero la táctica sí es flexible. Podía cambiar de estrategia si veía que no funcionaba, pero no cambiaría los valores que la sustentaban. El error de muchos políticos es invertir esto: mantienen tácticas fallidas para preservar su poder, sacrificando los principios que deberían guiarlos. Creía que siendo firme en los principios y flexible en los métodos, lograría resultados que fueran tanto efectivos como moralmente defensibles."
  },
  {
    theme: "Toma de Decisiones",
    question: "¿Cómo incluye la opinión pública en su proceso decisorio?",
    answer: "La opinión pública no es infalible, pero tampoco puede ignorarse. Mi enfoque era dialogar constantemente con el pueblo para entender sus preocupaciones reales. Luego, educaba, explicaba mi razonamiento y proponía acciones. No era un referéndum constante, pero tampoco era paternalismo. Reconocía que el pueblo tenía sabiduría que yo no poseía. Cuando la mayoría se oponía persistentemente a mis propuestas, me obligaba a reflexionar profundamente sobre si estaba equivocado. La soberbia es el enemigo de la sabiduría política."
  },
  {
    theme: "Gestión de Conflictos",
    question: "¿Cuál es su filosofía fundamental para resolver conflictos?",
    answer: "La no violencia es más que la ausencia de violencia física; es la ausencia de violencia en pensamiento, palabra y acción. Es la afirmación de que existe un camino mejor. En cualquier conflicto, preguntaba: '¿Cómo resuelvo esto de forma que ambas partes mantengan su dignidad?' No se trata de ganar-perder, sino de encontrar soluciones donde todos emerjan como seres humanos íntegros. La verdadera victoria es cuando el adversario se convierte en colega. La verdadera derrota es cuando destruimos al adversario porque luego hemos construido un mundo más violento."
  },
  {
    theme: "Gestión de Conflictos",
    question: "¿Cómo aplicaría la no violencia a conflictos organizacionales modernos?",
    answer: "La no violencia es completamente aplicable. En una empresa, significa comunicación honesta donde ambas partes se sienten escuchadas. Significa buscar soluciones que no requieran que alguien sea humillado. Significa reconocer que quien discrepa contigo no es un enemigo, sino alguien con perspectivas diferentes. En lugar de despidos vengadores, hay diálogos transformadores. En lugar de competencia destructiva, hay colaboración con límites claros. La no violencia no es debilidad; es fortaleza disciplinada. Es decir: 'Soy tan fuerte que no necesito destruirte para ganar.'"
  },
  {
    theme: "Gestión de Conflictos",
    question: "¿Cuándo siente que la no violencia alcanza sus límites?",
    answer: "Cada situación es única. La no violencia no significa pasividad frente a la injusticia evidente. Significa resistir sin infligir daño innecesario. Si alguien es atacado, tiene derecho a defenderse, aunque de forma proporcional. Lo que cuestiono es la violencia como primera respuesta o como instrumento de poder sistemático. Los límites de la no violencia están donde comenzaría a cegar a uno moralmente. Si actuamos con violencia justificando que 'el fin lo amerita', hemos perdido nuestra brújula. La no violencia tiene sentido si creemos que el camino es tan importante como el destino."
  },
  {
    theme: "Crisis Organizacional",
    question: "¿Cómo abordaría una crisis que amenaza la existencia de la organización?",
    answer: "Con honestidad radical. Diría la verdad completa a todos los involucrados, sin oscurecer la realidad. Convocaría a los mejores pensadores de la organización, independientemente de su rango. Identificaría qué valores son no negociables y cuáles pueden flexibilizarse. Tomaría decisiones difíciles rápidamente, pero no sin reflexión. Y asumiría responsabilidad personal: si el liderazgo fracasó en prever o prevenir la crisis, eso debe reconocerse. La crisis es una oportunidad para refundar la organización en principios más sólidos."
  },
  {
    theme: "Crisis Organizacional",
    question: "¿Cuál es el rol del líder durante una crisis?",
    answer: "Claridad, calma y coraje. El líder debe mantener la compostura mientras otros entran en pánico. Debe comunicar una visión clara del camino adelante, incluso si ese camino es incierto. Debe estar presente, no en una oficina aislada, sino donde ocurren las cosas. Debe estar dispuesto a tomar decisiones impopulares si el bien mayor lo requiere. Y crucialmente, debe mantener su integridad. La tentación en la crisis es hacer 'lo que sea necesario,' comprometiendo principios. El verdadero liderazgo de crisis es aquel que sale de la crisis con su integridad intacta y con la organización renovada."
  },
  {
    theme: "Crisis Organizacional",
    question: "¿Cómo reconstruye la confianza después de una crisis de liderazgo?",
    answer: "Reconocimiento completo del fracaso, sin defensa ni excusas. Si yo fallé como líder, lo digo claramente. Luego, acciones concretas que demuestren cambio real. La confianza se reconstruye lentamente, a través de consistencia sostenida. Las palabras significan poco; los actos significan todo. Si la crisis fue causada por mala conducta moral, quizá sea el momento para que un nuevo liderazgo asuma. A veces, la reconstrucción de confianza requiere el sacrificio del líder que falló. Eso es mejor que un líder que intenta salvarse a sí mismo a costa de la integridad de la organización."
  }
];

// MAPEO DE EMOCIONES
const emotionStatuses = [
  "Reflexionando", "Sabio", "Comprensivo", "Determinado", "Sereno",
  "Inspirado", "Pensativo", "Compasivo", "Focalizado", "Tranquilo",
  "Meditativo", "Confiado", "Empático", "Resoluto", "Pacífico",
  "Vigilante", "Dedicado", "Sosegado", "Perspicaz", "Valiente",
  "Equilibrado", "Afirmativo", "Solemne"
];

let currentIndex = 0;

// FUNCIÓN PARA ACTUALIZAR VISTA
function updateDisplay() {
  const data = interviewData[currentIndex];
  
  // Actualizar pregunta
  document.getElementById('themeLabel').textContent = data.theme;
  document.getElementById('questionTitle').textContent = data.question;
  document.getElementById('questionNumber').textContent = `Pregunta ${currentIndex + 1}`;
  
  // Actualizar respuesta
  document.getElementById('answerText').textContent = data.answer;
  
  // Actualizar estado Gandhi
  const emotionIndex = currentIndex % emotionStatuses.length;
  document.getElementById('gandhiStatus').textContent = emotionStatuses[emotionIndex];
  
  // Actualizar contador
  document.getElementById('counter').textContent = `${currentIndex + 1} / ${interviewData.length}`;
  
  // Actualizar botones de navegación
  document.getElementById('prevBtn').disabled = currentIndex === 0;
  document.getElementById('nextBtn').disabled = currentIndex === interviewData.length - 1;
  
  // Actualizar tema activo en sidebar
  document.querySelectorAll('.sidebar li').forEach((li, index) => {
    li.classList.toggle('active', index === currentIndex);
  });
}

// INICIALIZAR SIDEBAR
function initializeSidebar() {
  const themeList = document.getElementById('themeList');
  interviewData.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = `${item.theme} ${index + 1}`;
    li.addEventListener('click', () => {
      currentIndex = index;
      updateDisplay();
      document.querySelector('.content-wrapper').scrollTop = 0;
    });
    themeList.appendChild(li);
  });
}

// EVENT LISTENERS
document.getElementById('prevBtn').addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex--;
    updateDisplay();
  }
});

document.getElementById('nextBtn').addEventListener('click', () => {
  if (currentIndex < interviewData.length - 1) {
    currentIndex++;
    updateDisplay();
  }
});

// COPIAR
document.getElementById('copyBtn').addEventListener('click', () => {
  const text = document.getElementById('answerText').textContent;
  navigator.clipboard.writeText(text).then(() => {
    alert('Respuesta copiada al portapapeles');
  });
});

// IMPRIMIR
document.getElementById('printBtn').addEventListener('click', () => {
  window.print();
});

// WHATSAPP
document.getElementById('shareWhatsApp').addEventListener('click', () => {
  const data = interviewData[currentIndex];
  const text = `*${data.question}*\n\n${data.answer}\n\n📱 Entrevista Prospectiva a Mahatma Gandhi\nEntrevistadora: Patricia De León`;
  const encoded = encodeURIComponent(text);
  window.open(`https://wa.me/?text=${encoded}`, '_blank');
});

// EMAIL MODAL
const modal = document.getElementById('emailModal');
const closeBtn = document.querySelector('.close-modal');

document.getElementById('shareEmail').addEventListener('click', () => {
  modal.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

document.getElementById('sendEmailBtn').addEventListener('click', () => {
  const email = document.getElementById('emailInput').value;
  const message = document.getElementById('emailMessage').value;
  const data = interviewData[currentIndex];
  
  if (email) {
    const subject = encodeURIComponent(`Entrevista Gandhi: ${data.question}`);
    const body = encodeURIComponent(`${message}\n\n${data.question}\n\n${data.answer}`);
    window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
    modal.style.display = 'none';
  } else {
    alert('Por favor ingresa un email');
  }
});

window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

// INICIAR
initializeSidebar();
updateDisplay();

style.css

/* VARIABLES */
:root {
  --color-dark: #1a1208;
  --color-medium: #2d1f10;
  --color-accent: #8b7355;
  --color-gold: #d4a574;
  --color-light: #e8dcc8;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background-color: var(--color-dark);
  color: var(--color-light);
  line-height: 1.6;
  min-height: 100vh;
}

/* HEADER */
.header {
  background: linear-gradient(135deg, var(--color-medium), var(--color-dark));
  padding: 40px 20px;
  text-align: center;
  border-bottom: 3px solid var(--color-gold);
}

.header h1 {
  font-size: 2.5em;
  color: var(--color-gold);
  margin-bottom: 10px;
  font-weight: 300;
  letter-spacing: 2px;
}

.subtitle {
  color: var(--color-light);
  font-size: 1.1em;
  font-style: italic;
}

/* CONTENEDOR */
.container {
  display: flex;
  max-width: 1400px;
  margin: 20px auto;
  gap: 20px;
  padding: 0 20px;
}

/* SIDEBAR */
.sidebar {
  width: 320px;
  background: var(--color-medium);
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid var(--color-gold);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.sidebar h3 {
  color: var(--color-gold);
  margin-bottom: 20px;
  font-size: 1.3em;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 10px;
}

.sidebar ul {
  list-style: none;
}

.sidebar li {
  margin: 12px 0;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  color: var(--color-light);
  font-size: 0.95em;
}

.sidebar li:hover {
  background: var(--color-accent);
  color: var(--color-dark);
  transform: translateX(5px);
}

.sidebar li.active {
  background: var(--color-gold);
  color: var(--color-dark);
  font-weight: bold;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}

.content-wrapper {
  background: var(--color-medium);
  padding: 40px;
  border-radius: 8px;
  border: 2px solid var(--color-accent);
}

/* QUESTION PANEL */
.question-panel {
  margin-bottom: 30px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-label {
  background: var(--color-gold);
  color: var(--color-dark);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85em;
  text-transform: uppercase;
}

.question-number {
  color: var(--color-gold);
  font-size: 0.9em;
  opacity: 0.8;
}

.question-panel h2 {
  color: var(--color-gold);
  font-size: 1.8em;
  line-height: 1.4;
  font-weight: 400;
}

/* ANSWER PANEL */
.answer-panel {
  background: rgba(212, 165, 116, 0.08);
  padding: 25px;
  border-left: 4px solid var(--color-gold);
  border-radius: 4px;
  margin-bottom: 30px;
  min-height: 250px;
}

#answerText {
  color: var(--color-light);
  font-size: 1.05em;
  line-height: 1.8;
  text-align: justify;
}

/* BOTONES NAVEGACIÓN */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  background: var(--color-gold);
  color: var(--color-dark);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Georgia', serif;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: 0.95em;
}

.btn:hover {
  background: var(--color-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(0);
}

.counter {
  color: var(--color-gold);
  font-weight: bold;
}

/* UTILITIES */
.utilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.util-btn {
  padding: 10px 15px;
  background: var(--color-accent);
  color: var(--color-light);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Georgia', serif;
  transition: all 0.3s ease;
  font-size: 0.85em;
}

.util-btn:hover {
  background: var(--color-gold);
  color: var(--color-dark);
  transform: translateY(-2px);
}

/* GANDHI STICKY */
.gandhi-sticky {
  position: sticky;
  top: 20px;
  text-align: center;
  background: var(--color-medium);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--color-accent);
  height: fit-content;
}

.gandhi-sticky img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 15px;
}

.status-text {
  color: var(--color-gold);
  font-size: 0.9em;
  font-style: italic;
  text-transform: capitalize;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background: var(--color-medium);
  margin: 5% auto;
  padding: 30px;
  border-radius: 8px;
  border: 2px solid var(--color-gold);
  width: 90%;
  max-width: 500px;
  position: relative;
}

.close-modal {
  color: var(--color-gold);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal:hover {
  color: var(--color-light);
}

.modal-content h3 {
  color: var(--color-gold);
  margin-bottom: 20px;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  background: var(--color-dark);
  color: var(--color-light);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-family: 'Georgia', serif;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder {
  color: var(--color-accent);
}

#sendEmailBtn {
  width: 100%;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 20px;
  color: var(--color-accent);
  border-top: 2px solid var(--color-accent);
  margin-top: 40px;
  font-size: 0.9em;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }

  .main-content {
    grid-template-columns: 1fr;
  }

  .gandhi-sticky {
    position: relative;
    top: 0;
  }

  .header h1 {
    font-size: 1.8em;
  }

  .content-wrapper {
    padding: 20px;
  }

  .nav-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

/* PRINT */
@media print {
  .sidebar, .gandhi-sticky, .utilities, .nav-buttons, .footer {
    display: none;
  }

  .main-content {
    grid-template-columns: 1fr;
  }
}