/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
a,button{ -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit; text-decoration:none}
ul{list-style:none}

/* ============ TOKENS ============ */
:root{
  --j:0; /* journey progress 0..1, set by JS */

  /* neutrals & base */
  --paper:#F2F1E9;
  --line-soft: rgba(21,59,64,0.14);

  /* signature warm accent — the "thread" color, used sparingly */
  --clay:#C1663B;
  --clay-text:#7C3A19;
  --clay-soft: rgba(193,102,59,.16);

  /* phase palette defaults (hero) — JS overwrites these per phase+theme */
  --surface:#E4E6DE;
  --surface-2:#D1D5CD;
  --text:#153B40;
  --text-soft:#2B5153;
  --accent:#3D5C59;
  --accent-2:#9BBFB2;

  --radius: calc(8px + var(--j) * 30px);
  --tracking: calc(-0.006em + var(--j) * 0.02em);
  --leading-h: calc(1.14 + var(--j) * 0.22);
  --grain-o: calc(0.14 - var(--j) * 0.12);

  --maxw-copy: 34rem;
  --maxw-wide: 72rem;
  --pad: 1.4rem;

  --ff-display:"Fraunces", "Iowan Old Style","Palatino Linotype", Georgia, serif;
  --ff-body:"Nunito Sans", "Segoe UI", system-ui, sans-serif;
}

:root{ color-scheme: light; }

html{ background: var(--surface); transition: background-color 1.1s ease; }
body{
  font-family: var(--ff-body);
  background: transparent;
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  transition: color 1.1s ease;
}

h1,h2,h3,blockquote{
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-wrap: balance;
  color: var(--text);
  transition: color 1.1s ease, letter-spacing .4s ease;
}

p{ max-width: 38rem; }
.copy{ max-width: var(--maxw-copy); }

::selection{ background: var(--accent); color: var(--paper); }

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

.skip-link{
  position: fixed; top: -100%; left: 1rem; z-index: 60;
  background: var(--text); color: var(--surface);
  padding: .8rem 1.3rem; border-radius: 999px;
  font: 700 .9rem/1 var(--ff-body);
  transition: top .25s ease;
}
.skip-link:focus-visible{ top: 1rem; }

/* ============ BACKDROP LAYERS ============ */
.backdrop{
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.bg-layer{ position:absolute; inset:-10%; }
.bg-dense{ opacity: calc(1 - var(--j)); background: var(--surface); transition: background-color 1.1s ease; }
.bg-open{
  opacity: var(--j);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent-2) 14%, var(--surface)), var(--surface) 60%);
}

.blob{
  position:absolute; border-radius:50%;
  filter: blur(calc(38px + var(--j) * 78px));
  transform: scale(calc(1 + var(--j) * 0.55));
  opacity: .38;
}
.blob::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  opacity: var(--j); transition: opacity .1s linear;
}
.b1{ background: radial-gradient(circle, #1D4036, transparent 72%); }
.b1::after{ background: radial-gradient(circle, #9BBFB2, transparent 72%); }
.b2{ background: radial-gradient(circle, #153B40, transparent 72%); }
.b2::after{ background: radial-gradient(circle, #C7D9D1, transparent 72%); }
.b3{ background: radial-gradient(circle, #4C736F, transparent 72%); }
.b3::after{ background: radial-gradient(circle, #9BBFB2, transparent 72%); }
.b4{ background: radial-gradient(circle, #1D4036, transparent 72%); }
.b4::after{ background: radial-gradient(circle, #D7E4DC, transparent 72%); }
.b5{ background: radial-gradient(circle, #153B40, transparent 72%); }
.b5::after{ background: radial-gradient(circle, #9BBFB2, transparent 72%); }
.b6{ background: radial-gradient(circle, #4C736F, transparent 72%); }
.b6::after{ background: radial-gradient(circle, #C7D9D1, transparent 72%); }

.grain{
  position:absolute; inset:-10%;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ LAYOUT PRIMITIVES ============ */
.section{
  position: relative;
  padding: 3.8rem var(--pad) 4.2rem;
  scroll-margin-top: 6rem;
  background: var(--surface);
  transition: background-color 1.1s ease;
}
.section-inner{ max-width: var(--maxw-copy); margin: 0 auto; }
.section-inner.wide{ max-width: var(--maxw-wide); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font: 700 .74rem/1 var(--ff-body); text-transform: uppercase; letter-spacing:.16em;
  color: var(--accent); margin-bottom: 1.1rem;
}
.eyebrow::before{ content:""; width:1.4em; height:1px; background: currentColor; opacity:.6; }

[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
[data-reveal].is-in{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding: 1rem 1.7rem; border-radius: 999px;
  font: 700 .95rem/1 var(--ff-body); letter-spacing:.01em;
  min-height: 52px;
  transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.btn-primary{
  background: var(--text); color: var(--surface);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-secondary{
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-soft);
}
.btn-secondary:hover{ transform: translateY(-2px); border-color: var(--accent-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap: .8rem 1rem; align-items:center; }

/* ============ NAV ============ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem var(--pad);
  transform: translateY(-100%); transition: transform .5s ease, background .6s ease;
}
.nav.is-visible{ transform: translateY(0); }
.nav-inner{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding: .55rem .7rem .55rem 1.05rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.35);
}
.wordmark{ font: 600 1rem/1 var(--ff-display); letter-spacing:.01em; }
.wordmark small{ display:block; font: 500 .58rem/1 var(--ff-body); letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-top:.2rem; }
.nav .btn{ padding: .68rem 1.15rem; min-height: 40px; font-size:.82rem; }

.nav-actions{ display:flex; align-items:center; gap:.5rem; }
.menu-btn{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  touch-action: manipulation;
  transition: background-color .25s ease;
}
.menu-btn:hover{ background: var(--surface-2); }
.menu-btn span{
  display:block; width:17px; height:2px; border-radius:2px; background:var(--text);
  transition: transform .35s ease, opacity .25s ease, background-color 1.1s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ============ FULLSCREEN MENU ============ */
.menu-overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface);
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: opacity .45s ease, transform .45s ease, background-color 1.1s ease, visibility 0s linear .45s;
  overscroll-behavior: contain;
  overflow-y: auto;
}
.menu-overlay.is-open{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .45s ease, transform .45s ease, background-color 1.1s ease;
}
.menu-links{ display:flex; flex-direction:column; align-items:center; gap:1.35rem; }
.menu-link{
  opacity:0; transform:translateY(16px);
  transition: opacity .5s ease, transform .5s ease, color .3s ease;
}
.menu-overlay.is-open .menu-link{ opacity:1; transform:none; }
.menu-links a.menu-link{ font: 500 1.6rem/1 var(--ff-display); color: var(--text); }
.menu-links a.menu-link:hover{ color: var(--accent); }
.menu-links a.btn.menu-link{ font: 700 .95rem/1 var(--ff-body); margin-top:.5rem; color: var(--surface); }
.menu-links a.btn.menu-link:hover{ color: var(--surface); }
.menu-logo{
  width:112px; height:auto; object-fit:contain; margin-bottom:.6rem;
  opacity:0; transform:translateY(16px);
  transition: opacity .5s ease .06s, transform .5s ease .06s;
}
.menu-overlay.is-open .menu-logo{ opacity:1; transform:none; }
a.menu-link:nth-of-type(1){ transition-delay:.12s; }
a.menu-link:nth-of-type(2){ transition-delay:.18s; }
a.menu-link:nth-of-type(3){ transition-delay:.24s; }
a.menu-link:nth-of-type(4){ transition-delay:.30s; }
a.menu-link:nth-of-type(5){ transition-delay:.36s; }
a.menu-link:nth-of-type(6){ transition-delay:.42s; }
a.menu-link:nth-of-type(7){ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .menu-overlay, .menu-link{ transition-duration:.01ms !important; }
}

/* ============ WHATSAPP FAB ============ */
.fab{
  position: fixed;
  right: calc(1.1rem + env(safe-area-inset-right));
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 45;
  width: 58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--text); color: var(--surface);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.45);
  opacity:0; transform: scale(.7) translateY(10px);
  transition: opacity .5s ease, transform .5s ease, background .6s ease;
  touch-action: manipulation;
}
.fab.is-visible{ opacity:1; transform:none; }
.fab.is-visible:hover{ transform: scale(1.08); }

/* ============ JOURNEY RAIL (desktop) ============ */
.rail{
  display:none; position:fixed; right:1.6rem; top:50%; transform:translateY(-50%);
  z-index:30; align-items:center;
}
.rail-track{
  position:relative; width:2px; height:280px; border-radius:2px;
  background: var(--line-soft); overflow:hidden;
}
.rail-fill{
  position:absolute; left:0; top:0; width:100%;
  height: calc(var(--j) * 100%);
  background: var(--accent); transition: background-color .8s ease;
}
.rail-dots{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
}
.rail-item{
  position:relative; width:22px; height:22px; margin-left:-10px;
  display:flex; align-items:center;
}
.rail-dot{
  width:9px; height:9px; border-radius:50%; background:var(--surface);
  border:1.5px solid var(--line-soft);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.rail-item em{
  position:absolute; right:24px; font: 600 .7rem/1 var(--ff-body); font-style:normal;
  white-space:nowrap; color:var(--text-soft); opacity:0; pointer-events:none;
  background: var(--surface); padding:.3rem .65rem; border-radius:999px;
  border:1px solid var(--line-soft);
  transition: opacity .25s ease, background-color 1.1s ease;
}
.rail-item:hover em, .rail-item:focus-visible em{ opacity:1; }
.rail-item.is-active .rail-dot{
  border-color: var(--accent); background: var(--accent); transform:scale(1.4);
}
@media (min-width:1024px){ .rail{ display:flex; } }

/* ============ BREATH WIDGET (glass pill, in-flow below CTA) ============ */
.breath-widget{
  display:flex; align-items:center; gap:.65rem;
  margin-top: 1.6rem;
  background: rgba(15,28,26,.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:.5rem 1.1rem .5rem .5rem;
  width: fit-content;
}
.breath-orb{
  position:relative; width:46px; height:46px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.breath-core{
  position:relative; width:64%; height:64%; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #CFE3DA, #6C9A8F);
  transform: scale(.72);
  transition: transform 4s ease-in-out;
}
.breath-orb.is-hold .breath-core{ transform:scale(1); transition-duration:1.4s; }
.breath-orb.is-inhale .breath-core{ transform:scale(1); transition-duration:4s; }
.breath-orb.is-exhale .breath-core{ transform:scale(.5); transition-duration:6s; }
.breath-copy{ font-size:.7rem; line-height:1.25; color:#fff; }
.breath-copy strong{ display:block; font:600 .82rem/1 var(--ff-body); color:#fff; margin-bottom:.1rem; }
@media (prefers-reduced-motion: reduce){
  .breath-core{ transition:none !important; transform:scale(.85) !important; }
}
@media (min-width:640px){
  .breath-orb{ width:52px; height:52px; }
  .breath-copy{ font-size:.76rem; }
  .breath-copy strong{ font-size:.9rem; }
}

/* ============ HERO (racing thoughts, on paper) ============ */
.hero{
  position: relative;
  overflow:hidden;
  scroll-margin-top: 0;
  background: var(--surface);
  transition: background-color 1.1s ease;
}

/* the messy mind, drawn as line — not a photo, so it's always crisp and never generic */
.hero-scribbles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-scribbles svg{ position:absolute; height:auto; }
.hero-scribbles path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.scribble.s1{ width:34vw; max-width:180px; top:-4%; left:-9%; opacity:.5; }
.scribble.s1 path{ stroke: var(--accent); stroke-width:2.2; }
.scribble.s2{ width:42vw; max-width:230px; top:8%; right:-12%; opacity:.4; }
.scribble.s2 path{ stroke: var(--clay); stroke-width:1.7; }
.scribble.s3{ width:26vw; max-width:130px; bottom:4%; left:36%; opacity:.32; }
.scribble.s3 path{ stroke: var(--accent-2); stroke-width:2.4; }

.hero-grid{
  position:relative; z-index:1;
  padding: calc(2.6rem + env(safe-area-inset-top)) 1.4rem 3.2rem;
}
.hero h1{ font-size: clamp(1.9rem, 7.6vw, 2.7rem); line-height: 1.18; margin-top:.7rem; }
.hero .lede{ margin-top: 1.1rem; color: var(--text-soft); font-size: 1.02rem; }
.hero .btn-row{ margin-top: 1.9rem; }

/* the real photo, kept small enough to always render crisp — never stretched past its source */
.hero-photo{
  margin: 2.4rem 0 0; max-width: 420px;
  aspect-ratio: 4 / 3.3;
  border-radius: calc(var(--radius) * 1.1);
  overflow:hidden; position:relative;
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 50px -26px rgba(21,59,64,.4);
  transition: border-radius 1.1s ease;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode: overlay; opacity:.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ DOR — tag cluster ============ */
.tangle{
  /* tidy layout by default, playful on larger screens */
  position: relative;
  display:flex; flex-wrap:wrap; gap:.6rem .6rem;
  margin: 2rem 0 2.4rem; max-width: 40rem; align-items:center;
}
.tangle p.copy{
  width:100%; margin-bottom:.6rem; color:var(--text-soft);
  font-size: .98rem; line-height:1.45; max-width:40rem;
}
.tangle span{
  display:inline-block; padding:.6rem 1.05rem; border-radius: 999px;
  font-size:.92rem; font-weight:700; letter-spacing: -0.01em;
  background: var(--surface-2); border:1px solid var(--line-soft);
  color: var(--text-soft);
  box-shadow: 0 6px 18px -10px rgba(21,59,64,.28);
  transition: transform .28s ease, background-color .6s ease, box-shadow .28s ease;
}
.tangle span:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px -14px rgba(21,59,64,.34); }
.tangle span:nth-child(1){ transform: rotate(-3deg); }
.tangle span:nth-child(2){ transform: rotate(2.5deg) translateY(3px); margin-left:-.3rem; }
.tangle span:nth-child(3){ transform: rotate(-1.5deg); }
.tangle span:nth-child(4){ transform: rotate(3.5deg); margin-left:-.4rem; }
.tangle span:nth-child(5){ transform: rotate(-2.5deg) translateY(2px); }
.tangle span:nth-child(6){ transform: rotate(2deg); margin-left:-.3rem; }
.tangle span:nth-child(7){ transform: rotate(-3.5deg); }
.tangle span:nth-child(8){ transform: rotate(1.5deg) translateY(-2px); margin-left:-.3rem; }
.tangle span.hot{
  background: var(--clay-soft); border-color: color-mix(in srgb, var(--clay) 45%, transparent);
  color: var(--clay-text);
}

/* Responsive refinements */
@media (min-width: 640px){
  .tangle{ max-width: none; gap: .7rem 1rem; }
  .tangle p.copy{ font-size:1rem; }
  .tangle span{ font-size: .95rem; padding:.7rem 1.2rem; }
}

@media (min-width: 1024px){
  /* give the cluster more room and reduce overlap for a cleaner desktop look */
  .tangle{ gap: .9rem 1rem; margin: 0; }
  .tangle span{ box-shadow: 0 18px 40px -24px rgba(21,59,64,.28); }
  .tangle span:nth-child(2), .tangle span:nth-child(4), .tangle span:nth-child(6), .tangle span:nth-child(8){ margin-left:0; transform:none; }
  .tangle span:nth-child(1){ transform: rotate(-4deg) translateY(-3px); }
  .tangle span:nth-child(3){ transform: rotate(-2.5deg); }
  .tangle span:nth-child(5){ transform: rotate(2deg); }
  .tangle span:nth-child(7){ transform: rotate(-1.6deg); }
  .tangle p.copy{ text-align:left; max-width:32rem; }
}

blockquote.line{
  font-family: var(--ff-display); font-style: italic; font-weight:400;
  font-size: 1.2rem; line-height:1.55; color: var(--text);
  border-left: 2px solid var(--accent-2); padding-left: 1.1rem;
  margin-top: 1.6rem;
}

/* ============ DECISÃO — a deliberate pause ============ */
.decisao{ padding-top: 4.6rem; padding-bottom: 5rem; }

/* ============ DIVIDER (breathline) ============ */
/* the thread runs tangled up top and calms into a plain wave by the footer.
   the wrapper is opaque and full-bleed so the ambient backdrop blobs (which
   otherwise peek through this gap unevenly on wide screens) never patch it.
   Its own padding/max-width reuse --pad and --maxw-copy — the same tokens
   .section and .section-inner scale with — so the line's edges always land
   exactly under the paragraph column's edges, at any viewport width. */
.divider{
  background: var(--surface);
  transition: background-color 1.1s ease;
  padding: .2rem 0;
}
.divider .breathline{ display:block; width:100%; max-width:none; aspect-ratio: 400 / 56; height:auto; margin: 0 auto; opacity:.8; }
.divider .breathline path{ fill:none; stroke: var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.divider.is-knot .breathline{ opacity:.9; }
.divider.is-knot .breathline path{ stroke-width:1.6; stroke: var(--clay); opacity:.55; }
.divider.is-calm .breathline path{ stroke-width:1.1; opacity:.6; }

/* ============ TIMELINE ============ */
.timeline{ position:relative; margin-top: 2.2rem; }
.timeline::before{
  content:""; position:absolute; left: 21px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(var(--accent), var(--accent-2));
  opacity:.5;
}
.step{
  position:relative; display:flex; gap:1.2rem; padding-bottom: 2.6rem;
}
.step:last-child{ padding-bottom:0; }
.step-num{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1.5px solid var(--accent);
  font: 700 .95rem/1 var(--ff-display); color:var(--accent);
  position:relative; z-index:1;
}
.step h3{ font-size:1.12rem; margin-bottom:.35rem; display:flex; align-items:center; }
.step p{ color:var(--text-soft); font-size:.95rem; }

.step-icon{
  width:22px; height:22px; flex:none; margin-right:.55rem; color: var(--accent);
}
.step-icon *{
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition: stroke-dashoffset 1s ease, stroke .3s ease;
}
.step.is-in .step-icon *{ stroke-dashoffset:0; }
.step-icon *:nth-child(2){ transition-delay:.15s; }
.step-icon *:nth-child(3){ transition-delay:.3s; }
@media (prefers-reduced-motion: reduce){
  .step-icon *{ transition:none; stroke-dashoffset:0; }
}

/* ============ SOBRE ============ */
.about-panel{
  position:relative; border-radius: var(--radius); overflow:hidden;
  background: var(--surface-2); border:1px solid var(--line-soft);
  transition: background-color .8s ease, border-radius 1.1s ease;
}
.about-banner{
  position:relative; height:126px;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--surface-2) 94%),
    url("Assets/ripples-water.jpg");
  background-size: cover;
  background-position: center;
  display:flex; align-items:flex-end; justify-content:center;
  transition: background-color .8s ease;
}
.avatar{
  width:104px; height:104px; margin-bottom:-52px; position:relative; z-index:1;
  border-radius:50%; flex:none;
  object-fit:cover; object-position:50% 22%;
  background: radial-gradient(circle at 35% 30%, var(--accent), color-mix(in srgb, var(--accent) 55%, black) 85%);
  border: 4px solid var(--surface-2);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.4);
}
.about-body{ padding: 3.6rem 1.6rem 1.9rem; text-align:center; }
.about-name{ font-size:1.35rem; margin-top: 0; }
.about-meta{ color: var(--text-soft); font-size:.92rem; margin-top:.5rem; }
.about-meta li{ margin-top:.2rem; }
.about-quote{ text-align:left; max-width:26rem; margin:1.3rem auto 0; }

/* ============ NÚMEROS ============ */
.stats-grid{ display:flex; flex-direction:column; gap:2.2rem; text-align:center; }
.stat-num, .stat-suffix{ font: 500 2.7rem/1 var(--ff-display); font-variant-numeric: tabular-nums; }
.stat-num{ color: var(--text); }
.stat-suffix{ color: var(--accent); }
.stat p{ margin:.5rem auto 0; max-width:14rem; color: var(--text-soft); font-size:.88rem; }
@media (min-width:640px){
  .stats-grid{ flex-direction:row; justify-content:space-between; }
}

/* ============ TESTEMUNHOS ============ */
.reviews-widget{ margin-top:2rem; min-height:280px; }
.t-note{ margin-top:1.4rem; font-size:.8rem; color:var(--text-soft); opacity:.8; }

/* ============ FAQ ============ */
.faq{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.faq details{
  border:1px solid var(--line-soft); border-radius: calc(var(--radius) * .6);
  padding: 1.1rem 1.3rem; background: var(--surface-2);
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font: 700 .98rem/1.4 var(--ff-body);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ flex:none; width:22px; height:22px; position:relative; }
.faq summary .plus::before, .faq summary .plus::after{
  content:""; position:absolute; background: var(--accent); border-radius:2px;
  transition: transform .3s ease;
}
.faq summary .plus::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq summary .plus::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); }
.faq details[open] summary .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq p{ margin-top: .8rem; color: var(--text-soft); font-size:.94rem; max-width:none; }

/* ============ FINAL CTA ============ */
.final{ text-align:center; padding-top:6.5rem; padding-bottom:6.5rem; }
.final .section-inner{ display:flex; flex-direction:column; align-items:center; }
.final h2{ font-size: clamp(1.8rem, 7vw, 2.6rem); line-height:1.28; }
.final .lede{ margin-top:1.1rem; color:var(--text-soft); }
.final .btn-row{ margin-top:2.1rem; justify-content:center; }

/* ============ FOOTER ============ */
footer{
  padding: 3.4rem var(--pad) 2.4rem; border-top:1px solid var(--line-soft);
}
.footer-grid{
  max-width: var(--maxw-wide); margin:0 auto;
  display:flex; flex-direction:column; gap:2rem;
}
.footer-cols{ display:flex; flex-direction:column; gap:1.6rem; }
.footer-logo{
  width:84px; height:auto; object-fit:contain; margin-bottom:.8rem;
}
.footer-cols h4{ font: 700 .74rem/1 var(--ff-body); text-transform:uppercase; letter-spacing:.14em; color:var(--text-soft); margin-bottom:.7rem; }
.footer-cols ul{ display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; color:var(--text-soft); }
.footer-cols a:hover{ color:var(--accent); }
.footer-bottom{
  display:flex; flex-direction:column; gap:.6rem;
  padding-top:1.6rem; border-top:1px solid var(--line-soft);
  font-size:.8rem; color:var(--text-soft);
}
.footer-tag{ font-family: var(--ff-display); font-style:italic; color:var(--text); font-size:1rem; }

/* ============ RESPONSIVE ============ */
@media (min-width: 640px){
  :root{ --pad: 2.2rem; }
  .btn{ min-height:56px; }
  .footer-cols{ flex-direction:row; justify-content:space-between; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width: 1024px){
  :root{ --pad: 3rem; --maxw-copy: 44rem; }
  .section{ padding: 6rem var(--pad) 6.4rem; }
  .divider{ padding: .35rem 0; }
  .divider .breathline{ max-width:none; width:100%; }
  .divider .breathline path{ stroke-width:1.8; }
  .divider.is-knot .breathline path{ stroke-width:2.2; opacity:.8; }
  .divider.is-calm .breathline path{ stroke-width:1.6; opacity:.72; }
  .step{ align-items:center; }
  .about-panel{ display:flex; align-items:stretch; }
  .about-banner{
    width:36%; height:auto; flex:none;
    align-items:flex-end; justify-content:flex-end; padding:1.5rem;
  }
  .avatar{ margin-bottom:0; }
  .about-body{
    flex:1; text-align:left; padding:2.6rem 3rem;
    display:flex; flex-direction:column; justify-content:center;
  }
  .about-quote{ margin-left:0; }

  /* dor: the tangle spills into its own column instead of a centered mobile stack */
  .dor-inner{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: 3.5rem;
    align-items:start;
    max-width: 62rem;
    grid-template-areas:
      "eyebrow visual"
      "heading visual"
      "copy    visual"
      "quote   visual";
  }
  .dor-inner > .eyebrow{ grid-area: eyebrow; }
  .dor-inner > h2{ grid-area: heading; }
  .dor-inner > p.copy{ grid-area: copy; }
  .dor-inner > .tangle{ grid-area: visual; align-self:center; max-width:none; margin:0; }
  .dor-inner > blockquote{ grid-area: quote; margin-top:2.2rem; align-self:start; }

  /* decisão: a wide, deliberate breath before the roadmap */
  .decisao{ padding-top:7rem; padding-bottom:7.4rem; }
  .decisao-grid{ max-width: 40rem; }
  .decisao h2{ font-size: clamp(2rem, 3.2vw, 2.6rem); }

  /* hero: text and the framed photo sit side by side instead of stacking */
  .hero-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; align-items:center;
    column-gap: 4rem; max-width: 66rem;
    padding: calc(4rem + env(safe-area-inset-top)) 3rem 4.4rem;
  }
  .hero-photo{ margin-top:0; max-width:440px; justify-self:end; }
}

/* card radius follows journey */
.t-card, .faq details{ border-radius: var(--radius); }