/* ==========================================================
   DOCE VILLA — site

   Paleta: o verde-mar escuro é a marca, a areia é o fundo e o
   âmbar é gasto só em ação (botão de reservar, preço, nota).
   Cor de marca vem por variável: o painel troca --marca e o
   site inteiro acompanha, sem mexer em componente nenhum.
   ========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --marca:#0F6E63;
  --marca-escura:#0A4F47;
  --marca-clara:#158A7C;
  --marca-tenue:rgba(15,110,99,.08);
  --ambar:#E08A3C;
  --ambar-escuro:#C4732B;

  --areia:#FBF8F3;
  --areia-2:#F4EEE4;
  --papel:#fff;
  --tinta:#1C2723;
  --tinta-media:#4A5A54;
  --tinta-fraca:#7C8C86;
  --linha:#E4DDD1;

  --zap:#25D366;
  --zap-escuro:#1EA952;

  --raio:14px;
  --raio-p:9px;
  --sombra:0 1px 2px rgba(28,39,35,.05), 0 12px 28px -14px rgba(28,39,35,.28);
  --sombra-alta:0 2px 6px rgba(28,39,35,.07), 0 26px 54px -20px rgba(28,39,35,.38);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --largura:1140px;
  --topo:68px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 12px);-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  background:var(--areia);
  color:var(--tinta);
  line-height:1.62;
  font-size:16.5px;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6.2vw,4.1rem)}
h2{font-size:clamp(1.85rem,4vw,2.75rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}

.env{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}

.secao{padding-block:clamp(3.4rem,8vw,6rem)}
.secao--clara{background:var(--papel)}
.secao--areia{background:var(--areia-2)}

.titulo-bloco{max-width:44rem;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.titulo-bloco p{color:var(--tinta-media);margin-top:.7rem;font-size:1.06rem}

.chapeu{
  font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--marca);margin-bottom:.6rem;display:block;
}

/* ── Botões ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:100px;font-weight:600;font-size:.97rem;
  transition:transform .16s,box-shadow .16s,background .16s;
  text-align:center;line-height:1.25;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em;height:1.15em;flex:none}

.btn--zap{background:var(--zap);color:#fff;box-shadow:0 8px 20px -8px rgba(37,211,102,.7)}
.btn--zap:hover{background:var(--zap-escuro)}
.btn--marca{background:var(--marca);color:#fff;box-shadow:0 8px 20px -8px rgba(15,110,99,.6)}
.btn--marca:hover{background:var(--marca-escura)}
.btn--linha{border:1.5px solid var(--linha);background:var(--papel);color:var(--tinta)}
.btn--linha:hover{border-color:var(--marca);color:var(--marca)}
.btn--fantasma{color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn--fantasma:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--g{padding:1rem 1.9rem;font-size:1.04rem}

/* ── Topo ─────────────────────────────────────────────── */
.topo{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--topo);
  display:flex;align-items:center;
  transition:background .28s,box-shadow .28s,border-color .28s;
  border-bottom:1px solid transparent;
}
.topo.solto{background:rgba(251,248,243,.92);backdrop-filter:blur(14px);border-bottom-color:var(--linha)}
.topo .env{display:flex;align-items:center;gap:1.6rem}

.marca-logo{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.marca-logo b{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.015em}
.marca-logo span{font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--tinta-fraca);margin-top:.25rem}
.topo:not(.solto) .marca-logo b{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.topo:not(.solto) .marca-logo span{color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(0,0,0,.4)}

.menu{display:flex;gap:1.7rem;align-items:center}
.menu a{font-size:.93rem;font-weight:500;color:var(--tinta-media);transition:color .16s}
.menu a:hover{color:var(--marca)}
.topo:not(.solto) .menu a{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.topo:not(.solto) .menu a:hover{color:#fff}

.topo .btn{padding:.62rem 1.2rem;font-size:.9rem}

.abre-menu{display:none;padding:.5rem;border-radius:8px}
.abre-menu svg{width:26px;height:26px}
.topo:not(.solto) .abre-menu{color:#fff}

/* ── Capa ─────────────────────────────────────────────── */
.capa{
  position:relative;min-height:min(100svh,860px);
  display:flex;align-items:flex-end;
  padding-top:var(--topo);padding-bottom:clamp(2.6rem,7vw,5rem);
  color:#fff;overflow:hidden;
}
.capa-fundo{position:absolute;inset:0;background:var(--marca-escura)}
.capa-fundo img{width:100%;height:100%;object-fit:cover}
.capa-fundo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,32,28,.52) 0%,rgba(10,32,28,.18) 34%,rgba(10,32,28,.72) 84%,rgba(10,32,28,.9) 100%);
}
.capa .env{position:relative;z-index:2}
.capa h1{max-width:16ch;text-shadow:0 3px 30px rgba(0,0,0,.42)}
.capa-sub{
  font-size:clamp(1.06rem,2.2vw,1.32rem);max-width:34rem;margin-top:1.1rem;
  color:rgba(255,255,255,.93);text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.capa-acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.capa-fatos{
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.4rem;
  padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.22);
}
.fato{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .95rem;border-radius:100px;
  background:rgba(255,255,255,.13);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.87rem;font-weight:500;
}
.fato svg{width:1.05em;height:1.05em;opacity:.9;flex:none}

/* ── Faixa de confiança ───────────────────────────────── */
.confianca{background:var(--marca);color:#fff;padding-block:1.5rem}
.confianca .env{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.6rem;justify-content:space-between}
.nota-bloco{display:flex;align-items:center;gap:.9rem}
.nota-caixa{
  background:#fff;color:var(--marca-escura);font-weight:700;font-size:1.32rem;
  padding:.42rem .78rem;border-radius:10px;line-height:1;font-family:var(--sans);
}
.nota-bloco small{display:block;opacity:.86;font-size:.82rem;margin-top:.15rem}
.nota-bloco b{font-size:.98rem;font-weight:600}
.confianca-txt{font-size:.96rem;opacity:.94;max-width:34rem}
.confianca-txt b{font-weight:700}

/* ── Cartões de destaque ──────────────────────────────── */
.grade-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1rem,2.4vw,1.6rem)}

.destaque{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.4rem,3vw,1.9rem);transition:transform .2s,box-shadow .2s;
}
.destaque:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.destaque-icone{
  width:44px;height:44px;border-radius:11px;background:var(--marca-tenue);color:var(--marca);
  display:grid;place-items:center;margin-bottom:1rem;
}
.destaque-icone svg{width:23px;height:23px}
.destaque h3{margin-bottom:.5rem}
.destaque p{color:var(--tinta-media);font-size:.96rem}

/* ── Suítes ───────────────────────────────────────────── */
.suites{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.2rem,2.6vw,1.9rem)}

.suite{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.suite:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}

.suite-foto{position:relative;aspect-ratio:4/3;background:var(--marca-escura);overflow:hidden}
.suite-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.suite:hover .suite-foto img{transform:scale(1.045)}
.suite-foto--vazia{display:grid;place-items:center;color:rgba(255,255,255,.5)}
.suite-foto--vazia span{font-family:var(--serif);font-size:1.35rem;padding:1rem;text-align:center}

.suite-selo{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  padding:.32rem .72rem;border-radius:100px;
  font-size:.76rem;font-weight:700;letter-spacing:.03em;color:var(--marca-escura);
}

.suite-corpo{padding:clamp(1.2rem,2.6vw,1.6rem);display:flex;flex-direction:column;flex:1;gap:.85rem}
.suite-corpo h3{margin-bottom:-.2rem}
.suite-camas{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.88rem;color:var(--tinta-fraca)}
.suite-camas span{display:inline-flex;align-items:center;gap:.35rem}
.suite-camas svg{width:1.05em;height:1.05em;flex:none}
.suite-corpo > p{color:var(--tinta-media);font-size:.95rem}

.suite-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  font-size:.78rem;padding:.24rem .68rem;border-radius:100px;
  background:var(--areia-2);color:var(--tinta-media);border:1px solid var(--linha);
}

.suite-pe{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--linha);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.preco{line-height:1.15}
.preco small{display:block;font-size:.76rem;color:var(--tinta-fraca);margin-bottom:.1rem}
.preco b{font-size:1.55rem;font-weight:700;color:var(--marca-escura);font-family:var(--sans)}
.preco i{font-style:normal;font-size:.84rem;color:var(--tinta-fraca);font-weight:500}
.preco del{font-size:.85rem;color:var(--tinta-fraca);margin-right:.35rem}

/* ── Casa inteira ─────────────────────────────────────── */
.casa{
  background:var(--marca-escura);color:#fff;border-radius:var(--raio);
  overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;
}
.casa-txt{padding:clamp(1.8rem,4.4vw,3.4rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.casa-txt h2{color:#fff}
.casa-txt p{color:rgba(255,255,255,.86);font-size:1.02rem}
.casa-itens{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.casa-itens span{
  font-size:.84rem;padding:.3rem .8rem;border-radius:100px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
}
.casa-foto{background:var(--marca);min-height:270px}
.casa-foto img{width:100%;height:100%;object-fit:cover}

/* ── Galeria ──────────────────────────────────────────── */
.galeria{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  grid-auto-rows:190px;
}
.galeria figure{
  position:relative;overflow:hidden;border-radius:var(--raio-p);
  background:var(--areia-2);cursor:zoom-in;
}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.galeria figure:hover img{transform:scale(1.06)}
.galeria figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.galeria figcaption{
  position:absolute;inset:auto 0 0;padding:1.5rem .9rem .7rem;
  background:linear-gradient(transparent,rgba(10,32,28,.8));
  color:#fff;font-size:.85rem;opacity:0;transition:opacity .2s;
}
.galeria figure:hover figcaption{opacity:1}

/* Foto aberta em tela cheia */
.lupa{
  position:fixed;inset:0;z-index:200;background:rgba(8,20,17,.94);
  display:none;place-items:center;padding:1.4rem;
}
.lupa.aberta{display:grid}
.lupa img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px}
.lupa-fecha{position:absolute;top:1rem;right:1.2rem;color:#fff;padding:.6rem;border-radius:8px}
.lupa-fecha svg{width:28px;height:28px}
.lupa-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;padding:1rem;opacity:.75}
.lupa-nav:hover{opacity:1}
.lupa-nav svg{width:34px;height:34px}
.lupa-ant{left:.4rem}.lupa-prox{right:.4rem}

/* ── Localização ──────────────────────────────────────── */
.local{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.4vw,2.8rem);align-items:center}
.local-mapa{
  border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);
  aspect-ratio:4/3;background:var(--areia-2);box-shadow:var(--sombra);
}
.local-mapa iframe{width:100%;height:100%;border:0;display:block}

.distancias{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.1rem}
.distancias li{
  display:flex;align-items:center;gap:.9rem;padding:.72rem 0;
  border-bottom:1px solid var(--linha);font-size:.96rem;
}
.distancias li:last-child{border-bottom:0}
.distancias svg{width:19px;height:19px;color:var(--marca);flex:none}
.distancias b{margin-left:auto;font-weight:600;color:var(--tinta-media);white-space:nowrap;font-size:.9rem}

/* ── Depoimentos ──────────────────────────────────────── */
.depos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.2vw,1.5rem)}
.depo{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.4rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.9rem;
}
.estrelas{display:flex;gap:.12rem;color:var(--ambar)}
.estrelas svg{width:17px;height:17px}
.depo p{font-size:.98rem;color:var(--tinta-media);flex:1}
.depo footer{display:flex;align-items:center;gap:.65rem;font-size:.87rem}
.depo-ini{
  width:34px;height:34px;border-radius:50%;background:var(--marca-tenue);color:var(--marca);
  display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none;
}
.depo footer b{font-weight:600}
.depo footer small{color:var(--tinta-fraca);margin-left:auto}

/* ── Perguntas ────────────────────────────────────────── */
.faq{max-width:50rem;margin-inline:auto}
.faq details{
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--raio-p);margin-bottom:.65rem;overflow:hidden;
}
.faq details[open]{border-color:var(--marca);box-shadow:var(--sombra)}
.faq summary{
  padding:1.05rem 1.3rem;font-weight:600;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:1rem;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2px solid var(--tinta-fraca);border-bottom:2px solid var(--tinta-fraca);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--marca)}
.faq div{padding:0 1.3rem 1.2rem;color:var(--tinta-media);font-size:.97rem}

/* ── Reserva ──────────────────────────────────────────── */
.reserva{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.5rem,3.4vw,2.6rem);box-shadow:var(--sombra);max-width:44rem;margin-inline:auto;
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-block:1.4rem}
.campo-bloco{display:flex;flex-direction:column;gap:.38rem}
.campo-bloco--largo{grid-column:1/-1}
.campo-bloco label{font-size:.83rem;font-weight:600;color:var(--tinta-media)}
.campo{
  width:100%;padding:.72rem .9rem;border:1.5px solid var(--linha);border-radius:var(--raio-p);
  background:var(--areia);font:inherit;font-size:.96rem;color:var(--tinta);
  transition:border-color .16s,box-shadow .16s;
}
.campo:focus{outline:0;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-tenue);background:var(--papel)}
textarea.campo{resize:vertical;min-height:88px}
select.campo{cursor:pointer}

.noites{
  font-size:.88rem;color:var(--marca);font-weight:600;
  background:var(--marca-tenue);padding:.6rem .9rem;border-radius:var(--raio-p);
  margin-bottom:1rem;display:none;
}
.noites.aparece{display:block}

.reserva .btn{width:100%}
.reserva-nota{font-size:.83rem;color:var(--tinta-fraca);text-align:center;margin-top:.9rem}

/* ── Rodapé ───────────────────────────────────────────── */
.rodape{background:var(--tinta);color:rgba(255,255,255,.72);padding-block:clamp(2.6rem,6vw,4rem) 2rem;font-size:.93rem}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.rodape h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.9rem;font-weight:700}
.rodape .marca-logo b{color:#fff}
.rodape .marca-logo{margin-bottom:.9rem}
.rodape ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.rodape a:hover{color:#fff}
.rodape-fim{padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.45)}

/* ── Botão flutuante do WhatsApp ──────────────────────── */
.zap-fixo{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;
  width:56px;height:56px;border-radius:50%;background:var(--zap);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px -6px rgba(37,211,102,.7);
  transition:transform .2s;
}
.zap-fixo:hover{transform:scale(1.07)}
.zap-fixo svg{width:29px;height:29px}

/* ── Avisos ───────────────────────────────────────────── */
.aviso-topo{background:var(--ambar);color:#3B2408;text-align:center;padding:.6rem 1rem;font-size:.9rem;font-weight:600}

.recado{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);
  background:var(--tinta);color:#fff;padding:.85rem 1.4rem;border-radius:100px;
  font-size:.93rem;z-index:150;box-shadow:var(--sombra-alta);transition:transform .3s;
  max-width:min(92vw,30rem);text-align:center;
}
.recado.aparece{transform:translate(-50%,0)}

/* ── Telas menores ────────────────────────────────────── */
@media (max-width:900px){
  .casa{grid-template-columns:1fr}
  .casa-foto{min-height:220px;order:-1}
  .local{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .menu{
    position:fixed;inset:var(--topo) 0 auto;flex-direction:column;align-items:stretch;
    background:var(--papel);padding:1rem 1.4rem 1.5rem;gap:0;
    border-bottom:1px solid var(--linha);box-shadow:var(--sombra);
    display:none;
  }
  .menu.aberto{display:flex}
  .menu a{padding:.85rem 0;border-bottom:1px solid var(--linha);color:var(--tinta-media)!important;text-shadow:none!important}
  .menu a:last-child{border-bottom:0}
  .abre-menu{display:block}
  .topo .btn--zap{display:none}
  .galeria{grid-auto-rows:150px}
  .galeria figure:nth-child(6n+1){grid-column:span 2;grid-row:span 1}
  .campos{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr}
  .confianca .env{flex-direction:column;align-items:flex-start;gap:.9rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Aparecer ao rolar ────────────────────────────────── */
.sobe{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.sobe.visivel{opacity:1;transform:none}

@media print{.topo,.zap-fixo,.reserva,.recado{display:none}}