/* =========================================================================
   Thais Alves — One Page
   Tokens extraídos do Figma dDfWIxe1n7UoVaLEbrgsl9, frame Desktop 7181:95.
   Nada de largura hardcoded: tudo passa pelas vars estruturais abaixo.
   ========================================================================= */

:root {
  /* --- Tokens estruturais (Fase 0.5) --------------------------------- */
  --frame-w: 1440px;                        /* designedWidth do frame 7181:95 */
  --content-w: 1216px;                      /* width do Wrap 7220:2991 */
  --section-px: clamp(24px, 7.78vw, 112px); /* padding 112px ÷ 1440 × 100 */
  --content-gap: 120px;                     /* gap padrão das seções row */
  --hero-copy-w: 689px;                     /* width do Container 7182:567 do hero */
  --dif-gap: 56px;                          /* gap do row 7181:141 (Diferenciais) */
  --atend-texto-w: 533px;                   /* width do texto 7262:25 (card destaque) */

  /* Altura do cabeçalho fixo: 16px de respiro + 34px do logo. */
  --header-h: 50px;

  /* --- Paleta (Style Guide 3040:727) --------------------------------- */
  --primary-lightest: #DCAE95;
  --primary-light: #CD866A;
  --primary-pure: #C36A4D;
  --primary-medium: #B55641;
  --primary-dark: #974337;

  --aux-beige: #F2ECE3;
  --aux-blue: #9BABB0;
  --aux-green: #A6AC9A;

  --black: #000000;
  --cream: #FFFEEE;
  --white: #FFFFFF;
  --brand-brown: #A05535;   /* botões primários e strokes */
  --brand-tan: #D08564;     /* eyebrows / hats */

  --gray-01: #F2F4F7;
  --gray-02: #EAECF0;
  --gray-03: #D0D5DD;
  --gray-04: #98A2B3;
  --gray-05: #667085;
  --gray-06: #475467;
  --gray-07: #344054;
  --gray-08: #182230;
  --gray-09: #101828;
  --gray-10: #0C111D;
  --footer-text: #C4C6CC;

  /* Bordas translúcidas recorrentes no design */
  --border-cream-30: rgba(255, 254, 238, 0.3);
  --border-white-30: rgba(255, 255, 255, 0.3);
  --border-white-20: rgba(255, 255, 255, 0.2);
  --border-black-10: rgba(0, 0, 0, 0.1);

  /* --- Tipografia ---------------------------------------------------- */
  --font-main: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =========================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-main);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--primary-lightest);
  outline-offset: 3px;
}

/* Âncoras do menu não podem parar embaixo do cabeçalho fixo. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* =========================================================================
   Primitivos compartilhados
   ========================================================================= */

/* Seção full-bleed com o respiro lateral do Figma (112px @1440) */
.section {
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

/* Botão: padding 18px 32px, gap 16px, Montserrat 400 14px/1.5em uppercase */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 32px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: center;
  /* No Figma os botões são "hug": nunca quebram linha. Sem isso, um
     arredondamento de 0.01px no flex faz o texto virar duas linhas. */
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Variante "fill" — usada onde o Figma marca o botão como sizing: fill */
.btn--block {
  width: 100%;
  white-space: normal;
  flex: 1 1 auto;
}

.btn--solid {
  background: var(--brand-brown);
  color: var(--cream);
}
.btn--solid:hover { background: var(--primary-dark); }

.btn--outline {
  border: 1px solid var(--border-cream-30);
  color: var(--cream);
}
.btn--outline:hover { border-color: var(--cream); background: rgba(255, 254, 238, .06); }

.btn--light {
  background: var(--white);
  color: var(--brand-brown);
}
.btn--light:hover { background: var(--cream); }

/* Eyebrow / hat: Montserrat 400 14px/1.2em uppercase */
.eyebrow {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: uppercase;
}

/* Título de seção: Montserrat Light 300 40px/1.2em uppercase */
.section-title {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2em;
  text-transform: uppercase;
}

/* Corpo 18px — variante 1.5em e 1.6em conforme a seção */
.body-18 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;
}
.body-18--loose { line-height: 1.6em; }

/* Blocos de parágrafo: paragraphSpacing 16 no Figma */
.prose { display: flex; flex-direction: column; gap: 16px; }

/* =========================================================================
   1. Hero — node 7181:96
   ========================================================================= */

.hero {
  background: var(--black);
  /* O cabeçalho saiu do fluxo (fixed); este padding devolve exatamente o
     espaço que ele ocupava e mantém o hero em 1308px, como no Figma. */
  padding-top: var(--header-h);
}

/* Header — node 7181:97 : padding 16px 112px 0, space-between, center.
   Fixo em vez de sticky: como `sticky` fica preso ao pai, dentro do .hero
   ele descolaria depois de 1308px. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Fora do topo ganha fundo sólido para seguir legível sobre as seções claras. */
.site-header--fixo {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(0, 0, 0, .92);
  box-shadow: 0 1px 0 rgba(255, 254, 238, .12);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header--fixo { backdrop-filter: blur(8px); }
}

/* Logo and Menu — node 7181:98 : row, space-between, center, fill */
.site-header__inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo { width: 219.85px; height: 34px; }

/* Botão hambúrguer: só existe no frame Mobile (7307:832) */
.site-header__menu { display: none; padding: 0; }

/* Menu Items — node 7181:115 : row, center, gap 16px */
.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-nav__link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  transition: color .2s ease;
}
.site-nav__link:hover { color: var(--primary-lightest); }

/* Content — node 7181:122 : padding 80px 112px 0, row, center, gap 120px */
.hero__content {
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  padding-top: 80px;
}

/* Container 7182:567 : column, gap 56px, hug (largura = Button Group 689px) */
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: var(--hero-copy-w);
  flex: 0 0 auto;
}

/* Text Block 7184:641 : column, gap 16px */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 7181:125 : Montserrat Light 300 28px/1.2em uppercase */
.hero__title {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--cream);
}

/* 7181:128 : Montserrat Regular 400 18px/1.5em */
.hero__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--cream);
}

/* Button Group 7184:634 : row, center, gap 24px, width 689 */
.hero__buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  width: var(--hero-copy-w);
}

/* 7182:568 : fill horizontal, height 642 fixo */
.hero__figure {
  flex: 1 1 auto;
  min-width: 0;
  height: 642px;
}

.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content 7232:4190 : padding 112px, row, flex-end, gap 32px */
.hero__manifesto {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 32px;
  padding-top: 112px;
  padding-bottom: 112px;
}

/* 7232:4193 : width 700, Montserrat Light 300 40px/1.3em uppercase, right */
.hero__manifesto p {
  width: 700px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.3em;
  text-transform: uppercase;
  text-align: right;
  color: var(--cream);
}

/* =========================================================================
   2. Diferenciais — node 7181:141
   ========================================================================= */

/* row, padding 112px, align center, gap 56px, bg #000 */
.diferenciais {
  display: flex;
  align-items: center;
  gap: var(--dif-gap);
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--black);
}

/* 7181:147 : fill horizontal, height 725 fixo */
.diferenciais__figure {
  flex: 1 1 0;
  min-width: 0;
  height: 725px;
}
.diferenciais__figure img { width: 100%; height: 100%; object-fit: cover; }

/* 7181:142 : column, gap 32px, fill */
.diferenciais__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--cream);
}

/* =========================================================================
   3. Como Funciona — node 7191:673
   ========================================================================= */

/* row, padding 112px, gap 120px, bg #FFFEEE.
   Sem alignItems no Figma = alinhamento no topo. Sem isto o CSS estica a
   coluna de intro e o `justify-content: center` dela joga o título 163px
   pra baixo. */
.etapas {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--cream);
  color: var(--black);
}

/* 7191:674 : width 397 fixo, column, padding-bottom 120, justify center, gap 32.
   A coluna acompanha a rolagem enquanto os quatro passos passam ao lado —
   o `align-items: flex-start` do pai é o que permite o sticky funcionar
   (item esticado não gruda). */
.etapas__intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  flex: 0 0 397px;
  width: 397px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-bottom: 120px;
}

/* 7191:680 : column, justify center, gap 32px, fill */
.etapas__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

/* 7191:681 : row, gap 40px, padding-bottom 32px, borda inferior rgba(0,0,0,.1) */
.etapa {
  display: flex;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-black-10);
}

/* 7191:708 : o último passo não tem borda nem padding inferior */
.etapa--last { padding-bottom: 0; border-bottom: 0; }

/* tag 7196:728 : padding-top 8px, texto width 62 fixo, 14px/1.2em uppercase */
.etapa__tag {
  flex: 0 0 62px;
  width: 62px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: uppercase;
}

/* 7191:713 : column, gap 16px, fill */
.etapa__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 7191:684 : Montserrat Light 300 24px/1.4em uppercase */
.etapa__title {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4em;
  text-transform: uppercase;
}

/* =========================================================================
   4. Sobre a Thais — node 7293:27
   ========================================================================= */

/* row, padding 112px, gap 120px, bg #FFFEEE */
.sobre {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--cream);
  color: var(--black);
}

/* 7293:58 : fill / fill — acompanha a altura fixa do Text Container (756).
   A <img> é absoluta de propósito: em fluxo normal ela impõe a própria
   proporção como altura mínima da coluna e, em telas largas, a foto passava
   a ditar a altura da seção (1087px em 1920) enquanto o texto ficava em 756. */
.sobre__figure {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}
.sobre__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 7293:28 : column, justify space-between, fill horizontal, height 756 fixo */
.sobre__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 756px;
}

/* 7293:31 : width 377 fixo */
.sobre__title { width: 377px; }

/* =========================================================================
   5. Psicoterapia e Psicanálise — node 7202:730
   ========================================================================= */

/* row, padding 112px, gap 120px, bg #000. Alinhamento no topo: no Figma o
   Text Container 7202:731 é hug (548×96), não estica junto com a coluna. */
.psico {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--black);
  color: var(--cream);
}

/* 7202:731 : row, align center, gap 32px, fill */
.psico__heading {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* 7202:735 : column, justify center, gap 32px, fill */
.psico__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

/* 7202:761 : Montserrat Light 300 18px/1.6em */
.psico__prose {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6em;
}

/* =========================================================================
   6. Para quem é — node 7181:149
   ========================================================================= */

/* row, padding 112px, gap 120px, bg #FFFEEE */
.quem {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--cream);
  color: var(--black);
}

/* 7181:151 : column, gap 32px, fill */
.quem__intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 7181:155 : width 470 fixo */
.quem__lead { width: 470px; max-width: 100%; }

/* 7181:156 : column, gap 24px, fill */
.quem__lista {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 7181:157 : row, padding-bottom 16, align center, gap 12, borda inferior.
   Inset box-shadow em vez de border: são 8 itens, e 1px de border em cada
   somaria 7px de drift no total da lista. */
.quem__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  box-shadow: inset 0 -1px 0 var(--border-black-10);
}

/* 7287:372 : o último item não tem borda nem padding */
.quem__item--last { padding-bottom: 0; box-shadow: none; }

.quem__item p { flex: 1 1 auto; min-width: 0; }

/* Circle 7181:158 (16px, borda $primarycolor-lightest) + Ellipse 6px pure */
.quem__dot {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-lightest);
  border-radius: 999px;
}
.quem__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary-pure);
}

/* =========================================================================
   7. Atendimentos — node 7262:19
   ========================================================================= */

/* column, padding 112px, gap 56px, bg #000 */
.atend {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--black);
  color: var(--cream);
}

/* --- Card destaque — node 7262:22 --------------------------------------
   Bordas via inset box-shadow: no Figma o stroke é desenhado por dentro e
   NÃO entra no cálculo de layout. `border` inflaria a altura em 2px. */
.atend__destaque {
  display: flex;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 0 var(--brand-brown), inset 0 -1px 0 var(--brand-brown);
}

/* 7262:23 : column, padding 56px 32px, gap 32px, fill.
   flex-basis 50% e não 0: com `flex-basis: 0` a base não pode ficar menor
   que o padding (64px), e o navegador reparte 640/576 em vez de 608/608. */
.atend__destaque-texto {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 32px;
}

/* 7262:25 : width 533 fixo, Montserrat Light 300 40px/1.2em uppercase */
.atend__destaque-titulo {
  width: var(--atend-texto-w);
  max-width: 100%;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2em;
  text-transform: uppercase;
}

/* 7262:27 : column, justify flex-end, fill/fill.
   Mesma razão da foto da bio: em fluxo normal a imagem impunha a própria
   proporção e esticava o card para 1272px em telas largas. */
.atend__destaque-media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
}
.atend__destaque-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Label 7287:289 : no Figma está em x=328, y=56 dentro de uma coluna de 608.
   Ancorada pela direita (608 − 328 − 248 = 32) em vez de pela esquerda: dá a
   mesma posição em 1440 e continua dentro da coluna quando ela encolhe. */
.atend__label {
  position: absolute;
  right: 32px;
  top: 56px;
  padding: 16px 24px;
  border-radius: 666px;
  background: var(--white);
  color: var(--brand-tan);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Grid de cards — node 7262:33 -------------------------------------- */
.atend__grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border-white-30);
}

/* Cards de 607px: 2 por linha dentro dos 1214px úteis do container */
.atend__card {
  box-sizing: border-box;
  width: 607px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
}

/* Divisórias internas: `--b-r` separa as colunas, `--b-t` separa as linhas.
   O Figma marca stroke card a card; esta regra generaliza o mesmo desenho
   para qualquer quantidade de cards vinda do CMS. */
.atend__card--b-r { box-shadow: inset -1px 0 0 var(--border-white-30); }
.atend__card--b-t { box-shadow: inset 0 1px 0 var(--border-white-30); }
.atend__card--b-t.atend__card--b-r {
  box-shadow: inset 0 1px 0 var(--border-white-30), inset -1px 0 0 var(--border-white-30);
}

.atend__card--vazio { padding: 0; }

/* Heading Container EL-b4fdaafd : column, gap 32px */
.atend__card-head { display: flex; flex-direction: column; gap: 32px; }

/* Description Container EL-d8a3e5e9 : column, gap 16px */
.atend__card-desc { display: flex; flex-direction: column; gap: 16px; }

/* style_d98315fb : Montserrat Light 300 24px/1.2em uppercase */
.atend__card-titulo {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2em;
  text-transform: uppercase;
}

/* style_2401e5b7 : Montserrat 400 16px/1.6em */
.atend__card-texto {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
}

/* Button Container : column, justify flex-end — botão fica "hug" */
.atend__card-acao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
}

/* Eyebrow das seções escuras */
.eyebrow--tan { color: var(--brand-tan); }

/* =========================================================================
   8. Depoimentos — node 7220:2985
   ========================================================================= */

/* column, padding 112px 112px 0, justify center, gap 80px, bg #FFFEEE */
.dep {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
  padding-top: 112px;
  background: var(--cream);
  color: var(--black);
}

/* 7220:2987 : column, gap 32px */
.dep__header { display: flex; flex-direction: column; gap: 32px; }

/* 7220:2988 : Inter 400 14px/1.5em uppercase — única ocorrência de Inter */
.dep__rating {
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  text-transform: uppercase;
  color: var(--gray-10);
}

.dep__titulo { color: var(--black); }

/* 7220:2991 : row wrap, gap 32px, width 1216 */
.dep__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

/* Cards de 384px: 3 por linha ((1216 - 2×32) / 3) */
.dep__card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 64px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 32px;
  background: var(--white);
}

.dep__conteudo { display: flex; flex-direction: column; gap: 16px; }

/* User Info EL-12e2d7a9 : row, align center, gap 12px */
.dep__autor { display: flex; align-items: center; gap: 12px; }

.dep__avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}
/* 7232:3644 : o primeiro depoimento não tem foto, só o círculo #A05535 */
.dep__avatar--vazio { display: block; background: var(--brand-brown); }

/* style_b89ec5b3 : Montserrat SemiBold 600 18px/1.2em, ls 0.0025em, uppercase */
.dep__nome {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: .0025em;
  text-transform: uppercase;
  color: var(--gray-10);
}

/* style_4bc6688e : Montserrat 400 16px/1.5em */
.dep__texto {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--black);
}

/* Star Ratings EL-ae31fd1f : row, align center, gap -4px */
.dep__estrelas { display: flex; align-items: center; }
.dep__estrelas img + img { margin-left: -4px; }

/* =========================================================================
   9. Call to action — node 7181:237
   ========================================================================= */

/* column, padding 112px 112px 80px, bg #FFFEEE */
.cta {
  padding-top: 112px;
  padding-bottom: 80px;
  background: var(--cream);
}

/* 7181:238 : row, padding 80px, gap 40px — fill de IMAGE + GRADIENT_LINEAR */
.cta__card {
  position: relative;
  display: flex;
  gap: 40px;
  padding: 80px;
  background-image: linear-gradient(225deg, #DCAE95 0%, #C36A4D 50%, #B55641 100%);
}

/* A imagem é o fill de baixo da pilha; o gradiente vem por cima */
.cta__card::before {
  content: '';
  position: absolute;
  inset: 0;
  /* O tema sobrescreve --cta-bg quando a cliente troca a textura no Customizer. */
  background: var(--cta-bg, url('../images/cta-bg.png')) center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: .6;
  pointer-events: none;
}

/* 7181:250 : absoluto x=0 y=1, 1216×474.
   A opacidade 0.05 já vem dentro do SVG — repetir aqui daria 0.0025. */
.cta__pattern {
  position: absolute;
  left: 0;
  top: 1px;
  width: 100%;
  height: 474px;
  pointer-events: none;
}

/* 7218:2216 : absoluto x=688 y=-62, 429×537 — extravasa o topo do card
   (1216 − 688 − 429 = 99px da direita) */
.cta__foto {
  position: absolute;
  right: 99px;
  top: -62px;
  width: 429px;
  height: 537px;
  pointer-events: none;
}

/* 7181:239 : column, gap 40px, width 568 fixo */
.cta__texto {
  position: relative;
  z-index: 1;
  width: 568px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* 7181:240 : column, gap 16px */
.cta__bloco { display: flex; flex-direction: column; gap: 16px; }

/* 7181:248 / 7307:384 "Image Content" : espaço reservado para a foto */
.cta__espaco { flex: 1 1 auto; align-self: stretch; }

.cta__titulo { color: var(--white); }

/* 7181:246 : 18px/1.7em, letter-spacing 0.02em */
.cta__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7em;
  letter-spacing: .02em;
  color: var(--white);
}

/* =========================================================================
   10. Footer — node 7181:332
   ========================================================================= */

/* column, padding 0 112px 32px, align center, gap 56px, bg #000 */
.rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 0 var(--section-px) 32px;
  background: var(--black);
  color: var(--cream);
}

/* 7181:333 : 1440×179, opacity 0.1 — sangra além do respiro lateral */
.rodape__pattern {
  display: block;
  width: calc(100% + 2 * var(--section-px));
  margin-inline: calc(-1 * var(--section-px));
}
/* Sem `opacity` aqui: o SVG exportado do Figma já traz <g opacity="0.1">.
   Aplicar de novo daria 0.1 × 0.1 = 0.01 e o grid sumiria. */
.rodape__pattern img {
  width: 100%;
  max-width: none;
  height: 179px;
}

/* 7181:415 e 7181:424 : row, space-between, align stretch, fill */
.rodape__topo,
.rodape__meio {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}

/* 7181:418 : width 501, Montserrat 400 32px/1.2em uppercase */
.rodape__frase {
  width: 501px;
  max-width: 100%;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--cream);
}

/* 7181:419 : row, align center, gap 24px */
.rodape__acoes { display: flex; align-items: center; gap: 24px; }

/* 7181:421 : 56×56, stroke rgba(255,255,255,0.2) */
.rodape__seta {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-white-20);
  transition: background-color .2s ease;
}
.rodape__seta:hover { background: rgba(255, 255, 255, .08); }

.rodape__logo { flex: 0 0 auto; align-self: flex-start; }

/* 7181:441 : row, align stretch, gap 24px, hug */
.rodape__colunas { display: flex; flex: 0 0 auto; align-items: stretch; gap: 24px; }

/* 7181:442 / 7181:455 : width 200 FIXO — não podem encolher, senão o grupo
   inteiro desalinha em relação ao logo. */
.rodape__col {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 7181:467 : coluna Contato é hug (242px no Figma).
   No Figma quem define esse hug é só o e-mail, que é "hug"; o endereço é
   "fill" e não entra na conta — ele quebra dentro da largura resultante. */
.rodape__col--contato {
  flex: 0 0 auto;
  width: max-content;
}
.rodape__col--contato .rodape__links a[href^="mailto"] { white-space: nowrap; }

/* Tira o endereço do cálculo de largura intrínseca da coluna (width: 0) e
   depois devolve a largura cheia (min-width: 100%), que porcentagem não
   entra em tamanho intrínseco. É o equivalente CSS do "fill" do Figma. */
.rodape__endereco {
  width: 0;
  min-width: 100%;
}

/* style_ac360550 : Montserrat Medium 500 14px/1.4em, ls 0.08em, uppercase */
.rodape__col-titulo {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
}

/* style_e8031531 : Montserrat 400 16px/1.5em, ls 0.02em, #C4C6CC */
.rodape__links { display: flex; flex-direction: column; gap: 16px; }
.rodape__links a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: .02em;
  color: var(--footer-text);
  transition: color .2s ease;
}
.rodape__links a:hover { color: var(--cream); }

/* 7181:477 : padding-top 32px, borda superior rgba(255,255,255,0.2) */
.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid var(--border-white-20);
}

/* style_fc138a1e : Montserrat 400 14px/1.4em, ls 0.02em */
.rodape__copy,
.rodape__autor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: .02em;
  color: var(--footer-text);
}

/* style_6d969bf9 : mesma família, line-height 1.5em */
.rodape__legal { display: flex; gap: 24px; }
/* No tema, um item legal sem URL cadastrada vira <span> em vez de link morto. */
.rodape__legal a,
.rodape__legal span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: .02em;
  color: var(--footer-text);
  transition: color .2s ease;
}
.rodape__legal a:hover { color: var(--cream); }

/* =========================================================================
   PÁGINAS DE TEXTO (políticas, termos)

   Reaproveitam o cabeçalho e o rodapé da home. A largura de leitura é menor
   que a das seções: texto corrido longo em 1216px vira parede.
   ========================================================================= */

/* --- Hero das páginas internas ----------------------------------------- */

.hero--simples { padding-bottom: 0; }

.legal-hero {
  padding-top: 80px;
  padding-bottom: 96px;
  background: var(--black);
  color: var(--cream);
}

.legal-hero__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 860px;
}

/* Um degrau acima do título de seção: aqui é título de página. */
.legal-hero__titulo {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1.15em;
  text-transform: uppercase;
}

.legal-hero__texto {
  max-width: 640px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6em;
}

.legal-hero__data {
  padding-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: .02em;
  color: rgba(255, 254, 238, .55);
  border-top: 1px solid var(--border-cream-30);
}

/* --- Corpo: conteúdo à esquerda, sumário à direita ---------------------- */

.legal {
  padding-top: 96px;
  padding-bottom: 112px;
  background: var(--cream);
  color: var(--black);
}

/* 736 + 120 + 360 = 1216, a mesma largura útil das seções da home */
.legal__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}

.legal__corpo {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 736px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- Sumário sticky ----------------------------------------------------- */

.legal__sumario {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  flex: 0 0 360px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Sumário longo rola por dentro em vez de estourar a tela. */
  max-height: calc(100vh - var(--header-h) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sumario { display: flex; flex-direction: column; }

.sumario__titulo {
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-black-10);
}

.sumario__lista {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

/* Compacto de propósito: com 14 seções, o sumário inteiro tem de caber na
   altura da tela sem precisar rolar por dentro. */
.sumario__lista a {
  display: block;
  padding: 6px 0 6px 16px;
  border-left: 2px solid transparent;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--gray-06);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.sumario__lista a:hover {
  color: var(--black);
  border-left-color: var(--primary-lightest);
}

/* Seção que está na tela agora, marcada pelo anim.js */
.sumario__lista a[aria-current="true"] {
  color: var(--primary-dark);
  border-left-color: var(--primary-pure);
  background: rgba(160, 85, 53, .05);
}

/* Documento que já está aberto */
.sumario__lista a[aria-current="page"] {
  color: var(--black);
  font-weight: 600;
  border-left-color: var(--brand-brown);
}

.legal__corpo h2 {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3em;
  text-transform: uppercase;
  scroll-margin-top: calc(var(--header-h) + 32px);
}

.legal__corpo h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4em;
}

.legal__corpo p,
.legal__corpo li {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6em;
}

.legal__corpo ul,
.legal__corpo ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 24px;
  list-style: disc;
}
.legal__corpo ol { list-style: decimal; }
.legal__corpo li { display: list-item; }

.legal__corpo a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__corpo a:hover { color: var(--primary-medium); }

/* Bloco de aviso — usado no alerta de emergência dos Termos */
.legal__aviso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: rgba(160, 85, 53, .06);
  border-left: 3px solid var(--brand-brown);
}

/* Campo que a Thaís precisa preencher antes de publicar */
.legal__pendente {
  padding: 2px 8px;
  background: rgba(160, 85, 53, .12);
  border-radius: 4px;
  font-weight: 600;
}

.legal__voltar {
  align-self: flex-start;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary-dark);
  border-bottom: 1px solid currentColor;
}

/* Abaixo de 1024px não sobra medida de leitura para duas colunas: o sumário
   passa para cima do conteúdo e deixa de ser sticky. */
@media (max-width: 1023px) {
  .legal__grid {
    flex-direction: column-reverse;
    gap: 48px;
  }
  .legal__corpo { max-width: none; }
  .legal__sumario {
    position: static;
    flex: none;
    width: auto;
    max-height: none;
    overflow: visible;
    gap: 32px;
    padding: 24px;
    background: rgba(160, 85, 53, .05);
  }
}

@media (max-width: 767px) {
  .legal-hero { padding-top: 40px; padding-bottom: 56px; }
  .legal-hero__wrap { gap: 16px; }
  .legal-hero__texto { font-size: 16px; }

  .legal { padding-top: 56px; padding-bottom: 56px; }
  .legal__grid { gap: 40px; }
  .legal__sumario { padding: 20px; gap: 24px; }
  .sumario__lista a { padding: 6px 0 6px 12px; font-size: 14px; }

  .legal__corpo h2 { font-size: 20px; line-height: 1.4em; }
  .legal__corpo p,
  .legal__corpo li { font-size: 16px; }
}

/* =========================================================================
   NAVEGAÇÃO EM TELAS ESTREITAS (até 1023px)

   Abaixo de 1024px o logo mais os quatro links não cabem na largura útil e o
   menu quebrava em duas linhas — o que também desalinhava o padding com que
   o hero compensa o cabeçalho fixo. Da tablet para baixo entra o hambúrguer.
   ========================================================================= */

@media (max-width: 1023px) {
  .site-header__menu { display: flex; align-items: center; }

  /* Ancorado no próprio cabeçalho, que é `position: fixed`. */
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px var(--section-px);
    background: var(--black);
    border-top: 1px solid var(--border-cream-30);
  }
  .site-nav--aberto { display: flex; }
  .site-nav__link { padding: 8px 0; }
}

/* =========================================================================
   TABLET (768–1199px)

   O Figma só tem 1440 e 375. Nesta faixa vale o layout de desktop, mas as
   larguras fixas dele (689px da coluna do hero, 700px da frase, as três
   colunas de 200px do rodapé) estouram a viewport. Aqui elas viram fluidas —
   nenhuma seção muda de estrutura.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  :root { --content-gap: 56px; }

  /* Nas colunas estreitas desta faixa o `nowrap` dos botões estourava a
     viewport — aqui eles podem quebrar linha. */
  .btn { white-space: normal; max-width: 100%; }

  .hero__copy { width: auto; flex: 1 1 0; min-width: 0; }
  .hero__buttons { width: auto; flex-wrap: wrap; }
  .hero__figure { height: 520px; }
  .hero__manifesto p { width: auto; flex: 1 1 auto; }

  .etapas__intro { flex: 0 1 clamp(220px, 30vw, 397px); width: auto; padding-bottom: 56px; }
  .etapa { gap: 24px; }

  .diferenciais__figure { height: 560px; }
  .sobre__text { height: auto; gap: 40px; }
  .sobre__title { width: auto; }

  .atend__destaque-titulo { width: auto; }
  .atend__card { width: 50%; }

  /* Três cards de depoimento não cabem: passam a dois por linha. */
  .dep__card { flex: 0 0 calc((100% - 32px) / 2); }

  .cta__foto { right: 24px; width: 320px; height: 400px; top: -40px; }
  .cta__texto { width: auto; flex: 1 1 auto; min-width: 0; }

  .rodape__frase { width: auto; }
  /* A frase mais o par botão+seta não cabem lado a lado nesta faixa. */
  .rodape__topo { flex-direction: column; align-items: stretch; gap: 32px; }
  .rodape__acoes { align-self: flex-start; }
  .rodape__meio { flex-direction: column; align-items: stretch; gap: 40px; }
  .rodape__colunas { flex-wrap: wrap; gap: 32px; }
  .rodape__col--contato { flex: 1 1 260px; width: auto; }
  .rodape__endereco { width: auto; min-width: 0; }
}

/* =========================================================================
   MOBILE — frame Figma "Mobile" 7307:29 (375px)

   Mudanças estruturais do frame mobile:
   · respiro lateral 112px → 16px, padding vertical 112px → 56px
   · gaps de seção 120px → 40px
   · toda seção em linha vira coluna única
   · títulos 40px → 24px/1.3em; corpo 18px → 16px; passo 24px → 20px/1.4em
   · botões passam a ocupar a largura toda
   · a seção "Sobre" inverte a ordem: texto antes da foto
   · o header troca a navegação por um ícone de menu
   ========================================================================= */

@media (max-width: 767px) {

  :root {
    --section-px: 16px;
    --content-gap: 40px;
    --header-h: 40px; /* 16px de respiro + 24px do logo mobile */
  }

  .section-title { font-size: 24px; line-height: 1.3em; }
  .body-18 { font-size: 16px; }

  /* --- Header 7307:31 --------------------------------------------------- */
  .site-header__logo { width: 155.2px; height: 24px; }

  /* --- Hero 7307:54 ----------------------------------------------------- */
  .hero__content {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 40px;
  }
  .hero__copy { width: auto; gap: 40px; }
  .hero__title { font-size: 24px; line-height: 1.3em; }
  .hero__lead { font-size: 16px; }

  /* Button Group 7307:60 : coluna, gap 16, botões em largura total */
  .hero__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: auto;
  }
  .hero__buttons .btn { width: 100%; white-space: normal; }

  .hero__figure { height: 496px; }

  /* Manifesto 7307:85 : segue em linha, texto passa a preencher */
  .hero__manifesto { padding-top: 56px; padding-bottom: 56px; }
  .hero__manifesto p {
    width: auto;
    flex: 1 1 auto;
    font-size: 24px;
    line-height: 1.3em;
  }

  /* --- Diferenciais 7307:87 --------------------------------------------- */
  .diferenciais {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .diferenciais__figure { flex: none; height: 428.75px; }
  .diferenciais__text { flex: none; }

  /* --- Como Funciona 7307:92 (sem padding inferior no mobile) ------------ */
  .etapas {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 0;
  }
  /* Em coluna única não há nada para o sticky acompanhar. */
  .etapas__intro { position: static; flex: none; width: auto; padding-bottom: 0; }
  .etapas__list { flex: none; gap: 32px; }

  /* Step 7307:99 : vira coluna (tag em cima), gap 16 */
  .etapa { flex-direction: column; gap: 16px; }
  .etapa__tag { flex: none; }
  .etapa__title { font-size: 20px; line-height: 1.4em; }

  /* --- Sobre 7307:123 : texto antes da foto ----------------------------- */
  .sobre {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .sobre__figure { flex: none; height: 506px; }
  .sobre__text {
    flex: none;
    height: auto;
    justify-content: flex-start;
    gap: 40px;
  }
  .sobre__title { width: auto; }

  /* --- Psicoterapia 7307:130 -------------------------------------------- */
  .psico {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .psico__heading,
  .psico__body { flex: none; }
  .psico__body { align-items: stretch; }
  .psico__prose { font-size: 16px; }
  .psico__body .btn { width: 100%; white-space: normal; }

  /* --- Para quem é 7307:143 --------------------------------------------- */
  .quem {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .quem__intro,
  .quem__lista { flex: none; }
  .quem__lead { width: auto; }

  /* --- Atendimentos 7307:181 -------------------------------------------- */
  .atend { gap: 40px; padding-top: 56px; padding-bottom: 56px; }

  /* Destaque 7307:183 : vira coluna */
  .atend__destaque { flex-direction: column; }
  .atend__destaque-texto { flex: none; padding: 15px 16px; gap: 24px; }
  .atend__destaque-titulo { width: auto; font-size: 24px; line-height: 1.3em; }
  .atend__destaque-texto .body-18 { font-size: 16px; }
  .atend__destaque-media { flex: none; height: 515px; }
  /* 7307:195 : x=48, y=24.25 */
  .atend__label { left: 48px; right: auto; top: 24.25px; }

  /* Grid 7307:197 : cards empilhados, padding 24, divisória vira linha inferior */
  .atend__grid { flex-direction: column; }
  .atend__card {
    width: 100%;
    max-width: none;
    padding: 24px;
  }
  /* Os seletores combinados precisam ser repetidos aqui: `--b-t.--b-r` tem
     especificidade maior que `.atend__card` e manteria a borda do desktop. */
  .atend__card,
  .atend__card--b-r,
  .atend__card--b-t,
  .atend__card--b-t.atend__card--b-r {
    box-shadow: inset 0 -1px 0 var(--border-white-30);
  }
  article.atend__card:last-of-type { box-shadow: none; }
  .atend__card--vazio { display: none; }

  /* style_e20dd43a : 24px/1.2em → 20px/1.3em no mobile */
  .atend__card-titulo { font-size: 20px; line-height: 1.3em; }

  /* 7307:205 : Button Container vira stretch, botão ocupa a largura toda */
  .atend__card-acao { align-items: stretch; }
  .atend__card-acao .btn { width: 100%; white-space: normal; }

  /* --- Depoimentos 7307:259 --------------------------------------------- */
  .dep { gap: 40px; padding-top: 60px; }
  .dep__wrap { flex-direction: column; gap: 16px; }
  .dep__card { flex: none; width: 100%; padding: 24px; }

  /* --- Call to action 7307:368 ------------------------------------------ */
  .cta { padding-top: 60px; padding-bottom: 60px; }

  /* Content 7307:369 : coluna, padding 24, altura fixa 800 */
  .cta__card {
    flex-direction: column;
    gap: 40px;
    padding: 24px;
    height: 800px;
  }
  .cta__texto { width: auto; align-items: stretch; gap: 32px; }

  /* Text Block 7307:372 : centralizado */
  .cta__bloco { align-items: center; gap: 16px; }
  .cta__simbolo { margin-inline: auto; }
  .cta__titulo { font-size: 24px; line-height: 1.3em; text-align: center; }
  .cta__lead {
    width: 235px;
    max-width: 100%;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.3em;
    text-align: center;
  }
  .cta__texto .btn { width: 100%; white-space: normal; }

  /* Image Content 7307:384 : reserva 315px para a foto */
  .cta__espaco { flex: none; height: 315px; }

  /* 7307:370 : foto passa para o rodapé do card, 343×429 em x=0 y=371.25 */
  .cta__foto {
    left: 0;
    right: auto;
    top: 371.25px;
    width: 343px;
    height: 429px;
  }
  /* 7307:386 : pattern em x=1 y=326.25, 342×474 */
  .cta__pattern {
    left: 1px;
    top: 326.25px;
    width: 342px;
    height: 474px;
  }

  /* --- Rodapé 7307:468 --------------------------------------------------- */
  .rodape { gap: 40px; }
  .rodape__pattern img { height: 116px; }

  /* 7307:551 e 7307:564 : gap 32 */
  .rodape__topo,
  .rodape__meio {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  /* 7307:554 : width 302 fixo */
  .rodape__frase { width: 302px; max-width: 100%; font-size: 24px; line-height: 1.3em; }

  /* 7307:555 : a linha estica e o botão principal preenche */
  .rodape__acoes { align-self: stretch; }
  .rodape__acoes .btn { flex: 1 1 auto; white-space: normal; }

  /* 7307:581 : as três colunas empilham com gap 24 */
  .rodape__colunas { flex-direction: column; gap: 24px; }
  .rodape__col,
  .rodape__col--contato { flex: none; width: auto; }
  .rodape__endereco { width: auto; min-width: 0; }

  /* 7307:618 : base em coluna, gap 24 */
  .rodape__base {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .rodape__legal { flex-direction: column; gap: 24px; }
}

/* =========================================================================
   ANIMAÇÕES

   Nada aqui altera a estrutura nem o layout: só opacity e transform, que não
   entram no cálculo de caixa. A classe `js-anim` é posta pelo próprio JS, de
   modo que sem JavaScript nenhum conteúdo fica escondido.
   ========================================================================= */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}

.js-anim .reveal--visivel {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Fotos entram com um leve recuo de zoom */
.js-anim .reveal--zoom img {
  transform: scale(1.06);
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.js-anim .reveal--zoom.reveal--visivel img { transform: none; }

/* --- Microinterações ---------------------------------------------------- */

.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.btn--solid:hover,
.btn--light:hover { transform: translateY(-2px); }

/* Sublinhado do menu, crescendo da esquerda */
.site-nav__link { position: relative; }
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.atend__card { transition: background-color .35s ease; }
.atend__card:hover { background: rgba(255, 255, 255, .03); }

.dep__card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
.dep__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(12, 17, 29, .10);
}

.quem__dot { transition: border-color .3s ease, transform .3s ease; }
.quem__item:hover .quem__dot { border-color: var(--primary-pure); transform: scale(1.15); }

.rodape__seta img { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.rodape__seta:hover img { transform: translateX(4px); }

.diferenciais__figure img,
.hero__figure img,
.sobre__figure img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }

/* --- Quem pediu menos movimento não recebe nenhum ----------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-anim .reveal,
  .js-anim .reveal--zoom img {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   ACIMA DO FRAME (>1440px)

   O Figma para em 1440. Acima disso as colunas de foto continuavam
   crescendo enquanto a altura seguia fixa: com `object-fit: cover` a
   imagem ampliava para preencher a largura extra e perdia topo e base —
   no hero o corte comia o rosto. Aqui as quatro fotos de seção param na
   largura de origem do frame e a coluna de texto ao lado é que absorve a
   sobra, o que mantém as seções fluidas e os fundos full-bleed.
   ========================================================================= */

@media (min-width: 1441px) {

  /* 1216 − 689 (coluna de texto) − 120 (gap) = 407, o mesmo do Figma. */
  .hero__copy {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .hero__figure {
    flex: 0 0 auto;
    width: calc(var(--content-w) - var(--hero-copy-w) - var(--content-gap));
  }

  /* (1216 − 120) ÷ 2 = 548 × 756: a proporção exata do arquivo de origem,
     então a foto do Sobre deixa de ser cortada. */
  .sobre__figure {
    flex: 0 0 auto;
    width: calc((var(--content-w) - var(--content-gap)) / 2);
  }

  /* (1216 − 56) ÷ 2 = 580 × 725, o enquadramento do frame. Aqui a foto é
     recortada de propósito já no Figma; o teto só impede que o recorte
     aumente junto com a tela. */
  .diferenciais__figure {
    flex: 0 0 auto;
    width: calc((var(--content-w) - var(--dif-gap)) / 2);
  }

  /* 1216 ÷ 2 = 608: as duas metades do card de destaque encostam uma na
     outra, sem gap entre elas. */
  .atend__destaque-media {
    flex: 0 0 auto;
    width: calc(var(--content-w) / 2);
  }

  /* O card do destaque continua ocupando a largura toda, mas o texto conserva
     a medida de 1440. Sem isso a coluna alarga, o texto quebra em menos
     linhas, o card fica mais baixo e a foto — que é `cover` — volta a perder
     topo e base, mesmo com a largura já travada acima. */
  .atend__destaque-texto > * {
    max-width: var(--atend-texto-w);
  }
}