/* =========================================================
   HOSTEL CASA DAS LUZES
   Direção: "acender as luzes do casarão"
   Verde-noite da arcada + creme do estuque + latão das luminárias
   ========================================================= */

:root{
  /* cor */
  --noite:#0E1A14;
  --folha:#132318;
  --musgo:#1A2E22;
  --borda:rgba(244,236,220,.14);
  --salvia:#6D8368;
  --luz:#F4ECDC;
  --luz-70:rgba(244,236,220,.70);
  --luz-50:rgba(244,236,220,.48);
  --latao:#D9A441;
  --brasa:#F2CE83;

  /* tipo */
  --disp:"Bodoni Moda",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;

  /* medida */
  --rail:96px;
  --gut:clamp(20px,5vw,64px);
  --max:1280px;
  --sec-y:clamp(88px,11vw,168px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noite);color:var(--luz);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.65;
  letter-spacing:.005em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brasa);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--latao);color:#0E1A14;padding:12px 20px}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- tipografia ---------- */
.h2{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(2rem,4.4vw,3.65rem);line-height:1.06;
  letter-spacing:-.018em;margin:0 0 .7em;text-wrap:balance;
}
.h2 i{font-style:italic;color:var(--brasa);font-weight:400}
.p{font-size:clamp(.98rem,1.15vw,1.075rem);line-height:1.78;color:var(--luz-70);margin:0 0 1.15em;max-width:56ch}
.p--lg{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--luz);line-height:1.68}
.p--sm{font-size:.92rem}
.p a{color:var(--brasa);border-bottom:1px solid rgba(242,206,131,.4)}
.p a:hover{border-color:var(--brasa)}

.eyebrow{
  font-size:.688rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--salvia);margin:0 0 1.4em;line-height:1.5;
}
.eyebrow--lamp{position:relative;padding-left:1.9em}
.eyebrow--lamp::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-radius:50%;
  background:var(--brasa);
  box-shadow:0 0 0 3px rgba(217,164,65,.14),0 0 16px 2px rgba(242,206,131,.55);
}

.sechead{max-width:min(100%,780px);margin-bottom:clamp(40px,5vw,72px)}
.sechead .h2:last-child{margin-bottom:0}
.sechead .addr{margin-top:6px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:.86rem;font-weight:600;letter-spacing:.05em;
  padding:1.05em 2.1em;border-radius:2px;border:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn--sm{padding:.85em 1.5em;font-size:.8rem}
.btn--brass{background:var(--latao);color:#12211A;box-shadow:0 10px 34px -14px rgba(217,164,65,.75)}
.btn--brass:hover{background:var(--brasa);transform:translateY(-2px)}
.btn--ghost{border-color:var(--borda);color:var(--luz)}
.btn--ghost:hover{border-color:var(--brasa);color:var(--brasa)}

/* =========================================================
   TRILHO DAS LUZES (navegador lateral)
   ========================================================= */
.filament{
  position:fixed;left:0;top:0;height:100vh;width:var(--rail);z-index:60;
  display:none;align-items:center;justify-content:center;pointer-events:none;
}
.filament__line{
  position:absolute;left:50%;top:14vh;bottom:14vh;width:1px;
  background:rgba(244,236,220,.13);transform:translateX(-50%);
}
.filament__fill{
  position:absolute;inset:0 0 auto 0;height:0;
  background:linear-gradient(180deg,rgba(217,164,65,.15),var(--latao));
  transition:height .12s linear;
}
.filament__nodes{
  list-style:none;margin:0;padding:0;position:relative;width:9px;
  height:72vh;display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:auto;
}
.filament__nodes li{width:9px;height:9px}
.filament__nodes a{display:block;width:9px;height:9px;position:relative}
.globe{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--noite);border:1px solid rgba(244,236,220,.3);
  transition:all .4s var(--ease);
}
.filament__nodes em{
  position:absolute;left:20px;top:50%;
  font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--luz-50);white-space:nowrap;
  opacity:0;transform:translateY(-50%) translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s;
}
.filament__nodes a:hover em{opacity:1;transform:translateY(-50%)}
.filament__nodes a.is-on .globe{
  background:var(--brasa);border-color:var(--brasa);
  box-shadow:0 0 0 4px rgba(217,164,65,.13),0 0 18px 3px rgba(242,206,131,.6);
}
.filament__nodes a.is-on em{opacity:1;transform:translateY(-50%);color:var(--brasa)}
@media (min-width:1180px){.filament{display:flex}}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(14,26,20,.86);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--borda);
}
.topbar__in{
  max-width:1480px;margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.mark{display:flex;align-items:center;gap:12px}
.mark__lamp{width:19px;height:32px;fill:var(--salvia);flex:none;transition:fill .4s}
.mark__globe{fill:var(--brasa);filter:drop-shadow(0 0 6px rgba(242,206,131,.65))}
.mark:hover .mark__lamp{fill:var(--luz)}
.mark__txt{display:flex;flex-direction:column;line-height:1.15}
.mark__txt b{font-family:var(--disp);font-weight:500;font-size:1.06rem;letter-spacing:.01em}
.mark__txt i{font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--salvia);white-space:nowrap}

.topnav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.topnav>a{
  font-size:.79rem;font-weight:500;letter-spacing:.055em;color:var(--luz-70);
  position:relative;padding-block:4px;transition:color .3s;white-space:nowrap;
}
.topnav>a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brasa);
  transition:right .4s var(--ease);
}
.topnav>a:hover{color:var(--luz)}
.topnav>a:hover::after{right:0}
.topnav__cta{
  border:1px solid var(--borda);padding:.72em 1.5em !important;border-radius:2px;
  color:var(--luz) !important;font-weight:600 !important;
}
.topnav__cta::after{display:none}
.topnav__cta:hover{border-color:var(--brasa);color:var(--brasa) !important;background:rgba(217,164,65,.07)}

.topbar.is-solid{background:rgba(14,26,20,.9);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--borda)}
.topnav>a.is-here{color:var(--brasa)}
.topnav>a.is-here::after{right:0}

.topbar__end{display:flex;align-items:center;gap:14px}
.lang{display:flex;align-items:center;font-size:.68rem;font-weight:600;letter-spacing:.09em;color:var(--luz-50)}
.lang button{padding:4px 3px;transition:color .3s}
.lang button:not(:first-child)::before{content:"/";margin-right:5px;color:rgba(244,236,220,.28)}
.lang button:hover{color:var(--luz)}
.lang button.is-on{color:var(--brasa)}
@media (max-width:400px){.lang{font-size:.62rem}.lang button{padding:4px 1px}}

.burger{display:none;width:34px;height:34px;position:relative}
.burger span{
  position:absolute;left:6px;right:6px;height:1.5px;background:var(--luz);
  transition:transform .35s var(--ease),opacity .25s;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger.is-x span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.is-x span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* o menu vira burger cedo: em francês e espanhol os rótulos são bem mais longos */
@media (max-width:1080px){
  .burger{display:block}
  .topnav{
    position:fixed;inset:0;background:var(--noite);
    flex-direction:column;justify-content:center;gap:26px;
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  }
  .topnav.is-open{opacity:1;visibility:visible}
  .topnav>a{font-family:var(--disp);font-size:1.9rem;font-weight:400;letter-spacing:0;color:var(--luz)}
  .topnav>a::after{display:none}
  .topnav__cta{font-family:var(--sans) !important;font-size:.86rem !important;margin-top:10px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:132px var(--gut) 0;overflow:hidden;
}
@media (min-width:1180px){.hero{padding-left:calc(var(--rail) + var(--gut))}}
.hero__media{position:absolute;inset:0;z-index:0}
/* a folga vertical existe para o parallax nao abrir buraco no topo */
.hero__media img{
  position:absolute;left:0;top:-11%;width:100%;height:122%;
  object-fit:cover;object-position:50% 60%;filter:saturate(.86) contrast(1.02);
  scale:1.08;animation:heroZoom 2.6s var(--ease) forwards;will-change:transform;
}
@keyframes heroZoom{to{scale:1}}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,26,20,.72) 0%,rgba(14,26,20,.12) 32%,rgba(14,26,20,.72) 74%,var(--noite) 100%),
    linear-gradient(92deg,rgba(14,26,20,.82) 0%,rgba(14,26,20,.16) 62%,rgba(14,26,20,.4) 100%);
}
/* o "acender": um halo quente que cresce do centro do casarão */
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 46% 44%,rgba(242,206,131,.30),rgba(217,164,65,.09) 46%,transparent 72%);
  opacity:0;transform:scale(.55);
  animation:acender 2.4s var(--ease) .15s forwards;
  mix-blend-mode:screen;
}
@keyframes acender{
  0%{opacity:0;transform:scale(.55)}
  38%{opacity:1}
  62%{opacity:.72}
  100%{opacity:.9;transform:scale(1)}
}

.hero__in{position:relative;z-index:2;max-width:1180px;width:100%;margin-inline:auto;padding-bottom:clamp(48px,6vw,86px)}
.hero .eyebrow{color:var(--luz);text-shadow:0 1px 18px rgba(14,26,20,.9)}
.hero__h1,.hero__lead{text-shadow:0 2px 34px rgba(14,26,20,.55)}
.hero__h1{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.9rem,8.2vw,7rem);line-height:.96;letter-spacing:-.03em;
  margin:0 0 .45em;
}
.hero__h1 span{display:block}
.hero__h1 i{font-style:italic;color:var(--brasa)}
.hero__lead{max-width:50ch;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.72;color:var(--luz-70);margin:0 0 2.3em}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px}

.rise{opacity:0;transform:translateY(26px);animation:rise .95s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

.hero__facts{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  max-width:1180px;width:100%;margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--borda);
}
.hero__facts li{
  padding:26px 24px 30px 0;display:flex;flex-direction:column;gap:5px;
  border-right:1px solid var(--borda);
  opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards;
}
.hero__facts li:nth-child(1){animation-delay:.62s}
.hero__facts li:nth-child(2){animation-delay:.72s}
.hero__facts li:nth-child(3){animation-delay:.82s}
.hero__facts li:nth-child(4){animation-delay:.92s;border-right:0}
.hero__facts li:not(:first-child){padding-left:24px}
.hero__facts b{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1;color:var(--brasa)}
.hero__facts span{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-50)}

@media (max-width:760px){
  .hero__veil{
    background:linear-gradient(180deg,rgba(14,26,20,.82) 0%,rgba(14,26,20,.6) 38%,rgba(14,26,20,.92) 82%,var(--noite) 100%);
  }
  .hero__acts .btn{flex:1 1 auto;justify-content:center}
  .hero__facts{grid-template-columns:repeat(2,1fr)}
  .hero__facts li{padding:20px 18px 22px 0;border-bottom:1px solid var(--borda)}
  .hero__facts li:nth-child(2),.hero__facts li:nth-child(4){border-right:0;padding-left:18px}
  .hero__facts li:nth-child(3){padding-left:0}
  .hero__facts li:nth-child(3),.hero__facts li:nth-child(4){border-bottom:0}
}

/* =========================================================
   SEÇÕES
   ========================================================= */
.sec{position:relative;padding-block:var(--sec-y)}
@media (min-width:1180px){
  .sec .wrap{padding-left:calc(var(--rail) + var(--gut));max-width:calc(var(--max) + var(--rail))}
}

.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,6vw,88px);align-items:center}
@media (max-width:940px){.grid2{grid-template-columns:1fr;gap:44px}}
.grid2--flip>*:first-child{order:0}
@media (max-width:940px){.grid2--flip>*:first-child{order:1}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}

/* moldura de foto com filete de latão */
.frame{margin:0;position:relative}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)}
.frame::before{
  content:"";position:absolute;inset:-14px -14px 42px 14px;border:1px solid var(--borda);
  pointer-events:none;
}
.frame figcaption{
  margin-top:20px;font-size:.76rem;letter-spacing:.06em;color:var(--luz-50);
  padding-left:16px;border-left:1px solid var(--latao);
}
.frame--tram img{aspect-ratio:3/4}

/* A CASA */
.sec--house{background:linear-gradient(180deg,var(--noite),var(--folha) 60%,var(--noite))}
.attrs{display:flex;flex-direction:column;gap:0;margin-top:38px;border-top:1px solid var(--borda)}
.attrs div{padding:20px 0;border-bottom:1px solid var(--borda);display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:20px;align-items:baseline}
.attrs b{font-size:.79rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--luz)}
.attrs span{font-size:.93rem;color:var(--luz-70);line-height:1.6}
@media (max-width:560px){.attrs div{grid-template-columns:1fr;gap:6px}}

/* ESTADIAS */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
@media (max-width:880px){.rooms{grid-template-columns:1fr}}
.room{background:var(--folha);border:1px solid var(--borda);display:flex;flex-direction:column}
.room__img{overflow:hidden;aspect-ratio:16/11}
.room__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:saturate(.92)}
.room:hover .room__img img{transform:scale(1.05)}
.room__body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;flex:1}
.room__kind{font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--salvia);margin:0 0 12px}
.room__name{font-family:var(--disp);font-weight:500;font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.1;margin:0 0 .55em;letter-spacing:-.015em}
.room__desc{font-size:.96rem;line-height:1.72;color:var(--luz-70);margin:0 0 26px}
.room__tags{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.room__tags li{
  font-size:.72rem;letter-spacing:.05em;color:var(--luz-70);
  border:1px solid var(--borda);padding:.46em .95em;border-radius:999px;
}
.room__foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--borda);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.price{margin:0;display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.price span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--luz-50)}
.price b{font-family:var(--disp);font-weight:500;font-size:1.95rem;color:var(--brasa);line-height:1}
.price i{font-style:normal;font-size:.78rem;color:var(--luz-50)}
.note{margin:38px 0 0;font-size:.86rem;color:var(--luz-50);max-width:62ch;padding-left:16px;border-left:1px solid var(--salvia)}

/* EXPERIÊNCIA */
.sec--exp{background:var(--folha)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.tile{position:relative;overflow:hidden;border:1px solid var(--borda);background:var(--musgo);min-height:250px;display:flex}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.85) brightness(.72)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,20,.15),rgba(14,26,20,.92))}
.tile__txt{position:relative;z-index:2;margin-top:auto;padding:clamp(22px,2.4vw,34px)}
.tile h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
.tile p{margin:0;font-size:.9rem;line-height:1.65;color:var(--luz-70);max-width:42ch}
.tile .tile__num{
  font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;
  color:var(--brasa);margin:0 0 .28em;letter-spacing:-.02em;max-width:none;
}
.tile--wide{grid-column:span 2;min-height:340px}
.tile--tall{grid-row:span 2;min-height:340px}
.tile--plain{background:var(--musgo);border-color:var(--borda)}
.tile--plain::after{display:none}
.tile--plain .tile__txt{margin-top:0;display:flex;flex-direction:column;justify-content:center;height:100%}
.tile--plain:hover{border-color:rgba(217,164,65,.4)}
.tile--band{grid-column:1/-1;min-height:0}
.tile--band .tile__txt{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(24px,4vw,56px);
  align-items:center;padding-block:clamp(26px,3vw,38px);
}
.tile--band .tile__num{grid-row:span 2;margin:0;align-self:center;min-width:3.2em}
.tile--band h3{margin:0}
.tile--band p{max-width:70ch}
@media (max-width:880px){
  .bento{grid-template-columns:1fr 1fr}
  .tile--wide{grid-column:span 2}
  .tile--tall{grid-row:auto;min-height:280px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile--wide{grid-column:span 1}
  .tile--band .tile__txt{grid-template-columns:1fr}
  .tile--band .tile__num{grid-row:auto}
}

/* GALERIA */
.gal{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(110px,12.5vw,185px);gap:8px;
  padding-inline:clamp(8px,1.4vw,18px);margin-top:8px;
}
.gal__i{position:relative;overflow:hidden;padding:0;display:block;background:var(--musgo)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.82) brightness(.86)}
.gal__i:hover img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.gal__i span{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--luz);
  opacity:0;transform:translateY(8px);transition:all .45s var(--ease);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.gal__i:hover span,.gal__i:focus-visible span{opacity:1;transform:none}
.gal__i--a{grid-column:span 4;grid-row:span 3}
.gal__i--b{grid-column:span 2;grid-row:span 3}
.gal__i--c{grid-column:span 2;grid-row:span 2}
.gal__i--d{grid-column:span 2;grid-row:span 2}
.gal__i--e{grid-column:span 2;grid-row:span 2}
.gal__i--f{grid-column:span 6;grid-row:span 2}
@media (min-width:1180px){.gal{padding-left:calc(var(--rail) + 10px)}}
@media (max-width:700px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:31vw}
  .gal__i{grid-column:span 1;grid-row:span 1}
  .gal__i--a{grid-column:span 2;grid-row:span 2}
  .gal__i--f{grid-column:span 2;grid-row:span 1}
}

/* HÓSPEDES */
.sec--quotes{background:linear-gradient(180deg,var(--noite),var(--folha))}
.quotes{position:relative}
.quotes__stage{position:relative;min-height:320px}
.quote{
  margin:0;position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;
}
.quote.is-on{opacity:1;visibility:visible;transform:none;position:relative}
.quote p{
  font-family:var(--disp);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.5vw,2.05rem);line-height:1.42;letter-spacing:-.012em;
  margin:0 0 1.1em;max-width:26ch;text-wrap:pretty;
}
.quote cite{
  font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--salvia);display:flex;align-items:center;gap:.9em;
}
.quote cite::before{content:"";width:34px;height:1px;background:var(--latao)}
.quotes__nav{display:flex;gap:12px;margin-top:26px}
.quotes__nav button{
  width:9px;height:9px;border-radius:50%;padding:0;
  background:transparent;border:1px solid rgba(244,236,220,.32);transition:all .4s var(--ease);
}
.quotes__nav button.is-on{
  background:var(--brasa);border-color:var(--brasa);
  box-shadow:0 0 0 4px rgba(217,164,65,.13),0 0 14px 2px rgba(242,206,131,.55);
}
@media (max-width:600px){.quotes__stage{min-height:400px}}

/* SANTA TERESA */
.dist{list-style:none;margin:34px 0 10px;padding:0;border-top:1px solid var(--borda)}
.dist li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--borda)}
.dist b{font-size:.9rem;font-weight:500;color:var(--luz)}
.dist span{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--salvia);white-space:nowrap}
.dist__note{font-size:.74rem;color:var(--luz-50);margin:0 0 26px}
.addr{font-style:normal;font-size:.95rem;line-height:1.7;color:var(--luz-70);margin-bottom:22px}

.mapstrip{
  position:relative;margin-top:clamp(56px,7vw,96px);height:clamp(260px,34vw,420px);
  border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);overflow:hidden;
  background:var(--musgo);
}
/* enquanto o mapa carrega, a faixa não fica vazia */
.mapstrip::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(244,236,220,.05) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(244,236,220,.05) 39px 40px);
}
.mapstrip iframe{position:relative}
.mapstrip iframe{
  width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.92) hue-rotate(115deg) saturate(.55) brightness(.94) contrast(.92);
}

/* PROPÓSITO */
.sec--purpose{position:relative;overflow:hidden;background:var(--folha)}
.purpose__bg{position:absolute;inset:0;z-index:0}
.purpose__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.42)}
.purpose__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--noite) 12%,rgba(14,26,20,.93) 46%,rgba(14,26,20,.72) 100%);
}
.purpose{position:relative;z-index:2;max-width:62ch}
.pur__stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin:38px 0 40px;padding-top:30px;border-top:1px solid var(--borda)}
.pur__stats div{display:flex;flex-direction:column;gap:4px}
.pur__stats b{font-family:var(--disp);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;color:var(--brasa)}
.pur__stats span{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--luz-50);max-width:18ch}

/* EVENTOS */
.ev__list{list-style:none;margin:26px 0 26px;padding:0}
.ev__list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.95rem;color:var(--luz-70)}
.ev__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--latao);box-shadow:0 0 10px 1px rgba(242,206,131,.5);
}

.form{background:var(--folha);border:1px solid var(--borda);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
.form label{display:flex;flex-direction:column;gap:8px}
.form label span{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--luz-50)}
.form input,.form textarea{
  font:inherit;font-size:.95rem;color:var(--luz);background:transparent;
  border:0;border-bottom:1px solid var(--borda);padding:11px 2px;border-radius:0;
  transition:border-color .35s;resize:vertical;
}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--brasa)}
.form .btn{margin-top:8px;align-self:flex-start}
.form__ok{margin:0;font-size:.85rem;color:var(--brasa)}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{border-top:1px solid var(--borda);background:var(--noite);padding-top:clamp(56px,6vw,84px)}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:56px}
@media (max-width:940px){.foot__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__in{grid-template-columns:1fr}}
.foot__brand p{font-size:.88rem;line-height:1.7;color:var(--luz-50);max-width:42ch;margin:20px 0 20px}
.foot__soc{display:flex;gap:18px;flex-wrap:wrap}
.foot__soc a{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--salvia);transition:color .3s}
.foot__soc a:hover{color:var(--brasa)}
.foot__col{display:flex;flex-direction:column;gap:11px}
.foot__col h4{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--luz);margin:0 0 6px}
.foot__col a{font-size:.88rem;color:var(--luz-50);transition:color .3s}
.foot__col a:hover{color:var(--brasa)}
.foot__col address{font-style:normal;font-size:.88rem;line-height:1.75;color:var(--luz-50)}
.foot__base{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:22px 26px;border-top:1px solid var(--borda);
}
.foot__base p{margin:0;font-size:.74rem;letter-spacing:.05em;color:var(--luz-50)}

/* WhatsApp */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:54px;padding:0 17px;border-radius:999px;
  background:var(--latao);color:#12211A;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
  transition:gap .45s var(--ease),padding .45s var(--ease),background .3s;
}
.wa svg{width:24px;height:24px;fill:currentColor;flex:none}
.wa span{
  font-size:.8rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  max-width:0;opacity:0;transition:max-width .45s var(--ease),opacity .3s;
}
.wa:hover{background:var(--brasa);gap:10px;padding-right:22px}
.wa:hover span,.wa:focus-visible span{max-width:200px;opacity:1}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(9,17,13,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(18px,4vw,60px);
  animation:fadeIn .3s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--borda)}
.lightbox__x{
  position:absolute;top:18px;right:22px;font-size:2.4rem;line-height:1;color:var(--luz);
  width:48px;height:48px;transition:color .3s;
}
.lightbox__x:hover{color:var(--brasa)}

/* =========================================================
   PÁGINAS INTERNAS (day use / casa de oração)
   Sem o trilho, então sem o recuo que ele pede.
   ========================================================= */
.inner .filament{display:none}
@media (min-width:1180px){
  .inner .sec .wrap{padding-left:var(--gut);max-width:var(--max)}
  .inner .phero{padding-left:var(--gut)}
}

/* hero das internas: mais baixo que o da home */
.phero{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(76svh,720px);padding:150px var(--gut) clamp(52px,6vw,84px);overflow:hidden;
}
.phero--tall{min-height:min(88svh,860px);padding-bottom:0}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;object-position:50% 54%;filter:saturate(.82);will-change:transform;
}
.phero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,26,20,.78) 0%,rgba(14,26,20,.44) 30%,rgba(14,26,20,.9) 78%,var(--noite) 100%),
    linear-gradient(92deg,rgba(14,26,20,.88) 0%,rgba(14,26,20,.3) 66%,rgba(14,26,20,.5) 100%);
}
.phero__in{position:relative;z-index:2;padding-inline:0}
.phero .eyebrow{color:var(--luz);text-shadow:0 1px 18px rgba(14,26,20,.9)}
.phero__h1{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.028em;
  margin:0 0 .5em;max-width:16ch;text-wrap:balance;text-shadow:0 2px 34px rgba(14,26,20,.6);
}
.phero__h1 i{font-style:italic;color:var(--brasa)}
.phero__lead{
  max-width:52ch;font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.72;
  color:var(--luz-70);margin:0 0 2.1em;text-shadow:0 2px 30px rgba(14,26,20,.6);
}
.phero__acts{display:flex;flex-wrap:wrap;gap:14px}
.phero--tall .hero__facts{margin-top:clamp(44px,6vw,80px)}
@media (max-width:760px){
  .phero{min-height:0;padding-top:132px}
  .phero__acts .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- day use: cartão de preço ---------- */
.sec--du1{background:linear-gradient(180deg,var(--noite),var(--folha))}
.ticket{
  display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:clamp(28px,4vw,64px);
  border:1px solid var(--borda);background:var(--folha);padding:clamp(28px,4vw,56px);
}
@media (max-width:820px){.ticket{grid-template-columns:1fr;gap:32px}}
.ticket__price{border-right:1px solid var(--borda);padding-right:clamp(20px,3vw,40px)}
@media (max-width:820px){.ticket__price{border-right:0;border-bottom:1px solid var(--borda);padding:0 0 26px}}
.ticket__v{
  font-family:var(--disp);font-weight:500;font-size:clamp(3.4rem,7vw,5.4rem);line-height:.92;
  color:var(--brasa);margin:0 0 .12em;letter-spacing:-.03em;
}
.ticket__u{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--luz-50)}
.ticket__list{list-style:none;margin:0;padding:0}
.ticket__list li{padding:18px 0;border-bottom:1px solid var(--borda);display:flex;flex-direction:column;gap:5px}
.ticket__list li:first-child{padding-top:0}
.ticket__list li:last-child{border-bottom:0;padding-bottom:0}
.ticket__list b{font-size:.79rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--luz)}
.ticket__list span{font-size:.94rem;color:var(--luz-70);line-height:1.65}

/* ---------- day use: passos ---------- */
.sec--steps{background:var(--folha)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{border-top:1px solid var(--latao);padding-top:22px;display:flex;flex-direction:column;gap:9px}
.steps__n{
  font-family:var(--disp);font-weight:500;font-size:1.05rem;letter-spacing:.08em;
  color:var(--brasa);
}
.steps b{font-size:1.06rem;font-weight:600;color:var(--luz);letter-spacing:-.005em}
.steps p{margin:0;font-size:.93rem;line-height:1.68;color:var(--luz-70)}

.rules{margin-top:clamp(44px,5vw,72px);border:1px solid var(--borda);padding:clamp(24px,3vw,38px);background:var(--musgo)}
.rules h3{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--luz);margin:0 0 18px}
.rules ul{list-style:none;margin:0;padding:0}
.rules li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.93rem;line-height:1.65;color:var(--luz-70)}
.rules li:last-child{margin-bottom:0}
.rules li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--salvia);
}
.frame--du{margin-top:clamp(32px,4vw,48px)}
.frame--du img{aspect-ratio:16/10}

/* ---------- doar: o que a doação move ---------- */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media (max-width:900px){.moves{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.moves{grid-template-columns:1fr}}
.move{
  border:1px solid var(--borda);background:var(--musgo);padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:11px;transition:border-color .4s var(--ease);
}
.move:hover{border-color:rgba(217,164,65,.42)}
.move b{
  position:relative;padding-left:22px;
  font-family:var(--disp);font-weight:500;font-size:1.24rem;line-height:1.25;letter-spacing:-.012em;color:var(--luz);
}
.move b::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--brasa);box-shadow:0 0 12px 1px rgba(242,206,131,.5);
}
.move p{margin:0;font-size:.92rem;line-height:1.68;color:var(--luz-70)}

/* ---------- doar: valores ---------- */
.sec--give{background:linear-gradient(180deg,var(--folha),var(--noite))}
.gives{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}
@media (max-width:880px){.gives{grid-template-columns:1fr}}
.give{
  position:relative;border:1px solid var(--borda);background:var(--folha);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;
}
.give--hi{border-color:rgba(217,164,65,.5);box-shadow:0 24px 70px -40px rgba(217,164,65,.6)}
.give__tag{
  position:absolute;top:0;right:0;margin:0;background:var(--latao);color:#12211A;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.5em 1em;
}
.give__v{
  font-family:var(--disp);font-weight:500;font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;
  color:var(--brasa);margin:0 0 .18em;letter-spacing:-.028em;
}
.give__k{margin:0 0 22px;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia)}
.give__n{font-family:var(--disp);font-weight:500;font-size:1.55rem;line-height:1.1;margin:0 0 .5em;letter-spacing:-.015em}
.give__d{margin:0 0 28px;font-size:.93rem;line-height:1.68;color:var(--luz-70)}
.give .btn{margin-top:auto;align-self:flex-start}

.free{
  margin-top:clamp(20px,2.4vw,30px);border:1px solid var(--borda);background:var(--musgo);
  padding:clamp(24px,3vw,38px);display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.free h3{font-family:var(--disp);font-weight:500;font-size:1.4rem;margin:0 0 .35em;letter-spacing:-.015em}
.free p{margin:0;font-size:.93rem;color:var(--luz-70);max-width:48ch}

/* link discreto dentro dos cards da home */
.tile .tile__link{
  margin-top:16px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brasa);border-bottom:1px solid rgba(242,206,131,.35);align-self:flex-start;
  transition:border-color .3s;
}
.tile .tile__link:hover{border-color:var(--brasa)}

/* =========================================================
   MOVIMENTO
   Tudo aqui serve a mesma ideia: a luz chegando na casa.
   ========================================================= */

/* 1. Titulos de display sao revelados de cima para baixo, como
   se a luz descesse sobre eles. O bloco continua subindo junto. */
.reveal .h2,
.phero__h1.rise,
.hero__h1 .rise{
  clip-path:inset(-14% -6% 104% -6%);
}
.reveal .h2{transition:clip-path 1.15s var(--ease) .08s}
.reveal.is-in .h2{clip-path:inset(-14% -6% -14% -6%)}

.phero__h1.rise,
.hero__h1 .rise{animation-name:riseWipe;animation-duration:1.15s}
@keyframes riseWipe{
  to{opacity:1;transform:none;clip-path:inset(-14% -6% -14% -6%)}
}

/* 2. As fotos assentam: entram levemente ampliadas e acomodam.
   Usa a propriedade `scale`, entao nao briga com o `transform`
   do hover, os dois se compoem. */
.frame.reveal img,
.reveal .frame img,
.reveal .room__img img,
.tile.reveal img,
.reveal .tile img,
.reveal .gal__i img{
  scale:1.055;
  transition:scale 1.6s var(--ease);
}
.frame.reveal.is-in img,
.reveal.is-in .frame img,
.reveal.is-in .room__img img,
.tile.reveal.is-in img,
.reveal.is-in .tile img,
.reveal.is-in .gal__i img{scale:1}

/* 3. Uma luz atravessa o botao principal no hover */
.btn--brass{position:relative;overflow:hidden;isolation:isolate}
.btn--brass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.btn--brass:hover::after,
.btn--brass:focus-visible::after{transform:translateX(130%)}

/* 4. O globo da secao ativa respira no trilho */
@keyframes respira{
  0%,100%{box-shadow:0 0 0 4px rgba(217,164,65,.12),0 0 16px 3px rgba(242,206,131,.5)}
  50%    {box-shadow:0 0 0 6px rgba(217,164,65,.2),0 0 26px 5px rgba(242,206,131,.85)}
}
.filament__nodes a.is-on .globe{animation:respira 3.4s ease-in-out infinite}

/* 5. O botao do WhatsApp entra depois que a pagina assenta */
.wa{opacity:0;transform:translateY(14px) scale(.9);animation:waIn .7s var(--ease) 1.5s forwards}
@keyframes waIn{to{opacity:1;transform:none}}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rise,.reveal,.wa{opacity:1 !important;transform:none !important}
  .hero__glow{opacity:.9;transform:none}
  .hero__media img,.phero__media img{transform:none;scale:1}
  /* nada de recorte nem de foto assentando */
  .reveal .h2,.phero__h1.rise,.hero__h1 .rise{clip-path:none !important}
  .reveal img{scale:1 !important}
  .btn--brass::after{display:none}
}