<!--
  ═══════════════════════════════════════════════════════════════════════
  FLYINN — Landing multi-destino "Paquetes On Vacation"
  Archivos: on-vacation.html + styles.css (compartido con san-andres.html) + script-on-vacation.js
  URL final: https://lp.flyinn.co/on-vacation — subdominio en Netlify (ver
  DEPLOY-NETLIFY.md en la raíz del proyecto para las instrucciones paso a paso).
  ═══════════════════════════════════════════════════════════════════════
  ANTES DE PUBLICAR, REVISA ESTO:

  1) DESTINOS VERIFICADOS EN VIVO CONTRA flyinn.co (30-jul-2026):
     ✅ San Andrés — hoteles reales confirmados (filtro /hoteles)
     ✅ La Guajira — paquete real: flyinn.co/paquetes/guajita-todo-incluido
     ✅ Eje Cafetero — paquete real: flyinn.co/paquetes/eje-cafetero-magia-termales-y-diversion-4-dias-3-noches
     ⚠️  Santa Marta, Amazonas, Girardot — segui sin encontrarlos en el inventario
        actual de flyinn.co (probé sus URLs de paquete de nuevo el 30-jul y siguen
        devolviendo "no encontrado"). Me pediste quitar el estado "Próximamente",
        así que ahora se ven exactamente igual que Guajira/Eje Cafetero: foto real
        (de Wikimedia Commons, uso libre, ver nota abajo), "Consulta tu precio" y
        CTA normal de "Cotizar por WhatsApp". Lo que SÍ dejé sin inventar: nombres
        de hotel específicos (el modal muestra "estamos confirmando las mejores
        opciones" en vez de un hotel falso) y precio (no hay número). En cuanto
        tengas hotel/tarifa real para estos 3, agrégalos en el objeto
        `destinations` de script-on-vacation.js (mismo formato que Guajira).
     ℹ️  FOTOS DE Santa Marta/Amazonas/Girardot — como flyinn.co no tiene fotos
        propias de estos 3 (no son inventario todavía), usé fotografías de
        Wikimedia Commons con licencia libre (Tayrona, río Amazonas en Leticia,
        puente sobre el río Magdalena en Girardot). No son fotos de hoteles
        específicos de Flyinn — son solo imagen genérica del destino. Reemplázalas
        por fotos reales del hotel/paquete apenas los actives.

  1b) SECCIÓN "MÁS DESTINOS ON VACATION" (nueva) — agregué Cancún, Punta Cana,
     Medellín, Cali, Montería y Puerto Triunfo/Doradal porque SÍ aparecen como
     destinos reales con hoteles en el filtro de flyinn.co/hoteles (a diferencia
     de Santa Marta/Amazonas/Girardot). Foto y nombre de 1 hotel real por destino,
     sin precio inventado — el CTA lleva directo a WhatsApp.

  2) CONVENIO ON VACATION — dejé las menciones de "agencia autorizada" y
     "convenio directo On Vacation" en hero/footer/FAQ porque confirmaste que es real.

  3) PRECIOS — solo muestro un número verificable: $1.350.000 (San Andrés básica,
     mismo dato usado en san-andres.html). Guajira y Eje Cafetero muestran
     "Consulta tu precio" porque no tengo tarifa real confirmada — evita publicar
     un precio inventado.

  4) HOTELES — todos los nombres en los modales de San Andrés / Guajira / Eje
     Cafetero son reales, verificados contra flyinn.co. No inventé cadenas de
     estrellas ni "tipo de alimentación" porque el sitio no expone esa data en
     HTML estático — si la tienes, agrégala tú directamente en el objeto
     `destinations` de script-on-vacation.js.

  5) TESTIMONIOS — placeholders entre [corchetes], igual que en san-andres.html.
     Reemplázalos por citas reales antes de publicar.

  6) TRACKING — mismo GTM-MMRBLN9Q, conversión de Google Ads
     (AW-17439832624/0ZpFCODCuYAbELD0-vtA) y GA4 (G-9GS8EK5JQK) que ya usamos
     en san-andres.html. Cada clic de WhatsApp dispara los mismos eventos.

  7) ESTRATEGIA DE ADS — dijiste que esta página también recibirá tráfico pagado.
     Ojo: tu propio doc maestro dice "1 destino = 1 landing" porque mezclar varios
     diluye el message-match de las keywords y baja el Quality Score. Mi sugerencia
     (no bloqueante): usa esta página para keywords de MARCA/genéricas
     ("paquetes on vacation", "flyinn"), y sigue usando landings dedicadas tipo
     san-andres.html para keywords específicas por destino.

  8) LOGO — se veía muy pequeño en el header (30px) y en el footer (22px) en las
     dos landings. Lo agrandé a 52px en el header (42px al hacer scroll) y 38px
     en el footer, vía styles.css (afecta también a san-andres.html porque
     comparten esa hoja de estilos).
  ═══════════════════════════════════════════════════════════════════════
-->
<!doctype html>
<html lang="es-CO">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- ============ GOOGLE TAG MANAGER (head) ============ -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMRBLN9Q');</script>
<!-- ============ FIN GTM (head) ============ -->

<!-- ============ GOOGLE ADS + GA4 ============ -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17439832624"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-17439832624');
  gtag('config', 'G-9GS8EK5JQK');
</script>
<!-- ============ FIN GOOGLE ADS + GA4 ============ -->

<title>Paquetes On Vacation Todo Incluido | Flyinn</title>
<meta name="description" content="Paquetes On Vacation todo incluido a San Andrés, La Guajira, Eje Cafetero y más. Vuelo + hotel + alimentación + seguro. Cotiza por WhatsApp, respuesta en menos de 2 horas." />
<meta name="google-site-verification" content="GOOGLE_SITE_VERIFICATION_CODE" />
<link rel="canonical" href="https://lp.flyinn.co/on-vacation" />
<link rel="icon" href="https://flyinn.co/icon.png" type="image/png" />

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Flyinn" />
<meta property="og:title" content="Paquetes On Vacation Todo Incluido | Flyinn" />
<meta property="og:description" content="San Andrés, La Guajira, Eje Cafetero y más. Vuelo + hotel + alimentación + seguro. Cotiza por WhatsApp." />
<meta property="og:image" content="https://flyinn.co/uploads/package/co/san-andres/general/general-1772632090607.webp" />
<meta property="og:url" content="https://lp.flyinn.co/on-vacation" />
<meta property="og:locale" content="es_CO" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="preload" as="image" href="https://flyinn.co/uploads/package/co/san-andres/general/general-1772632090607.webp" />
<link rel="stylesheet" href="styles.css" />

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TravelAgency",
  "name": "Flyinn",
  "legalName": "Travel Group SAS",
  "taxID": "901.960.422-1",
  "url": "https://flyinn.co",
  "logo": "https://flyinn.co/assets/Logo-blanco.png",
  "telephone": "+57 322 794 2799",
  "areaServed": "CO"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "¿Qué incluye un paquete todo incluido On Vacation?",
      "acceptedAnswer": { "@type": "Answer", "text": "Depende del hotel y destino: puede incluir vuelo ida y vuelta, alojamiento, desayuno, almuerzo, cena, cócteles, seguro de viaje y actividades. Cada plan varía — te confirmamos exactamente qué incluye el tuyo al cotizar." }
    },
    {
      "@type": "Question",
      "name": "¿Puedo pagar en cuotas sin tarjeta de crédito?",
      "acceptedAnswer": { "@type": "Answer", "text": "Sí. Con Addi puedes pagar hasta en 24 cuotas y con Sistecrédito hasta en 8 cuotas, ambos sin tarjeta de crédito. También aceptamos PSE, tarjeta débito/crédito y Nequi." }
    },
    {
      "@type": "Question",
      "name": "¿Por qué cotizar con Flyinn en vez de directo con On Vacation?",
      "acceptedAnswer": { "@type": "Answer", "text": "Tenemos convenio directo con On Vacation. Te damos el mismo precio con asesoría personalizada por WhatsApp, te ayudamos a elegir el mejor hotel para tu tipo de viaje, y te acompañamos antes, durante y después." }
    },
    {
      "@type": "Question",
      "name": "¿Los precios son iguales que en la página de On Vacation?",
      "acceptedAnswer": { "@type": "Answer", "text": "Manejamos tarifas oficiales con convenio directo. En algunos casos podemos ofrecer condiciones especiales según disponibilidad y temporada. Cotiza sin compromiso y compara." }
    },
    {
      "@type": "Question",
      "name": "¿Cuánto tiempo tarda la cotización?",
      "acceptedAnswer": { "@type": "Answer", "text": "Menos de 2 horas en horario laboral. Te enviamos por WhatsApp las mejores opciones con precios, fotos del hotel y todo lo que incluye." }
    },
    {
      "@type": "Question",
      "name": "¿Flyinn es una agencia legal y registrada?",
      "acceptedAnswer": { "@type": "Answer", "text": "Sí. Flyinn es una marca de Travel Group SAS, NIT 901.960.422-1, agencia de viajes registrada en Colombia, con convenio directo para la venta de paquetes On Vacation." }
    }
  ]
}
</script>
</head>
<body>

<!-- ============ GOOGLE TAG MANAGER (body noscript) ============ -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MMRBLN9Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- ============ FIN GTM (body) ============ -->

<div class="scroll-progress" id="scrollProgress"></div>

<!-- ===================== HEADER ===================== -->
<header class="site" id="siteHeader">
  <div class="wrap">
    <img class="logo" src="assets/logo-blanco.png" alt="Flyinn" />
    <a class="btn-header wa-cta" data-loc="header" href="#">
      <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.79.47 3.47 1.29 4.93L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.2h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.07.8.82-3-.19-.31a8.13 8.13 0 0 1-1.24-4.29c0-4.5 3.66-8.15 8.16-8.15 2.18 0 4.22.85 5.76 2.39a8.09 8.09 0 0 1 2.39 5.77c0 4.5-3.66 8.1-8.19 8.1z"/></svg>
      Cotiza
    </a>
  </div>
</header>

<!-- ===================== HERO ===================== -->
<section class="hero" id="hero">
  <div class="hero-bg" id="heroBg" style="background-image:url('https://flyinn.co/uploads/package/co/san-andres/general/general-1772632090607.webp')"></div>
  <div class="hero-overlay"></div>
  <div class="hero-spotlight" id="heroSpotlight"></div>
  <div class="wrap">
    <span class="eyebrow">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/></svg>
      Agencia autorizada On Vacation
    </span>
    <h1 class="hero-title">Paquetes On Vacation, <span class="accent">todo incluido.</span></h1>
    <p class="hero-sub">San Andrés, La Guajira, Eje Cafetero y más. Vuelo + hotel + alimentación + seguro. Cotiza por WhatsApp y te armamos el mejor plan.</p>

    <div class="price-row">
      <div class="price-tag">
        <span class="from">Desde</span>
        <span class="amount"><span class="count-up" data-count="1350000">$0</span> <span style="font-size:1rem;font-weight:600;opacity:.7">COP/persona</span></span>
      </div>
      <span class="badge-cuotas">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
        Paga en cuotas sin tarjeta
      </span>
    </div>

    <div class="cta-group">
      <a class="btn-wa wa-cta" data-loc="hero" href="#">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.79.47 3.47 1.29 4.93L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.2h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.07.8.82-3-.19-.31a8.13 8.13 0 0 1-1.24-4.29c0-4.5 3.66-8.15 8.16-8.15 2.18 0 4.22.85 5.76 2.39a8.09 8.09 0 0 1 2.39 5.77c0 4.5-3.66 8.1-8.19 8.1z"/></svg>
        Cotiza por WhatsApp
      </a>
      <span class="cta-micro"><strong>Respuesta en menos de 2 horas</strong> · Sin compromiso</span>
    </div>
  </div>
</section>

<!-- ===================== TRUST BAR ===================== -->
<div class="trust-bar">
  <div class="wrap">
    <span class="trust-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/></svg>
      Convenio directo On Vacation
    </span>
    <span class="trust-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
      PSE · Tarjeta · Cuotas
    </span>
    <span class="trust-item">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      Asesoría real, no bot
    </span>
  </div>
</div>

<!-- ===================== POR QUÉ FLYINN ===================== -->
<section class="section" id="por-que">
  <div class="wrap">
    <div class="section-head reveal">
      <span class="kicker">Por qué Flyinn</span>
      <h2 class="section-title">¿Por qué cotizar On Vacation <span class="accent">con Flyinn?</span></h2>
      <p class="section-sub">Mismo precio, mejor experiencia: asesoría real por WhatsApp que On Vacation directo no te da.</p>
    </div>
    <div class="why-grid">
      <div class="why-card reveal">
        <div class="icon-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-9 8.4A8.5 8.5 0 1 1 21 11.5z"/></svg></div>
        <h3>Asesor real por WhatsApp</h3>
        <p>No un formulario ni un call center. Un humano que conoce cada hotel y te recomienda el mejor para ti.</p>
      </div>
      <div class="why-card reveal">
        <div class="icon-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4M7.8 4.2 12 2l4.2 2.2L21 5v6c0 5-3.5 8.5-9 11-5.5-2.5-9-6-9-11V5l4.8-.8z"/></svg></div>
        <h3>Te ayudamos a elegir</h3>
        <p>¿Portofino o Las Américas? ¿San Luis o Isleño? Te explicamos las diferencias reales entre hoteles.</p>
      </div>
      <div class="why-card reveal">
        <div class="icon-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></div>
        <h3>Cuotas sin tarjeta</h3>
        <p>Paga con Addi hasta 24 meses o Sistecrédito hasta 8 cuotas. Sin tarjeta de crédito.</p>
      </div>
      <div class="why-card reveal">
        <div class="icon-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l18-5v12L3 14v-3z"/><path d="M11.6 16.8 3 14"/></svg></div>
        <h3>Acompañamiento completo</h3>
        <p>Antes, durante y después del viaje. Si algo sale mal, hay alguien real que responde.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===================== DESTINOS ===================== -->
<section class="section bg-soft" id="destinos">
  <div class="wrap">
    <div class="section-head reveal">
      <span class="kicker">Destinos disponibles</span>
      <h2 class="section-title">Elige tu <span class="accent">próxima escapada.</span></h2>
      <p class="section-sub">Toca un destino para ver hoteles, qué incluye y actividades.</p>
    </div>

    <div class="dest-grid" id="destGrid"><!-- generado por script-on-vacation.js --></div>
  </div>
</section>

<!-- ===================== MÁS DESTINOS (inventario real adicional) ===================== -->
<section class="section" id="mas-destinos">
  <div class="wrap">
    <div class="section-head reveal">
      <span class="kicker">También disponibles</span>
      <h2 class="section-title">Más destinos <span class="accent">On Vacation.</span></h2>
      <p class="section-sub">Estos también están en nuestro catálogo — cotiza el que más te llame la atención.</p>
    </div>
    <div class="mini-hotels-grid">
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/mx/cancun/hotel-dos-playas-faranda-cancun/hotel-dos-playas-faranda-cancun-1773184305793.webp')"></div>
        <div class="mini-hotel-body">
          <h3>Cancún</h3>
          <p>Caribe mexicano, playas de arena blanca.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_cancun" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/do/punta-cana/hotel-bahia-principe-explore-turquesa/hotel-bahia-principe-explore-turquesa-1781627609982.webp')"></div>
        <div class="mini-hotel-body">
          <h3>Punta Cana</h3>
          <p>Todo incluido en República Dominicana.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_puntacana" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/co/medellin/hotel-merlott-70/hotel-merlott-70-1777483894781.jpg')"></div>
        <div class="mini-hotel-body">
          <h3>Medellín</h3>
          <p>Ciudad de la eterna primavera.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_medellin" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/co/cali/hotel-plaza-las-americas-cali/hotel-plaza-las-americas-cali-1775757211568.jpg')"></div>
        <div class="mini-hotel-body">
          <h3>Cali</h3>
          <p>Capital de la salsa, clima cálido todo el año.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_cali" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/co/monteria/hotel-ciela-beach-club/hotel-ciela-beach-club-1775774347480.jpg')"></div>
        <div class="mini-hotel-body">
          <h3>Montería</h3>
          <p>Capital ganadera a orillas del río Sinú.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_monteria" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
      <div class="mini-hotel-card reveal">
        <div class="mini-hotel-img" style="background-image:url('https://flyinn.co/uploads/hotel/co/puerto-triunfo/hotel-montana-doradal/hotel-montana-doradal-1776205019116.jpg')"></div>
        <div class="mini-hotel-body">
          <h3>Puerto Triunfo / Doradal</h3>
          <p>Hacienda Nápoles y aventura en Río Claro.</p>
          <a class="mini-hotel-cta wa-cta" data-loc="mas_dest_puertotriunfo" href="#">Cotiza este destino <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== CÓMO FUNCIONA ===================== -->
<section class="section" id="como-funciona">
  <div class="wrap">
    <div class="section-head reveal" style="max-width:100%;text-align:center;margin-left:auto;margin-right:auto">
      <span class="kicker">Proceso</span>
      <h2 class="section-title">Así de fácil es viajar <span class="accent">con Flyinn.</span></h2>
    </div>
    <div class="steps-grid">
      <div class="step-card reveal">
        <div class="step-num">1</div>
        <h3>Cotiza por WhatsApp</h3>
        <p>Dinos destino, fechas y cuántos viajan. En menos de 2 horas te mandamos las mejores opciones con precio y fotos.</p>
      </div>
      <div class="step-card reveal">
        <div class="step-num">2</div>
        <h3>Elige y paga</h3>
        <p>Escoge la opción que más te guste. Paga en cuotas sin tarjeta con Addi, o con PSE, tarjeta o Nequi.</p>
      </div>
      <div class="step-card reveal">
        <div class="step-num">3</div>
        <h3>Viaja tranquilo</h3>
        <p>Recibe tu confirmación y acompañamiento. Si algo sale mal, estamos a un mensaje.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===================== TESTIMONIOS ===================== -->
<section class="section bg-soft" id="testimonios">
  <div class="wrap">
    <div class="section-head reveal">
      <span class="kicker">Lo que dicen</span>
      <h2 class="section-title">Viajeros que ya <span class="accent">se escaparon.</span></h2>
    </div>
    <div class="testi-grid">
      <div class="testi-card reveal">
        <div class="testi-stars">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
        </div>
        <p class="testi-quote">"[Reemplazar por cita real de un cliente que viajó a San Andrés con Flyinn.]"</p>
        <div class="testi-person">
          <div class="testi-avatar">[N]</div>
          <div><div class="testi-name">[Nombre del cliente]</div><div class="testi-dest">San Andrés</div></div>
        </div>
      </div>
      <div class="testi-card reveal">
        <div class="testi-stars">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
        </div>
        <p class="testi-quote">"[Reemplazar por cita real de un cliente que viajó a La Guajira con Flyinn.]"</p>
        <div class="testi-person">
          <div class="testi-avatar">[N]</div>
          <div><div class="testi-name">[Nombre del cliente]</div><div class="testi-dest">La Guajira</div></div>
        </div>
      </div>
      <div class="testi-card reveal">
        <div class="testi-stars">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
        </div>
        <p class="testi-quote">"[Reemplazar por cita real de un cliente que viajó al Eje Cafetero con Flyinn.]"</p>
        <div class="testi-person">
          <div class="testi-avatar">[N]</div>
          <div><div class="testi-name">[Nombre del cliente]</div><div class="testi-dest">Eje Cafetero</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== FAQ ===================== -->
<section class="section" id="faq">
  <div class="wrap">
    <div class="section-head reveal">
      <span class="kicker">Preguntas frecuentes</span>
      <h2 class="section-title">Todo lo que <span class="accent">quieres saber.</span></h2>
    </div>
    <div class="faq-list">
      <div class="faq-item reveal">
        <button class="faq-q">¿Qué incluye un paquete todo incluido On Vacation?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Depende del hotel y destino: puede incluir vuelo ida y vuelta, alojamiento, desayuno, almuerzo, cena, cócteles, seguro de viaje y actividades. Cada plan varía — te confirmamos exactamente qué incluye el tuyo al cotizar.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-q">¿Puedo pagar en cuotas sin tarjeta de crédito?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Sí. Con Addi puedes pagar hasta en 24 cuotas y con Sistecrédito hasta en 8 cuotas, ambos sin tarjeta de crédito. También aceptamos PSE, tarjeta débito/crédito y Nequi.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-q">¿Por qué cotizar con Flyinn en vez de directo con On Vacation?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Tenemos convenio directo con On Vacation. Te damos el mismo precio con asesoría personalizada por WhatsApp, te ayudamos a elegir el mejor hotel para tu tipo de viaje, y te acompañamos antes, durante y después.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-q">¿Los precios son iguales que en la página de On Vacation?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Manejamos tarifas oficiales con convenio directo. En algunos casos podemos ofrecer condiciones especiales según disponibilidad y temporada. Cotiza sin compromiso y compara.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-q">¿Cuánto tiempo tarda la cotización?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Menos de 2 horas en horario laboral. Te enviamos por WhatsApp las mejores opciones con precios, fotos del hotel y todo lo que incluye.</p></div>
      </div>
      <div class="faq-item reveal">
        <button class="faq-q">¿Flyinn es una agencia legal y registrada?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="faq-a"><p>Sí. Flyinn es una marca de Travel Group SAS, NIT 901.960.422-1, agencia de viajes registrada en Colombia, con convenio directo para la venta de paquetes On Vacation.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== CTA FINAL ===================== -->
<section class="cta-final">
  <div class="wrap">
    <h2>¿Listo para tus vacaciones?</h2>
    <p>Cotiza gratis y sin compromiso. Te respondemos en menos de 2 horas con las mejores opciones On Vacation.</p>
    <a class="btn-wa wa-cta" data-loc="cta_final" href="#" style="display:inline-flex">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.79.47 3.47 1.29 4.93L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.2h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.07.8.82-3-.19-.31a8.13 8.13 0 0 1-1.24-4.29c0-4.5 3.66-8.15 8.16-8.15 2.18 0 4.22.85 5.76 2.39a8.09 8.09 0 0 1 2.39 5.77c0 4.5-3.66 8.1-8.19 8.1z"/></svg>
      Cotiza por WhatsApp
    </a>
    <div class="pay-methods">
      <span class="pay-chip">PSE</span>
      <span class="pay-chip">Tarjeta crédito/débito</span>
      <span class="pay-chip">Addi</span>
      <span class="pay-chip">Sistecrédito</span>
      <span class="pay-chip">Nequi</span>
    </div>
  </div>
</section>

<!-- ===================== FOOTER ===================== -->
<footer>
  <div class="wrap">
    <img class="flogo" src="assets/logo-blanco.png" alt="Flyinn" />
    <p>
      Flyinn es una marca de Travel Group SAS · NIT 901.960.422-1 · Agencia de viajes registrada en Colombia · Convenio directo On Vacation.<br/>
      Destinos disponibles ahora: San Andrés, La Guajira, Eje Cafetero. Próximamente: Santa Marta, Amazonas, Girardot.<br/>
      Precios en pesos colombianos, por persona, base habitación doble. Sujetos a disponibilidad y cambio sin previo aviso.<br/>
      © 2026 Flyinn. Todos los derechos reservados.
    </p>
  </div>
</footer>

<!-- ===================== WHATSAPP FLOTANTE ===================== -->
<a class="wa-float wa-cta" data-loc="floating_button" href="#" aria-label="Cotizar por WhatsApp">
  <span class="ring"></span>
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.79.47 3.47 1.29 4.93L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.2h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.07.8.82-3-.19-.31a8.13 8.13 0 0 1-1.24-4.29c0-4.5 3.66-8.15 8.16-8.15 2.18 0 4.22.85 5.76 2.39a8.09 8.09 0 0 1 2.39 5.77c0 4.5-3.66 8.1-8.19 8.1z"/></svg>
</a>

<!-- ===================== MODAL DE DESTINO (contenido inyectado por JS) ===================== -->
<div class="dest-modal-overlay" id="destModalOverlay">
  <div class="dest-modal" id="destModal"></div>
</div>

<script src="script-on-vacation.js" defer></script>

</body>
</html>