cambios esteticos index+desafios+sluciones+ecosistema

2026-09-26 20:30:03 -03:00
parent 1e2595275f
commit 7e930760e1
13 changed files with 2021 additions and 302 deletions
@@ -0,0 +1,129 @@
+/* ==========================================================================
+   ACORDEÓN DE PREGUNTAS FRECUENTES (FAQ)
+   ========================================================================== */
+
+/* Contenedor centralizado para lectura óptima */
+.faq-accordion-container {
+  max-width: 820px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+/* Tarjeta de cada pregunta */
+.faq-item {
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid var(--ide-primary-line);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: border-color 0.25s ease, background-color 0.25s ease;
+}
+
+.faq-item:hover {
+  background: var(--ide-accent-bg);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.faq-item[open] {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--ide-primary-light);
+}
+
+/* Cabecera / Trigger */
+.faq-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.25rem;
+  padding: 1.25rem 1.5rem;
+  cursor: pointer;
+  user-select: none;
+  list-style: none; /* Elimina la flecha estándar del navegador */
+}
+
+/* Ocultar el marcador nativo en navegadores WebKit */
+.faq-header::-webkit-details-marker {
+  display: none;
+}
+
+/* Texto de la pregunta */
+.faq-question {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--text-body);
+  line-height: 1.4;
+  transition: color 0.2s ease;
+}
+
+.faq-item[open] .faq-question {
+  color: var(--ide-primary-light);
+}
+
+/* Icono / Flecha */
+.faq-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-main);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease;
+}
+
+.faq-item:hover .faq-icon {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-inverse);
+}
+
+/* Rotación de la flecha al abrir */
+.faq-item[open] .faq-icon {
+  transform: rotate(180deg);
+  background: var(--ide-primary-light);
+  color: #0b1118;
+}
+
+/* Contenido de la respuesta */
+.faq-content {
+  padding: 0 1.5rem 1.35rem 1.5rem;
+  animation: faq-fade-in 0.25s ease-out;
+}
+
+.faq-content p {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.65;
+  color: var(--text-muted, var(--text-main));
+}
+
+.faq-content strong {
+  color: var(--text-muted);
+}
+
+/* Animación de apertura */
+@keyframes faq-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Ajustes en pantallas móviles */
+@media (max-width: 640px) {
+  .faq-header {
+    padding: 1.1rem 1.2rem;
+  }
+  .faq-question {
+    font-size: 0.95rem;
+  }
+  .faq-content {
+    padding: 0 1.2rem 1.15rem 1.2rem;
+  }
+}