/* Site component classes — copied verbatim from the live homepage's styles.css so new sections match exactly. */

/* Neutral section palette — each band has its own quiet tone while keeping the same typography system. */
#sobre.content-section{background:
  radial-gradient(680px 460px at 8% 8%, rgb(var(--accent-rgb) / 0.06), transparent 64%),
  var(--section-about);--section-base-rgb:27 27 25}
#areas.content-section{background:
  linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 34%),
  var(--section-areas);--section-base-rgb:36 35 31}
#atendimento.content-section{background:
  radial-gradient(640px 460px at 92% 18%, rgb(var(--accent-rgb) / 0.045), transparent 66%),
  var(--section-atendimento);--section-base-rgb:43 42 38}
#locais.content-section{position:relative;overflow:hidden;background:
  radial-gradient(860px 620px at 72% 16%, rgb(var(--accent-rgb) / 0.12), transparent 64%),
  radial-gradient(760px 520px at 4% 88%, rgb(var(--accent-rgb) / 0.055), transparent 68%),
  linear-gradient(180deg, #15130f 0%, #090806 100%);--section-base-rgb:18 16 13}
#locais.content-section::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.035) 1px, transparent 1.3px),
  linear-gradient(135deg, rgb(var(--accent-rgb) / 0.035), transparent 38%, rgb(255 255 255 / 0.012));
  background-size:4px 4px, auto;opacity:0.62;mask-image:radial-gradient(ellipse at 52% 48%, black 0 58%, transparent 100%);-webkit-mask-image:radial-gradient(ellipse at 52% 48%, black 0 58%, transparent 100%)}
#depoimentos.content-section{background:
  radial-gradient(760px 520px at 50% 0%, rgb(var(--accent-rgb) / 0.05), transparent 68%),
  var(--section-depoimentos);--section-base-rgb:48 47 43}
#contato.content-section{background:
  radial-gradient(600px 440px at 12% 88%, rgb(var(--accent-rgb) / 0.055), transparent 66%),
  var(--section-contato);--section-base-rgb:23 23 22}

/* Áreas de atendimento — editorial "fragments of listening" composition */
#areas.content-section{overflow:hidden;max-height:none}
#areas .section-inner{width:min(calc(100% - 28px), 1320px);padding-top:clamp(76px,9svh,112px);padding-bottom:clamp(76px,9svh,112px)}
.areas-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.areas-bg::before{content:"";position:absolute;inset:-15%;opacity:0;transition:opacity 1400ms cubic-bezier(0.22,1,0.36,1);animation:areas-breathe 15s ease-in-out infinite;background:
  radial-gradient(620px 440px at 16% 6%, rgb(var(--accent-rgb) / 0.12), transparent 64%),
  radial-gradient(500px 400px at 20% 10%, rgb(var(--ivory-rgb) / 0.03), transparent 60%),
  radial-gradient(720px 560px at 84% 76%, rgb(var(--accent-rgb) / 0.055), transparent 66%);
  background-size: auto;
}
@keyframes areas-breathe{0%,100%{opacity:0.9;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
.reveal-section.is-visible .areas-bg::before{opacity:0.9}
.areas-corner-glow{position:absolute;left:-10%;bottom:-14%;width:46%;height:52%;background:radial-gradient(ellipse 60% 60% at 40% 60%, rgb(var(--accent-rgb) / 0.06), transparent 74%);filter:blur(30px);opacity:0;transition:opacity 1600ms cubic-bezier(0.22,1,0.36,1) 250ms}
.reveal-section.is-visible .areas-corner-glow{opacity:1}
.areas-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgb(var(--section-base-rgb) / 0.74), transparent 16%, transparent 84%, rgb(var(--section-base-rgb) / 0.74)),
  linear-gradient(90deg, rgb(var(--section-base-rgb) / 0.52), transparent 12%, transparent 88%, rgb(var(--section-base-rgb) / 0.52))}
.areas-margin-line{display:none}
.areas-margin-line--left{left:min(calc((100% - 1360px) / 2 + 4px), 4%)}
.areas-margin-line--right{right:min(calc((100% - 1360px) / 2 + 4px), 4%)}
.areas-curtain{position:absolute;top:-10%;left:50%;width:60%;height:96%;background:radial-gradient(ellipse 50% 55% at 50% 40%, rgb(var(--accent-rgb) / 0.075), transparent 72%);opacity:0;filter:blur(48px);transition:opacity 1500ms cubic-bezier(0.22,1,0.36,1) 200ms;transform:translateX(-50%)}
.reveal-section.is-visible .areas-curtain{opacity:1}
.topo-shape{display:none}
.topo-shape--right{top:-4%;right:-10%;width:54%;height:110%;transform:translateX(20px);mask-image:linear-gradient(120deg, black 45%, transparent 72%);-webkit-mask-image:linear-gradient(120deg, black 45%, transparent 72%)}
.topo-shape--corner{left:-6%;bottom:-8%;width:26%;height:30%;transform:translateY(-14px);transition-delay:300ms}
.topo-line{stroke-width:1.1;transition:opacity 400ms ease}
.topo-line--warm{stroke:rgb(var(--accent-rgb) / 0.15)}
.topo-line--cool{stroke:rgb(var(--ivory-rgb) / 0.06)}
.topo-line:nth-of-type(2){transition-delay:150ms}
.topo-line:nth-of-type(3){transition-delay:300ms}
.topo-line:nth-of-type(4){transition-delay:450ms}
.topo-line:nth-of-type(5){transition-delay:600ms}
.topo-line:nth-of-type(6){transition-delay:750ms}
.topo-node{fill:rgb(var(--accent-rgb) / 0.32)}
.topo-scratch{stroke:rgb(var(--ivory-rgb) / 0.09);stroke-width:1;stroke-linecap:round}
.reveal-section.is-visible .topo-shape{opacity:1;transform:none}
.section-inner,.fragments-field{position:relative;z-index:1}
.areas-intro{max-width:720px;margin-inline:auto;text-align:center}
.areas-intro .section-kicker{display:inline-flex;align-items:center}
.areas-intro .areas-lede{margin-inline:auto}
.areas-lede{margin:6px 0 0;color:rgb(var(--ivory-rgb) / 0.7);font-size:clamp(0.92rem,1vw,1rem);line-height:1.45;max-width:56ch}

.fragments-field{position:relative;margin-top:clamp(10px,1.8vh,20px);display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;gap:clamp(8px,1.1vh,13px) 18px}
.fragments-map{display:none}
.map-line{stroke:var(--accent);stroke-width:0.16;stroke-linecap:round;fill:none;opacity:0.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1200ms cubic-bezier(0.22,1,0.36,1) 500ms}
.map-dot{fill:var(--accent);opacity:0;r:0.4;transition:opacity 600ms cubic-bezier(0.22,1,0.36,1) 900ms}
.reveal-section.is-visible .map-line{stroke-dashoffset:0}
.reveal-section.is-visible .map-dot{opacity:0.55}

.fragment{position:relative;z-index:1;padding:clamp(20px,2.8vh,34px) clamp(26px,2.8vw,42px);border:1px solid rgb(var(--accent-rgb) / 0.2);display:flex;flex-direction:column;gap:8px;background:rgb(var(--background-deep-rgb) / 0.68);box-shadow:0 26px 60px rgb(var(--black-rgb) / 0.22),0 1px 0 rgb(var(--accent-rgb) / 0.06) inset;overflow:hidden;opacity:0;transform:translateY(26px);transition:opacity 680ms cubic-bezier(0.22,1,0.36,1) var(--fd,0ms),transform 680ms cubic-bezier(0.22,1,0.36,1) var(--fd,0ms),border-color 650ms cubic-bezier(0.22,1,0.36,1),box-shadow 650ms cubic-bezier(0.22,1,0.36,1),background-color 650ms cubic-bezier(0.22,1,0.36,1)}
.fragment::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.4),transparent);opacity:0.55}
.fragment::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 18%, rgb(var(--accent-rgb) / 0.09), transparent 58%);opacity:0.3;transition:opacity 700ms cubic-bezier(0.22,1,0.36,1);pointer-events:none}
.reveal-section.is-visible .fragment{opacity:1;transform:none}
.fragment--anxiety{grid-column:1/13;grid-row:1}
.fragment--mood{grid-column:1/7;grid-row:2}
.fragment--tdah{grid-column:7/13;grid-row:2}
.fragment--panic{grid-column:1/13;grid-row:3;flex-direction:row;align-items:center;gap:32px;padding:clamp(24px,3.8vh,40px) clamp(34px,4vw,52px)}
.fragment-art{position:absolute;z-index:0;pointer-events:none;opacity:0.48;mix-blend-mode:screen;filter:saturate(1.2) contrast(1.08);transition:opacity 650ms cubic-bezier(0.22,1,0.36,1),transform 650ms cubic-bezier(0.22,1,0.36,1)}
.fragment-art img{width:100%;height:100%;display:block;object-fit:contain}
.fragment-art--anxiety{right:1%;bottom:-8%;width:min(44%,560px);height:98%;opacity:0.5}
.fragment-art--mood{right:-7%;bottom:-26%;width:42%;height:120%;opacity:0.46}
.fragment-art--tdah{right:-10%;bottom:-22%;width:46%;height:122%;opacity:0.47}
.fragment-art--panic{right:-9%;bottom:-12%;width:58%;height:132%;opacity:0.48}
.fragment-panic-lead{display:flex;align-items:center;gap:22px;flex:0 0 auto;min-width:300px}
.fragment-panic-lead h3{font-size:clamp(1.55rem,2vw,1.95rem)}
.fragment-divider{width:1px;align-self:stretch;background:var(--border);flex:0 0 auto}
.fragment-panic-body{display:flex;flex-direction:column;gap:8px}
.fragment--panic .fragment-body,.fragment--panic .fragment-note{max-width:none}

.fragment-num{color:rgb(var(--accent-rgb) / 0.78);font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:0.02em;transition:transform 500ms cubic-bezier(0.22,1,0.36,1),color 500ms cubic-bezier(0.22,1,0.36,1)}
.fragment-glyph{width:30px;height:30px;color:var(--accent);display:grid;place-items:center;transition:transform 600ms cubic-bezier(0.22,1,0.36,1)}
.fragment-glyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.fragment--anxiety .fragment-glyph{width:32px;height:32px}
.fragment h3{margin:0;color:var(--ivory);font-family:var(--serif);font-weight:400;letter-spacing:-0.025em}
.fragment--anxiety h3{font-size:clamp(1.55rem,2.15vw,1.95rem)}
.fragment--mood h3,.fragment--tdah h3{font-size:clamp(1.42rem,1.85vw,1.72rem)}
.fragment-body{margin:0;max-width:52ch;color:rgb(var(--ivory-rgb) / 0.84);font-size:clamp(0.92rem,0.98vw,1rem);line-height:1.48}
.fragment-note{margin:0;color:var(--accent-soft);font-family:var(--serif);font-style:italic;font-size:clamp(0.98rem,1.06vw,1.1rem);letter-spacing:0.005em;text-shadow:0 0 18px rgb(var(--accent-rgb) / 0.2);transition:color 500ms cubic-bezier(0.22,1,0.36,1),text-shadow 500ms cubic-bezier(0.22,1,0.36,1)}
.fragment--mood .fragment-body,.fragment--mood .fragment-note{max-width:38ch}
.fragment--tdah .fragment-body,.fragment--tdah .fragment-note{max-width:46ch}
.fragment--panic .fragment-panic-body{max-width:66%}
.fragment-num,.fragment-glyph,.fragment h3,.fragment-body,.fragment-note,.fragment-rule,.fragment-panic-lead,.fragment-divider,.fragment-panic-body{position:relative;z-index:1}
.fragment-rule{display:block;margin-top:4px;width:46px;height:4px;border-radius:50% 50% 60% 40% / 60% 40% 60% 40%;background:var(--accent);opacity:0.45;transform:rotate(-1.5deg);transition:width 600ms cubic-bezier(0.22,1,0.36,1)}
.fragment-num::before{content:"";display:inline-block;width:9px;height:1px;margin-right:8px;vertical-align:middle;background:var(--accent);opacity:0.65;border-radius:2px}
.fragment-corner{position:absolute;right:-14%;bottom:-20%;width:240px;height:240px;border:1px solid rgb(var(--accent-rgb) / 0.14);border-radius:48% 52% 55% 45% / 52% 48% 52% 48%;opacity:0.5;pointer-events:none;transition:opacity 650ms cubic-bezier(0.22,1,0.36,1),transform 650ms cubic-bezier(0.22,1,0.36,1)}
.fragment-corner::before{content:"";position:absolute;inset:28px;border:1px solid rgb(var(--accent-rgb) / 0.1);border-radius:52% 48% 45% 55% / 48% 55% 45% 52%}
.fragment-corner::after{content:"";position:absolute;inset:56px;border:1px solid rgb(var(--accent-rgb) / 0.08);border-radius:45% 55% 48% 52% / 55% 45% 55% 45%}
.fragment-giant{position:absolute;right:-8px;bottom:-56px;font-family:var(--serif);font-size:min(240px,32vw);line-height:1;font-weight:400;color:transparent;-webkit-text-stroke:1px rgb(var(--accent-rgb) / 0.09);pointer-events:none;opacity:0.5;transition:opacity 600ms cubic-bezier(0.22,1,0.36,1),transform 600ms cubic-bezier(0.22,1,0.36,1)}
.fragment--anxiety:hover .fragment-giant{opacity:0.75;transform:translateY(-6px)}
.fragment-mark{position:absolute;top:22px;right:24px;width:6px;height:6px;border-radius:50%;background:rgb(var(--accent-rgb) / 0.35);opacity:0.5;box-shadow:0 0 8px rgb(var(--accent-rgb) / 0.25);transition:opacity 500ms cubic-bezier(0.22,1,0.36,1),box-shadow 500ms cubic-bezier(0.22,1,0.36,1)}
#areas .area-card{display:block;padding:0;cursor:pointer;perspective:1400px;min-height:clamp(188px,20vh,230px)}
#areas .fragment--anxiety,#areas .fragment--panic{grid-column:1/13}
#areas .fragment--panic{flex-direction:column;align-items:stretch;gap:0;padding:0}
#areas .fragment--panic .fragment-body,#areas .fragment--panic .fragment-note,#areas .fragment--panic .fragment-panic-body{max-width:52ch}
#areas .fragment--panic h3{font-size:clamp(1.55rem,2.15vw,1.95rem)}
#areas .fragment-card-inner{position:absolute;inset:0}
#areas .fragment-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.1vh,26px) clamp(22px,2.2vw,34px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:rgb(var(--background-deep-rgb) / 0.68);box-shadow:0 0 0 1px rgb(var(--accent-rgb) / 0) inset;transition:box-shadow 1000ms cubic-bezier(0.65,0,0.35,1)}
#areas .fragment-face .fragment-art{opacity:0.52}
#areas .fragment-glyph{display:none}
#areas .fragment-giant{display:none}
#areas .fragment-rule{display:none}
#areas .fragment-face .fragment-num{margin-bottom:4px}
#areas .fragment-face h3{margin-bottom:8px}
#areas .fragment-face .fragment-body{margin-bottom:10px}
#areas .area-card:focus-visible{outline:1px solid rgb(var(--accent-rgb) / 0.78);outline-offset:5px}

/* ── Atendimento: percurso em três etapas ───────────────────────────────────
   Trilho dourado contínuo + cartões tonais. O número é ornamento (fantasma no
   fundo do cartão); o título domina; a descrição respira. */
#atendimento.content-section{min-height:auto}
#atendimento .section-inner{width:min(calc(100% - 56px),1180px);padding-top:clamp(76px,9svh,112px);padding-bottom:clamp(76px,9svh,112px)}
.steps-lede{max-width:44ch;margin:16px auto 0;color:rgb(var(--ivory-rgb) / 0.74);font-family:var(--serif);font-size:clamp(1.02rem,1.15vw,1.18rem);font-style:italic;line-height:1.6;text-wrap:balance}

/* --rail-progress (0→1) é dirigido pelo scroll via JS; 1 por padrão para que a
   seção nasça desenhada sem JS. --rail-y é o eixo do trilho: nós, trilho e
   cartões derivam dele, nunca de valores soltos. */
.steps-flow{--rail-progress:1;--rail-y:12px;--node-size:14px;position:relative;margin:clamp(42px,6vh,72px) 0 0}
/* Halo atrás do percurso — impede que a faixa leia como plano chapado. */
.steps-flow::before{content:"";position:absolute;left:-6%;right:-6%;top:calc(var(--rail-y) - 120px);height:340px;z-index:0;pointer-events:none;background:radial-gradient(58% 100% at 50% 34%,rgb(var(--accent-rgb) / 0.055),transparent 68%)}
/* Textura: mesma trama de pontos de #locais e do rodapé, não um segundo grão.
   O grão global (body::after) continua por cima; aqui só a trama, dissolvida
   nas bordas para não desenhar um retângulo. */
.steps-flow::after{content:"";position:absolute;left:-4%;right:-4%;top:-24px;bottom:-24px;z-index:0;pointer-events:none;background:radial-gradient(circle at 1px 1px,rgb(var(--white-rgb) / 0.028) 1px,transparent 1.2px);background-size:4px 4px;opacity:0.6;mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,black 0 46%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,black 0 46%,transparent 100%)}

/* Trilho: sulco apagado + traço vivo + faísca que percorre o traço já desenhado. */
.steps-rail{container-type:inline-size;position:absolute;left:0;right:0;top:calc(var(--rail-y) - 1px);height:2px;z-index:1;pointer-events:none}
.steps-rail i{position:absolute;inset:0;border-radius:2px}
.steps-rail-groove{background:linear-gradient(90deg,transparent,rgb(var(--ivory-rgb) / 0.07) 14%,rgb(var(--ivory-rgb) / 0.07) 86%,transparent)}
.steps-rail-trace{background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.72) 14%,rgb(var(--accent-rgb) / 0.72) 86%,transparent);box-shadow:0 0 12px rgb(var(--accent-rgb) / 0.3),0 0 3px rgb(var(--accent-rgb) / 0.35);transform:scaleX(var(--rail-progress));transform-origin:left center;will-change:transform}
/* A faísca só existe dentro do trecho já traçado. */
/* clip-path (não overflow:hidden — este recortaria o brilho na altura do trilho). */
.steps-rail-clip{clip-path:inset(-9px calc(100% - var(--rail-progress) * 100%) -9px 0)}
.steps-spark{position:absolute;top:-7px;left:0;width:132px;height:16px;border-radius:16px;opacity:0;background:linear-gradient(90deg,transparent,rgb(var(--accent-soft-rgb) / 0.5) 46%,rgb(var(--white-rgb) / 0.55) 56%,transparent);filter:blur(3px);will-change:transform,opacity}
/* Passa uma vez, quando o traço termina de ser desenhado. */
.steps-flow.is-drawn .steps-spark{animation:steps-spark-sweep 1500ms cubic-bezier(0.33,0,0.2,1) 120ms 1 both}
@keyframes steps-spark-sweep{
  0%{opacity:0;transform:translateX(-140px)}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:translateX(calc(100cqw + 20px))}
}

.steps-band{position:relative;z-index:1;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(18px,2.4vw,34px)}
.step{display:grid;grid-template-rows:auto 1fr}
.step-track{position:relative;height:52px}
/* Acende quando o traço passa pelo nó: 0.18/0.5/0.82 do percurso. */
.step-node{position:absolute;top:calc(var(--rail-y) - var(--node-size) / 2);left:50%;width:var(--node-size);height:var(--node-size);margin-left:calc(var(--node-size) / -2);border:1px solid rgb(var(--accent-rgb) / 0.62);border-radius:50%;background:var(--section-atendimento);box-shadow:0 0 0 5px rgb(var(--accent-rgb) / 0.06);opacity:clamp(0,calc((var(--rail-progress) - var(--np,0)) * 9),1);transform:scale(clamp(0.55,calc(0.55 + (var(--rail-progress) - var(--np,0)) * 4),1));transition:box-shadow var(--duration-hover) var(--ease-motion),border-color var(--duration-hover) var(--ease-motion)}
.step-node::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);opacity:0.88;box-shadow:0 0 10px rgb(var(--accent-rgb) / 0.45)}
/* Pulso do nó: amplitude baixa e ciclo longo, com os três defasados para nunca
   pulsarem juntos. Herda a opacidade do nó, então só respira depois de aceso. */
.step-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgb(var(--accent-rgb) / 0.3),transparent 68%);opacity:0.28;animation:node-breathe 6s var(--ease-ambient) infinite}
.step:nth-child(2) .step-node::after{animation-delay:-2s}
.step:nth-child(3) .step-node::after{animation-delay:-4s}
@keyframes node-breathe{0%,100%{opacity:0.2;transform:scale(0.92)}50%{opacity:0.5;transform:scale(1.06)}}

/* Conector: liga o nó ao topo do cartão, para o cartão pender do trilho em vez
   de flutuar solto abaixo dele. */
.step-track::after{content:"";position:absolute;left:50%;top:calc(var(--rail-y) + var(--node-size) / 2 + 5px);bottom:0;width:1px;margin-left:-0.5px;background:linear-gradient(180deg,rgb(var(--accent-rgb) / 0.34),rgb(var(--accent-rgb) / 0.04));opacity:clamp(0,calc((var(--rail-progress) - var(--np,0)) * 6),1);transition:background var(--duration-hover) var(--ease-motion)}
.step:hover .step-track::after{background:linear-gradient(180deg,rgb(var(--accent-rgb) / 0.6),rgb(var(--accent-rgb) / 0.08))}

.step-card{--mx:50%;--my:50%;position:relative;height:100%;min-height:clamp(300px,34svh,380px);padding:clamp(38px,3.6vw,54px) clamp(28px,2.6vw,42px) clamp(40px,3.8vw,58px);overflow:hidden;border:1px solid rgb(var(--accent-rgb) / 0.16);background:linear-gradient(158deg,rgb(var(--card-panel-rgb) / 0.42),rgb(var(--background-deep-rgb) / 0.62) 58%),radial-gradient(120% 90% at 8% 0%,rgb(var(--accent-rgb) / 0.05),transparent 62%);box-shadow:0 24px 56px rgb(var(--black-rgb) / 0.22),inset 0 1px 0 rgb(var(--white-rgb) / 0.04);opacity:0;transform:translateY(22px);filter:blur(10px);transition:opacity 760ms var(--ease-motion) var(--sd,0ms),transform 760ms var(--ease-motion) var(--sd,0ms),filter 760ms var(--ease-motion) var(--sd,0ms),border-color var(--duration-hover) var(--ease-motion),box-shadow var(--duration-hover) var(--ease-motion)}
.reveal-section.is-visible .step-card{opacity:1;transform:none;filter:blur(0)}
.step-card::before{content:"";position:absolute;top:0;left:0;width:64px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:0.7;transition:width var(--duration-hover) var(--ease-motion),opacity var(--duration-hover) var(--ease-motion)}
/* Canto: um só, no vértice oposto ao fio superior. Quatro cantos viram moldura. */
.step-card::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;z-index:1;pointer-events:none;border-right:1px solid rgb(var(--accent-rgb) / 0.34);border-bottom:1px solid rgb(var(--accent-rgb) / 0.34);opacity:0.5;transform-origin:100% 100%;transition:opacity var(--duration-hover) var(--ease-motion),transform var(--duration-hover) var(--ease-motion)}

/* Numeral fantasma — mesmo idioma do .fragment-giant das áreas. Sangra pela
   borda do cartão (recorte editorial) e a máscara diagonal o dissolve antes de
   chegar à descrição. Cada etapa corta o numeral num ponto diferente, então a
   fileira não lê como três cartões idênticos. */
.step-ghost{position:absolute;z-index:0;font-family:var(--serif);font-size:min(164px,22vw);line-height:0.8;color:transparent;-webkit-text-stroke:1px rgb(var(--accent-rgb) / 0.09);pointer-events:none;opacity:0.34;filter:blur(0.5px);mask-image:linear-gradient(196deg,rgb(0 0 0 / 0.95),rgb(0 0 0 / 0.35) 46%,transparent 74%);-webkit-mask-image:linear-gradient(196deg,rgb(0 0 0 / 0.95),rgb(0 0 0 / 0.35) 46%,transparent 74%);transition:opacity 600ms var(--ease-motion),transform 600ms var(--ease-motion),filter 600ms var(--ease-motion)}
.step:nth-child(1) .step-ghost{right:-26px;bottom:-30px}
.step:nth-child(2) .step-ghost{right:-40px;bottom:-22px;font-size:min(184px,24vw)}
.step:nth-child(3) .step-ghost{right:-16px;bottom:-40px;font-size:min(150px,20vw)}
.step-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(240px 240px at var(--mx) var(--my),rgb(var(--accent-rgb) / 0.12),transparent 70%);transition:opacity 420ms var(--ease-motion)}

.step-index,.step h3,.step-copy{position:relative;z-index:1}
/* Rótulo: régua curta antes, filete que se dissolve depois — o número fica
   entre dois separadores em vez de solto no topo do cartão. */
.step-index{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:rgb(var(--accent-rgb) / 0.86);font-size:10px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;transition:color var(--duration-hover) var(--ease-motion)}
.step-index::before{content:"";flex:0 0 auto;width:16px;height:1px;background:currentColor;opacity:0.8}
.step-index::after{content:"";flex:1 1 auto;max-width:72px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:0.3;transition:max-width var(--duration-hover) var(--ease-motion),opacity var(--duration-hover) var(--ease-motion)}
.step h3{margin:0 0 16px;max-width:18ch;color:var(--ivory);font-family:var(--serif);font-size:clamp(1.55rem,2.1vw,1.95rem);font-weight:400;letter-spacing:-0.03em;line-height:1.12;text-wrap:balance}
.step-copy{margin:0;max-width:34ch;color:rgb(var(--ivory-rgb) / 0.78);font-size:clamp(1rem,1.04vw,1.08rem);line-height:1.78;text-wrap:pretty}

.step-card:hover{border-color:rgb(var(--accent-rgb) / 0.5);box-shadow:0 34px 76px rgb(var(--black-rgb) / 0.32),0 0 0 1px rgb(var(--accent-rgb) / 0.14) inset,inset 0 1px 0 rgb(var(--white-rgb) / 0.06);transform:translateY(-5px) scale(1.008)}
.step-card:hover::before{width:96px;opacity:1}
.step-card:hover::after{opacity:1;transform:scale(1.28)}
.step-card:hover .step-index::after{max-width:108px;opacity:0.5}
.step-card:hover .step-glow{opacity:1}
.step-card:hover .step-ghost{opacity:0.8;filter:blur(0);transform:translateY(-8px)}
.step-card:hover .step-index{color:var(--accent-soft)}
.step:hover .step-node{border-color:rgb(var(--accent-rgb) / 0.92);box-shadow:0 0 0 8px rgb(var(--accent-rgb) / 0.1),0 0 16px rgb(var(--accent-rgb) / 0.3)}

#locais.content-section{min-height:100svh}
#locais .locais-layout{width:min(calc(100% - 56px),1120px);padding-top:clamp(76px,9svh,112px);padding-bottom:clamp(76px,9svh,112px)}
#locais .locais-layout::after{display:none}
#locais .locais-heading{max-width:760px;text-align:left;position:relative;z-index:1}
#locais .locais-heading .section-kicker{margin-bottom:18px;color:var(--accent-soft)}
#locais .locais-heading h2{margin:0;color:var(--ivory);font-size:clamp(2.45rem,3.8vw,3.8rem);line-height:0.98;letter-spacing:-0.035em}
#locais .locais-heading h2 em{color:var(--accent-soft);font-style:italic}
#locais .locais-lede{max-width:65ch;margin:20px 0 0;color:rgb(var(--ivory-rgb) / 0.76);font-size:clamp(0.96rem,1vw,1.04rem);line-height:1.58}
#locais .locais-detail-grid{position:relative;z-index:1;margin-top:clamp(46px,7vh,76px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,34px)}
#locais .locais-detail-card{position:relative;min-height:clamp(580px,68svh,680px);padding:clamp(28px,2.6vw,40px);border:1px solid rgb(var(--accent-rgb) / 0.36);background:linear-gradient(145deg,rgb(12 10 8 / 0.86),rgb(24 20 15 / 0.68));display:flex;flex-direction:column;gap:0;box-shadow:0 28px 72px rgb(var(--black-rgb) / 0.28),inset 0 1px 0 rgb(255 255 255 / 0.035);overflow:hidden}
#locais .locais-detail-card:nth-child(2){border-color:rgb(var(--accent-rgb) / 0.48)}
#locais .loc-card-mark{position:absolute;top:34px;right:32px;width:22px;height:22px;border:1px solid rgb(var(--accent-rgb) / 0.58);border-radius:50%;background:linear-gradient(90deg,transparent 0 45%,rgb(var(--accent-rgb) / 0.72) 47% 100%);opacity:0.92}
#locais .locais-detail-card p.loc-label{margin:0 40px 12px 0;color:var(--accent-soft);font-size:10px;font-weight:700;letter-spacing:0.28em;text-transform:uppercase}
#locais .locais-detail-card h3{margin:0;color:var(--ivory);font-family:var(--serif);font-size:clamp(1.72rem,2.2vw,2.15rem);font-weight:400;letter-spacing:-0.035em}
#locais .loc-card-divider{width:64px;height:1px;margin:22px 0 18px;background:linear-gradient(90deg,var(--accent-soft),transparent)}
#locais .loc-info-list{display:grid;gap:16px;margin:0;color:rgb(var(--ivory-rgb) / 0.82)}
#locais .loc-info-list div{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:24px}
#locais .loc-info-list dt{position:relative;display:flex;align-items:center;gap:12px;color:rgb(var(--ivory-rgb) / 0.48);font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase}
#locais .loc-info-list dt::before{content:"";width:30px;height:30px;border:1px solid rgb(var(--accent-rgb) / 0.2);border-radius:50%;background:radial-gradient(circle,rgb(var(--accent-rgb) / 0.24),rgb(var(--accent-rgb) / 0.06));box-shadow:0 0 18px rgb(var(--accent-rgb) / 0.08);flex:0 0 auto}
#locais .loc-info-list dt::after{content:"";position:absolute;left:8px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:var(--accent-soft);opacity:0.92;mask:center / contain no-repeat;-webkit-mask:center / contain no-repeat}
#locais .loc-info-list div:nth-child(1) dt::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.5A7.5 7.5 0 0 0 4.5 10c0 5.1 6.5 11 7.5 11s7.5-5.9 7.5-11A7.5 7.5 0 0 0 12 2.5Zm0 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.5A7.5 7.5 0 0 0 4.5 10c0 5.1 6.5 11 7.5 11s7.5-5.9 7.5-11A7.5 7.5 0 0 0 12 2.5Zm0 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E")}
#locais .loc-info-list div:nth-child(2) dt::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.6 3.5 4 5.9c-.5.5-.7 1.2-.5 1.9 1.2 5.2 7.5 11.5 12.7 12.7.7.2 1.4 0 1.9-.5l2.4-2.6c.5-.5.5-1.4-.1-1.8l-3.1-2.2c-.5-.4-1.2-.3-1.7.1l-1.4 1.3c-2.2-1.1-3.9-2.8-5-5l1.3-1.4c.4-.5.5-1.2.1-1.7L8.4 3.6c-.4-.6-1.3-.6-1.8-.1Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.6 3.5 4 5.9c-.5.5-.7 1.2-.5 1.9 1.2 5.2 7.5 11.5 12.7 12.7.7.2 1.4 0 1.9-.5l2.4-2.6c.5-.5.5-1.4-.1-1.8l-3.1-2.2c-.5-.4-1.2-.3-1.7.1l-1.4 1.3c-2.2-1.1-3.9-2.8-5-5l1.3-1.4c.4-.5.5-1.2.1-1.7L8.4 3.6c-.4-.6-1.3-.6-1.8-.1Z'/%3E%3C/svg%3E")}
#locais .loc-info-list div:nth-child(3) dt::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Zm.9 5.05v4.05l3.05 1.8-.9 1.45-3.95-2.35V7.8h1.8Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Zm.9 5.05v4.05l3.05 1.8-.9 1.45-3.95-2.35V7.8h1.8Z'/%3E%3C/svg%3E")}
#locais .loc-info-list dd{margin:0;color:rgb(var(--ivory-rgb) / 0.88);font-size:1rem;line-height:1.45}
#locais .loc-map{position:relative;margin-top:clamp(28px,3.8vh,44px);min-height:clamp(270px,34svh,360px);border:1px solid rgb(var(--accent-rgb) / 0.24);background:rgb(var(--black-rgb) / 0.24);overflow:hidden}
#locais .loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(0.86) contrast(0.98) brightness(0.96)}
#locais .loc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:24px}
#locais .loc-button{min-height:42px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgb(var(--ivory-rgb) / 0.2);border-radius:5px;color:var(--ivory);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;transition:background-color var(--duration-hover) var(--ease-motion),border-color var(--duration-hover) var(--ease-motion),color var(--duration-hover) var(--ease-motion),transform var(--duration-hover) var(--ease-motion),box-shadow var(--duration-hover) var(--ease-motion)}
#locais .loc-button--solid{min-width:230px;border-color:rgb(var(--accent-rgb) / 0.42);background:rgb(var(--accent-rgb) / 0.11);color:var(--accent-soft);box-shadow:none}
#locais .loc-button:hover{transform:translateY(-2px);border-color:rgb(var(--accent-rgb) / 0.5);color:var(--ivory)}
#locais .loc-button--solid:hover{background:rgb(var(--accent-rgb) / 0.14);color:var(--ivory);box-shadow:0 14px 28px rgb(var(--black-rgb) / 0.18)}

.quote-band{margin-top:clamp(24px,4.5svh,56px);max-width:820px}
.quote-band blockquote{margin:0 0 28px;color:var(--ivory);font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.3rem);font-style:italic;font-weight:400;letter-spacing:-0.02em;line-height:1.4}
.quote-band cite{display:block;color:rgb(var(--ivory-rgb) / 0.6);font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}

.contact-grid{margin-top:clamp(28px,6vh,72px);display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(300px,0.9fr);gap:clamp(48px,7vw,96px)}
.contact-form{display:grid;gap:clamp(16px,2.6svh,28px)}
.form-field{display:flex;flex-direction:column;gap:10px}
.form-field label{color:rgb(var(--ivory-rgb) / 0.68);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.form-field input,.form-field textarea{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--ivory);font-family:var(--sans);font-size:1rem;resize:vertical;transition:border-color var(--duration-hover) var(--ease-motion)}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--accent)}
.form-consent{display:flex;align-items:flex-start;gap:12px;font-size:0.85rem;color:rgb(var(--ivory-rgb) / 0.76);line-height:1.5}
.contact-info{display:flex;flex-direction:column;gap:clamp(16px,2.6svh,28px);padding:clamp(24px,3svh,36px);border:1px solid var(--border);align-self:start}
.contact-info p{margin:0;color:rgb(var(--ivory-rgb) / 0.72);font-size:0.95rem;line-height:1.7}
.contact-info .emergency{padding-top:24px;border-top:1px solid var(--border);color:var(--accent-soft)}

.site-footer{position:relative;isolation:isolate;border-top:1px solid rgb(var(--accent-rgb) / 0.16);background:radial-gradient(520px 220px at 50% 12%,rgb(var(--accent-rgb) / 0.1),transparent 68%),linear-gradient(180deg,#171411 0%,#080706 100%);color:var(--ivory);overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 1px 1px,rgb(255 255 255 / 0.035) 1px,transparent 1.2px);background-size:4px 4px;opacity:0.5;pointer-events:none}
.footer-inner{width:min(calc(100% - 48px),1180px);margin-inline:auto;padding:clamp(32px,4.8vh,54px) 0 clamp(26px,4vh,44px);display:grid;justify-items:center;text-align:center}
.footer-logo{display:grid;justify-items:center;color:inherit;text-decoration:none}
.footer-logo img{width:clamp(72px,5.2vw,92px);height:auto;display:block;filter:drop-shadow(0 12px 20px rgb(var(--black-rgb) / 0.28));opacity:0.98}
.footer-rule{position:relative;width:clamp(200px,16vw,260px);height:10px;margin:12px 0 14px;background:radial-gradient(circle at calc(50% - 2px) 5px,rgb(var(--accent-soft-rgb) / 0.92) 0 1.6px,transparent 2px)}
.footer-rule::before,.footer-rule::after,.footer-rule{border-radius:999px}
.footer-rule::before,.footer-rule::after{content:"";position:absolute;top:5px;width:42%;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.78))}
.footer-rule::before{left:0}
.footer-rule::after{right:0;transform:scaleX(-1)}
.footer-location-rotator{position:relative;width:min(100%,820px);min-height:54px;display:grid;place-items:center;color:rgb(var(--ivory-rgb) / 0.9);font-size:clamp(0.82rem,0.9vw,0.96rem);font-weight:600;line-height:1.42;text-rendering:geometricPrecision}
.footer-location{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;animation:footer-location-fade 10s ease-in-out infinite}
.footer-location--two{animation-delay:5s}
.footer-location span{display:block;margin-bottom:6px;color:rgb(var(--accent-soft-rgb) / 0.9);font-size:clamp(0.68rem,0.68vw,0.8rem);font-weight:700;letter-spacing:0.18em;text-transform:uppercase}
.footer-social{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:16px}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;color:rgb(var(--ivory-rgb) / 0.9);text-decoration:none;transition:color var(--duration-hover) var(--ease-motion),opacity var(--duration-hover) var(--ease-motion),transform var(--duration-hover) var(--ease-motion)}
.footer-social svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-note{max-width:820px;margin:14px 0 0;color:rgb(var(--ivory-rgb) / 0.68);font-size:clamp(0.76rem,0.8vw,0.88rem);line-height:1.42}
@keyframes footer-location-fade{0%,38%{opacity:1;transform:translateY(0)}45%,95%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}

/* Premium refinements — scroll reveal, hover depth, rhythm */
.content-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.35),transparent)}
.reveal-section{opacity:0;filter:blur(16px);transform:translateY(26px);transition:opacity 1600ms var(--ease-motion),filter 1600ms var(--ease-motion),transform 1600ms var(--ease-motion);will-change:opacity,filter,transform}
.reveal-section.is-visible{opacity:1;filter:blur(0);transform:none}
.reveal-section .section-kicker{position:relative;display:inline-block}
.reveal-section .section-kicker::after{content:"";display:inline-block;width:0;height:1px;margin-left:10px;vertical-align:middle;background:var(--accent);transition:width 700ms var(--ease-motion) 200ms}
.reveal-section.is-visible .section-kicker::after{width:32px}

.locais-detail-card{transition:transform var(--duration-hover) var(--ease-motion),background-color var(--duration-hover) var(--ease-motion),box-shadow var(--duration-hover) var(--ease-motion)}
.locais-detail-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgb(var(--black-rgb) / 0.28)}
.loc-icon{transition:transform var(--duration-hover) var(--ease-motion),background-color var(--duration-hover) var(--ease-motion)}
.locais-detail-card:hover .loc-icon{transform:scale(1.08);background:rgb(var(--accent-rgb) / 0.18)}

.fragment:hover{border-color:rgb(var(--accent-rgb) / 0.45);box-shadow:0 30px 66px rgb(var(--black-rgb) / 0.26),0 0 0 1px rgb(var(--accent-rgb) / 0.1) inset;background:radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0/3px 3px, rgb(var(--background-deep-rgb) / 0.4)}
.fragment:hover::after{opacity:0.8}
.fragment:hover .fragment-num{transform:translateX(4px);color:rgb(var(--accent-rgb) / 0.85)}
.fragment:hover .fragment-glyph{transform:scale(1.08) rotate(-2deg)}
.fragment:hover .fragment-note{color:var(--accent-soft);text-shadow:0 0 26px rgb(var(--accent-rgb) / 0.35)}
.fragment:hover .fragment-rule{width:76px}
.fragment:hover .fragment-mark{opacity:0.9;box-shadow:0 0 14px rgb(var(--accent-rgb) / 0.4)}
.fragment--anxiety:hover .fragment-corner{opacity:0.85;transform:scale(1.05)}
.fragment:hover .fragment-art{opacity:0.58;transform:translateY(-4px)}

.quote-band{position:relative;padding-left:32px;border-left:1px solid var(--border)}
.quote-band blockquote::before{content:"“";position:absolute;left:-6px;top:-30px;color:rgb(var(--accent-rgb) / 0.25);font-family:var(--serif);font-size:5rem;font-style:italic;line-height:1}

.locais-detail-card,.location-card{position:relative;overflow:hidden}
.locais-detail-card::after,.location-card::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgb(var(--accent-rgb) / 0.06),transparent 55%);opacity:0;transition:opacity var(--duration-hover) var(--ease-motion);pointer-events:none}
.locais-detail-card:hover::after,.location-card:hover::after{opacity:1}

.contact-info{transition:border-color var(--duration-hover) var(--ease-motion),box-shadow var(--duration-hover) var(--ease-motion)}
.contact-form:focus-within + .contact-info,.contact-info:hover{border-color:rgb(var(--accent-rgb) / 0.4);box-shadow:0 12px 32px rgb(var(--black-rgb) / 0.18)}
.footer-social a:hover{color:var(--accent-soft);opacity:1;transform:translateY(-2px)}

.button:active{transform:translateY(0) scale(0.985);box-shadow:none}
.text-link{position:relative}
input,textarea,button,a{-webkit-tap-highlight-color:transparent}
.form-field input:focus,.form-field textarea:focus{box-shadow:0 1px 0 0 var(--accent)}

@media (prefers-reduced-motion:reduce){
  .fragment,.map-line,.map-dot,.areas-bg::before,.areas-curtain,.areas-corner-glow,.topo-shape,.locais-detail-card,.button,.contact-info{transition:none;transform:none;filter:none;opacity:1;stroke-dashoffset:0;animation:none}
  /* ── Percurso sem movimento ───────────────────────────────────────────────
     Não é a versão animada com as animações desligadas: o que o movimento
     carregava (sequência, foco, profundidade) passa a ser carregado por
     gradiente, anel e sombra estáticos. Nada aqui depende de tempo. */

  /* A seção aparece por crossfade puro — sem deslocamento nem blur. */
  #atendimento.reveal-section{transform:none;filter:none;transition:opacity 220ms linear}
  #atendimento.reveal-section.is-visible{transform:none;filter:none}
  /* O filete do kicker animava a largura (propriedade de layout) por 700ms.
     Sem movimento ele já nasce no comprimento final. */
  .reveal-section .section-kicker::after{width:32px;transition:none}

  /* Trilho: gradiente fixo, forte no centro e dissolvido nas pontas. Substitui
     o desenho progressivo — a linha lê como um percurso completo, não como uma
     régua uniforme. */
  .steps-flow{--rail-progress:1}
  .steps-rail-trace{transition:none;transform:none;background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.34) 12%,rgb(var(--accent-rgb) / 0.92) 50%,rgb(var(--accent-rgb) / 0.34) 88%,transparent);box-shadow:0 0 14px rgb(var(--accent-rgb) / 0.26)}
  .steps-rail-clip,.steps-spark,.steps-flow.is-drawn .steps-spark{display:none}
  /* Halo estático um pouco mais presente, já que não há faísca a percorrer. */
  .steps-flow::before{background:radial-gradient(58% 100% at 50% 34%,rgb(var(--accent-rgb) / 0.08),transparent 68%)}

  /* Nó: anel duplo em vez de pulso. Aro externo fixo + miolo com brilho constante. */
  .step-node{transition:none;transform:none;opacity:1;border-color:rgb(var(--accent-rgb) / 0.75);box-shadow:0 0 0 1px rgb(var(--accent-rgb) / 0.16),0 0 0 5px rgb(var(--accent-rgb) / 0.05)}
  .step-node::before{box-shadow:0 0 12px rgb(var(--accent-rgb) / 0.5)}
  .step-node::after{animation:none;transform:none;inset:-8px;opacity:1;border:1px solid rgb(var(--accent-rgb) / 0.3);border-radius:50%;background:none}

  /* Conector sempre visível: o vínculo nó→cartão não pode depender do traçado. */
  .step-track::after{opacity:1;transition:background 90ms ease-out}

  /* Cartão: profundidade constante. Sem lift, sem escala, sem blur de entrada. */
  .step-card{transform:none;filter:none;opacity:1;border-color:rgb(var(--accent-rgb) / 0.26);box-shadow:0 22px 52px rgb(var(--black-rgb) / 0.26),inset 0 1px 0 rgb(var(--white-rgb) / 0.05);transition:border-color 90ms ease-out,box-shadow 90ms ease-out}
  .step-card::before,.step-card::after,.step-index,.step-index::after,.step-glow,.step-ghost{transition:none}
  /* Feedback de hover puramente tonal: borda, fundo e sombra mudam de imediato. */
  .step-card:hover,.step-card:hover .step-ghost{transform:none}
  .step-card:hover{border-color:rgb(var(--accent-rgb) / 0.62);box-shadow:0 22px 52px rgb(var(--black-rgb) / 0.3),0 0 0 1px rgb(var(--accent-rgb) / 0.2) inset,inset 0 1px 0 rgb(var(--white-rgb) / 0.07)}
  .step-card:hover::after{transform:none;opacity:1}
  .step-card:hover .step-index::after{max-width:72px}
  /* O glow deixa de seguir o ponteiro e vira um banho fixo, mais claro no topo. */
  .step-glow{background:linear-gradient(180deg,rgb(var(--accent-rgb) / 0.09),transparent 62%)}
  .step-card:hover .step-glow{opacity:1}
  .step-ghost{transform:none;opacity:0.34}
  .step-card:hover .step-ghost{opacity:0.46;filter:blur(0.5px)}
  /* Reveal de seção continua animando, só com menos deslocamento/blur. */
  .reveal-section{transform:translateY(10px);filter:blur(2px)}
  .reveal-section.is-visible{transform:none;filter:blur(0)}
  .footer-location{position:static;animation:none;opacity:1;filter:none;transform:none}
  .footer-location-rotator{gap:10px}
}

@media (max-width:940px){
  .locations-grid,.contact-grid{grid-template-columns:1fr}
  .fragments-map{display:none}
  .areas-margin-line,.areas-curtain,.areas-corner-glow,.topo-shape{display:none}
  .fragment-corner{display:none}
  .fragment-art{opacity:0.14}
  .fragment-art--anxiety,.fragment-art--mood,.fragment-art--tdah,.fragment-art--panic{right:-10%;bottom:-18%;width:58%;height:88%}
  .fragments-field{grid-template-columns:1fr;grid-template-rows:none;gap:24px}
  .fragment--anxiety,.fragment--mood,.fragment--tdah,.fragment--panic{grid-column:1;grid-row:auto}
  .fragment--panic{flex-direction:column;gap:16px}
  .fragment--panic h3{min-width:0}
  .locais-detail-grid{grid-template-columns:1fr}
  /* Mobile: o percurso vira timeline vertical — mesmo trilho, mesmo desenho no
     scroll, nós ancorados ao eixo --rail-y. */
  .steps-band{grid-template-columns:1fr}
  .steps-flow{--rail-y:12px}
  .steps-flow::before{left:-14%;right:-14%;top:8%;height:56%}
  .steps-rail{container-type:size;top:0;bottom:0;left:calc(var(--rail-y) - 1px);right:auto;width:2px;height:auto}
  .steps-rail-groove{background:linear-gradient(180deg,transparent,rgb(var(--ivory-rgb) / 0.07) 5%,rgb(var(--ivory-rgb) / 0.07) 95%,transparent)}
  .steps-rail-trace{background:linear-gradient(180deg,transparent,rgb(var(--accent-rgb) / 0.72) 5%,rgb(var(--accent-rgb) / 0.72) 95%,transparent);transform:scaleY(var(--rail-progress));transform-origin:center top}
  .steps-rail-clip{clip-path:inset(0 -9px calc(100% - var(--rail-progress) * 100%) -9px)}
  .steps-spark{top:0;left:-7px;width:16px;height:132px;background:linear-gradient(180deg,transparent,rgb(var(--accent-soft-rgb) / 0.5) 46%,rgb(var(--white-rgb) / 0.55) 56%,transparent)}
  @keyframes steps-spark-sweep{
    0%{opacity:0;transform:translateY(-140px)}
    18%{opacity:1}
    82%{opacity:1}
    100%{opacity:0;transform:translateY(calc(100cqh + 20px))}
  }
  .step-track{height:34px}
  .step-node{top:auto;bottom:2px;left:var(--rail-y);margin-left:calc(var(--node-size) / -2)}
  /* Conector vira horizontal: sai do nó e encosta na borda do cartão. */
  .step-track::after{left:calc(var(--rail-y) + var(--node-size) / 2 + 5px);top:auto;bottom:calc(2px + var(--node-size) / 2);width:auto;right:calc(100% - 40px);height:1px;margin-left:0;background:linear-gradient(90deg,rgb(var(--accent-rgb) / 0.34),rgb(var(--accent-rgb) / 0.06))}
  .step:hover .step-track::after{background:linear-gradient(90deg,rgb(var(--accent-rgb) / 0.6),rgb(var(--accent-rgb) / 0.1))}
  .step-card{margin-left:40px}
  .step h3{max-width:24ch}
  .step-copy{max-width:56ch}
  #locais .locais-heading{max-width:680px}
  #locais .locais-detail-card{min-height:auto}
}

/* ============================================================
   Warmth & depth pass — organic ambience, card materiality,
   microinteractions, CTA and trust clarity.
   ============================================================ */

/* Organic ambient glow per section — subtle, single accent hue, breathing. */
#sobre,#atendimento,#depoimentos,#contato{overflow:hidden}
#sobre::after,#atendimento::after,#depoimentos::after,#contato::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  transition:opacity 1600ms cubic-bezier(0.22,1,0.36,1);
  animation:ambient-breathe 18s ease-in-out infinite;
}
.reveal-section.is-visible::after{opacity:1}
#sobre::after{background:radial-gradient(560px 420px at 8% 12%, rgb(var(--accent-rgb) / 0.08), transparent 62%)}
#atendimento::after{background:radial-gradient(640px 460px at 92% 20%, rgb(var(--accent-rgb) / 0.06), transparent 64%)}
#depoimentos::after{background:radial-gradient(700px 500px at 50% 0%, rgb(var(--accent-rgb) / 0.07), transparent 66%)}
#contato::after{background:radial-gradient(600px 460px at 10% 90%, rgb(var(--accent-rgb) / 0.07), transparent 64%)}
@keyframes ambient-breathe{0%,100%{transform:scale(1);opacity:0.85}50%{transform:scale(1.04);opacity:1}}
#sobre .section-inner,#atendimento .section-inner,#depoimentos .section-inner,#contato .section-inner{position:relative;z-index:1}

/* Card materiality — tinted shadow, top highlight hairline, lift on hover. */
.locais-detail-card,.quote-band,.contact-info{position:relative}
.locais-detail-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / 0.35),transparent);
  opacity:0.6;
}
.locais-detail-card{box-shadow:0 24px 48px rgb(var(--black-rgb) / 0.18)}
.locais-detail-card:hover{box-shadow:0 30px 64px rgb(var(--black-rgb) / 0.3),0 0 0 1px rgb(var(--accent-rgb) / 0.12)}

/* Pointer-tracked glow — set via JS custom properties --mx/--my (falls back gracefully if unset). */
.locais-detail-card,.fragment{
  --mx:50%;--my:50%;
}
.locais-detail-card::after,.fragment .fragment-glow{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity 420ms var(--ease-motion);
  background:radial-gradient(240px 240px at var(--mx) var(--my), rgb(var(--accent-rgb) / 0.14), transparent 70%);
}
.locais-detail-card:hover::after,.fragment:hover .fragment-glow{opacity:1}
.locais-detail-card > *{position:relative;z-index:1}
#locais .locais-detail-card{box-shadow:0 28px 72px rgb(var(--black-rgb) / 0.28),inset 0 1px 0 rgb(255 255 255 / 0.035)}
#locais .locais-detail-card:hover{box-shadow:0 34px 84px rgb(var(--black-rgb) / 0.36),0 0 0 1px rgb(var(--accent-rgb) / 0.16);transform:translateY(-4px);border-color:rgb(var(--accent-rgb) / 0.64)}
#locais .locais-detail-card::before{display:block;top:auto;height:2px;bottom:0;background:linear-gradient(90deg,var(--accent-soft),rgb(var(--accent-rgb) / 0.34),transparent);opacity:0.78}
#locais .locais-detail-card::after{background:radial-gradient(280px 220px at var(--mx) var(--my),rgb(var(--accent-rgb) / 0.16),transparent 70%);opacity:0}
#locais .locais-detail-card:hover::after{opacity:1}

/* Quote section: give the pull-quote a real card presence instead of a bare hairline. */
.quote-band{padding:44px 40px 44px 44px;border:1px solid rgb(var(--accent-rgb) / 0.3);background:rgb(255 255 255 / 0.02);box-shadow:0 24px 56px rgb(var(--black-rgb) / 0.2)}
.quote-band blockquote::before{top:-14px}

/* Contact info card gets the same lifted materiality as location cards. */
.contact-info{box-shadow:0 20px 44px rgb(var(--black-rgb) / 0.16)}

/* Emergency notice: raise trust/urgency legibility with a tinted panel, not just a hairline. */
.contact-info .emergency{margin-top:4px;padding:16px 18px;border-top:0;border-radius:8px;background:rgb(var(--accent-rgb) / 0.08);border:1px solid rgb(var(--accent-rgb) / 0.18)}

/* Trust micro-strip under the location cards: response-time / modality clarity. */
.locais-trust{margin-top:28px;display:flex;gap:28px;flex-wrap:wrap;color:rgb(var(--ivory-rgb) / 0.6);font-size:0.9rem}
.locais-trust strong{color:var(--accent-soft);font-weight:600}

/* CTA clarity: primary booking action gets a soft glow ring so it reads as THE action. */
.button{position:relative}
.button::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / 0.12);
  transition:opacity var(--duration-hover) var(--ease-motion);
}
.button:hover::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  #sobre::after,#atendimento::after,#depoimentos::after,#contato::after{animation:none}
}

@media (max-width:620px){
  .quote-band{padding:32px 24px 32px 28px}
  .locais-trust{gap:16px;font-size:0.8rem}
  #locais .locais-layout{width:min(calc(100% - 32px),1280px);padding-top:58px;padding-bottom:68px}
  #locais .locais-heading h2{font-size:clamp(2.75rem,15vw,3.5rem)}
  #locais .locais-lede{font-size:0.98rem}
  #locais .locais-detail-grid{margin-top:38px;gap:18px}
  #locais .locais-detail-card{padding:28px 22px}
  #locais .loc-info-list dt::before{width:26px;height:26px}
  #locais .loc-card-mark{top:28px;right:22px;width:17px;height:17px}
  #locais .loc-info-list div{grid-template-columns:1fr;gap:6px}
  #locais .loc-actions{display:grid;grid-template-columns:1fr;padding-top:26px}
  #locais .loc-button,#locais .loc-button--solid{width:100%;min-width:0}
}

/* Short-viewport compression: keeps capped sections within 100svh */
@media (min-width:1025px) and (max-height:900px){
  #areas .section-inner{padding-top:clamp(76px,9svh,112px);padding-bottom:clamp(76px,9svh,112px)}
  #areas .area-card{min-height:clamp(252px,28vh,270px)}
  #areas .fragment-face{padding:clamp(14px,1.8vh,20px) clamp(18px,1.8vw,28px);gap:5px}
  #areas .fragment-face .fragment-num{margin-bottom:2px}
  #areas .fragment-face h3{margin-bottom:5px}
  #areas .fragment-face .fragment-body{margin-bottom:7px}
  #areas .areas-intro{max-width:640px}
  .fragments-field{margin-top:clamp(6px,1.2svh,16px);gap:clamp(5px,0.8svh,12px) 20px}
  .fragment{padding:clamp(8px,1.3svh,20px) clamp(18px,2vw,28px)}
  .fragment--panic{padding:clamp(12px,2svh,24px) clamp(24px,3vw,36px)}
  #areas .fragment h3{font-size:clamp(1.25rem,1.6vw,1.52rem)}
  #areas .fragment-body{font-size:0.82rem;line-height:1.38}
  #areas .fragment-note{font-size:0.9rem}
  #areas .fragment-glyph{width:24px;height:24px}
  #areas .fragment-rule{height:3px;margin-top:2px}
  .areas-lede{margin-top:4px;line-height:1.45}
}

/* Timeline vertical sem movimento: o gradiente centro-forte precisa ser
   redeclarado aqui porque o bloco responsivo vem depois do de reduced-motion. */
@media (prefers-reduced-motion:reduce) and (max-width:940px){
  .steps-rail-trace{background:linear-gradient(180deg,transparent,rgb(var(--accent-rgb) / 0.34) 8%,rgb(var(--accent-rgb) / 0.92) 50%,rgb(var(--accent-rgb) / 0.34) 92%,transparent);transform:none}
}

/* Section rhythm and quieter backgrounds. */
#atendimento.content-section {
  background: var(--section-atendimento);
}

#atendimento::after,
#atendimento .steps-flow::before {
  display: none;
}

/* FAQ gets the same entrance and exit breathing room as "Onde atendo". */
#faq .faq-inner {
  padding-top: clamp(76px, 9svh, 112px);
  padding-bottom: clamp(76px, 9svh, 112px);
}

@media (max-width: 620px) {
  #faq .faq-inner {
    padding-top: 58px;
    padding-bottom: 68px;
  }
}

/* Shared typographic hierarchy — every primary section follows the same
   scale, regardless of its individual layout. */
:root {
  --type-section-kicker: 11px;
  --type-section-title: clamp(2.55rem, 3.6vw, 3.7rem);
  --type-section-lede: clamp(0.98rem, 1vw, 1.08rem);
}

#sobre .section-kicker,
#areas .section-kicker,
#atendimento .section-kicker,
#locais .section-kicker,
#faq .section-kicker {
  font-size: var(--type-section-kicker);
}

#sobre .about-title,
#areas .section-heading h2,
#atendimento .section-heading h2,
#locais .locais-heading h2,
#faq .section-heading h2 {
  font-size: var(--type-section-title);
  line-height: 1.03;
}

#sobre .about-intro,
#areas .areas-lede,
#atendimento .steps-lede,
#locais .locais-lede,
#faq .faq-lede {
  font-size: var(--type-section-lede);
  line-height: 1.6;
}

@media (max-width: 620px) {
  :root {
    --type-section-title: clamp(2.35rem, 10vw, 3.05rem);
    --type-section-lede: 0.98rem;
  }
}

/* ── "Como é o cuidado" — closing manifesto ─────────────────────────
   Follows the editorial vocabulary of #sobre / #areas: an ambient layer
   (glow + orbital ring + drawn seam), a centered pull-quote as the
   section's gravity point, then three tenets drawn from the quote. */
.cuidado-section{position:relative;overflow:hidden}
.cuidado-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

.cuidado-ambient{position:absolute;inset:0;z-index:0;pointer-events:none}
.cuidado-glow{position:absolute;left:50%;top:8%;width:60%;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse 55% 55% at 50% 45%,rgb(var(--accent-rgb) / 0.09),transparent 70%);filter:blur(30px);opacity:0;transition:opacity 1800ms var(--ease-motion) 200ms}
.reveal-section.is-visible .cuidado-glow{opacity:1}
.cuidado-orbit{position:absolute;left:50%;top:50%;width:min(620px,72vw);height:auto;transform:translate(-50%,-50%) scale(0.94);stroke:rgb(var(--accent-rgb) / 0.15);stroke-width:1;fill:none;opacity:0;transition:opacity 1900ms var(--ease-motion) 260ms,transform 1900ms var(--ease-motion) 260ms}
.reveal-section.is-visible .cuidado-orbit{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cuidado-orbit-inner{stroke:rgb(var(--accent-rgb) / 0.1);stroke-dasharray:2 6}
.cuidado-seam{position:absolute;top:0;bottom:0;left:12%;width:clamp(30px,2.6vw,48px);height:100%}
.cuidado-seam-line{stroke:rgb(var(--accent-rgb) / 0.3);fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2400ms var(--ease-motion) 340ms}
.reveal-section.is-visible .cuidado-seam-line{stroke-dashoffset:0}

.cuidado-manifesto{position:relative;margin:clamp(26px,4.5svh,52px) 0 0;max-width:900px;padding:0 clamp(0px,3vw,40px)}
.cuidado-quote-mark{display:block;height:0.5em;color:rgb(var(--accent-rgb) / 0.3);font-family:var(--serif);font-style:italic;font-size:clamp(4rem,9vw,6.5rem);line-height:0.6}
.cuidado-manifesto blockquote{margin:clamp(8px,1.6vh,20px) 0 0;color:var(--ivory);font-family:var(--serif);font-size:clamp(1.7rem,3.1vw,2.7rem);font-style:italic;font-weight:400;letter-spacing:-0.02em;line-height:1.32;text-wrap:balance}
.cuidado-manifesto blockquote em{color:var(--accent-soft);font-style:italic}
.cuidado-rule{display:block;width:clamp(56px,7vw,96px);height:1px;margin:clamp(24px,3.4vh,38px) auto 0;background:var(--gold-lux-soft)}
.cuidado-cite{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.cuidado-cite-name{color:var(--ivory);font-family:var(--serif);font-size:1.3rem;letter-spacing:-0.02em}
.cuidado-cite-role{color:var(--accent-soft);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase}

.cuidado-tenets{list-style:none;margin:clamp(40px,6vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);width:min(100%,940px);text-align:left}
.cuidado-tenet{position:relative;padding-top:22px;border-top:1px solid var(--border);opacity:0;transform:translateY(16px);transition:opacity 900ms var(--ease-motion) calc(360ms + var(--ti) * 130ms),transform 900ms var(--ease-motion) calc(360ms + var(--ti) * 130ms)}
.reveal-section.is-visible .cuidado-tenet{opacity:1;transform:none}
.cuidado-tenet-mark{display:block;width:34px;color:rgb(var(--accent-rgb) / 0.6)}
.cuidado-tenet-mark svg{display:block;width:100%;height:auto}
.cuidado-tenet-title{margin:14px 0 8px;color:var(--ivory);font-family:var(--serif);font-size:1.28rem;letter-spacing:-0.01em}
.cuidado-tenet-copy{margin:0;color:rgb(var(--ivory-rgb) / 0.66);font-size:0.96rem;line-height:1.6}

@media (max-width:860px){
  .cuidado-seam{display:none}
  .cuidado-orbit{width:min(520px,118vw);opacity:0.6}
  .cuidado-tenets{grid-template-columns:1fr;gap:24px;text-align:center;width:min(100%,460px)}
  .cuidado-tenet-mark{margin:0 auto}
}

@media (prefers-reduced-motion:reduce){
  .cuidado-glow{opacity:1;transition:none}
  .cuidado-orbit{opacity:1;transform:translate(-50%,-50%);transition:none}
  .cuidado-seam-line{stroke-dashoffset:0;transition:none}
  .cuidado-tenet{opacity:1;transform:none;transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — legibilidade, tap targets e feedback de toque
   Só telefones (<=620px). Não altera desktop. Mantém identidade dark+gold.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  /* — Áreas: coluna única real + cartões que crescem com o conteúdo —
     Antes: grid de 12 colunas não colapsava (cartões 02/03 meia-largura) e as
     faces `position:absolute` + min-height fixo cortavam o texto. */
  #areas .fragments-field {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }

  #areas .fragment--anxiety,
  #areas .fragment--mood,
  #areas .fragment--tdah,
  #areas .fragment--panic {
    grid-column: 1;
    grid-row: auto;
  }

  #areas .area-card {
    min-height: 0;
    overflow: hidden;
  }

  #areas .fragment-card-inner {
    position: relative;
    inset: auto;
    height: auto;
  }

  #areas .fragment-face {
    position: relative;
    inset: auto;
    min-height: 0;
  }

  #areas .area-card::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.55);
    box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.4);
    z-index: 3;
    pointer-events: none;
  }

  .about-intro {
    font-size: 1rem;
    line-height: 1.62;
  }

  #areas .fragment-body {
    font-size: 1rem;
    line-height: 1.55;
  }

  .facet-body {
    line-height: 1.6;
  }

  #locais .locais-lede {
    font-size: 1rem;
    line-height: 1.6;
  }

  #locais .locais-detail-grid {
    grid-template-columns: 1fr;
  }

  /* — Facets (Sobre): coluna centralizada e alta -> linha compacta alinhada —
     Ícone à esquerda, texto à esquerda: metade da altura e leitura mais limpa. */
  .about-facets .facet {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 18px 4px;
  }

  .about-facets .facet-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
  }

  .about-facets .facet-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .about-facets .facet-title {
    margin: 0 0 4px;
    font-size: 1.12rem;
    line-height: 1.22;
    text-align: left;
  }

  .about-facets .facet-body p {
    margin: 0;
    max-width: none;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Folha decorativa tira o foco no formato compacto */
  .about-facets .facet-leaf {
    display: none;
  }

  /* Retrato: remove o vazio acima da imagem. O min-height de tela cheia
     (.about-layout .about-portrait, especificidade 0,2,0) vencia os
     overrides mobile e, com align:flex-end, deixava ~340px vazios no topo. */
  .about-layout .about-portrait {
    min-height: 0;
  }

  /* Centraliza o bloco Sobre: o `margin-right:0` do breakpoint de 940px fazia
     o margin-inline:auto jogar todo o espaço livre pra esquerda (bloco ia pro
     lado). Volta a centralizar de verdade. */
  .about-layout {
    margin-inline: auto;
  }

  /* Rodapé: 8.5px era ilegível */
  .footer-note {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* — Tap targets >= 44px (WCAG / usabilidade de toque) — */
  .footer-social a {
    width: 44px;
    height: 44px;
  }

  #locais .loc-button,
  #locais .loc-button--solid {
    min-height: 46px;
  }

  .wordmark {
    min-height: 44px;
  }

  .nav-link {
    padding-block: 6px;
  }
}

/* — Feedback de toque: dispositivos sem hover ganham estado :active — */
@media (hover: none) {
  .floating-card:active,
  .area-card:active,
  .step-card:active,
  .loc-button:active,
  .button:active,
  .social-dock-btn:active,
  .wordmark:active {
    transform: scale(0.98);
    opacity: 0.94;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }

  /* Cartão de área: leve recuo no toque, sem competir com o flip 3D */
  #areas .area-card:active .fragment-card-inner {
    filter: brightness(1.04);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ — dúvidas frequentes (accordion nativo <details>, acessível)
   ════════════════════════════════════════════════════════════════════════ */
/* Permite animar height:auto no abrir (Chrome moderno); ignorado nos demais. */
:root {
  interpolate-size: allow-keywords;
}

.faq-inner {
  width: min(calc(100% - 48px), 1120px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Coluna esquerda: título + apoio + atalho (estático, rola junto com a lista) */
.faq-aside {
  position: static;
}

.faq-aside .faq-heading {
  text-align: left;
  margin: 0;
}

.faq-aside .faq-heading .section-kicker {
  justify-content: flex-start;
}

.faq-lede {
  margin: clamp(16px, 2vh, 22px) 0 0;
  max-width: 40ch;
  color: rgb(var(--ivory-rgb) / 0.7);
  font-size: 1rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.faq-help {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(20px, 2.6vh, 28px);
  color: var(--accent-soft);
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.3);
  padding-bottom: 4px;
  transition: color var(--duration-hover) var(--ease-motion),
    border-color var(--duration-hover) var(--ease-motion);
}

.faq-help svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (any-hover: hover) {
  .faq-help:hover,
  .faq-help:focus-visible {
    color: var(--white);
    border-color: var(--accent);
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cada item vira um cartão hoverável */
.faq-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgb(var(--accent-rgb) / 0.16);
  border-radius: 14px;
  background: rgb(var(--ivory-rgb) / 0.015);
  transition: background-color 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    border-color 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.18s ease;
}

/* Abertura/fechamento com altura animada (Chrome moderno; degrada p/ instantâneo) */
.faq-item::details-content {
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    content-visibility 0.45s allow-discrete;
}

.faq-item[open]::details-content {
  height: auto;
}

/* Micro-interação: filete dourado que cresce do centro no hover */
.faq-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-lux-soft);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}

/* Estado aberto: borda mais forte, brilho suave, fundo distinto */
.faq-item[open] {
  border-color: rgb(var(--accent-rgb) / 0.42);
  background: rgb(var(--accent-rgb) / 0.045);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.12) inset,
    0 14px 34px -18px rgb(var(--black-rgb) / 0.5),
    0 0 22px rgb(var(--accent-rgb) / 0.1);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(20px, 2.6vh, 26px) clamp(18px, 2vw, 24px);
  min-height: 48px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  transition: color var(--duration-hover) var(--ease-motion);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.4);
}

.faq-item summary:focus-visible {
  outline: none;
}

.faq-item summary:focus-visible .faq-mark {
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.16);
  border-radius: 50%;
}

.faq-item summary:hover,
.faq-item[open] summary {
  color: var(--accent-soft);
}

/* Ícone "+" em dois filetes dourados; abre girando para "×" */
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.faq-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Hover (fechado): leve crescimento do ícone */
.faq-item:not([open]) summary:hover .faq-mark {
  transform: scale(1.1);
}

/* Aberto: "+" -> "×" */
.faq-item[open] .faq-mark {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 clamp(18px, 2vw, 24px) clamp(20px, 2.6vh, 26px);
  max-width: 62ch;
}

.faq-answer p {
  margin: 0;
  color: rgb(var(--ivory-rgb) / 0.74);
  font-size: 1rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.faq-item[open] .faq-answer {
  animation: faq-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (any-hover: hover) {
  .faq-item:hover {
    background: rgb(var(--accent-rgb) / 0.04);
    border-color: rgb(var(--accent-rgb) / 0.34);
  }

  .faq-item:hover::after {
    transform: scaleX(1);
  }
}

/* Feedback de toque/clique: leve recuo */
.faq-item:active {
  transform: scale(0.99);
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA final — chamada para agendamento
   ════════════════════════════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 96%);
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgb(var(--accent-rgb) / 0.12),
    transparent 66%
  );
}

.cta-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 720px);
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(24px, 5vh, 56px);
}

.cta-inner .section-kicker {
  justify-content: center;
}

.cta-title {
  margin: 14px 0 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cta-title em {
  background: var(--gold-lux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.cta-lede {
  margin: clamp(16px, 2.4vh, 22px) auto 0;
  max-width: 52ch;
  color: rgb(var(--ivory-rgb) / 0.72);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.cta-actions {
  margin-top: clamp(24px, 3.4vh, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
}

.cta-button-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Alinha ao CTA primário do hero: pílula gradiente elevada (ação primária
     consistente no site inteiro), em vez do fill chapado do .button base. */
  border: 0;
  border-radius: 999px;
  padding: 0 34px;
  background: linear-gradient(135deg, #e1cdc4, #d3b5a7 55%, #b89689);
  color: #111111;
  text-transform: none;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.18) inset,
    0 10px 24px -8px rgb(var(--accent-rgb) / 0.5),
    0 18px 50px -12px rgb(0 0 0 / 0.55);
}

@media (any-hover: hover) {
  .cta-button-primary:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.05);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.24) inset,
      0 16px 34px -8px rgb(var(--accent-rgb) / 0.65),
      0 26px 66px -12px rgb(0 0 0 / 0.6);
  }
}

.cta-button-primary:active {
  transform: scale(0.98);
}

.cta-button-primary svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-button-ghost {
  color: var(--accent-soft);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.3);
  padding-bottom: 3px;
  transition: color var(--duration-hover) var(--ease-motion),
    border-color var(--duration-hover) var(--ease-motion);
}

@media (any-hover: hover) {
  .cta-button-ghost:hover,
  .cta-button-ghost:focus-visible {
    color: var(--white);
    border-color: var(--accent);
  }
}

/* — FAQ + CTA no mobile — */
@media (max-width: 940px) {
  .faq-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 36px);
  }

  .faq-aside {
    position: static;
    top: auto;
  }
}

@media (max-width: 620px) {
  .faq-inner,
  .cta-inner {
    width: calc(100% - 36px);
  }

  .faq-item summary {
    font-size: 1.06rem;
  }

  .cta-actions {
    flex-direction: column;
  }

  .cta-button-primary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::after,
  .faq-item::details-content,
  .faq-mark,
  .faq-help,
  .cta-button-ghost {
    transition: none;
  }

  .faq-item:active {
    transform: none;
  }

  .faq-item[open] .faq-answer {
    animation: none;
  }
}

/* Mobile polish for inner sections. Keeps desktop layout untouched. */
@media (max-width: 620px) {
  #atendimento .section-inner {
    padding-top: 58px;
    padding-bottom: 68px;
  }

  #areas .section-inner {
    width: calc(100% - 32px);
    padding-top: 58px;
    padding-bottom: 68px;
  }

  #areas .areas-bg,
  #areas .fragments-map,
  #areas .areas-margin-line,
  #areas .topo-shape {
    display: none;
  }

  #areas .areas-intro {
    max-width: none;
    text-align: left;
  }

  #areas .areas-intro .section-kicker {
    justify-content: flex-start;
  }

  #areas .section-heading h2 {
    font-size: clamp(2.18rem, 10vw, 2.82rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  #areas .areas-lede {
    margin-top: 18px;
    max-width: 36ch;
    font-size: 0.98rem;
    line-height: 1.62;
    text-align: left;
  }

  #areas .fragments-field {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #areas .fragment {
    min-height: 0;
    padding: 0;
    border-radius: 10px;
    border-color: rgb(var(--accent-rgb) / 0.18);
    background:
      linear-gradient(145deg, rgb(var(--ivory-rgb) / 0.045), rgb(var(--ivory-rgb) / 0.012)),
      rgb(var(--background-deep-rgb) / 0.5);
  }

  #areas .fragment-card-inner {
    height: auto;
  }

  #areas .fragment-face {
    display: flex;
    min-height: 0;
    padding: 22px 20px 24px;
    gap: 8px;
  }

  #areas .fragment-art,
  #areas .fragment-giant,
  #areas .fragment-corner,
  #areas .fragment-rule {
    display: none;
  }

  #areas .fragment-num {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  #areas .fragment-glyph {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }

  #areas .fragment h3 {
    margin: 0 0 8px;
    max-width: 13ch;
    font-size: clamp(1.5rem, 7vw, 1.95rem);
    line-height: 1.08;
  }

  #areas .fragment-body,
  #areas .fragment-note {
    margin: 0;
    max-width: none;
    font-size: 0.96rem;
    line-height: 1.58;
  }

  #areas .fragment-note {
    margin-top: 10px;
    color: var(--accent-soft);
  }

}

/* The Sobre reference uses the editorial display scale on wide screens. */
@media (min-width: 1200px) {
  #sobre .about-title {
    font-size: clamp(3.25rem, 4vw, 4.45rem);
    line-height: 1;
  }

  #sobre .about-intro {
    font-size: clamp(1.02rem, 1.08vw, 1.18rem);
    line-height: 1.6;
  }
}

/* Richer section palette: warm depth and gold details, without flat panels. */
#sobre.content-section {
  background:
    radial-gradient(760px 620px at 74% 42%, rgb(var(--accent-rgb) / 0.19), transparent 66%),
    radial-gradient(540px 430px at 17% 12%, rgb(var(--accent-rgb) / 0.08), transparent 68%),
    linear-gradient(130deg, #11120f 0%, #171713 48%, #11110e 100%);
}

#areas.content-section {
  background:
    radial-gradient(700px 500px at 78% 26%, rgb(var(--accent-rgb) / 0.12), transparent 68%),
    linear-gradient(145deg, #201f1a, #171612 72%);
}

#faq.content-section {
  background:
    radial-gradient(680px 460px at 12% 18%, rgb(var(--accent-rgb) / 0.1), transparent 66%),
    linear-gradient(145deg, #171713, #0f100d 78%);
}

#sobre .about-facets,
#sobre .facet-list {
  background: transparent;
}

#sobre .facet-list::before,
#sobre .facet-list::after {
  display: none;
}

#sobre .facet {
  border-color: rgb(var(--accent-rgb) / 0.3);
  background:
    linear-gradient(130deg, rgb(var(--ivory-rgb) / 0.07), rgb(var(--accent-rgb) / 0.025) 52%, rgb(var(--black-rgb) / 0.12)),
    rgb(15 15 12 / 0.62);
  box-shadow:
    0 1px 0 rgb(var(--accent-soft-rgb) / 0.16) inset,
    0 22px 42px -30px rgb(var(--accent-rgb) / 0.58),
    0 22px 48px -30px rgb(var(--black-rgb) / 0.78);
}

#sobre .facet::before {
  width: 42%;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-soft-rgb) / 0.9), transparent);
}

@media (min-width: 1200px) {
  #sobre .about-layout {
    min-height: 700px;
  }

  #sobre .about-layout .about-portrait {
    position: absolute;
    top: 54px;
    right: -32px;
    z-index: 2;
    display: flex;
    width: min(48vw, 650px);
    min-height: 0;
    height: auto;
    align-items: flex-end;
  }

  #sobre .about-layout .about-portrait-frame {
    width: 100%;
    margin: 0;
  }

  #sobre .about-layout .about-lede,
  #sobre .about-layout .about-facets {
    position: relative;
    z-index: 3;
  }

  #sobre .about-layout .about-facets {
    width: min(72vw, 916px);
  }
}

/* Compact desktop rhythm: sections should feel complete within a viewport,
   without oversized blank space or forced full-screen cards. */
@media (min-width: 941px) {
  #areas .section-inner,
  #atendimento .section-inner,
  #locais .locais-layout,
  #faq .faq-inner {
    padding-top: clamp(52px, 6vh, 70px);
    padding-bottom: clamp(52px, 6vh, 70px);
  }

  #locais.content-section {
    min-height: auto;
  }

  #locais .locais-detail-card {
    min-height: clamp(430px, 52svh, 540px);
  }
}

/* Sobre — structured editorial layout: portrait, narrative and proof points. */
@media (min-width: 1200px) {
  #sobre.about-section .section-inner {
    width: min(calc(100% - 96px), 1020px);
    padding: 72px 0 86px;
  }

  #sobre .about-layout {
    display: grid;
    grid-template-columns: 368px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "portrait lede"
      "portrait facets";
    column-gap: 66px;
    row-gap: 28px;
    min-height: 0;
    align-items: start;
  }

  #sobre .about-layout .about-portrait {
    position: relative;
    top: auto;
    right: auto;
    grid-area: portrait;
    width: 368px;
    min-height: 528px;
    height: 528px;
    margin: 34px 0 0;
    z-index: 2;
    overflow: visible;
  }

  #sobre .about-layout .about-portrait-frame {
    width: 100%;
    height: 528px;
    aspect-ratio: auto;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgb(var(--accent-rgb) / 0.34);
    background: #141510;
  }

  #sobre .about-portrait-frame img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 22%;
  }

  #sobre .about-portrait-glow,
  #sobre .about-foliage2 {
    display: none;
  }

  #sobre .about-portrait .about-sign {
    position: absolute;
    z-index: 3;
    right: -26px;
    bottom: -14px;
    width: 360px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid rgb(var(--accent-rgb) / 0.28);
    background: rgb(16 17 12 / 0.96);
  }

  #sobre .about-sign figcaption {
    gap: 6px;
  }

  #sobre .about-sign-name {
    font-size: 1.42rem;
  }

  #sobre .about-layout .about-lede {
    grid-area: lede;
    width: 100%;
    max-width: 560px;
    padding: 52px 0 0;
  }

  #sobre .section-kicker--rule {
    margin-bottom: 34px;
  }

  #sobre .about-title {
    max-width: 11ch;
    font-size: clamp(3rem, 3.45vw, 3.7rem);
    line-height: 1.04;
  }

  #sobre .about-title::after {
    width: 100%;
    margin: 26px 0 24px;
  }

  #sobre .about-intro {
    max-width: 55ch;
    font-size: 0.98rem;
    line-height: 1.65;
  }

  #sobre .about-script {
    margin-top: 26px;
    padding-left: 20px;
    font-size: 1.3rem;
  }

  #sobre .about-script::before {
    display: none;
  }

  #sobre .about-script::after {
    left: 0;
    top: 0;
    height: 100%;
  }

  #sobre .about-layout .about-facets {
    grid-area: facets;
    width: 100%;
    max-width: 560px;
    margin: 0;
    gap: 0;
    z-index: 3;
  }

  #sobre .about-mission,
  #sobre .facet-icon,
  #sobre .facet-leaf {
    display: none;
  }

  #sobre .facet-list {
    counter-reset: facets;
    display: block;
    border-top: 1px solid rgb(var(--accent-rgb) / 0.24);
  }

  #sobre .facet {
    counter-increment: facets;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
    min-height: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid rgb(var(--accent-rgb) / 0.2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  #sobre .facet::before {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    color: var(--accent);
    content: counter(facets, decimal-leading-zero);
    font-family: var(--serif);
    font-size: 0.78rem;
  }

  #sobre .facet::after {
    display: none;
  }

  #sobre .facet-body {
    display: grid;
    gap: 7px;
  }

  #sobre .facet-title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  #sobre .facet-title br {
    display: none;
  }

  #sobre .facet-body p {
    max-width: none;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  #sobre .about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 28px;
    padding: 0 20px;
    border: 1px solid rgb(var(--accent-rgb) / 0.68);
    color: var(--accent-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-transform: uppercase;
  }
}

/* Refined palette — neutral architectural surfaces with gold used only as an accent. */
:root {
  --text-secondary: #b9b2a8;
}

#sobre.content-section {
  background:
    radial-gradient(700px 520px at 74% 42%, rgb(255 255 255 / 0.035), transparent 68%),
    linear-gradient(135deg, #181818, #111111 72%);
}

#areas.content-section,
#faq.content-section {
  background:
    radial-gradient(640px 460px at 12% 18%, rgb(255 255 255 / 0.024), transparent 70%),
    #1d1d1d;
}

#locais.content-section {
  background:
    radial-gradient(760px 540px at 72% 16%, rgb(255 255 255 / 0.03), transparent 68%),
    linear-gradient(180deg, #1d1d1d, #111111);
}

.content-section,
.site-footer {
  border-color: #303030;
}

.facet,
.faq-item,
.step-card,
#locais .locais-detail-card,
#sobre .about-portrait-frame,
#sobre .about-portrait .about-sign {
  border-color: #363636;
}

#sobre .about-portrait .about-sign {
  background: #1d1d1d;
}

.facet {
  background: rgb(29 29 29 / 0.78);
  box-shadow: 0 20px 42px -32px rgb(0 0 0 / 0.86);
}

.facet::before,
.step-card::before,
.loc-card-divider {
  background: linear-gradient(90deg, rgb(184 165 140 / 0.36), transparent);
}

.about-title::after {
  background:
    radial-gradient(circle at 50% 50%, rgb(184 165 140 / 0.46) 0 4px, transparent 5px),
    linear-gradient(90deg, rgb(184 165 140 / 0.28), transparent 46%, transparent 54%, rgb(184 165 140 / 0.28)) center / 100% 1px no-repeat;
}

.about-intro,
.areas-lede,
.steps-lede,
.locais-lede,
.faq-lede,
.facet-body p,
.step-copy,
.faq-answer p,
#locais .loc-info-list dd {
  color: var(--text-secondary);
}

.about-portrait-glow,
.about-glow {
  background: radial-gradient(ellipse at center, rgb(255 255 255 / 0.06), transparent 68%);
}

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: #d3b5a7;
  border-color: #d3b5a7;
  color: #111111;
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover {
  background: #e4d2ca;
  border-color: #e4d2ca;
  box-shadow: 0 12px 28px -16px rgb(0 0 0 / 0.54);
}

.button:active,
.button-header:active,
.about-cta:active,
.cta-button-primary:active,
.hero-cta-primary:active {
  background: #c2a092;
  border-color: #c2a092;
}

:focus-visible {
  outline-color: #e1cdc4;
}

/* Wider desktop canvas and a layered portrait frame with cursor depth. */
@media (min-width: 1200px) {
  #sobre.about-section .section-inner {
    width: min(calc(100% - 112px), 1320px);
    padding: 68px 0 82px;
  }

  #sobre .about-layout {
    grid-template-columns: 470px minmax(0, 1fr);
    column-gap: clamp(68px, 6vw, 106px);
  }

  #sobre .about-layout .about-portrait {
    width: 470px;
    min-height: 660px;
    height: 660px;
    margin-top: 16px;
    perspective: 1400px;
  }

  #sobre .about-layout .about-portrait-frame {
    height: 660px;
    overflow: visible;
    isolation: isolate;
    transform-style: preserve-3d;
    box-shadow: var(--portrait-shadow-x, 0px) var(--portrait-shadow-y, 0px) 34px rgb(0 0 0 / 0.48);
  }

  #sobre .about-portrait-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14px -14px -14px 14px;
    border: 1px solid #454545;
    background: linear-gradient(145deg, #242424, #111111);
    box-shadow: 18px 20px 36px rgb(0 0 0 / 0.5);
    transform: translateZ(-26px);
    transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
  }

  #sobre .about-portrait-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, rgb(244 241 236 / 0.16), transparent 26%, transparent 68%, rgb(184 165 140 / 0.06));
    mix-blend-mode: screen;
    opacity: 0.38;
    transition: opacity 220ms ease-out;
  }

  #sobre .about-portrait-frame img {
    position: relative;
    z-index: 1;
    display: block;
    box-shadow: inset 0 0 0 1px rgb(244 241 236 / 0.08);
  }

  #sobre .about-portrait:hover .about-portrait-frame::before {
    border-color: rgb(184 165 140 / 0.38);
    box-shadow: 26px 30px 48px rgb(0 0 0 / 0.62), 0 0 28px rgb(184 165 140 / 0.06);
    transform: translate3d(10px, 12px, -34px);
  }

  #sobre .about-portrait:hover .about-portrait-frame::after {
    opacity: 0.72;
  }

  #sobre .about-layout .about-lede,
  #sobre .about-layout .about-facets {
    max-width: 650px;
  }

  #sobre .about-layout .about-lede {
    padding-top: 48px;
  }

  #sobre .about-title {
    font-size: clamp(3.3rem, 3.8vw, 4.1rem);
  }

  #sobre .about-portrait .about-sign {
    width: 430px;
    right: -30px;
    padding: 20px 24px;
    box-shadow: 12px 16px 30px rgb(0 0 0 / 0.34);
  }
}

/* Editorial warmth: richer charcoal surfaces and muted linen accents. */
:root {
  --text-secondary: #c3b7ac;
}

#areas.content-section {
  background: linear-gradient(145deg, #292522, #1f1c1a 74%);
}

#atendimento.content-section {
  background: linear-gradient(145deg, #211e1c, #191715 76%);
}

#locais.content-section {
  background: linear-gradient(145deg, #282421, #1a1816 78%);
}

#faq.content-section {
  background: linear-gradient(145deg, #24211f, #171513 78%);
}

.site-footer {
  border-color: #393330;
  background: #151312;
}

.site-footer::before {
  display: none;
}

.content-section,
.facet,
.faq-item,
.step-card,
#locais .locais-detail-card,
#sobre .about-portrait-frame,
#sobre .about-portrait .about-sign {
  border-color: #443c38;
}

.facet,
.faq-item,
.step-card,
#locais .locais-detail-card {
  background-color: #24211f;
  box-shadow: 0 18px 38px -30px rgb(0 0 0 / 0.78);
}

.about-intro,
.areas-lede,
.steps-lede,
.locais-lede,
.faq-lede,
.facet-body p,
.step-copy,
.faq-answer p,
#locais .loc-info-list dd,
.footer-note,
.contact-info p {
  color: var(--text-secondary);
}

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: #ddc7be;
  border-color: #ddc7be;
  color: #201d1b;
  box-shadow: 0 10px 22px -16px rgb(0 0 0 / 0.5);
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover {
  background: #ead9d2;
  border-color: #ead9d2;
  box-shadow: 0 14px 26px -18px rgb(0 0 0 / 0.6);
}

.button:active,
.button-header:active,
.about-cta:active,
.cta-button-primary:active,
.hero-cta-primary:active {
  background: #cba99c;
  border-color: #cba99c;
}

.footer-rule,
.footer-rule::before,
.footer-rule::after,
.about-title::after,
.facet::before,
.step-card::before,
.loc-card-divider {
  filter: saturate(0.45);
}

/* Áreas de atendimento: remove ambient light, grid and technical ornament. */
#areas .areas-bg,
#areas .fragments-map,
#areas .areas-margin-line,
#areas .areas-curtain,
#areas .areas-corner-glow,
#areas .topo-shape {
  display: none;
}

/* A soft skin-tone is reserved for small, clear reading accents only. */
.section-kicker,
.step-index,
.fragment-num,
.footer-location span {
  color: var(--highlight);
}

.footer-rule {
  background: radial-gradient(circle at calc(50% - 2px) 5px, var(--highlight) 0 1.6px, transparent 2px);
}

/* Sobre: lighter divider, readable CTA and a clearer proof-point hierarchy. */
#sobre .about-title::after {
  height: 1px;
  opacity: 0.72;
  background: linear-gradient(90deg, rgb(var(--highlight-rgb) / 0.62), rgb(var(--highlight-rgb) / 0.16) 58%, transparent);
}

#sobre .about-script {
  max-width: none;
}

#sobre .about-cta {
  background: #ddc7be;
  border-color: #ddc7be;
  color: #171412;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-shadow: none;
}

#sobre .about-cta:hover,
#sobre .about-cta:focus-visible {
  background: #eee4da;
  border-color: #eee4da;
  color: #171412;
}

@keyframes about-sign-float {
  0%, 100% { transform: translateY(0); box-shadow: 12px 16px 30px rgb(0 0 0 / 0.34); }
  50% { transform: translateY(-5px); box-shadow: 14px 22px 36px rgb(0 0 0 / 0.44); }
}

#sobre .about-portrait .about-sign {
  animation: about-sign-float 4.8s ease-in-out infinite;
  transform-origin: 76% 80%;
  transition: transform 420ms var(--ease-motion), box-shadow 420ms var(--ease-motion), border-color 420ms var(--ease-motion), background-color 420ms var(--ease-motion);
  will-change: transform;
}

#sobre .about-portrait:hover .about-sign {
  transform: translate3d(10px, -9px, 0) rotate(-1.2deg);
  border-color: rgb(var(--accent-soft-rgb) / 0.78);
  background-color: #24201f;
  box-shadow: 18px 26px 42px rgb(0 0 0 / 0.48);
  animation-play-state: paused;
}

/* Neutral transition: pure black opens into graphite, with a skin-tone detail. */
:root {
  --text-secondary: #d6d1ce;
}

#sobre.content-section { background: linear-gradient(142deg, #101010 0%, #202020 100%); }
#areas.content-section { background: linear-gradient(142deg, #090909 0%, #242424 100%); }
#atendimento.content-section { background: linear-gradient(142deg, #0c0c0c 0%, #222222 100%); }
#locais.content-section { background: linear-gradient(142deg, #101010 0%, #262626 100%); }
#faq.content-section { background: linear-gradient(142deg, #0b0b0b 0%, #202020 100%); }

.content-section,
.facet,
.faq-item,
.step-card,
#locais .locais-detail-card,
#sobre .about-portrait-frame,
#sobre .about-portrait .about-sign { border-color: #3b3938; }

.facet,
.faq-item,
.step-card,
#locais .locais-detail-card { background-color: #1d1d1d; }

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: linear-gradient(135deg, #e4cdc3, #d3b5a7);
  border-color: #e4cdc3;
  color: #211a18;
  box-shadow: 0 9px 20px -16px rgb(0 0 0 / 0.62), 0 1px 0 rgb(255 255 255 / 0.32) inset;
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover,
.button:focus-visible,
.button-header:focus-visible,
.about-cta:focus-visible,
.cta-button-primary:focus-visible,
.hero-cta-primary:focus-visible {
  background: linear-gradient(135deg, #edddd6, #dcc2b7);
  border-color: #edddd6;
  color: #211a18;
  box-shadow: 0 13px 24px -17px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.4) inset;
}

.button:active,
.button-header:active,
.about-cta:active,
.cta-button-primary:active,
.hero-cta-primary:active { background: #cba99a; border-color: #cba99a; }

.steps-flow.is-leaving .steps-rail-trace { transform-origin: right center; }

#atendimento .steps-flow::before,
#atendimento .steps-flow::after { display: none; }

@media (max-width: 940px) {
  .steps-flow.is-leaving .steps-rail-trace { transform-origin: center bottom; }
}

@media (min-width: 1200px) {
  #sobre .about-title {
    font-size: clamp(3.45rem, 4vw, 4.3rem);
  }
}

@media (min-width: 1200px) {
  #sobre .facet::before {
    font-size: 1rem;
    font-weight: 600;
    color: var(--highlight);
  }

  #sobre .facet-title {
    font-size: 0.86rem;
    letter-spacing: 0.16em;
  }

  #sobre .facet-body p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}

.social-dock-btn--instagram:hover,
.social-dock-btn--instagram:focus-visible {
  color: #7652d6;
  border-color: #7652d6;
  background-color: rgb(118 82 214 / 0.14);
  box-shadow: 0 0 0 4px rgb(118 82 214 / 0.12), 0 14px 30px rgb(0 0 0 / 0.46);
}

@media (prefers-reduced-motion: reduce) {
  #sobre .about-portrait .about-sign {
    animation: none;
  }
}

:root {
  --accent-rgb: 194 181 161;
  --accent-soft-rgb: 221 211 196;
  --highlight-rgb: 235 227 216;
}

.site-footer .footer-logo img {
  width: clamp(64px, 4.2vw, 78px);
}

/* Áreas de atendimento: cartões informativos diretos, sem flip. */
#areas .fragments-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

#areas .fragment,
#areas .fragment--anxiety,
#areas .fragment--mood,
#areas .fragment--tdah,
#areas .fragment--panic {
  grid-column: auto;
  min-height: 300px;
  padding: 0;
  cursor: default;
  perspective: none;
  overflow: hidden;
  border: 1px solid #3b3938;
  border-radius: 12px;
  background: #1b1b1b;
}

#areas .fragment-glow,
#areas .fragment-giant,
#areas .fragment-mark,
#areas .fragment-rule,
#areas .fragment-corner { display: none; }

#areas .fragment-card-inner {
  position: relative;
  inset: auto;
  height: 100%;
  transform: none !important;
  transform-style: flat;
  transition: none;
}

#areas .fragment-face,
#areas .fragment-face--front {
  position: relative;
  inset: auto;
  display: flex;
  min-height: 298px;
  padding: 28px 30px 30px;
  overflow: hidden;
  background: linear-gradient(145deg, #202020, #171717);
  box-shadow: none;
  backface-visibility: visible;
  transform: none;
}

#areas .fragment-art {
  right: -2%;
  bottom: -9%;
  width: min(45%, 260px);
  height: 78%;
  opacity: 0.18 !important;
  filter: grayscale(0.5) sepia(0.2) saturate(0.6);
}

#areas .fragment-num {
  margin: 0 0 12px;
  color: var(--accent-soft);
  font-size: 0.78rem;
}

#areas .fragment-glyph {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: var(--accent-soft);
}

#areas .fragment h3 {
  max-width: 15ch;
  margin: 0 0 12px;
  color: var(--ivory);
  font-size: clamp(1.55rem, 2vw, 1.92rem);
  line-height: 1.08;
}

#areas .fragment-body,
#areas .fragment-note {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  font-size: 0.94rem;
  line-height: 1.58;
}

#areas .fragment-note { color: var(--accent-soft); }

#areas .fragment:hover {
  border-color: rgb(var(--accent-soft-rgb) / 0.62);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -26px rgb(0 0 0 / 0.78);
}

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: linear-gradient(135deg, #e2dbcf, #c9bdab);
  border-color: #e2dbcf;
  color: #1d1b19;
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover,
.button:focus-visible,
.button-header:focus-visible,
.about-cta:focus-visible,
.cta-button-primary:focus-visible,
.hero-cta-primary:focus-visible {
  background: linear-gradient(135deg, #eee9e0, #d7cbbc);
  border-color: #eee9e0;
  color: #1d1b19;
}

@media (max-width: 760px) {
  #areas .fragments-field { grid-template-columns: 1fr; gap: 14px; }
  #areas .fragment,
  #areas .fragment-face,
  #areas .fragment-face--front { min-height: 0; }
  #areas .fragment-face,
  #areas .fragment-face--front { padding: 24px 22px 26px; }
  #areas .fragment h3 { font-size: 1.62rem; }
  #areas .fragment-art { opacity: 0.13 !important; }
}

@keyframes instagram-mobile-ring {
  0%, 100% { color: #d62976; border-color: #d62976; box-shadow: 0 0 0 2px rgb(214 41 118 / 0.22), 0 0 12px rgb(214 41 118 / 0.52); }
  25% { color: #962fbf; border-color: #962fbf; box-shadow: 0 0 0 3px rgb(150 47 191 / 0.2), 0 0 14px rgb(150 47 191 / 0.52); }
  50% { color: #4f5bd5; border-color: #4f5bd5; box-shadow: 0 0 0 3px rgb(79 91 213 / 0.2), 0 0 14px rgb(79 91 213 / 0.5); }
  75% { color: #fa7e1e; border-color: #fa7e1e; box-shadow: 0 0 0 2px rgb(250 126 30 / 0.18), 0 0 12px rgb(250 126 30 / 0.48); }
}

@keyframes whatsapp-mobile-ring {
  0%, 100% { color: #25d366; border-color: #25d366; box-shadow: 0 0 0 2px rgb(37 211 102 / 0.2), 0 0 12px rgb(37 211 102 / 0.46); }
  50% { color: #65e395; border-color: #65e395; box-shadow: 0 0 0 5px rgb(37 211 102 / 0), 0 0 18px rgb(37 211 102 / 0.62); }
}

@media (max-width: 760px) {
  .social-dock[open] .social-dock-btn--instagram {
    animation: instagram-mobile-ring 3.2s ease-in-out infinite;
  }

  .social-dock[open] .social-dock-btn--whatsapp {
    animation: whatsapp-mobile-ring 2.35s ease-in-out infinite;
  }
}

/* Contatos rápidos: abertura em cascata e recolhimento no mesmo ritmo. */
.social-dock-btn {
  transform: translate3d(0, 12px, 0) scale(0.62);
  transform-origin: center bottom;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.social-dock:not([open]) .social-dock-btn {
  transition-delay: 0ms !important;
}

.social-dock:not([open]):hover .social-dock-btn,
.social-dock:not([open]):focus-within .social-dock-btn {
  transform: translate3d(0, 12px, 0) scale(0.62);
  opacity: 0;
  pointer-events: none;
}

.social-dock[open] .social-dock-btn {
  opacity: 1;
  pointer-events: auto;
}

.social-dock[open] .social-dock-btn--whatsapp {
  transform: translate3d(0, -78px, 0) scale(1);
  transition-delay: 35ms;
}

.social-dock[open] .social-dock-btn--instagram {
  transform: translate3d(0, -154px, 0) scale(1);
  transition-delay: 115ms;
}

@media (max-width: 480px) {
  .social-dock[open] .social-dock-btn--whatsapp {
    transform: translate3d(0, -68px, 0) scale(1);
  }

  .social-dock[open] .social-dock-btn--instagram {
    transform: translate3d(0, -134px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-dock[open] .social-dock-btn--instagram,
  .social-dock[open] .social-dock-btn--whatsapp { animation: none; }
}

/* Legibilidade: as seções e os cartões não permanecem desfocados. */
.reveal-section,
.reveal-section.is-visible,
.step-card,
.reveal-section.is-visible .step-card {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (min-width: 761px) {
  #areas .fragments-field {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row;
  }

  #areas .fragment,
  #areas .fragment--anxiety,
  #areas .fragment--mood,
  #areas .fragment--tdah,
  #areas .fragment--panic {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.button-header span {
  font-weight: 800;
  letter-spacing: 0.14em;
}

#sobre .about-cta {
  transition: transform 260ms var(--ease-motion), box-shadow 260ms var(--ease-motion), background 260ms var(--ease-motion), border-color 260ms var(--ease-motion);
}

#sobre .about-cta:hover,
#sobre .about-cta:focus-visible {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #f1ede5, #d8cdbb);
  border-color: #f1ede5;
  box-shadow: 0 14px 28px -16px rgb(0 0 0 / 0.76), 0 1px 0 rgb(255 255 255 / 0.54) inset;
}

/* Paleta principal: preto, grafite e o pêssego #E8B07A. */
:root {
  --secondary-rgb: 232 176 122;
  --secondary: rgb(var(--secondary-rgb));
  --secondary-soft: rgb(var(--secondary-rgb) / 0.82);
  --background-rgb: 12 12 12;
  --background-deep-rgb: 5 5 5;
  --card-panel-rgb: 28 28 28;
  --accent-rgb: var(--secondary-rgb);
  --accent-soft-rgb: var(--secondary-rgb);
  --highlight-rgb: var(--secondary-rgb);
}

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: linear-gradient(135deg, #e8b07a, #f1c69f);
  border-color: #f1c69f;
  color: #1a1410;
  box-shadow: 0 8px 18px -15px rgb(0 0 0 / 0.68), 0 1px 0 rgb(255 255 255 / 0.32) inset;
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover,
.button:focus-visible,
.button-header:focus-visible,
.about-cta:focus-visible,
.cta-button-primary:focus-visible,
.hero-cta-primary:focus-visible {
  background: linear-gradient(135deg, #edbb8c, #f6d4b6);
  border-color: #f6d4b6;
  color: #1a1410;
  box-shadow: 0 12px 22px -16px rgb(0 0 0 / 0.72), 0 1px 0 rgb(255 255 255 / 0.42) inset;
}

#sobre .about-cta:hover,
#sobre .about-cta:focus-visible {
  background: linear-gradient(135deg, #edbb8c, #f6d4b6);
  border-color: #f6d4b6;
  color: #1a1410;
}

#areas .fragment,
#areas .fragment--anxiety,
#areas .fragment--mood,
#areas .fragment--tdah,
#areas .fragment--panic {
  min-height: 326px;
  transition: transform 260ms var(--ease-motion), border-color 260ms var(--ease-motion), box-shadow 260ms var(--ease-motion), background-color 260ms var(--ease-motion);
}

#areas .fragment h3 {
  font-size: clamp(1.75rem, 2.25vw, 2.15rem);
}

#areas .fragment-body {
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.56;
}

#areas .fragment-note {
  font-size: 1rem;
  line-height: 1.5;
}

/* Sobre: texto confortável para leitura em telas grandes. */
@media (min-width: 941px) {
  #sobre .about-intro {
    max-width: 52ch;
    font-size: 1.08rem;
    line-height: 1.7;
  }

  #sobre .facet::before {
    font-size: 1.08rem;
  }

  #sobre .facet-title {
    font-size: 0.98rem;
    letter-spacing: 0.15em;
  }

  #sobre .facet-body p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

#sobre .about-cta {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #17120e;
  box-shadow: 0 8px 18px -14px rgb(0 0 0 / 0.58);
}

#sobre .about-cta:hover,
#sobre .about-cta:focus-visible {
  background: var(--secondary-soft);
  border-color: var(--secondary-soft);
  color: #17120e;
  box-shadow: 0 12px 22px -15px rgb(0 0 0 / 0.64);
}

.site-footer {
  border-top-color: rgb(var(--secondary-rgb) / 0.56);
  background: linear-gradient(155deg, #282522 0%, #121212 58%, #080808 100%);
}

.site-footer .footer-logo img { opacity: 1; }
.site-footer .footer-location { color: rgb(var(--ivory-rgb) / 0.96); }
.site-footer .footer-location span,
.site-footer .footer-social a { color: var(--secondary); }
.site-footer .footer-note { color: rgb(var(--ivory-rgb) / 0.8); }
.site-footer .footer-rule,
.site-footer .footer-rule::before,
.site-footer .footer-rule::after { filter: none; }

/* O cartão acompanha o tilt da foto, sem flutuação ou névoa própria. */
#sobre .about-portrait .about-sign {
  animation: none;
  filter: none;
  backdrop-filter: none;
  background: #242424;
  border-color: rgb(var(--secondary-rgb) / 0.64);
  transform-style: preserve-3d;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out, background-color 220ms ease-out;
}

#sobre .about-portrait .about-sign.is-returning {
  transition-duration: 500ms;
  transition-timing-function: ease;
}

#sobre .about-portrait:hover .about-sign {
  background: #292725;
  border-color: var(--secondary);
  box-shadow: 14px 22px 34px rgb(0 0 0 / 0.42);
}

.button,
.button-header,
.cta-button-primary,
.hero-cta-primary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #17120e;
}

.button:hover,
.button-header:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover,
.button:focus-visible,
.button-header:focus-visible,
.cta-button-primary:focus-visible,
.hero-cta-primary:focus-visible {
  background: var(--secondary-soft);
  border-color: var(--secondary-soft);
  color: #17120e;
}

/* Destaque global: #FFCE82 e uma variação clara para interação. */
:root {
  --secondary-rgb: 255 206 130;
  --secondary: #ffce82;
  --secondary-soft: #ffe0a6;
  --accent-rgb: var(--secondary-rgb);
  --accent-soft-rgb: var(--secondary-rgb);
  --highlight-rgb: var(--secondary-rgb);
  --text-secondary: #c9c9c9;
}

.button,
.button-header,
.about-cta,
.cta-button-primary,
.hero-cta-primary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #111111;
}

.site-footer {
  border-top-color: rgb(var(--secondary-rgb) / 0.42);
  background: linear-gradient(155deg, #262626 0%, #121212 58%, #080808 100%);
}

#sobre .about-portrait .about-sign,
#sobre .about-portrait:hover .about-sign { background: #292929; }

@keyframes instagram-mobile-ring {
  0%, 100% { color: #eeeeee; border-color: #eeeeee; box-shadow: 0 0 0 2px rgb(238 238 238 / 0.18), 0 0 12px rgb(238 238 238 / 0.34); }
  50% { color: #cfcfcf; border-color: #cfcfcf; box-shadow: 0 0 0 5px rgb(238 238 238 / 0), 0 0 16px rgb(238 238 238 / 0.44); }
}

@keyframes whatsapp-mobile-ring {
  0%, 100% { color: #eeeeee; border-color: #eeeeee; box-shadow: 0 0 0 2px rgb(238 238 238 / 0.18), 0 0 12px rgb(238 238 238 / 0.34); }
  50% { color: #cfcfcf; border-color: #cfcfcf; box-shadow: 0 0 0 5px rgb(238 238 238 / 0), 0 0 16px rgb(238 238 238 / 0.44); }
}

.button:hover,
.button-header:hover,
.about-cta:hover,
.cta-button-primary:hover,
.hero-cta-primary:hover,
.button:focus-visible,
.button-header:focus-visible,
.about-cta:focus-visible,
.cta-button-primary:focus-visible,
.hero-cta-primary:focus-visible {
  background: var(--secondary-soft);
  border-color: var(--secondary-soft);
  color: #111111;
}

#areas .fragment:hover,
#areas .fragment--anxiety:hover,
#areas .fragment--mood:hover,
#areas .fragment--tdah:hover,
#areas .fragment--panic:hover {
  border-color: rgb(var(--accent-rgb) / 0.78);
  background-color: #232323;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -24px rgb(0 0 0 / 0.82), 0 0 0 1px rgb(var(--accent-rgb) / 0.08) inset;
}

@media (max-width: 760px) {
  #areas .fragment,
  #areas .fragment--anxiety,
  #areas .fragment--mood,
  #areas .fragment--tdah,
  #areas .fragment--panic { min-height: 0; }

  #areas .fragment h3 { font-size: 1.8rem; }
  #areas .fragment-body { font-size: 1rem; }
  #areas .fragment-note { font-size: 0.98rem; }
}

@keyframes instagram-mobile-ring {
  0%, 100% { color: #e8b07a; border-color: #e8b07a; box-shadow: 0 0 0 2px rgb(232 176 122 / 0.18), 0 0 12px rgb(232 176 122 / 0.38); }
  50% { color: #f4cdad; border-color: #f4cdad; box-shadow: 0 0 0 5px rgb(232 176 122 / 0), 0 0 16px rgb(232 176 122 / 0.48); }
}

@keyframes whatsapp-mobile-ring {
  0%, 100% { color: #e8b07a; border-color: #e8b07a; box-shadow: 0 0 0 2px rgb(232 176 122 / 0.18), 0 0 12px rgb(232 176 122 / 0.38); }
  50% { color: #f4cdad; border-color: #f4cdad; box-shadow: 0 0 0 5px rgb(232 176 122 / 0), 0 0 16px rgb(232 176 122 / 0.48); }
}

/* Menu social: abre e fecha exclusivamente pelo clique no botão principal. */
.social-dock-toggle::after { display: none; }

.social-dock-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0) scale(0.76);
  filter: none;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}

.social-dock:not([open]):hover .social-dock-btn,
.social-dock:not([open]):focus-within .social-dock-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0) scale(0.76);
}

.social-dock[open] .social-dock-btn {
  opacity: 1;
  pointer-events: auto;
  background-color: #171717;
  border-color: rgb(var(--secondary-rgb) / 0.52);
}

.social-dock[open] .social-dock-btn--whatsapp {
  transform: translateY(-68px) scale(1);
  transition-delay: 40ms;
}

.social-dock[open] .social-dock-btn--instagram {
  transform: translateY(-128px) scale(1);
  transition-delay: 105ms;
}

.social-dock-toggle {
  transition: transform 300ms ease, border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

.social-dock[open] .social-dock-toggle {
  animation: none;
  transform: scale(0.94);
  background-color: #1a1a1a;
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px rgb(var(--secondary-rgb) / 0.1), 0 10px 26px rgb(0 0 0 / 0.42);
}

@media (max-width: 480px) {
  .social-dock[open] .social-dock-btn--whatsapp { transform: translateY(-60px) scale(1); }
  .social-dock[open] .social-dock-btn--instagram { transform: translateY(-116px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .social-dock-btn,
  .social-dock-toggle { transition: none; }
}

/* Destaque secundário global. */
:root {
  --secondary-rgb: 219 193 152;
  --secondary: #dbc198;
  --secondary-soft: #ead7b8;
  --accent-rgb: var(--secondary-rgb);
  --accent-soft-rgb: var(--secondary-rgb);
  --highlight-rgb: var(--secondary-rgb);
}

/* Canais sociais preservam as cores reconhecíveis de cada rede. */
.social-dock[open] .social-dock-btn--whatsapp {
  color: #25d366;
  border-color: #25d366;
  background: rgb(37 211 102 / 0.1);
  box-shadow: 0 0 0 4px rgb(37 211 102 / 0.1), 0 12px 24px rgb(0 0 0 / 0.46);
}

.social-dock[open] .social-dock-btn--instagram {
  color: #d62976;
  border-color: transparent;
  background:
    linear-gradient(#171717, #171717) padding-box,
    linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 52%, #962fbf 76%, #4f5bd5) border-box;
  box-shadow: 0 0 0 4px rgb(214 41 118 / 0.1), 0 12px 24px rgb(0 0 0 / 0.46);
}

/* Os números respondem junto com os três pontos de prova. */
#sobre .facet,
#sobre .facet::before {
  transition: transform 240ms var(--ease-motion), color 240ms var(--ease-motion), border-color 240ms var(--ease-motion), background-color 240ms var(--ease-motion);
}

#sobre .facet:hover {
  transform: translateX(5px);
  border-color: rgb(var(--secondary-rgb) / 0.72);
}

#sobre .facet:hover::before {
  color: var(--secondary);
  transform: translateX(3px) scale(1.16);
}

/* Sobre no celular: sequência única, sem blocos editoriais antigos concorrendo. */
@media (max-width: 760px) {
  #sobre .about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lede" "portrait" "facets";
    gap: 28px;
    width: min(calc(100% - 32px), 430px);
    min-height: 0;
    padding: 54px 0 64px;
  }

  #sobre .about-layout .about-lede {
    grid-area: lede;
    width: 100%;
    padding: 0;
  }

  #sobre .about-title {
    max-width: 10ch;
    margin-top: 22px;
    font-size: clamp(2.55rem, 11.5vw, 3.25rem);
    line-height: 1.02;
  }

  #sobre .about-intro {
    max-width: none;
    font-size: 1rem;
    line-height: 1.62;
  }

  #sobre .about-script {
    margin-top: 18px;
    padding-left: 0;
    font-size: 1.18rem;
    white-space: normal;
  }

  #sobre .about-portrait-glow,
  #sobre .about-mission,
  #sobre .facet-leaf { display: none; }

  #sobre .about-layout .about-portrait {
    grid-area: portrait;
    width: min(100%, 286px);
    min-height: 382px;
    height: 382px;
    margin: 0 auto;
    overflow: visible;
  }

  #sobre .about-layout .about-portrait-frame {
    width: 100%;
    height: 360px;
    margin: 0;
    overflow: hidden;
    background: #1d1d1d;
  }

  #sobre .about-portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 22%;
  }

  #sobre .about-portrait .about-sign {
    right: -38px;
    bottom: -8px;
    width: 206px;
    margin: 0;
    padding: 13px 14px;
  }

  #sobre .about-sign-name { font-size: 1.12rem; }
  #sobre .about-sign-role { font-size: 0.62rem; letter-spacing: 0.13em; }

  #sobre .about-layout .about-facets {
    grid-area: facets;
    width: 100%;
    margin: 0;
  }

  #sobre .facet-list {
    display: grid;
    gap: 12px;
    border: 0;
  }

  #sobre .facet {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 18px;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    background: #1c1c1c;
  }

  #sobre .facet::before { display: none; }
  #sobre .facet-icon { display: grid; }
  #sobre .facet-title { font-size: 1rem; line-height: 1.2; }
  #sobre .facet-body p { font-size: 0.93rem; line-height: 1.5; }

  #sobre .about-cta {
    width: 100%;
    min-height: 46px;
    margin-top: 16px;
    font-size: 0.72rem;
  }

}

/* Abertura final do menu social: dois atalhos em cascata e espaço entre eles. */
.social-dock-btn {
  transform: translate3d(0, 12px, 0) scale(0.62);
  transform-origin: center bottom;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.social-dock:not([open]) .social-dock-btn {
  transition-delay: 0ms !important;
  transform: translate3d(0, 12px, 0) scale(0.62);
  opacity: 0;
  pointer-events: none;
}

.social-dock[open] .social-dock-btn {
  opacity: 1;
  pointer-events: auto;
}

.social-dock[open] .social-dock-btn--whatsapp {
  transform: translate3d(0, -78px, 0) scale(1);
  transition-delay: 35ms;
}

.social-dock[open] .social-dock-btn--instagram {
  transform: translate3d(0, -154px, 0) scale(1);
  transition-delay: 115ms;
}

.social-dock-toggle::after { display: none; }

@media (max-width: 480px) {
  .social-dock[open] .social-dock-btn--whatsapp { transform: translate3d(0, -68px, 0) scale(1); }
  .social-dock[open] .social-dock-btn--instagram { transform: translate3d(0, -134px, 0) scale(1); }
}

/* Mobile: as redes recebem preenchimento claro e reconhecível, não só contorno. */
@media (max-width: 760px) {
  .social-dock[open] .social-dock-btn--whatsapp {
    color: #68d992;
    border-color: #42c875;
    background: #183426;
    box-shadow: 0 0 0 3px rgb(37 211 102 / 0.1), 0 10px 22px rgb(0 0 0 / 0.44);
  }

  .social-dock[open] .social-dock-btn--instagram {
    color: #e879a8;
    border-color: transparent;
    background:
      linear-gradient(#1a1a1a, #1a1a1a) padding-box,
      linear-gradient(135deg, #f0ba71, #db6d93 50%, #8b68be) border-box;
    box-shadow: 0 0 0 3px rgb(214 41 118 / 0.08), 0 10px 22px rgb(0 0 0 / 0.44);
  }
}

/* Sobre no mobile: retrato amplo, identificação abaixo e CTA legível. */
@media (max-width: 760px) {
  #sobre .about-layout .about-portrait {
    width: min(84vw, 330px) !important;
    min-height: 474px !important;
    height: 474px !important;
    margin: 0 auto !important;
  }

  #sobre .about-layout .about-portrait-frame {
    width: 100% !important;
    height: 420px !important;
    margin: 0 !important;
  }

  #sobre .about-portrait-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 56% 18% !important;
  }

  #sobre .about-portrait .about-sign {
    right: auto !important;
    left: 14px !important;
    bottom: -22px !important;
    width: calc(100% - 28px) !important;
    min-height: 74px;
    padding: 15px 16px !important;
    background: #262626 !important;
  }

  #sobre .about-sign-name { font-size: 1.26rem !important; }
  #sobre .about-sign-role { font-size: 0.68rem !important; letter-spacing: 0.14em !important; }

  #sobre .about-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 18px !important;
    padding: 0 18px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* Retrato e assinatura seguem a mesma composição lateral do desktop. */
  #sobre .about-layout .about-portrait {
    display: grid !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    align-items: end;
    width: min(100%, 340px) !important;
    min-height: 308px !important;
    height: 308px !important;
    overflow: visible;
  }

  #sobre .about-layout .about-portrait-frame {
    grid-column: 1;
    width: 100% !important;
    height: 308px !important;
    border: 1px solid rgb(var(--secondary-rgb) / 0.64);
    box-shadow: 10px 14px 26px rgb(0 0 0 / 0.38);
  }

  #sobre .about-portrait .about-sign {
    position: relative !important;
    z-index: 3;
    grid-column: 2;
    align-self: end;
    right: auto !important;
    left: -8px !important;
    bottom: 0 !important;
    width: calc(100% + 8px) !important;
    min-height: 106px;
    margin: 0 !important;
    padding: 15px 14px !important;
    border: 1px solid rgb(var(--secondary-rgb) / 0.76) !important;
    background: #262626 !important;
    box-shadow: 10px 14px 26px rgb(0 0 0 / 0.38);
  }

  #sobre .about-sign-name {
    font-size: 1.12rem !important;
    line-height: 1.02;
  }

  #sobre .about-sign-role {
    font-size: 0.61rem !important;
    line-height: 1.42;
    letter-spacing: 0.11em !important;
  }
}

@media (min-width: 761px) {
  .button-header span {
    font-weight: 800;
    letter-spacing: 0.16em;
  }
}

/* Mobile segue a mesma linguagem editorial do desktop, apenas em uma coluna. */
@media (max-width: 760px) {
  #sobre .about-layout .about-portrait {
    display: block !important;
    width: min(100%, 350px) !important;
    min-height: 518px !important;
    height: 518px !important;
    margin: 0 auto !important;
  }

  #sobre .about-layout .about-portrait-frame {
    width: 100% !important;
    height: 500px !important;
    border: 1px solid rgb(var(--secondary-rgb) / 0.64);
    box-shadow: 12px 16px 30px rgb(0 0 0 / 0.4);
  }

  #sobre .about-portrait .about-sign {
    position: absolute !important;
    right: -20px !important;
    left: auto !important;
    bottom: -12px !important;
    width: min(76%, 274px) !important;
    min-height: 0;
    padding: 17px 18px !important;
    border: 1px solid rgb(var(--secondary-rgb) / 0.76) !important;
    background: #262626 !important;
    box-shadow: 12px 16px 30px rgb(0 0 0 / 0.4);
  }

  #sobre .about-sign-name {
    font-size: 1.34rem !important;
    line-height: 1.04;
  }

  #sobre .about-sign-role {
    font-size: 0.67rem !important;
    letter-spacing: 0.14em !important;
  }

  #sobre .about-mission,
  #sobre .facet-icon,
  #sobre .facet-leaf { display: none !important; }

  #sobre .facet-list {
    display: block !important;
    counter-reset: facets;
    border-top: 1px solid rgb(var(--secondary-rgb) / 0.3) !important;
  }

  #sobre .facet {
    counter-increment: facets;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(var(--secondary-rgb) / 0.24) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #sobre .facet::before {
    display: block !important;
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    color: var(--secondary);
    content: counter(facets, decimal-leading-zero);
    font-family: var(--serif);
    font-size: 0.94rem;
  }

  #sobre .facet-body {
    display: grid;
    gap: 7px;
  }

  #sobre .facet-title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  #sobre .facet-title br { display: none; }
  #sobre .facet-body p { font-size: 0.92rem; line-height: 1.52; }
}

/* No mobile, o foco do trilho acompanha diretamente a posição do scroll. */
@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
  .steps-spark {
    display: block !important;
    width: 18px;
    height: 78px;
    opacity: calc(0.18 + var(--rail-progress) * 0.82);
    animation: none !important;
    transform: translateY(calc((100cqh - 78px) * var(--rail-progress)));
    transition: transform 90ms linear, opacity 90ms linear;
    background: linear-gradient(180deg, transparent, rgb(var(--secondary-rgb) / 0.86) 52%, transparent);
    filter: blur(2px);
  }

  .steps-flow.is-drawn .steps-spark { animation: none !important; }
}

/* Entradas e saídas das seções: movimento discreto, sem filtro ou desfoque. */
.reveal-section {
  opacity: 0;
  filter: none;
  transform: translateY(32px);
  transition:
    opacity 680ms cubic-bezier(.22, .61, .36, 1),
    transform 840ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal-section.is-visible {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .reveal-section {
    transform: translateY(20px);
    transition-duration: 560ms, 720ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-section,
  .reveal-section.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* O details só fecha após os atalhos terminarem a animação de recolhimento. */
.social-dock[open].is-closing .social-dock-btn {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 14px, 0) scale(0.62);
  transition-delay: 0ms !important;
}

.social-dock[open].is-closing .social-dock-toggle {
  transform: scale(1);
  border-color: rgb(var(--secondary-rgb) / 0.54);
  background-color: #171717;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .social-dock[open].is-closing .social-dock-btn { transition: none; }
}

/* Ajustes finais de interação em telas pequenas. */
#sobre .about-cta,
#sobre .about-cta:hover,
#sobre .about-cta:focus,
#sobre .about-cta:focus-visible {
  text-decoration: none;
}

@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
  .steps-spark {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .social-dock {
    right: clamp(28px, 7vw, 48px);
  }

  .social-dock[open] .social-dock-btn--whatsapp {
    color: #68d992;
    border: 1px solid #42c875;
    background: #183426;
    box-shadow: 0 0 0 3px rgb(37 211 102 / .12), 0 10px 22px rgb(0 0 0 / .44);
  }

}

/* Cartões de áreas: no toque, reproduzem o destaque do hover sem trocar conteúdo. */
#areas .area-card.is-tapped {
  border-color: rgb(var(--accent-rgb) / .62);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -24px rgb(0 0 0 / .82), 0 0 0 1px rgb(var(--accent-rgb) / .16) inset;
}

#areas .area-card.is-tapped .fragment-glow { opacity: 1; }
#areas .area-card.is-tapped .fragment-num { transform: translateX(4px); color: rgb(var(--accent-rgb) / .9); }
#areas .area-card.is-tapped .fragment-note { color: var(--accent-soft); }

@media (max-width: 620px) {
  #areas .area-card .fragment-face--front { animation: none !important; }
}

/* Assinatura visual do Instagram: azul/roxo, magenta e amarelo/laranja. */
.social-dock[open] .social-dock-btn--instagram,
.social-dock-btn--instagram:hover,
.social-dock-btn--instagram:focus-visible {
  color: #e879a8;
  border: 1px solid transparent;
  background:
    linear-gradient(#1a1a1a, #1a1a1a) padding-box,
    linear-gradient(135deg, #405de6 0%, #833ab4 35%, #e1306c 62%, #fcaf45 100%) border-box;
  box-shadow: 0 0 0 3px rgb(193 53 132 / .12), 0 10px 22px rgb(0 0 0 / .44);
}

@media (max-width: 760px) {
  .social-dock[open] .social-dock-btn--instagram {
    animation: none;
  }
}

/* Correções de usabilidade sem alteração visual perceptível. */
@media (min-width: 941px) {
  .desktop-nav .nav-link {
    padding-block: 8px;
  }
}

@media (min-width: 761px) and (max-width: 940px) {
  #sobre .about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 14px);
    min-height: 46px;
    margin-top: 16px;
    padding: 0 20px;
  }
}

@media (min-width: 941px) and (max-width: 1199px) {
  #sobre .about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    margin-top: 28px;
    padding: 0 20px;
  }
}