/* ==========================================================================
   Videira — Enoturismo & refúgios na serra (parcelado no boleto)
   Reskin da estrutura original. Paleta quente (creme + vinho + terracota +
   dourado) e tipografia serifada elegante (Cormorant Garamond + Jost).
   ========================================================================== */
:root{
  --cream:      #F5EDDF;   /* fundo claro principal */
  --cream-2:    #EFE6D5;   /* faixa alternada */
  --cream-3:    #EAE0CD;   /* rodapé */
  --card:       #FBF6EC;   /* cartões */
  --wine:       #6B2A3A;   /* primário / bandas escuras / botões */
  --wine-d:     #551F2C;   /* hover */
  --terra:      #B0532C;   /* acento terracota (mais escuro p/ contraste) */
  --gold:       #C39B4A;   /* acento dourado */
  --olive:      #7A8B6F;   /* acento oliva */
  --ink:        #241A17;   /* texto forte */
  --text:       #43352F;   /* texto (mais escuro p/ contraste) */
  --text-soft:  #5E5047;   /* texto secundário (mais escuro) */
  --line:       #E2D6C2;   /* hairline */
  --on-dark:    #F5ECDD;   /* texto sobre vinho */
  --on-dark-mut:#D9C8BC;
  --white:      #FFFFFF;

  --container: 1000px;
  --radius:    10px;
  --radius-lg: 16px;

  --ff-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --ff:         "Jost", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--ff-display); color:var(--wine); font-weight:700; letter-spacing:0; line-height:1.1; }
p{ margin:0; }
button{ font-family:inherit; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.emoji{ font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-style:normal; }
.cyan{ color:var(--terra); }        /* mantém o hook do HTML, agora terracota */
.center{ text-align:center; }

/* ---------- Tipografia base ---------- */
h1{ font-size:52px; line-height:1.06; }
h2{ font-size:42px; line-height:1.1; }
h3{ font-size:26px; line-height:1.2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--terra); }
.eyebrow-center{ justify-content:center; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 30px;
  border-radius:30px;
  font-family:var(--ff);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream);
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn-navy{ background:var(--wine); box-shadow:0 8px 22px rgba(107,42,58,.22); }
.btn-navy:hover{ background:var(--wine-d); box-shadow:0 12px 28px rgba(107,42,58,.3); }
.btn-cyan{ background:var(--terra); box-shadow:0 8px 22px rgba(192,101,58,.24); }
.btn-cyan:hover{ background:#A9532E; box-shadow:0 12px 28px rgba(192,101,58,.32); }
.btn-block{ display:flex; width:100%; }

/* ---------- Selos de confiança ---------- */
.trust{
  display:flex; gap:22px;
  font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine);
}
.trust li{ display:flex; align-items:center; gap:6px; }
.trust-light{ color:rgba(243,233,216,.82); }
.trust-mini{ justify-content:center; color:var(--wine); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--wine);
  height:80px; display:flex; align-items:center;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:34px; height:34px; flex:none; }
.logo-text{
  font-family:var(--ff-display);
  font-size:23px; font-weight:600; letter-spacing:.02em; color:var(--cream);
}
.logo-text strong{ font-weight:600; color:var(--gold); font-style:italic; }
.logo-dark .logo-text{ color:var(--wine); }
.logo-dark .logo-text strong{ color:var(--terra); }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  position:relative;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark); padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:38px; height:38px; border:0; background:transparent;
  cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0 7px;
}
.nav-toggle span{ display:block; height:2px; background:var(--cream); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:600px; display:flex; align-items:center;
  background-image:linear-gradient(90deg, rgba(45,15,22,.82) 0%, rgba(45,15,22,.6) 42%, rgba(45,15,22,.28) 68%, rgba(45,15,22,.12) 100%), url("../img/hero-foto.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden;
}
.hero-content{ max-width:520px; padding:56px 0; position:relative; z-index:2; }
.hero .rule{ display:block; width:40px; height:2px; background:var(--gold); margin-bottom:24px; }
.hero h1{ color:#FBF4E6; font-weight:600; letter-spacing:0; text-shadow:0 2px 20px rgba(35,10,18,.55); }
.hero h1 strong{ font-weight:700; font-style:italic; color:#E7B85C; }
.hero p{
  margin:22px 0 30px; max-width:400px;
  font-size:16px; line-height:1.65; color:#F6EEE1;
  text-shadow:0 1px 14px rgba(35,10,18,.6);
}
.hero .btn{ margin-bottom:22px; }
.hero .trust{ color:rgba(245,237,223,.92); }

/* ==========================================================================
   DESTINOS
   ========================================================================== */
.destinos{ background:var(--cream); padding:100px 0 104px; }
.destinos .sec-head h2{ font-size:40px; line-height:1.12; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:44px; }
.sec-head .eyebrow{ margin-bottom:12px; }
.carousel-nav{ display:flex; gap:10px; flex:none; }
.carousel-btn{
  width:44px; height:44px; border-radius:50%;
  border:1.4px solid var(--wine); background:transparent; color:var(--wine);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-btn svg{ width:15px; height:15px; }
.carousel-btn.is-solid{ background:var(--wine); color:var(--cream); }
.carousel-btn:hover{ background:var(--wine); color:var(--cream); }
.carousel-btn:disabled{ opacity:.3; cursor:default; }

.dest-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.dest-card img{ width:100%; height:236px; object-fit:cover; border-radius:6px; margin-bottom:18px; }
.dest-card h3{ font-size:28px; margin-bottom:10px; }
.dest-card h3 .tick{ color:var(--terra); font-size:16px; }
.dest-card p{ font-size:14px; line-height:1.7; color:var(--text); margin-bottom:16px; }
.link-arrow{
  font-family:var(--ff); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terra); display:inline-flex; align-items:center; gap:8px; transition:gap .2s ease;
}
.link-arrow::before{ content:"⟶"; }
.link-arrow:hover{ gap:12px; }

/* ==========================================================================
   FAIXA (escura)
   ========================================================================== */
.band{ background:var(--wine); min-height:80px; display:flex; align-items:center; text-align:center; padding:18px 0; }
.band p{ font-family:var(--ff-display); font-size:22px; font-style:italic; color:var(--on-dark); font-weight:500; }
.band strong{ font-weight:600; color:var(--gold); font-style:normal; }
.band .emoji{ margin-right:8px; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.depoimentos{ background:var(--cream-2); padding:96px 0 100px; }
.proof{ text-align:center; margin-bottom:32px; }
.proof p{ font-size:12px; letter-spacing:.06em; color:var(--wine); margin-bottom:10px; text-transform:uppercase; }
.proof strong{ font-weight:700; font-size:14px; }
.proof img{ height:44px; width:auto; margin:0 auto; }
.depoimentos h2{ margin-bottom:56px; }

.depo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.depo{ margin:0; padding:0 26px; border-left:1px solid var(--line); }
.depo:first-child{ border-left:0; padding-left:0; }
.depo-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.depo-head img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.depo-head strong{ display:block; font-family:var(--ff-display); font-size:17px; font-weight:700; color:var(--wine); line-height:1.3; }
.depo-head span{ display:block; font-size:10px; font-weight:500; letter-spacing:.06em; color:var(--text-soft); text-transform:uppercase; }
.depo-head .stars{ color:var(--gold); font-size:10px; letter-spacing:.1em; margin-top:3px; }
.depo blockquote{ margin:0; font-family:var(--ff-display); font-size:17px; font-weight:500; font-style:italic; line-height:1.5; color:var(--ink); }

/* ==========================================================================
   SPLIT (imagem + painel vinho)
   ========================================================================== */
.split-wrap{ background:var(--cream); padding:0; }
.split{ display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius-lg); overflow:hidden; min-height:480px; box-shadow:0 16px 40px rgba(107,42,58,.12); }
.split-media{ background-size:cover; background-position:center; min-height:280px; }
.split-panel{ background:var(--wine); padding:52px 50px 46px; display:flex; flex-direction:column; justify-content:center; }
.split-panel h3{ color:var(--cream); font-size:30px; font-weight:500; line-height:1.2; margin-bottom:28px; }
.split-panel h3 .emoji{ margin-right:8px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.6; color:rgba(243,233,216,.9); margin-bottom:18px; }
.check-list strong{ color:var(--cream); font-weight:600; }
.check-list .ic{ flex:none; font-size:12px; line-height:1.5; }
.split-panel .btn{ margin:16px 0 18px; align-self:stretch; }
.split-panel .trust{ justify-content:center; }

/* ==========================================================================
   VANTAGENS
   ========================================================================== */
.vantagens{ background:var(--cream); padding:104px 0 112px; }
.vantagens h2{ margin-bottom:44px; }
.vant-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vant{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 30px; min-height:150px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vant:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(107,42,58,.1); border-color:var(--terra); }
.vant-ic{ width:44px; height:44px; border-radius:12px; background:rgba(192,101,58,.12); color:var(--terra); display:grid; place-items:center; margin-bottom:22px; }
.vant-ic svg{ width:22px; height:22px; }
.vant p{ font-family:var(--ff-display); font-size:19px; font-weight:600; line-height:1.25; color:var(--wine); }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.como{ background:var(--cream-2); padding:104px 0 120px; }
.como-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.como-text h2{ margin-bottom:38px; }
.como-text h2 .cyan{ font-style:italic; }
.step{ margin-bottom:30px; }
.step-ic{ width:40px; height:40px; border-radius:11px; background:rgba(107,42,58,.09); color:var(--wine); display:inline-grid; place-items:center; vertical-align:middle; margin-right:12px; }
.step-ic svg{ width:19px; height:19px; }
.step h4{ display:inline; font-family:var(--ff-display); font-size:24px; font-weight:600; color:var(--wine); vertical-align:middle; }
.step p{ margin-top:14px; font-size:14px; line-height:1.72; color:var(--text-soft); max-width:380px; }
.step p strong{ color:var(--ink); font-weight:600; }
.step p strong.cyan{ color:var(--terra); }
.como-media img{ width:100%; height:auto; border-radius:var(--radius-lg); }

/* ==========================================================================
   PACOTES
   ========================================================================== */
.pacotes{ background:var(--cream); padding:96px 0 92px; }
.pacotes h2{ margin-bottom:50px; }
.pac-grid{ display:grid; grid-template-columns:1fr 1.04fr 1fr; gap:18px; align-items:center; }
.pac{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px 30px; display:flex; flex-direction:column; }
.pac-featured{ background:var(--wine); border-color:var(--wine); padding:44px 28px 36px; box-shadow:0 16px 40px rgba(107,42,58,.24); }
.pac-featured h3{ color:var(--cream); border-bottom-color:rgba(245,236,221,.24); }
.pac h3{ font-size:24px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.pac h3 .emoji{ margin-right:7px; }
.pac ul{ flex:1; margin-bottom:26px; }
.pac ul li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.6; color:var(--text); margin-bottom:16px; }
.pac-ic{ flex:none; width:16px; height:16px; border-radius:50%; border:1px solid var(--wine); color:var(--wine); font-size:8px; display:grid; place-items:center; margin-top:2px; }
.pac .btn{ margin-bottom:14px; }
/* Card em destaque (fundo vinho): garante contraste do texto claro */
.pac.pac-featured ul li{ color:var(--on-dark); }
.pac.pac-featured .pac-ic{ border-color:var(--gold); color:var(--gold); }
.pac.pac-featured .eyebrow{ color:var(--gold); }
.pac.pac-featured .eyebrow::before{ background:var(--gold); }
.pac.pac-featured .trust-mini{ color:var(--on-dark-mut); }

/* ==========================================================================
   BANNER
   ========================================================================== */
.banner-wrap{ background:var(--cream); padding:0; }
.banner{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:44px 24px; text-align:center;
  background-image:linear-gradient(rgba(45,15,22,.55), rgba(45,15,22,.55)), url("../img/banner-foto.jpg");
  background-size:cover; background-position:center;
}
.banner-ic{ width:44px; height:44px; border-radius:12px; background:var(--gold); display:grid; place-items:center; font-size:19px; }
.banner p{ font-family:var(--ff-display); font-size:30px; line-height:1.25; color:var(--cream); font-weight:500; text-shadow:0 2px 18px rgba(40,12,20,.5); }
.banner .cyan{ color:var(--gold); font-style:italic; }

/* ==========================================================================
   QUEM É
   ========================================================================== */
.quem{ background:var(--cream-2); padding:110px 0 124px; }
.quem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.quem-text h2{ font-size:40px; margin-bottom:24px; }
.quem-text p{ font-size:14px; line-height:1.75; color:var(--text-soft); margin-bottom:18px; max-width:380px; }
.quem-text p strong{ font-weight:600; }
.quem-text .btn{ margin-top:16px; }
.quem-media img{ width:100%; height:auto; border-radius:var(--radius-lg); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background:var(--cream); padding:96px 0 118px; }
.faq-grid{ display:grid; grid-template-columns:.42fr 1fr; gap:24px; align-items:start; }
.faq-head h2{ font-size:40px; line-height:1.1; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:flex-start; gap:10px; padding:28px 44px 28px 0; position:relative;
  font-family:var(--ff-display); font-size:20px; font-weight:600; line-height:1.3; color:var(--wine);
  cursor:pointer; list-style:none; user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:300; color:var(--terra); line-height:1; transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--terra); }
.faq-item summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.faq-answer{ padding:0 44px 30px 0; animation:faqIn .24s ease; }
.faq-answer p{ font-size:14px; line-height:1.75; color:var(--text-soft); max-width:560px; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.site-footer{ background:var(--wine); padding:64px 0 68px; }
.footer-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:40px; }
.footer-brand .logo{ margin-bottom:18px; }
.footer-brand .logo-mark{ width:30px; height:30px; }
.footer-brand .logo-text{ font-size:20px; color:var(--cream); }
.footer-brand .logo-dark .logo-text{ color:var(--cream); }
.footer-brand .logo-dark .logo-text strong{ color:var(--gold); }
.copy{ font-size:11px; line-height:1.8; color:var(--on-dark-mut); max-width:300px; }
.footer-col h5{ font-family:var(--ff-display); font-size:18px; font-weight:600; color:var(--cream); margin-bottom:20px; }
.footer-col li{ margin-bottom:14px; }
.footer-col a{ font-size:13px; color:var(--on-dark-mut); transition:color .18s ease; }
.footer-col a:hover{ color:var(--gold); }
.footer-contact a{ display:flex; align-items:center; gap:8px; }
.footer-contact .ph{ font-size:11px; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1100px){
  .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(60,20,30,.82) 0%, rgba(60,20,30,.55) 46%, rgba(60,20,30,.1) 82%); }
  .hero .container{ position:relative; z-index:2; }
}
@media (max-width:960px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:80px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--wine); padding:0 24px; max-height:0; overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
  }
  .nav.is-open{ max-height:360px; padding:8px 24px 22px; }
  .nav a{ width:100%; padding:14px 0; font-size:12px; }
  .dest-track{ grid-template-columns:1fr; }
  .dest-card img{ height:230px; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:20px; }
  .carousel-nav{ display:none; }
  .depo-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .depo{ border-left:0; padding:0; }
  .depo:nth-child(even){ border-left:1px solid var(--line); padding-left:26px; }
  .split{ grid-template-columns:1fr; min-height:0; }
  .split-media{ min-height:250px; order:-1; }
  .split-reverse .split-media{ order:0; }
  .split-panel{ padding:40px 30px 34px; }
  .vant-grid{ grid-template-columns:1fr 1fr; }
  .como-grid, .quem-grid, .faq-grid{ grid-template-columns:1fr; gap:36px; }
  .como-media, .quem-media{ max-width:440px; margin:0 auto; }
  .pac-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:640px){
  h1{ font-size:38px; }
  h2{ font-size:30px; }
  .hero{ min-height:0; padding:64px 0; }
  .hero h1 br, .hero p br{ display:none; }
  .hero-content{ max-width:none; }
  .band{ padding:22px 0; }
  .band p{ font-size:18px; }
  .depo-grid{ grid-template-columns:1fr; }
  .depo:nth-child(even){ border-left:0; padding-left:0; }
  .vant-grid{ grid-template-columns:1fr; }
  .banner p{ font-size:22px; }
  .banner p br{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .trust{ flex-wrap:wrap; gap:14px; }
  .copy{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}