/* =========================================================
   Dra. Kennya Barbosa — Harmonização Orofacial
   Direção: editorial de luxo. Preto, marfim e o dourado do logo.
   Motivo visual: as linhas de análise facial (terços do rosto),
   finas e douradas, que atravessam a página.
   ========================================================= */

@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"),
      url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"),
      url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  font-weight:400 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* paleta da marca (inalterada) */
  --noir:#060505;
  --carvao:#0f0d0b;
  --carvao-2:#17140f;
  --marfim:#f4efe6;
  --cinza:#a59c8f;
  --ouro:#c89a62;
  --ouro-claro:#f2d8a6;
  --ouro-escuro:#7a5230;
  --hair:rgba(200,154,98,.26);
  --ouro-grad:linear-gradient(100deg,#7a5230 0%,#b98652 22%,#f2d8a6 45%,#c08d58 62%,#8a5c34 82%,#d6ad74 100%);

  --serif:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  --sans:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px, 4.2vw, 72px);
  --gap:clamp(16px, 2vw, 28px);
  --top-h:84px;
  --ease:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0; background:var(--noir); color:var(--marfim);
  font-family:var(--sans); font-weight:300; font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:400; font-optical-sizing:auto; text-wrap:balance}
figure,blockquote,dl,dd,ol,ul{margin:0; padding:0}
ul,ol{list-style:none}
address{font-style:normal}
::selection{background:var(--ouro); color:var(--noir)}
:focus-visible{outline:1px solid var(--ouro-claro); outline-offset:5px}

.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; left:16px; top:-80px; z-index:200; background:var(--marfim); color:var(--noir); padding:12px 18px; font-size:.95rem}
.skip:focus{top:16px}

/* ---------- tipografia de apoio ---------- */
.kicker{font-family:var(--sans); font-weight:400; font-size:.875rem; letter-spacing:.06em; color:var(--ouro)}
.h2{font-size:clamp(2.5rem, 5.4vw, 5.25rem); line-height:1.02; letter-spacing:-.015em}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.w__in{display:inline-block; will-change:transform}

/* ---------- links e botões ---------- */
.link-line{
  position:relative; display:inline-block; font-weight:400; font-size:.95rem; letter-spacing:.02em; color:var(--marfim);
  padding-bottom:4px;
  background:linear-gradient(var(--ouro),var(--ouro)) 0 100% / 100% 1px no-repeat;
  transition:color .4s ease;
}
.link-line:hover{color:var(--ouro-claro); animation:line-swap .7s var(--ease)}
@keyframes line-swap{
  0%{background-size:100% 1px; background-position:100% 100%}
  45%{background-size:0% 1px; background-position:100% 100%}
  46%{background-size:0% 1px; background-position:0 100%}
  100%{background-size:100% 1px; background-position:0 100%}
}

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:58px; padding:0 34px;
  font-family:var(--sans); font-weight:400; font-size:.98rem; letter-spacing:.03em;
  will-change:transform;
}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%); transition:transform .65s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--gold{background:var(--ouro-grad); background-size:200% 100%; color:var(--noir)}
.btn--gold::before{background:var(--marfim)}
.btn--line{border:1px solid rgba(200,154,98,.55); color:var(--marfim); transition:color .5s ease, border-color .5s ease}
.btn--line::before{background:var(--ouro-grad)}
.btn--line:hover{color:var(--noir); border-color:transparent}
.btn--lg{min-height:68px; padding:0 44px; font-size:1.05rem}
/* troca de texto no hover (montada pelo JS) */
.btn__t{display:inline-grid; overflow:hidden; line-height:1.2}
.btn__t > span{grid-area:1/1; transition:transform .65s var(--ease)}
.btn__t > span + span{transform:translateY(110%)}
.btn:hover .btn__t > span:first-child{transform:translateY(-110%)}
.btn:hover .btn__t > span + span{transform:translateY(0)}

/* ---------- abertura ---------- */
.loader{position:fixed; inset:0; z-index:150; background:var(--noir); display:grid; place-content:center; justify-items:center; gap:22px}
.loader__mark{width:58px; clip-path:inset(100% 0 0 0)}
.loader__mark img{width:100%; height:auto}
.loader__line{display:block; width:140px; height:1px; background:var(--ouro-grad); transform:scaleX(0)}
.no-js .loader, .is-return .loader{display:none}

/* ---------- cabeçalho ---------- */
.top{
  position:fixed; z-index:60; inset:0 0 auto 0; height:var(--top-h);
  padding:0 var(--pad); padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition:background-color .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.top.is-solid{background:rgba(6,5,5,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:rgba(200,154,98,.14)}
.top__brand{display:flex; align-items:center; gap:14px; min-width:0}
.top__brand img{height:36px; width:auto}
.top__brand span{font-family:var(--serif); font-size:1.06rem; letter-spacing:.02em; white-space:nowrap}
.top__actions{display:flex; align-items:center; gap:clamp(18px, 3vw, 44px)}
.menu-btn{display:flex; align-items:center; gap:14px; font-size:.95rem; font-weight:400; letter-spacing:.03em; padding:10px 0}
.menu-btn__label{display:inline-block; min-width:4.2em; text-align:right}
.menu-btn__icon{position:relative; width:30px; height:12px}
.menu-btn__icon i{position:absolute; left:0; right:0; height:1px; background:var(--marfim); transition:transform .6s var(--ease), top .6s var(--ease), width .6s var(--ease)}
.menu-btn__icon i:first-child{top:2px}
.menu-btn__icon i:last-child{top:9px; left:auto; width:70%}
.menu-btn:hover .menu-btn__icon i:last-child{width:100%}
.is-menu-open .menu-btn__icon i:first-child{top:5.5px; transform:rotate(18deg)}
.is-menu-open .menu-btn__icon i:last-child{top:5.5px; width:100%; transform:rotate(-18deg)}

/* ---------- menu ---------- */
.menu{position:fixed; inset:0; z-index:55; background:var(--carvao); clip-path:inset(0 0 100% 0); overflow:auto}
.menu[hidden]{display:block; visibility:hidden}
.menu__inner{min-height:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding:calc(var(--top-h) + 6vh) var(--pad) 6vh}
.menu__list{grid-column:1 / span 7; display:flex; flex-direction:column; justify-content:center; gap:clamp(6px, 1.4vh, 16px); counter-reset:m}
.menu__list a{display:flex; align-items:baseline; gap:24px; padding:4px 0}
.menu__idx{width:8.5em; flex:none; font-size:.85rem; letter-spacing:.05em; color:var(--ouro); font-weight:400}
.menu__word{display:inline-block; font-family:var(--serif); font-size:clamp(2.6rem, 7vh, 5.4rem); line-height:1.08; transition:transform .6s var(--ease), color .4s ease}
.menu__list a:hover .menu__word, .menu__list a:focus-visible .menu__word{transform:translateX(18px); color:var(--ouro-claro); font-style:italic}
.menu__aside{grid-column:9 / span 4; display:flex; flex-direction:column; justify-content:center; gap:28px}
.menu__pic{aspect-ratio:4/5; overflow:hidden}
.menu__pic img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.menu__info{display:grid; gap:10px; color:var(--cinza); font-size:.95rem}

/* ---------- 1. hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap);
  padding:0 var(--pad);
}
.hero__media{grid-column:7 / span 5; grid-row:1; position:relative; margin-top:calc(var(--top-h) + 2vh); height:calc(100svh - var(--top-h) - 2vh); min-height:560px}
.hero__mask{position:absolute; inset:0; overflow:hidden; background:#3a3937}
.hero__mask picture{display:contents}
.hero__img, .guides{position:absolute; left:0; top:-6%; width:100%; height:112%}
.hero__img{object-fit:cover; object-position:50% 50%}
.hero__cred{position:absolute; left:calc(100% + var(--gap)); bottom:0; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.8rem; line-height:1.6; letter-spacing:.04em; color:var(--cinza); white-space:nowrap}

.guides{overflow:visible; pointer-events:none}
.guides line{stroke:var(--ouro-claro); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.7}
.guides__axis{stroke-dasharray:3 5}
.guides__dots circle{fill:var(--ouro-claro)}
.guides__labels text{font-family:var(--sans); font-size:17px; font-weight:400; letter-spacing:.04em; fill:var(--marfim); opacity:.82}

.hero__text{grid-column:1 / span 8; grid-row:1; align-self:end; position:relative; z-index:2; padding-bottom:clamp(56px, 10vh, 120px); display:flex; flex-direction:column; align-items:flex-start}
.hero__place{font-size:.92rem; font-weight:400; letter-spacing:.05em; color:var(--ouro); margin-bottom:clamp(18px, 3vh, 30px)}
.hero__title{font-size:clamp(4rem, 9.4vw, 10.5rem); line-height:.9; letter-spacing:-.025em}
.line{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em}
.line__in{display:inline-block; will-change:transform}
.line--ital{font-style:italic; padding-left:1.35em; color:var(--ouro-claro)}
.hero__lead{max-width:34ch; margin-top:clamp(26px, 4.5vh, 46px); color:var(--cinza); font-size:1.08rem}
.hero__ctas{display:flex; align-items:center; flex-wrap:wrap; gap:18px 34px; margin-top:clamp(24px, 4vh, 40px)}

/* estados iniciais da entrada (só com JS e com movimento liberado) */
@media (prefers-reduced-motion: no-preference){
  .js .hero__mask{clip-path:inset(100% 0 0 0)}
  .js .hero__title .line__in{transform:translateY(105%)}
  .js .guides__lines line{stroke-dasharray:1600; stroke-dashoffset:1600}
  .js [data-hero-fade], .js .hero__cred, .js .top{opacity:0}
  .js .guides__labels, .js .guides__dots, .js .guides__axis{opacity:0}
}

/* ---------- 2. manifesto ---------- */
.manifesto{padding:clamp(120px, 24vh, 260px) var(--pad)}
.manifesto__wrap{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:36px}
.manifesto__mark{grid-column:2 / span 1; width:30px; height:auto; opacity:.9}
.manifesto__quote{grid-column:2 / span 10}
.manifesto__quote p{font-family:var(--serif); font-size:clamp(2rem, 4.7vw, 4.6rem); line-height:1.16; letter-spacing:-.01em; max-width:none; text-wrap:pretty}
.manifesto__quote .mw{opacity:1}
.manifesto__sign{grid-column:2 / span 10; font-size:.95rem; letter-spacing:.04em; color:var(--ouro)}

/* ---------- 3. sobre ---------- */
.about{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); padding:clamp(40px, 6vh, 80px) var(--pad) clamp(120px, 20vh, 220px)}
.about__pic{grid-column:1 / span 5; position:relative; aspect-ratio:3/4; align-self:start}
.about__mask{position:absolute; inset:0; overflow:hidden; background:#3a3937}
.about__mask picture{display:contents}
.about__mask img{position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; object-position:50% 25%}
.about__text{grid-column:7 / span 5; margin-top:clamp(60px, 22vh, 260px); display:flex; flex-direction:column; gap:28px}
.about__text .h2{font-size:clamp(2.4rem, 4.4vw, 4.4rem)}
.about__body{display:grid; gap:18px; color:var(--cinza); max-width:46ch}
.about__sign{font-family:var(--serif); font-style:italic; font-size:1.7rem; line-height:1.2; color:var(--marfim)}
.about__sign small{display:block; margin-top:8px; font-family:var(--sans); font-style:normal; font-size:.85rem; letter-spacing:.04em; color:var(--ouro)}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:clamp(20px, 5vh, 56px)}
.facts__item{padding-top:18px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:6px; min-width:0}
.facts dt{font-family:var(--serif); font-size:clamp(1.9rem, 2.8vw, 2.8rem); line-height:1; white-space:nowrap}
.facts dd{font-size:.88rem; line-height:1.5; color:var(--cinza)}

/* ---------- 4. procedimentos ---------- */
.proc{background:var(--carvao); padding:clamp(110px, 18vh, 200px) var(--pad); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap)}
.proc__head{grid-column:7 / span 6; display:flex; flex-direction:column; gap:22px; margin-bottom:clamp(48px, 9vh, 100px)}
.proc__intro{color:var(--cinza); max-width:40ch}
.proc__grid{display:contents}
.proc__head{grid-row:1}
.face{grid-column:1 / span 5; grid-row:1 / span 3; align-self:start; position:sticky; top:calc(var(--top-h) + 4vh)}
.face__svg{width:100%; height:auto; aspect-ratio:4/5; background:#3a3937}
.face__svg line, .face__svg path, .face__svg circle{vector-effect:non-scaling-stroke; transition:opacity .7s ease, stroke-dashoffset 1.1s var(--ease)}
.face__lines line{stroke:var(--ouro-claro); stroke-width:1; opacity:.22}
.face__axis{stroke:var(--ouro-claro); stroke-width:1; stroke-dasharray:3 5; opacity:.22}
.face__band{fill:var(--ouro); opacity:0; transition:opacity .7s ease}
.face__marks{opacity:0; transition:opacity .7s ease}
.face__marks circle{fill:var(--ouro-claro)}
.face__marks .ring{fill:none; stroke:var(--ouro-claro); stroke-width:1}
.face__jaw{fill:none; stroke:var(--ouro-claro); stroke-width:1.2; stroke-dasharray:420; stroke-dashoffset:420; opacity:0}
.face[data-active="perfil"] [data-zone~="perfil"],
.face[data-active="full"] [data-zone~="full"],
.face[data-active="medio"] [data-zone~="medio"],
.face[data-active="inferior"] [data-zone~="inferior"]{opacity:.95}
.face[data-active="medio"] .face__band[data-zone="medio"],
.face[data-active="inferior"] .face__band[data-zone="inferior"]{opacity:.16}
.face[data-active="inferior"] .face__jaw{stroke-dashoffset:0}
.face__cap{margin-top:16px; font-size:.88rem; letter-spacing:.05em; color:var(--ouro); min-height:1.7em}

.treat{grid-column:7 / span 6; grid-row:2; border-bottom:1px solid var(--hair)}
.treat__item{position:relative; border-top:1px solid var(--hair)}
.treat__item::after{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--ouro-grad); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease)}
.treat__item.is-active::after{transform:scaleX(1)}
.treat__btn{width:100%; display:grid; grid-template-columns:1fr auto; grid-template-areas:"area plus" "name plus"; align-items:center; column-gap:24px; row-gap:6px; padding:clamp(26px, 4vh, 40px) 0; text-align:left}
.treat__area{grid-area:area; font-size:.85rem; font-weight:400; letter-spacing:.05em; color:var(--ouro)}
.treat__name{grid-area:name; font-family:var(--serif); font-size:clamp(2rem, 3.5vw, 3.4rem); line-height:1.05; color:rgba(244,239,230,.42); transition:color .5s ease, transform .7s var(--ease)}
.treat__btn:hover .treat__name, .treat__btn:focus-visible .treat__name{transform:translateX(14px); color:rgba(244,239,230,.8)}
.treat__item.is-active .treat__name{color:var(--marfim); transform:none}
.treat__plus{grid-area:plus; position:relative; width:18px; height:18px}
.treat__plus::before, .treat__plus::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ouro); transition:transform .6s var(--ease)}
.treat__plus::after{transform:rotate(90deg)}
.treat__item.is-active .treat__plus::after{transform:rotate(0deg)}
.treat__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s var(--ease)}
.treat__panel > div{overflow:hidden}
.treat__panel p{max-width:46ch; color:var(--cinza); padding-bottom:clamp(26px, 4vh, 40px); opacity:0; transform:translateY(10px); transition:opacity .5s ease .1s, transform .7s var(--ease) .1s}
.treat__item.is-active .treat__panel{grid-template-rows:1fr}
.treat__item.is-active .treat__panel p{opacity:1; transform:none}
.proc__cta{grid-column:7 / span 6; grid-row:3; margin-top:clamp(40px, 7vh, 72px)}

/* ---------- 5. como funciona ---------- */
.method{position:relative}
.method__pin{position:relative; min-height:100svh; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center; padding:clamp(100px, 14vh, 160px) var(--pad)}
.method__side{grid-column:1 / span 5; display:flex; flex-direction:column; gap:22px}
.method__side .h2{font-size:clamp(2.4rem, 4.2vw, 4.2rem)}
.method__count{display:flex; font-family:var(--serif); font-size:clamp(8rem, 17vw, 17rem); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--ouro); margin-top:2vh; user-select:none}
.method__roll{display:inline-flex; flex-direction:column; height:1em; overflow:hidden}
.method__roll span{display:block; height:1em; transition:transform .9s var(--ease)}
.steps{grid-column:7 / span 6; position:relative; display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:4.5rem 1fr; gap:var(--gap); padding:clamp(22px, 3.6vh, 36px) 0; border-top:1px solid var(--hair); transition:opacity .6s ease}
.step:last-child{border-bottom:1px solid var(--hair)}
.step__n{font-size:.9rem; letter-spacing:.06em; color:var(--ouro); padding-top:.7rem}
.step h3{font-size:clamp(1.8rem, 2.6vw, 2.5rem); line-height:1.1; margin-bottom:10px}
.step p{color:var(--cinza); max-width:42ch}
.method__rail{display:none}

/* ---------- 6. agendamento ---------- */
.book{padding:clamp(110px, 18vh, 200px) var(--pad) clamp(90px, 14vh, 160px); border-top:1px solid rgba(200,154,98,.12)}
.book__title{font-size:clamp(3.2rem, 8vw, 9rem); line-height:.96; letter-spacing:-.025em; max-width:12.5ch}
.book__line{display:block; height:1px; background:var(--ouro-grad); margin:clamp(40px, 7vh, 80px) 0; transform-origin:left}
.book__row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.book__row p{max-width:44ch; color:var(--cinza)}

/* ---------- 7. contato ---------- */
.contact{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--gap); row-gap:56px; padding:0 var(--pad) clamp(110px, 16vh, 180px)}
.contact__item{display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid var(--hair); min-width:0}
.contact__big{font-family:var(--serif); font-size:clamp(1.55rem, 2.2vw, 2.1rem); line-height:1.25; overflow-wrap:anywhere}
.contact__sub{color:var(--cinza); font-size:.95rem}
.contact__links{display:flex; gap:24px; flex-wrap:wrap; margin-top:6px}

/* ---------- rodapé ---------- */
.foot{border-top:1px solid rgba(200,154,98,.14); background:var(--carvao); padding:clamp(70px, 12vh, 130px) var(--pad) calc(36px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:clamp(48px, 8vh, 90px)}
.foot__logo{width:min(560px, 86%); height:auto}
.foot__row{padding-right:76px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:.85rem; color:var(--cinza)}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; z-index:50; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--ouro-grad); background-size:200% 100%; color:var(--noir);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(242,216,166,.4);
  transition:transform .6s var(--ease), opacity .4s ease, background-position .6s ease;
}
.wa-float svg{width:28px; height:28px}
.wa-float:hover{background-position:100% 50%}
.js .wa-float{transform:scale(0); opacity:0}
.js .wa-float.is-on{transform:scale(1); opacity:1}
.is-menu-open .wa-float{transform:scale(0); opacity:0}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .hero__text{grid-column:1 / span 9}
  .hero__media{grid-column:7 / span 6}
  .hero__cred{display:none}
}

@media (max-width:900px){
  :root{--top-h:70px}
  .top__brand span{display:none}
  .top__book{display:none}

  .menu__inner{grid-template-columns:1fr; row-gap:48px; align-content:start}
  .menu__list, .menu__aside{grid-column:1 / -1}
  .menu__list{gap:14px}
  .menu__list a{padding:6px 0}
  .menu__word{line-height:1.15}
  .menu__list a{flex-direction:column; gap:0}
  .menu__word{font-size:clamp(2.1rem, 9.6vw, 3.6rem)}
  .menu__idx{width:auto}
  .menu__aside{flex-direction:row; align-items:flex-end}
  .menu__pic{width:38%; flex:none}

  .hero{grid-template-columns:1fr; min-height:0; padding-bottom:64px}
  .hero__media{grid-column:1; grid-row:1; height:auto; min-height:0; aspect-ratio:4/5; margin-top:calc(var(--top-h) + 8px)}
  .hero__text{grid-column:1; grid-row:2; padding-bottom:0; margin-top:28px; font-size:clamp(3rem, 13.2vw, 5.6rem)}
  .hero__title{font-size:1em}
  .hero__place{order:10; margin:28px 0 0}
  .hero__lead, .hero__ctas{font-size:1rem}
  .hero__place{font-size:.88rem}
  .line--ital{padding-left:.9em}
  .guides__labels text{font-size:24px}

  .manifesto__wrap{grid-template-columns:1fr}
  .manifesto__mark, .manifesto__quote, .manifesto__sign{grid-column:1}

  .about{grid-template-columns:1fr; row-gap:0}
  .about__pic{grid-column:1; width:86%}
  .about__text{grid-column:1; margin-top:40px; padding-left:14%; position:relative; z-index:1}
  .facts{grid-template-columns:1fr 1fr 1fr}

  .proc{grid-template-columns:1fr}
  .proc__head{grid-column:1}
  .proc__head, .treat, .proc__cta, .face{grid-row:auto}
  .face{grid-column:1; position:sticky; top:var(--top-h); margin:0 calc(-1 * var(--pad)); z-index:2; background:var(--carvao)}
  .face__svg{aspect-ratio:16/11; max-height:42svh; width:100%}
  .face__cap{padding:10px var(--pad) 12px; margin:0; border-bottom:1px solid var(--hair)}
  .treat{grid-column:1}
  .proc__cta{grid-column:1}

  .method__pin{grid-template-columns:1fr; min-height:0; row-gap:48px}
  .method__side, .steps{grid-column:1}
  .method__count{display:none}

  .contact{grid-template-columns:1fr}
}

@media (max-width:560px){
  .about__pic{width:100%}
  .about__text{margin-top:36px; padding-left:0}
  .facts{grid-template-columns:1fr; gap:0}
  .facts__item{flex-direction:row; align-items:baseline; gap:16px; padding:16px 0}
  .facts dt{min-width:5.2ch; font-size:2rem}
  .step{grid-template-columns:2.6rem 1fr}
  .btn{padding:0 26px}
  .btn--lg{width:100%}
  .book__row .btn{width:100%}
  .hero__ctas .btn{width:100%}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .loader{display:none}
}