Add Preguntas Frecuentes accordion section

Adds 8-question FAQ section between Flota and Contacto with single-open
accordion behavior, plus nav/mobile-menu entries and a WhatsApp CTA.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/routes/+page.svelte

@@ -13,6 +13,7 @@
   let scrolled = $state(false);
   let mobileMenuOpen = $state(false);
   let activeGallery = $state(null);
+  let openFaq = $state(0);
 
   const WA_URL = 'https://wa.me/50688895425?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios.';
   const PHONE_URL = 'tel:50688895425';
@@ -25,6 +26,17 @@
     { icon: 'fa-route', name: 'Fletes y Acarreos', description: 'Servicio de fletes para traslados pequeños y medianos, ideal para entregas puntuales, compras de tiendas o movimientos rápidos dentro del país.' }
   ];
 
+  const faqs = [
+    { q: '¿En qué zonas de Costa Rica brindan servicio?', a: 'Cubrimos todo el territorio nacional, desde el Valle Central hasta Guanacaste, Limón, Puntarenas y zonas rurales. Coordinamos mudanzas punto a punto dentro del país sin restricciones de distancia.' },
+    { q: '¿Cómo solicito una cotización?', a: 'Escríbanos por WhatsApp al +506 8889-5425 con los detalles de su mudanza (punto de origen, destino, tipo de inmueble y cantidad aproximada de artículos). Le enviaremos una cotización gratuita y sin compromiso en el menor tiempo posible.' },
+    { q: '¿El embalaje está incluido en el servicio?', a: 'Sí. Incluimos protección profesional para artículos frágiles, muebles y electrodomésticos. Si requiere materiales especiales (cajas, plástico burbuja, cobertores), lo coordinamos al momento de la cotización.' },
+    { q: '¿Con cuánta anticipación debo reservar?', a: 'Recomendamos reservar con al menos 3 a 5 días de anticipación para asegurar disponibilidad, especialmente a fin de mes. Atendemos mudanzas de emergencia según disponibilidad de la flota.' },
+    { q: '¿Desarman y arman los muebles?', a: 'Sí. Nuestro personal desarma muebles grandes (camas, roperos, comedores) en el origen y los arma nuevamente en el destino, sin costo adicional en la mayoría de mudanzas residenciales.' },
+    { q: '¿Qué formas de pago aceptan?', a: 'Aceptamos efectivo, SINPE Móvil y transferencia bancaria. Para mudanzas comerciales o empresariales podemos coordinar factura electrónica.' },
+    { q: '¿Trabajan fines de semana y feriados?', a: 'Sí. Trabajamos 24/7 incluyendo fines de semana y feriados, sujeto a disponibilidad. Comuníquese con nosotros para coordinar la fecha y hora que mejor le convenga.' },
+    { q: '¿Qué pasa si algo se daña durante la mudanza?', a: 'Tratamos cada artículo con el máximo cuidado, pero si ocurre algún imprevisto asumimos la responsabilidad según las condiciones acordadas previamente. Trabajamos con transparencia y siempre buscamos soluciones justas.' }
+  ];
+
   const galleryImages = [
     { src: '/gallery/1.jpg', alt: 'Camión JMC azul para transporte y mudanzas' },
     { src: '/gallery/2.jpg', alt: 'Camión blanco con información de contacto de Rogher' },
@@ -71,6 +83,7 @@
       <a href="/" class="nav-link active">Inicio</a>
       <a href="#servicios" class="nav-link">Servicios</a>
       <a href="#galeria" class="nav-link">Flota</a>
+      <a href="#faq" class="nav-link">FAQ</a>
       <a href="#contacto" class="nav-link">Contacto</a>
       <a href={WA_URL} target="_blank" rel="noopener noreferrer" class="nav-cta">
         <i class="fab fa-whatsapp"></i> WhatsApp
@@ -87,6 +100,7 @@
       <a href="/" class="mobile-link" onclick={() => mobileMenuOpen = false}>Inicio</a>
       <a href="#servicios" class="mobile-link" onclick={() => mobileMenuOpen = false}>Servicios</a>
       <a href="#galeria" class="mobile-link" onclick={() => mobileMenuOpen = false}>Flota</a>
+      <a href="#faq" class="mobile-link" onclick={() => mobileMenuOpen = false}>FAQ</a>
       <a href="#contacto" class="mobile-link" onclick={() => mobileMenuOpen = false}>Contacto</a>
       <a href={WA_URL} target="_blank" rel="noopener noreferrer" class="mobile-cta">
         <i class="fab fa-whatsapp"></i> Escribir por WhatsApp
@@ -291,6 +305,40 @@
   </div>
 {/if}
 
+<!-- FAQ -->
+<section id="faq" class="section-black">
+  <div class="container">
+    <div class="section-header reveal">
+      <span class="section-tag">Preguntas Frecuentes</span>
+      <h2 class="section-title">Resolvemos sus <span class="blue">dudas</span></h2>
+      <p class="section-sub">Las respuestas a las preguntas más comunes sobre nuestros servicios de mudanza y transporte.</p>
+    </div>
+    <div class="faq-list">
+      {#each faqs as faq, i}
+        <div class="faq-item reveal" class:open={openFaq === i} style="transition-delay: {i * 50}ms">
+          <button
+            class="faq-question"
+            onclick={() => openFaq = openFaq === i ? -1 : i}
+            aria-expanded={openFaq === i}
+          >
+            <span>{faq.q}</span>
+            <i class="fas fa-plus faq-icon"></i>
+          </button>
+          <div class="faq-answer">
+            <p>{faq.a}</p>
+          </div>
+        </div>
+      {/each}
+    </div>
+    <div class="faq-cta reveal">
+      <span>¿No encuentra su respuesta?</span>
+      <a href={WA_URL} target="_blank" rel="noopener noreferrer" class="btn-primary btn-sm">
+        <i class="fab fa-whatsapp"></i> Pregúntenos por WhatsApp
+      </a>
+    </div>
+  </div>
+</section>
+
 <!-- CONTACT -->
 <section id="contacto" class="section-black">
   <div class="container">
@@ -912,6 +960,82 @@
     border-radius: 2px;
   }
 
+  /* FAQ */
+  .faq-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: 860px;
+    margin: 0 auto;
+  }
+  .faq-item {
+    background: #111;
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 3px;
+    overflow: hidden;
+    transition: border-color 0.3s, box-shadow 0.3s;
+  }
+  .faq-item:hover { border-color: rgba(29,161,224,0.25); }
+  .faq-item.open {
+    border-color: rgba(29,161,224,0.4);
+    box-shadow: 0 0 20px rgba(29,161,224,0.08);
+  }
+  .faq-question {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.25rem;
+    padding: 1.25rem 1.5rem;
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 700;
+    text-align: left;
+    letter-spacing: 0.01em;
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+  .faq-question:hover { color: #1DA1E0; }
+  .faq-icon {
+    color: #1DA1E0;
+    font-size: 0.95rem;
+    transition: transform 0.3s;
+    flex-shrink: 0;
+  }
+  .faq-item.open .faq-icon { transform: rotate(45deg); }
+  .faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .faq-item.open .faq-answer { max-height: 400px; }
+  .faq-answer p {
+    padding: 0 1.5rem 1.25rem;
+    font-size: 0.92rem;
+    color: #8A8A8A;
+    line-height: 1.7;
+  }
+  .faq-cta {
+    margin-top: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+    flex-wrap: wrap;
+    text-align: center;
+  }
+  .faq-cta span {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #E0E0E0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
   /* CONTACT */
   .contact-grid {
     display: grid;
@@ -1064,6 +1188,9 @@
     .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
     .final-cta { padding: 1.5rem; flex-direction: column; align-items: flex-start; }
     .section-dark, .section-black { padding: 56px 0; }
+    .faq-question { font-size: 0.88rem; padding: 1rem 1.1rem; }
+    .faq-answer p { font-size: 0.87rem; padding: 0 1.1rem 1rem; }
+    .faq-cta { flex-direction: column; gap: 1rem; }
     .trust-sep { display: none; }
     .trust-inner { gap: 0.6rem 1.25rem; padding: 0.85rem 1rem; }
     .trust-item { font-size: 0.72rem; }