/* Página de tours (tours.html).
   Reusa casi todo de css/styles.css: .cards, .card, .quote, .form.
   Aquí solo va lo propio de esta página. */

/* ---------- encabezado ---------- */
/* La nav es fija y oscura, así que el encabezado arranca por debajo. */
.tours-hero{
  background:var(--green-900); color:#f3efe6;
  padding:132px 0 76px; text-align:center;
}
.tours-hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.02; margin:14px 0 0;
}
.tours-hero h1 em{color:var(--orange-bright); font-style:italic}
.tours-hero .eyebrow{color:#ffc6a3}
.tours-hero .lead{
  max-width:60ch; margin:20px auto 26px; color:#dcd5c8; font-size:1.04rem;
}

/* ---------- tarjetas ---------- */
.tours-loading{grid-column:1/-1; text-align:center; color:#41544a; padding:30px 0}
/* Los tours traen lista de puntos destacados y precio, así que la tarjeta
   necesita más alto que la de la portada. */
.tour-card{min-height:420px}
.tour-high{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:5px}
.tour-high li{font-size:.86rem; color:#e6ded3}
.tour-high i{color:var(--orange-bright); width:16px; text-align:center; margin-right:4px}
.tour-price{margin:0 0 14px; color:#fff}
.tour-price strong{font-family:'Fraunces',Georgia,serif; font-size:1.5rem; font-weight:400}
.tour-price span{font-size:.8rem; color:#cbc3b6}

/* El botón hace lo mismo que el enlace de antes, pero es un <button>: no
   navega, llena el formulario. */
.tour-pick{background:none; border:none; padding:0; cursor:pointer;
  font-family:'DM Sans',sans-serif}

@media(max-width:900px){
  .tours-hero{padding:116px 0 60px}
}