Tul xxx Tul

Viewing: index.html

<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Simulación académica TCP: experiencia Avianca Cali a Cartagena.">
  <title>Avianca</title>
  <link rel="icon" type="image/jpeg" href="assets/img/logo.jpg">
  <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@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap"
    rel="stylesheet">
  <style>
    :root {
      --avianca-red: #e31937;
      --avianca-dark: #b11129;
      --premium-blue: #0f172a;
      --premium-gold: #d4af37;
      --slate-50: #f8fafc;
      --slate-100: #f1f5f9;
      --slate-200: #e2e8f0;
      --slate-300: #cbd5e1;
      --slate-400: #94a3b8;
      --slate-500: #64748b;
      --slate-600: #475569;
      --slate-700: #334155;
      --slate-800: #1e293b;
      --slate-900: #0f172a;
      --green: #16a34a;
      --whatsapp: #25d366;
      --radius: 24px;
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
      --shadow-md: 0 8px 22px rgba(15, 23, 42, .08);
      --shadow-xl: 0 24px 70px rgba(15, 23, 42, .18);
      --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-serif: "Playfair Display", Georgia, serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--slate-50);
      color: var(--slate-800);
      font-family: var(--font-sans);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: rgba(227, 25, 55, .2);
      color: var(--avianca-red);
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--slate-100);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--slate-300);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--slate-400);
    }

    img {
      display: block;
      max-width: 100%;
    }

    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
    }

    .container {
      width: min(100% - 48px, 1152px);
      margin: 0 auto;
    }

    .narrow {
      width: min(100% - 48px, 896px);
      margin: 0 auto;
    }

    .section {
      padding: 96px 0;
    }

    .section-white {
      background: #fff;
    }

    .section-soft {
      background: var(--slate-50);
    }

    .section-muted {
      background: var(--slate-100);
    }

    .section-dark {
      background: var(--slate-900);
      color: #fff;
    }

    .section-title {
      text-align: center;
      margin-bottom: 64px;
    }

    .section-title h2,
    .split-copy h2,
    .contact-info h2 {
      margin: 0 0 16px;
      color: var(--premium-blue);
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 2.55rem);
      line-height: 1.13;
    }

    .section-dark .section-title h2 {
      color: #fff;
    }

    .section-title p,
    .muted {
      color: var(--slate-500);
      line-height: 1.75;
    }

    .section-title p {
      max-width: 690px;
      margin: 0 auto;
    }

    .icon {
      width: 1.25rem;
      height: 1.25rem;
      stroke-width: 2;
      flex: 0 0 auto;
    }

    .icon-lg {
      width: 1.5rem;
      height: 1.5rem;
    }

    .icon-xl {
      width: 2rem;
      height: 2rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 24px;
      border-radius: 999px;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn-red {
      color: #fff;
      background: var(--avianca-red);
      box-shadow: 0 16px 32px rgba(227, 25, 55, .24);
    }

    .btn-red:hover {
      background: var(--avianca-dark);
    }

    .btn-blue {
      color: #fff;
      background: var(--premium-blue);
      box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
    }

    .btn-blue:hover {
      background: #1e293b;
    }

    .btn-white {
      color: var(--slate-700);
      background: #fff;
      border: 1px solid var(--slate-200);
      box-shadow: var(--shadow-sm);
    }

    .btn-white:hover {
      color: var(--avianca-red);
      border-color: var(--avianca-red);
    }

    .btn-glass {
      color: #fff;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .3);
      backdrop-filter: blur(12px);
    }

    .hidden {
      display: none !important;
    }

    .fade-up {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .fade-left {
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .fade-right {
      opacity: 0;
      transform: translateX(24px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .is-visible {
      opacity: 1;
      transform: none;
    }

    /* Premium Header */
    #mainHeader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 24px 0;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      background: transparent;
      opacity: 0;
      transform: translateY(-100%);
      pointer-events: none;
    }

    #mainHeader.scrolled {
      padding: 12px 0;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(227, 25, 55, 0.1);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    #mainHeader.scrolled .nav-logo {
      height: 40px;
    }

    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      height: 50px;
      width: 50px;
      object-fit: cover;
      border-radius: 50%;
      transition: height 0.3s ease, width 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

    #mainHeader.scrolled .nav-logo {
      height: 40px;
      width: 40px;
      filter: none;
      border-color: var(--avianca-red);
    }

    .nav-logo:hover {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 0 20px rgba(227, 25, 55, 0.5);
    }

    @keyframes logoPop {
      0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
      }

      70% {
        transform: scale(1.1) rotate(10deg);
        opacity: 1;
      }

      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    .nav-logo {
      animation: logoPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }

    .nav-links a {
      position: relative;
      font-size: 0.95rem;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: all 0.3s ease;
      padding: 8px 0;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--avianca-red);
      transition: width 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--avianca-red);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    #mainHeader.scrolled .nav-links a {
      color: var(--slate-800);
    }

    header.scrolled .nav-links a:hover {
      color: var(--avianca-red);
    }

    /* Professional CTA Style for Contact */
    .nav-links a.nav-cta {
      background: var(--avianca-red);
      color: #fff !important;
      padding: 10px 24px;
      border-radius: 99px;
      box-shadow: 0 4px 15px rgba(227, 25, 55, 0.3);
      transition: all 0.3s ease;
    }

    .nav-links a.nav-cta::after {
      display: none;
    }

    .nav-links a.nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(227, 25, 55, 0.5);
      background: #c1152f;
    }

    .mobile-menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 999px;
      background: #fff;
      color: var(--premium-blue);
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
      position: relative;
      z-index: 1102;
    }

    .mobile-menu-toggle span {
      position: relative;
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: background .2s ease;
    }

    .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform .25s ease, top .25s ease;
    }

    .mobile-menu-toggle span::before {
      top: -7px;
    }

    .mobile-menu-toggle span::after {
      top: 7px;
    }

    .mobile-menu-toggle.is-open span {
      background: transparent;
    }

    .mobile-menu-toggle.is-open span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .mobile-menu-toggle.is-open span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    .mobile-menu-panel,
    .mobile-menu-backdrop {
      display: none;
    }

    body.menu-open {
      overflow: hidden;
    }

    .hero {
      min-height: 600px;
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #fff;
      text-align: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--slate-900);
      z-index: 0;
    }

    .hero-slider {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.5s ease-in-out, transform 10s linear;
      transform: scale(1);
    }

    .slide.active {
      opacity: 1;
      transform: scale(1.1);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, .6);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 32px;
      padding: 7px 16px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .92);
      backdrop-filter: blur(12px);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .badge a {
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
      padding-bottom: 1px;
    }

    .badge a:hover {
      color: var(--avianca-red);
      border-bottom: 1px solid var(--avianca-red);
      text-shadow: 0 0 10px rgba(227, 25, 55, 0.3);
    }

    .pulse {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--avianca-red);
      animation: pulse 1.7s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.6);
        opacity: .55;
      }
    }

    .hero h1 {
      margin: 0 0 18px;
      font-family: var(--font-serif);
      font-size: clamp(2.7rem, 7vw, 4.8rem);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .gold-text {
      color: #fff;
      text-shadow: 0 0 10px rgba(227, 25, 55, 0.5), 0 0 20px rgba(227, 25, 55, 0.3);
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .hero-subtitle {
      max-width: 690px;
      margin: 0 0 48px;
      color: #e2e8f0;
      font-size: clamp(1.05rem, 2.6vw, 1.45rem);
      font-weight: 300;
      line-height: 1.65;
    }

    .route-card {
      display: flex;
      align-items: center;
      gap: clamp(24px, 5vw, 48px);
      margin-bottom: 48px;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 28px;
      background: rgba(15, 23, 42, .8);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(14px);
    }

    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--avianca-red);
      box-shadow: 0 0 20px rgba(227, 25, 55, 0.4);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .avatar:hover {
      transform: scale(1.1);
      box-shadow: 0 0 30px rgba(227, 25, 55, 0.6);
    }

    .route {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .route-code {
      margin: 0;
      color: transparent;
      background: linear-gradient(90deg, #f8fafc, #94a3b8);
      -webkit-background-clip: text;
      background-clip: text;
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
    }

    .route-city {
      margin: 6px 0 0;
      color: var(--slate-400);
      font-size: .88rem;
      font-weight: 700;
    }

    .route-plane {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--slate-400);
      font-size: .75rem;
    }

    .flight-line {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: clamp(140px, 28vw, 220px);
      height: 34px;
      margin-top: 8px;
    }

    .flight-line::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 99px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    .line {
      display: none;
    }

    .plane-red {
      display: none;
    }

    .plane-img {
      width: 46px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(227, 25, 55, 0.6));
      animation: planeTravel 8s ease-in-out infinite;
      z-index: 2;
      position: absolute;
      left: 50%;
      margin-left: -23px;
      /* Half of width */
    }

    @keyframes planeTravel {
      0% {
        transform: translateX(-85px) scaleX(1);
      }

      45% {
        transform: translateX(85px) scaleX(1);
      }

      50% {
        transform: translateX(85px) scaleX(-1);
      }

      95% {
        transform: translateX(-85px) scaleX(-1);
      }

      100% {
        transform: translateX(-85px) scaleX(1);
      }
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
    }

    .info-card {
      padding: 32px;
      border: 1px solid var(--slate-100);
      border-radius: 20px;
      background: var(--slate-50);
      box-shadow: var(--shadow-sm);
      transition: box-shadow .2s ease, transform .2s ease;
    }

    .info-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .icon-box {
      display: inline-flex;
      margin-bottom: 24px;
      padding: 16px;
      border-radius: 16px;
      background: #fff;
      color: var(--avianca-red);
      box-shadow: var(--shadow-sm);
      transition: transform .2s ease;
    }

    .info-card:hover .icon-box {
      transform: scale(1.08);
    }

    .info-card h3 {
      margin: 0 0 12px;
      font-size: 1.2rem;
      color: var(--slate-800);
    }

    .info-card p {
      margin: 0;
      color: var(--slate-600);
      line-height: 1.7;
      white-space: pre-line;
    }

    .section-head-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 48px;
    }

    .section-head-row h2 {
      margin: 0 0 14px;
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 2.55rem);
      color: var(--premium-blue);
    }

    .section-head-row p {
      margin: 0;
      color: var(--slate-500);
    }

    .ticket {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      max-width: 820px;
      margin: 0 auto;
      overflow: visible;
      border: 1px solid rgba(226, 232, 240, .92);
      border-radius: 16px;
      background:
        radial-gradient(circle at calc(100% - 220px) 0, transparent 32px, #fff 33px) top center / 100% 50% no-repeat,
        radial-gradient(circle at calc(100% - 220px) 100%, transparent 32px, #fff 33px) bottom center / 100% 50% no-repeat;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    }

    .ticket::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 220px;
      border-left: 1px dashed var(--slate-200);
      z-index: 2;
    }

    .ticket::after {
      content: "";
      position: absolute;
      top: -1px;
      bottom: -1px;
      right: 220px;
      width: 64px;
      pointer-events: none;
      transform: translateX(50%);
      background:
        radial-gradient(circle at 50% 0, var(--slate-50) 0 32px, transparent 33px),
        radial-gradient(circle at 50% 100%, var(--slate-50) 0 32px, transparent 33px);
      z-index: 1;
    }

    .ticket-main {
      position: relative;
      flex: 1;
      min-height: 400px;
      padding: 24px 22px;
    }

    .brand-row,
    .between {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--avianca-red);
      color: #fff;
    }

    .brand h3 {
      margin: 0;
      color: var(--avianca-red);
      font-size: 2.25rem;
      font-weight: 900;
      letter-spacing: .03em;
      line-height: 1;
    }

    .label {
      display: block;
      margin-bottom: 5px;
      color: var(--slate-500);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .ticket-passenger {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 40px 0;
    }

    .ticket-passenger img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border: 1px solid var(--slate-200);
      border-radius: 999px;
    }

    .ticket-logo-img {
      height: 32px;
      width: auto;
      margin-bottom: 6px;
      display: block;
    }

    .stub-logo-img {
      height: 30px;
      width: auto;
      margin-bottom: 10px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .ticket-brand-title {
      margin: 0 0 6px;
      color: var(--avianca-red);
      font-size: clamp(1.9rem, 4vw, 2.45rem);
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
    }

    .ticket-brand-subtitle {
      margin: 0;
      color: var(--slate-600);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .ticket-pnr {
      text-align: center;
      margin-right: 10px;
    }

    .ticket-pnr strong {
      display: block;
      color: #002b5c;
      font-size: 1.1rem;
      letter-spacing: .05em;
    }

    .ticket-route-panel {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 1.5fr;
      gap: 16px;
      align-items: center;
      margin: 16px 0;
      padding: 16px;
      border-radius: 12px;
      background: #f8fafc;
    }

    .ticket-passenger-block strong {
      display: block;
      color: #001a3d;
      font-size: 1.05rem;
      line-height: 1.15;
    }

    .ticket-route-codes {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      text-align: center;
    }

    .ticket-airport strong {
      display: block;
      color: var(--slate-800);
      font-size: 1.8rem;
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1;
    }

    .ticket-airport span {
      display: block;
      margin-top: 2px;
      color: var(--slate-600);
      font-size: 0.75rem;
      text-transform: uppercase;
    }

    .ticket-plane-icon {
      color: var(--avianca-red);
      transform: rotate(-38deg);
    }

    .ticket-details {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 22px;
      align-items: end;
      margin-top: 24px;
    }

    .ticket-detail strong {
      display: block;
      overflow: hidden;
      color: #001a3d;
      font-size: 0.95rem;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ticket-status-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .ticket-status-item {
      padding: 12px 14px;
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
    }

    .ticket-status-item strong {
      display: block;
      color: #001a3d;
      font-size: .9rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .ticket-flight-strip {
      display: grid;
      grid-template-columns: 1.05fr .9fr .9fr .85fr;
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--slate-200);
      border-radius: 14px;
      background: #fff;
    }

    .ticket-flight-strip div {
      padding: 8px 10px;
      border-right: 1px solid var(--slate-200);
    }

    .ticket-flight-strip div:last-child {
      border-right: 0;
    }

    .ticket-flight-strip strong {
      display: block;
      color: #001a3d;
      font-size: 0.8rem;
      font-weight: 900;
    }

    .ticket-note-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }

    .ticket-warning,
    .ticket-contact {
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 10px;
      line-height: 1.35;
      font-size: 0.65rem;
    }

    .ticket-warning {
      border: 1px solid rgba(227, 25, 55, .22);
      background: #fff1f2;
      color: #9f1239;
      font-weight: 800;
    }

    .ticket-contact {
      border: 1px solid var(--slate-200);
      background: #f8fafc;
      color: var(--slate-600);
    }

    .ticket-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 32px;
    }

    .ticket-grid strong {
      display: block;
      font-size: 1.55rem;
      color: var(--slate-800);
    }

    .ticket-grid span,
    .small-muted {
      color: var(--slate-500);
      font-size: .9rem;
    }

    .ticket-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px;
      border-radius: 14px;
      background: var(--slate-50);
    }

    .ticket-stub {
      position: relative;
      width: auto;
      min-height: 400px;
      padding: 24px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      background: rgba(255, 255, 255, .7);
      color: var(--slate-800);
      text-align: center;
      z-index: 3;
    }

    .ticket-stub-brand {
      margin-bottom: 36px;
    }

    .ticket-stub-brand strong {
      display: block;
      color: var(--avianca-red);
      font-size: 1.75rem;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
    }

    .ticket-stub-brand span {
      display: block;
      margin-top: 10px;
      color: var(--slate-600);
      font-size: .88rem;
    }

    .qr-box {
      display: inline-flex;
      padding: 12px;
      border: 1px solid var(--slate-200);
      border-radius: 10px;
      background: #fff;
      color: #000;
      margin-bottom: 36px;
      box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
    }

    .ticket-stub-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      margin-bottom: 14px;
    }

    .ticket-mini {
      padding: 12px 10px;
      border: 1px solid var(--slate-200);
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
    }

    .ticket-mini strong {
      display: block;
      color: #001a3d;
      font-size: 1.2rem;
      font-weight: 900;
    }

    .ticket-stub-list {
      display: grid;
      gap: 8px;
      width: 100%;
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--slate-200);
      text-align: left;
    }

    .ticket-stub-list p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--slate-600);
      font-size: 0.7rem;
    }

    .ticket-stub-list strong {
      color: #001a3d;
      font-weight: 900;
      text-align: right;
      font-size: 0.72rem;
    }

    .stub-note {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .2);
      color: var(--slate-400);
      font-size: .66rem;
      text-align: center;
    }

    .checkin-panel {
      position: relative;
      overflow: hidden;
      padding: 32px 24px;
      border: 1px solid var(--slate-100);
      border-radius: 24px;
      background: var(--slate-50);
      box-shadow: var(--shadow-sm);
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
    }

    .status-view {
      display: none;
      flex-direction: column;
      align-items: center;
      animation: appear .35s ease;
    }

    .status-view.active {
      display: flex;
    }

    @keyframes appear {
      from {
        opacity: 0;
        transform: scale(.97);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .status-icon {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      border-radius: 999px;
      background: var(--slate-200);
      color: var(--slate-400);
    }

    .status-icon.success {
      background: #dcfce7;
      color: var(--green);
    }

    .status-view h3 {
      margin: 0 0 8px;
      font-size: 1.25rem;
      color: var(--slate-800);
    }

    .status-view p {
      max-width: 400px;
      margin: 0 0 24px;
      color: var(--slate-600);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .spin {
      animation: spin 1s linear infinite;
      color: var(--avianca-red);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .boarding-wrap {
      display: flex;
      justify-content: center;
      margin-top: 64px;
    }

    .boarding-pass {
      position: relative;
      display: flex;
      flex-direction: column;
      width: min(100%, 380px);
      overflow: hidden;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }

    .boarding-header {
      background: var(--avianca-red);
      color: #fff;
      padding: 24px;
      position: relative;
    }

    .boarding-header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .boarding-header-top span {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .boarding-logo-white {
      height: 20px;
      filter: brightness(0) invert(1);
    }

    .boarding-route-display {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .route-node strong {
      display: block;
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .route-node span {
      display: block;
      font-size: 0.85rem;
      opacity: 0.9;
      margin-top: 4px;
    }

    .route-plane-icon {
      width: 36px;
      height: 36px;
      opacity: 0.8;
    }

    .boarding-body {
      padding: 24px;
    }

    .boarding-passenger-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    .boarding-passenger-photo {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #f1f5f9;
    }

    .passenger-info-text .label {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--slate-400);
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .passenger-info-text strong {
      font-size: 1.15rem;
      color: var(--slate-900);
      font-weight: 900;
    }

    .boarding-info-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 18px 24px;
      margin-bottom: 24px;
    }

    .info-item .label {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--slate-400);
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .info-item strong {
      font-size: 1rem;
      color: var(--slate-900);
      font-weight: 800;
    }

    .boarding-qr-card {
      background: #f8fafc;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .qr-details-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .qr-detail-item .label {
      display: block;
      font-size: 0.65rem;
      font-weight: 700;
      color: var(--slate-400);
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .qr-detail-item strong {
      font-size: 1.35rem;
      color: var(--slate-900);
      font-weight: 900;
    }

    .qr-detail-item strong.red-text {
      color: var(--avianca-red);
    }

    .boarding-footer-text {
      padding: 20px;
      text-align: center;
      color: var(--slate-400);
      font-size: 0.68rem;
      line-height: 1.4;
      border-top: 1px solid var(--slate-50);
    }

    .seat-box {
      width: 100%;
      margin: 24px 0;
      padding: 14px;
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      background: #fff;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .seat-box strong {
      color: var(--premium-blue);
      font-size: 2rem;
      font-weight: 900;
    }

    .timeline {
      position: relative;
      display: grid;
      gap: 32px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 0;
      top: 24px;
      bottom: 24px;
      width: 2px;
      background: var(--slate-200);
    }

    /* New Summary Cards Styles */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin: 48px auto 0;
      max-width: 1000px;
    }

    .summary-card {
      background: #f8fafc;
      border-radius: 20px;
      padding: 28px;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .summary-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(15, 23, 42, 0.06);
    }

    .summary-card.dark {
      background: #021a44;
      color: #fff;
    }

    .card-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .card-icon-box i {
      width: 1.25rem;
      height: 1.25rem;
    }

    .summary-card h3 {
      font-size: 1.15rem;
      font-weight: 800;
      margin-bottom: 16px;
      color: var(--premium-blue);
    }

    .summary-card.dark h3 {
      color: #fff;
    }

    .summary-card .label-small {
      display: block;
      font-size: 0.6rem;
      font-weight: 800;
      color: var(--slate-400);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }

    .summary-card .value-large {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--slate-800);
      display: block;
      margin-bottom: 2px;
    }

    .summary-card .value-sub {
      font-size: 0.78rem;
      color: var(--slate-500);
      margin-bottom: 12px;
      line-height: 1.4;
    }

    .airline-tag {
      display: inline-block;
      color: var(--avianca-red);
      font-size: 0.75rem;
      font-weight: 800;
      padding: 2px 0;
      border-left: 2px solid var(--avianca-red);
      padding-left: 10px;
      margin: 6px 0;
    }

    .status-badge {
      display: inline-block;
      padding: 3px 10px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 0.7rem;
      font-weight: 700;
      border-radius: 6px;
      margin-top: 6px;
    }

    .services-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.9);
    }

    .services-list li i {
      color: #fcd34d;
      font-size: 1rem;
    }

    .dot {
      position: absolute;
      top: 32px;
      left: -25px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--slate-300);
    }

    .dot::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #fff;
    }

    .day-card.highlight .dot {
      background: var(--avianca-red);
    }

    .day-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      padding: 0 0 16px 16px;
      border-bottom: 1px solid var(--slate-100);
    }

    .day-head .icon-wrap {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--slate-100);
      color: var(--slate-600);
    }

    .day-card.highlight .icon-wrap {
      background: #fff1f2;
      color: var(--avianca-red);
    }

    .day-head h3 {
      margin: 0;
      font-size: 1.05rem;
    }

    .day-head p {
      margin: 4px 0 0;
      color: var(--slate-500);
      font-size: .9rem;
      font-weight: 700;
    }

    .event-list {
      display: grid;
      gap: 18px;
      padding-left: 16px;
    }

    .event {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      color: var(--slate-700);
      line-height: 1.65;
    }

    .event-icon {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      margin-top: 2px;
      border-radius: 8px;
      background: var(--slate-50);
      color: var(--slate-400);
    }

    .event-time {
      color: var(--slate-400);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .itinerary-board {
      max-width: 1180px;
      margin: 0 auto;
    }

    .itinerary-hero-card {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 28px;
      align-items: center;
      margin-bottom: 28px;
      padding: 32px;
      border: 1px solid rgba(226, 232, 240, .9);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(227, 25, 55, .08), transparent 36%),
        linear-gradient(135deg, #ffffff, #f8fafc);
      box-shadow: 0 22px 55px rgba(15, 23, 42, .08);
    }

    .itinerary-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      color: var(--avianca-red);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .itinerary-hero-card h3 {
      margin: 0 0 12px;
      color: var(--premium-blue);
      font-family: var(--font-serif);
      font-size: clamp(2.1rem, 5vw, 3.5rem);
      line-height: 1.03;
    }

    .itinerary-hero-card p {
      margin: 0;
      color: var(--slate-600);
      line-height: 1.65;
    }

    .route-visual {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      align-items: center;
      padding: 22px;
      border-radius: 22px;
      background: var(--premium-blue);
      color: #fff;
      overflow: hidden;
    }

    .route-visual::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(255, 255, 255, .18);
      border-radius: 18px;
      pointer-events: none;
    }

    .route-city-card {
      position: relative;
      z-index: 1;
      padding: 16px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .08);
    }

    .route-city-card strong {
      display: block;
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
    }

    .route-city-card span {
      display: block;
      margin-top: 6px;
      color: var(--slate-300);
      font-size: .85rem;
      font-weight: 700;
    }

    .route-visual .plane-hop {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      background: var(--avianca-red);
      box-shadow: 0 12px 24px rgba(227, 25, 55, .35);
    }

    .itinerary-day-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      margin-bottom: 24px;
    }

    .itinerary-day-card {
      overflow: hidden;
      border: 1px solid var(--slate-200);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
    }

    .day-ribbon {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 22px;
      color: #fff;
      background: var(--avianca-red);
    }

    .day-ribbon.gold {
      background: #eab308;
    }

    .day-ribbon.green {
      background: #16a34a;
    }

    .day-number {
      display: grid;
      place-items: center;
      min-width: 58px;
      height: 58px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .18);
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
    }

    .day-ribbon h3 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .day-ribbon p {
      margin: 3px 0 0;
      opacity: .9;
      font-size: .82rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .pro-event-list {
      display: grid;
      gap: 0;
      padding: 8px 22px 22px;
    }

    .pro-event {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid var(--slate-100);
      min-width: 0;
    }

    .pro-event:last-child {
      border-bottom: 0;
    }

    .pro-time {
      color: var(--avianca-red);
      font-size: .95rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .pro-event-icon {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      border-radius: 12px;
      background: #fff1f2;
      color: var(--avianca-red);
    }

    .pro-event>div {
      min-width: 0;
    }

    .pro-event h4 {
      margin: 0 0 6px;
      color: #001a3d;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .pro-event p {
      margin: 0;
      color: var(--slate-600);
      font-size: .9rem;
      line-height: 1.55;
      overflow-wrap: normal;
    }

    .day-27-card {
      border-color: rgba(22, 163, 74, .28);
      box-shadow: 0 24px 64px rgba(22, 163, 74, .12);
    }

    .day-27-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 24px;
      padding: 24px;
    }

    .flight-timeline {
      position: relative;
      display: grid;
      gap: 0;
    }

    .flight-timeline::before {
      content: "";
      position: absolute;
      top: 22px;
      bottom: 22px;
      left: 117px;
      border-left: 2px dashed rgba(22, 163, 74, .35);
    }

    .flight-step {
      position: relative;
      display: grid;
      grid-template-columns: 88px 40px 1fr;
      gap: 14px;
      padding: 12px 0;
      z-index: 1;
    }

    .flight-step time {
      padding-top: 8px;
      color: #15803d;
      font-weight: 900;
      white-space: nowrap;
    }

    .flight-icon {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 2px solid #dcfce7;
      border-radius: 999px;
      background: #fff;
      color: #16a34a;
      box-shadow: 0 6px 16px rgba(22, 163, 74, .12);
    }

    .flight-step h4 {
      margin: 0 0 4px;
      color: #001a3d;
      font-size: .98rem;
      font-weight: 900;
    }

    .flight-step p {
      margin: 0;
      color: var(--slate-600);
      font-size: .88rem;
      line-height: 1.45;
    }

    .security-callout {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      margin: 8px 0 8px 102px;
      padding: 16px;
      border: 1px solid #bbf7d0;
      border-radius: 18px;
      background: #f0fdf4;
      color: #14532d;
    }

    .security-callout strong {
      display: block;
      margin-bottom: 4px;
      font-size: .9rem;
      text-transform: uppercase;
    }

    .itinerary-side-panel {
      display: grid;
      align-content: start;
      gap: 16px;
    }

    .reminder-card,
    .included-card {
      padding: 20px;
      border-radius: 20px;
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
    }

    .reminder-card h4,
    .included-card h4 {
      margin: 0 0 14px;
      color: var(--premium-blue);
      font-size: 1rem;
      font-weight: 900;
    }

    .reminder-card ul,
    .included-card ul {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .reminder-card li,
    .included-card li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--slate-700);
      font-size: .88rem;
      line-height: 1.45;
    }

    .airport-flow-card {
      overflow: hidden;
      border: 1px solid rgba(124, 58, 237, .2);
      border-radius: 24px;
      background: linear-gradient(180deg, #fff 0%, #faf5ff 100%);
      box-shadow: 0 18px 48px rgba(88, 28, 135, .08);
    }

    .airport-ribbon {
      padding: 22px;
      color: #581c87;
      background: linear-gradient(135deg, #f3e8ff, #fff);
      text-align: center;
      border-bottom: 1px solid rgba(124, 58, 237, .16);
    }

    .airport-ribbon h3 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .airport-flow {
      display: grid;
      gap: 0;
      padding: 20px 22px 24px;
    }

    .airport-step {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      position: relative;
      padding: 16px 0;
      border-bottom: 1px solid rgba(124, 58, 237, .12);
    }

    .airport-step:last-child {
      border-bottom: 0;
    }

    .airport-step::before {
      content: "";
      position: absolute;
      left: 20px;
      top: 56px;
      bottom: -12px;
      border-left: 2px dashed rgba(124, 58, 237, .28);
    }

    .airport-step:last-child::before {
      display: none;
    }

    .airport-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #7c3aed;
      color: #fff;
      box-shadow: 0 10px 22px rgba(124, 58, 237, .22);
      z-index: 1;
    }

    .airport-step h4 {
      margin: 0 0 6px;
      color: #3b0764;
      font-size: 1rem;
      font-weight: 900;
    }

    .airport-step p {
      margin: 0;
      color: var(--slate-600);
      font-size: .9rem;
      line-height: 1.5;
    }

    .continuation-note {
      margin-top: 24px;
      padding: 18px 22px;
      border: 1px dashed var(--slate-300);
      border-radius: 18px;
      background: #fff;
      color: var(--slate-600);
      font-size: .9rem;
      line-height: 1.6;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
    }

    .hotel-image {
      position: relative;
      min-height: 600px;
      overflow: hidden;
      border-radius: 28px;
      box-shadow: var(--shadow-xl);
    }

    .hotel-image img {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      object-fit: cover;
    }

    .image-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      padding: 28px;
      background: linear-gradient(to top, rgba(15, 23, 42, .68), transparent);
      color: #fff;
    }

    .stars {
      color: #f59e0b;
      font-size: 1.25rem;
      letter-spacing: .05em;
    }

    .image-overlay h3 {
      margin: 8px 0 6px;
      font-family: var(--font-serif);
      font-size: 2rem;
    }

    .image-overlay p {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #e2e8f0;
    }

    .split-copy p {
      color: var(--slate-600);
      font-size: 1.05rem;
      line-height: 1.8;
    }

    .eyebrow {
      color: var(--slate-800);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .check-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 0;
      margin: 18px 0 32px;
      list-style: none;
    }

    .check-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--slate-700);
    }

    .check-dot {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #dcfce7;
      color: var(--green);
    }

    .amenities {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      padding-top: 32px;
      border-top: 1px solid var(--slate-100);
    }

    .amenity {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px;
      color: var(--slate-400);
      transition: color .2s ease;
    }

    .amenity:hover {
      color: var(--avianca-red);
    }

    .amenity span {
      font-size: .75rem;
      font-weight: 700;
    }

    .package-layout {
      display: block;
      max-width: 1080px;
      margin: 0 auto;
    }

    .panel {
      border: 1px solid var(--slate-200);
      border-radius: 20px;
      background: #fff;
      box-shadow: var(--shadow-sm);
    }

    .filters {
      padding: 24px;
    }

    .filters-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--slate-100);
      color: var(--avianca-red);
    }

    .filters-head h3 {
      margin: 0;
      color: var(--slate-800);
      font-size: 1rem;
    }

    .field {
      display: grid;
      gap: 8px;
      margin-bottom: 20px;
    }

    label {
      color: var(--slate-600);
      font-size: .9rem;
      font-weight: 700;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--slate-200);
      border-radius: 14px;
      background: #fff;
      color: var(--slate-700);
      outline: none;
      padding: 13px 16px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    select {
      background-color: var(--slate-50);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--avianca-red);
      box-shadow: 0 0 0 4px rgba(227, 25, 55, .12);
    }

    textarea {
      resize: vertical;
      min-height: 122px;
    }

    .package-card {
      display: block;
      overflow: hidden;
      border-radius: 28px;
      background: #fff;
      border: 1px solid rgba(227, 25, 55, .18);
      box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
      transition: transform 0.3s ease;
      position: relative;
    }

    .package-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 6px;
      background: linear-gradient(90deg, var(--avianca-red), #facc15);
    }

    .package-card:hover {
      transform: translateY(-8px);
    }

    .package-image-side {
      position: relative;
      width: 40%;
      min-height: 430px;
      background: var(--slate-200);
    }

    .package-image-side img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .recommended-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background: #facc15;
      color: #001a3d;
      padding: 9px 18px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
    }

    .package-content-side {
      flex: 1;
      padding: 46px;
      display: flex;
      flex-direction: column;
    }

    .package-content-side h3 {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 2.65rem);
      color: var(--premium-blue);
      margin: 0 0 16px;
      line-height: 1.1;
    }

    .package-content-side p {
      color: var(--slate-500);
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 22px;
      max-width: 720px;
    }

    .package-route-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      color: var(--avianca-red);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .package-route-line::before,
    .package-route-line::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--slate-200);
    }

    .package-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 26px;
    }

    .tag-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: #f1f5f9;
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      color: var(--slate-600);
      font-size: 0.85rem;
      font-weight: 700;
    }

    .tag-item i {
      width: 16px;
      height: 16px;
    }

    .package-footer-row {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-top: 24px;
      border-top: 1px solid var(--slate-100);
      gap: 24px;
    }

    .gift-info .gift-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--slate-400);
      letter-spacing: 0.08em;
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    .gift-value {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--slate-900);
      font-size: clamp(1.45rem, 3vw, 2rem);
      font-weight: 900;
      line-height: 1.1;
    }

    .gift-value i {
      color: var(--avianca-red);
    }

    .gift-note {
      margin: 10px 0 0;
      color: var(--slate-500);
      font-size: .88rem;
      line-height: 1.45;
    }

    .package-inclusions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px 18px;
      margin: 0 0 28px;
      padding: 0;
      list-style: none;
    }

    .package-inclusions li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--slate-700);
      font-size: .9rem;
      line-height: 1.45;
    }

    .package-inclusions i {
      color: var(--avianca-red);
      width: 18px;
      height: 18px;
      margin-top: 2px;
      flex: 0 0 auto;
    }

    .selected-badge-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 170px;
      padding: 15px 24px;
      border-radius: 14px;
      background: var(--avianca-red);
      color: #fff;
      box-shadow: 0 12px 28px rgba(227, 25, 55, .24);
      font-size: 1rem;
      font-weight: 700;
    }

    .package-image-credit {
      position: absolute;
      right: 18px;
      bottom: 18px;
      left: 18px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(15, 23, 42, .72);
      color: #fff;
      backdrop-filter: blur(10px);
    }

    .package-image-credit strong {
      display: block;
      font-size: .95rem;
      font-weight: 900;
    }

    .package-image-credit span {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .78);
      font-size: .78rem;
    }

    .loader-cover {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(6px);
    }

    .loader-cover.active {
      display: flex;
    }

    .loader {
      width: 34px;
      height: 34px;
      border: 4px solid rgba(227, 25, 55, .18);
      border-top-color: var(--avianca-red);
      border-radius: 999px;
      animation: spin 1s linear infinite;
    }

    .history-accent {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      color: var(--avianca-red);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .history-accent::before {
      content: "";
      width: 40px;
      height: 4px;
      border-radius: 999px;
      background: var(--avianca-red);
    }

    .note {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-top: 30px;
      padding: 16px;
      border-left: 4px solid #f59e0b;
      border-radius: 0 12px 12px 0;
      background: var(--slate-50);
      color: var(--slate-500);
      font-size: .9rem;
      font-style: italic;
      line-height: 1.65;
    }

    .history-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 28px;
    }

    .history-fact {
      padding: 16px;
      border: 1px solid var(--slate-200);
      border-radius: 16px;
      background: var(--slate-50);
    }

    .history-fact strong {
      display: block;
      color: var(--avianca-red);
      font-size: 1.35rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
    }

    .history-fact span {
      display: block;
      color: var(--slate-600);
      font-size: .82rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .plane-frame {
      position: relative;
    }

    .plane-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 48px;
      background: var(--avianca-red);
      opacity: .1;
      transform: rotate(3deg) scale(1.02);
    }

    .plane-photo {
      position: relative;
      overflow: hidden;
      border-radius: 48px;
      box-shadow: var(--shadow-xl);
    }

    .plane-photo img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    .plane-photo .word {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      padding: 32px;
      background: linear-gradient(to top, rgba(15, 23, 42, .82), transparent 58%);
      color: #fff;
      font-size: 2.4rem;
      font-weight: 900;
      font-style: italic;
      letter-spacing: -.05em;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      min-height: 330px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 22px;
      background: var(--slate-800);
      box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    }

    .gallery-item.wide {
      grid-column: span 2;
    }

    .gallery-item img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.1);
    }

    .gallery-caption {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 28px;
      background: linear-gradient(to top, rgba(2, 6, 23, .88), rgba(2, 6, 23, .08) 65%, transparent);
      opacity: 1;
      transition: background .25s ease;
    }

    .gallery-caption h4 {
      width: 100%;
      margin: 0 0 8px;
      color: #fff;
      font-family: var(--font-serif);
      font-size: 1.55rem;
      line-height: 1.1;
    }

    .gallery-caption p {
      width: 100%;
      margin: 0;
      color: rgba(255, 255, 255, .78);
      font-size: .92rem;
      line-height: 1.5;
    }

    .gallery-label {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 1;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .88);
      color: var(--premium-blue);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 64px;
    }

    .contact-info h2 {
      font-size: 2rem;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-top: 24px;
    }

    .contact-icon {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: var(--slate-50);
      color: var(--avianca-red);
    }

    .contact-item strong {
      display: block;
      margin-bottom: 5px;
      color: var(--slate-800);
      font-size: .82rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .contact-item p {
      margin: 0;
      color: var(--slate-600);
      line-height: 1.6;
    }

    .whatsapp-box {
      margin-top: 48px;
      padding: 24px;
      border-radius: 20px;
      background: var(--slate-100);
    }

    .whatsapp-box h4 {
      margin: 0 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--slate-800);
    }

    .whatsapp-box p {
      margin: 0 0 16px;
      color: var(--slate-600);
      font-size: .9rem;
      line-height: 1.6;
    }

    .btn-whatsapp {
      width: 100%;
      border-radius: 14px;
      background: var(--whatsapp);
      color: #fff;
    }

    .form-panel {
      padding: clamp(32px, 5vw, 48px);
      border: 1px solid var(--slate-100);
      border-radius: 28px;
      background: var(--slate-50);
    }

    .form-panel h3 {
      margin: 0 0 24px;
      color: var(--slate-800);
      font-size: 1.5rem;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .form-actions {
      margin-top: 24px;
    }

    .form-actions .btn {
      width: 100%;
      border-radius: 14px;
    }

    .success-message {
      display: none;
      padding: 48px 24px;
      border-radius: 20px;
      background: #dcfce7;
      color: #166534;
      text-align: center;
    }

    .success-message.active {
      display: block;
    }

    .success-icon {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      border-radius: 999px;
      background: #fff;
      color: var(--green);
      box-shadow: var(--shadow-sm);
    }

    .form-note {
      margin: 24px 0 0;
      color: var(--slate-400);
      font-size: .75rem;
      text-align: center;
    }

    footer {
      padding: 64px 0 32px;
      border-top: 1px solid #1e293b;
      background: var(--slate-900);
      color: #fff;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 32px;
      padding-bottom: 48px;
      border-bottom: 1px solid #1e293b;
    }

    .footer-brand {
      margin: 0 0 16px;
      color: #fff;
      font-size: 1.5rem;
      font-weight: 900;
      font-style: italic;
      letter-spacing: -.04em;
    }

    .footer-brand span {
      display: inline-block;
      margin-left: 8px;
      color: var(--slate-400);
      font-size: .85rem;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 0;
    }

    .footer-grid p {
      max-width: 430px;
      margin: 0 0 24px;
      color: var(--slate-400);
      line-height: 1.7;
    }

    .footer-badges {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      background: #1e293b;
      color: var(--slate-500);
      font-size: .75rem;
    }

    .footer-grid h4 {
      margin: 0 0 16px;
    }

    .footer-grid ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .footer-grid a {
      color: var(--slate-400);
      transition: color .2s ease;
    }

    .footer-grid a:hover {
      color: #fff;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      color: var(--slate-500);
      font-size: .76rem;
    }

    .aircan-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
      padding: 7px 13px;
      border: 1px solid rgba(59, 130, 246, .42);
      border-radius: 999px;
      background: linear-gradient(135deg, #2563eb, #38bdf8);
      color: #fff;
      font-weight: 900;
      letter-spacing: .02em;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .aircan-link:hover {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(37, 99, 235, .36);
    }

    @media (max-width: 980px) {

      #mainHeader {
        padding: 12px 0;
      }

      #mainHeader.scrolled {
        padding: 12px 0;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(226, 232, 240, .85);
      }

      #mainHeader .nav-logo,
      #mainHeader.scrolled .nav-logo {
        width: 42px;
        height: 42px;
        border-color: var(--avianca-red);
        filter: none;
      }

      .nav-links {
        display: none;
      }

      .mobile-menu-toggle {
        display: inline-flex;
      }

      .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1098;
        display: block;
        background: rgba(2, 6, 23, .56);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
      }

      .mobile-menu-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .mobile-menu-panel {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        z-index: 1099;
        display: block;
        padding: 18px;
        border: 1px solid rgba(226, 232, 240, .92);
        border-radius: 24px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
        transform: translateY(-12px) scale(.98);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
      }

      .mobile-menu-panel.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 4px 16px;
        border-bottom: 1px solid var(--slate-100);
      }

      .mobile-menu-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--premium-blue);
        font-weight: 900;
      }

      .mobile-menu-brand img {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        object-fit: cover;
      }

      .mobile-menu-panel nav {
        display: grid;
        gap: 8px;
        padding-top: 14px;
      }

      .mobile-menu-panel nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 14px;
        border-radius: 16px;
        color: var(--slate-800);
        font-weight: 800;
        letter-spacing: .01em;
        transition: background .2s ease, color .2s ease, transform .2s ease;
      }

      .mobile-menu-panel nav a:hover {
        background: var(--slate-50);
        color: var(--avianca-red);
        transform: translateX(2px);
      }

      .mobile-menu-panel nav a.mobile-cta {
        justify-content: center;
        margin-top: 6px;
        background: var(--avianca-red);
        color: #fff;
        box-shadow: 0 12px 28px rgba(227, 25, 55, .24);
      }

      .mobile-menu-panel nav a.mobile-cta:hover {
        background: var(--avianca-dark);
        color: #fff;
        transform: none;
      }

      .summary-grid,
      .ticket-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .split,
      .contact-layout,
      .itinerary-hero-card,
      .day-27-body {
        grid-template-columns: 1fr;
      }

      .itinerary-day-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .airport-flow-card {
        order: 2;
      }

      .flight-timeline::before {
        left: 107px;
      }

      .security-callout {
        margin-left: 92px;
      }

      .hotel-image {
        min-height: 420px;
      }

      .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, 220px);
      }

      .ticket {
        grid-template-columns: 1fr;
        background: #fff;
      }

      .ticket::before {
        top: auto;
        right: 0;
        bottom: 236px;
        left: 0;
        border-left: 0;
        border-bottom: 3px dashed var(--slate-300);
      }

      .ticket::after {
        display: none;
      }

      .ticket-main {
        min-height: auto;
        padding-bottom: 42px;
      }

      .ticket-route-panel {
        grid-template-columns: 1fr;
        margin-bottom: 42px;
      }

      .ticket-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .ticket-status-row,
      .ticket-flight-strip,
      .ticket-note-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .ticket-flight-strip div:nth-child(2n) {
        border-right: 0;
      }

      .ticket-flight-strip div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--slate-200);
      }

      .ticket-stub {
        min-height: 300px;
        width: 100%;
        padding-top: 34px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-grid> :first-child {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 720px) {

      .container,
      .narrow {
        width: min(100% - 32px, 1152px);
      }

      .section {
        padding: 72px 0;
      }

      .avatar {
        display: none;
      }

      .route-card {
        width: 100%;
        justify-content: center;
      }

      .route {
        width: 100%;
        justify-content: center;
      }

      .route-visual {
        grid-template-columns: 1fr;
      }

      .route-visual .plane-hop {
        margin: 0 auto;
        transform: rotate(90deg);
      }

      .hero-actions,
      .section-head-row,
      .price-box,
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .btn {
        width: 100%;
        white-space: normal;
      }

      .summary-grid,
      .ticket-grid,
      .ticket-details,
      .ticket-status-row,
      .ticket-flight-strip,
      .ticket-note-row,
      .boarding-grid,
      .check-list,
      .package-list,
      .form-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      footer {
        padding: 52px 0 28px;
      }

      .footer-grid {
        gap: 30px;
        margin-bottom: 26px;
        padding-bottom: 30px;
      }

      .footer-grid p {
        max-width: 100%;
      }

      .footer-badges {
        gap: 8px;
      }

      .mini-badge {
        max-width: 100%;
        white-space: normal;
      }

      .footer-brand span {
        display: block;
        margin: 6px 0 0;
      }

      .footer-bottom p {
        width: 100%;
        margin: 0;
      }

      .aircan-link {
        margin: 8px 0 0;
      }

      .ticket-main,
      .ticket-stub,
      .boarding-main,
      .boarding-stub {
        padding: 28px 22px;
      }

      .ticket::before {
        bottom: 338px;
      }

      .ticket-brand-title {
        font-size: 1.8rem;
      }

      .ticket-brand-subtitle {
        font-size: .85rem;
      }

      .ticket-pnr {
        text-align: left;
        margin-right: 0;
      }

      .ticket-route-panel {
        padding: 22px 18px;
      }

      .ticket-route-codes {
        gap: 14px;
      }

      .ticket-airport strong {
        font-size: 2.35rem;
      }

      .ticket-airport span {
        font-size: .8rem;
      }

      .ticket-stub-details {
        max-width: 320px;
      }

      .history-facts {
        grid-template-columns: 1fr;
      }

      .itinerary-hero-card {
        padding: 24px;
      }

      .pro-event,
      .flight-step {
        gap: 12px;
      }

      .itinerary-day-grid {
        grid-template-columns: 1fr;
      }

      .pro-event {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
      }

      .pro-event-icon {
        width: 38px;
        height: 38px;
      }

      .flight-timeline::before {
        display: none;
      }

      .security-callout {
        grid-template-columns: 1fr;
        margin-left: 0;
      }

      .day-ribbon {
        padding: 16px;
      }

      .day-number {
        min-width: 52px;
        height: 52px;
        font-size: 1.6rem;
      }

      .ticket-flight-strip div,
      .ticket-flight-strip div:nth-child(2n),
      .ticket-flight-strip div:nth-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--slate-200);
      }

      .ticket-flight-strip div:last-child {
        border-bottom: 0;
      }

      .package-card {
        display: block;
      }

      .package-image-side {
        width: 100%;
        min-height: 280px;
      }

      .package-content-side {
        padding: 28px;
      }

      .package-inclusions {
        grid-template-columns: 1fr;
      }

      .package-footer-row {
        align-items: stretch;
        flex-direction: column;
      }

      .selected-badge-btn {
        width: 100%;
      }

      .boarding-pass {
        flex-direction: column;
      }

      .boarding-stub {
        width: 100%;
        border-left: 0;
        border-top: 1px dashed var(--slate-300);
      }

      .gallery-grid {
        display: block;
        height: auto;
      }

      .gallery-item,
      .gallery-item.wide {
        height: 260px;
        margin-bottom: 16px;
      }

      .contact-layout {
        gap: 44px;
      }

      .route-code {
        font-size: 1.7rem;
      }

      .line {
        width: 34px;
      }
    }

    /* Elite Passenger Terminal Preloader */
    #preloader {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
    }

    /* Radar/Grid Background */
    .radar-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(227, 25, 55, 0.08) 0%, transparent 60%),
        repeating-linear-gradient(rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 40px);
      z-index: -1;
    }

    .terminal-ui {
      position: relative;
      width: 90%;
      max-width: 440px;
      padding: 40px;
      background: rgba(15, 23, 42, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(25px);
      border-radius: 32px;
      text-align: center;
      animation: uiEnter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    @media (min-width: 992px) {
      .terminal-ui {
        max-width: 380px;
        padding: 35px;
      }

      .passport-photo-wrap {
        width: 140px;
        height: 140px;
        margin-bottom: 30px;
      }

      .terminal-name {
        font-size: 1.8rem;
      }
    }

    .passport-photo-wrap {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto 40px;
      border: 2px solid rgba(227, 25, 55, 0.2);
      padding: 10px;
      border-radius: 50%;
    }

    .passport-photo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background: #1e293b;
      position: relative;
    }

    .passport-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures no flattening */
      aspect-ratio: 1 / 1;
      filter: contrast(1.1) brightness(1.05);
    }

    .scan-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 20%;
      background: linear-gradient(to bottom, transparent, var(--avianca-red), transparent);
      box-shadow: 0 0 20px var(--avianca-red);
      opacity: 0.6;
      z-index: 5;
      animation: scanVertical 3s ease-in-out infinite;
    }

    .terminal-header {
      margin-bottom: 24px;
    }

    .terminal-title {
      font-size: 0.7rem;
      letter-spacing: 0.4em;
      color: var(--avianca-red);
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .terminal-name {
      font-size: 2.2rem;
      font-weight: 900;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    .terminal-sub {
      font-size: 0.9rem;
      color: var(--slate-400);
      margin-bottom: 32px;
    }

    .data-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      padding-top: 32px;
      text-align: left;
    }

    .data-item .label {
      font-size: 0.6rem;
      color: var(--slate-500);
      text-transform: uppercase;
      margin-bottom: 4px;
      display: block;
    }

    .data-item .value {
      font-family: monospace;
      font-size: 0.9rem;
      color: #fff;
      font-weight: 600;
    }

    .progress-track {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      background: var(--avianca-red);
      box-shadow: 0 0 15px var(--avianca-red);
      animation: fillBarFull 3s ease-in-out forwards;
    }

    @keyframes scanVertical {

      0%,
      100% {
        top: -10%;
      }

      50% {
        top: 90%;
      }
    }

    @keyframes uiEnter {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes fillBarFull {
      to {
        width: 100%;
      }
    }

    #preloader.hidden {
      opacity: 0;
      transform: translateY(-100%);
      visibility: hidden;
    }

    /* Responsive Mobile Slider Images */
    @media (max-width: 768px) {
      .hero-slider .slide:nth-child(1) {
        background-image: url('assets/img/1responsive.png') !important;
      }

      .hero-slider .slide:nth-child(2) {
        background-image: url('assets/img/2responsive.png') !important;
      }

      .hero-slider .slide:nth-child(3) {
        background-image: url('assets/img/3responsive.png') !important;
      }

      .hero {
        background-position: center center;
      }
    }

    /* Floating WhatsApp Button */
    .whatsapp-float {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25d366;
      box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: floatPulse 2s infinite ease-in-out;
    }

    .whatsapp-float:hover {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
    }

    .whatsapp-float img {
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .whatsapp-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 14px;
      height: 14px;
      background: #ff3b30;
      border: 2px solid #fff;
      border-radius: 50%;
    }

    @keyframes floatPulse {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @media (max-width: 768px) {
      .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
      }

      .whatsapp-float img {
        width: 26px;
        height: 26px;
      }
    }
  </style>
</head>

<body>
  <!-- Elite Passenger Terminal Preloader -->
  <div id="preloader">
    <div class="radar-bg"></div>
    <div class="terminal-ui">
      <div class="terminal-header">
        <p class="terminal-title">SISTEMA DE VERIFICACIÓN AVIANCA</p>
        <h2 class="terminal-name">Daniel Andrés Zárate Giraldo</h2>
        <p class="terminal-sub">Evaluador Académico Certificado</p>
      </div>

      <div class="passport-photo-wrap">
        <div class="scan-line"></div>
        <div class="passport-photo">
          <img src="assets/img/pasajero.png" alt="Daniel Andrés Zárate Giraldo">
        </div>
      </div>

      <div class="data-grid">
        <div class="data-item">
          <span class="label">Reserva</span>
          <span class="value">TCP-CTG-2026</span>
        </div>
        <div class="data-item">
          <span class="label">Vuelo</span>
          <span class="value">AV-CLOCTG</span>
        </div>
        <div class="data-item">
          <span class="label">Nivel</span>
          <span class="value">EXECUTIVE VIP</span>
        </div>
        <div class="data-item">
          <span class="label">Puerta</span>
          <span class="value">L2-PRIORITY</span>
        </div>
      </div>

      <div class="progress-track">
        <div class="progress-bar"></div>
      </div>
    </div>
  </div>
  <header id="mainHeader">
    <div class="container nav-container">
      <a href="#home"><img src="assets/img/logo.jpg" alt="Avianca" class="nav-logo"></a>
      <nav class="nav-links">
        <a href="#home">Inicio</a>
        <a href="#summary">Resumen</a>
        <a href="#itinerary">Itinerario</a>
        <a href="#checkin">Check-in</a>
        <a href="#contact" class="nav-cta">Contacto</a>
      </nav>
      <button class="mobile-menu-toggle" id="mobileMenuToggle" type="button" aria-label="Abrir menú" aria-controls="mobileMenu" aria-expanded="false">
        <span></span>
      </button>
    </div>
    <div class="mobile-menu-backdrop" id="mobileMenuBackdrop"></div>
    <div class="mobile-menu-panel" id="mobileMenu" aria-hidden="true">
      <div class="mobile-menu-head">
        <div class="mobile-menu-brand">
          <img src="assets/img/logo.jpg" alt="Avianca">
          <span>Avianca</span>
        </div>
      </div>
      <nav aria-label="Menú móvil">
        <a href="#home">Inicio <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#summary">Resumen <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#ticket">E-Ticket <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#itinerary">Itinerario <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#explore">Paquete <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#gallery">Destinos <i class="icon" data-lucide="chevron-right"></i></a>
        <a href="#contact" class="mobile-cta">Contacto</a>
      </nav>
    </div>
  </header>
  <main>
    <section class="hero" id="home">
      <div class="hero-slider">
        <div class="slide active" style="background-image: url('assets/img/1.png')"></div>
        <div class="slide" style="background-image: url('assets/img/2.png')"></div>
        <div class="slide" style="background-image: url('assets/img/3.png')"></div>
      </div>
      <div class="hero-content container">
        <div class="badge fade-up"><span class="pulse"></span> En Colaboración con <a href="https://ecotet.edu.co/"
            target="_blank" rel="noopener noreferrer">ECOTET</a></div>
        <h1 class="fade-up">Bienvenido,<br><span class="gold-text" style="font-size: 0.8em;">Daniel Andrés
            Zárate Giraldo</span></h1>
        <p class="hero-subtitle fade-up">Su experiencia de servicio premium hacia Cartagena de Indias está lista.</p>
        <div class="route-card fade-up">
          <img class="avatar" src="assets/img/pasajero.png" alt="Pasajero Premium">
          <div class="route">
            <div style="text-align:right">
              <p class="route-code">CLO</p>
              <p class="route-city">Cali</p>
            </div>
            <div class="route-plane">
              <span>AV-CLOCTG</span>
              <div class="flight-line"><img src="assets/img/avion.png" alt="Avión" class="plane-img"></div>
            </div>
            <div style="text-align:left">
              <p class="route-code">CTG</p>
              <p class="route-city">Cartagena</p>
            </div>
          </div>
        </div>
        <div class="hero-actions fade-up">
          <button class="btn btn-red" data-scroll="checkin">Realizar Check-in <i class="icon"
              data-lucide="chevron-right"></i></button>
          <button class="btn btn-glass" data-scroll="itinerary">Ver Itinerario</button>
        </div>
      </div>
    </section>

    <section class="section section-white" id="summary">
      <div class="container">
        <div class="section-title fade-up">
          <h2>Resumen de su Experiencia</h2>
          <p>Hemos preparado un paquete integral que asegura su comodidad desde la salida en Cali hasta el regreso,
            combinando turismo, cultura y un servicio excepcional.</p>
        </div>
        <div class="summary-grid">
          <!-- Card 1: Ruta -->
          <article class="summary-card fade-up">
            <div class="card-icon-box">
              <i class="icon" data-lucide="map-pin"></i>
            </div>
            <h3>Ruta</h3>
            <div class="data-block">
              <span class="label-small">Origen</span>
              <span class="value-large">Cali, Colombia</span>
              <p class="value-sub">Aeropuerto Int. Alfonso Bonilla Aragón (CLO / SKCL)</p>

              <div class="airline-tag">Aerolínea: Avianca</div>

              <span class="label-small" style="margin-top: 16px;">Destino</span>
              <span class="value-large">Cartagena de Indias, Colombia</span>
              <p class="value-sub">Aeropuerto Internacional Rafael Núñez (CTG / SKCG)</p>
            </div>
          </article>

          <!-- Card 2: Estadía -->
          <article class="summary-card fade-up">
            <div class="card-icon-box">
              <i class="icon" data-lucide="calendar"></i>
            </div>
            <h3>Estadía</h3>
            <div class="data-block">
              <div style="display: flex; gap: 12px; margin-bottom: 24px;">
                <i class="icon" data-lucide="calendar-range" style="color: var(--slate-400);"></i>
                <div>
                  <span class="label-small" style="margin-bottom: 2px;">Fechas</span>
                  <span class="value-large">25 al 29 de diciembre</span>
                </div>
              </div>

              <div style="display: flex; gap: 12px;">
                <i class="icon" data-lucide="hotel" style="color: var(--slate-400);"></i>
                <div>
                  <span class="label-small" style="margin-bottom: 2px;">Alojamiento</span>
                  <span class="value-large">Hotel Costa del Sol</span>
                  <div class="status-badge">Reserva confirmada</div>
                </div>
              </div>
            </div>
          </article>

          <!-- Card 3: Servicios -->
          <article class="summary-card dark fade-up">
            <div class="card-icon-box">
              <i class="icon" data-lucide="info"></i>
            </div>
            <h3>Servicios Incluidos</h3>
            <ul class="services-list">
              <li><i class="icon" data-lucide="check-circle-2"></i> Vuelo redondo Cali - Cartagena</li>
              <li><i class="icon" data-lucide="check-circle-2"></i> Alojamiento familiar</li>
              <li><i class="icon" data-lucide="check-circle-2"></i> Desayuno, almuerzo y cena</li>
              <li><i class="icon" data-lucide="check-circle-2"></i> Tours y experiencias</li>
              <li><i class="icon" data-lucide="check-circle-2"></i> Traslados aeropuerto - hotel</li>
              <li><i class="icon" data-lucide="check-circle-2"></i> Asistencia al pasajero 24/7</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section section-soft" id="ticket">
      <div class="container">
        <div class="section-head-row fade-up">
          <div>
            <h2>Su Ticket Electrónico</h2>
            <p>Documento de reserva preliminar. Requiere check-in para obtener el pase de abordaje.</p>
          </div>
          <button class="btn btn-white" data-pdf="e-ticket" data-filename="E-Ticket-TCP-CTG-2026.pdf"><i class="icon"
              data-lucide="download"></i> Descargar en PDF</button>
        </div>
        <div class="ticket fade-up" id="e-ticket">
          <div class="ticket-main">
            <div class="brand-row">
              <div>
                <img src="assets/img/avianca.png" alt="Avianca" class="ticket-logo-img">
              </div>
              <div class="ticket-pnr">
                <span class="label">Reserva / PNR</span>
                <strong class="mono">TCP-CTG-2026</strong>
              </div>
            </div>

            <div class="ticket-route-panel">
              <div class="ticket-passenger-block">
                <span class="label">Pasajero</span>
                <strong>DANIEL ANDRÉS ZÁRATE GIRALDO</strong>
                <p class="small-muted" style="margin:8px 0 0">C.C. 1.112.765.432</p>
                <p class="small-muted" style="margin:4px 0 0">avianca@gmail.com</p>
                <p class="small-muted" style="margin:4px 0 0">+1 (661) 836-7056</p>
              </div>
              <div class="ticket-route-codes">
                <div class="ticket-airport">
                  <strong>CLO</strong>
                  <span>Cali</span>
                </div>
                <i class="icon ticket-plane-icon" data-lucide="plane" style="width:34px;height:34px"></i>
                <div class="ticket-airport">
                  <strong>CTG</strong>
                  <span>Cartagena de Indias</span>
                </div>
              </div>
            </div>

            <div class="ticket-flight-strip">
              <div>
                <span class="label">Salida</span>
                <strong>27 dic 2026 · 11:30</strong>
                <span class="small-muted">Cali, Alfonso Bonilla Aragón</span>
              </div>
              <div>
                <span class="label">Llegada</span>
                <strong>27 dic 2026 · 12:30</strong>
                <span class="small-muted">Cartagena, Rafael Núñez</span>
              </div>
              <div>
                <span class="label">Operado por</span>
                <strong>Avianca</strong>
                <span class="small-muted">Equipo A320</span>
              </div>
              <div>
                <span class="label">Duración</span>
                <strong>1 hora</strong>
                <span class="small-muted">Directo</span>
              </div>
            </div>

            <div class="ticket-details">
              <div class="ticket-detail">
                <span class="label">Vuelo</span>
                <strong>AV-CLOCTG</strong>
              </div>
              <div class="ticket-detail">
                <span class="label">Fecha</span>
                <strong>27 de diciembre</strong>
              </div>
              <div class="ticket-detail">
                <span class="label">Clase</span>
                <strong>Económica Plus</strong>
              </div>
            </div>

            <div class="ticket-status-row">
              <div class="ticket-status-item">
                <span class="label">Estado</span>
                <strong>Reserva confirmada</strong>
              </div>
              <div class="ticket-status-item">
                <span class="label">Emisión</span>
                <strong>13 mayo 2026</strong>
              </div>
              <div class="ticket-status-item">
                <span class="label">Equipaje</span>
                <strong>1 pieza cabina + artículo personal</strong>
              </div>
              <div class="ticket-status-item">
                <span class="label">Tarifa</span>
                <strong>PLUS-TCP</strong>
              </div>
            </div>

            <div
              style="margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--slate-100); display: flex; justify-content: space-between; align-items: center;">
              <p class="small-muted" style="margin:0; font-size: 0.7rem;">Contacto Global: avianca@gmail.com · +1 (661)
                836-7056</p>
              <p class="small-muted" style="margin:0; font-size: 0.7rem; font-weight: 700;">Tiquete Electrónico Oficial
              </p>
            </div>
          </div>

          <aside class="ticket-stub">
            <div class="ticket-stub-brand">
              <img src="assets/img/avianca.png" alt="Avianca" class="stub-logo-img">
              <span>TCP-CTG-2026</span>
            </div>
            <div class="qr-box"
              data-qr="AV-BCBP|DANIEL ANDRÉS ZÁRATE GIRALDO|PNR:TCP-CTG-2026|FLT:AV-CLOCTG|DATE:2026-12-27|GATE:4|SEAT:12A|STATUS:CONFIRMED"
              data-size="120"></div>
            <div class="ticket-stub-details">
              <div class="ticket-mini">
                <span class="label">Vuelo</span>
                <strong>CLOCTG</strong>
              </div>
              <div class="ticket-mini">
                <span class="label">Asiento</span>
                <strong>12A</strong>
              </div>
            </div>
            <div class="ticket-stub-list">
              <p><span>Secuencia</span><strong>0047</strong></p>
              <p><span>Grupo</span><strong>B</strong></p>
              <p><span>Puerta</span><strong>Gate 4</strong></p>
              <p><span>Documento</span><strong>C.C. 1.112.765.432</strong></p>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <section class="section section-white" id="checkin">
      <div class="narrow">
        <div class="section-title fade-up" style="margin-bottom:48px">
          <h2>Check-in Digital</h2>
          <p>Confirme su asistencia y obtenga su pase de abordaje oficial.</p>
        </div>
        <div class="checkin-panel fade-up">
          <div class="status-view active" data-check-view="pending">
            <div class="checkin-user-photo" style="margin-bottom: 24px;">
              <img src="assets/img/pasajero.png" alt="Daniel Andrés Zárate Giraldo"
                style="width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--avianca-red); box-shadow: 0 8px 20px rgba(227, 25, 55, 0.2);">
            </div>
            <div class="status-icon" style="background: #f1f5f9; color: var(--slate-600);"><i class="icon"
                data-lucide="user-check"></i></div>
            <h3>Check-in Disponible</h3>
            <p>Hola, <strong>Daniel Andrés Zárate Giraldo</strong>. Su vuelo AV-CLOCTG con destino a Cartagena está listo para
              el check-in.</p>
            <button class="btn btn-red" id="checkinButton">Confirmar mi Asistencia</button>
          </div>
          <div class="status-view" data-check-view="loading">
            <i class="icon spin" data-lucide="loader-2" style="width:64px;height:64px;margin-bottom:24px"></i>
            <h3>Generando pase de abordaje...</h3>
            <p>Confirmando asiento y grupo de abordaje</p>
          </div>
          <div class="status-view" data-check-view="success">
            <div class="status-icon success"><i class="icon" data-lucide="check-circle-2"
                style="width:48px;height:48px"></i></div>
            <h3>¡Check-in exitoso!</h3>
            <p>Ya tiene su pase de abordaje listo. Preséntelo en su dispositivo móvil o impreso el día del vuelo.</p>
            <button class="btn btn-blue" data-pdf="boarding-pass" data-filename="BoardingPass-TCP-CTG-2026.pdf"><i
                class="icon" data-lucide="download"></i> Descargar Pase de Abordaje</button>
          </div>
        </div>
        <div class="boarding-wrap hidden" id="boardingWrap">
          <div class="boarding-pass" id="boarding-pass">
            <!-- Header Red Section -->
            <header class="boarding-header">
              <div class="boarding-header-top">
                <span>Pase de abordaje</span>
                <img src="assets/img/avianca.png" alt="Avianca" class="boarding-logo-white">
              </div>
              <div class="boarding-route-display">
                <div class="route-node">
                  <strong>CLO</strong>
                  <span>Cali</span>
                </div>
                <i class="icon route-plane-icon" data-lucide="plane" style="transform: rotate(45deg)"></i>
                <div class="route-node" style="text-align: right;">
                  <strong>CTG</strong>
                  <span>Cartagena</span>
                </div>
              </div>
            </header>

            <!-- Body White Section -->
            <div class="boarding-body">
              <div class="boarding-passenger-row">
                <img src="assets/img/pasajero.png" alt="Daniel Andrés Zárate Giraldo" class="boarding-passenger-photo">
                <div class="passenger-info-text">
                  <span class="label">Pasajero / Passenger</span>
                  <strong>Daniel Andrés Zárate Giraldo</strong>
                </div>
              </div>

              <div class="boarding-info-grid">
                <div class="info-item">
                  <span class="label">Vuelo / Flight</span>
                  <strong>AV-CLOCTG</strong>
                </div>
                <div class="info-item">
                  <span class="label">Fecha / Date</span>
                  <strong>27 de diciembre</strong>
                </div>
                <div class="info-item">
                  <span class="label">Reserva / PNR</span>
                  <strong>TCP-CTG-2026</strong>
                </div>
                <div class="info-item">
                  <span class="label">Clase / Class</span>
                  <strong>Económica Plus</strong>
                </div>
              </div>

              <div class="boarding-qr-card">
                <div class="qr-details-stack">
                  <div class="qr-detail-item">
                    <span class="label">Puerta / Gate</span>
                    <strong class="red-text">Gate 4</strong>
                  </div>
                  <div class="qr-detail-item">
                    <span class="label">Asiento / Seat</span>
                    <strong>12A</strong>
                  </div>
                  <div class="qr-detail-item">
                    <span class="label">Grupo / Group</span>
                    <strong>Grupo B</strong>
                  </div>
                </div>
                <div class="qr-box"
                  data-qr="AV-BCBP|DANIEL ANDRÉS ZÁRATE GIRALDO|PNR:TCP-CTG-2026|FLT:AV-CLOCTG|DATE:2026-12-27|GATE:4|SEAT:12A|STATUS:CONFIRMED"
                  data-size="120"></div>
              </div>
            </div>

            <!-- Footer -->
            <footer class="boarding-footer-text">
              Contacto Global: avianca@gmail.com · +1 (661) 836-7056<br>
              <strong>Pase de abordaje oficial · Avianca S.A.</strong>
            </footer>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-soft" id="itinerary">
      <div class="container">
        <div class="section-title fade-up">
          <h2>Itinerario de Viaje</h2>
          <p>Planificador diario de su experiencia familiar en Cali y Cartagena de Indias.</p>
        </div>

        <div class="itinerary-board">
          <div class="itinerary-hero-card fade-up">
            <div>
              <span class="itinerary-kicker"><i class="icon" data-lucide="plane"></i> Vuelo Cali - Cartagena</span>
              <h3>Tour Cali, aeropuerto y Tour Cartagena</h3>
              <p>Itinerario actualizado según el material definitivo recibido. Las etapas no incluyen horarios, por eso la agenda se presenta por zonas y actividades.</p>
            </div>
            <div class="route-visual" aria-label="Ruta Cali a Cartagena">
              <div class="route-city-card">
                <strong>Cali</strong>
                <span>Tour Cali</span>
              </div>
              <div class="plane-hop"><i class="icon icon-lg" data-lucide="plane"></i></div>
              <div class="route-city-card">
                <strong>Cartagena</strong>
                <span>Tour Cartagena</span>
              </div>
            </div>
          </div>

          <div class="itinerary-day-grid">
            <article class="itinerary-day-card fade-up">
              <div class="day-ribbon green">
                <span class="day-number">1</span>
                <div>
                  <h3>Tour Cali</h3>
                  <p>Zona 1: ECOTEC - Piso 4</p>
                </div>
              </div>
              <div class="pro-event-list">
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="map-pin"></i></span>
                  <div>
                    <h4>Inicio del recorrido</h4>
                    <p>Auditorio de ECOTEC.</p>
                  </div>
                </div>
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="building-2"></i></span>
                  <div>
                    <h4>Cuarto piso</h4>
                    <p>Subimos al cuarto piso donde encontrarás Cristo Rey y almuerzo.</p>
                  </div>
                </div>
              </div>
            </article>

            <article class="itinerary-day-card fade-up">
              <div class="day-ribbon green">
                <span class="day-number">2</span>
                <div>
                  <h3>Tour Cali</h3>
                  <p>Zona 2: Fuera de ECOTEC</p>
                </div>
              </div>
              <div class="pro-event-list">
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="music-2"></i></span>
                  <div>
                    <h4>Intervención artística de salsa</h4>
                  </div>
                </div>
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="utensils"></i></span>
                  <div>
                    <h4>Calle del Sabor - Bulevar</h4>
                    <p>Disfruta de un recorrido lleno de música, color y tradición.</p>
                  </div>
                </div>
              </div>
            </article>

            <article class="itinerary-day-card fade-up">
              <div class="day-ribbon green">
                <span class="day-number">3</span>
                <div>
                  <h3>Tour Cali</h3>
                  <p>Zona 3: Mesas de ECOTEC</p>
                </div>
              </div>
              <div class="pro-event-list">
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="utensils"></i></span>
                  <div>
                    <h4>Zona de gastronomía caleña</h4>
                  </div>
                </div>
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="cat"></i></span>
                  <div>
                    <h4>Plaza de las Gatas</h4>
                  </div>
                </div>
                <div class="pro-event">
                  <span class="pro-event-icon"><i class="icon" data-lucide="gift"></i></span>
                  <div>
                    <h4>Bono por 2 bebidas</h4>
                    <p>Participa y gana un cartón raspegana con un viaje Cali - Cartagena para dos personas.</p>
                  </div>
                </div>
              </div>
            </article>

            <article class="airport-flow-card fade-up">
              <div class="airport-ribbon">
                <h3>Aeropuerto</h3>
              </div>
              <div class="airport-flow">
                <div class="airport-step">
                  <span class="airport-icon"><i class="icon" data-lucide="briefcase"></i></span>
                  <div>
                    <h4>Counter ECOTEC</h4>
                    <p>Check-in en el counter de ECOTEC.</p>
                  </div>
                </div>
                <div class="airport-step">
                  <span class="airport-icon"><i class="icon" data-lucide="shield-check"></i></span>
                  <div>
                    <h4>Seguridad</h4>
                    <p>Filtro de seguridad, revisión de equipaje de mano y documentos para garantizar un viaje seguro.</p>
                  </div>
                </div>
                <div class="airport-step">
                  <span class="airport-icon"><i class="icon" data-lucide="armchair"></i></span>
                  <div>
                    <h4>Sala de espera</h4>
                    <p>Espera cómoda antes de abordar tu vuelo.</p>
                  </div>
                </div>
                <div class="airport-step">
                  <span class="airport-icon"><i class="icon" data-lucide="plane"></i></span>
                  <div>
                    <h4>Vuelo (maqueta ECOTEC)</h4>
                    <p>Disfruta del vuelo en nuestra maqueta de ECOTEC.</p>
                  </div>
                </div>
              </div>
            </article>
          </div>

          <article class="itinerary-day-card day-27-card fade-up">
            <div class="day-ribbon" style="background:#0f62b5">
              <span class="day-number"><i class="icon icon-lg" data-lucide="map"></i></span>
              <div>
                <h3>Tour Cartagena</h3>
                <p>Experiencias del recorrido</p>
              </div>
            </div>
            <div class="pro-event-list">
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="bed"></i></span>
                <div>
                  <h4>Hotel - La Costa del Sol, Boca Grande</h4>
                  <p>Mesas ECOTEC.</p>
                </div>
              </div>
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="landmark"></i></span>
                <div>
                  <h4>El Castillo de San Felipe - Gate 5</h4>
                </div>
              </div>
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="camera"></i></span>
                <div>
                  <h4>Ciudad Amurallada - Gate 5</h4>
                </div>
              </div>
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="utensils"></i></span>
                <div>
                  <h4>Almuerzo</h4>
                  <p>Arroz de coco, con mojarra y patacón y aguapanela. Mesas ECOTEC.</p>
                </div>
              </div>
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="clock-3"></i></span>
                <div>
                  <h4>Torre de El Reloj - Gate 5</h4>
                </div>
              </div>
              <div class="pro-event">
                <span class="pro-event-icon"><i class="icon" data-lucide="music"></i></span>
                <div>
                  <h4>Baile alusivo - Gate 5</h4>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section section-white" id="hotel">
      <div class="container split">
        <div class="hotel-image fade-left"><img src="assets/img/costa.jpg" alt="Hotel Costa del Sol">
          <div class="image-overlay">
            <div>
              <div class="stars">★★★★</div>
              <h3>Hotel Costa del Sol</h3>
              <p><i class="icon" data-lucide="map-pin"></i> Bocagrande, Cartagena</p>
            </div>
          </div>
        </div>
        <div class="split-copy fade-right">
          <h2>Alojamiento Seleccionado</h2>
          <p>El Hotel Costa del Sol será el punto de alojamiento seleccionado para la experiencia en Cartagena,
            ofreciendo comodidad, ubicación estratégica frente a la playa y servicios ideales para el descanso familiar
            durante el viaje.</p>
          <h4 class="eyebrow">Servicios Incluidos en el Paquete</h4>
          <ul class="check-list">
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> Desayuno, Almuerzo y Cena</li>
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> Alojamiento Familiar</li>
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> Habitaciones climatizadas</li>
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> A 50m de la playa</li>
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> Piscina panorámica</li>
            <li><span class="check-dot"><i class="icon" data-lucide="check"></i></span> Asistencia 24/7</li>
          </ul>
          <div class="amenities">
            <div class="amenity"><i class="icon icon-lg" data-lucide="wifi"></i><span>Wi-Fi</span></div>
            <div class="amenity"><i class="icon icon-lg" data-lucide="coffee"></i><span>Restaurante</span></div>
            <div class="amenity"><i class="icon icon-lg" data-lucide="waves"></i><span>Piscina</span></div>
            <div class="amenity"><i class="icon icon-lg" data-lucide="bath"></i><span>Baño Privado</span></div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-muted" id="explore">
      <div class="container">
        <div class="section-title fade-up" style="margin-bottom:48px">
          <h2>Explora tu paquete</h2>
          <p>Beneficio de viaje asignado para la ruta Cali - Cartagena.</p>
        </div>
        <div class="package-layout">
          <div class="package-card fade-up">
            <div class="package-content-side">
              <span class="recommended-badge" style="position:static;width:max-content;margin-bottom:22px">BENEFICIO
                ASIGNADO</span>
              <h3>Viaje obsequiado Cali - Cartagena</h3>
              <p>Beneficio otorgado a Daniel Andrés Zárate Giraldo para disfrutar una experiencia premium en Cartagena de
                Indias con vuelos, hotel, alimentación y traslados incluidos.</p>

              <div class="package-route-line">Cali → Cartagena de Indias → Cali</div>

              <div class="package-tags">
                <span class="tag-item"><i class="icon" data-lucide="plane"></i> Vuelos Avianca</span>
                <span class="tag-item"><i class="icon" data-lucide="hotel"></i> Hotel Costa del Sol</span>
                <span class="tag-item"><i class="icon" data-lucide="utensils"></i> Alimentación incluida</span>
                <span class="tag-item"><i class="icon" data-lucide="calendar-days"></i> 25 al 27 de diciembre</span>
              </div>

              <ul class="package-inclusions">
                <li><i class="icon" data-lucide="check-circle-2"></i> Vuelos ida y regreso.</li>
                <li><i class="icon" data-lucide="check-circle-2"></i> Hotel y alimentación.</li>
                <li><i class="icon" data-lucide="check-circle-2"></i> Traslados y recorrido principal.</li>
              </ul>

              <div class="package-footer-row">
                <div class="gift-info">
                  <span class="gift-label">Valor del paquete</span>
                  <div class="gift-value"><i class="icon icon-lg" data-lucide="gift"></i> Obsequiado por raspa y gana
                  </div>
                  <p class="gift-note">No aplica pago por persona. Beneficio entregado como premio de viaje.</p>
                </div>
                <div class="selected-badge-btn"><i class="icon" data-lucide="badge-check"></i> Paquete asignado</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-white">
      <div class="container split">
        <div class="split-copy fade-left">
          <div class="history-accent">Historia &amp; Trayectoria</div>
          <h2>Más de un siglo conectando a Colombia con el mundo.</h2>
          <p>Avianca inició operaciones en 1919 y es reconocida como una de las aerolíneas comerciales con mayor
            trayectoria continua en el mundo. Su operación de pasajeros ha sido clave para conectar a Colombia,
            Centroamérica, Ecuador y otros mercados de América y Europa.</p>
          <p>La compañía integra Avianca, LifeMiles y Avianca Cargo. Además, hace parte de Star Alliance, la red global
            que permite conectar con más de 1.300 destinos en 195 países a través de sus aerolíneas miembro.</p>
          <div class="history-facts">
            <div class="history-fact">
              <strong>1919</strong>
              <span>Inicio de operaciones.</span>
            </div>
            <div class="history-fact">
              <strong>Star Alliance</strong>
              <span>Miembro de la alianza global.</span>
            </div>
            <div class="history-fact">
              <strong>LifeMiles</strong>
              <span>Programa de lealtad de la aerolínea.</span>
            </div>
          </div>
        </div>
        <div class="plane-frame fade-right">
          <div class="plane-photo"><img src="assets/img/historia.png" alt="Avión Avianca en plataforma">
            <div class="word">Avianca</div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-dark" id="gallery">
      <div class="container">
        <div class="section-title fade-up">
          <h2>Descubra los Destinos</h2>
          <p>Lugares destacados incluidos en la experiencia por Cali y Cartagena.</p>
        </div>
        <div class="gallery-grid">
          <div class="gallery-item wide fade-up">
            <span class="gallery-label">Cali</span>
            <img src="assets/img/destinos/Cristorey.jpg" alt="Cristo Rey de Cali">
            <div class="gallery-caption">
              <h4>Cristo Rey</h4>
              <p>Mirador emblemático de Cali con una vista amplia de la ciudad y sus montañas.</p>
            </div>
          </div>
          <div class="gallery-item fade-up">
            <span class="gallery-label">Cali</span>
            <img src="assets/img/destinos/bulevarcali.avif" alt="Bulevar del Río en Cali">
            <div class="gallery-caption">
              <h4>Bulevar del Río</h4>
              <p>Paseo urbano junto al río, ideal para disfrutar luces, cultura y ambiente caleño.</p>
            </div>
          </div>
          <div class="gallery-item fade-up">
            <span class="gallery-label">Cali</span>
            <img src="assets/img/destinos/gatodelrio.avif" alt="Gato del Río de Cali">
            <div class="gallery-caption">
              <h4>Gato del Río</h4>
              <p>Ícono artístico de la ciudad y punto clásico para recorrer la Cali cultural.</p>
            </div>
          </div>
          <div class="gallery-item fade-up">
            <span class="gallery-label">Cali</span>
            <img src="assets/img/destinos/calledelsabor.avif" alt="Calle del Sabor en Cali">
            <div class="gallery-caption">
              <h4>Calle del Sabor</h4>
              <p>Ruta gastronómica para probar sabores típicos y vivir la alegría caleña.</p>
            </div>
          </div>
          <div class="gallery-item fade-up">
            <span class="gallery-label">Cartagena</span>
            <img src="assets/img/destinos/ciudadamurallada.webp" alt="Ciudad Amurallada de Cartagena">
            <div class="gallery-caption">
              <h4>Ciudad Amurallada</h4>
              <p>Centro histórico de Cartagena, reconocido por sus calles coloniales y murallas.</p>
            </div>
          </div>
          <div class="gallery-item fade-up">
            <span class="gallery-label">Cartagena</span>
            <img src="assets/img/destinos/Torredelreloj.webp" alt="Torre del Reloj de Cartagena">
            <div class="gallery-caption">
              <h4>Torre del Reloj</h4>
              <p>Entrada histórica a la ciudad amurallada y uno de los símbolos más famosos de Cartagena.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section section-white" id="contact">
      <div class="container contact-layout">
        <aside class="contact-info fade-left">
          <h2>¿Necesita asistencia?</h2>
          <p class="muted">Nuestro equipo de atención al pasajero está listo para ayudarle con cualquier duda sobre su
            itinerario, vuelos o servicios incluidos.</p>
          <div class="contact-item"><span class="contact-icon"><i class="icon icon-lg" data-lucide="phone"></i></span>
            <div><strong>Teléfono</strong>
              <p>+1 (661) 8367056</p>
            </div>
          </div>
          <div class="contact-item"><span class="contact-icon"><i class="icon icon-lg" data-lucide="mail"></i></span>
            <div><strong>Correo Electrónico</strong>
              <p>avianca@gmail.com</p>
            </div>
          </div>
          <div class="contact-item"><span class="contact-icon"><i class="icon icon-lg" data-lucide="clock"></i></span>
            <div><strong>Horario</strong>
              <p>Lunes a Domingo<br>24 horas</p>
            </div>
          </div>
          <div class="whatsapp-box">
            <h4><i class="icon" data-lucide="message-circle" style="color:var(--whatsapp)"></i> Chat Directo</h4>
            <p>Para una respuesta inmediata, escríbanos a nuestra línea de WhatsApp.</p><a class="btn btn-whatsapp"
              href="https://wa.me/16618367056?text=Hola,%20quiero%20recibir%20informaci%C3%B3n%20sobre%20mi%20experiencia%20Cali%20a%20Cartagena."
              target="_blank" rel="noopener noreferrer">Contactar por WhatsApp</a>
          </div>
          <div class="social-box" style="margin-top: 24px; padding: 24px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--slate-100);">
            <h4 style="margin: 0 0 16px; color: var(--slate-800); font-size: 1rem; display: flex; align-items: center; gap: 8px;">
              <i class="icon" data-lucide="users" style="color: var(--avianca-red);"></i> Comunidad Avianca
            </h4>
            <div style="display: flex; gap: 16px;">
              <style>
                .social-icon-btn { display: inline-flex; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: var(--slate-50); padding: 10px; border-radius: 14px; border: 1px solid var(--slate-100); }
                .social-icon-btn:hover { transform: translateY(-4px) scale(1.05); background: #fff; border-color: var(--avianca-red); box-shadow: 0 10px 25px rgba(227, 25, 55, 0.15); }
                .social-icon-btn img { width: 32px; height: 32px; object-fit: contain; }
              </style>
              <a class="social-icon-btn" href="https://www.instagram.com/avianca?utm_source=ig_web_button_share_sheet&amp;igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer" aria-label="Instagram Avianca">
                <img src="assets/img/instagram.png" alt="Instagram Avianca">
              </a>
              <a class="social-icon-btn" href="https://www.facebook.com/aviancaglobal" target="_blank" rel="noopener noreferrer" aria-label="Facebook Avianca">
                <img src="assets/img/facebook.png" alt="Facebook Avianca">
              </a>
            </div>
          </div>
        </aside>
        <div class="form-panel fade-right">
          <h3>Envíenos un mensaje</h3>
          <div class="success-message" id="formSuccess">
            <div class="success-icon"><i class="icon icon-xl" data-lucide="send"></i></div>
            <h4>¡Información enviada correctamente!</h4>
            <p>Pronto recibirá los detalles de su experiencia de viaje. (Esto es una simulación).</p>
          </div>
          <form id="contactForm">
            <div class="form-grid">
              <div class="field"><label>Nombre Completo</label><input required type="text" placeholder="Ej. Juan Pérez">
              </div>
              <div class="field"><label>Teléfono</label><input required type="tel" placeholder="+57 ..."></div>
            </div>
            <div class="form-grid">
              <div class="field"><label>Correo Electrónico</label><input required type="email"
                  placeholder="correo@ejemplo.com"></div>
              <div class="field"><label>Tipo de Solicitud</label><select>
                  <option>Información de vuelos</option>
                  <option>Modificación de itinerario</option>
                  <option>Requerimientos especiales (comida, sillas)</option>
                  <option>Otro</option>
                </select></div>
            </div>
            <div class="field"><label>Mensaje</label><textarea required
                placeholder="¿En qué podemos ayudarle?"></textarea></div>
            <div class="form-actions"><button class="btn btn-blue" type="submit"><span id="sendText">Enviar
                  Solicitud</span> <i class="icon" data-lucide="send"></i></button></div>
          </form>
        </div>
      </div>
    </section>

    <!-- Send Itinerary to Email Section -->
    <section class="section" id="email-itinerary" style="background: linear-gradient(135deg, var(--premium-blue) 0%, #1e3a8a 100%); position: relative; overflow: hidden; padding: 120px 0;">
      <!-- Decorative background elements -->
      <div style="position: absolute; top: -50%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(227,25,55,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none;"></div>
      <div style="position: absolute; bottom: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none;"></div>
      
      <div class="narrow" style="position: relative; z-index: 2; text-align: center;">
        <div class="fade-up">
          <div style="display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: rgba(255,255,255,0.05); border-radius: 50%; margin-bottom: 24px; box-shadow: 0 0 40px rgba(227, 25, 55, 0.3); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
            <i class="icon" data-lucide="mail" style="color: #fff; width: 32px; height: 32px;"></i>
          </div>
          <h2 style="color: #fff; font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 16px; letter-spacing: -0.02em;">Lleve su itinerario en el bolsillo</h2>
          <p style="color: var(--slate-300); font-size: 1.15rem; max-width: 600px; margin: 0 auto 40px; line-height: 1.6; font-weight: 300;">
            Ingrese su correo electrónico y reciba al instante todos los detalles de su vuelo, hospedaje y el cronograma de su experiencia familiar.
          </p>
        </div>

        <div class="fade-up" style="transition-delay: 150ms;">
          <form id="emailItineraryForm" style="max-width: 540px; margin: 0 auto; position: relative;">
            <div class="email-input-wrapper">
              <input type="email" required placeholder="correo@ejemplo.com" class="email-itinerary-input">
              <button type="submit" class="btn btn-red email-submit-btn">
                <span id="emailBtnText">Recibir Itinerario</span>
                <i class="icon" data-lucide="send" style="width: 18px; height: 18px;"></i>
              </button>
            </div>
            <div id="emailSuccessMsg" class="email-success-msg">
              <div class="success-badge">
                <i class="icon" data-lucide="check-circle-2" style="width: 20px; height: 20px;"></i> ¡Itinerario enviado exitosamente! Revise su bandeja.
              </div>
            </div>
          </form>
          <style>
            .email-input-wrapper {
              display: flex;
              background: rgba(255, 255, 255, 0.08);
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-radius: 999px;
              padding: 6px;
              backdrop-filter: blur(12px);
              box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
              transition: all 0.3s ease;
            }
            .email-input-wrapper:focus-within {
              border-color: rgba(255,255,255,0.5) !important;
              background: rgba(255,255,255,0.12) !important;
              box-shadow: 0 0 40px rgba(227, 25, 55, 0.25) !important;
            }
            .email-itinerary-input {
              flex: 1;
              background: transparent;
              border: none;
              color: #fff;
              padding: 0 24px;
              font-size: 1.05rem;
              outline: none;
              min-width: 0;
            }
            .email-itinerary-input::placeholder {
              color: rgba(255,255,255,0.5);
            }
            .email-submit-btn {
              min-height: 52px;
              padding: 0 32px;
              margin: 0;
              box-shadow: 0 10px 20px rgba(227, 25, 55, 0.3);
              border-radius: 999px;
              display: flex;
              gap: 8px;
              align-items: center;
              justify-content: center;
            }
            .email-success-msg {
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              margin-top: 16px;
              opacity: 0;
              visibility: hidden;
              transition: all 0.4s ease;
              transform: translateY(-10px);
              z-index: 10;
            }
            .success-badge {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              background: rgba(22, 163, 74, 0.2);
              border: 1px solid rgba(22, 163, 74, 0.4);
              color: #4ade80;
              padding: 10px 20px;
              border-radius: 999px;
              font-size: 0.95rem;
              font-weight: 500;
              backdrop-filter: blur(8px);
            }
            #emailSuccessMsg.is-active {
              opacity: 1 !important;
              visibility: visible !important;
              transform: translateY(0) !important;
            }

            @media (max-width: 600px) {
              .email-input-wrapper {
                flex-direction: column;
                border-radius: 24px;
                padding: 10px;
                gap: 10px;
              }
              .email-itinerary-input {
                padding: 12px;
                text-align: center;
              }
              .email-submit-btn {
                width: 100%;
                border-radius: 16px;
              }
              .success-badge {
                padding: 10px 14px;
                font-size: 0.85rem;
              }
            }
          </style>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-grid">
        <div>
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
            <img src="assets/img/logo.jpg" alt="Logo"
              style="width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); object-fit: cover;">
            <h3 class="footer-brand" style="margin: 0;">Avianca <span>Experiencia de viaje</span></h3>
          </div>
          <p>Información organizada para consultar el itinerario, servicios incluidos, alojamiento y asistencia del
            viaje Cali - Cartagena.</p>
          <div class="footer-badges"><span class="mini-badge"><i class="icon" data-lucide="plane"></i>
              Vuelos</span><span class="mini-badge"><i class="icon" data-lucide="hotel"></i> Hotel</span><span
              class="mini-badge"><i class="icon" data-lucide="map-pin"></i> Destinos</span></div>
        </div>
        <div>
          <h4>Enlaces Rápidos</h4>
          <ul>
            <li><a href="#summary">Resumen del Viaje</a></li>
            <li><a href="#itinerary">Itinerario</a></li>
            <li><a href="#ticket">E-Ticket</a></li>
            <li><a href="#checkin">Check-in Digital</a></li>
          </ul>
        </div>
        <div>
          <h4>Servicios</h4>
          <ul>
            <li><a href="#hotel">Hotel Seleccionado</a></li>
            <li><a href="#explore">Explorar Paquete</a></li>
            <li><a href="#gallery">Destinos</a></li>
            <li><a href="#contact">Atención al Pasajero</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© <span id="year"></span> Avianca. Información de viaje.</p>
        <p>Creado por <a class="aircan-link" href="https://aircan.me/" target="_blank"
            rel="noopener noreferrer">Aircan</a></p>
      </div>
    </div>
  </footer>

  <a href="https://wa.me/16618367056?text=Hola%20Avianca%2C%20necesito%20asistencia%20con%20mi%20itinerario%20del%20vuelo%20Cali%20-%20Cartagena.%20%C2%BFMe%20podr%C3%ADan%20ayudar%3F"
    class="whatsapp-float" target="_blank" rel="noopener noreferrer" aria-label="Contactar por WhatsApp">
    <img src="assets/img/whatsapp.png" alt="WhatsApp">
    <span class="whatsapp-badge"></span>
  </a>

  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script>
    const $ = (selector, parent = document) => parent.querySelector(selector);
    const $$ = (selector, parent = document) => Array.from(parent.querySelectorAll(selector));

    function refreshIcons() {
      if (window.lucide) window.lucide.createIcons();
    }

    function renderQRCodes() {
      $$("[data-qr]").forEach((box) => {
        const value = box.dataset.qr;
        const size = Number(box.dataset.size || 100);
        const qr = qrcode(0, "H");
        qr.addData(value);
        qr.make();
        box.innerHTML = qr.createSvgTag({
          cellSize: Math.max(2, Math.floor(size / qr.getModuleCount())),
          margin: 0,
          scalable: true
        });
        const svg = box.querySelector("svg");
        if (svg) {
          svg.setAttribute("width", size);
          svg.setAttribute("height", size);
          svg.style.display = "block";
        }
      });
    }

    async function generatePDF(elementId, filename) {
      const element = document.getElementById(elementId);
      if (!element || !window.html2canvas || !window.jspdf) return;

      try {
        const isTicket = elementId === "e-ticket";
        const captureTarget = isTicket ? element.cloneNode(true) : element;

        if (isTicket) {
          captureTarget.id = `${elementId}-pdf-capture`;
          captureTarget.classList.add("pdf-desktop-ticket");
          const wrapper = document.createElement("div");
          wrapper.id = "pdf-capture-wrapper";
          wrapper.style.position = "fixed";
          wrapper.style.left = "-10000px";
          wrapper.style.top = "0";
          wrapper.style.width = "1200px";
          wrapper.style.padding = "0";
          wrapper.style.background = "#ffffff";
          wrapper.style.zIndex = "-1";
          wrapper.appendChild(captureTarget);
          document.body.appendChild(wrapper);
          refreshIcons();
          renderQRCodes();
        }

        const canvas = await html2canvas(captureTarget, {
          scale: 2,
          useCORS: true,
          logging: false,
          backgroundColor: "#ffffff",
          windowWidth: isTicket ? 1280 : window.innerWidth,
          width: isTicket ? 1200 : undefined,
          onclone: (clonedDoc) => {
            const el = clonedDoc.getElementById(isTicket ? `${elementId}-pdf-capture` : elementId);
            if (!el) return;
            el.style.margin = "0";
            el.style.transform = "none";
            el.style.position = "static";
            if (isTicket) {
              el.style.width = "1200px";
              el.style.maxWidth = "1200px";
              el.style.display = "grid";
              el.style.gridTemplateColumns = "minmax(0, 1fr) 300px";
              el.style.background = "#fff";

              const main = el.querySelector(".ticket-main");
              const stub = el.querySelector(".ticket-stub");
              const routePanel = el.querySelector(".ticket-route-panel");
              const details = el.querySelector(".ticket-details");
              const status = el.querySelector(".ticket-status-row");
              const flight = el.querySelector(".ticket-flight-strip");
              const notes = el.querySelector(".ticket-note-row");

              if (main) {
                main.style.minHeight = "560px";
                main.style.padding = "42px 36px 34px";
              }
              if (stub) {
                stub.style.minHeight = "560px";
                stub.style.width = "auto";
                stub.style.padding = "40px 36px 32px";
              }
              if (routePanel) routePanel.style.gridTemplateColumns = "minmax(220px, 1.05fr) 1.7fr";
              if (details) details.style.gridTemplateColumns = "1fr 1fr 1.05fr .9fr";
              if (status) status.style.gridTemplateColumns = "repeat(4, minmax(0, 1fr))";
              if (flight) flight.style.gridTemplateColumns = "1.05fr .9fr .9fr .85fr";
              if (notes) notes.style.gridTemplateColumns = "1.5fr 1fr";
            }
          }
        });

        if (isTicket) {
          document.getElementById("pdf-capture-wrapper")?.remove();
          refreshIcons();
          renderQRCodes();
        }

        const imgData = canvas.toDataURL("image/png");
        const pdf = new window.jspdf.jsPDF({
          orientation: canvas.width > canvas.height ? "l" : "p",
          unit: "px",
          format: [canvas.width, canvas.height]
        });

        pdf.addImage(imgData, "PNG", 0, 0, canvas.width, canvas.height);
        pdf.save(filename);
      } catch (err) {
        console.error("PDF Error:", err);
      }
    }

    function setCheckinStatus(status) {
      $$("[data-check-view]").forEach((view) => view.classList.toggle("active", view.dataset.checkView === status));
      $("#boardingWrap").classList.toggle("hidden", status !== "success");
    }

    document.addEventListener("DOMContentLoaded", () => {
      // Hide Preloader
      setTimeout(() => {
        const preloader = document.getElementById("preloader");
        if (preloader) preloader.classList.add("hidden");
      }, 3000);

      $("#year").textContent = new Date().getFullYear();
      refreshIcons();
      renderQRCodes();

      // Hero Slider Logic
      const slides = $$(".slide");
      let currentSlide = 0;
      function nextSlide() {
        slides[currentSlide].classList.remove("active");
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.add("active");
      }
      setInterval(nextSlide, 5000);

      // Header Scroll Logic - Appear after passing Hero
      const header = $("#mainHeader");
      const updateHeaderVisibility = () => {
        // Appears when we have scrolled past 50% of the viewport for a better UX
        header.classList.toggle("scrolled", window.scrollY > (window.innerHeight * 0.5));
      };
      updateHeaderVisibility();
      window.addEventListener("scroll", updateHeaderVisibility);

      const mobileToggle = $("#mobileMenuToggle");
      const mobileMenu = $("#mobileMenu");
      const mobileBackdrop = $("#mobileMenuBackdrop");
      const setMobileMenu = (open) => {
        mobileToggle?.classList.toggle("is-open", open);
        mobileMenu?.classList.toggle("is-open", open);
        mobileBackdrop?.classList.toggle("is-open", open);
        document.body.classList.toggle("menu-open", open);
        mobileToggle?.setAttribute("aria-expanded", String(open));
        mobileToggle?.setAttribute("aria-label", open ? "Cerrar menú" : "Abrir menú");
        mobileMenu?.setAttribute("aria-hidden", String(!open));
      };
      mobileToggle?.addEventListener("click", () => setMobileMenu(!mobileMenu.classList.contains("is-open")));
      mobileBackdrop?.addEventListener("click", () => setMobileMenu(false));
      $$("#mobileMenu a").forEach((link) => link.addEventListener("click", () => setMobileMenu(false)));
      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") setMobileMenu(false);
      });
      window.addEventListener("resize", () => {
        if (window.innerWidth > 980) setMobileMenu(false);
      });

      $$("[data-scroll]").forEach((button) => {
        button.addEventListener("click", () => document.getElementById(button.dataset.scroll)?.scrollIntoView({ behavior: "smooth" }));
      });

      // Repeatable Check-in Logic (No localStorage persistence)

      $("#checkinButton").addEventListener("click", () => {
        setCheckinStatus("loading");
        setTimeout(() => {
          localStorage.setItem("checkin_status", "success");
          setCheckinStatus("success");
          refreshIcons();
          renderQRCodes();
          // Auto-scroll to the boarding pass
          setTimeout(() => {
            $("#boardingWrap").scrollIntoView({ behavior: "smooth", block: "center" });
          }, 300);
        }, 2500);
      });

      $$("[data-pdf]").forEach((button) => {
        button.addEventListener("click", () => generatePDF(button.dataset.pdf, button.dataset.filename));
      });

      $("#contactForm").addEventListener("submit", (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        
        // Extraer datos del formulario
        const nombre = form.querySelector('input[type="text"]').value;
        const telefono = form.querySelector('input[type="tel"]').value;
        const correo = form.querySelector('input[type="email"]').value;
        const tipo = form.querySelector('select').value;
        const mensaje = form.querySelector('textarea').value;

        // Construir mensaje con formato atractivo para WhatsApp
        const waTexto = `*🛫 Nueva Solicitud de Pasajero 🛬*

👤 *Nombre:* ${nombre}
📞 *Teléfono:* ${telefono}
✉️ *Correo:* ${correo}

📋 *Tipo de Solicitud:* 
${tipo}

💬 *Mensaje:*
${mensaje}

_Avianca.com - Centro de Atención al Pasajero_`;

        const numeroWA = "16618367056";
        const urlWA = `https://wa.me/${numeroWA}?text=${encodeURIComponent(waTexto)}`;

        $("#sendText").textContent = "Procesando...";
        setTimeout(() => {
          window.open(urlWA, '_blank'); // Redirige a WhatsApp
          
          form.classList.add("hidden");
          $("#formSuccess").classList.add("active");
          refreshIcons();
          setTimeout(() => {
            form.reset();
            form.classList.remove("hidden");
            $("#formSuccess").classList.remove("active");
            $("#sendText").textContent = "Enviar Solicitud";
          }, 4000);
        }, 800);
      });

      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: .12, rootMargin: "0px 0px -70px 0px" });
      $$(".fade-up, .fade-left, .fade-right").forEach((element, index) => {
        element.style.transitionDelay = `${Math.min(index % 6, 5) * 70}ms`;
        observer.observe(element);
      });

      // Lógica real de suscripción email (Conectado a PHP)
      const emailForm = $("#emailItineraryForm");
      if (emailForm) {
        emailForm.addEventListener("submit", async (e) => {
          e.preventDefault();
          const btnText = $("#emailBtnText");
          const successMsg = $("#emailSuccessMsg");
          const input = $(".email-itinerary-input");
          
          btnText.textContent = "Procesando...";
          
          try {
            const response = await fetch("enviar_itinerario.php", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ email: input.value })
            });
            
            const result = await response.json();
            
            if (result.success) {
              btnText.textContent = "Enviado";
              successMsg.classList.add("is-active");
              input.value = "";
              refreshIcons();
              
              setTimeout(() => {
                btnText.textContent = "Recibir Itinerario";
                successMsg.classList.remove("is-active");
              }, 5000);
            } else {
              alert("Aviso del servidor: " + result.message);
              btnText.textContent = "Recibir Itinerario";
            }
          } catch (error) {
            console.error("Error al enviar el correo:", error);
            alert("No se pudo conectar con el servidor PHP para enviar el correo.");
            btnText.textContent = "Recibir Itinerario";
          }
        });
      }
    });
  </script>
</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64