@charset "UTF-8";
/* ============================================================================
   L·A ESTÉTICA AVANÇADA
   Folha única · sem dependências · sem build
   ----------------------------------------------------------------------------
   DIREÇÃO: editorial-spa em mocha e creme. Didone de alto contraste para o
   discurso, geométrica humanista para a informação.

   LEGIBILIDADE (público 40+) — regras que NÃO devem ser afrouxadas:
     · corpo de texto a 18px (1.125rem), entrelinha 1.7
     · nada de texto abaixo de 14px
     · Playfair (Didone, hastes finas) só em títulos ≥ 1.4rem — nunca em
       corpo de texto nem etiquetas
     · todo o texto passa WCAG AA: corpo 15.4:1, secundário 7.3:1,
       títulos mocha 5.4:1, etiquetas 6.3:1
     · alvos de toque com pelo menos 48px
   ========================================================================== */

/* ─── 1. TIPOS ─────────────────────────────────────────────────────────── */
/* Subsets ao alfabeto português (ver tools/). 3 ficheiros, 50 KB no total. */
@font-face{font-family:'Playfair';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-display-latin.woff2') format('woff2')}
@font-face{font-family:'Playfair';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-display-italic-latin.woff2') format('woff2')}
@font-face{font-family:'DMSans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/dm-sans-latin.woff2') format('woff2')}

/* ─── 2. TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* superfícies */
  --cream:#FAF7F2;
  --paper:#FFFFFF;
  --shell:#F7F3EC;
  --sand:#E9E0D4;
  --sand-2:#DED3C4;
  /* marca */
  --blush:#D6B7A6;
  --taupe:#A89282;
  --mocha:#8A7060;      /* decorativo e texto grande apenas */
  --mocha-d:#6E5748;    /* painéis com texto branco — AA ✓ 6.6:1 */
  --mocha-x:#4A3A2F;
  --espresso:#30261F;
  /* tinta */
  --head:#7A6152;       /* títulos sobre creme — 5.4:1 */
  --ink:#241E1A;        /* corpo — 15.4:1 */
  --ink-2:#5C5049;      /* secundário — 7.3:1 */
  --label:#6E5748;      /* etiquetas — 6.3:1 */
  --hair:rgba(74,58,47,.16);
  --hair-2:rgba(74,58,47,.09);
  --on-dark:#FFFCF7;
  --on-dark-2:#EDE3D9;  /* secundário sobre mocha — 5.3:1 */
  --hair-light:rgba(255,252,247,.24);

  /* tipografia */
  --f-disp:'Playfair','Iowan Old Style',Georgia,serif;
  --f-body:'DMSans','Avenir Next','Segoe UI',system-ui,sans-serif;
  --t-h1:clamp(3rem,7.6vw,6.6rem);
  --t-h2:clamp(2.25rem,4.9vw,4.1rem);
  --t-h2-xl:clamp(2.6rem,6.2vw,5.2rem);
  --t-h3:clamp(1.3rem,1.9vw,1.6rem);
  --t-mani:clamp(1.7rem,3.5vw,3.1rem);
  --t-lead:clamp(1.15rem,1.4vw,1.32rem);
  --t-body:1.125rem;          /* 18px — mínimo para 40+ */
  --t-sm:1rem;                /* 16px */
  --t-label:.875rem;          /* 14px — piso absoluto */

  /* espaço */
  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --gut:clamp(1.5rem,3vw,3rem);
  --sec-y:clamp(4.5rem,10vh,9rem);
  --max:80rem;
  --r:6px;
  --r-lg:clamp(14px,2vw,26px);

  /* movimento */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --e-back:cubic-bezier(.34,1.5,.64,1);
}

/* ─── 3. RESET ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  background:var(--cream);color:var(--ink);
  font:400 var(--t-body)/1.7 var(--f-body);
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto;background:var(--sand)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
address{font-style:normal}
::selection{background:var(--mocha-x);color:var(--on-dark)}
:focus-visible{outline:2.5px solid var(--mocha-x);outline-offset:3px;border-radius:var(--r)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:1rem;top:-5rem;z-index:200;background:var(--mocha-x);color:var(--on-dark);
  padding:.9rem 1.3rem;border-radius:100px;transition:top .3s;font-size:var(--t-sm)}
.skip:focus{top:1rem}
/* Só para leitores de ecrã: dá o texto completo do selo do Google a quem
   não vê as estrelas desenhadas. */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Trava o scroll do fundo enquanto o vídeo está aberto por cima. */
html.is-locked{overflow:hidden}

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

/* Cartão da página: margens creme e cantos arredondados, como na referência */
.shell{background:var(--cream)}
@media (min-width:1120px){
  body{padding:14px}
  .shell{border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 1px 0 var(--hair-2), 0 40px 90px -60px rgba(74,58,47,.4)}
}

/* ─── 4. TEXTURA GLOBAL ────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)}  50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)}   83%{transform:translate(-2%,-1%)}
}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:160;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--mocha),var(--blush),var(--taupe))}
@supports (animation-timeline:scroll()){
  .progress i{animation:grow 1s linear;animation-timeline:scroll(root block)}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ─── 5. PRIMITIVAS DE TEXTO ───────────────────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);margin-bottom:1.5rem;
}
.eyebrow--mid{justify-content:center}
.eyebrow--light{color:var(--on-dark-2)}

.h2{
  font-family:var(--f-disp);font-weight:500;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.015em;color:var(--head);text-wrap:balance;
}
.h2--xl{font-size:var(--t-h2-xl)}
.h2 em{font-style:italic;color:var(--mocha)}
.ft .h2{color:var(--on-dark)}
.ft .h2 em{color:var(--blush)}

.intro{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);max-width:44ch;text-wrap:pretty}
.intro--mid{margin-inline:auto;text-align:center}
.prose p{margin-bottom:1.1em;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose--lg p{font-size:var(--t-lead);line-height:1.68}
.prose em{font-family:var(--f-disp);font-style:italic;font-size:1.1em;color:var(--head)}
.prose strong{font-weight:600;color:var(--ink)}
.prose__pull{
  font-family:var(--f-disp);font-size:clamp(1.3rem,2.2vw,1.8rem) !important;
  line-height:1.3;color:var(--head) !important;
  border-left:2px solid var(--blush);padding-left:1.2rem;margin-top:1.8rem;
}
.note{margin-top:2.6rem;font-size:var(--t-sm);color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}

.hdr{margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.hdr--split{display:grid;gap:1.6rem;align-items:end}
@media (min-width:900px){.hdr--split{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem)}}
.hdr--mid{text-align:center;max-width:44rem;margin-inline:auto}
.hdr--mid .gbadge{margin-top:1.5rem}

/* ─── 6. PÍLULAS E LIGAÇÕES ────────────────────────────────────────────── */
.pill{
  --bg:var(--mocha-x); --fg:var(--on-dark);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.9rem;
  min-height:52px;padding:.85rem .95rem .85rem 1.6rem;
  border-radius:100px;background:var(--bg);color:var(--fg);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.01em;
  white-space:nowrap;   /* uma pílula de 2 linhas deixa de ser uma pílula */
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),color .35s;
  will-change:transform;
}
.pill::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--on-dark);transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.pill:hover{transform:translateY(-3px);color:var(--mocha-x);
  box-shadow:0 16px 34px -16px rgba(74,58,47,.5)}
.pill:hover::before{transform:translateY(0)}
.pill:active{transform:translateY(-1px)}
.pill__ic{
  display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--on-dark);color:var(--mocha-x);
  transition:transform .5s var(--e-out),background .35s;
}
.pill__ic svg{width:15px;height:15px}
.pill:hover .pill__ic{background:var(--mocha-x);color:var(--on-dark);transform:rotate(45deg)}
.pill__wa{display:grid;place-items:center;width:24px;height:24px;flex:none;margin-left:-.3rem}
.pill__wa svg{width:24px;height:24px}
.pill--lg{min-height:58px;padding:1rem 1.1rem 1rem 1.9rem;font-size:1.05rem}
.pill--xl{min-height:64px;padding:1.1rem 2rem;font-size:1.08rem;gap:.8rem}
/* variante clara: sobre imagem ou fundo escuro */
.pill--light{--bg:var(--on-dark);--fg:var(--mocha-x)}
.pill--light::before{background:var(--mocha-x)}
.pill--light:hover{color:var(--on-dark)}
.pill--light .pill__ic{background:var(--mocha-x);color:var(--on-dark)}
.pill--light:hover .pill__ic{background:var(--on-dark);color:var(--mocha-x)}
/* variante do cabeçalho sobre o hero */
.pill--on-dark{--bg:transparent;--fg:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--hair-light)}
.pill--on-dark::before{background:var(--on-dark)}
.pill--on-dark:hover{color:var(--mocha-x);box-shadow:inset 0 0 0 1.5px transparent}
.hd--stuck .pill--on-dark{--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.hd--stuck .pill--on-dark .pill__ic{background:var(--mocha-x);color:var(--on-dark)}

.lnk{
  position:relative;display:inline-block;font-size:var(--t-sm);font-weight:500;
  color:var(--head);padding-bottom:3px;min-height:auto;
}
.lnk::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform-origin:100% 50%;transition:transform .45s var(--e-out)}
.lnk:hover::after{transform:scaleX(0)}
.lnk--sm{font-size:var(--t-label);font-weight:400;color:inherit}

/* ─── 7. CABEÇALHO ─────────────────────────────────────────────────────── */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:110;color:var(--on-dark);
  padding-block:clamp(.9rem,1.8vw,1.5rem);
  transition:background .5s var(--e-soft),box-shadow .5s var(--e-soft),
             padding .5s var(--e-soft),color .4s;
}
@media (min-width:1120px){.hd{padding-inline:14px}}
.hd__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,2vw,2.5rem)}
/* flex:none nos dois extremos — sem isto o flexbox comprime a pílula e o
   `overflow:hidden` dela corta a seta. */
.hd__in>*{flex:none}
.hd--stuck{
  background:rgba(250,247,242,.9);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 1px 0 var(--hair-2);color:var(--ink);padding-block:.7rem;
}
/* ─── LOGOTIPO ──────────────────────────────────────────────────────────
   O SVG está no sprite, por isso herda `currentColor`: a mesma marca inverte
   sozinha entre o hero (creme), o cabeçalho colado (mocha) e o rodapé.
   Proporção original 3.81:1 — a largura é derivada da altura para nunca
   distorcer o traço caligráfico. */
.brand{display:flex;align-items:center;margin-right:auto}
.brand__logo{
  height:clamp(30px,3.4vw,42px);width:auto;aspect-ratio:670/176;
  /* TEM de ser `fill`, não `color`: os <path> do logótipo não trazem cor
     nenhuma, por isso sem isto caíam no preto por omissão do SVG. Com
     fill:currentColor a marca herda a cor do contexto e inverte sozinha —
     creme sobre a fotografia do hero, escura no cabeçalho colado, creme
     outra vez no rodapé. */
  fill:currentColor;flex:none;
  transition:opacity .4s var(--e-soft),transform .6s var(--e-out);
}
.brand:hover .brand__logo{opacity:.72}
.hd:not(.hd--stuck) .brand__logo{
  /* sobre a fotografia do hero o traço é fino: um brilho ténue garante
     que se lê contra zonas claras da imagem */
  filter:drop-shadow(0 1px 6px rgba(48,38,31,.5));
}

/* Rodapé: logotipo maior, com o subtítulo em tipo legível (o subtítulo
   dentro do lockup original ficaria a ~7px — ilegível para 40+). */
.brand--ft{flex-direction:column;align-items:flex-start;gap:.5rem}
.brand--ft .brand__logo{height:clamp(40px,5vw,54px)}
.brand__sub{font-size:var(--t-label);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark-2)}

.nav{display:flex;gap:clamp(.75rem,1.25vw,1.5rem)}
.nav a{position:relative;font-size:var(--t-sm);letter-spacing:.005em;padding-block:.45rem;
  white-space:nowrap;   /* "Laura Araújo" e "Onde estamos" não podem partir */
  opacity:.82;transition:opacity .3s}
.nav a::after{content:'';position:absolute;left:0;bottom:.15rem;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--e-out)}
.nav a:hover,.nav a.is-active{opacity:1}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.burger{display:none;width:48px;height:48px;position:relative;flex:none}
.burger span{position:absolute;left:14px;width:20px;height:1.8px;background:currentColor;
  transition:transform .45s var(--e-out)}
.burger span:first-child{top:21px}
.burger span:last-child{top:27px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:105;background:var(--mocha-x);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:6rem var(--pad) 2.5rem;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);transition:clip-path .8s var(--e-out);
}
.menu[hidden]{display:none}
.menu.is-open{clip-path:circle(150% at calc(100% - 3rem) 3rem)}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{display:flex;align-items:baseline;gap:1rem;padding-block:.35rem;
  font-family:var(--f-disp);font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1.2;
  opacity:0;transform:translateY(16px)}
.menu.is-open .menu__nav a{animation:mIn .7s var(--e-out) forwards;
  animation-delay:calc(.18s + var(--i,0)*.04s)}
.menu__nav a:nth-child(1){--i:1}.menu__nav a:nth-child(2){--i:2}.menu__nav a:nth-child(3){--i:3}
.menu__nav a:nth-child(4){--i:4}.menu__nav a:nth-child(5){--i:5}.menu__nav a:nth-child(6){--i:6}
.menu__nav a:nth-child(7){--i:7}.menu__nav a:nth-child(8){--i:8}.menu__nav a:nth-child(9){--i:9}
.menu__nav a:nth-child(10){--i:10}.menu__nav a:nth-child(11){--i:11}.menu__nav a:nth-child(12){--i:12}
@keyframes mIn{to{opacity:1;transform:none}}
.menu__ft{border-top:1px solid var(--hair-light);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.menu__ft p{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}

/* ─── 7b. SELO DO GOOGLE ───────────────────────────────────────────────
   Prova social de terceiro. Fica propositadamente com as cores do Google
   e não com as da marca: é o facto de ser reconhecível como uma fonte
   externa que lhe dá o valor. Desenhado em SVG e texto — nada de imagem,
   por isso fica nítido em qualquer ecrã e pesa zero pedidos. */
.gbadge{display:inline-flex;align-items:center;gap:.6rem;width:max-content;
  padding:.46rem .95rem .46rem .66rem;border-radius:100px;
  border:1px solid var(--hair);background:var(--paper);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-soft)}
.gbadge:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(74,58,47,.14)}
.gbadge__g{flex:none;width:20px;height:20px}
.gbadge__g svg{display:block;width:100%;height:100%}
/* Sem legenda por baixo, as estrelas são o conteúdo — daí ganharem corpo.
   O line-height apertado impede que o glifo ★ desalinhe do logótipo. */
.gbadge__stars{color:#E9A227;font-size:1.02rem;line-height:1;letter-spacing:.11em}
/* Sobre a fotografia do hero: chapa de vidro em vez de papel branco. */
.gbadge--dark{background:rgba(255,252,247,.14);border-color:var(--hair-light);
  backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}
.gbadge--dark .gbadge__stars{color:#FFC24D}
.gbadge--dark:hover{box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* ─── 8. HERO ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(92svh,860px);
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(6.5rem,13vh,9rem) var(--pad) clamp(2.5rem,5vh,3.5rem);
  background:var(--mocha-d);color:var(--on-dark);
}
@media (min-width:1120px){.hero{border-radius:var(--r-lg) var(--r-lg) 0 0}}
.hero__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}

/* Vídeo ambiente do hero ───────────────────────────────────────────────
   O player é um iframe e um iframe não aceita object-fit. Quem lhe dá as
   medidas de "cover" é o main.js (mede a caixa e escala o 16:9 até cobrir);
   aqui fica só o recorte, o fade de entrada e a garantia de que não apanha
   cliques — os CTA por cima têm de continuar a funcionar. */
.hero__video{position:absolute;inset:0;z-index:-2;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity 1.1s var(--e-soft)}
.hero__video.is-on{opacity:1}
/* max-width:none anula o reset da linha 91: para cobrir, o vídeo TEM de
   poder ser mais largo do que a caixa e sair pelo recorte. */
.hero__video iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:100%;max-width:none;border:0;pointer-events:none}
/* Um <video> não precisa da medição do JS: o object-fit faz o cover sozinho,
   que é meia razão para preferir o ficheiro próprio ao player alojado. */
.hero__video video{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;pointer-events:none}
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(48,38,31,.78) 0%,rgba(48,38,31,.26) 46%,rgba(48,38,31,.42) 100%),
    radial-gradient(70% 50% at 50% 46%,rgba(48,38,31,.34),transparent 70%)}

.hero__aside{
  justify-self:end;align-self:start;max-width:26rem;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem;
  opacity:0;animation:up .9s .5s var(--e-out) forwards;
}
.hero__note{font-size:var(--t-sm);line-height:1.65;color:var(--on-dark-2);text-wrap:pretty}

.hero__play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  opacity:0;animation:up 1s .8s var(--e-out) forwards;
}
.hero__playIc{
  /* position:relative é obrigatório: sem ele o anel ::before ancorava-se ao
     .hero__play (absoluto) e desenhava uma elipse gigante. */
  position:relative;
  display:grid;place-items:center;width:clamp(74px,8vw,96px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,252,247,.14);color:var(--on-dark);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1.5px rgba(255,252,247,.5);
  transition:transform .5s var(--e-back),background .4s;
}
.hero__playIc svg{width:30%;height:30%;margin-left:8%}
.hero__playIc::before{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,252,247,.45);animation:ring 3s var(--e-soft) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}
.hero__playTx{font-size:var(--t-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.hero__play:hover .hero__playIc{transform:scale(1.09);background:rgba(255,252,247,.26)}

/* Largura em rem, não em ch: a unidade ch resolve contra o font-size DESTE
   elemento (18px), não contra o do h1 — 26ch dava 234px e partia o título
   em quatro linhas. */
.hero__txt{align-self:end;max-width:min(100%,44rem)}
.hero__eyebrow{font-size:var(--t-label);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blush);margin-bottom:1.1rem;
  opacity:0;animation:up .9s .15s var(--e-out) forwards}
.hero__h1{
  font-family:var(--f-disp);font-weight:500;font-size:var(--t-h1);
  line-height:.96;letter-spacing:-.026em;
  text-shadow:0 2px 30px rgba(48,38,31,.35);
}
.hero__h1 em{font-style:italic;color:var(--blush)}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;transform:translateY(105%)}
.hero__h1 .ln:nth-child(1)>span{animation:lineUp 1.15s .2s var(--e-out) forwards}
.hero__h1 .ln:nth-child(2)>span{animation:lineUp 1.15s .34s var(--e-out) forwards}
@keyframes lineUp{to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__tag{margin-top:1.3rem;font-size:var(--t-lead);line-height:1.55;color:var(--on-dark-2);
  max-width:40ch;opacity:0;animation:up .9s .62s var(--e-out) forwards}
/* último elemento da escada de entrada do hero */
.hero__txt .gbadge{margin-top:1.5rem;opacity:0;
  animation:up .9s .74s var(--e-out) forwards}
/* estado a reproduzir */
.hero.is-playing>*:not(.hero__frame){display:none}
.hero.is-playing{min-height:0;padding:0;display:block}
.hero__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.hero__frame iframe,.hero__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ─── 9. FAIXA ROLANTE ─────────────────────────────────────────────────── */
.band{background:var(--sand);padding-block:1.15rem;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band__row{display:flex;align-items:center;gap:1.5rem;width:max-content;
  animation:slide 44s linear infinite;
  font-size:clamp(1rem,1.9vw,1.35rem);font-weight:500;letter-spacing:.03em;
  text-transform:uppercase;color:var(--mocha-x);white-space:nowrap}
.band:hover .band__row{animation-play-state:paused}
.band__row b{color:var(--taupe);font-size:1.1em;line-height:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─── 10. SECÇÕES BASE ─────────────────────────────────────────────────── */
.sec{padding-block:var(--sec-y);position:relative}
.sec--paper{background:var(--paper)}

/* ─── 11. REVELAÇÕES ───────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out),clip-path .9s var(--e-out);
  transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}
.split__ph.reveal,.gal__i.reveal,.ba.reveal,.mapa.reveal{clip-path:inset(0 0 100% 0)}
.split__ph.reveal.in,.gal__i.reveal.in,.ba.reveal.in,.mapa.reveal.in{clip-path:inset(0 0 0 0)}

/* ─── 12. MANIFESTO ────────────────────────────────────────────────────── */
.mani{text-align:center}
.mani__txt{
  font-family:var(--f-disp);font-weight:400;font-size:var(--t-mani);
  line-height:1.24;letter-spacing:-.014em;color:var(--ink);
  max-width:38ch;margin:0 auto clamp(3rem,7vh,5rem);text-wrap:balance;
}
.mani__txt em{font-style:italic;color:var(--mocha)}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.8rem,3vw,3rem);text-align:left;
  border-top:1px solid var(--hair);padding-top:clamp(2rem,4vh,3rem)}
.figures li{position:relative;padding-left:1.4rem}
.figures li::before{content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:2px;
  background:linear-gradient(var(--blush),transparent)}
.figures b{display:block;font-family:var(--f-disp);font-weight:500;
  font-size:clamp(2.6rem,4.8vw,3.9rem);line-height:1;letter-spacing:-.02em;
  color:var(--head);font-variant-numeric:tabular-nums}
.figures li>span{display:block;margin-top:.6rem;font-size:var(--t-sm);
  color:var(--ink-2);max-width:20ch}
.figures__stars i{display:block;color:var(--blush);font-style:normal;
  letter-spacing:.16em;font-size:1rem;margin-bottom:.25rem}
.figures__stars a{color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--hair);text-underline-offset:3px;transition:color .3s}
.figures__stars a:hover{color:var(--head)}

/* ─── 13. DORES ────────────────────────────────────────────────────────── */
.dores__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r);overflow:hidden}
.dcard{background:var(--cream);padding:clamp(1.7rem,2.8vw,2.4rem);
  transition:background .5s var(--e-soft)}
.dcard:hover{background:var(--shell)}
.dcard h3{font-family:var(--f-disp);font-weight:500;font-size:var(--t-h3);
  line-height:1.14;color:var(--head);margin-bottom:.8rem;text-wrap:balance}
.dcard p{font-size:var(--t-sm);line-height:1.7;color:var(--ink-2)}

/* ─── 14. BLOCOS DIVIDIDOS (Método / Laura) ────────────────────────────── */
.split{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:920px){
  .split{grid-template-columns:.92fr 1.08fr}
  .split--rev>.split__ph{order:2}
}
.split__ph{position:relative;overflow:hidden;border-radius:var(--r)}
.split__ph img{width:100%;height:auto;object-fit:cover}
.split__ph figcaption{position:absolute;left:1rem;bottom:1rem;
  background:rgba(255,252,247,.94);color:var(--mocha-x);
  padding:.55rem 1rem;border-radius:100px;
  font-size:var(--t-label);font-weight:500;letter-spacing:.04em}
.split__tx>.h2{margin-bottom:1.4rem}
.split__tx>.pill{margin-top:2rem}

/* Círculos dos pilares */
.circles__lead{margin:clamp(3.5rem,8vh,6rem) 0 2rem;text-align:center;
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.circles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem)}
.circles li{text-align:center}
.circ{
  display:grid;place-content:center;gap:.3rem;
  width:clamp(140px,15vw,178px);aspect-ratio:1;margin:0 auto 1.2rem;
  border-radius:50%;border:1px solid var(--sand-2);padding:1.2rem;
  transition:border-color .5s var(--e-soft),transform .6s var(--e-out),background .5s;
}
.circles li:hover .circ{border-color:var(--blush);transform:translateY(-6px);background:var(--shell)}
.circ b{font-family:var(--f-disp);font-weight:500;font-size:1.5rem;color:var(--mocha);line-height:1}
.circ i{font-style:normal;font-size:var(--t-label);font-weight:500;line-height:1.35;
  color:var(--head);text-wrap:balance}
.circles p{font-size:var(--t-sm);line-height:1.65;color:var(--ink-2);
  max-width:30ch;margin-inline:auto}

/* Laura: retrato pequeno + credenciais */
.laura__row{display:grid;gap:1.5rem;margin-top:2.2rem;align-items:center}
@media (min-width:600px){.laura__row{grid-template-columns:auto 1fr}}
.laura__mini{width:clamp(96px,11vw,128px);border-radius:var(--r);overflow:hidden;flex:none}
.laura__mini img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.creds{display:grid;border-top:1px solid var(--hair)}
.creds li{padding-block:.7rem;border-bottom:1px solid var(--hair);
  font-size:var(--t-sm);color:var(--ink-2);display:flex;gap:.7rem;align-items:baseline}
.creds li::before{content:'★';color:var(--blush);font-size:.7em;flex:none}
.laura__cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

/* ─── 15. CARTÕES DE TRATAMENTO ────────────────────────────────────────── */
/* align-items:start é essencial: o cartão aberto cresce em altura sem esticar
   os irmãos nem empurrar nenhum para uma segunda linha. */
.cards{display:grid;gap:clamp(.7rem,1.4vw,1.1rem);grid-template-columns:1fr;align-items:start}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--shell);
  display:grid}
.card__btn{position:relative;display:block;width:100%;aspect-ratio:7/9;overflow:hidden}
@media (max-width:767px){.card.is-open .card__btn{aspect-ratio:16/10}}
.card__btn img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out),filter .5s}
.card__btn::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(48,38,31,.4),transparent 55%);
  opacity:0;transition:opacity .5s}
.card__btn:hover img{transform:scale(1.05)}
.card__btn:hover::after{opacity:1}
.card__pill{
  position:absolute;top:.85rem;left:.85rem;right:3.6rem;z-index:2;text-align:left;
  background:rgba(255,252,247,.95);color:var(--mocha-x);
  padding:.6rem 1rem;border-radius:100px;
  font-size:var(--t-label);font-weight:500;line-height:1.25;
  backdrop-filter:blur(6px);
}
.card__ic{
  position:absolute;bottom:.9rem;right:.9rem;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--on-dark);color:var(--mocha-x);
  transition:transform .55s var(--e-back),background .4s,color .4s;
}
.card__ic svg{width:16px;height:16px}
.card__btn:hover .card__ic{transform:scale(1.1) rotate(45deg)}
.card__btn[aria-expanded="true"] .card__ic{background:var(--mocha-x);color:var(--on-dark);
  transform:rotate(135deg)}
/* Painel de detalhe: abre por baixo, e o cartão cresce para baixo.
   A imagem mantém o 7:9 nas grelhas de tablet e desktop para preservar o
   alinhamento; no telemóvel aberto, encurta para aproximar o conteúdo.
   O espaço vazio por baixo dos cartões fechados é transparente. */
.card__panel{display:none;padding:clamp(1.2rem,2vw,1.6rem);background:var(--sand);
  border-radius:0 0 var(--r) var(--r)}
.card.is-open .card__panel{display:block;animation:up .5s var(--e-out)}
.card__kicker{font-family:var(--f-disp);font-style:italic;
  font-size:clamp(1.15rem,1.7vw,1.35rem);color:var(--head);margin-bottom:.8rem}
.card__panel p{font-size:var(--t-sm);line-height:1.68;color:var(--ink-2)}
.mini{display:flex;flex-direction:column;margin:1.2rem 0;border-top:1px solid var(--hair)}
.mini li{padding-block:.5rem;border-bottom:1px solid var(--hair);
  font-size:var(--t-label);color:var(--ink-2);display:flex;gap:.6rem;align-items:baseline}
.mini li::before{content:'·';color:var(--blush);font-weight:700}

/* ─── 16. BANDA CTA ────────────────────────────────────────────────────── */
.banda{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(20rem,42vh,30rem);display:grid;place-items:center;
  padding:clamp(3rem,7vh,5rem) var(--pad);text-align:center;color:var(--on-dark)}
.banda>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.banda__veil{position:absolute;inset:0;z-index:-1;background:rgba(48,38,31,.5)}
.banda__in{display:flex;flex-direction:column;align-items:center;gap:2rem}
.banda__tx{font-family:var(--f-disp);font-weight:500;
  font-size:clamp(1.7rem,3.7vw,3rem);line-height:1.18;letter-spacing:-.014em;
  max-width:30ch;text-wrap:balance;text-shadow:0 2px 24px rgba(48,38,31,.4)}
.banda__tx em{font-style:italic;color:var(--blush)}

/* ─── 17. ANTES / DEPOIS ───────────────────────────────────────────────── */
.res__grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.ba{border-radius:var(--r);overflow:hidden}
.ba__stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);
  background:var(--sand-2);--p:50%}
.ba__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--p);width:2.5px;
  background:var(--on-dark);translate:-50% 0;pointer-events:none;z-index:3;
  box-shadow:0 0 18px rgba(48,38,31,.45)}
.ba__handle i{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:52px;height:52px;border-radius:50%;background:var(--on-dark);color:var(--mocha-x);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(48,38,31,.3)}
.ba__handle i::before{content:'‹ ›';font-size:1.1rem;letter-spacing:-.05em}
.ba__stage{touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ba__stage img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.ba__stage.is-drag .ba__handle i{scale:1.08}
.ba__handle i{transition:scale .2s}
.ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;
  pointer-events:none;-webkit-appearance:none;appearance:none;background:none}
.ba__stage:has(.ba__range:focus-visible) .ba__handle i{outline:2px solid var(--mocha-x);outline-offset:3px}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100%}
.ba__tag{position:absolute;top:1rem;z-index:3;font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem .85rem;border-radius:100px;
  background:rgba(48,38,31,.72);color:var(--on-dark);backdrop-filter:blur(4px)}
.ba__tag--l{left:1rem}
.ba__tag--r{right:1rem}
.ba figcaption{padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.ba figcaption b{font-weight:600;font-size:var(--t-sm);color:var(--ink)}
.ba figcaption span{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2)}

/* ─── 18. DEPOIMENTOS ──────────────────────────────────────────────────── */
/* Quatro depoimentos: 2×2 no telemóvel e no tablet, fila de quatro no
   computador. Colunas fixas (e não auto-fit) porque com quatro cartões o
   auto-fit deixava uma órfã sozinha na segunda linha em ecrãs médios. */
.depo__grid{display:grid;gap:clamp(.8rem,1.6vw,1.2rem);
  grid-template-columns:repeat(2,1fr);align-items:stretch}
@media (min-width:900px){.depo__grid{grid-template-columns:repeat(4,1fr)}}
.tcard{display:flex;flex-direction:column;background:var(--mocha-d);color:var(--on-dark);
  border-radius:var(--r);overflow:hidden;padding:clamp(1.3rem,2.2vw,1.7rem)}
.tcard blockquote{font-family:var(--f-disp);font-size:clamp(1.1rem,1.7vw,1.28rem);
  line-height:1.34;margin-bottom:1.3rem;text-wrap:pretty}
.tcard blockquote::before{content:'“';display:block;font-size:2.8rem;line-height:.6;
  color:var(--blush);margin-bottom:.35rem}
.tcard__btn{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r);margin-top:auto}
.tcard__btn img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--e-out),filter .5s;filter:brightness(.95)}
.tcard__btn:hover img{transform:scale(1.06);filter:brightness(1)}
.tcard__play{position:absolute;bottom:.8rem;left:.8rem;z-index:2;
  display:grid;place-items:center;width:48px;aspect-ratio:1;border-radius:50%;
  background:var(--on-dark);color:var(--mocha-x);transition:transform .5s var(--e-back)}
.tcard__play svg{width:38%;height:38%;margin-left:8%}
.tcard__btn:hover .tcard__play{transform:scale(1.12)}
.tcard figcaption{padding-top:1rem}
.tcard figcaption b{display:block;font-weight:600;font-size:var(--t-sm)}
.tcard figcaption span{display:block;font-size:var(--t-label);color:var(--on-dark-2);margin-top:.15rem}
/* Cartão que é só imagem, para quebrar o ritmo da fila. Fora de uso desde que
   passámos a ter quatro depoimentos reais (um quinto cartão deixava uma órfã
   na segunda linha); fica aqui caso volte a fazer falta. */
.tcard--img{padding:0;background:none}
.tcard--img img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}

/* Enquanto a estética não tiver a frase e o nome autorizados por cada cliente,
   o cartão vive só da capa do vídeo: a moldura escura desaparece e a
   fotografia ocupa tudo. Assim que preencher a config, volta ao desenho
   completo sozinho (o JS tira esta classe). */
.tcard--bare{padding:0;background:none;border-radius:var(--r)}
.tcard--bare .tcard__btn{aspect-ratio:4/5}

/* ─── 18b. VISUALIZADOR DE VÍDEO SOBREPOSTO ────────────────────────────
   Os depoimentos são 16:9. Dentro de um cartão da grelha ficariam com
   ~170 px de altura, por isso abrem por cima, à largura que merecem. */
.lb{width:100%;max-width:100%;max-height:100%;height:100%;
  margin:0;padding:var(--pad);border:0;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(36,30,26,.88);backdrop-filter:blur(6px)}
.lb:not([open]){display:none}
.lb[open]{display:grid;place-items:center}
.lb__frame{position:relative;width:100%;max-width:min(1100px,100%);
  aspect-ratio:16/9;max-height:100%;border-radius:var(--r);
  overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lb__frame iframe,.lb__frame video{position:absolute;inset:0;
  width:100%;height:100%;border:0}
.lb__x{position:absolute;top:.55rem;right:.55rem;z-index:2;
  display:grid;place-items:center;width:46px;height:46px;border:0;
  border-radius:50%;cursor:pointer;color:var(--ink);
  background:var(--on-dark);box-shadow:0 4px 18px rgba(0,0,0,.3);
  transition:transform .4s var(--e-back)}
.lb__x svg{width:20px;height:20px}
.lb__x:hover{transform:rotate(90deg)}
/* No telemóvel o botão sai de cima do vídeo para não tapar o rosto. */
@media (max-width:640px){
  .lb{padding:1rem}
  .lb[open]{align-content:center;gap:.8rem}
  .lb__x{position:static;justify-self:center;order:2}
}

/* ─── 19. GALERIA DA ESTÉTICA ──────────────────────────────────────────── */
.gal{display:grid;gap:clamp(.7rem,1.5vw,1.1rem);grid-template-columns:repeat(2,1fr)}
.gal__i{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/5;
  background:var(--sand);box-shadow:0 1px 0 var(--hair-2);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out)}
.gal__i::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(48,38,31,.12),transparent 42%,rgba(255,252,247,.06));
  opacity:.7;transition:opacity .45s var(--e-soft)}
.gal__i--a{aspect-ratio:1}
.gal__i--e{grid-column:span 2;aspect-ratio:16/9}
@media (min-width:900px){
  /* Grelha assimétrica com um vazio deliberado, como na referência.
     Alturas de linha EXPLÍCITAS — sem elas as células colapsam. */
  .gal{grid-template-columns:repeat(6,1fr);
       grid-template-rows:repeat(2,clamp(12rem,19vw,17rem))}
  .gal__i{aspect-ratio:auto}
  .gal__i--a{grid-column:2/4;grid-row:1/2}
  .gal__i--b{grid-column:4/6;grid-row:1/2}
  .gal__i--c{grid-column:1/3;grid-row:2/3}
  .gal__i--d{grid-column:3/5;grid-row:2/3}
  .gal__i--e{grid-column:5/7;grid-row:2/3}
}
.gal__i img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.2s var(--e-out),filter .6s}
.gal__i--a img{object-position:58% 50%}
.gal__i--b img{object-position:56% 44%}
.gal__i--c img{object-position:50% 52%}
.gal__i--d img{object-position:50% 50%}
.gal__i--e img{object-position:50% 38%}
.gal__i:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(74,58,47,.42)}
.gal__i:hover::after{opacity:.35}
.gal__i:hover img{transform:scale(1.06)}
@media (hover:none){
  .gal__i:hover{transform:none;box-shadow:0 1px 0 var(--hair-2)}
  .gal__i:hover::after{opacity:.7}
  .gal__i:hover img{transform:none}
}

.amen{margin-top:clamp(2.5rem,5vh,4rem);display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--hair);border-block:1px solid var(--hair)}
.amen li{background:var(--cream);padding:1.6rem clamp(1rem,2vw,1.6rem)}
.amen b{display:block;font-family:var(--f-disp);font-weight:500;font-size:1.28rem;
  color:var(--head);margin-bottom:.45rem}
.amen span{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}

/* ─── 20. JORNADA ──────────────────────────────────────────────────────── */
/* Os quatro passos alinham em cima e abrem um de cada vez, com a mesma
   mecânica dos cartões de tratamento: a seta gira, a imagem encolhe para
   uma faixa e a descrição ocupa o espaço que sobra. Havia aqui antes um
   escalonamento vertical (2 e 4 empurrados para baixo) que deixava a fila
   irregular — foi retirado. */
.steps{display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(2,1fr);align-items:start}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{border-radius:var(--r);overflow:hidden;background:transparent;
  transition:background .4s var(--e-soft)}
.step__btn{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.step__btn img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out)}
.step__btn::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(48,38,31,.28),transparent 55%);
  opacity:0;transition:opacity .45s}
.step__btn:hover img{transform:scale(1.05)}
.step__btn:hover::after{opacity:1}
.step__pill{position:absolute;top:.8rem;left:.8rem;right:.8rem;z-index:2;
  background:rgba(255,252,247,.95);color:var(--mocha-x);
  padding:.55rem .95rem;border-radius:100px;text-align:left;
  font-size:var(--t-label);font-weight:500;backdrop-filter:blur(6px)}
.step__ic{
  position:absolute;bottom:.9rem;right:.9rem;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--on-dark);color:var(--mocha-x);
  transition:transform .55s var(--e-back),background .4s,color .4s;
}
.step__ic svg{width:16px;height:16px}
.step__btn:hover .step__ic{transform:scale(1.1) rotate(45deg)}
.step__btn[aria-expanded="true"] .step__ic{background:var(--mocha-x);color:var(--on-dark);
  transform:rotate(135deg)}
.step__panel{display:none;padding:clamp(1.1rem,1.8vw,1.5rem);background:var(--sand);
  border-radius:0 0 var(--r) var(--r)}
.step.is-open .step__panel{display:block;animation:up .5s var(--e-out)}
.step__panel p{font-size:var(--t-sm);line-height:1.68;color:var(--ink-2)}
/* A imagem NÃO encolhe ao abrir — ao contrário dos tratamentos, onde só há
   um cartão dominante. Aqui são quatro em fila: se a imagem do aberto
   encolhesse, a etiqueta e a seta desse cartão saltavam para cima e a fila
   ficava desalinhada. Mantendo o 4:5 em todos, as quatro imagens, as quatro
   etiquetas e as quatro setas ficam à mesma altura, e só a descrição desce.
   O espaço vazio por baixo dos fechados é transparente, logo não se vê. */

/* ─── 21. ONDE ESTAMOS ─────────────────────────────────────────────────── */
.onde__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:960px){.onde__in{grid-template-columns:1fr 1.05fr}}
.onde__tx>.h2{margin-bottom:1.6rem}
.onde__addr{display:grid;gap:.15rem;font-size:var(--t-lead);line-height:1.55;
  color:var(--ink);padding-left:1.2rem;border-left:2px solid var(--blush)}
.onde__addr b{font-family:var(--f-disp);font-weight:500;font-size:1.25em;color:var(--head)}
.onde__lead{margin-top:1.6rem;font-size:var(--t-sm);line-height:1.7;
  color:var(--ink-2);max-width:46ch}
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.zonas li{display:flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border-radius:100px;background:var(--shell);
  box-shadow:inset 0 0 0 1px var(--hair);
  font-size:var(--t-label);font-weight:500;color:var(--head)}
.zonas i{display:grid;place-items:center;width:15px;height:15px;color:var(--taupe)}
.zonas i svg{width:100%;height:100%}
.horario{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.horario dt{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);margin-bottom:.5rem}
.horario dd{font-size:var(--t-sm);line-height:1.8;color:var(--ink-2)}
.onde__cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

.mapa{position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:
    linear-gradient(140deg,var(--shell),var(--sand));
  box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center}
@media (min-width:960px){.mapa{aspect-ratio:1/1}}
/* malha discreta que sugere um mapa, sem pedir nada à rede */
.mapa::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--hair-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair-2) 1px,transparent 1px),
    linear-gradient(38deg,transparent 47%,var(--sand-2) 47%,var(--sand-2) 53%,transparent 53%);
  background-size:38px 38px,38px 38px,100% 100%}
.mapa__card{position:absolute;top:1rem;left:1rem;right:1rem;z-index:3;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;
  background:var(--on-dark);border-radius:var(--r);padding:.9rem 1rem;
  box-shadow:0 8px 26px -12px rgba(74,58,47,.4)}
.mapa__card b{font-weight:600;font-size:var(--t-sm);color:var(--ink);grid-column:1}
.mapa__card span{font-size:var(--t-label);color:var(--ink-2);grid-column:1}
.mapa__ext{grid-column:2;grid-row:1/3;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:var(--shell);color:var(--mocha-x);
  transition:transform .5s var(--e-back),background .4s}
.mapa__ext svg{width:16px;height:16px}
.mapa__ext:hover{background:var(--mocha-x);color:var(--on-dark);transform:scale(1.08)}
.mapa__load{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:2rem;text-align:center;max-width:24rem}
.mapa__pin{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--on-dark);color:var(--mocha);box-shadow:0 8px 22px -10px rgba(74,58,47,.45);
  transition:transform .5s var(--e-back)}
.mapa__pin svg{width:22px;height:22px}
.mapa__load:hover .mapa__pin{transform:translateY(-4px) scale(1.06)}
.mapa__go{font-size:var(--t-sm);font-weight:600;color:var(--head);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair)}
.mapa__load small{font-size:var(--t-label);line-height:1.5;color:var(--ink-2)}
.mapa.is-playing .mapa__load,.mapa.is-playing::before{display:none}
.mapa__frame{position:absolute;inset:0}
.mapa__frame iframe{width:100%;height:100%;border:0}

/* ─── 22. FAQ ──────────────────────────────────────────────────────────── */
.faq__in{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:960px){.faq__in{grid-template-columns:.72fr 1.28fr;align-items:start}}
.faq__hd{position:sticky;top:7.5rem}
@media (max-width:959px){.faq__hd{position:static}}
.faq__help{margin-top:1.6rem;font-size:var(--t-sm);color:var(--ink-2);line-height:1.9}

.acc{border-top:1px solid var(--hair)}
.acc__i{border-bottom:1px solid var(--hair)}
.acc__h{display:flex;align-items:center;gap:1.4rem;width:100%;text-align:left;
  min-height:64px;padding-block:1.15rem;
  transition:padding-left .45s var(--e-out),color .3s}
.acc__h:hover{padding-left:.5rem;color:var(--mocha)}
.acc__h>span{flex:1;font-family:var(--f-disp);font-weight:500;
  font-size:clamp(1.14rem,1.75vw,1.42rem);line-height:1.24;letter-spacing:-.008em;
  color:var(--head);transition:color .3s}
.acc__h:hover>span,.acc__h[aria-expanded="true"]>span{color:var(--mocha)}
.acc__ic{position:relative;width:18px;height:18px;flex:none;color:var(--taupe)}
.acc__ic::before,.acc__ic::after{content:'';position:absolute;top:50%;left:0;
  width:100%;height:1.8px;background:currentColor;transition:transform .45s var(--e-out)}
.acc__ic::after{transform:rotate(90deg)}
.acc__h[aria-expanded="true"] .acc__ic{color:var(--mocha)}
.acc__h[aria-expanded="true"] .acc__ic::after{transform:rotate(0)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)}
.acc__i:has(.acc__h[aria-expanded="true"]) .acc__p{grid-template-rows:1fr}
.acc__b{overflow:hidden;opacity:0;transition:opacity .4s .1s var(--e-soft);padding-bottom:0}
.acc__i:has(.acc__h[aria-expanded="true"]) .acc__b{opacity:1;padding-bottom:1.5rem}
.acc__b p{font-size:var(--t-sm);line-height:1.72;color:var(--ink-2);max-width:66ch;text-wrap:pretty}

/* ─── 23. RODAPÉ ───────────────────────────────────────────────────────── */
.ft{background:var(--mocha-d);color:var(--on-dark);padding-block:clamp(3.5rem,8vh,6rem) 2.5rem}
.ft__top{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
  padding-bottom:clamp(2.5rem,5vh,4rem)}
/* Sem a grelha do Instagram ao lado, este bloco passou a ser a única coisa
   no topo do rodapé — centrado lê-se como um remate, alinhado à esquerda
   lia-se como uma coluna à espera da outra metade. */
.ft__lead{max-width:44ch;margin-inline:auto;text-align:center}
.ft__lead .h2{margin-bottom:1.5rem}
.ft__sub{font-size:var(--t-lead);line-height:1.6;color:var(--on-dark-2);
  max-width:40ch;margin-inline:auto;margin-bottom:2.2rem}
.ft__hint{margin-top:1.2rem;font-size:var(--t-label);color:var(--on-dark-2)}
.ft .h2--xl .ln>span{transform:translateY(105%);transition:transform 1s var(--e-out)}
.ft .h2--xl.in .ln>span{transform:none}
.ft .h2--xl.in .ln:nth-child(2)>span{transition-delay:.1s}

.ft__mid{display:grid;gap:2rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-block:clamp(2.5rem,5vh,3.5rem);
  border-top:1px solid var(--hair-light)}
.ft__col dt{font-size:var(--t-label);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blush);margin-bottom:.8rem}
.ft__col dd{font-size:var(--t-sm);line-height:1.8;color:var(--on-dark-2)}
.ft__nav{display:flex;flex-direction:column;gap:.15rem;align-items:start}
.ft__nav a{transition:color .3s}
.ft__nav a:hover{color:var(--on-dark)}
/* Seta discreta nos links que saem do site (Livro de Reclamações). Fica
   translúcida para não competir com os links de navegação interna. */
.ft__ext{display:inline-flex;width:.62em;height:.62em;margin-left:.42em;
  opacity:.5;transition:opacity .3s,transform .3s var(--e-out)}
.ft__ext svg{width:100%;height:100%}
.ft__nav a:hover .ft__ext{opacity:1;transform:translate(1px,-1px)}

.ft__bot{display:grid;gap:1.6rem;align-items:center;
  padding-top:clamp(2rem,4vh,3rem);border-top:1px solid var(--hair-light)}
@media (min-width:900px){.ft__bot{grid-template-columns:auto 1fr auto;gap:2.5rem}}
.brand--ft{margin-right:0}
.brand--ft .brand__mk{color:var(--blush)}
.ft__legal{font-size:var(--t-label);line-height:1.7;color:var(--on-dark-2)}
@media (min-width:900px){.ft__legal{text-align:center}}
.ft__legal small{font-size:.92em;display:block;margin-top:.5rem;opacity:.85;max-width:52ch}
@media (min-width:900px){.ft__legal small{margin-inline:auto}}
.socials{display:flex;gap:.6rem}
.socials a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--hair-light);color:var(--on-dark);
  transition:background .4s,color .4s,transform .5s var(--e-back)}
.socials a svg{width:19px;height:19px}
.socials a:hover{background:var(--on-dark);color:var(--mocha-d);transform:translateY(-3px)}

/* ─── 24. FAB ──────────────────────────────────────────────────────────── */
.fab{position:fixed;right:1rem;bottom:1rem;z-index:100;display:none;
  align-items:center;gap:.6rem;min-height:52px;padding:.9rem 1.3rem;border-radius:100px;
  background:var(--mocha-x);color:var(--on-dark);
  font-size:var(--t-sm);font-weight:600;
  box-shadow:0 14px 32px -12px rgba(48,38,31,.7);
  transform:translateY(150%);transition:transform .6s var(--e-out)}
.fab svg{width:21px;height:21px;flex:none}
.fab.is-on{transform:none}
@media (max-width:900px){.fab{display:flex}}

/* ─── 25. PARALLAX EM CSS PURO ─────────────────────────────────────────── */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:760px){
    [data-par] img{animation:par linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    [data-par-rev] img{animation-direction:reverse}
  }
}
@keyframes par{from{transform:translateY(-3%) scale(1.08)}to{transform:translateY(3%) scale(1.08)}}

/* ─── 26. RESPONSIVO ───────────────────────────────────────────────────── */
/* 1180px: abaixo disto os 7 links + logótipo + pílula deixam de caber com
   folga confortável, e passa-se ao menu de ecrã inteiro. */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .hd .pill--on-dark{display:none}
}
@media (max-width:900px){
  .hero{min-height:min(90svh,760px);grid-template-rows:1fr auto auto}
  .hero__aside{display:none}
  /* No telemóvel o play sai do centro absoluto e entra no fluxo, como uma
     pílula acima do título. Elimina qualquer risco de desenquadramento. */
  .hero__play{
    position:static;translate:none;flex-direction:row;align-items:center;
    /* align-self:end impede que a linha 1fr do grid estique a pílula */
    justify-self:start;align-self:end;width:max-content;
    gap:.85rem;margin-bottom:1.5rem;
    padding:.45rem 1.3rem .45rem .45rem;border-radius:100px;
    background:rgba(255,252,247,.16);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:inset 0 0 0 1.5px rgba(255,252,247,.42);
    animation-delay:.7s;
  }
  .hero__playIc{width:46px;background:var(--on-dark);color:var(--mocha-x);
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero__playIc::before{display:none}
  .hero__playTx{letter-spacing:.12em}
  .hero__txt{max-width:100%}
}
@media (max-width:600px){
    .ba__handle i{width:44px;height:44px}
  .figures li{padding-left:1rem}
  .mapa__card{position:static;margin:.85rem .85rem 0;box-shadow:none;
    background:rgba(255,252,247,.94)}
  .mapa{aspect-ratio:auto;min-height:22rem;place-items:start stretch;
    grid-template-rows:auto 1fr}
  .mapa__load{justify-self:center;align-self:center;padding:1.5rem}
  .ft{padding-bottom:6rem} /* espaço para o FAB */
}

/* ─── 27. MOVIMENTO REDUZIDO ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .reveal,.ln>span,.hero__eyebrow,.hero__tag,.hero__aside,.hero__play,
  .hero__txt .gbadge{
    opacity:1 !important;transform:none !important;clip-path:none !important}
  .grain{animation:none}
  .band__row{animation:none;transform:none}
}

/* ─── 28. IMPRESSÃO ───────────────────────────────────────────────────── */
@media print{
  .hd,.menu,.fab,.grain,.progress,.hero__play,.band,.mapa__load{display:none !important}
  body{background:#fff;color:#000;padding:0}
  .shell{box-shadow:none;border-radius:0}
  .sec--paper,.ft,.tcard{background:#fff !important;color:#000 !important}
  .acc__p{grid-template-rows:1fr !important}
  .acc__b{opacity:1 !important}
  .card__panel{display:block !important}
}