/* ============ Pousada Aromas da Serra — main.css ============ */
:root{
  --forest-900:#1f3019; --forest-800:#2f4a2a; --forest-700:#3a5b30;
  --terracota:#b8754a; --gold:#c4a46c; --gold-soft:#d8bf86;
  --cream:#faf6ef; --cream-100:#f4ece0; --cream-200:#ebdcc4;
  --ink-700:#3b342c; --ink-800:#2a2520; --ink-900:#1a1612;
}

[x-cloak]{display:none !important;}

html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-feature-settings:"ss01","liga","kern"; overflow-x:hidden;}

/* Loader */
@keyframes loaderbar{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* Reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal-stagger.in > *{opacity:1; transform:none;}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* Eyebrow */
.eyebrow{display:inline-flex; align-items:center; gap:.6rem; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--terracota); font-weight:500;}
.eyebrow::before, .eyebrow::after{content:""; width:28px; height:1px; background:currentColor; opacity:.5;}

/* Buttons */
.btn-primary{display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:.5rem; padding:.75rem 1.5rem; background:var(--forest-800); color:var(--cream); font-size:13px; line-height:1; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; transition:all .3s; font-weight:500; white-space:nowrap; max-width:100%;}
.btn-primary:hover{background:var(--forest-900); transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(31,48,25,.6);}
.btn-gold{display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:.5rem; padding:.85rem 1.7rem; background:var(--gold); color:var(--ink-900); font-size:13px; line-height:1; letter-spacing:.2em; text-transform:uppercase; border-radius:999px; font-weight:600; transition:all .3s; white-space:nowrap; max-width:100%;}
.btn-gold:hover{background:var(--gold-soft); transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(196,164,108,.55);}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:.5rem; padding:.75rem 1.5rem; border:1px solid var(--forest-800); color:var(--forest-800); font-size:13px; line-height:1; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; transition:all .3s; white-space:nowrap; max-width:100%;}
.btn-ghost:hover{background:var(--forest-800); color:var(--cream);}
.btn-ghost-light{display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:.5rem; padding:.75rem 1.5rem; border:1px solid rgba(244,236,224,.3); color:var(--cream-100); font-size:13px; line-height:1; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; transition:all .3s; white-space:nowrap; max-width:100%;}
.btn-primary svg,.btn-gold svg,.btn-ghost svg,.btn-ghost-light svg{flex:0 0 auto;}
.btn-ghost-light:hover{border-color:var(--gold); color:var(--gold);}
@media (max-width:480px){.btn-primary,.btn-gold,.btn-ghost,.btn-ghost-light{gap:.35rem; padding-left:.85rem; padding-right:.85rem; font-size:11px; letter-spacing:0;}}

a.btn-primary,button.btn-primary,a.btn-gold,button.btn-gold,a.btn-ghost,button.btn-ghost,a.btn-ghost-light,button.btn-ghost-light{display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; flex-wrap:nowrap !important; white-space:nowrap !important;}
a.btn-primary svg,button.btn-primary svg,a.btn-gold svg,button.btn-gold svg,a.btn-ghost svg,button.btn-ghost svg,a.btn-ghost-light svg,button.btn-ghost-light svg{display:block; flex:0 0 auto;}

/* Footer */
.footer-title{font-family:"Italiana", serif; color:var(--cream); font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem;}
.footer-link{color:rgba(244,236,224,.7); transition:color .3s;}
.footer-link:hover{color:var(--gold);}
.social-pill{width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(244,236,224,.18); border-radius:999px; color:rgba(244,236,224,.85); transition:all .3s;}
.social-pill:hover{background:var(--gold); color:var(--ink-900); border-color:var(--gold);}

/* WhatsApp float */
#wa-float{position:fixed; bottom:24px; right:24px; z-index:90; display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.2rem .85rem 1rem; background:#25D366; color:#fff; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.04em; box-shadow:0 18px 30px -10px rgba(37,211,102,.5); transition:transform .3s, box-shadow .3s;}
#wa-float:hover{transform:translateY(-2px); box-shadow:0 22px 36px -10px rgba(37,211,102,.6);}
#wa-float i{width:22px; height:22px;}
@media (max-width:540px){ #wa-float span{display:none;} #wa-float{padding:14px;} }

/* Back to top */
#to-top{position:fixed; bottom:24px; left:24px; width:44px; height:44px; border-radius:999px; background:var(--forest-900); color:var(--cream); display:none; place-items:center; opacity:0; transition:opacity .3s, transform .3s; z-index:90;}
#to-top.visible{display:grid; opacity:1;}
#to-top:hover{transform:translateY(-2px) scale(1.05);}
#to-top i{width:18px; height:18px;}

/* Hero overlay helpers */
.bg-tint{background:linear-gradient(180deg, rgba(18,14,11,.18) 0%, rgba(18,14,11,.38) 42%, rgba(18,14,11,.76) 100%); box-shadow:inset 0 -140px 180px rgba(0,0,0,.24), inset 0 36px 90px rgba(0,0,0,.1);}
.bg-tint-strong{background:linear-gradient(180deg, rgba(26,22,18,.45) 0%, rgba(26,22,18,.78) 100%);}
.hero-kicker, .hero-copy h1, .hero-copy > p{text-shadow:0 12px 34px rgba(0,0,0,.34);}
.hero-copy .btn-gold, .hero-copy .btn-ghost-light{text-shadow:none;}

/* Editorial details */
.serif-italic{font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:500;}
.divider-leaf{display:flex; align-items:center; gap:1rem; color:var(--gold);}
.divider-leaf::before, .divider-leaf::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, currentColor, transparent); opacity:.45;}

/* Cards */
.card-elevated{background:#fff; border:1px solid var(--cream-200); border-radius:8px; box-shadow:0 1px 0 rgba(60,50,40,.04), 0 30px 40px -30px rgba(60,50,40,.18); transition:transform .5s, box-shadow .5s;}
.card-elevated:hover{transform:translateY(-4px); box-shadow:0 1px 0 rgba(60,50,40,.04), 0 40px 60px -30px rgba(60,50,40,.28);}

/* Image masks (organic shapes) */
.mask-arch{-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 100%, #000 70%, transparent 71%); mask-image:radial-gradient(ellipse 100% 80% at 50% 100%, #000 70%, transparent 71%); border-top-left-radius:50% 30%; border-top-right-radius:50% 30%;}
.mask-blob{border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;}

/* Section spacing rhythm */
section.section{padding-top:clamp(4rem, 7vw, 8rem); padding-bottom:clamp(4rem, 7vw, 8rem);}

/* Marquee */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.marquee-track{display:flex; gap:3rem; animation:marquee 38s linear infinite;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Typographic flourish */
.flourish::before{content:"❦"; display:block; color:var(--gold); font-size:1.2rem; margin-bottom:1rem;}

/* Page hero compact */
.page-hero{position:relative; min-height:60vh; display:grid; grid-template-columns:minmax(0,1fr); align-items:end; overflow:hidden;}
.page-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Hero de Depoimentos: na foto a lua está a 18% da altura e o prédio iluminado a
   67-92% — longe demais para caberem juntos no corte do hero em tela larga.
   'fill' mostra a foto inteira, ao custo de achatá-la; aceitável numa paisagem
   noturna. Só da tablet para cima: no mobile o hero é vertical e 'fill' espremeria
   a imagem a 0.42x da largura, enquanto 'cover' ali já mostra a altura toda da
   foto (lua e prédio) — ou seja, no mobile o problema nunca existiu. */
@media (min-width:768px){ .page-hero-img--fill{object-fit:fill;} }
.page-hero-grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,22,18,.25) 0%, rgba(26,22,18,.7) 100%);}

/* Anchor offset for sticky header */
[id]{scroll-margin-top:96px;}

/* Subtle paper texture for cream sections */
.paper{background-image:radial-gradient(rgba(60,50,40,.04) 1px, transparent 1px); background-size:6px 6px;}

/* Gallery hover */
.gallery-tile{position:relative; overflow:hidden; border-radius:6px;}
.gallery-tile img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
.gallery-tile:hover img{transform:scale(1.06);}
.gallery-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(26,22,18,.55)); opacity:0; transition:opacity .4s;}
.gallery-tile:hover::after{opacity:1;}
.gallery-tile figcaption{position:absolute; left:1rem; bottom:.9rem; color:var(--cream); font-family:"Italiana", serif; font-size:1.1rem; opacity:0; transform:translateY(6px); transition:all .4s; z-index:1;}
.gallery-tile:hover figcaption{opacity:1; transform:none;}
@media (hover:none), (pointer:coarse){
  .gallery-tile::after{opacity:1; background:linear-gradient(180deg, transparent 48%, rgba(26,22,18,.62));}
  .gallery-tile figcaption{opacity:1; transform:none;}
}

/* Numbered marker (itinerário) */
.step-num{width:46px; height:46px; border-radius:999px; background:var(--cream-100); border:1px solid var(--cream-200); color:var(--forest-800); display:grid; place-items:center; font-family:"Italiana", serif; font-size:1.2rem;}

/* Print niceties */
@media print{ #wa-float, #to-top, header, footer{display:none;} }