/* Lente & Rota — paleta tirada das artes do cliente (vinho + dourado) */
:root{
  --vinho:#5C0F21;
  --vinho-esc:#3B0913;
  --vinho-clr:#7A1D33;
  --ouro:#C9A24B;
  --ouro-clr:#E3C77E;
  --creme:#F6F1EA;
  --texto:#2A1015;
  --cinza:#5A4A4D;
  --borda:rgba(201,162,75,.32);
  --wrap:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--creme); color:var(--texto);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* trava de segurança: nenhuma palavra longa pode gerar rolagem lateral no celular */
  overflow-x:hidden;
}
/* height:auto é obrigatório: sem ele o atributo height="" do HTML vence quando a
   largura encolhe no celular, e a foto entra esticada. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.18; font-weight:700; letter-spacing:-.01em}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.pular{position:absolute; left:-9999px}
.pular:focus{left:12px; top:12px; z-index:99; background:#fff; padding:10px 14px; border-radius:8px}

/* ---------- topo ---------- */
.topo{position:sticky; top:0; z-index:40; background:rgba(59,9,19,.96); border-bottom:1px solid var(--borda)}
.topo__in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--creme)}
.marca__logo{border-radius:50%; object-fit:cover; border:1px solid var(--borda)}
.marca__txt{display:flex; flex-direction:column; line-height:1.15}
.marca__txt b{font-size:15px; letter-spacing:.09em}
.marca__txt i{font-style:normal; font-size:10.5px; letter-spacing:.11em; color:var(--ouro-clr); text-transform:uppercase}
.nav{display:none; gap:24px; font-size:14.5px; letter-spacing:.03em}
.nav a{color:var(--creme); text-decoration:none; opacity:.86; padding:4px 0; border-bottom:1px solid transparent}
.nav a:hover{opacity:1; border-bottom-color:var(--ouro)}
@media(min-width:820px){ .nav{display:flex} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--vinho-esc)}
/* O véu segura o contraste do texto, mas sem apagar a foto: com o material antigo
   (banco de imagem) ele era pesado de propósito; com a foto real de Gramado a cidade
   precisa aparecer. Contraste conferido: creme sobre o ponto mais claro da imagem. */
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.88}
.hero__veu{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(59,9,19,.80) 0%, rgba(78,12,28,.64) 45%, rgba(59,9,19,.93) 100%)}
.hero__in{position:relative; text-align:center; color:var(--creme); padding:52px 20px 58px}
.hero__logo{margin:0 auto 16px; border-radius:50%; object-fit:cover; border:2px solid var(--ouro)}
.hero__slogan{margin:0 auto 16px; font-size:11.5px; letter-spacing:.13em; line-height:1.9;
  text-transform:uppercase; color:var(--ouro-clr)}
.hero__h1{font-size:clamp(26px,6.6vw,58px); text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance}
.hero__h1 span{color:var(--ouro); font-style:italic; font-weight:400}
.hero__sub{margin:14px auto 0; max-width:22ch; font-size:clamp(15px,3.4vw,21px); font-weight:600;
  color:var(--ouro-clr); text-transform:uppercase; letter-spacing:.02em; text-wrap:balance}
.hero__lista{margin:16px auto 0; max-width:46ch; font-size:14px; opacity:.86; text-wrap:balance}
.hero__ctas{display:flex; flex-direction:column; gap:11px; align-items:center; margin-top:28px}
@media(min-width:560px){
  .hero__in{padding:78px 20px 84px}
  .hero__slogan{letter-spacing:.17em; line-height:1.65}
  .hero__slogan br{display:none}   /* no desktop cabe numa linha só */
  .hero__sub{max-width:30ch}
  .hero__ctas{flex-direction:row; justify-content:center}
}

/* ---------- botões ---------- */
.btn{display:inline-block; text-decoration:none; text-align:center; font-weight:700;
  padding:15px 26px; border-radius:999px; font-size:15.5px; letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease; max-width:100%}
.btn--ouro{background:linear-gradient(180deg,var(--ouro-clr),var(--ouro)); color:#3B0913;
  box-shadow:0 8px 22px rgba(0,0,0,.24)}
.btn--linha{border:1px solid var(--ouro); color:var(--creme)}
.btn--escuro{background:var(--vinho-esc); color:var(--ouro-clr); border:1px solid var(--ouro)}
.btn--g{padding:18px 26px; font-size:16.5px}
/* o telefone nunca pode quebrar no meio ("54 99445-" / "3519"): no celular ele desce
   inteiro para a segunda linha, e o separador " · " some. */
.btn__fone{white-space:nowrap; display:block}
.btn__sep{display:none}
@media(min-width:480px){
  .btn__fone{display:inline}
  .btn__sep{display:inline}
}
.btn:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover{transform:none} }

/* ---------- faixa de oferta ---------- */
.oferta{background:linear-gradient(135deg,var(--vinho) 0%,var(--vinho-esc) 100%);
  border-top:2px solid var(--ouro); border-bottom:2px solid var(--ouro)}
.oferta__in{text-align:center; padding:34px 20px; color:var(--creme)}
.oferta__selo{margin:0 0 10px; display:inline-block; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#3B0913; background:linear-gradient(180deg,var(--ouro-clr),var(--ouro));
  padding:6px 16px; border-radius:999px; font-weight:800}
.oferta__tit{font-size:clamp(24px,6vw,40px); text-transform:uppercase; color:var(--ouro-clr); text-wrap:balance}
.oferta__txt{margin:10px auto 20px; max-width:44ch; font-size:16px; text-wrap:balance}

/* ---------- diferenciais ---------- */
.difs{background:var(--vinho-esc); color:var(--creme); padding:30px 0}
.difs__grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 16px}
@media(min-width:820px){ .difs__grid{grid-template-columns:repeat(4,1fr); gap:24px} }
.dif{text-align:center}
.dif svg{width:34px; height:34px; margin:0 auto 9px; display:block;
  fill:none; stroke:var(--ouro); stroke-width:1.5; stroke-linejoin:round}
.dif h3{font-size:13px; font-weight:600; line-height:1.4; letter-spacing:.02em; text-wrap:balance}

/* ---------- seções ---------- */
.sec{padding:56px 0}
@media(min-width:820px){ .sec{padding:78px 0} }
.olho{margin:0 0 8px; font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--vinho-clr); font-weight:700}
.olho--c{text-align:center}
.tit-sec{font-size:clamp(26px,5.6vw,40px); text-align:center; color:var(--vinho); text-wrap:balance}
.tit-sec::after{content:""; display:block; width:56px; height:2px; background:var(--ouro); margin:16px auto 0}
.tit-sub{margin:14px auto 0; max-width:42ch; text-align:center; color:var(--cinza); font-size:16px; text-wrap:balance}

/* sobre */
.sobre{background:#fff}
.sobre__in{display:grid; gap:28px}
@media(min-width:900px){ .sobre__in{grid-template-columns:1.15fr .85fr; gap:48px; align-items:center} }
.sobre__txt h2{font-size:clamp(25px,5.2vw,36px); color:var(--vinho); margin-bottom:16px; text-wrap:balance}
.sobre__txt p{margin:0 0 14px; color:var(--cinza)}
.assina{font-style:italic; color:var(--vinho-clr) !important; font-weight:600; border-left:3px solid var(--ouro); padding-left:14px}
.sobre__foto{margin:0}
.sobre__foto img{border-radius:14px; box-shadow:0 14px 34px rgba(59,9,19,.20)}

/* cards de serviço */
.cards{display:grid; gap:22px; margin-top:34px}
@media(min-width:700px){ .cards{grid-template-columns:1fr 1fr} }
.card{background:#fff; border-radius:16px; overflow:hidden; border:1px solid rgba(59,9,19,.09);
  box-shadow:0 8px 26px rgba(59,9,19,.09); display:flex; flex-direction:column}
.card__media{aspect-ratio:16/10; overflow:hidden; background:var(--vinho-esc)}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__txt{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.card__txt h3{font-size:19px; color:var(--vinho); margin-bottom:9px; text-wrap:balance}
.card__txt p{margin:0 0 16px; font-size:15.5px; color:var(--cinza); flex:1}
.link-wa{font-weight:700; font-size:14.5px; color:var(--vinho-clr); text-decoration:none; letter-spacing:.02em}
.link-wa:hover{text-decoration:underline}

/* galeria */
.galeria{background:linear-gradient(180deg,#fff 0%,#F6F1EA 100%)}
.grid-fotos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:32px}
@media(min-width:700px){ .grid-fotos{grid-template-columns:repeat(3,1fr); gap:14px} }
.foto{position:relative; margin:0; border:0; padding:0; cursor:pointer; background:var(--vinho-esc);
  border-radius:12px; overflow:hidden; aspect-ratio:3/4; display:block; width:100%}
.foto img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.foto:hover img{transform:scale(1.05)}
.foto__cap{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; text-align:left;
  color:#fff; font-size:12.5px; font-weight:600; line-height:1.3;
  background:linear-gradient(180deg,transparent,rgba(59,9,19,.86))}
@media(prefers-reduced-motion:reduce){ .foto img{transition:none} .foto:hover img{transform:none} }
.galeria__vazio{margin-top:28px; text-align:center; color:var(--cinza); font-size:15px}

/* destinos */
.destinos{background:var(--vinho-esc); color:var(--creme)}
.destinos .tit-sec{color:var(--ouro-clr)}
.destinos .olho{color:var(--ouro)}
.dest{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.dest li span{display:inline-block; border:1px solid var(--borda); border-radius:999px;
  padding:10px 20px; font-size:14.5px; letter-spacing:.03em}
.dest--mais span{background:rgba(201,162,75,.14); color:var(--ouro-clr); font-style:italic}

/* contato */
.contato{background:linear-gradient(160deg,var(--vinho) 0%,var(--vinho-esc) 100%); color:var(--creme)}
.contato__in{text-align:center; max-width:640px}
.contato h2{font-size:clamp(25px,5.6vw,38px); text-transform:uppercase; color:var(--ouro-clr); text-wrap:balance}
.contato p{margin:16px auto 26px; max-width:40ch; opacity:.9; text-wrap:balance}
.contato__obs{margin:22px auto 0 !important; font-size:13px; opacity:.7 !important; letter-spacing:.04em}

/* rodapé */
.rodape{background:#2A0710; color:var(--creme); padding:38px 0 96px; text-align:center}
.rodape__logo{margin:0 auto 12px; border-radius:50%; object-fit:cover; border:1px solid var(--borda)}
.rodape__nome{margin:0; font-weight:700; letter-spacing:.14em; font-size:16px}
.rodape__tag{margin:6px 0 0; font-size:12px; letter-spacing:.06em; color:var(--ouro-clr)}
.rodape__tel{margin:16px 0 0; font-size:19px; font-weight:700}
.rodape__tel a{text-decoration:none; color:var(--ouro-clr)}
.rodape__cred{margin:20px 0 0; font-size:12px; opacity:.55}

/* botão flutuante */
.wa-float{position:fixed; right:16px; bottom:16px; z-index:50; width:56px; height:56px;
  border-radius:50%; background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.32)}
.wa-float svg{width:32px; height:32px; fill:#fff}

/* lightbox */
.lb{position:fixed; inset:0; z-index:80; background:rgba(28,4,10,.94);
  display:grid; place-items:center; padding:52px 16px}
.lb[hidden]{display:none}
.lb__img{max-width:100%; max-height:100%; border-radius:10px; object-fit:contain}
.lb__fechar{position:absolute; top:10px; right:14px; background:none; border:0; color:#fff;
  font-size:40px; line-height:1; cursor:pointer; padding:6px}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.10);
  border:0; color:#fff; font-size:38px; line-height:1; width:46px; height:64px; cursor:pointer; border-radius:8px}
.lb__nav--ant{left:8px}
.lb__nav--prox{right:8px}