:root{
    --blue-deep:#0A2E52;
    --blue-deep-2:#0E3B68;
    --blue-primary:#114C86;
    --blue-vivid:#1E76E0;
    --blue-sky:#5CA8E6;
    --gray-steel:#3E4750;
    --gray-cool:#F2F4F6;
    --gray-mist:#C9D1D8;
    --white:#FFFFFF;
    --cream:#F5F2EB;
    --cream-soft:#FAF8F4;
    --display: 'Titillium Web', sans-serif;
    --body: 'Manrope', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
  body{
    font-family:var(--body);
    color:var(--gray-steel);
    background:var(--white);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .eyebrow{
    font-family:var(--body);
    font-weight:700;
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--blue-sky);
  }
  .eyebrow.dark{color:var(--blue-vivid);}
  h1,h2,h3{
    font-family:var(--display);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.04;
    text-wrap:balance;
  }
  .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }
  :focus-visible{outline:3px solid var(--blue-vivid); outline-offset:3px;}

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:300;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 32px;
    background:rgba(10,46,82,0.96);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(10,46,82,0.18);
  }
  header.nav .brand{
    display:flex; align-items:center; gap:12px;
  }
  header.nav .brand-mark{
    width:32px; height:32px; flex-shrink:0;
  }
  header.nav .brand-logo{
    height:51px; width:auto; flex-shrink:0;
  }
  header.nav .brand-text{
    font-family:var(--display);
    font-weight:700;
    font-size:19px;
    letter-spacing:0.04em;
    color:var(--white);
    display:flex; flex-direction:column; line-height:1;
  }
  header.nav .brand-text em{
    font-style:normal;
    color:#5FD3E0;
    margin-left:0.14em;
  }
  header.nav .brand-text small{
    font-family:var(--body);
    font-weight:600;
    font-size:9px;
    letter-spacing:0.32em;
    color:var(--blue-sky);
    margin-top:5px;
  }
  nav.links{display:flex; align-items:center; gap:36px;}
  nav.links a{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--white);
    opacity:0.85;
    position:relative;
    padding-bottom:4px;
  }
  nav.links a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:2px; background:var(--blue-sky);
    transition:width .3s ease;
  }
  nav.links a:hover{opacity:1;}
  nav.links a:hover::after{width:100%;}
  nav.links a.nav-social{ padding-bottom:0; display:flex; align-items:center; }
  nav.links a.nav-social::after{ content:none; }
  nav.links a.nav-social img{ width:20px; height:20px; display:block; }
  nav.links a.nav-social:hover{ transform:scale(1.08); }
  .menu-btn{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; position:relative; z-index:301;}
  .menu-btn span{width:24px; height:2px; background:var(--white); display:block;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh; /* evita el salto por la barra de direcciones de Safari/Chrome iOS */
    display:flex; align-items:center;
    background:var(--blue-deep);
    overflow:hidden;
  }
  .hero-slider{
    position:absolute; inset:0; z-index:0;
    overflow:hidden;
  }
  .hero-slides-track{
    position:absolute; inset:0;
    transform:scale(1.08);
    will-change:transform;
  }
  .hero-slide{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1.1s ease;
  }
  .hero-slide.is-active{ opacity:1; z-index:1; }
  .hero-photo{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
  }
  .hero-arrow{
    position:absolute; top:50%; z-index:5;
    transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,26,46,0.65);
    border:1.5px solid rgba(255,255,255,0.9);
    box-shadow:0 4px 16px rgba(0,0,0,0.35);
    color:var(--white);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
  }
  .hero-arrow:hover{ background:rgba(8,26,46,0.85); transform:translateY(-50%) scale(1.06); }
  .hero-arrow svg{ width:20px; height:20px; }
  .hero-arrow-prev{ left:20px; }
  .hero-arrow-next{ right:20px; }
  .hero-dots{
    position:absolute; left:50%; bottom:22px; z-index:5;
    transform:translateX(-50%);
    display:flex; gap:10px;
    padding:7px 10px;
    background:rgba(8,26,46,0.4);
    border-radius:100px;
  }
  .hero-dot{
    width:9px; height:9px; border-radius:50%;
    background:rgba(255,255,255,0.5);
    border:1.5px solid rgba(255,255,255,0.9);
    cursor:pointer; padding:0;
    transition:background .2s ease, transform .2s ease;
  }
  .hero-dot.is-active{ background:var(--white); transform:scale(1.15); }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(8,26,46,0.38) 0%, rgba(8,26,46,0.18) 35%, rgba(8,26,46,0.48) 100%);
  }
  .hero-content{
    position:relative; z-index:2;
    width:100%;
  }
  /* En anchos intermedios (tablets/notebooks angostas) el contenedor ya no se centra
     con margen automático, así que el texto queda pegado al borde y se superpone
     con las flechas del carrusel. Le damos aire extra solo en ese rango. */
  @media (min-width:561px) and (max-width:1119px){
    .hero-content{ padding-left:88px; padding-right:88px; }
  }
  .hero-content .eyebrow{
    display:inline-block;
    margin-bottom:20px;
    padding:8px 16px;
    background:rgba(255,255,255,0.78);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    border-radius:4px;
    color:var(--blue-primary);
    text-shadow:none;
  }
  .hero h1{
    color:var(--white);
    font-weight:900;
    font-size:clamp(40px, 7vw, 84px);
    letter-spacing:-0.01em;
    max-width:680px;
    text-shadow:0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
  }
  .hero h1 span{ display:block; color:var(--blue-sky); }
  .hero-sub{
    margin-top:24px;
    max-width:480px;
    font-size:17px;
    line-height:1.6;
    color:rgba(255,255,255,0.92);
    font-weight:500;
    text-shadow:0 2px 12px rgba(0,0,0,0.5);
  }
  .hero-cta{
    margin-top:40px;
    display:inline-flex; align-items:center; gap:12px;
    color:var(--white);
    font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
    text-shadow:0 2px 8px rgba(0,0,0,0.5);
  }
  .hero-cta .dot{
    width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.5);
    display:flex; align-items:center; justify-content:center;
    animation:bob 2.4s ease-in-out infinite;
  }
  @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

  /* ---------- SPECS BAR ---------- */
  .specs-bar{
    background:var(--white);
    border-bottom:1px solid var(--gray-mist);
    padding:26px 0;
  }
  .specs-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
    text-align:center;
  }
  .spec{ display:flex; flex-direction:column; gap:4px; }
  .spec-num{
    font-family:var(--display); font-weight:700; font-size:22px;
    color:var(--blue-primary); letter-spacing:0.01em;
  }
  .spec-label{
    font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gray-steel); opacity:0.7;
  }

  /* ---------- ROUTE / SIGNATURE STRIP ---------- */
  .route-strip{
    position:relative;
    background:var(--gray-cool);
    padding:64px 0 80px;
  }
  .route-strip .container{max-width:1130px;}
  .route-label{
    text-align:center;
    font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--blue-primary);
    margin-bottom:28px;
  }
  .route-svg{width:100%; height:auto;}
  .route-path{
    fill:none;
    stroke:var(--blue-vivid);
    stroke-width:2.5;
    stroke-dasharray:6 9;
    stroke-linecap:round;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 1.8s cubic-bezier(.22,.8,.32,1);
  }
  .route-strip.in-view .route-path{ stroke-dashoffset:0; }
  .route-node circle{ fill:var(--blue-deep); }
  .route-node.end circle{ fill:var(--blue-vivid); }
  .route-node text{
    font-family:var(--body); font-weight:700; font-size:24px;
    fill:var(--gray-steel); text-transform:uppercase; letter-spacing:0.06em;
  }
  .route-node .sub{ font-weight:500; fill:#8792a0; font-size:20px; }

  .route-mobile{ display:none; }

  /* ---------- SECTION GENERIC ---------- */
  section{ position:relative; padding:120px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(34px,5vw,54px); margin-top:14px; color:var(--blue-deep); font-weight:900; }
  .section-head p{ margin-top:20px; font-size:17px; line-height:1.7; color:var(--gray-steel); }

  /* ---------- EXPERIENCIA DE VIAJE ---------- */
  .experiencia{ background:var(--gray-cool); padding-top:64px; }
  .experiencia .section-head{ max-width:960px; }
  .exp-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    margin-top:12px;
  }
  .exp-card{
    background:var(--white);
    border:1px solid var(--gray-mist);
    border-radius:16px;
    padding:30px 26px;
    text-align:center;
  }
  .exp-card svg{ width:40px; height:40px; margin:0 auto 20px; }
  .exp-card h3{
    font-size:18px; letter-spacing:0.02em; color:var(--blue-deep); margin-bottom:10px;
  }
  .exp-card p{ font-size:14px; line-height:1.6; color:var(--gray-steel); }

  /* ---------- NOSOTROS ---------- */
  .nosotros{ background:var(--cream-soft); padding-bottom:64px; }
  .nosotros-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;
  }
  .chip-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
  .chip{
    padding:10px 18px; border:1.5px solid var(--gray-mist); border-radius:100px;
    font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--blue-primary);
  }
  .trust-card{
    background:var(--blue-deep);
    border-radius:18px;
    padding:38px 34px;
    color:var(--white);
    position:relative;
    overflow:hidden;
  }
  .trust-card::before{
    content:'';
    position:absolute; right:-40px; top:-40px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, rgba(92,168,230,0.35), transparent 70%);
  }
  .trust-card .num{
    font-family:var(--display); font-size:64px; font-weight:700; color:var(--blue-sky); line-height:1;
  }
  .trust-card .num-label{
    font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    margin-top:8px; color:rgba(255,255,255,0.75);
  }
  .trust-card .divider{ height:1px; background:rgba(255,255,255,0.18); margin:26px 0; }
  .trust-card .safety{
    font-size:14px; line-height:1.6; color:rgba(255,255,255,0.85); font-weight:500;
  }
  .trust-card .safety b{ color:var(--white); }

  /* ---------- SERVICIOS ---------- */
  .servicios{
    background:linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-primary) 100%);
    color:var(--white);
  }
  .servicios .section-head h2{ color:var(--white); }
  .servicios .section-head p{ color:rgba(255,255,255,0.78); }
  .cards{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  .card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:16px;
    padding:32px 28px;
    transition:transform .3s ease, background .3s ease;
  }
  .card:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.1); }
  .card .icon{ width:38px; height:38px; margin-bottom:22px; }
  .card h3{
    font-size:22px; letter-spacing:0.02em; margin-bottom:12px; color:var(--white);
  }
  .card p{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,0.78); }

  .destino{
    margin-top:64px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:20px;
    padding:44px;
    display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  }
  .destino .eyebrow{ color:var(--blue-sky); }
  .destino h3{ font-size:30px; color:var(--white); margin:10px 0 12px; font-weight:900; }
  .destino p{ font-size:15px; line-height:1.7; color:rgba(255,255,255,0.82); max-width:520px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .tag{
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:8px 14px; border-radius:100px;
    background:rgba(92,168,230,0.16); color:var(--blue-sky);
    border:1px solid rgba(92,168,230,0.35);
  }

  /* ---------- DESTINO: PASE DE FOTOS ---------- */
  .destino-slider{
    position:relative; width:280px; max-width:100%;
    aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  }
  .destino-slides-track{ position:absolute; inset:0; }
  .destino-slide{
    position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  }
  .destino-slide.is-active{ opacity:1; z-index:1; }
  .destino-slide .ph-img{
    width:100%; height:100%; border-radius:0; margin:0;
  }
  .destino-arrow{
    position:absolute; top:50%; z-index:5;
    transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,26,46,0.55);
    border:1.5px solid rgba(255,255,255,0.85);
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    color:var(--white); cursor:pointer;
    transition:background .2s ease;
  }
  .destino-arrow:hover{ background:rgba(8,26,46,0.8); }
  .destino-arrow svg{ width:14px; height:14px; }
  .destino-arrow-prev{ left:8px; }
  .destino-arrow-next{ right:8px; }

  /* ---------- CONTACTO ---------- */
  .contacto{
    background:var(--gray-cool);
    text-align:center;
  }
  .contacto .container{ max-width:640px; }
  .contacto .eyebrow{ color:var(--blue-primary); }
  .contacto h2{ color:var(--blue-deep); margin-top:14px; font-size:clamp(34px,5vw,54px); font-weight:900; }
  .contacto p{ margin-top:18px; font-size:17px; line-height:1.7; }
  .contacto-actions{
    margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  }
  .contacto-legal{
    margin-top:24px; font-size:12px; letter-spacing:0.03em; color:var(--gray-steel);
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 30px; border-radius:100px;
    font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary{
    background:var(--blue-vivid); color:var(--white);
    box-shadow:0 10px 24px rgba(30,118,224,0.35);
  }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(30,118,224,0.45); }
  .btn-ghost{
    background:transparent; color:var(--blue-deep); border:1.5px solid var(--gray-mist);
  }
  .btn-ghost:hover{ border-color:var(--blue-vivid); color:var(--blue-vivid); }

  footer{
    padding:34px 20px; text-align:center;
    background:var(--blue-deep); color:rgba(255,255,255,0.55);
    font-size:12px; letter-spacing:0.05em;
    display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  }
  .footer-main{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
  .footer-social{ display:flex; opacity:0.85; transition:opacity .2s ease, transform .2s ease; flex-shrink:0; }
  .footer-social:hover{ opacity:1; transform:scale(1.08); }
  .footer-social img{ width:20px; height:20px; display:block; }

  /* ---------- BARRA FIJA WHATSAPP ---------- */
  .whatsapp-fab{
    position:fixed; right:20px; bottom:20px; z-index:200;
    width:58px; height:58px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#25D366; color:var(--white);
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .whatsapp-fab:hover{ transform:scale(1.06); box-shadow:0 8px 24px rgba(0,0,0,0.34); }
  .whatsapp-fab svg{ width:28px; height:28px; }

  /* ---------- FOTOS (placeholders reales en /img, ver medidas en cada archivo) ---------- */
  .ph-img{
    width:100%; height:auto; display:block;
    border-radius:14px; object-fit:cover;
  }
  .photo-banner{ aspect-ratio:21/9; margin-top:56px; }
  .card-photo{ aspect-ratio:3/2; margin-bottom:20px; }
  .destino-photo{ aspect-ratio:1/1; width:100%; max-width:280px; }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:860px){
    .nav-wa-icon{ display:none; }
    nav.links{
      position:fixed; top:0; right:0; height:100vh; height:100svh; width:72%; max-width:320px;
      background:var(--blue-deep); flex-direction:column; justify-content:center; align-items:flex-start;
      padding:0 40px; gap:28px;
      transform:translateX(100%); transition:transform .4s ease;
    }
    nav.links.open{ transform:translateX(0); }
    .menu-btn{ display:flex; }
    .nosotros-grid{ grid-template-columns:1fr; gap:40px; }
    .cards{ grid-template-columns:1fr; }
    .destino{ grid-template-columns:1fr; text-align:left; }
    .destino-photo{ max-width:100%; margin-top:8px; }
    .destino-slider{ width:100%; margin-top:8px; }
    .exp-grid{ grid-template-columns:1fr 1fr; gap:16px; }
    .specs-grid{ grid-template-columns:repeat(2,1fr); gap:22px 16px; }
    .photo-banner{ margin-top:36px; }
    section{ padding:56px 0; }
    .route-strip{ padding:44px 0 56px; }
    .destino{ padding:32px; margin-top:44px; }
  }
  @media (max-width:560px){
    .exp-grid{ grid-template-columns:1fr; }
    .specs-grid{ grid-template-columns:1fr 1fr; gap:18px 14px; }
    .hero h1{ font-size:clamp(34px, 11vw, 56px); }
    .destino{ padding:26px; }

    /* Ruta: en mobile, línea de tiempo vertical con texto HTML normal en vez del SVG (que se hace ilegible al achicarse) */
    .route-svg{ display:none; }
    .route-card{
      background:var(--white);
      border-radius:20px;
      padding:32px 28px 30px;
      box-shadow:0 14px 34px rgba(10,46,82,0.10);
    }
    .route-mobile{
      display:block; list-style:none; position:relative;
      margin-top:14px; padding-left:22px;
      border-left:2px dashed var(--gray-mist);
    }
    .route-mobile-item{ position:relative; padding-bottom:26px; }
    .route-mobile-item:last-child{ padding-bottom:0; }
    .route-mobile-dot{
      position:absolute; left:-29px; top:3px;
      width:12px; height:12px; border-radius:50%;
      background:var(--blue-deep); border:3px solid var(--white);
      z-index:1;
    }
    .route-mobile-item.end .route-mobile-dot{ background:var(--blue-vivid); }
    .route-mobile strong{
      display:block; font-family:var(--body);
      font-size:16px; font-weight:700; letter-spacing:0.01em;
      color:var(--gray-steel); text-transform:none;
    }
    .route-mobile small{
      display:block; font-size:12.5px; font-weight:600;
      letter-spacing:0.06em; text-transform:uppercase;
      color:#8792a0; margin-top:2px;
    }
    /* Punto que recorre la línea de ida y vuelta, como un vuelo */
    .route-plane{
      position:absolute; left:-8px; top:0;
      width:14px; height:14px; border-radius:50%;
      background:var(--blue-vivid);
      box-shadow:0 0 0 6px rgba(30,118,224,0.16), 0 2px 6px rgba(10,46,82,0.3);
      animation:routeFly 4.5s ease-in-out infinite alternate;
    }
    @keyframes routeFly{
      0%{ top:0; }
      100%{ top:calc(100% - 14px); }
    }

    /* Hero: en pantallas angostas, texto arriba sobre azul sólido + foto completa abajo (sin recorte) */
    .hero{
      flex-direction:column; align-items:stretch; justify-content:flex-start;
      min-height:auto; height:auto;
      padding-top:104px; padding-bottom:0;
    }
    .hero-overlay{ display:none; }
    .hero-content{ order:1; padding-bottom:32px; }
    .hero h1, .hero-content .eyebrow, .hero-sub, .hero-cta{ text-shadow:none; }
    .hero-cta{ margin-top:28px; margin-bottom:36px; color:var(--blue-deep); }
    .hero-cta .dot{ border-color:rgba(10,46,82,0.35); }
    .hero-sub{ color:var(--gray-steel); }
    .hero h1{ color:var(--blue-deep); }
    .hero h1 span{ color:var(--blue-primary); }
    .hero-content .eyebrow{
      color:var(--blue-primary);
      background:none; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none;
    }
    .hero{ background:var(--cream); }
    .hero-slider{
      order:2;
      position:relative; inset:auto;
      width:100%; height:auto;
      aspect-ratio:900/506;
      border-radius:16px;
      overflow:hidden;
      background:none;
    }
    .hero-slides-track{ transform:none; will-change:auto; }
    .hero-photo{ object-fit:cover; }
    .hero-arrow{ width:36px; height:36px; }
    .hero-arrow svg{ width:16px; height:16px; }
    .hero-arrow-prev{ left:10px; }
    .hero-arrow-next{ right:10px; }
    .hero-dots{ bottom:12px; }
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .route-path{ stroke-dashoffset:0 !important; transition:none; }
    .hero-cta .dot{ animation:none; }
    .route-plane{ animation:none; top:calc(50% - 7px); }
  }