/* ══════════════════════════════════════════════════════════════
   OLIVEIRA INTERIORES — Conceito Mobiliar
   Landing page · Digital 33
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. TOKENS ─────────── */
:root{
  /* Paleta extraída da identidade da marca */
  --cream:      #F4F1EA;
  --cream-2:    #EAE5DA;
  --cream-3:    #DED7C8;
  --terra:      #B4552D;
  --terra-soft: #C97A55;
  --olive:      #3E4A3A;
  --olive-deep: #2A3028;
  --wood:       #A97B4F;
  --ink:        #2A2724;
  --ink-soft:   #6B6459;
  --line:       rgba(42,39,36,.14);
  --line-light: rgba(244,241,234,.18);

  /* Tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --step--1: clamp(.82rem, .79rem + .15vw, .92rem);
  --step-0:  clamp(1rem,   .95rem + .25vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw,  1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw,  3.6rem);
  --step-4:  clamp(2.7rem, 1.8rem + 4.2vw,  5.4rem);
  --step-5:  clamp(3.4rem, 1.9rem + 6.6vw,  7.6rem);

  /* Espaço */
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5rem, 11vw, 10rem);

  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ─────────── 2. RESET ─────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;           /* Lenis controla o scroll */
}
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
address{ font-style:normal; }

::selection{ background:var(--terra); color:var(--cream); }

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

/* ─────────── 3. TIPOGRAFIA ─────────── */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--ink);
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
.serif-i{ font-style:italic; font-weight:300; color:var(--terra); }

.h2{ font-size:var(--step-4); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--terra);
  flex:none;
}
.eyebrow.center{ justify-content:center; }

.lead{
  font-size:var(--step-1);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:56ch;
  font-weight:300;
}
.lead strong{ color:var(--ink); font-weight:600; }

.center{ text-align:center; }

/* ─────────── 4. LAYOUT ─────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell-narrow{ max-width:900px; }

.section{ padding-block:var(--section-y); position:relative; }

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split-rev .split-right{ order:-1; }
}

/* ─────────── 5. BOTÕES ─────────── */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--cream);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.7em;
  font-family:var(--font-body);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border-radius:100px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.btn svg{ width:1.15em;height:1.15em;fill:currentColor;flex:none; }
.btn > *{ position:relative; z-index:2; }
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:var(--terra);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(42,39,36,.55); }
.btn:active{ transform:translateY(0); }

.btn-solid{ --btn-bg:var(--ink); --btn-fg:var(--cream); }
.btn-light{ --btn-bg:var(--cream); --btn-fg:var(--ink); }
.btn-light::before{ background:var(--terra); }
.btn-light:hover{ color:var(--cream); }

.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--cream);
  border:1px solid rgba(244,241,234,.45);
  backdrop-filter:blur(6px);
}
.btn-ghost::before{ background:var(--cream); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--cream); }

.btn-outline-light{
  --btn-bg:transparent; --btn-fg:var(--cream);
  border:1px solid rgba(244,241,234,.4);
}
.btn-outline-light::before{ background:var(--cream); }
.btn-outline-light:hover{ color:var(--ink); border-color:var(--cream); }

.btn-sm{ padding:.7em 1.3em; font-size:.78rem; }
.btn-lg{ padding:1.1em 2.1em; font-size:var(--step-0); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:var(--step--1);
  letter-spacing:.02em;
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow svg{ width:1.1em;height:1.1em; }
.link-arrow:hover{ color:var(--terra); border-color:var(--terra); gap:.9em; }

/* ─────────── 6. GRÃO / PROGRESSO ─────────── */
.grain{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9999;
  background:transparent;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--wood),var(--terra));
  transform-origin:0 50%;
}

/* ─────────── 7. HEADER ─────────── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-block:1rem;
  transition:background .5s var(--ease), box-shadow .5s var(--ease),
             padding .5s var(--ease), color .5s var(--ease),
             transform .5s var(--ease);
  color:var(--cream);
}
.site-header.is-stuck{
  background:rgba(244,241,234,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
  padding-block:.6rem;
  color:var(--ink);
}
.header-inner{
  display:flex; align-items:center; gap:1.5rem;
}

.brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.brand img{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(244,241,234,.28);
  transition:box-shadow .5s var(--ease);
}
.is-stuck .brand img{ box-shadow:0 0 0 1px var(--line); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-family:var(--font-display);
  font-size:.98rem; font-weight:500; letter-spacing:-.01em;
}
.brand-text em{
  font-style:normal;
  font-size:.58rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  opacity:.72;
}
@media (max-width:560px){ .brand-text{ display:none; } }

.nav{
  display:none;
  margin-left:auto;
  gap:2rem;
}
@media (min-width:1024px){ .nav{ display:flex; } }
.nav a{
  position:relative;
  font-size:.86rem; font-weight:500;
  padding-block:.35rem;
  opacity:.86;
  transition:opacity .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); }

.header-cta{ display:none; margin-left:auto; }
@media (min-width:1024px){ .header-cta{ display:inline-flex; margin-left:0; } }

.nav-toggle{
  margin-left:auto;
  width:44px;height:44px;
  display:grid; place-content:center; gap:6px;
  border-radius:50%;
}
@media (min-width:1024px){ .nav-toggle{ display:none; } }
.nav-toggle span{
  display:block; width:22px;height:1.5px;
  background:currentColor;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:890;
  background:var(--ink);
  color:var(--cream);
  display:flex; flex-direction:column;
  justify-content:center; gap:.4rem;
  padding:6rem var(--gutter) 3rem;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav a{
  font-family:var(--font-display);
  font-size:var(--step-2);
  padding-block:.5rem;
  border-bottom:1px solid var(--line-light);
}
.mobile-nav .btn{
  margin-top:2rem;
  font-family:var(--font-body);
  font-size:var(--step-0);
  border-bottom:0;
  justify-content:center;
}

/* ─────────── 8. HERO ─────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero-img-wrap{ position:absolute; inset:0; overflow:hidden; }
/* A imagem é maior que o quadro e fica deslocada para fora nos dois eixos,
   assim o parallax nunca expõe borda. */
.hero-img{
  position:absolute; left:0; top:-20%;
  width:100%; height:140%;
  object-fit:cover;
  object-position:center 42%;
  will-change:transform;
}
.hero-img-b{ opacity:0; }

.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(24,22,20,.62) 0%, rgba(24,22,20,.28) 32%, rgba(24,22,20,.72) 78%, rgba(24,22,20,.94) 100%),
    linear-gradient(90deg, rgba(24,22,20,.55) 0%, rgba(24,22,20,0) 62%);
}

.hero-content{
  position:relative;
  padding-block:8rem clamp(3rem,8vh,5.5rem);
  width:100%;
}
.hero .eyebrow{ color:rgba(244,241,234,.8); }

.hero-title{
  font-size:var(--step-5);
  line-height:.98;
  letter-spacing:-.03em;
  margin-block:.4rem 1.6rem;
  max-width:16ch;
  color:var(--cream);
}
/* padding extra embaixo evita cortar descendentes (q, ç) no efeito de máscara */
.hero-title .line{
  display:block;
  overflow:hidden;
  padding-block:.04em .16em;
  margin-bottom:-.12em;
}
.hero-title .line-in{ display:inline-block; will-change:transform; }
.hero-title .serif-i{ color:var(--terra-soft); }

.hero-sub{
  font-size:var(--step-1);
  font-weight:300;
  line-height:1.55;
  color:rgba(244,241,234,.8);
  max-width:46ch;
}
.hero-sub strong{ color:var(--cream); font-weight:600; }

.hero-actions{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:2.2rem;
}

.hero-trust{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.5rem,5vw,3.5rem);
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(244,241,234,.16);
}
.hero-trust li{ display:flex; flex-direction:column; gap:.15rem; }
.hero-trust strong{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:500;
  color:var(--cream);
}
.hero-trust span{
  font-size:.76rem; letter-spacing:.06em;
  color:rgba(244,241,234,.6);
}

.hero-scroll{
  position:absolute; right:var(--gutter); bottom:clamp(2rem,6vh,3.5rem);
  display:none; flex-direction:column; align-items:center; gap:.9rem;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(244,241,234,.6);
  writing-mode:vertical-rl;
}
@media (min-width:1024px){ .hero-scroll{ display:flex; } }
.hero-scroll i{
  display:block; width:1px; height:64px;
  background:linear-gradient(180deg,rgba(244,241,234,.7),transparent);
  position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:""; position:absolute; inset:0;
  background:var(--terra-soft);
  animation:scrollCue 2.2s var(--ease-io) infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ─────────── 9. MARQUEE ─────────── */
.marquee-band{
  background:var(--ink);
  color:var(--cream);
  padding-block:1.5rem;
  overflow:hidden;
  border-block:1px solid rgba(244,241,234,.1);
}
.marquee{ overflow:hidden; }
.marquee-track{
  display:flex; align-items:center; gap:2.5rem;
  width:max-content;
  will-change:transform;
}
.marquee-track span{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:300;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:rgba(244,241,234,.92);
}
.marquee-track i{ color:var(--terra); font-size:.6rem; font-style:normal; }

/* ─────────── 10. MANIFESTO ─────────── */
.s-manifesto{ background:var(--cream); }
.pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--line);
}
@media (min-width:640px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{
  padding:2rem 0 2rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
@media (min-width:640px){
  .pillar{ padding:2.2rem 1.6rem 2.2rem 0; }
  .pillar:nth-child(odd){ padding-right:2rem; border-right:1px solid var(--line); }
  .pillar:nth-child(even){ padding-left:2rem; }
}
.pillar-num{
  display:block;
  font-family:var(--font-body);
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  color:var(--terra);
  margin-bottom:.9rem;
}
.pillar h3{
  font-size:var(--step-1);
  margin-bottom:.55rem;
}
.pillar p{
  color:var(--ink-soft);
  font-size:.94rem;
  line-height:1.6;
  max-width:34ch;
}

/* ─────────── 11. SCROLL HORIZONTAL ─────────── */
.s-hscroll{
  position:relative;
  background:var(--cream-2);
  overflow:hidden;
}
.hscroll-pin{
  padding-block:clamp(3.5rem,8vw,6rem);
  display:flex; flex-direction:column;
  gap:clamp(2rem,5vw,3.5rem);
  min-height:100svh;
  justify-content:center;
}
.hscroll-head .h2{ max-width:20ch; }

.hscroll-viewport{ overflow:hidden; padding-inline:var(--gutter); }
.hscroll-track{
  display:flex;
  gap:clamp(1rem,2.5vw,2rem);
  width:max-content;
  will-change:transform;
}

.hcard{
  width:min(78vw,440px);
  flex:none;
  background:var(--cream);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 22px 50px -30px rgba(42,39,36,.5);
  display:flex; flex-direction:column;
}
@media (min-width:1024px){ .hcard{ width:min(30vw,430px); } }
.hcard-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--cream-3);
}
.hcard-media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.hcard:hover .hcard-media img{ transform:scale(1.06); }
.hcard-body{
  padding:1.5rem 1.6rem 1.8rem;
  display:flex; flex-direction:column; gap:.5rem;
  flex:1;
}
.hcard-idx{
  font-size:.68rem; font-weight:700; letter-spacing:.2em;
  color:var(--terra);
}
.hcard-body h3{ font-size:var(--step-1); }
.hcard-body p{
  font-size:.9rem; line-height:1.6;
  color:var(--ink-soft);
}

/* Seção fixada só existe no desktop. Abaixo de 1024px, e também em qualquer
   aparelho de toque, a seção deixa de "segurar" o scroll: vira altura normal e
   o trilho rola no dedo. As condições espelham o matchMedia do script.js
   (bloco 8.4) — se divergirem, a rolagem trava sem mover nada. */
@media (max-width:1023px), (hover:none), (pointer:coarse){
  .hscroll-pin{ min-height:auto; }
  .hscroll-viewport{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--gutter);
  }
  .hscroll-viewport::-webkit-scrollbar{ display:none; }
  .hscroll-track{ transform:none !important; }
  .hcard{ scroll-snap-align:start; }
  .hscroll-bar{ display:none; }
}

.hscroll-bar{
  width:min(320px,42vw);
  height:2px;
  margin-inline:var(--gutter);
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
  align-self:flex-start;
}
.hscroll-bar span{
  display:block; height:100%; width:12%;
  background:var(--terra);
  border-radius:2px;
}

/* ─────────── 12. PROJETO 3D ─────────── */
.s-3d{ background:var(--olive-deep); color:var(--cream); }
.s-3d .h2{ color:var(--cream); }
.s-3d .lead{ color:rgba(244,241,234,.72); }
.s-3d .lead strong{ color:var(--cream); }
.s-3d .eyebrow{ color:rgba(244,241,234,.62); }
.s-3d .serif-i{ color:var(--terra-soft); }
.s-3d .btn-solid{ --btn-bg:var(--cream); --btn-fg:var(--ink); }

.s3d-media{ position:relative; }
.s3d-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75);
  will-change:transform;
}
@media (min-width:900px){ .s3d-frame{ aspect-ratio:4/5; } }
.s3d-frame img{ width:100%;height:100%;object-fit:cover; }

.s3d-badge{
  position:absolute; left:-.6rem; bottom:2rem;
  background:var(--terra);
  color:var(--cream);
  padding:1rem 1.4rem;
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column; gap:.1rem;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
}
.s3d-badge strong{
  font-family:var(--font-display);
  font-size:1.9rem; font-weight:500; line-height:1;
}
.s3d-badge span{
  font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.9;
}
/* Em telas estreitas o selo invade a margem: traz para dentro do quadro. */
@media (max-width:560px){
  .s3d-badge{ left:.7rem; bottom:1rem; padding:.75rem 1rem; }
  .s3d-badge strong{ font-size:1.45rem; }
  .s3d-badge span{ font-size:.58rem; }
}

.steps-mini{ margin-block:2rem; display:grid; gap:1rem; }
.steps-mini li{
  display:flex; gap:1rem; align-items:flex-start;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(244,241,234,.13);
}
.steps-mini span{
  flex:none;
  width:26px;height:26px;
  display:grid;place-content:center;
  border-radius:50%;
  border:1px solid rgba(244,241,234,.3);
  font-size:.68rem; font-weight:700;
  color:var(--terra-soft);
}
.steps-mini p{ font-size:.94rem; color:rgba(244,241,234,.78); }

/* ─────────── 13. MÓVEIS SOLTOS ─────────── */
.s-solto{ background:var(--cream); }
.solto-head{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  align-items:end;
}
@media (min-width:900px){
  .solto-head{ grid-template-columns:1.15fr 1fr; gap:3rem; }
}
.solto-lead{ max-width:44ch; }

.solto-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
}
@media (min-width:760px){
  .solto-grid{
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:auto auto;
  }
  .solto-a{ grid-column:1 / span 4; }
  .solto-b{ grid-column:5 / span 2; }
  .solto-c{ grid-column:1 / span 3; }
  .solto-cta{ grid-column:4 / span 3; }
}

.solto-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  min-height:280px;
  background:var(--cream-3);
  display:flex; align-items:flex-end;
}
.solto-card img{
  position:absolute; inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.solto-card:hover img{ transform:scale(1.05); }
.solto-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(24,22,20,0) 40%,rgba(24,22,20,.82) 100%);
}
.solto-card figcaption{
  position:relative; z-index:2;
  padding:1.6rem;
  color:var(--cream);
}
.solto-card h3{ font-size:var(--step-1); color:var(--cream); margin-bottom:.25rem; }
.solto-card figcaption span{
  font-size:.82rem; color:rgba(244,241,234,.72);
}
.solto-a{ min-height:clamp(300px,42vw,460px); }

.solto-cta{
  background:var(--olive);
  color:var(--cream);
  border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.6rem);
  display:flex; flex-direction:column;
  justify-content:center; gap:1.4rem;
  min-height:220px;
}
.solto-cta p{
  font-family:var(--font-display);
  font-size:var(--step-1);
  line-height:1.25;
  color:var(--cream);
}
.solto-cta .btn{ --btn-bg:var(--cream); --btn-fg:var(--olive); align-self:flex-start; }
.solto-cta .btn::before{ background:var(--terra); }
.solto-cta .btn:hover{ color:var(--cream); }

/* ─────────── 14. NÚMEROS ─────────── */
.s-numbers{
  background:var(--cream-2);
  padding-block:clamp(3rem,7vw,5rem);
  border-block:1px solid var(--line);
}
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem 1.5rem;
}
@media (min-width:860px){ .numbers-grid{ grid-template-columns:repeat(4,1fr); } }
.num{ display:flex; flex-direction:column; gap:.35rem; }
.num strong{
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:400;
  line-height:1;
  color:var(--terra);
  letter-spacing:-.03em;
}
/* Filho direto apenas: o contador é um <span> dentro do <strong> e não pode
   herdar o tamanho do rótulo. */
.num > span{
  font-size:.84rem;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:22ch;
}
.num strong > span{
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  letter-spacing:inherit;
}

/* ─────────── 15. GALERIA ─────────── */
.s-gallery{ background:var(--cream); }
.gallery-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem,1.6vw,1.1rem);
  padding-inline:var(--gutter);
  max-width:1560px;
  margin-inline:auto;
}
@media (min-width:900px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); }
}
.g-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--cream-3);
  aspect-ratio:1/1;
}
.g-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
}
.g-item:hover img{ transform:scale(1.07); }
@media (min-width:900px){
  .g-tall{ grid-row:span 2; aspect-ratio:1/2.08; }
  .g-wide{ grid-column:span 2; aspect-ratio:2/1.02; }
}
.gallery-foot{ margin-top:2.5rem; display:flex; justify-content:center; }

/* ─────────── 16. PROCESSO ─────────── */
.s-process{ background:var(--cream-2); }
.s-process .h2{ margin-bottom:clamp(2.5rem,5vw,4rem); }

.process{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  counter-reset:p;
}
@media (min-width:860px){ .process{ grid-template-columns:repeat(4,1fr); } }

.proc{
  padding:2rem 0;
  border-top:1px solid var(--line);
  position:relative;
}
@media (min-width:860px){
  .proc{ padding:2.4rem 1.6rem 0 0; border-top:1px solid var(--ink); }
  .proc + .proc{ padding-left:1.6rem; border-left:1px solid var(--line); }
}
.proc-num{
  display:block;
  font-size:.7rem; font-weight:700; letter-spacing:.2em;
  color:var(--terra);
  margin-bottom:1.2rem;
}
.proc h3{ font-size:var(--step-1); margin-bottom:.6rem; }
.proc p{ font-size:.92rem; line-height:1.62; color:var(--ink-soft); max-width:32ch; }

/* ─────────── 17. SOBRE ─────────── */
.s-about{ background:var(--cream); }
.about-tags{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:2rem;
}
.about-tags span{
  font-size:.76rem; font-weight:600;
  letter-spacing:.05em;
  padding:.5em 1em;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink-soft);
}

.about-media{ position:relative; }
.about-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px -34px rgba(42,39,36,.55);
  will-change:transform;
}
.about-frame img{ width:100%;height:100%;object-fit:cover; }

.about-card{
  position:absolute; right:-.5rem; bottom:-1.5rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.3rem 1.5rem;
  box-shadow:0 24px 48px -26px rgba(42,39,36,.45);
  max-width:250px;
}
.about-card h3{
  font-size:1rem; margin-bottom:.45rem;
  font-family:var(--font-body); font-weight:700;
  letter-spacing:.01em;
}
.about-card p{ font-size:.84rem; line-height:1.55; color:var(--ink-soft); }
.about-card a{
  display:inline-block; margin-top:.7rem;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--terra);
  border-bottom:1px solid currentColor;
}
/* Mesmo motivo do selo 3D: no mobile o cartão vai para dentro do quadro. */
@media (max-width:560px){
  .about-card{
    right:.7rem; bottom:.7rem;
    padding:1rem 1.1rem;
    max-width:min(230px,72%);
  }
}

/* ─────────── 18. DEPOIMENTOS ─────────── */
.s-proof{ background:var(--cream-2); }
.s-proof .h2{ margin-bottom:clamp(2.5rem,5vw,4rem); }

.proof-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
}
@media (min-width:860px){ .proof-grid{ grid-template-columns:repeat(3,1fr); } }

.proof-card{
  background:var(--cream);
  border-radius:var(--radius-lg);
  padding:2rem 1.8rem;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:1.6rem;
  min-height:230px;
  border:1px dashed var(--line);
}
.proof-quote{
  font-family:var(--font-display);
  font-size:var(--step-1);
  line-height:1.4;
  color:var(--ink-soft);
}
.proof-card footer{ display:flex; flex-direction:column; gap:.15rem; }
.proof-card cite{ font-style:normal; font-weight:700; font-size:.92rem; }
.proof-card footer span{ font-size:.78rem; color:var(--ink-soft); }

.proof-note{
  margin-top:2rem;
  text-align:center;
  font-size:.92rem;
  color:var(--ink-soft);
}
.proof-note a{ color:var(--terra); border-bottom:1px solid currentColor; }

/* ─────────── 19. FAQ ─────────── */
.s-faq{ background:var(--cream); }
.s-faq .h2{ margin-bottom:clamp(2.5rem,5vw,3.5rem); }

.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:400;
  letter-spacing:-.015em;
  transition:color .35s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--terra); }
.faq-item summary i{
  flex:none;
  position:relative;
  width:20px;height:20px;
}
.faq-item summary i::before,
.faq-item summary i::after{
  content:""; position:absolute; top:50%; left:0;
  width:100%; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease);
}
.faq-item summary i::after{ transform:rotate(90deg); }
.faq-item[open] summary i::after{ transform:rotate(0deg); }
.faq-body{
  overflow:hidden;
  padding-bottom:1.6rem;
  max-width:70ch;
}
.faq-body p{ color:var(--ink-soft); font-size:.96rem; line-height:1.68; }
.faq-body strong{ color:var(--ink); }

/* ─────────── 20. CTA FINAL ─────────── */
.s-cta{
  position:relative;
  overflow:hidden;
  color:var(--cream);
  background:var(--ink);
  isolation:isolate;
}
.cta-media{ position:absolute; inset:0; z-index:-1; }
.cta-media img{ width:100%;height:100%;object-fit:cover; }
.cta-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(24,22,20,.86),rgba(24,22,20,.93));
}
.cta-inner{
  padding-block:clamp(5rem,12vw,9rem);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cta-title{
  font-size:var(--step-4);
  color:var(--cream);
  margin-bottom:1.4rem;
}
.cta-title .serif-i{ color:var(--terra-soft); }
.cta-sub{
  font-size:var(--step-1);
  font-weight:300;
  line-height:1.55;
  color:rgba(244,241,234,.74);
  max-width:48ch;
  margin-bottom:2.4rem;
}
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

/* ─────────── 21. FOOTER ─────────── */
.site-footer{
  background:var(--ink);
  color:rgba(244,241,234,.72);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;
  border-top:1px solid rgba(244,241,234,.1);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(244,241,234,.1);
}
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; } }

.f-brand img{ border-radius:50%; margin-bottom:1rem; }
.f-brand p{ color:var(--cream); line-height:1.5; }
.f-brand em{ font-style:normal; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; opacity:.6; }
.f-desc{
  margin-top:1rem;
  font-size:.86rem;
  line-height:1.6;
  color:rgba(244,241,234,.6) !important;
  max-width:36ch;
}

.f-col h3{
  font-family:var(--font-body);
  font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,241,234,.5);
  margin-bottom:1rem;
}
.f-col ul{ display:grid; gap:.6rem; }
.f-col li{ font-size:.9rem; line-height:1.55; }
.f-col a{ transition:color .3s var(--ease); }
.f-col a:hover{ color:var(--terra-soft); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:space-between;
  padding-top:1.8rem;
  font-size:.78rem;
  color:rgba(244,241,234,.45);
}
/* Crédito da agência — discreto, mas presente. */
.f-credit a{
  color:inherit;
  border-bottom:1px solid rgba(244,241,234,.28);
  padding-bottom:1px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.f-credit a:hover{
  color:var(--terra-soft);
  border-color:var(--terra-soft);
}

/* ─────────── 22. WHATSAPP FLUTUANTE ─────────── */
.wa-float{
  position:fixed;
  right:clamp(1rem,3vw,1.8rem);
  bottom:clamp(1rem,3vw,1.8rem);
  z-index:800;
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px;          /* círculo perfeito: o rótulo só abre no hover do desktop */
  gap:0;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  padding:0;
  box-shadow:0 16px 34px -12px rgba(37,211,102,.7), 0 4px 14px rgba(0,0,0,.22);
  transition:transform .5s var(--ease), border-radius .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.wa-float svg{ width:26px;height:26px;fill:currentColor;flex:none; }
.wa-float-label{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:.86rem; font-weight:700;
  transition:max-width .55s var(--ease), margin .55s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); }
@media (min-width:1024px){
  .wa-float:hover{
    width:auto; gap:.6rem;          /* vira pílula e revela o rótulo */
    padding-inline:1.1rem .8rem;
    border-radius:100px;
  }
  .wa-float:hover .wa-float-label{ max-width:190px; margin-left:.2rem; }
}
.wa-float::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  border:2px solid rgba(37,211,102,.55);
  animation:waPulse 2.6s var(--ease-io) infinite;
  pointer-events:none;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.9; }
  70%,100%{ transform:scale(1.28); opacity:0; }
}

/* ─────────── 23. ANIMAÇÕES (estado inicial) ─────────── */
/* Gated por .js para não esconder conteúdo quando o JS falha. */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
html.js [data-hero]{
  opacity:0;
  transform:translateY(26px);
}
html.js .hero-title .line-in{ transform:translateY(105%); }

/* ─────────── 24. ACESSIBILIDADE / MOVIMENTO REDUZIDO ─────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js [data-reveal],
  html.js [data-hero]{
    opacity:1 !important;
    transform:none !important;
  }
  html.js .hero-title .line-in{ transform:none !important; }
  .hero-img{ height:100%; }
  .hero-img-b{ display:none; }
}

/* ─────────── 25. PRINT ─────────── */
@media print{
  .site-header,.wa-float,.grain,.scroll-progress,.mobile-nav{ display:none !important; }
  .hero{ min-height:auto; }
}