/* ==========================================================================
   B.office — Escritório Virtual
   Tokens: ink #0A0A0D · charcoal #202026 · bronze #A67A53 · umber #73573F · mist #F2F2F2
   Display: Playfair Display Italic (restraint) · Body/UI: Inter
   Signature: the full stop from the wordmark, carried through as a device
   ========================================================================== */

@font-face{
  font-family:'Inter var';
  src:url('../fonts/inter.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Playfair Italic';
  src:url('../fonts/playfair-italic.woff2') format('woff2');
  font-weight:400 900;
  font-style:italic;
  font-display:swap;
}

:root{
  --ink:#0A0A0D;
  --charcoal:#202026;
  --bronze:#A67A53;
  --umber:#73573F;
  --mist:#F2F2F2;

  --bronze-soft:rgba(166,122,83,.16);
  --ink-soft:rgba(10,10,13,.06);
  --mist-soft:rgba(242,242,242,.72);
  --whatsapp:#25D366;
  --whatsapp-dark:#1DA851;

  --font-display:'Playfair Italic', 'Times New Roman', serif;
  --font-body:'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --edge:clamp(1.5rem, 6vw, 5rem);
  --section-pad:clamp(4.5rem, 11vw, 9rem);
  --container:1400px;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  --header-h:88px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;padding:0;}
svg{display:block;}

.skip-link{
  position:fixed; top:-100%; left:1rem; z-index:200;
  background:var(--ink); color:var(--mist); padding:.85rem 1.25rem;
  border-radius:2px; font-size:.875rem;
  transition:top .25s var(--ease-out);
}
.skip-link:focus{top:1rem;}

:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

.dot{color:var(--bronze); font-style:normal;}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 1.25rem;
}
.eyebrow--hero{color:var(--mist);}

/* Headlines: Inter for the body of the line, Playfair Italic reserved for the
   final accent phrase — wrap that phrase in <em> */
.h2{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(2rem, 3.6vw, 3.15rem);
  line-height:1.16;
  letter-spacing:-.01em;
  max-width:20ch;
  margin:0 0 1.5rem;
  color:var(--mist);
}
.h2 em{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
}

.body-lg{font-size:clamp(1.05rem, 1.6vw, 1.3rem); line-height:1.6; max-width:44ch; color:var(--mist-soft); margin:0 0 1.25rem;}
.body{font-size:1rem; line-height:1.7; max-width:42ch; color:var(--mist-soft); margin:0 0 1.75rem;}

/* Light-section override: used on Benefícios and the two white room cards */
.theme-light .eyebrow{color:var(--umber);}
.theme-light .h2{color:var(--ink);}
.theme-light .body-lg{color:var(--charcoal);}
.theme-light .body{color:var(--umber);}

/* ---------- Layout helpers ---------- */
.section{
  padding:var(--section-pad) var(--edge);
  max-width:var(--container);
  margin:0 auto;
}
.section-head{max-width:640px; margin:0 0 clamp(2.5rem, 6vw, 4.5rem);}
.section-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; max-width:none; flex-wrap:wrap;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.75rem;
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  border-radius:0;
  border:1px solid transparent;
  transition:transform .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
  white-space:nowrap;
}
.btn-arrow{width:16px; height:10px;}
.btn--primary{background:var(--bronze); color:var(--ink);}
.btn--primary:hover{transform:translateY(-2px); background:var(--mist);}
.btn--primary .btn-arrow{transition:transform .35s var(--ease-out);}
.btn--primary:hover .btn-arrow{transform:translateX(4px);}
.theme-light .btn--primary{background:var(--ink); color:var(--mist);}
.theme-light .btn--primary:hover{background:var(--umber);}

.btn--outline{border-color:rgba(242,242,242,.35); color:var(--mist);}
.btn--outline:hover{transform:translateY(-2px); border-color:var(--mist); background:rgba(242,242,242,.08);}
.theme-light .btn--outline{border-color:rgba(10,10,13,.28); color:var(--ink);}
.theme-light .btn--outline:hover{border-color:var(--ink); background:rgba(10,10,13,.04);}

.btn--ghost-header{border:1px solid rgba(242,242,242,.55); color:var(--mist); padding:.7rem 1.4rem; font-size:.82rem;}
.btn--ghost-header:hover{background:rgba(242,242,242,.12);}

.btn--sm{padding:.7rem 1.15rem; font-size:.82rem;}

.link-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.9rem; font-weight:600; color:var(--mist);
  padding-bottom:.3rem;
  border-bottom:1px solid rgba(242,242,242,.3);
  transition:border-color .3s var(--ease-out), gap .3s var(--ease-out), color .3s var(--ease-out);
}
.link-cta svg{width:16px; height:10px; transition:transform .3s var(--ease-out);}
.link-cta:hover{border-color:var(--bronze); color:var(--bronze); gap:.85rem;}
.link-cta:hover svg{transform:translateX(3px);}
.theme-light .link-cta{color:var(--ink); border-bottom-color:rgba(10,10,13,.25);}
.theme-light .link-cta:hover{color:var(--umber); border-bottom-color:var(--bronze);}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:0 var(--edge);
  transition:background-color .5s var(--ease-out), backdrop-filter .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.header-inner{
  position:relative; z-index:101;
  max-width:var(--container); margin:0 auto;
  height:var(--header-h);
  display:flex; align-items:center; gap:2.5rem;
  transition:height .4s var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(10,10,13,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(242,242,242,.08);
}
.site-header.is-scrolled .header-inner{height:72px;}

.logo{position:relative; display:block; width:120px; flex:0 0 auto;}
.logo-mark{width:100%; height:auto; filter:brightness(0) invert(1);}

.nav{margin-left:auto;}
.nav ul{display:flex; gap:2.1rem;}
.nav a{
  font-size:.86rem; font-weight:500; color:var(--mist);
  position:relative; padding:.3rem 0;
  transition:color .4s var(--ease-out);
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--bronze); transition:right .35s var(--ease-out);
}
.nav a:hover::after{right:0;}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; flex:0 0 auto; margin-left:auto;}
.nav-toggle span{width:100%; height:1.5px; background:var(--mist); transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--ink); color:var(--mist);
  display:flex; flex-direction:column; justify-content:center; gap:2.5rem;
  padding:2rem var(--edge);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
}
.mobile-nav.is-open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s;}
.mobile-nav ul{display:flex; flex-direction:column; gap:1.1rem;}
.mobile-nav a{font-family:var(--font-body); font-weight:500; font-size:1.7rem;}
.mobile-nav .btn{align-self:flex-start;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:640px;
  overflow:hidden; color:var(--mist);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%; animation:hero-img-in 1.7s var(--ease-out) both;}
@keyframes hero-img-in{from{transform:scale(1.045);} to{transform:scale(1);}}

.hero-mask{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  animation:hero-mask-reveal 1.35s var(--ease-inout) .1s both;
}
@keyframes hero-mask-reveal{
  0%{clip-path:circle(150% at 50% 40%); background:var(--ink);}
  62%{clip-path:circle(8% at 50% 40%); background:var(--ink);}
  84%{clip-path:circle(3.2% at 50% 40%); background:var(--bronze);}
  100%{clip-path:circle(0% at 50% 40%); background:var(--bronze);}
}
@media (prefers-reduced-motion: reduce){
  .hero-mask{animation:none; display:none;}
  .hero-media img{animation:none;}
}


.hero-content{
  position:absolute; z-index:3; right:6%; top:50%; transform:translateY(-48%);
  width:min(44%, 660px);
  text-align:right;
}
.hero-title{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(2.4rem, 4vw, 3.75rem); line-height:1.14; letter-spacing:-.01em;
  margin:0 0 1.5rem;
}
.hero-title em{font-family:var(--font-display); font-style:italic; font-weight:500;}
.hero-title .line{display:block; overflow:hidden;}
.hero-subtitle{font-size:clamp(1rem, 1.3vw, 1.15rem); line-height:1.55; max-width:38ch; margin:0 0 2.25rem auto; color:var(--mist-soft); font-weight:400;}
.hero-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1rem;}

/* load-in sequence for hero text */
.reveal-item{opacity:0; transform:translateY(22px); filter:blur(4px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);}
.reveal-item.is-in{opacity:1; transform:none; filter:blur(0);}
@media (prefers-reduced-motion: reduce){.reveal-item{opacity:1; transform:none; filter:none; transition:none;}}

/* ==========================================================================
   Benefits strip
   ========================================================================== */
.strip{
  background:var(--ink); color:var(--mist);
  padding:1.5rem 0;
  overflow:hidden;
}
.strip-track{display:flex; width:max-content; animation:strip-scroll 32s linear infinite;}
.strip:hover .strip-track, .strip:focus-within .strip-track{animation-play-state:paused;}
.strip-list{display:flex; align-items:center; flex:0 0 auto;}
.strip-list li{
  font-size:.85rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:0 2.25rem; position:relative; white-space:nowrap;
}
.strip-list li::after{content:''; position:absolute; right:0; top:50%; width:4px; height:4px; border-radius:50%; background:var(--bronze); transform:translate(50%, -50%);}
@keyframes strip-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.strip-track{animation:none;}}

/* ==========================================================================
   Split (Escritório Virtual)
   ========================================================================== */
.split{
  display:grid; grid-template-columns:minmax(0, 35fr) minmax(0, 65fr);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:center;
}
.split-media{aspect-ratio:4/5; overflow:hidden; background:var(--charcoal);}
.split-media img{width:100%; height:100%; object-fit:cover;}

/* ==========================================================================
   Reveal-on-scroll (reversible)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(30px); filter:blur(6px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out); transition-delay:calc(var(--stagger, 0) * 70ms);}
.reveal[data-reveal="fade"]{transform:translateY(0) scale(.98);}
.reveal.is-in{opacity:1; transform:none; filter:blur(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; filter:none; transition:none;}}

/* ==========================================================================
   Section-outer: full-bleed background wrapper for theme-light sections
   ========================================================================== */
.section-outer{width:100%;}
.theme-light{background:var(--mist); color:var(--ink);}

/* ==========================================================================
   Benefits stepper (auto-scrolling ticker)
   ========================================================================== */
@keyframes stepper-fill{from{width:0%;} to{width:100%;}}

.stepper-viewport{
  overflow:hidden;
  border-top:1px solid rgba(10,10,13,.12);
  padding-top:3.25rem;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.stepper-scroll{
  display:flex; width:max-content;
  animation:stepper-scroll 30s linear infinite;
}
.stepper-viewport:hover .stepper-scroll,
.stepper-viewport:focus-within .stepper-scroll{animation-play-state:paused;}
@keyframes stepper-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.stepper{display:flex; gap:0; flex:0 0 auto;}
.stepper-item{
  flex:0 0 auto; width:190px;
  padding:0 1.25rem 0 0;
  text-align:left;
}

.stepper-node{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--bronze); color:var(--ink);
  box-shadow:0 0 0 6px var(--bronze-soft);
  margin-bottom:1.1rem;
}
.stepper-node svg{width:19px; height:19px;}
.stepper-item h3{font-size:.92rem; font-weight:600; margin:0 0 .4rem; max-width:15ch;}
.stepper-item p{font-size:.82rem; color:var(--umber); max-width:20ch; margin:0; line-height:1.5;}

@media (prefers-reduced-motion: reduce){
  .stepper-scroll{animation:none;}
  .stepper-viewport{overflow-x:auto;}
}

/* ==========================================================================
   Rooms
   ========================================================================== */
.section--rooms .room{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 5rem); align-items:center; margin-bottom:clamp(2.5rem, 5vw, 4rem);}
.room-media{order:1;}
.room-text{order:2;}
.room--media-right .room-media{order:2;}
.room--media-right .room-text{order:1;}
.room-media{aspect-ratio:4/3; overflow:hidden;}
.room-media img{width:100%; height:100%; object-fit:cover;}
.room-text h3{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.5rem, 2.4vw, 2rem); margin:0 0 .85rem;}
.room-text p{color:var(--mist-soft); font-size:1rem; max-width:40ch; margin:0 0 1.5rem;}

/* ==========================================================================
   Gallery / carousel
   ========================================================================== */
.gallery-controls{display:flex; align-items:center; gap:1.1rem;}
.gallery-count{font-size:.8rem; letter-spacing:.06em; color:var(--mist-soft); font-variant-numeric:tabular-nums;}
.gallery-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(242,242,242,.28);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.gallery-arrow:hover{border-color:var(--bronze); background:var(--bronze); color:var(--ink); transform:translateY(-2px);}
.gallery-arrow svg{width:16px; height:10px;}

.carousel{margin-top:2.5rem; cursor:grab; overflow:hidden;}
.carousel.is-dragging{cursor:grabbing;}
.carousel-track{
  display:flex; gap:clamp(1rem, 2.2vw, 1.75rem);
  will-change:transform;
}
.carousel-slide{
  flex:0 0 auto; width:clamp(260px, 34vw, 460px);
  opacity:.62; transform:scale(.97);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.carousel-slide.is-active{opacity:1; transform:scale(1);}
.carousel-open{display:block; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--charcoal);}
.carousel-open img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); pointer-events:none;}
.carousel-open:hover img{transform:scale(1.045);}
.carousel-slide figcaption{padding-top:1rem; display:flex; flex-direction:column; gap:.2rem;}
.cap-title{font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--mist);}
.cap-desc{font-size:.85rem; color:var(--mist-soft);}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,10,13,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.lightbox:not([hidden]){opacity:1; visibility:visible; transition:opacity .4s var(--ease-out), visibility 0s;}
.lightbox-stage{max-width:min(90vw, 1100px); max-height:86vh;}
.lightbox-stage img{max-width:100%; max-height:86vh; object-fit:contain; transform:scale(.98); transition:transform .4s var(--ease-out);}
.lightbox:not([hidden]) .lightbox-stage img{transform:scale(1);}
.lightbox-close{position:absolute; top:1.75rem; right:var(--edge); width:44px; height:44px; color:var(--mist); display:flex; align-items:center; justify-content:center; border:1px solid rgba(242,242,242,.25); border-radius:50%; transition:border-color .3s;}
.lightbox-close:hover{border-color:var(--mist);}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; color:var(--mist); display:flex; align-items:center; justify-content:center; border:1px solid rgba(242,242,242,.25); border-radius:50%; transition:border-color .3s, background-color .3s;}
.lightbox-arrow:hover{border-color:var(--mist); background:rgba(242,242,242,.08);}
.lightbox-arrow svg{width:16px; height:10px;}
.lightbox-arrow--prev{left:var(--edge);}
.lightbox-arrow--next{right:var(--edge);}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps{
  position:relative;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1.5rem, 3vw, 2.5rem);
  border-top:1px solid rgba(242,242,242,.14); padding-top:2.5rem;
}
.steps::before{
  content:''; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--bronze);
  animation:stepper-fill 7s linear infinite;
}
@media (prefers-reduced-motion: reduce){.steps::before{animation:none;}}
.step{padding-right:1rem;}
.step-num{display:block; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--bronze); margin-bottom:1.25rem;}
.step h3{font-size:1.05rem; font-weight:600; margin:0 0 .6rem;}
.step p{font-size:.92rem; color:var(--mist-soft); max-width:26ch; margin:0;}
.section--how > .btn{margin-top:3rem;}

/* ==========================================================================
   Differentials (image bg)
   ========================================================================== */
.section--diff{position:relative; padding:var(--section-pad) var(--edge); color:var(--mist); overflow:hidden;}
.diff-media{position:absolute; inset:0; z-index:0;}
.diff-media img{width:100%; height:100%; object-fit:cover;}
.diff-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,13,.82), rgba(10,10,13,.7));}
.diff-content{position:relative; z-index:1; max-width:var(--container); margin:0 auto;}
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 4rem); max-width:760px; margin-top:1.5rem;}
.diff-list li{font-size:1rem; padding:.9rem 0; border-top:1px solid rgba(242,242,242,.16);}
.diff-list li:last-child{border-bottom:1px solid rgba(242,242,242,.16);}
.section--diff .btn{margin-top:2.75rem;}

/* ==========================================================================
   CTA final
   ========================================================================== */
.section--cta{position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden;}
.cta-media{position:absolute; inset:0; z-index:0;}
.cta-media img{width:100%; height:100%; object-fit:cover; object-position:center 25%;}
.cta-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,13,.86) 0%, rgba(10,10,13,.55) 55%, rgba(10,10,13,.3) 100%);}
.cta-content{position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:var(--section-pad) var(--edge); width:100%;}
.section--cta .h2{max-width:16ch;}
.cta-phone{margin-top:1.75rem; font-size:.9rem; color:var(--mist-soft);}
.cta-phone a{border-bottom:1px solid rgba(242,242,242,.4);}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink); color:var(--mist); padding:var(--section-pad) var(--edge) 2.5rem;}
.footer-top{max-width:var(--container); margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding-bottom:clamp(2.5rem, 6vw, 4rem); border-bottom:1px solid rgba(242,242,242,.14); flex-wrap:wrap;}
.logo--footer{width:150px;}
.logo--footer img{filter:brightness(0) invert(1);}
.footer-tagline{font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--mist-soft);}
.footer-grid{max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; padding:clamp(2.5rem, 6vw, 4rem) 0;}
.footer-col h3{font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); margin:0 0 1.25rem;}
.footer-col p, .footer-col li{margin:0 0 .7rem; font-size:.92rem; color:var(--mist-soft);}
.footer-col a:hover{color:var(--mist);}
.footer-bottom{max-width:var(--container); margin:0 auto; padding-top:2rem; border-top:1px solid rgba(242,242,242,.14); font-size:.8rem; color:rgba(242,242,242,.5);}

.footer-map-card{
  max-width:var(--container); margin:0 auto clamp(2rem, 5vw, 3rem);
  border:1px solid rgba(242,242,242,.14); border-radius:6px; overflow:hidden; background:rgba(242,242,242,.03);
}
.footer-map-card-info{display:flex; align-items:center; gap:1rem; padding:1.6rem 2rem;}
.footer-map-icon{
  flex:none; width:40px; height:40px; border-radius:50%; color:var(--bronze); background:var(--bronze-soft);
  display:flex; align-items:center; justify-content:center;
}
.footer-map-icon svg{width:20px; height:20px;}
.footer-map-card h3{font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); margin:0 0 .3rem;}
.footer-map-card address{font-style:normal; font-size:.92rem; color:var(--mist-soft); margin:0;}

.footer-map-embed{position:relative; width:100%; height:clamp(240px, 30vw, 380px); background:var(--charcoal);}
.footer-map-embed iframe{width:100%; height:100%; border:0; display:block;}
.footer-map-open{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--mist); color:var(--ink); font-size:.82rem; font-weight:600;
  padding:.65rem 1rem; border-radius:2px; box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.footer-map-open:hover{background:var(--bronze); transform:translateY(-1px);}
.footer-map-open svg{width:14px; height:14px;}

/* ==========================================================================
   Floating WhatsApp + mobile sticky bar
   ========================================================================== */
.whatsapp-float{
  position:fixed; right:var(--edge); bottom:1.75rem; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:var(--whatsapp); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(10,10,13,.3);
  transition:transform .35s var(--ease-out), background-color .35s var(--ease-out);
}
.whatsapp-float svg{width:26px; height:26px;}
.whatsapp-float:hover{transform:translateY(-4px); background:var(--whatsapp-dark);}

.btn--whatsapp{background:var(--whatsapp); color:var(--ink); border-color:transparent;}
.btn--whatsapp:hover{background:var(--whatsapp-dark);}

.mobile-sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem var(--edge) calc(.9rem + env(safe-area-inset-bottom));
  background:rgba(10,10,13,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(242,242,242,.12);
  transform:translateY(0); transition:transform .4s var(--ease-out);
}
.mobile-sticky-bar.is-hidden{transform:translateY(100%);}
.mobile-sticky-bar p{font-size:.82rem; font-weight:600; margin:0; color:var(--mist);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .split{grid-template-columns:1fr;}
  .split-media{order:-1; aspect-ratio:16/10;}
  .section--rooms .room{grid-template-columns:1fr;}
  .room-media, .room-text{order:0;}
  .room-media{aspect-ratio:16/10;}
  .steps{grid-template-columns:1fr 1fr;}
  .diff-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 860px){
  .nav, .btn--ghost-header{display:none;}
  .nav-toggle{display:flex;}
  .hero-content{
    left:6%; right:6%; width:auto; max-width:none;
    top:auto; bottom:calc(3.5rem + 104px); transform:none;
    text-align:center;
  }
  .hero-title{margin:0 0 .55rem;}
  .hero-subtitle{margin:0 auto .9rem; font-size:.85rem; line-height:1.42;}
  .hero-actions{justify-content:center; gap:.6rem;}
  .hero-actions .btn{padding:.7rem 1.3rem; font-size:.82rem;}
  .mobile-sticky-bar{display:flex;}
  .whatsapp-float{display:none;}
  .benefit-row{grid-template-columns:56px 1fr; gap:1.25rem;}
  .steps{grid-template-columns:1fr; gap:2.25rem;}
  .section-head--row{flex-direction:column; align-items:flex-start; gap:1.25rem;}
  .footer-top{flex-direction:column; align-items:flex-start; gap:1.5rem;}
  .footer-grid{grid-template-columns:1fr; gap:2rem;}
  .footer-map-card-info{padding:1.4rem 1.5rem;}
  .footer-map-open{font-size:.78rem; padding:.55rem .85rem;}
  main{padding-bottom:4.5rem;}
}

@media (max-width: 560px){
  :root{--header-h:76px;}
  .hero-title{font-size:clamp(1.7rem, 6.8vw, 2.2rem);}
  .carousel-slide{width:78vw;}
}