<div class="faq-container">
<div class="faq-demo">
<div class="faq-header">
<h2>Preguntas Frecuentes</h2>
<p>Encuentra respuestas a preguntas comunes</p>
</div>
<div class="faq-search">
<input type="text" id="faqSearch" placeholder="Buscar preguntas...">
<span class="search-icon">🔍</span>
</div>
<div class="faq-categories">
<button class="category-btn active" data-category="all">Todas</button>
<button class="category-btn" data-category="general">General</button>
<button class="category-btn" data-category="account">Cuenta</button>
<button class="category-btn" data-category="billing">Facturación</button>
<button class="category-btn" data-category="technical">Técnico</button>
</div>
<div class="faq-accordion" id="faqAccordion">
<!-- Elemento de FAQ 1 -->
<div class="faq-item" data-category="general">
<div class="faq-question" tabindex="0">
<h3>¿Cómo creo una cuenta?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer">
<p>Para crear una cuenta, haz clic en el botón "Registrarse" en la esquina superior derecha de nuestro sitio web. Completa tus datos y verifica tu dirección de correo electrónico. Recibirás un correo de confirmación una vez que tu cuenta esté activada.</p>
</div>
</div>
<!-- Elemento de FAQ 2 -->
<div class="faq-item" data-category="account">
<div class="faq-question" tabindex="0">
<h3>¿Cómo puedo restablecer mi contraseña?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer">
<p>Si has olvidado tu contraseña, haz clic en el enlace "Olvidé mi contraseña" en la página de inicio de sesión. Ingresa tu dirección de correo electrónico y te enviaremos un enlace para restablecer tu contraseña. El enlace expirará en 24 horas por razones de seguridad.</p>
</div>
</div>
<!-- Elemento de FAQ 3 -->
<div class="faq-item" data-category="billing">
<div class="faq-question" tabindex="0">
<h3>¿Qué métodos de pago aceptan?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer">
<p>Aceptamos todas las tarjetas de crédito principales incluyendo Visa, MasterCard, American Express y Discover. También admitimos PayPal, Apple Pay y Google Pay para tu conveniencia. Todas las transacciones están protegidas con cifrado SSL de 256 bits.</p>
</div>
</div>
<!-- Elemento de FAQ 4 -->
<div class="faq-item" data-category="technical">
<div class="faq-question" tabindex="0">
<h3>¿Cómo soluciono problemas de conexión?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer">
<p>Si estás experimentando problemas de conexión, prueba estos pasos: 1) Verifica tu conexión a internet, 2) Reinicia tu router, 3) Limpia la caché de tu navegador, 4) Desactiva las extensiones del navegador, 5) Prueba con un navegador diferente. Si los problemas persisten, contacta a nuestro equipo de soporte.</p>
</div>
</div>
<!-- Elemento de FAQ 5 -->
<div class="faq-item" data-category="general">
<div class="faq-question" tabindex="0">
<h3>¿Puedo cancelar mi suscripción en cualquier momento?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer">
<p>Sí, puedes cancelar tu suscripción en cualquier momento sin cargos por cancelación. Tu acceso continuará hasta el final de tu período de facturación actual. Para cancelar, ve a la configuración de tu cuenta y haz clic en "Cancelar Suscripción".</p>
</div>
</div>
</div>
<div class="faq-footer">
<p>¿Tienes más preguntas? <a href="#" class="contact-link">Contacta a nuestro equipo de soporte</a></p>
</div>
</div>
</div>
.faq-container {
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
padding: 30px;
border-radius: 20px;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.faq-demo {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.faq-header {
text-align: center;
margin-bottom: 30px;
}
.faq-header h2 {
margin: 0 0 10px 0;
color: #333;
font-size: 2rem;
font-weight: 700;
}
.faq-header p {
color: #666;
font-size: 1.1rem;
margin: 0;
}
.faq-search {
position: relative;
margin-bottom: 25px;
}
.faq-search input {
width: 100%;
padding: 15px 20px 15px 50px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
box-sizing: border-box;
}
.faq-search input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.2rem;
}
.faq-categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
justify-content: center;
}
.category-btn {
padding: 8px 16px;
background: #f1f5f9;
color: #666;
border: none;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.category-btn:hover,
.category-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.faq-accordion {
margin-bottom: 30px;
}
.faq-item {
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.3s ease;
animation: slideInUp 0.6s ease-out;
}
.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
.faq-item:nth-child(3) { animation-delay: 0.3s; }
.faq-item:nth-child(4) { animation-delay: 0.4s; }
.faq-item:nth-child(5) { animation-delay: 0.5s; }
.faq-question {
padding: 20px 25px;
background: #f8fafc;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f1f5f9;
}
.faq-question h3 {
margin: 0;
color: #333;
font-size: 1.1rem;
font-weight: 600;
flex: 1;
text-align: left;
}
.faq-toggle {
font-size: 1.5rem;
font-weight: 300;
color: #999;
transition: all 0.3s ease;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
color: #667eea;
}
.faq-answer {
padding: 0 25px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: white;
}
.faq-item.active .faq-answer {
padding: 0 25px 25px;
max-height: 500px;
}
.faq-answer p {
margin: 0;
color: #666;
line-height: 1.6;
font-size: 0.95rem;
}
.faq-footer {
text-align: center;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.faq-footer p {
margin: 0;
color: #666;
font-size: 1rem;
}
.contact-link {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.contact-link:hover {
color: #5a6fd8;
text-decoration: underline;
}
/* Animaciones */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Responsivo */
@media (max-width: 768px) {
.faq-container {
padding: 20px;
}
.faq-demo {
padding: 20px;
}
.faq-header h2 {
font-size: 1.7rem;
}
.faq-search input {
padding: 12px 15px 12px 45px;
}
.search-icon {
left: 15px;
font-size: 1rem;
}
.faq-question {
padding: 15px 20px;
}
.faq-question h3 {
font-size: 1rem;
}
.faq-answer {
padding: 0 20px;
}
.faq-item.active .faq-answer {
padding: 0 20px 20px;
}
}
@media (max-width: 480px) {
.faq-categories {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 10px;
}
.category-btn {
white-space: nowrap;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Obtener elementos del DOM
const faqItems = document.querySelectorAll('.faq-item');
const faqQuestions = document.querySelectorAll('.faq-question');
const categoryButtons = document.querySelectorAll('.category-btn');
const searchInput = document.getElementById('faqSearch');
// Agregar escuchadores de eventos a las preguntas de FAQ
faqQuestions.forEach(question => {
question.addEventListener('click', function() {
const faqItem = this.parentElement;
toggleFAQ(faqItem);
});
// Agregar soporte de teclado
question.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const faqItem = this.parentElement;
toggleFAQ(faqItem);
}
});
});
// Alternar elemento de FAQ
function toggleFAQ(faqItem) {
// Cerrar todos los demás elementos de FAQ
faqItems.forEach(item => {
if (item !== faqItem) {
item.classList.remove('active');
}
});
// Alternar elemento de FAQ actual
faqItem.classList.toggle('active');
}
// Agregar escuchadores de eventos a los botones de categoría
categoryButtons.forEach(button => {
button.addEventListener('click', function() {
// Eliminar clase activa de todos los botones
categoryButtons.forEach(btn => btn.classList.remove('active'));
// Agregar clase activa al botón clickeado
this.classList.add('active');
// Obtener categoría
const category = this.getAttribute('data-category');
// Filtrar elementos de FAQ
filterFAQItems(category);
});
});
// Agregar escuchador de eventos al campo de búsqueda
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
filterFAQBySearch(searchTerm);
});
// Filtrar elementos de FAQ por categoría
function filterFAQItems(category) {
faqItems.forEach(item => {
if (category === 'all' || item.getAttribute('data-category') === category) {
item.style.display = 'block';
item.classList.remove('filtered');
} else {
item.style.display = 'none';
item.classList.add('filtered');
}
});
}
// Filtrar elementos de FAQ por término de búsqueda
function filterFAQBySearch(searchTerm) {
faqItems.forEach(item => {
const question = item.querySelector('.faq-question h3').textContent.toLowerCase();
const answer = item.querySelector('.faq-answer p').textContent.toLowerCase();
if (searchTerm === '' || question.includes(searchTerm) || answer.includes(searchTerm)) {
item.style.display = 'block';
item.classList.remove('search-hidden');
} else {
item.style.display = 'none';
item.classList.add('search-hidden');
}
});
}
// Inicializar con todas las categorías visibles
filterFAQItems('all');
// Agregar desplazamiento suave al enlace de contacto
const contactLink = document.querySelector('.contact-link');
contactLink.addEventListener('click', function(e) {
e.preventDefault();
// En una implementación real, esto desplazaría al formulario de contacto
alert('El formulario de contacto se abriría aquí');
});
});