/* ============ TOKENS ============ */
  :root{
    --periwinkle: #6C74E1;
    --periwinkle-deep: #2E306B;
    --periwinkle-pale: #ECEDFA;
    --charcoal: #21222A;
    --amber: #F5A623;
    --amber-light: #FFDDA1;
    --paper: #F7F7FC;
    --line: #DCDDEF;
    --white: #FFFFFF;

    --font-display: 'Big Shoulders Display', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --container: 1180px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    font-family: var(--font-body);
    color: var(--charcoal);
    background: var(--paper);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:700; letter-spacing:0.01em; }
  p{ margin:0; }
  button{ font-family:inherit; cursor:pointer; }

  :focus-visible{
    outline: 3px solid var(--amber);
    outline-offset: 3px;
  }

  .wrap{
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px  28px; /*probably too much for the header*/
  }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--periwinkle);
    display:flex;
    align-items:center;
    gap:10px;
    font-weight: 500;
  }
  /*.eyebrow::before{
    content:"";
    width: 22px; height: 2px;
    background: var(--amber);
  }*/

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-amber{ background: var(--amber); color: var(--charcoal); }
  .btn-amber:hover{ background: var(--amber-light); }
  .btn-outline{ border-color: rgba(255,255,255,0.5); color:var(--white); }
  .btn-outline:hover{ background: rgba(255,255,255,0.12); }
  .btn-outline-dark{ border-color: var(--charcoal); color:var(--charcoal); }
  .btn-outline-dark:hover{ background: var(--charcoal); color: var(--white); }
  .btn-periwinkle{background:var(--periwinkle-deep); color: var(--amber-light);}
  .btn-periwinkle:hover{background:var(--periwinkle); color: var(--amber-light);}

  /* ============ NAV ============ */

  header.site{
    position: fixed;
    top:0; left:0; right:0; 
    z-index: 100;
    padding: 0 0;
    transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
  }
  header.site .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;/*will comeback to this*/
  }

  header a img{
   height: auto; 
   width: 5rem;
   transition: width 0.4s ease;
  }

  header a img.resize{
    width: 5rem;
  }

 

  .logo{
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight:800;
    letter-spacing: 0.02em;
    color: var(--white);
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .logo span.dot{ color: var(--amber); }
  .logo small{
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    font-weight:400;
  }
  header.site.scrolled{
    background: rgba(33,34,42,0.92);
    backdrop-filter: blur(8px);
    padding: 0;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  }

  nav.primary-nav ul{
    display:flex;
    gap: 50px;
    align-items:center;
  }
  nav.primary-nav a{
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    transition: color .2s ease;
  }
  nav.primary-nav a:hover{ color: var(--amber); }

  .nav-cta{ display:flex; align-items:center; gap:18px; }

  .nav-toggle{
    display:none;
    background:none;
    border:none;
    width: 40px; height: 34px;
    position:relative;
  }
  .nav-toggle span{
    position:absolute; left:6px; right:6px; height:2px;
    background: var(--white);
    transition: transform .25s ease, opacity .25s ease, top .25s ease;
  }
  .nav-toggle span:nth-child(1){ top:9px; }
  .nav-toggle span:nth-child(2){ top:17px; }
  .nav-toggle span:nth-child(3){ top:25px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ top:17px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ top:17px; transform:rotate(-45deg); }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    background: linear-gradient(175deg, var(--periwinkle-deep) 0%, #1D1E48 62%, var(--charcoal) 100%);
    color: var(--white);
    padding: 100px 0 10px;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items:center;
    position:relative;
    z-index: 2;
  }
  .hero h1{
    font-size: clamp(2.6rem, 5.2vw, 4.3rem);
    line-height: 0.98;
    text-transform: uppercase;
    margin: 18px 0 22px;
  }
  .hero h1 em{
    font-style: normal;
    color: var(--amber);
  }
  .hero p.lead{
    font-size: 1.08rem;
    color: rgba(255,255,255,0.78);
    max-width: 460px;
    margin-bottom: 34px;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

  .hero-visual{
    position:relative;
    height: 340px;
    width: 100%;
    max-width: 460px; /* 1. Crucial: Locks the maximum width to match the SVG viewBox */
    margin: 0 auto;
  }
  .route-svg, .plane-container{ position:absolute; inset:0; width:100%; height:100%; }
  .route-svg path{
    fill:none;
    stroke: rgba(255,255,255,0.35);
    stroke-width: 2;
    stroke-dasharray: 2 10;
    stroke-linecap: round;
  }
  .route-point{
    position:absolute;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--white);
    text-align:center;
  }
  .route-point .code{
    font-family: var(--font-display);
    font-weight:700;
    font-size: 1.1rem;
    color: var(--amber);
    display:block;
  }
  .route-point.origin{ top: 62%; left: 2%; }
  .route-point.mid{ top: 4%; left: 46%; text-align:center; }
  .route-point.dest{ top: 58%; right: 0%; text-align:right; }

  .hero-plane{
    position:absolute;
    font-size: 1.3rem;
    offset-path: path("M20,170 C120,60 300,50 430,90");
    /*offset-path: path("M20,170 C120,60 300,50 430,90");*/
    offset-rotate: auto;
    animation: fly 9s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    z-index: 10;
  }
  @keyframes fly {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}
  @media (prefers-reduced-motion: reduce){
    .hero-plane{ animation:none; left:44%; top:8%; }
  }

  /* ============ TICKER ============ */
  .ticker{
    background: var(--charcoal);
    color: var(--amber);
    overflow:hidden;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .ticker-track{
    display:flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
    padding: 12px 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
  }
  .ticker-track span{ padding: 0 26px; white-space:nowrap; opacity:0.9; }
  .ticker-track span::after{ content:"✦"; margin-left:26px; color: rgba(255,255,255,0.25); }
  @keyframes scroll-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .ticker-track{ animation: none; }
  }

  /* ============ SECTION GENERIC ============ */
  section{ padding: 40px 0 0; }
  .section-head{
    max-width: 640px;
    margin-bottom: 56px;
  }
  .section-head h2{
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    margin-top: 14px;
    text-transform: uppercase;
    line-height: 1.02;
  }
  .section-head p{
    margin-top: 16px;
    color: #55576A;
    font-size: 1.2rem;
  }

  [data-reveal]{
    opacity:0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
  }
  [data-reveal].in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1; transform:none; transition:none; }
  }

  /* ============ SERVICES — TICKETS ============ */
  .services{ background: var(--paper); }
  .ticket-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .ticket{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow:hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    transition: transform .25s ease, box-shadow .25s ease;
    display:flex;
    flex-direction:column;
  }
  .ticket:hover{ transform: translateY(-10px); box-shadow: 0 18px 34px rgba(46,48,107,0.14); }
  .ticket-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 20px 22px;
    background: var(--periwinkle-deep);
    color: var(--white);
  }
  .ticket-top .code{
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--amber-light);
  }
  .ticket-top .icon{ width:26px; height:26px; color: var(--amber); }
  .ticket-body{ padding: 24px 22px 18px; flex:1; }
  .ticket-body h3{
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .ticket-body p{ color:#5B5D70; font-size:0.95rem; }

  .ticket-perf{
    position:relative;
    height: 0;
    border-top: 2px dashed var(--line);
    margin: 4px 0;
  }
  .ticket-perf::before, .ticket-perf::after{
    content:"";
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:20px; height:20px;
    background: var(--paper);
    border-radius:50%;
  }
  .ticket-perf::before{ left:-10px; }
  .ticket-perf::after{ right:-10px; }

  .ticket-foot{
    padding: 14px 22px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .ticket-foot .tag{
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#8688A0;
  }
  .barcode{
    height: 26px;
    width: 84px;
    background: repeating-linear-gradient(90deg, var(--charcoal) 0 2px, transparent 2px 4px, var(--charcoal) 4px 6px, transparent 6px 9px);
    opacity: 0.85;
  }

  /* ============ HOW IT WORKS ============ */
  .how{ background: var(--periwinkle-pale); }
  .steps{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .step{
    background: var(--white);
    border-radius: 14px;
    padding: 28px 24px;
    border: 1px solid var(--line);
    position:relative;
  }
  .step .num{
    font-family: var(--font-mono);
    color: var(--periwinkle);
    font-size: 0.85rem;
    letter-spacing:0.06em;
  }
  .step h3{
    font-size: 1.25rem;
    margin: 14px 0 10px;
    text-transform: uppercase;
    line-height:1.1;
  }
  .step p{ color:#5B5D70; font-size:0.92rem; }
  .step:not(:last-child)::after{
    position:absolute;
    right:-30px; top:50%;
    transform:translateY(-50%);
    color: var(--periwinkle);
    font-size:1.2rem;
    display:none;
  }

  .step:hover{ transform: translateY(-10px); box-shadow: 0 18px 34px rgba(46,48,107,0.14); }

  @media (min-width: 901px){
    .step:not(:last-child)::after{ display:block; }
  }

  /* ============ DESTINATIONS ============ */
  .destinations{ background: var(--paper); }
  .dest-grid{
    position: relative;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .dest-card{
    position:relative;
    border-radius: 16px;
    padding: 26px;
    min-height: 210px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color: var(--white);
    overflow:hidden;
    isolation:isolate;
  }
  .dest-card::before{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    opacity: 0.94;
  }
  .dest-card.v1::before{ background: linear-gradient(135deg, #565EDB, #2A2C64); }
  .dest-card.v2::before{ background: linear-gradient(135deg, #3B3E86, #1B1C40); }
  .dest-card.v3::before{ background: linear-gradient(135deg, #F5A623, #C97C0C); }
  .dest-card.v4::before{ background: linear-gradient(135deg, #6C74E1, #33366F); }
  .dest-card.v5::before{ background: linear-gradient(135deg, #21222A, #454764); }
  .dest-card.v6::before{ background: linear-gradient(135deg, #4A50B8, #14152E); }

  .dest-card .icon{ width:30px; height:30px; opacity:0.9}
  .dest-card .tag{
    align-self:flex-start;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    background: rgba(255,255,255,0.16);
    padding: 5px 10px;
    border-radius: 999px;
    margin-top:14px;
  }
  .dest-card h3{
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 30px;
  }
  .dest-card .coords{
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
  }

.dest-card:hover{ transform: translateY(-10px); box-shadow: 0 18px 34px rgba(46,48,107,0.14); }


.works-slider {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  overflow: hidden;
}

.works-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 500px;
  overflow: hidden;
  cursor: pointer;
  transition:
    flex 700ms cubic-bezier(0.25, 1, 0.5, 1);
}

.works-panel:hover {
  flex: 2 1 0;
}

.works-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.works-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 700ms ease;
}

.works-panel:hover .works-image {
  transform: scale(1.05);
}

.works-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transform: translateY(100%);
  transition:
    transform 500ms ease-out;
  color: white;
  background: rgba(255, 255, 255, 0.26);
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.6px);
  -webkit-backdrop-filter: blur(4.6px);
}

.works-panel:hover .works-info {
  transform: translateY(0);
}

.works-category {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.works-name {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

.works-icon {
  margin-bottom: 4px;
  font-size: 24px;
}



  /* ============ VALUES ============ */
  .values{ background: var(--charcoal); color: var(--white); }
  .values .wrap{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .value h4{
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--amber);
    margin-bottom: 12px;
  }
  .value p{ color: rgba(255,255,255,0.75); font-size:0.96rem; }

  /* ============ CONTACT ============ */
  .contact{ background: var(--periwinkle-pale); }
  .contact-grid{
    display:grid;
    gap: 54px;
    justify-content: center;
  }
  .contact-info h2{
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    text-transform: uppercase;
    margin: 14px 0 18px;
  }
  .contact-info p{ color:#4C4E63; margin-bottom: 26px; max-width:420px; }
  .contact-channels{ display:flex; flex-direction:row; gap:14px; flex-wrap: wrap; }
  .channel{
    display:flex; align-items:center; gap:12px;
    font-family: var(--font-mono);
    font-size:0.9rem;
  }
  .channel .icon{ width:20px; height:20px; }

  form.quote-form{
    background: var(--white);
    border-radius: 18px;
    padding: 34px;
    border: 1px solid var(--line);
  }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  .field{ margin-bottom: 18px; }
  .field label{
    display:block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#5B5D70;
    margin-bottom:8px;
  }
  .field input, .field select, .field textarea{
    width:100%;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--paper);
    transition: border-color .2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color: var(--periwinkle);
    outline:none;
  }
  .field textarea{ resize: vertical; min-height: 90px; }
  form.quote-form .btn{ width:100%; border:none; }
  .form-success{
    display:none;
    align-items:center;
    gap:10px;
    background: var(--periwinkle-pale);
    border: 1px solid var(--periwinkle);
    color: var(--periwinkle-deep);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.92rem;
    margin-top: 14px;
  }
  .form-success.show{ display:flex; }
  .btn-submit-form{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }

  .contact-check{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  

  /* ============ FOOTER ============ */
  footer.site{
    background: var(--charcoal);
    color: rgba(255,255,255,0.7);
    padding: 10px 0 28px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    row-gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  footer.site .logo{ margin-bottom: 14px; }
  footer.site .about{ font-size:0.9rem; max-width:280px; color: rgba(255,255,255,0.55); }
  footer.site h5{
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color: var(--amber);
    margin-bottom: 16px;
  }
  footer.site ul li{ margin-bottom:10px; font-size:0.9rem; }
  footer.site ul li a:hover{ color: var(--white); }
  .footer-bottom{
    padding-top: 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    flex-wrap:wrap;
    gap:10px;
  }

  .contact-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
  
  footer a img{
   height: auto; 
   width: 5rem;
   transition: width 0.4s ease;
  }


  /* ============ RESPONSIVE ============ */
  @media (max-width: 1000px){
    .site a img {width: 4rem;}
    .hero .wrap{ grid-template-columns: 1fr; }
    .hero-visual{display: none;}
    .ticket-grid{ grid-template-columns: repeat(2,1fr); }
    .steps{ grid-template-columns: repeat(2,1fr); }
    .dest-grid{ grid-template-columns: repeat(2,1fr); }
    .values .wrap{ grid-template-columns:1fr; gap:28px; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .works-section {padding: 56px 32px;}
    .works-panel {  position: relative;flex: 1 1 0;min-width: 0;height: 460px;overflow: hidden;cursor: pointer; transition:flex 700ms cubic-bezier(0.25, 1, 0.5, 1);}
    .works-panel:hover {flex: 2.5 1 0;}
    .works-panel:hover .works-image {transform: scale(1.05);}
    .works-info {padding: 20px;}
    .works-name {font-size: 25px;}
  }

  @media (max-width: 900px){
    .hero-visual{display: none;}
    .site a img {width: 5rem;}
    nav.primary-nav{
      position:fixed; inset: 0 0 0 auto;
      width: min(320px, 82vw);
      height: max-content;
      background: var(--periwinkle-deep);
      padding: 100px 32px 32px;
      transform: translateX(100%);
      transition: transform .3s ease;    }
    nav.primary-nav.open{ transform: translateX(0); }
    nav.primary-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
    nav.primary-nav a{ font-size:1.1rem; }
    .nav-cta .btn-amber{ display:none; }
    .nav-toggle{ display:block; }
    .works-section {padding: 48px 24px;}
    .works-header {text-align: left;}
    .works-description {margin: 0;}
    .works-slider {gap: 6px;}
    .works-panel {height: 400px;}
    .works-panel:hover {flex: 2 1 0;}
    .works-info {padding: 16px;}
    .works-category {font-size: 11px;}
    .works-name {font-size: 22px;}
    .works-icon {font-size: 20px;}
  }

  @media (max-width: 640px){
    .hero-visual{display: none;}
    .site a img {width: 4rem;}
    section{ padding: 50px 0 0; }
    .ticket-grid{ grid-template-columns: 1fr; }
    .steps{ grid-template-columns: 1fr; }
    .step:not(:last-child)::after{ display:none; }
    .dest-grid{ grid-template-columns: 1fr; }
    .form-row{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns: 1fr; row-gap: 20px;}
    .route-point.mid{ display:none; }
    .contact-channels{flex-direction: column; align-items: center;}
    .works-section {padding: 40px 16px;}
    .works-title {font-size: 30px;}
    .works-description {font-size: 14px;line-height: 1.5;}
    .works-slider {flex-direction: row;flex-wrap: wrap; align-items: center; justify-content: center;}
    .works-panel {flex: none; flex-wrap: wrap; width: 180px; transition: none;}
    .works-panel:hover {flex: none;}
    .works-panel:hover .works-image {transform: none;    }
    .works-panel:hover .works-info {transform: none;    }
    .works-image img{object-fit: cover; width: 180px; transition: none;}
    .works-info {transform: translateY(0); width: 180px;}
    .works-category {font-size: 11px;}
    .works-name {font-size: 22px;}
    .works-icon {font-size: 20px;}
  }

  @media (max-width: 500px){
  .works-panel{width: 160px;}
  }

  

  /* Widget de Cotización */

.search-widget {
  font-family: var(--font-body);
  position: relative;
  z-index: 2;

  max-width: 1000px;
  margin: 0 auto;

  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;

  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.quote-section {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--charcoal) 0%,
    var(--charcoal) 50%,
    var(--paper) 50%,
    var(--paper) 100%
  );

  padding: 10px 24px;
}

.widget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.search-widget h2{
  text-align: center;
}

.tab-btn {
  background: none;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #64748B;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn.active,
.tab-btn:hover {
  background: #EFF6FF;
  color: #2563EB;
}

.widget-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  gap: 12px;
  align-items: end;
}

.row-contact {
  grid-template-columns: 1fr 1fr;
}

.row-details {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) 140px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
}

.field-group select{
  background-color: var(--amber-light);
}

.field-group option{
  background-color: var(--paper);
}

.field-group input,
.field-group select {
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
}

.btn-submit {
  height: 47px;
  white-space: nowrap;
  background: #2563EB;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-submit:hover {
  background: #1E3A8A;
  transform: translateY(-1px);
}

.trip-toggle {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 30px;
    background: var(--paper);
    border: 1px solid #ddd;
}

.trip-option {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 16px;
    border-radius: 25px;

    font-family: inherit;
    font-size: 14px;
    cursor: pointer;

    color: #555;
    transition: all 0.25s ease;
}

.trip-option.active {
    background: var(--amber-light);
    color: #111;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.trip-option:hover:not(.active) {
    color: #111;
}

/* Responsive */

@media (max-width: 768px) {
  .row-contact,
  .row-details {
    grid-template-columns: 1fr;
  }
}