/* ============================================================
   Bike with Wine Travels — estilos customizados sobre W3.CSS
   ============================================================ */

:root{
  --wine:      #6d1f2b;
  --wine-dark: #4a1420;
  --wine-light:#8c2e3c;
  --gold:      #c79a3d;
  --gold-light:#e4c877;
  --cream:     #faf6ef;
  --olive:     #4b5a34;
  --ink:       #2a2420;
}

html{scroll-behavior:smooth;}

body{
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

h1,h2,h3,h4,.brand-font{
  font-family: 'Playfair Display', Georgia, serif;
}

a{ text-decoration:none; }

.w3-bar-item{ letter-spacing:.03em; }

/* ---------- Utility color classes ---------- */
.bg-wine{ background-color: var(--wine) !important; }
.bg-wine-dark{ background-color: var(--wine-dark) !important; }
.bg-olive{ background-color: var(--olive) !important; }
.bg-cream{ background-color: var(--cream) !important; }
.text-wine{ color: var(--wine) !important; }
.text-gold{ color: var(--gold) !important; }
.text-olive{ color: var(--olive) !important; }
.border-gold{ border-color: var(--gold) !important; }

.btn-gold{
  background-color: var(--gold) !important;
  color: var(--wine-dark) !important;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 14px 34px !important;
  border-radius: 2px;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-gold:hover{
  background-color: var(--gold-light) !important;
  transform: translateY(-2px);
}

.btn-outline-cream{
  background: transparent !important;
  border: 1px solid rgba(250,246,239,.7) !important;
  color: var(--cream) !important;
  padding: 13px 32px !important;
  letter-spacing: .04em;
}
.btn-outline-cream:hover{
  background: rgba(250,246,239,.12) !important;
}

.eyebrow{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  color: var(--gold);
}

.section-title{
  font-size: 2.4rem;
  line-height:1.15;
  color: var(--wine-dark);
}

.divider{
  width:64px;
  height:3px;
  background: var(--gold);
  margin: 18px 0 22px 0;
}
.divider.center{ margin-left:auto; margin-right:auto; }

.lead-text{
  font-size:1.08rem;
  line-height:1.8;
  color:#463d36;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:#111 url('../video/hero-poster.jpg') center/cover no-repeat;
}
.hero video{
  position:absolute;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%,-50%);
  object-fit:cover;
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,10,8,.55) 0%, rgba(20,10,8,.35) 45%, rgba(20,10,8,.75) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--cream);
  padding: 0 20px;
}
.hero-title{
  font-size: 3.4rem;
  line-height:1.15;
  max-width:920px;
  text-shadow: 0 3px 18px rgba(0,0,0,.45);
}
.hero-sub{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.85rem;
  margin-top:18px;
  margin-bottom:34px;
  color: var(--gold-light);
}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--cream); opacity:.85; font-size:1.6rem;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}

/* ---------- Top nav ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background: rgba(30,14,17,0);
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 6px 0;
}
.topnav.scrolled{
  background: rgba(30,14,17,.94);
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.topnav a{ color:var(--cream) !important; opacity:.92; }
.topnav a:hover{ opacity:1; color:var(--gold-light) !important; }
.logo-word{ font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.02em; }
.logo-word .accent{ color:var(--gold-light); }

.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-logo-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background: rgba(250,246,239,.94);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  flex:none;
}
.nav-logo{ width:26px; height:auto; display:block; }

/* ---------- Destination cards ---------- */
.dest-card{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  height:420px;
  display:flex; align-items:flex-end;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.dest-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.dest-card:hover img{ transform: scale(1.08); }
.dest-card .dest-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,10,8,0) 35%, rgba(20,10,8,.88) 100%);
}
.dest-card .dest-body{
  position:relative; z-index:2; padding:26px 24px; color:var(--cream);
}
.dest-flag{
  display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold-light); margin-bottom:6px;
}

/* ---------- Feature / alternating sections ---------- */
.feature-img{
  width:100%; height:400px; object-fit:cover; display:block;
}
.feature-media{ overflow:hidden; }
.feature-media img{ transition:transform .6s ease; }
.feature-media:hover img{ transform:scale(1.05); }

.stat-pill{
  display:inline-block;
  background: rgba(109,31,43,.08);
  color: var(--wine);
  border:1px solid rgba(109,31,43,.25);
  border-radius:30px;
  padding:6px 16px;
  font-size:.82rem;
  font-weight:700;
  margin:4px 8px 4px 0;
}

/* ---------- Gallery ---------- */
.gallery-item{
  position:relative; overflow:hidden; border-radius:3px; height:260px;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.gallery-item:hover img{ transform: scale(1.1); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
  color:#fff; padding:10px 14px; font-size:.85rem; letter-spacing:.03em;
}

/* ---------- Slideshow genérico (qualquer .slideshow com várias .slide dentro) ---------- */
.slideshow{ position:relative; }
.slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1s ease, transform .5s ease;
}
.slideshow .slide.active{ opacity:1; }
.slideshow:hover .slide.active{ transform: scale(1.05); }
.gallery-item.slideshow .gallery-caption{ position:absolute; height:auto; }
.gallery-item.slideshow .slide-caption{
  display:none;
}
.gallery-item.slideshow .slide-caption.active{
  display:block;
}
.slide-dots{
  position:absolute; top:12px; right:12px; z-index:3;
  display:flex; gap:6px;
}
.slide-dots .dot{
  width:6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,.5);
  transition: background .3s ease;
}
.slide-dots .dot.active{ background: var(--gold-light); }

/* ---------- Guide / tips card ---------- */
.guide-card{
  position:relative;
  border-radius:4px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.15);
}
.guide-card.slideshow{ height:420px; }

/* ---------- Quote banner ---------- */
.quote-banner{
  background: var(--wine-dark);
  color: var(--cream);
  padding: 70px 20px;
}
.quote-banner blockquote{
  font-family:'Playfair Display',serif;
  font-style: italic;
  font-size: 1.7rem;
  max-width: 780px;
  margin: 0 auto;
  line-height:1.5;
}
.quote-rule{
  width:70px; height:2px; background:var(--gold); margin:22px auto;
}

/* ---------- Formulário de reserva ---------- */
.reserve-form{
  text-align:left;
  margin: 34px 0 8px 0;
  background: #fff;
  border: 1px solid rgba(109,31,43,.12);
  border-radius:10px;
  box-shadow: 0 16px 40px rgba(74,20,32,.10);
  overflow:hidden;
}

/* ---- Barra de marca (topo do card) ---- */
.reserve-form-topbar{
  background: var(--wine-dark);
  padding: 26px 36px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.reserve-form-title{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:1.5rem;
  color: var(--cream);
  line-height:1.15;
}
.reserve-form-subtitle{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:600;
  font-style:italic;
  font-size:1.02rem;
  color: var(--gold-light);
  margin-top:2px;
}
.reserve-form-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  margin-top:2px;
}
.reserve-form-logo-chip{
  width:42px; height:42px;
  border-radius:50%;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  flex:none;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.reserve-form-logo-chip img{ width:27px; height:auto; display:block; }
.reserve-form-brand-text{
  font-family:'Playfair Display', Georgia, serif;
  line-height:1.25;
}
.reserve-form-brand-text div{
  font-weight:700; font-size:.92rem; color: var(--cream);
}
.reserve-form-brand-text span{
  font-weight:400; font-size:.62rem; letter-spacing:.14em; color: var(--gold-light);
}

/* ---- Corpo do formulário ---- */
.reserve-form-body{
  padding: 30px 36px 32px 36px;
}
.reserve-form-section-label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--wine);
  border-bottom:1px solid rgba(109,31,43,.2);
  padding-bottom:10px;
  margin-bottom:24px;
}

/* ---- Rodapé decorativo (rima com a barra de marca) ---- */
.reserve-form-footer{
  position:relative;
  height:30px;
}
.reserve-form-footer-bar{
  position:absolute; left:0; right:0; bottom:0; height:12px;
  background: var(--wine-dark);
}
.reserve-form-footer-accent{
  position:absolute; left:0; right:0; bottom:12px; height:24px;
  background: var(--gold);
  clip-path: polygon(0 100%, 0 15%, 38% 100%);
}
.reserve-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
}
.form-field{
  display:flex;
  flex-direction:column;
}
.form-field label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--wine-dark);
  margin-bottom:8px;
}
.form-field label i.material-icons{
  font-style:normal;
  font-size:1rem;
  color: var(--gold);
}
.form-field input,
.form-field select{
  font-family:'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-size:.96rem;
  color: var(--ink);
  background: var(--cream);
  border:1px solid rgba(109,31,43,.22);
  border-radius:6px;
  padding:12px 14px;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-field input::placeholder{
  color:#a89b8d;
}
.form-field select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236d1f2b' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size:14px;
  padding-right:34px;
  cursor:pointer;
}
.form-field select:invalid,
.form-field select option[value=""]{
  color:#a89b8d;
}
.form-field input:hover,
.form-field select:hover{
  border-color: rgba(109,31,43,.4);
}
.form-field input:focus,
.form-field select:focus{
  outline:none;
  background:#fff;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(109,31,43,.13);
}
.reserve-submit{
  border:none;
  font-family:inherit;
  cursor:pointer;
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  padding:15px 40px !important;
  border-radius:30px;
  box-shadow: 0 10px 24px rgba(199,154,61,.35);
}
.reserve-submit i.material-icons{
  font-style:normal;
  font-size:1.1rem;
}
@media (max-width:700px){
  .reserve-form-topbar{ padding:22px 20px; flex-direction:column; align-items:flex-start; gap:14px; }
  .reserve-form-body{ padding:26px 20px 24px 20px; }
  .reserve-form-grid{ grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
footer a{ color: var(--cream) !important; opacity:.85; }
footer a:hover{ opacity:1; text-decoration:underline; }

/* ---------- Misc ---------- */
.w3-row-padding img{ margin-bottom:0; }

@media (max-width: 700px){
  .hero-title{ font-size:2.15rem; }
  .section-title{ font-size:1.7rem; }
  .dest-card{ height:320px; }
  .feature-img{ height:260px; }
  .guide-card.slideshow{ height:260px; }

  .hero-content > div:last-child{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:320px;
  }
  .hero-content .btn-gold,
  .hero-content .btn-outline-cream{
    width:100%;
    margin:0 0 12px 0 !important;
    white-space:nowrap;
  }
}