/* ==========================================================================
   LIZANDRA BARBUTO — Sistema de Design
   Psicoterapia · Facilitação · Processos colaborativos
   --------------------------------------------------------------------------
   Paleta oficial da marca (Sistema de Cores, PDF)
   Referência visual: editorial minimalista, respiro amplo, alto contraste
   ========================================================================== *//* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */:root {
  /* --- Marca --- */
  --brand-cyan:        #01d6dd;   /* Primary — destaque, hover, detalhes vivos */
  --brand-cyan-light:  #b3f5f6;   /* Primary Light — fundos suaves, wash */
  --brand-teal:        #019ea3;   /* Primary Dark — cor interativa dominante */
  --brand-earth:       #d4a373;   /* Accent Earthy — numerais, grifos, calor */

  /* --- Neutros --- */
  --ink:        #2e3231;          /* Neutral 900 — títulos */
  --ink-body:   #535956;          /* Neutral 700 — corpo */
  --ink-muted:  #949e9b;          /* Neutral 500 — apoio */
  --line:       #dadddc;          /* Neutral 300 — bordas */
  --line-2:     #c4c4c4;          /* borda mais marcada, cinza */
  --bg:         #fafafa;          /* Neutral 100 — fundo */
  --surface:    #ffffff;          /* Cards / superfícies */

  /* --- Derivados --- */
  --bg-warm:    #f2f2f2;          /* cinza neutro, mesma luminância do areia anterior */
  --bg-deep:    #23292a;          /* seções escuras */
  --bg-deep-2:  #1b201f;
  --line-soft:  rgba(46, 50, 49, .10);
  --line-dark:  rgba(250, 250, 250, .16);

  /* --- Variantes acessíveis (texto pequeno sobre fundo claro) ---------------
     As cores da marca seguem intactas em preenchimentos, ícones e áreas
     grandes. Para texto pequeno usamos versões escurecidas do mesmo matiz,
     de modo a cumprir WCAG 2.1 AA (contraste >= 4.5:1).                     */
  --teal-text:  #007b7f;          /* 4.7:1  sobre #fafafa */
  --teal-solid: #018184;          /* 4.7:1  com texto branco (botões)      */
  --earth-text: #946432;          /* 4.6:1  sobre #fafafa */
  --muted-text: #67716f;          /* 4.6:1  sobre #fafafa */

  /* --- Semântica --- */
  --success: #019ea3;
  --error:   #c97a7e;
  --warning: #d4a373;

  /* --- Tipografia --- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 6.2vw, 5.75rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:      clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --track-wide:   0.08em;
  --track-wider:  0.16em;
  --track-widest: 0.24em;

  /* --- Espaçamento --- */
  --container: 1280px;
  --container-narrow: 940px;
  --container-text: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --space-section: clamp(4.5rem, 10vw, 10rem);
  --space-block:   clamp(2rem, 4vw, 3.5rem);
  --space-el:      clamp(1.25rem, 2vw, 2rem);

  /* --- Movimento --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .38s;
  --dur-slow: .7s;
}/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */*, *::before, *::after { box-sizing: border-box; }html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ATENÇÃO: overflow-x:hidden no body força overflow-y:auto, o que transforma
     o body em contêiner de rolagem e QUEBRA position:sticky (gaveta, colunas
     fixas). 'clip' recorta sem criar contêiner de rolagem. */
  overflow-x: hidden;
}@supports (overflow: clip) {
  body { overflow-x: clip; }
}img, picture, video { max-width: 100%; display: block; }button, input, textarea, select { font: inherit; color: inherit; }a { color: inherit; text-decoration: none; }h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 400; }p { margin: 0 0 1.15em; }p:last-child { margin-bottom: 0; }::selection { background: var(--brand-cyan-light); color: var(--ink); }:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 3px;
}/* Acessibilidade */.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase;
  transition: top .2s;
}.skip-link:focus { top: 1rem; }/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}.display { font-size: var(--fs-display); letter-spacing: 0.015em; }.h1 { font-size: var(--fs-h1); }.h2 { font-size: var(--fs-h2); line-height: 1.08; }.h3 {
  font-size: var(--fs-h3); line-height: 1.2;
  letter-spacing: var(--track-wide);
}/* Variante serif "editorial" — caixa baixa, para textos de voz pessoal */.serif-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink);
}.serif-quote em { font-style: italic; color: var(--teal-text); }.h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}/* Eyebrow / rótulo */.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--muted-text);
  margin: 0 0 1.5rem;
}.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--brand-earth);
  flex-shrink: 0;
}.eyebrow.no-rule::before { display: none; }.eyebrow--light { color: rgba(250,250,250,.62); }/* Numeração de seção ( 01 ) */.section-num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--earth-text);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}.section-num::before { content: "( "; }.section-num::after  { content: " )"; }/* Corpo */.lead {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: var(--ink-body);
  max-width: 60ch;
  text-wrap: pretty;          /* evita palavra órfã na última linha */
}/* parágrafo centralizado: linhas equilibradas, sem "viúva" */.lead.center-x, p.center-x { text-wrap: balance; }.body   { max-width: var(--container-text); }.small  { font-size: var(--fs-sm); }.xs     { font-size: var(--fs-xs); }.muted  { color: var(--muted-text); }.on-dark, .on-dark p { color: rgba(250,250,250,.74); }.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4,
.on-dark .display, .on-dark .serif-quote { color: #fafafa; }.on-dark .serif-quote em { color: var(--brand-cyan); }/* Grifo */.mark-line {
  background-image: linear-gradient(transparent 62%, var(--brand-cyan-light) 62%);
  padding: 0 .1em;
}/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */.container   { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }.container-n { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }.section { padding-block: var(--space-section); position: relative; }.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }.section--warm { background: var(--bg-warm); }.section--surface { background: var(--surface); }.section--deep { background: var(--bg-deep); }.section--deep-2 { background: var(--bg-deep-2); }.divider { height: 1px; background: var(--line); border: 0; margin: 0; }.divider--soft { background: var(--line-soft); }.divider--dark { background: var(--line-dark); }.grid { display: grid; gap: clamp(2rem, 3.5vw, 3rem); }.g-2 { grid-template-columns: repeat(2, 1fr); }.g-3 { grid-template-columns: repeat(3, 1fr); }.g-4 { grid-template-columns: repeat(4, 1fr); }.g-5-7 { grid-template-columns: 5fr 7fr; }.g-7-5 { grid-template-columns: 7fr 5fr; }.g-4-8 { grid-template-columns: 4fr 8fr; }.g-8-4 { grid-template-columns: 8fr 4fr; }.g-6-6 { grid-template-columns: 1fr 1fr; }.items-center { align-items: center; }.items-end { align-items: flex-end; }.items-start { align-items: start; }.stack > * + * { margin-top: var(--space-el); }.stack-sm > * + * { margin-top: .75rem; }.stack-lg > * + * { margin-top: var(--space-block); }.flow > * + * { margin-top: 1.15em; }.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }.row-between { display: flex; gap: 1.5rem; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }.center { text-align: center; }.center-x { margin-inline: auto; }/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;   /* acima do menu */
  padding-block: 1.25rem;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease),
              border-color var(--dur) var(--ease), backdrop-filter var(--dur);
  border-bottom: 1px solid transparent;
}.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  /* o topo escapa do grid de 1280: em telas largas isso afasta os links
     da borda da foto do hero, que para em 760px */
  max-width: none; }.site-header.is-scrolled {
  background: rgba(250, 250, 250, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  padding-block: .9rem;
}.site-header.on-hero:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); }/* Logo — arquivo único recolorido por filtro CSS quando sobre fundo escuro */.brand { display: inline-flex; align-items: center; }.brand__logo {
  display: block;
  width: 228px;
  height: auto;               /* mantém a proporção original 359:44 */
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}.brand:hover .brand__logo { opacity: .62; }.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 1.4px; background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}.nav-toggle span:nth-child(1) { top: 15px; }.nav-toggle span:nth-child(2) { top: 23px; }.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 2rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fafafa;
  border-radius: 2px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
  z-index: 0;
}.btn > * , .btn { position: relative; }.btn span, .btn svg { position: relative; z-index: 1; }.btn:hover { color: var(--ink); border-color: var(--ink); }.btn:hover::before { transform: scaleY(1); transform-origin: top; }.btn--teal { background: var(--teal-solid); border-color: var(--teal-solid); color: #fff; }.btn--teal::before { background: var(--bg); }.btn--teal:hover { color: var(--teal-text); }.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }.btn--ghost::before { background: var(--ink); }.btn--ghost:hover { color: #fafafa; border-color: var(--ink); }.btn--light { background: transparent; color: #fafafa; border-color: rgba(250,250,250,.5); }.btn--light::before { background: #fafafa; }.btn--light:hover { color: var(--ink); border-color: #fafafa; }.btn--solid-light { background: #fafafa; color: var(--ink); border-color: #fafafa; }.btn--solid-light::before { background: var(--teal-solid); }.btn--solid-light:hover { color: #fff; border-color: var(--teal-solid); }.btn--sm { padding: .8rem 1.4rem; font-size: .75rem; }.btn--block { width: 100%; }/* Link com seta */.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--teal-text); font-weight: 500;
  padding-bottom: .35rem; border-bottom: 1px solid currentColor;
  transition: gap var(--dur) var(--ease), color var(--dur);
}.link-arrow:hover { gap: 1rem; color: var(--ink); }.link-arrow--light { color: var(--brand-cyan); }.link-arrow--light:hover { color: #fafafa; }/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- *//* Hero interno (páginas) */.page-hero {
  position: relative;
  padding-top: clamp(9rem, 16vw, 13rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--bg-warm);
  overflow: hidden;
}.page-hero--deep { background: var(--bg-deep); }.page-hero--deep .h1, .page-hero--deep .display { color: #fafafa; }.page-hero--deep .lead { color: rgba(250,250,250,.74); }.page-hero__media { position: absolute; inset: 0; z-index: 0; }.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(28,30,30,.88) 0%, rgba(28,30,30,.66) 45%, rgba(28,30,30,.30) 100%);
}.page-hero__inner { position: relative; z-index: 1; }/* Breadcrumb */.crumbs {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  color: var(--muted-text); margin-bottom: 1.75rem;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}.crumbs a { transition: color var(--dur); }.crumbs a:hover { color: var(--teal-text); }.crumbs .sep { opacity: .5; }.crumbs strong { color: var(--ink); font-weight: 500; }.page-hero--deep .crumbs { color: rgba(250,250,250,.55); }.page-hero--deep .crumbs strong { color: #fafafa; }.page-hero--deep .crumbs a:hover { color: var(--brand-cyan); }/* --------------------------------------------------------------------------
   8. MÍDIA / FIGURAS
   -------------------------------------------------------------------------- */.fig { position: relative; overflow: hidden; background: var(--bg-warm); }.fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}.fig--hover:hover img { transform: scale(1.045); }.r-1-1  { aspect-ratio: 1 / 1; }.r-3-4  { aspect-ratio: 3 / 4; }.r-4-3  { aspect-ratio: 4 / 3; }.r-4-5  { aspect-ratio: 4 / 5; }.r-16-9 { aspect-ratio: 16 / 9; }.r-16-10{ aspect-ratio: 16 / 10; }.r-21-9 { aspect-ratio: 21 / 9; }.fig-caption {
  margin-top: .9rem; font-size: var(--fs-xs); color: var(--muted-text);
  letter-spacing: .02em;
}/* Faixa de imagem full-bleed *//* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: 2px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur);
  display: flex; flex-direction: column;
}.card:hover { border-color: var(--teal-text); }a.card:hover { transform: translateY(-3px); }.card--flat { background: transparent; border: 0; padding: 0; }.card--line {
  background: transparent; border: 0; border-top: 1px solid var(--line);
  padding: 1.75rem 0 0; border-radius: 0;
}.card--line:hover { border-color: var(--ink); }.card--deep {
  background: rgba(250,250,250,.045);
  border-color: rgba(250,250,250,.14);
}.card--deep:hover { border-color: var(--brand-cyan); background: rgba(250,250,250,.07); }.card__num {
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--earth-text); margin-bottom: 1rem; font-variant-numeric: tabular-nums;
}.card .h4 { margin-bottom: .6rem; }.card p { font-size: var(--fs-sm); }.card__media { margin: -1px -1px 1.5rem; overflow: hidden; }.card--flat .card__media { margin: 0 0 1.35rem; }.card__foot { margin-top: auto; padding-top: 1.35rem; }/* Card-link com imagem (vitrine) */.tile { display: block; position: relative; overflow: hidden; }.tile__media { position: relative; overflow: hidden; }.tile__media img { transition: transform 1.05s var(--ease-out); }.tile:hover .tile__media img { transform: scale(1.05); }.tile__body { padding-top: 1.35rem; }.tile__body .h4 { transition: color var(--dur); }.tile:hover .h4 { color: var(--teal-text); }/* --------------------------------------------------------------------------
   10. LISTAS / ÍNDICE
   -------------------------------------------------------------------------- */.idx { border-top: 1px solid var(--line); --idx-run: 12px; }.idx__item {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.5rem;
  align-items: baseline;
  /* o recuo à direita é a pista da seta: ela desliza até a borda sem
     esbarrar no clip-path do data-anim="wipe", que corta na caixa do item */
  padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--idx-run) clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}/* filete que preenche da esquerda, acompanhando o deslize */.idx__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ease-out);
}a.idx__item:hover::after { transform: scaleX(1); }/* cada parte desliza com um respiro diferente: leitura de "rolar pra frente" */.idx__n, .idx__body, .idx__go {
  transition: transform .8s var(--ease-out), color .45s var(--ease);
}a.idx__item:hover .idx__n    { transform: translateX(10px); transition-delay: 0s; }a.idx__item:hover .idx__body { transform: translateX(18px); transition-delay: .05s; }a.idx__item:hover .idx__go   { transform: translateX(var(--idx-run)); transition-delay: .1s; }.idx__n {
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--earth-text); font-variant-numeric: tabular-nums;
}.idx__body .h3 { display: block; }.idx__body p { margin-top: .45rem; font-size: var(--fs-sm); max-width: 62ch; }.idx__go { font-size: 1.15rem; color: var(--muted-text); }a.idx__item:hover .idx__go { color: var(--teal-text); }.idx--dark { border-color: var(--line-dark); }.idx--dark .idx__item { border-color: var(--line-dark); }/* Lista de credenciais */.creds { list-style: none; margin: 0; padding: 0; }.creds li {
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
}.creds strong { color: var(--ink); font-weight: 500; font-size: var(--fs-sm); }.creds span { font-size: var(--fs-xs); color: var(--muted-text); text-align: right; }/* Definição (label + texto) *//* --------------------------------------------------------------------------
   Ficha técnica: dois dados numéricos em destaque + lista de atributos
   -------------------------------------------------------------------------- */.spec__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}.spec__stat + .spec__stat { padding-left: clamp(1.5rem, 3vw, 2.75rem); border-left: 1px solid var(--line); }.spec__n {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 5.4vw, 4.25rem); line-height: .96;
  color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}.spec__u {
  font-style: normal; margin-left: .18em;
  font-size: .32em; letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--earth-text);
  vertical-align: .55em;
}.spec__l {
  display: block; margin-top: .85rem; max-width: 30ch;
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted-text); line-height: 1.5;
}.spec__list { margin: 0; border-top: 1px solid var(--line); }.spec__list > div {
  display: grid; grid-template-columns: minmax(110px, 8.5rem) 1fr;
  gap: .35rem 1.5rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}.spec__list dt {
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--earth-text);
}.spec__list dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-body); max-width: 52ch; }/* variante da ficha em que o destaque é uma palavra, não um numeral */.spec__stats--palavra .spec__n {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink);
}.spec__nota { margin-top: 1.5rem; max-width: 58ch; }/* A foto acompanha a altura da ficha ao lado. Duas coisas são necessárias:
   1) a imagem sai do fluxo (position:absolute), senão sua altura intrínseca
      — 549px a 412px de largura — entra no cálculo da linha da grade e a
      linha cresce para caber a foto, em vez de a foto encolher;
   2) flex-basis 0, para a coluna medir só o título e depois esticar. */.spec-media { display: flex; flex-direction: column; min-height: 0; }.spec-media > .fig { flex: 1 1 0; min-height: 220px; }.spec-media > .fig > img { position: absolute; inset: 0; }@media (max-width: 900px) {
  .spec-media > .fig { flex: 0 0 auto; aspect-ratio: 4 / 3; }
}/* --------------------------------------------------------------------------
   Seção sobre fotografia: imagem de fundo rebaixada, conteúdo por cima
   -------------------------------------------------------------------------- */.section--shot { position: relative; overflow: hidden; background: var(--bg-deep-2); }.shot__bg { position: absolute; inset: 0; z-index: 0; }.shot__bg img { width: 100%; height: 100%; object-fit: cover; }/* a cortina garante o contraste do texto qualquer que seja a foto:
   a 82%, o ponto mais claro de ondas.jpg ainda dá 4,76:1 com #fafafa */.shot__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,30,30,.90) 0%, rgba(28,30,30,.86) 45%, rgba(28,30,30,.92) 100%);
}/* .on-dark usa corpo a 74% de opacidade, o que basta sobre cor chapada
   mas não sobre foto: aqui o texto sobe para 90% */.section--shot p { color: rgba(250,250,250,.9); }.section--shot > .container { position: relative; z-index: 1; }/* filetes e bordas dos cards precisam clarear sobre o fundo escuro */.section--shot .card--line { border-top-color: rgba(250,250,250,.22); }.section--shot .card--line:hover { border-top-color: var(--brand-cyan); }.section--shot .section-num { color: rgba(250,250,250,.5); }@media (max-width: 600px) {
  .spec__stats { grid-template-columns: 1fr; gap: 1.5rem; }
  .spec__stat + .spec__stat {
    padding-left: 0; border-left: 0;
    padding-top: 1.5rem; border-top: 1px solid var(--line);
  }
  .spec__list > div { grid-template-columns: 1fr; gap: .3rem; }
}/* --------------------------------------------------------------------------
   11. PILLS / TAGS
   -------------------------------------------------------------------------- */.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-wide); text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-body);
  border-radius: 100px; background: var(--surface);
  transition: all var(--dur) var(--ease);
}.pill--active { background: var(--ink); border-color: var(--ink); color: #fafafa; }
/* o .card é flex-column: sem isso o item de flex estica na transversal e o
   selo ocupa a largura toda, apesar de ser inline-flex */
.card > .pill { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Formulário de interesse: card de oferta abre um diálogo
   -------------------------------------------------------------------------- */
.card--oferta { cursor: pointer; }
.card--oferta:hover .link-arrow { color: var(--teal-text); }

.fmi { border: 0; padding: 0; background: transparent;
  max-width: min(34rem, calc(100vw - 2rem)); max-height: min(90vh, 44rem); color: var(--ink-body); }
.fmi[open] { display: block; }        /* fora do [open] o navegador esconde */
.fmi::backdrop { background: rgba(28,30,30,.62); backdrop-filter: blur(3px); }
.fmi__box {
  position: relative; background: var(--surface);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
}
.fmi__fechar {
  position: absolute; top: .75rem; right: .75rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--muted-text); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fmi__fechar:hover { background: var(--teal-solid); border-color: var(--teal-solid); color: #fafafa; }

.fmi__form { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted-text);
}
.campo .input { width: 100%; }
.campo__erro { font-size: var(--fs-xs); color: #a3402f; min-height: 1em; }
.campo--erro .input { border-color: #a3402f; }
.fmi__nota { font-size: var(--fs-xs); color: var(--muted-text); }

.fmi__certo {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(1,158,163,.12); color: var(--teal-text);
}
.btn--contorno { background: transparent; color: var(--ink); border-color: var(--muted-text); }
html:has(dialog.fmi[open]) { overflow: hidden; }

/* --------------------------------------------------------------------------
   Olhares: trilho horizontal preso ao scroll
   -------------------------------------------------------------------------- */
/* a altura extra é o "combustível" do deslocamento: 1 tela por álbum */
.hscroll { height: calc(var(--n, 6) * 100vh); background: var(--bg-warm); }
.hscroll__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: flex; align-items: center;
}
.hscroll__track {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.alb {
  position: relative; flex: 0 0 auto;
  width: min(62vw, 104vh); height: min(64vh, 38vw);
  overflow: hidden; border: 0; padding: 0; background: var(--bg-deep-2);
  cursor: pointer; text-align: left; color: #fafafa;
}
.alb__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.alb:hover .alb__img { transform: scale(1.04); }
.alb__veil {
  position: absolute; inset: 0;
  background: linear-gradient(15deg, rgba(28,30,30,.78) 0%, rgba(28,30,30,.34) 46%, rgba(28,30,30,.05) 100%);
}
.alb__body {
  position: absolute; left: clamp(1.5rem, 3vw, 3rem); right: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 3.2vw, 2.75rem);
  display: grid; gap: .45rem; max-width: 46ch;
}
.alb__num {
  font-size: var(--fs-xs); letter-spacing: var(--track-wider); color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}
.alb__nome {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: .95; letter-spacing: .02em;
}
.alb__texto { font-size: var(--fs-sm); color: rgba(250,250,250,.82); }
.alb__count {
  margin-top: .5rem; font-size: var(--fs-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: rgba(250,250,250,.66);
  transition: color var(--dur) var(--ease);
}
.alb:hover .alb__count { color: var(--brand-cyan); }
.hscroll__conta {
  position: absolute; right: var(--gutter); top: clamp(1.25rem, 3vh, 2.5rem);
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--muted-text); font-variant-numeric: tabular-nums;
}

/* celular e quem prefere menos movimento: pilha vertical simples */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hscroll { height: auto; }
  .hscroll__sticky { position: static; height: auto; overflow: visible; display: block; }
  .hscroll__track {
    transform: none !important;
    flex-direction: column; padding-block: var(--gutter);
  }
  .alb { width: 100%; height: 62vh; min-height: 340px; }
  .hscroll__conta { display: none; }
}

/* --------------------------------------------------------------------------
   Página de artigo
   -------------------------------------------------------------------------- */
/* títulos de artigo são longos: corpo menor que o padrão dos topos */
.page-hero__title--longo { font-size: clamp(1.6rem, 3.4vw, 3rem); max-width: 26ch; }

.artigo p { margin: 0 0 1.25em; }
.artigo h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: none;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--ink);
  margin: 2.2em 0 .8em; letter-spacing: .01em;
}
.artigo ul, .artigo ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.artigo li { margin-bottom: .55em; }
.artigo li::marker { color: var(--earth-text); }
.artigo em { color: var(--teal-text); }
.artigo a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 3px; }
.artigo blockquote {
  margin: 1.75em 0; padding-left: 1.5rem; border-left: 2px solid var(--brand-earth);
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15em; color: var(--ink);
}
.artigo__video {
  position: relative; aspect-ratio: 16 / 9; margin-bottom: 2rem; background: var(--bg-deep-2);
}
.artigo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* o fim do artigo encosta no Leia também: os dois paddings somavam até 320px */
.section--fim-artigo { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
[data-leia-tambem] { padding-top: clamp(2.75rem, 5.5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   Olhares: card de álbum e visor em tela cheia
   -------------------------------------------------------------------------- */
/* o card é <button>: precisa perder a aparência de controle */
.tile--alb {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
}
.tile--alb .tile__media { position: relative; }
.tile--alb .tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(28,30,30,.18); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.tile--alb:hover .tile__media::after { opacity: 1; }

.lb {
  border: 0; padding: 0; background: transparent;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
}
/* o display fica no estado aberto: declarado solto, ele venceria a regra do
   navegador (dialog:not([open]) { display: none }) e o conteúdo continuaria
   na página depois de fechar */
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(20,24,23,.95); }
.lb__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.lb__img {
  max-width: min(92vw, 1600px); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  animation: lb-entra .4s var(--ease-out);
}
@keyframes lb-entra { from { opacity: 0; transform: scale(.985); } }
.lb__nome {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(250,250,250,.92);
  text-align: center; max-width: 60ch;
}
.lb__fechar, .lb__nav {
  position: fixed; z-index: 2; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250,250,250,.12); border: 1px solid rgba(250,250,250,.42);
  color: #fafafa;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb__fechar:hover, .lb__nav:hover { background: rgba(250,250,250,.3); border-color: #fafafa; }
.lb__fechar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--ant  { left: clamp(.75rem, 3vw, 2rem); }
.lb__nav--prox { right: clamp(.75rem, 3vw, 2rem); }
.lb__conta {
  position: fixed; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: rgba(250,250,250,.72); font-variant-numeric: tabular-nums;
}
html:has(dialog.lb[open]) { overflow: hidden; }

@media (max-width: 600px) {
  .lb__img { max-height: 68vh; }
  .lb__nav { width: 46px; height: 46px; }
  .lb__nav--ant { left: .5rem; } .lb__nav--prox { right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lb__img { animation: none; }
}
}.pill--teal { background: rgba(1,158,163,.10); border-color: rgba(1,125,129,.42); color: var(--teal-text); }.pill--earth { background: rgba(212,163,115,.16); border-color: rgba(153,104,52,.42); color: var(--earth-text); }button.pill { cursor: pointer; }button.pill:hover { border-color: var(--ink); }.tag {
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--earth-text);
}.cms-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--earth-text); }/* --------------------------------------------------------------------------
   12. CITAÇÃO / DEPOIMENTO
   -------------------------------------------------------------------------- */.quote { margin: 0; }.quote p {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem); line-height: 1.38;
  color: var(--ink); font-style: italic;
}.quote footer {
  margin-top: 1.5rem; font-size: var(--fs-xs);
  letter-spacing: var(--track-wide); color: var(--muted-text);
  text-transform: uppercase;
}.on-dark .quote p, .quote.on-dark p { color: #fafafa; }.on-dark .quote footer, .quote.on-dark footer { color: rgba(250,250,250,.55); }/* --------------------------------------------------------------------------
   13. FORMULÁRIO
   -------------------------------------------------------------------------- */.field { margin-bottom: 1.5rem; }.field label {
  display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--muted-text); margin-bottom: .6rem;
}.input, .textarea, select.input {
  width: 100%; padding: .95rem 1.1rem;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 2px; font-size: var(--fs-sm);
  transition: border-color var(--dur), box-shadow var(--dur);
}.input::placeholder, .textarea::placeholder { color: var(--muted-text); }.input:focus, .textarea:focus {
  outline: none; border-color: var(--teal-text);
  box-shadow: 0 0 0 3px rgba(1,125,129,.16);
}.textarea { min-height: 140px; resize: vertical; font-family: inherit; }.choice-row { display: flex; gap: .6rem; flex-wrap: wrap; }.choice { position: relative; }.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fafafa; }.choice input:focus-visible + span { outline: 2px solid var(--brand-teal); outline-offset: 2px; }.choice span { cursor: pointer; }/* Newsletter inline */.inline-form { display: flex; gap: .75rem; flex-wrap: wrap; max-width: 520px; }.inline-form .input { flex: 1 1 240px; }/* --------------------------------------------------------------------------
   14. CTA FIXO
   -------------------------------------------------------------------------- */.fab {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.5rem;
  background: var(--teal-solid); color: #fff;
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 500;
  border-radius: 100px;
  box-shadow: 0 10px 34px rgba(1,129,132,.34);
  opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur);
}.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }.fab:hover { background: var(--ink); box-shadow: 0 12px 38px rgba(46,50,49,.3); }.fab svg { flex-shrink: 0; }/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */.site-footer { background: var(--bg-deep-2); color: rgba(250,250,250,.7); padding-block: clamp(3.5rem, 7vw, 6rem) 0; }.site-footer a { transition: color var(--dur); }.site-footer a:hover { color: var(--brand-cyan); }.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }.footer-brand .brand__logo { filter: brightness(0) invert(1); width: 268px; }.footer-brand p { margin-top: 0; font-size: var(--fs-sm); max-width: 34ch; color: rgba(250,250,250,.55); }.footer-brand .eyebrow { margin-bottom: 1.15rem; }.site-footer h5 {
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-widest); text-transform: uppercase;
  color: rgba(250,250,250,.42); margin: 0 0 1.15rem; font-weight: 500;
}.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }.site-footer li { font-size: var(--fs-sm); }.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-xs); color: rgba(250,250,250,.42);
}/* --------------------------------------------------------------------------
   16. ANIMAÇÃO DE ENTRADA
   -------------------------------------------------------------------------- */[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}[data-reveal].is-in { opacity: 1; transform: none; }[data-reveal][data-delay="1"] { transition-delay: .09s; }[data-reveal][data-delay="2"] { transition-delay: .18s; }[data-reveal][data-delay="3"] { transition-delay: .27s; }[data-reveal][data-delay="4"] { transition-delay: .36s; }[data-reveal][data-delay="5"] { transition-delay: .45s; }[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-out); }[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}/* --------------------------------------------------------------------------
   17. UTILITÁRIOS
   -------------------------------------------------------------------------- */.mt-0 { margin-top: 0 !important; }.mt-1 { margin-top: .75rem; }.mt-2 { margin-top: 1.5rem; }.mt-3 { margin-top: 2.25rem; }.mt-4 { margin-top: 3rem; }.mb-2 { margin-bottom: 1.5rem; }.mb-3 { margin-bottom: 2.25rem; }.maxw-sm { max-width: 46ch; }.maxw-md { max-width: 60ch; }.maxw-lg { max-width: 72ch; }/* --------------------------------------------------------------------------
   18. RESPONSIVO
   -------------------------------------------------------------------------- */@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}@media (max-width: 900px) {.g-3, .g-5-7, .g-7-5, .g-4-8, .g-8-4, .g-6-6 { grid-template-columns: 1fr; }.g-2 { grid-template-columns: 1fr; }.sticky-col { position: static; }.idx__item { grid-template-columns: 3rem 1fr auto; gap: 1rem; }.swap__item { grid-template-columns: 2.75rem 1fr; }.idx { --idx-run: 8px; }}@media (max-width: 600px) {
  .g-4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: left; }
  .creds li { grid-template-columns: 1fr; gap: .2rem; }
  .creds span { text-align: left; }
  .btn { width: 100%; }
  .brand__logo { width: 190px; }
  .footer-brand .brand__logo { width: 214px; }
}/* --------------------------------------------------------------------------
   19. ACORDEÃO (FAQ)
   -------------------------------------------------------------------------- */[data-accordion] details { border-bottom: 1px solid var(--line); }[data-accordion] details:first-child { border-top: 1px solid var(--line); }[data-accordion] summary {
  cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative; list-style: none;
  transition: color var(--dur);
}[data-accordion] summary::-webkit-details-marker { display: none; }[data-accordion] summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1.4px solid var(--muted-text);
  border-bottom: 1.4px solid var(--muted-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease), border-color var(--dur);
}[data-accordion] summary:hover { color: var(--teal-text); }[data-accordion] summary:hover::after { border-color: var(--teal-text); }[data-accordion] details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }/* painel de altura animada: o JS mede e transiciona; sem JS, abre normal */[data-accordion] .ac__panel {
  height: 0; overflow: hidden;
  transition: height .46s var(--ease-out);
}[data-accordion] details[open] .ac__panel { height: auto; }[data-accordion] .ac__inner {
  padding-bottom: 1.5rem; max-width: 62ch;
  opacity: 0; transform: translateY(-7px);
  transition: opacity .34s var(--ease), transform .44s var(--ease-out);
  transition-delay: .06s;
}[data-accordion] details[open] .ac__inner { opacity: 1; transform: none; }[data-accordion] details.is-closing .ac__inner { opacity: 0; transform: translateY(-7px); transition-delay: 0s; }[data-accordion] details > p { padding-bottom: 1.5rem; max-width: 62ch; }/* --------------------------------------------------------------------------
   Lista que troca a imagem ao lado (Quem busca esta escuta)
   -------------------------------------------------------------------------- */.swap__stage { position: relative; }.fig .swap__img {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity .75s var(--ease-out), transform 1.4s var(--ease-out);
}.fig .swap__img.is-on { opacity: 1; transform: none; }.swap__badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  min-width: 3.25rem; padding: .55rem .7rem;
  background: var(--bg-deep); color: #fafafa;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1;
  letter-spacing: var(--track-wider); text-align: center;
  font-variant-numeric: tabular-nums;
}.swap__badge i { font-style: normal; }/* --------------------------------------------------------------------------
   Carrossel de depoimentos
   -------------------------------------------------------------------------- *//* todos os slides na mesma célula: a altura vira a do maior e nada pula */.tst__slides { display: grid; }.tst__slide {
  grid-area: 1 / 1;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}.tst__slide.is-on { opacity: 1; pointer-events: auto; }.tst__slide footer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease) .25s, transform .6s var(--ease-out) .25s;
}.tst__slide.is-on footer { opacity: 1; transform: none; }/* "Ver depoimento completo" */.tst__more {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--teal-text); position: relative;
}.tst__more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .5s var(--ease-out);
}.tst__more:hover::after { transform: scaleX(0); }/* --------------------------------------------------------------------------
   Diálogo do depoimento completo
   -------------------------------------------------------------------------- */.modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(46rem, calc(100vw - 2.5rem));
  max-height: min(84vh, 52rem);
  color: var(--ink-body);
}.modal::backdrop { background: rgba(28,30,30,.62); backdrop-filter: blur(3px); }.modal__box {
  position: relative; background: var(--surface);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
}.modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--muted-text); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}.modal__close:hover { background: var(--teal-solid); border-color: var(--teal-solid); color: #fafafa; }.modal__body { margin-top: 1.25rem; }.modal__body p {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--ink);
}.modal__body p + p { margin-top: 1.1rem; }.modal__who {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted-text);
}/* trava a rolagem do fundo enquanto o diálogo está aberto */html:has(dialog.modal[open]) { overflow: hidden; }@media (prefers-reduced-motion: reduce) {
  .tst__more::after { transition-duration: .01ms; }
}.px-frame > [data-parallax] > .tst__img {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity .7s var(--ease-out), transform 1.5s var(--ease-out);
}.px-frame > [data-parallax] > .tst__img.is-on { opacity: 1; transform: none; }.tst__ctrl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem);
}.tst__dots { display: flex; gap: .55rem; }.tst__dot {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 34px; height: 44px; padding: 21px 0; /* alvo de toque de 44px de altura */
  position: relative;
}.tst__dot::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: var(--muted-text);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  transform-origin: left;
}.tst__dot:hover::after { background: var(--ink); }.tst__dot.is-on::after { background: var(--teal-solid); transform: scaleY(2); }.tst__arrows { display: flex; gap: .5rem; }.tst__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--muted-text); color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}.tst__arrow:hover { background: var(--teal-solid); border-color: var(--teal-solid); color: #fafafa; }.tst__arrow:active { transform: translateY(1px); }@media (max-width: 600px) {
  .tst__ctrl { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}@media (prefers-reduced-motion: reduce) {
  .tst__slide, .tst__slide footer,
  .px-frame > [data-parallax] > .tst__img { transition-duration: .01ms; transform: none; }
}.swap__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }.swap__item {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: .3rem 1.1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
  position: relative; cursor: default;
}/* filete que preenche da esquerda, igual ao índice da home */.swap__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ease-out);
}.swap__item.is-on::after { transform: scaleX(1); }.swap__n, .swap__k, .swap__v { transition: transform .7s var(--ease-out), color .45s var(--ease); }.swap__item.is-on .swap__n { transform: translateX(6px); }.swap__item.is-on .swap__k { transform: translateX(10px); color: var(--teal-text); }.swap__item.is-on .swap__v { transform: translateX(10px); }.swap__n {
  grid-row: 1 / span 2; padding-top: .45em;
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--earth-text); font-variant-numeric: tabular-nums;
}.swap__k {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 400;
  letter-spacing: .05em; color: var(--ink);
}.swap__v { font-size: var(--fs-sm); color: var(--ink-body); max-width: 44ch; }@media (prefers-reduced-motion: reduce) {
  .fig .swap__img { transition-duration: .01ms; transform: none; }
  [data-accordion] .ac__panel { transition-duration: .01ms; }
}/* --------------------------------------------------------------------------
   20. IMPRESSÃO
   -------------------------------------------------------------------------- */@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body { background: #fff; }
  .section { padding-block: 2rem; }
  .section--deep, .section--deep-2, .site-footer { background: #fff !important; }
  .on-dark, .on-dark p, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--ink) !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: var(--muted-text); }
}/* ==========================================================================
   21. MOTION — primitivas de animação ao rolar
   ========================================================================== *//* -- 21.1 Revelação por máscara de linha (títulos editoriais) -------------- */.lines { display: block; }.lines .ln { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }.lines .ln > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .085s);
}.lines.is-in .ln > span { transform: none; }/* -- 21.2 Cortina / gaveta ------------------------------------------------- */[data-anim="curtain"] { position: relative; overflow: hidden; }[data-anim="curtain"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--bg-warm);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .09s);
}[data-anim="curtain"].is-in::after { transform: scaleY(0); transform-origin: top; }[data-anim="curtain"].on-bg::after { background: var(--bg); }[data-anim="curtain"].on-surface::after { background: var(--surface); }[data-anim="curtain"].on-deep::after { background: var(--bg-deep); }[data-anim="curtain"].on-ink::after { background: var(--ink); }/* -- 21.3 Wipe horizontal -------------------------------------------------- */[data-anim="wipe"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .08s);
}[data-anim="wipe"].is-in { clip-path: inset(0 0 0 0); }/* -- 21.4 Zoom de entrada em imagem --------------------------------------- */[data-anim="zoom"] { overflow: hidden; }[data-anim="zoom"] img { transform: scale(1.22); transition: transform 1.6s var(--ease-out); }[data-anim="zoom"].is-in img { transform: scale(1); }/* -- 21.5 Deslize lateral -------------------------------------------------- */[data-anim="slide-l"], [data-anim="slide-r"] {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .08s);
}[data-anim="slide-l"] { transform: translateX(-42px); }[data-anim="slide-r"] { transform: translateX(42px); }[data-anim="slide-l"].is-in, [data-anim="slide-r"].is-in { opacity: 1; transform: none; }/* -- 21.6 Parallax (JS aplica --py) ---------------------------------------- */[data-parallax] { will-change: transform; }.px-frame { overflow: hidden; position: relative; }.px-frame img { width: 100%; height: 100%; object-fit: cover; }.px-frame > [data-parallax] { position: absolute; inset: -12% 0; }.px-frame > [data-parallax] img { height: 100%; }/* -- 21.7 Barra de progresso da leitura ------------------------------------ */.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: transparent; pointer-events: none;
}.scroll-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-cyan));
  transition: width .12s linear;
}/* -- 21.8 Marquee ---------------------------------------------------------- */.marquee {
  --speed: 46s;
  overflow: hidden; position: relative;
  padding-block: clamp(1.5rem, 2.6vw, 2.4rem);
  border-block: 1px solid var(--line-dark);
  background: var(--bg-deep);
}.marquee__track { display: flex; width: max-content; animation: marquee var(--speed) linear infinite; }.marquee:hover .marquee__track { animation-play-state: paused; }.marquee__group { display: flex; align-items: center; flex-shrink: 0; }.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(250,250,250,.34); white-space: nowrap;
}.marquee__item::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(250,250,250,.34); flex-shrink: 0;
}@keyframes marquee { to { transform: translateX(-50%); } }/* -- 21.9 Contador --------------------------------------------------------- */.count { font-variant-numeric: tabular-nums; }.scroll-cue i {
  display: block; width: 46px; height: 1px; background: var(--line-2, #c4c4c4);
  position: relative; overflow: hidden;
}.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: cue 2.1s var(--ease) infinite;
}@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}.v-label::after { content: ""; width: 1px; height: 56px; background: var(--brand-earth); }/* -- 21.13 Respeito a prefers-reduced-motion ------------------------------- */@media (prefers-reduced-motion: reduce) {
  .lines .ln > span { transform: none !important; }
  [data-anim="curtain"]::after { display: none !important; }
  [data-anim="wipe"] { clip-path: none !important; }
  [data-anim="zoom"] img { transform: none !important; }
  [data-anim="slide-l"], [data-anim="slide-r"] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .marquee__track { animation: none !important; }
}/* -- 22.3 Bloco fixo (sticky) com lista que passa ao lado ----------------- */.pin { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(2rem, 5vw, 5rem); }.pin__side { position: sticky; top: clamp(6rem, 12vh, 9rem); align-self: start; }.pin__list { display: grid; gap: 0; }.pin__row {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.5rem;
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}.pin__row:first-child { border-top: 1px solid var(--line-dark); }.pin__row .k {
  font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--brand-earth); font-variant-numeric: tabular-nums;
}.pin__row .t { color: #fafafa; }.pin__row .t { display: block; }.pin__row .d { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: rgba(250,250,250,.66); max-width: 52ch; }/* -- 22.5 Índice: o título reage ao mouse --------------------------------- */.idx .idx__item { position: relative; }.idx .idx__item .h3 { transition: color var(--dur), transform var(--dur) var(--ease); display: inline-block; }.idx .idx__item:hover .h3 { color: var(--teal-text); }/* -- 22.6 Responsivo do hero ---------------------------------------------- */@media (max-width: 900px) {
  .pin { grid-template-columns: 1fr; }
  .pin__side { position: static; }
}.scroll-cue--light { color: rgba(250,250,250,.6); }.scroll-cue--light i { background: rgba(250,250,250,.28); }.scroll-cue--light i::after { background: var(--brand-cyan); }/* ==========================================================================
   24. FOOTER — assinatura tipográfica grande
   ========================================================================== *//* assinatura tipográfica de borda a borda, no fim da página */.footer-wordmark {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: 0 var(--gutter);
  overflow: hidden;
}.footer-wordmark__text {
  display: block; margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 8.2vw;                 /* corpo e recorte ajustados por JS */
  line-height: .82;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fafafa;
  opacity: .96;
  /* fallback sem JS: já sangra um pouco pela borda de baixo */
  margin-bottom: -.16em;
}/* ==========================================================================
   25. HEADER que recolhe ao descer e volta ao subir
   ========================================================================== */.site-header {
  transform: translateY(0);
  transition: transform .45s var(--ease), background var(--dur) var(--ease),
              padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
}.site-header.is-hidden { transform: translateY(-102%); }/* ==========================================================================
   26. LOADER
   ========================================================================== */.loader {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg-deep-2);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-inline: var(--gutter);
  transition: clip-path 1s var(--ease-out), opacity .4s var(--ease) .55s;
  clip-path: inset(0 0 0 0);
}.loader__bar {
  flex: 1 1 auto; max-width: 52vw; height: 1.5px;
  background: rgba(250,250,250,.13); position: relative; overflow: hidden;
}.loader__bar i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--brand-cyan);
  box-shadow: 0 0 14px rgba(1,214,221,.5);
}.loader__pct {
  flex: 0 0 auto; min-width: 5.5ch;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1;
  color: #fafafa; font-variant-numeric: tabular-nums;
}/* abertura: a cortina sobe e a página aparece por baixo */.loader.is-done { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }html.is-loading, html.is-loading body { overflow: hidden; }
/* quem já visitou não vê a cortina: some antes da primeira pintura */
html.sem-loader .loader { display: none !important; }

/* --------------------------------------------------------------------------
   Cortina de retorno: cinco faixas na cor da tela de carregamento
   -------------------------------------------------------------------------- */
/* só aparece para quem já visitou — na primeira vez quem abre é o loader.
   A animação é puramente CSS: se o script falhar, a cortina sobe assim mesmo
   e a página nunca fica coberta. */
.cortina { display: none; }
html.sem-loader .cortina {
  display: flex; position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
}
html.sem-loader .cortina > i {
  flex: 1 1 0;                      /* faixas coladas, sem vão entre elas */
  background: var(--bg-deep-2);
  transform-origin: top;
  animation: cortina-sobe .62s var(--ease-out) forwards;
}
html.sem-loader .cortina > i:nth-child(1) { animation-delay: 0s; }
html.sem-loader .cortina > i:nth-child(2) { animation-delay: .07s; }
html.sem-loader .cortina > i:nth-child(3) { animation-delay: .14s; }
html.sem-loader .cortina > i:nth-child(4) { animation-delay: .21s; }
html.sem-loader .cortina > i:nth-child(5) { animation-delay: .28s; }
@keyframes cortina-sobe { to { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  html.sem-loader .cortina { display: none; }
}/* entrada do hero encadeada com o fim do loader */.boot [data-boot] {
  opacity: 0;
  transform: translate3d(0, calc(26px + var(--py, 0px)), 0);
  transition: opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
}.boot.is-ready [data-boot] { opacity: 1; transform: translate3d(0, var(--py, 0px), 0); }/* terminada a entrada, o transform deixa de ter transição para o parallax
   responder ao scroll na hora, sem arrasto */.boot.is-settled [data-boot] { transition-property: opacity; }.boot.is-ready [data-boot] { transition-delay: calc(var(--b, 0) * .11s); }.boot [data-boot="mask"] { opacity: 1; transform: none; }.boot .lines .ln > span { transform: translateY(108%); }.boot.is-ready .lines .ln > span { transform: none; }@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .boot [data-boot], .boot .lines .ln > span { opacity: 1 !important; transform: none !important; }
}/* ==========================================================================
   27. HEADER com 3 destaques + botão circular
   ========================================================================== */.nav-mini { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.4rem); margin-left: auto; }.nav-mini a {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  color: var(--ink); position: relative; padding-block: .3rem;
  transition: color var(--dur);
}.nav-mini a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}.nav-mini a:hover::after, .nav-mini a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }.nav-mini a[aria-current="page"] { color: var(--teal-text); }.site-header.on-hero:not(.is-scrolled) .nav-mini a { color: #fafafa; }.menu-btn {
  flex: 0 0 auto; margin-left: clamp(1rem, 2.2vw, 2rem);
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--brand-cyan); cursor: pointer; position: relative;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}.menu-btn:hover { transform: scale(1.06); }.menu-btn__ico { position: absolute; inset: 0; }.menu-btn__ico::before, .menu-btn__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--bg-deep-2);
  transition: transform .45s var(--ease-out), opacity .3s;
}.menu-btn__ico::before { width: 15px; height: 1.6px; transform: translate(-50%, -50%); }.menu-btn__ico::after  { width: 1.6px; height: 15px; transform: translate(-50%, -50%); }.menu-btn[aria-expanded="true"] .menu-btn__ico::after { transform: translate(-50%, -50%) scaleY(0); }.menu-btn[aria-expanded="true"] { background: var(--brand-cyan); }/* Abaixo de 1150 os quatro links não cabem sem encostar na foto do hero
   (a 1024 a folga era negativa): o menu passa a carregar a navegação. */
@media (max-width: 1150px) { .nav-mini { display: none; } }/* ==========================================================================
   28. MENU EM TELA CHEIA
   ========================================================================== */.menu {
  position: fixed; inset: 0; z-index: 150;   /* header fica por cima */
  background: var(--bg-deep-2);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .85s var(--ease-out);
  overflow-y: auto;
  display: flex; align-items: center;
}.menu.is-open { clip-path: inset(0 0 0 0); }.menu[hidden] { display: none; }/* mais respiro em cima que embaixo: o primeiro link desencosta da logo */.menu__inner { width: 100%; padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 6vh, 4.5rem); }.menu__main { display: grid; gap: clamp(.15rem, .6vw, .5rem); }.menu__main a {
  display: block; overflow: hidden;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.75rem, min(5.4vw, 8vh), 4.6rem);
  line-height: .88; letter-spacing: .02em;
  text-transform: uppercase; color: #fafafa;
  padding: .06em 0 .1em;
}.menu__main a > span {
  display: block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out), color var(--dur);
}.menu.is-open .menu__main a > span { transform: none; }.menu__main a:hover > span { color: var(--brand-cyan); }.menu__main a[aria-current="page"] > span { color: var(--brand-cyan); }
/* No desktop o topo já traz Sobre, Terapia, Consultoria e Cursos: repeti-los
   aqui só engorda a lista. Abaixo de 900px o topo some, então o menu volta a
   ser a navegação inteira e todos reaparecem. */
@media (min-width: 1151px) {
  .menu__main a[data-no-topo] { display: none; }
  /* com três links em vez de sete, sobra altura para respirar */
  .menu__main a { font-size: clamp(2.5rem, min(7vw, 13vh), 6.5rem); }
  .menu__main { gap: clamp(.3rem, 1vw, .9rem); }
}.menu__foot {
  margin-top: clamp(2rem, 4.5vh, 3.25rem);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2rem;
}.menu__social { display: flex; align-items: center; gap: .35rem; }.menu__social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(250,250,250,.72);
  transform: translateY(130%);
  transition: transform .8s var(--ease-out), color var(--dur), background var(--dur);
  transition-delay: calc(var(--m, 0) * .075s);
}.menu.is-open .menu__social a { transform: none; }.menu__social a:hover { color: var(--bg-deep-2); background: var(--brand-cyan); }.menu__tel {
  display: inline-block; overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-body); color: rgba(250,250,250,.6);
}.menu__tel > span {
  display: block; transform: translateY(130%);
  transition: transform .8s var(--ease-out), color var(--dur);
}.menu.is-open .menu__tel > span { transform: none; }.menu__tel:hover > span { color: var(--brand-cyan); }/* cascata: cada item sai um pouco depois do anterior */.menu.is-open .menu__main a > span,
.menu.is-open .menu__tel > span,
.menu.is-open .menu__social a { transition-delay: calc(var(--m, 0) * .075s + .16s); }/* ==========================================================================
   29. HERO — foto à esquerda, título sobrepondo (layout do cliente)
   ========================================================================== */.hero-x {
  position: relative;
  min-height: 100vh;          /* fallback */
  min-height: 100svh;
  background: var(--bg-deep-2);
  overflow: hidden;
  display: flex;
}.hero-x__photo {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: clamp(280px, 48%, 760px);
  z-index: 0; overflow: hidden;
}.hero-x__photo > div { position: absolute; inset: 0; }/* fundo fixo, sem parallax */.hero-x__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 22%; }/* véu que garante leitura do título sobre a foto */.hero-x__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(28,30,30,.30) 0%, rgba(28,30,30,.06) 32%, rgba(28,30,30,.52) 62%, rgba(28,30,30,.72) 100%);
}.hero-x__inner {
  position: relative; z-index: 2; width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(7rem, 13vh, 10rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}.hero-x__eyebrow { grid-column: 2; align-self: end; margin: 0; }.hero-x__title {
  grid-column: 1 / -1; align-self: end;
  font-family: var(--font-display); font-weight: 300;
  /* o corpo respeita largura E altura da tela: as linhas nunca quebram
     dentro da máscara, o que estragaria a revelação */
  font-size: clamp(1.75rem, min(6.6vw, 9.2vh), 5.4rem);
  line-height: .91; letter-spacing: .012em;
  text-transform: uppercase; color: #fafafa;
  overflow-wrap: normal; hyphens: none;
}.hero-x__title .em { font-style: italic; text-transform: none; color: var(--brand-cyan); }.hero-x__foot {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: clamp(1.5rem, 3vw, 2rem);
  align-items: end;
}.hero-x__actions { display: flex; gap: .85rem; flex-wrap: wrap; }.hero-x__lead { color: rgba(250,250,250,.8); max-width: 44ch; margin: 0; }@media (max-width: 900px) {
  .hero-x__photo { width: 100%; height: 58vh; bottom: auto; }
  .hero-x__photo::after {
    background: linear-gradient(to bottom, rgba(28,30,30,.34) 0%, rgba(28,30,30,.10) 26%, rgba(28,30,30,.86) 88%, var(--bg-deep-2) 100%);
  }
  .hero-x__inner {
    grid-template-columns: 1fr; grid-template-rows: auto;
    padding-top: calc(58vh - clamp(9rem, 22vh, 13rem));
  }
  .hero-x__eyebrow { grid-column: 1; }
  .hero-x__foot { grid-template-columns: 1fr; }
  /* rede de proteção: se o JS deixar --py cravado, o celular ignora */
  [data-hero-layer] { transform: none !important; }
  .hero-x__inner { opacity: 1 !important; }
  /* o hero pode crescer além da tela em fontes grandes, em vez de cortar */
  .hero-x { min-height: 100svh; height: auto; }
}/* ==========================================================================
   30. FAIXAS ESCALONADAS DOS NÚMEROS
   ========================================================================== */.stair { background: var(--bg-warm); }.stair__row { display: block; }.stair__panel {
  margin-left: var(--off, 0%);
  background: var(--bg-deep);
  padding: clamp(1.75rem, 3.4vw, 3rem) var(--gutter) clamp(1.5rem, 3vw, 2.6rem);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--ease-out);
  will-change: clip-path;
}.stair__row.is-in .stair__panel { clip-path: inset(0 0 0 0); }.stair__n {
  display: block; overflow: hidden;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .92;
  color: #fafafa; font-variant-numeric: tabular-nums;
  padding-bottom: .06em;
}.stair__n > span { display: block; transform: translateY(112%); transition: transform 1.05s var(--ease-out) .18s; }.stair__row.is-in .stair__n > span { transform: none; }.stair__l {
  display: block; margin-top: .5rem;
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-widest);
  text-transform: uppercase; color: rgba(250,250,250,.6);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease-out) .42s, transform .8s var(--ease-out) .42s;
}.stair__row.is-in .stair__l { opacity: 1; transform: none; }/* escada mais suave quando a tela encurta, e reta no celular */@media (max-width: 1080px) {
  .stair__row:nth-child(2) .stair__panel { margin-left: 22%; }
  .stair__row:nth-child(3) .stair__panel { margin-left: 44%; }
}@media (max-width: 820px) {
  .stair__panel { margin-left: 0 !important; }
  .stair__row + .stair__row .stair__panel { border-top: 1px solid var(--line-dark); }
}@media (prefers-reduced-motion: reduce) {
  .stair__panel { clip-path: none !important; }
  .stair__n > span { transform: none !important; }
  .stair__l { opacity: 1 !important; transform: none !important; }
  .menu__main a > span, .menu__tel > span, .menu__social a { transform: none !important; }
}/* ==========================================================================
   31. AJUSTES DE INTERAÇÃO
   ========================================================================== *//* --- 31.1 header enquanto o menu está aberto ----------------------------- */.site-header.menu-open { transform: none !important; background: transparent !important;
  backdrop-filter: none !important; border-bottom-color: transparent !important; }.site-header.menu-open .brand__logo { filter: brightness(0) invert(1); }.site-header.menu-open .nav-mini { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }.nav-mini { transition: opacity .3s var(--ease); }/* o botão nunca desaparece junto com o header */.menu-btn { position: relative; z-index: 2; }/* --- 31.2 CTA secundário do hero, sem caixa ------------------------------ */.btn-plain {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: #fafafa; padding: 1.05rem .25rem;
  position: relative;
}.btn-plain::after {
  content: ""; position: absolute; left: .25rem; right: .25rem; bottom: .85rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}.btn-plain:hover::after { transform: scaleX(1); }.btn-plain svg { flex-shrink: 0; }/* --- 31.3 seção-gaveta: fica presa e o conteúdo seguinte passa por cima --- */.drawer {
  position: sticky; top: 0; z-index: 0;
  height: 100vh;              /* fallback */
  height: 100svh; min-height: 420px;
  overflow: hidden;
}.drawer .px-frame { position: absolute; inset: 0; }.drawer__veil {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  background: linear-gradient(100deg, rgba(28,30,30,.84) 0%, rgba(28,30,30,.48) 52%, rgba(28,30,30,.22) 100%);
}/* tudo o que vem depois sobe por cima, com fundo opaco.
   A gaveta é posicionada (z-index 0), então precisa que os irmãos seguintes
   também sejam posicionados — caso contrário ela pintaria acima deles. */.drawer ~ * { position: relative; z-index: 1; }.site-footer { position: relative; z-index: 1; }/* seções sem cor própria ficariam transparentes e deixariam a gaveta aparecer;
   os modificadores usam especificidade maior para manter suas cores */.over-drawer,
.drawer ~ .section                      { background: var(--bg); }.drawer ~ .section.section--warm        { background: var(--bg-warm); }.drawer ~ .section.section--surface     { background: var(--surface); }.drawer ~ .section.section--deep        { background: var(--bg-deep); }.drawer ~ .section.section--deep-2      { background: var(--bg-deep-2); }/* --- 31.4 revelação garantida para elementos no fim da página ------------- */[data-anim-end] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s var(--ease-out);
}[data-anim-end].is-in { clip-path: inset(0 0 0 0); }@media (prefers-reduced-motion: reduce) {
  .drawer { position: static; height: auto; }
  [data-anim-end] { clip-path: none !important; }
}/* ==========================================================================
   32. REVISÃO MOBILE — acertos finos
   ========================================================================== */@media (max-width: 600px) {
  /* o CTA principal ocupa a linha; o link simples fica abaixo, alinhado */
  .hero-x__actions { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .hero-x__actions .btn { width: 100%; }
  .btn-plain { padding-inline: 0; }
  .btn-plain::after { left: 0; right: 0; }

  /* números um pouco menores para o rótulo não apertar */
  .stair__n { font-size: clamp(3rem, 17vw, 4.6rem); }
  .stair__panel { padding-block: 1.5rem 1.35rem; }

  /* citação da gaveta com mais folga */
  .drawer .quote p { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }

  /* menu: no celular o rodapé empilha */
  .menu__foot { margin-top: 1.75rem; gap: .75rem 1.25rem; }

  /* loader: número e barra sem se apertar */
  .loader { gap: 1rem; }
  .loader__bar { max-width: 46vw; }
  .loader__pct { font-size: 1.75rem; min-width: 4.5ch; }
}/* telas muito estreitas */@media (max-width: 520px) {
  .fab .fab-label { display: none; }
  .fab { padding: 1rem; border-radius: 50%; }
}@media (max-width: 380px) {
  .brand__logo { width: 168px; }
  .menu__main a { font-size: 2.15rem; }
}/* celular deitado: pouca altura, muita largura — volta ao arranjo de 2 colunas */@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  .hero-x__photo { height: 100%; bottom: 0; width: 46%; }
  .hero-x__photo::after {
    background: linear-gradient(to bottom, rgba(28,30,30,.30) 0%, rgba(28,30,30,.08) 30%, rgba(28,30,30,.58) 65%, rgba(28,30,30,.78) 100%);
  }
  .hero-x__inner {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: 1fr auto auto;
    padding-top: 5.5rem; padding-bottom: 1.5rem;
  }
  .hero-x__eyebrow { grid-column: 2; }
  .hero-x__foot { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero-x__actions { flex-direction: row; align-items: center; }
  .hero-x__actions .btn { width: auto; }
  .menu__inner { padding-block: 5rem 2.5rem; }
  .menu__main a { font-size: 1.9rem; }
}/* ==========================================================================
   33. PÁGINA SOBRE — ajustes de diagramação
   ========================================================================== *//* coluna de mídia que acompanha o scroll do texto ao lado */.sticky-col { position: sticky; top: clamp(5.5rem, 12vh, 7.5rem); align-self: start; }/* lista de credenciais em coluna única, com texto maior */.creds--lg li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: clamp(1.15rem, 1.8vw, 1.6rem) 0;
  align-items: baseline;
}.creds--lg strong {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}.creds--lg span {
  font-size: var(--fs-sm);
  color: var(--muted-text);
  white-space: nowrap;
}.creds--lg li:first-child { border-top: 1px solid var(--line); }@media (max-width: 600px) {
  .creds--lg li { grid-template-columns: 1fr; gap: .3rem; }
  .creds--lg span { text-align: left; white-space: normal; }
}/* ==========================================================================
   34. TOPO DAS PÁGINAS INTERNAS — mesma linguagem do hero
   ========================================================================== *//* a imagem de fundo ganha parallax, então precisa de folga vertical */.page-hero__media { overflow: hidden; }.page-hero__media > [data-parallax] { position: absolute; inset: -9% 0; }.page-hero__media > [data-parallax] img {
  width: 100%; height: 100%; object-fit: cover;
  /* a caixa do topo é ~2:1 e o cover corta pelo centro; --hero-y escolhe
     qual faixa da foto aparece, sem precisar recortar o arquivo */
  object-position: center var(--hero-y, 50%);
}/* imagem entra com leve aproximação, assentando junto com o título */.page-hero .page-hero__media img {
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-out) .1s;
}.page-hero.is-ready .page-hero__media img { transform: scale(1); }/* título mascarado: corpo respeita largura e altura para não quebrar feio */.page-hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, min(5.4vw, 8vh), 4.25rem);
  line-height: .96; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink);
  overflow-wrap: normal; hyphens: none;
  /* se uma linha longa quebrar no celular, divide de forma equilibrada.
     A máscara continua funcionando: translateY é relativo à altura do span. */
  text-wrap: balance;
}.page-hero--deep .page-hero__title { color: #fafafa; }/* filete que cresce sob o rótulo, ecoando o hero */.page-hero__rule {
  display: block; height: 1px; width: 0;
  background: var(--brand-earth);
  flex-shrink: 0;                    /* item do flex do .eyebrow */
  transition: width 1.1s var(--ease-out) .18s;
}.page-hero.is-ready .page-hero__rule { width: clamp(56px, 9vw, 120px); }.page-hero--deep .page-hero__rule { background: var(--brand-cyan); }@media (prefers-reduced-motion: reduce) {
  .page-hero .page-hero__media img { transform: none !important; }
  .page-hero__rule { width: clamp(56px, 9vw, 120px) !important; transition: none; }
}/* ==========================================================================
   35. PARALLAX DO HERO — camadas com velocidades diferentes
   ========================================================================== */[data-hero-layer] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}/* o conteúdo esmaece conforme o hero sai; a opacidade fica no contêiner
   para não brigar com a opacidade da animação de entrada dos filhos */.hero-x__inner { will-change: opacity; }@media (prefers-reduced-motion: reduce) {
  [data-hero-layer] { transform: none !important; }
  .hero-x__inner { opacity: 1 !important; }
}

/* ==========================================================================
   33. MOBILE — efeitos presos viram fluxo normal
   Este bloco fica NO FIM do arquivo de propósito: regras-base declaradas
   depois das medias (caso do .sticky-col, adicionado numa reforma tardia)
   atropelavam os overrides mobile por ordem de cascata. Aqui, nada declarado
   antes ganha delas.
   ========================================================================== */
@media (max-width: 900px) {
  /* colunas presas soltam: com a grade em 1 coluna, o elemento grudava no
     topo e o conteúdo seguinte rolava por cima dele */
  .sticky-col { position: static; top: auto; }

  /* a gaveta vira uma faixa comum: o efeito de conteúdo passando por cima
     depende de sticky de tela cheia, que o iOS pinta com defeitos */
  /* relative, não static: o véu e a foto são absolutos com inset 0 e
     precisam da gaveta como bloco de contenção */
  .drawer { position: relative; height: 62vh; min-height: 420px; }

  /* o deslize sutil das fotos (data-parallax) fica LIGADO no celular: o bug
     de pintura do iOS era a dupla sticky+transform, e os sticky acima já
     viraram estáticos aqui. Só o parallax de camadas do hero segue off. */

  /* conserto de ordem: a base do .swap__item veio depois desta regra */
  .swap__item { grid-template-columns: 2.75rem 1fr; }

  /* trava de segurança do nome no rodapé: nunca maior que a tela permite */
  .footer-wordmark { overflow: hidden; }
}

/* o contêiner recebe o foco ao abrir; o anel fica para os links, via Tab */
.menu:focus { outline: none; }


/* --------------------------------------------------------------------------
   34. CTA flutuante: círculo que se expande no hover
   Só o ícone em repouso; o rótulo desliza para fora ao passar o mouse ou
   focar por teclado. No toque (sem hover) fica sempre o círculo.
   -------------------------------------------------------------------------- */
.fab { padding: 1rem; border-radius: 999px; }
.fab .fab-label {
  display: inline-block; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .45s var(--ease-out), opacity .3s var(--ease),
              margin-left .45s var(--ease-out);
  margin-left: -0.65rem;            /* anula o gap enquanto está recolhido */
}
@media (hover: hover) {
  .fab:hover .fab-label,
  .fab:focus-visible .fab-label {
    max-width: 12em; opacity: 1; margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab .fab-label { transition: none; }
}


/* rede de pessoas formadas: avatar pequeno + até 3 linhas de descrição */
.pessoas { gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.pessoa { display: flex; gap: 1rem; align-items: flex-start; }
.pessoa__foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--bg-warm);
}
.pessoa__nome { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.pessoa__desc {
  margin-top: .3rem; font-size: var(--fs-sm); color: var(--ink-body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}


/* selo de tipo sobre a capa do card de publicação */
.tile__media { position: relative; }
.selo-tipo {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  background: rgba(250,250,250,.92); backdrop-filter: blur(2px);
}
.selo-tipo.pill--teal { background: rgba(1,129,132,.92); color: #fafafa; border-color: transparent; }


/* CTA flutuante: círculo exato de 56x56 em repouso.
   Antes a altura vinha da line-height do rótulo (invisível, mas presente
   na linha do flex) e o botão saía mais alto que largo. Altura travada e
   padding calculado: 16px de ícone + 2x20 = 56 = altura. */
.fab { height: 56px; padding: 0 20px; border-radius: 999px; }
.fab .fab-label { line-height: 1; }


/* --------------------------------------------------------------------------
   35. Botão do menu: hambúrguer tradicional (era um +)
   O próprio span vira a linha do meio; before/after são as externas.
   Aberto: o meio some e as externas cruzam em X.
   -------------------------------------------------------------------------- */
.menu-btn__ico {
  position: absolute; left: 50%; top: 50%; inset: auto;
  width: 17px; height: 1.6px; background: var(--bg-deep-2);
  transform: translate(-50%, -50%);
  transition: background .2s var(--ease);
}
.menu-btn__ico::before, .menu-btn__ico::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 17px; height: 1.6px; background: var(--bg-deep-2);
  transition: transform .45s var(--ease-out);
}
.menu-btn__ico::before { transform: translateY(-5px); }
.menu-btn__ico::after  { transform: translateY(5px); }

.menu-btn[aria-expanded="true"] .menu-btn__ico { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__ico::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__ico::after  { transform: rotate(-45deg); }


/* ==========================================================================
   36. REDUZIR MOVIMENTO = FADE, não ausência
   Os blocos antigos de prefers-reduced-motion desligavam tudo — quem tem a
   opção ativa (comum no iPhone, às vezes sem lembrar) via o site estático.
   O padrão da Apple sob essa preferência é trocar deslocamento por fade.
   !important aqui vence os !important antigos por vir depois na cascata.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-anim="slide-l"], [data-anim="slide-r"] {
    opacity: 0 !important; transform: none !important;
    transition: opacity .55s ease !important;
  }
  [data-reveal].is-in, [data-anim="slide-l"].is-in, [data-anim="slide-r"].is-in {
    opacity: 1 !important;
  }
  .lines .ln > span {
    opacity: 0 !important; transform: none !important;
    transition: opacity .55s ease !important;
    transition-delay: calc(var(--i, 0) * .07s) !important;
  }
  .lines.is-in .ln > span, .boot.is-ready .lines .ln > span { opacity: 1 !important; }
  .boot [data-boot] {
    opacity: 0 !important; transform: none !important;
    transition: opacity .55s ease !important;
  }
  .boot.is-ready [data-boot] { opacity: 1 !important; }
  /* cortina/wipe/zoom: a capa desaparece em fade em vez de deslizar */
  [data-anim="curtain"]::after {
    transform: none !important; opacity: 1;
    transition: opacity .6s ease !important;
  }
  [data-anim="curtain"].is-in::after { opacity: 0; }
  [data-anim="wipe"] { clip-path: none !important; opacity: 0 !important; transition: opacity .55s ease !important; }
  [data-anim="wipe"].is-in { opacity: 1 !important; }
  [data-anim="zoom"] img { transform: none !important; }
}

/* ==========================================================================
   37. SOBRE · ONDE TAMBÉM ATUO
   Cards mais coesos por dentro (nome, descrição e Conheça mais próximos)
   e fileiras mais separadas entre si.
   ========================================================================== */
.grid--atuo { row-gap: clamp(3.25rem, 5.5vw, 4.5rem); }
.grid--atuo .card p.mt-1 { margin-top: .4rem; }
.grid--atuo .card p.mt-2 { margin-top: .85rem; }

/* ==========================================================================
   38. GALERIA DE PÁGINA — carrossel
   Rolagem própria, com encaixe, setas e swipe. Nada preso ao scroll da
   página: a dobra ocupa a altura que precisa e o visitante decide quando
   andar. Quem rola a página passa por ela; quem quer ver as fotos, navega.
   ========================================================================== */
.gal { background: var(--bg-warm); padding-block: var(--space-section); }
.gal__cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.gal__cab p { max-width: 46ch; }
.gal__cab h2 { margin-top: .5rem; }
.gal__ctrl { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.gal__conta {
  margin: 0; font-size: var(--fs-xs); letter-spacing: var(--track-wider);
  color: var(--muted-text); font-variant-numeric: tabular-nums;
}
.gal__setas { display: flex; gap: .5rem; }
.gal__seta {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur),
              color var(--dur), opacity var(--dur);
}
.gal__seta:hover { background: var(--teal-solid); border-color: var(--teal-solid); color: #fafafa; }
.gal__seta:active { transform: translateY(1px); }
.gal__seta[disabled] { opacity: .3; pointer-events: none; }

/* a pista sangra até a borda da tela: a foto seguinte aparece cortada e
   conta sozinha que há mais para ver */
.gal__pista {
  display: flex; gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gal__pista::-webkit-scrollbar { display: none; }

.gfoto {
  flex: 0 0 clamp(240px, 30vw, 380px);
  scroll-snap-align: start;
  border: 0; padding: 0; background: none;
  cursor: pointer; text-align: left; color: var(--ink);
  display: grid; gap: .7rem;
}
.gfoto__quadro {
  position: relative; overflow: hidden; background: var(--bg-deep-2);
  aspect-ratio: 4 / 3;
}
.gfoto__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.gfoto:hover .gfoto__img, .gfoto:focus-visible .gfoto__img { transform: scale(1.04); }
.gfoto__quadro::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(28,30,30,.28); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gfoto:hover .gfoto__quadro::after, .gfoto:focus-visible .gfoto__quadro::after { opacity: 1; }
.gfoto__legenda {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted-text);
  line-height: 1.45;
}

@media (max-width: 600px) {
  /* no celular o dedo é a navegação; as setas ocupariam espaço à toa */
  .gal__setas { display: none; }
  .gal__cab { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .gal__pista { scroll-behavior: auto; }
}

/* ==========================================================================
   39. HERO DA HOME — claro
   Foi por um tempo a alternativa à versão escura, escolhida por um botão
   no topo. Escolhida a clara, o botão saiu e estas regras viraram as
   únicas: por isso elas apenas sobrescrevem a seção 29, que continua
   servindo os topos escuros das páginas internas.
   ========================================================================== */
:root { --claro-fundo: #f4f2ef; }   /* branco levemente quente, não estéril */
.hero-x { background: var(--claro-fundo); }

/* o véu clareia de baixo para cima: preserva o rosto e o topo da foto e
   entrega ao título uma base com contraste de sobra (medido: 5,4:1 no
   pior ponto da faixa onde o título cai) */
.hero-x__photo::after {
  background: linear-gradient(to bottom,
    rgba(244,242,239,.12) 0%,
    rgba(244,242,239,.02) 30%,
    rgba(244,242,239,.46) 56%,
    rgba(244,242,239,.80) 72%,
    rgba(244,242,239,.94) 100%);
}
.hero-x__title { color: var(--ink); }
.hero-x__title .em { color: var(--teal-text); }
.hero-x__eyebrow { color: var(--muted-text); }
.hero-x__lead { color: var(--ink-body); }

/* botões: o primário inverte para tinta cheia, o secundário fica em tinta */
.hero-x .btn--solid-light {
  background: var(--ink); color: #fafafa; border-color: var(--ink);
}
.hero-x .btn--solid-light::before { background: var(--teal-solid); }
.hero-x .btn--solid-light:hover { color: #fff; border-color: var(--teal-solid); }
.hero-x .btn-plain { color: var(--ink); }

/* o logotipo e os atalhos do topo não são mais invertidos sobre a home,
   porque o fundo ali agora é claro — nas páginas internas segue valendo
   a regra da seção 5, que inverte sobre os topos escuros */
.home .site-header.on-hero:not(.is-scrolled) .brand__logo { filter: none; }
.home .site-header.on-hero:not(.is-scrolled) .nav-mini a { color: var(--ink-body); }

/* a faixa escura das abordagens ganha função: separa o hero claro da
   dobra dos números, que também é clara */
.marquee { border-block-color: transparent; }

@media (max-width: 900px) {
  .hero-x__photo::after {
    background: linear-gradient(to bottom,
      rgba(244,242,239,.10) 0%,
      rgba(244,242,239,.02) 28%,
      rgba(244,242,239,.86) 86%,
      var(--claro-fundo) 100%);
  }
}

/* ==========================================================================
   40. TOPO: FOLGA ENTRE OS LINKS E A FOTO DO HERO
   Entre 1151 e 1400 o topo já ocupa a tela inteira e ainda assim os quatro
   links chegam perto da borda da foto. Aproximá-los um do outro compra os
   ~50px que faltavam, sem tirar ninguém do topo.
   ========================================================================== */
@media (min-width: 1151px) and (max-width: 1400px) {
  .nav-mini { gap: 1.15rem; }
}

/* ==========================================================================
   41. CARD INTEIRO CLICÁVEL
   O link continua sendo um só, com o texto de sempre — ele apenas estica
   uma camada invisível sobre o card. É melhor que embrulhar tudo em <a>:
   não cria um link gigante cheio de texto para quem usa leitor de tela,
   e o texto do card segue selecionável.
   ========================================================================== */
.card--clicavel { position: relative; }
.card--clicavel .link-arrow::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.card--clicavel:hover { transform: translateY(-3px); }
.card--clicavel:hover .link-arrow { gap: 1rem; color: var(--ink); }
.card--clicavel:hover .card__media img { transform: scale(1.04); }
/* o foco do teclado passa a desenhar o card inteiro, não só o link */
.card--clicavel:has(.link-arrow:focus-visible) { outline: 2px solid var(--teal-text); outline-offset: 4px; }
.card--clicavel .link-arrow:focus-visible { outline: none; }

/* ==========================================================================
   42. REDE DE PESSOAS FORMADAS — cartão com país e contatos
   O que cada pessoa mandou no formulário chega desigual: uns só o site,
   outros LinkedIn, e-mail e Instagram. Aqui todos viram a mesma coisa —
   o nome do canal, e a seta só nos que saem do site.
   ========================================================================== */
.pessoa__corpo { min-width: 0; }
/* nome, cargo e país são um bloco só de identificação: ficam juntos.
   O respiro grande vai só antes dos contatos, que são outra natureza
   de informação — de ler para de clicar. */
/* Nome, cargo e país são um bloco só: mesma entrelinha (o corpo do site
   anda em 1.75, que aqui soltaria o país) e o mesmo vão entre as linhas.
   Zerar a margem de baixo é o que faz isso funcionar: a regra base
   p { margin: 0 0 1.15em } dava 15px por baixo de cada parágrafo, e esses
   15px venciam por colapso as margens de topo de 1,6px — resultado, o país
   ficava à mesma distância do cargo acima e dos contatos abaixo. */
.pessoa__nome { line-height: 1.45; }
.pessoa__desc,
.pessoa__pais,
.pessoa__contatos { margin-bottom: 0; }
.pessoa__desc {
  margin-top: .2rem;
  font-size: var(--fs-xs); line-height: 1.45;
}
.pessoa__pais {
  margin-top: .2rem;
  font-size: var(--fs-xs); line-height: 1.45;
  letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted-text);
}
.pessoa__contatos {
  margin-top: .9rem;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
}
.contato {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-xs); letter-spacing: .02em;
  color: var(--teal-text);
  border-bottom: 1px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}
.contato:hover { color: var(--ink); border-bottom-color: currentColor; }
.contato__seta { flex-shrink: 0; opacity: .75; transition: transform var(--dur) var(--ease); }
.contato:hover .contato__seta { transform: translate(1px, -1px); }

/* Uma pessoa é um bloco de quatro linhas; com o mesmo vão na horizontal e
   na vertical, duas pessoas seguidas se leem como uma lista contínua. O
   vão de linha passa a ser bem maior que o de coluna — e no celular, onde
   a grade vira uma coluna só, é ele que separa uma pessoa da seguinte. */
.pessoas {
  column-gap: clamp(1.5rem, 2.5vw, 2.25rem);
  row-gap: clamp(2.75rem, 4.5vw, 3.5rem);
}

/* ==========================================================================
   43. DEPOIMENTO EM VÍDEO
   O player do YouTube só entra quando alguém clica. Antes disso o que há
   é a capa e um botão: a página não carrega o script do YouTube — nem os
   cookies dele — para quem só passou por aqui.
   ========================================================================== */
.video-dep { background: var(--bg-deep-2); }
.video-dep .eyebrow { color: var(--brand-cyan); }
.ytb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #000; border-radius: 2px;
}
.ytb__capa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: block;
}
.ytb__capa img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity var(--dur) var(--ease);
}
.ytb__capa:hover img, .ytb__capa:focus-visible img { transform: scale(1.03); opacity: .85; }
.ytb__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(58px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(250,250,250,.92); color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ytb__capa:hover .ytb__play, .ytb__capa:focus-visible .ytb__play {
  background: var(--brand-cyan); transform: translate(-50%, -50%) scale(1.06);
}
.ytb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytb__legenda {
  margin-top: 1rem; font-size: var(--fs-sm); color: rgba(250,250,250,.66);
}
@media (prefers-reduced-motion: reduce) {
  .ytb__capa img, .ytb__play { transition: opacity .3s ease; }
  .ytb__capa:hover img { transform: none; }
  .ytb__capa:hover .ytb__play { transform: translate(-50%, -50%); }
}

/* ─────────────────────────────────────────────────────────────
   §44  FORMULÁRIO DE INTERESSE — dica no rótulo
   O placeholder do WhatsApp é só máscara de formato, (00) 00000-0000,
   e não um DDD de verdade: o site recebe visita de todo o país e um
   "31" ali parecia campo já preenchido. A exigência do DDD passa a
   morar no rótulo, que não desaparece quando a pessoa começa a digitar.
   ───────────────────────────────────────────────────────────── */
.campo__dica {
  text-transform: none; letter-spacing: 0;
  opacity: .72; font-weight: 400;
}
.campo__dica::before { content: "· "; }

/* Cor da logo escolhida no admin (classe no <body>):
   logo-escura  → sempre na cor da marca
   logo-branca  → branca enquanto o topo está sobre a foto; ao rolar volta à cor da marca */
body.logo-escura .site-header:not(.menu-open) .brand__logo { filter: none; }
body.logo-branca .site-header.on-hero:not(.is-scrolled):not(.menu-open) .brand__logo { filter: brightness(0) invert(1); }

/* ==========================================================================
   PRIVACIDADE — aviso de cookies, links do rodapé e notas dos formulários
   ========================================================================== */
.cookies {
  position: fixed; z-index: 95;
  right: 1rem; bottom: 1rem;
  width: min(320px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  background: var(--surface); color: var(--ink-body);
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 18px 50px rgba(28, 30, 30, .18);
  animation: cookies-entra .5s var(--ease) both;
}
.cookies[hidden] { display: none; }
.cookies__titulo {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink);
}
.cookies__texto { margin: .3rem 0 .85rem; font-size: var(--fs-xs); line-height: 1.5; }
.cookies__texto a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 3px; }
.cookies__acoes { display: flex; gap: .6rem; }
.cookies__acoes .btn { flex: 1 1 0; width: auto; justify-content: center; padding: .6rem 1rem; }
body.cookies-aberto .fab { opacity: 0 !important; pointer-events: none !important; }
@keyframes cookies-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }

.footer-legal a, .footer-legal__btn {
  color: rgba(250, 250, 250, .62); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur);
}
.footer-legal__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer-legal a:hover, .footer-legal__btn:hover { color: var(--brand-cyan); }
.footer-legal__btn:focus-visible, .link-inline:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }

.link-inline {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--teal-text); text-decoration: underline; text-underline-offset: 3px;
}
.artigo .lista-limpa { list-style: none; padding-left: 0; }

.form-nota { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); line-height: 1.55; }
.form-nota a, .fmi__nota a, form .xs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.artigo > h2:first-child { margin-top: 0; }