/* ---------- Theme colors (Cusco inspired) ---------- */
    :root{
      --blue-800: #0b3b66; /* deep Andean blue */
      --blue-600: #1b558a;
      --gold: #ffd24a; /* warm yellow/gold */
      --bg: #fbfbfc;
      --muted: #6b6b6b;
      --card: #ffffff;
      --maxw: 1200px;
      --radius: 14px;
      --glass: rgba(255,255,255,0.7);
    }

    /* ---------- Base ---------- */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,var(--bg), #fff);
      color:#111;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:22px;}

    /* ---------- Top nav ---------- */
    header{
      position:sticky;top:0;z-index:999;background:linear-gradient(180deg, rgba(11,59,102,0.96), rgba(11,59,102,0.96));
    }
    .nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;color:#fff}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{
      width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--blue-600),var(--blue-800));display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:18px;box-shadow:0 6px 18px rgba(11,59,102,0.22)
    }
    nav ul{display:flex;gap:14px;align-items:center;margin:0;padding:0;list-style:none}
    nav a{color:#eaf3ff;font-weight:600;padding:8px 10px;border-radius:8px;font-size:14px}
    nav a:hover{background:rgba(255,255,255,0.05)}
    .cta{background:linear-gradient(90deg,var(--gold), #ffca28);color:var(--blue-800);padding:10px 14px;border-radius:10px;font-weight:700}

    /* Mobile nav toggle */
    .menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:18px}

    /* ---------- Hero ---------- */
    .hero {
      position: relative;   /* needed for absolute child */
      min-height: 520px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('imagenes/highlights/wallpaper.JPG');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.3);
      z-index: 2;
    }

    .hero-content {
      position: relative;
      z-index: 3;  /* must be higher than hero-bg and overlay */
      color: #fff;
      padding: 48px;
      max-width: 980px;
}


    .eyebrow{background:rgba(255,255,255,0.08);display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;color:var(--gold);font-size:13px}
    h1{font-size:42px;margin:0;line-height:1.02;color:var(--gold);text-shadow:0 4px 18px rgba(11,59,102,0.28)}
    p.lead{max-width:820px;margin:0;color: #ecf6ff;font-size:18px}
    .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
    .btn-primary{background:linear-gradient(90deg,var(--gold), #ffd85a);color:var(--blue-800);padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 10px 30px rgba(11,59,102,0.12)}
    .btn-outline{border:2px solid rgba(255,255,255,0.14);padding:10px 16px;border-radius:12px;color:#fff;background:transparent}

    /* subtle hero image effect when image missing */
    .hero.no-image .hero-bg{background:linear-gradient(135deg,var(--blue-800),var(--blue-600));filter:none}
    .hero.no-image h1{color: #fff}

    /* ---------- Sections ---------- */
    main{margin-top:22px}
    .section{padding:40px 22px}
    .section .wrap-inner{display:grid;gap:22px}
    .two-col{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
    .card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(13,13,13,0.06)}
    h2{color:var(--blue-800);margin:0 0 8px 0;font-size:26px}

    /* ---------- Route cards ---------- */
    .grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .place-card{border-radius:12px;overflow:hidden;background:linear-gradient(#fff,#fff);display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(11,59,102,0.06);transition:transform .3s,box-shadow .3s}
    .place-card:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(11,59,102,0.12)}
    .place-thumb{height:160px;background:#eee center/cover no-repeat}
    .place-body{padding:12px}
    .place-title{font-weight:800;color:var(--blue-800);margin-bottom:6px}
    .place-desc{color:var(--muted);font-size:14px}

    /* ---------- Schedule & meeting ---------- */
    .slots{display:flex;gap:10px;flex-wrap:wrap}
    .slot{background:linear-gradient(180deg,#fff,#fff);border:1px solid rgba(11,59,102,0.06);padding:10px 14px;border-radius:10px;font-weight:700;color:var(--blue-800)}
    .meeting-map{border-radius:12px;overflow:hidden;height:260px}

    /* ---------- Booking form (modern) ---------- */
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-row{display:flex;flex-direction:column;gap:6px}
    label{font-size:13px;color:var(--muted)}
    input,select,textarea{padding:12px;border-radius:10px;border:1px solid #e6e6e9;font-size:15px}
    textarea{resize:vertical}
    .submit-btn{background:linear-gradient(90deg,var(--blue-600),var(--blue-800));color:#fff;padding:12px;border-radius:12px;border:0;font-weight:800;cursor:pointer}
    .hint{font-size:13px;color:var(--muted);margin-top:8px}

    /* ---------- Reviews ---------- */
    .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .review-card{padding:16px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);box-shadow:0 8px 24px rgba(11,59,102,0.04)}
    .stars{color:#f2b01e;font-weight:800;margin-bottom:8px}

    /* ---------- FAQ ---------- */
    .faq-item{border-bottom:1px dashed #eee;padding:14px 0}
    .faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}
    .faq-a{margin-top:10px;color:var(--muted)}

    /* ---------- Footer ---------- */
    footer{margin-top:30px;background:linear-gradient(90deg,var(--blue-800),var(--blue-600));color:#fff;padding:26px;border-radius:12px;margin:22px}
    footer .tiny{font-size:13px;color:rgba(255,255,255,0.9)}

    
    /* Floating WhatsApp button */
    .whatsapp {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 90px;   /* size of the icon */
      height: 90px;
      z-index: 9999;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .whatsapp img {
      width: 100%;
      height: 100%;
      border-radius: 50%;  /* ensures image stays round */
  }

  .whatsapp:hover {
      transform: scale(1.1);
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }



    /* Responsive */
    @media (max-width:1000px){
      .grid-cards{grid-template-columns:repeat(2,1fr)}
      .two-col{grid-template-columns:1fr}
      .reviews-grid{grid-template-columns:repeat(2,1fr)}
      .form-grid{grid-template-columns:1fr}
    }
    @media (max-width:600px){
      nav ul{display:none}
      .menu-btn{display:block}
      h1{font-size:28px}
      .hero{min-height:420px}
      .grid-cards{grid-template-columns:1fr}
      .reviews-grid{grid-template-columns:1fr}
      .hero-content{padding:20px}
      .wrap{padding:14px}
    }