@import url('fonts.css');

/* ============================================================
   ODENTISTA Clínica Odontológica
   Layout reproduzido de lipedemaguru.com (medidas em 1440px):
   hero 86px partido em dois cantos · wordmark 1384px · frase
   86px centralizada · números nas laterais · carrossel de duas
   fileiras · títulos de seção 143px · blocos empilhados.
   Curvas e tempos: animacoes.md · Cores: BRAND.md
   ============================================================ */

:root {
  --bg: #f2f6fa;
  --surface: #e4edf4;
  --surface-2: #c6d4e1;
  --ink: #122c42;
  --ink-soft: #46647d;
  --ink-deep: #0d2436;
  --accent: #005996;
  --accent-light: #0c77b4;
  --brand-purple: #3c3467;
  --line: rgba(18, 44, 66, .14);
  /* equivalente do #D8C3B0 do original: texto claro sobre bloco escuro */
  --on-dark-soft: #c6d4e1;

  --font-display: 'GothicCompact', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-body: 'GroteskText', 'Inter', system-ui, sans-serif;
  --font-medium: 'GroteskMedium', 'Inter', system-ui, sans-serif;
  --font-compact: 'GroteskCompact', 'Inter', system-ui, sans-serif;

  /* 27px de margem em 1440 = 1.875vw */
  --edge: clamp(14px, 1.875vw, 27px);
  --section-y: clamp(4rem, 8.5vw, 8.5rem);
  --radius: 20px;

  --ease-out-quint: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.25, 1, .5, 1);
  --ease-hover: cubic-bezier(.25, 1, .33, 1);
  --ease-img: cubic-bezier(.05, .2, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;               /* medido no original */
  line-height: 1.3;
  letter-spacing: -.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.16;
  margin: 0;
}

/* Balance, como no Framer: o navegador reparte as linhas para ficarem parelhas
   em vez de deixar a última curta. Precisa vir antes do splitHeading medir —
   ele lê a quebra natural e a congela, então o que ele congela já é a versão
   equilibrada. Em título é `balance`; em parágrafo longo o navegador ignora
   `balance` (tem teto de linhas), e quem serve é `pretty`, que evita a palavra
   solta na última linha. */
h1, h2, h3, h4, .t-big, .t-section, .t-card, .split-heading, .lede {
  text-wrap: balance;
}
p, li, dd, figcaption, .figure p, blockquote {
  text-wrap: pretty;
}

/* escalas medidas no original: 143px seções, 86px títulos, 43px cards */
.t-section { font-size: clamp(3rem, 9.9vw, 143px); line-height: 1.19; }
.t-big     { font-size: clamp(2.1rem, 5.97vw, 86px); line-height: 1; }
.t-card    { font-size: clamp(1.5rem, 2.99vw, 43px); line-height: 1.12; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { padding-inline: var(--edge); }

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-compact);
  font-size: clamp(.8rem, 1.46vw, 21px);
  letter-spacing: -.01em;
  text-transform: lowercase;
  padding: .72em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity .45s var(--ease-hover), transform .45s var(--ease-hover),
    border-color .45s var(--ease-hover), color .45s var(--ease-hover),
    background-color .45s var(--ease-hover), box-shadow .45s var(--ease-hover);
}
/* CTA de agendamento: uma cor de ação só, igual na página inteira.
   #0C77B4 é o "acento claro" do BRAND.md — branco sobre ele dá 4.9:1, e ele
   se sustenta tanto sobre o fundo claro quanto sobre o bloco escuro e a foto
   do hero, que é onde os quatro botões de agendar pousam.
   Medium em vez de Compact: mais peso, e é o que o BRAND.md pede para botões. */
.btn--cta {
  background: var(--accent-light);
  color: #fff;
  font-family: var(--font-medium);
  padding: .82em 1.9em;
  box-shadow: 0 10px 24px rgba(12, 119, 180, .3);
}
.btn--cta:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(12, 119, 180, .42);
}

.btn--light { background: var(--bg); color: var(--ink-deep); }
.btn--light:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,36,54,.2); }
.btn--dark { background: var(--ink-deep); color: var(--on-dark-soft); }
.btn--dark:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.btn--ghost { border-color: rgba(0, 89, 150, .38); color: var(--accent); }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

/* ---------- header (52px no original) ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 72px;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  transition: background-color .45s var(--ease-hover), box-shadow .45s var(--ease-hover);
}
.header.is-stuck { background: rgba(242,246,250,.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
/* Logo e menu alinhados por dentro do card do hero: --edge é onde o card
   começa (27px a 1440), e os 8px extras compensam o raio de 20px, que recua a
   borda visual no canto e fazia os dois parecerem estar saindo do quadro. */
.header__inner { width: 100%; padding-inline: calc(var(--edge) + 8px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header__logo img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.6rem); }
.nav a { font-family: var(--font-body); font-size: 17px; position: relative; padding-block: .3rem; transition: color .3s ease; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-hover);
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); }

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; place-items: center; }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .45s var(--ease-hover), opacity .3s ease; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   HERO — título partido: topo-esquerda e base-direita,
   botão centralizado entre os dois.
   ============================================================ */

.hero {
  /* altura do cabeçalho + 14px, para o card não nascer colado nele */
  padding-top: calc(72px + 14px + env(safe-area-inset-top, 0px));
  --hero-inset: clamp(1.5rem, 2.8vw, 2.75rem);
}

.hero__card {
  position: relative;
  margin-inline: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  /* 633/1386 do original ≈ 44vw, com piso para telas baixas */
  height: clamp(420px, 44vw, 640px);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: contents; }
.hero__media img { width: 100%; height: 114%; object-fit: cover; object-position: 50% 16%; }
.hero__card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(155deg, rgba(13,36,54,.86) 0%, rgba(13,36,54,.44) 30%, rgba(13,36,54,0) 52%),
    linear-gradient(to top, rgba(13,36,54,.9) 0%, rgba(13,36,54,.66) 20%, rgba(13,36,54,.12) 48%, rgba(13,36,54,0) 66%);
}

/* O hero pede corpo maior que os outros .t-big. Medido no layout de referência
   a 1440: lá a fonte também é ~86px, mas a maior linha ocupa 48% da largura do
   card, porque a frase é mais longa. A nossa, com 24 caracteres, ocupava 27% e
   por isso lia menor. O que cresce é só o hero — a frase de abertura e o
   fechamento seguem nos 86px do sistema. */
.hero__top h1, .hero__bottom p { font-size: clamp(2.35rem, 8.6vw, 124px); }

.hero__top { position: absolute; top: var(--hero-inset); left: var(--hero-inset); max-width: min(47%, 660px); }
/* A frase do complemento mede 7,6x o corpo da fonte: a 124px são 942px, ou 69%
   de um card de 1371. Por isso a coluna dele é mais larga que a do título, que
   segue estreita de propósito para a quebra cair no "que". */
.hero__bottom { position: absolute; right: var(--hero-inset); bottom: var(--hero-inset); text-align: right; max-width: min(72%, 1000px); }
.hero__top h1, .hero__bottom p { color: var(--bg); line-height: .83; }
.js-anim .hero__top .split-line,
.js-anim .hero__bottom .split-line { line-height: 1; }
.js-anim .hero__top .split-line + .split-line,
.js-anim .hero__bottom .split-line + .split-line { margin-top: -.17em; }
.hero__bottom p { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; }

.hero__btn {
  position: absolute;
  left: var(--hero-inset);
  bottom: clamp(1.75rem, 4.3vw, 3.9rem);
  z-index: 2;
}
.hero__btn:hover { transform: translateY(-2px); }

/* ---------- wordmark horizontal (1384×187 no original) ---------- */

.wordmark { padding: clamp(1.25rem, 2.4vw, 2rem) 20px clamp(1rem, 2vw, 1.75rem); }
/* Antes era texto vivo na PP Right Gothic Compact. Agora é o mesmo desenho em
   contornos (assets/img/wordmark-odentista.svg), então não depende mais da
   fonte carregar. A largura reproduz o tamanho anterior: a tinta do wordmark
   media 3,42x o corpo da fonte, e o corpo ia de clamp(3.5rem, 15.6vw, 225px). */
.wordmark__art {
  display: block;
  margin-inline: auto;
  width: clamp(192px, 53.4vw, 769px);
  height: auto;
}

/* ============================================================
   FRASE DE ABERTURA — 86px centralizada, linha a linha
   ============================================================ */

.statement {
  padding: clamp(3rem, 8vw, 7rem) var(--edge) clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.statement h2 { max-width: min(900px, 74vw); margin-inline: auto; }

/* ---------- números nas laterais + texto no centro ---------- */

.figures {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 164px;
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: start;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--edge) var(--section-y);
  max-width: 1300px;
  margin-inline: auto;
}
.figure__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 5.97vw, 86px); line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.figure p { font-size: 19px; line-height: 1.26; margin-top: .8rem; color: var(--ink-soft); }
.figures__mid { text-align: center; padding-top: clamp(.5rem, 1.5vw, 1rem); }
.figures__mid p { max-width: 430px; margin-inline: auto; margin-bottom: 2rem; }
.figure--right { text-align: left; }

/* ============================================================
   CARROSSEL DE DUAS FILEIRAS — cards 348×439, radius 20px,
   deslizando em direções opostas conforme a página rola.
   ============================================================ */

.marquee { padding-bottom: var(--section-y); overflow: hidden; }
.marquee__head { text-align: center; padding: 0 var(--edge) clamp(1.5rem, 3vw, 2.5rem); }

.marquee__row { display: flex; gap: clamp(.75rem, 1.4vw, 20px); width: max-content; will-change: transform; }
.marquee__row + .marquee__row { margin-top: clamp(.75rem, 1.4vw, 20px); }

.tile {
  position: relative;
  flex: none;
  width: clamp(220px, 24.2vw, 348px);
  height: clamp(280px, 30.5vw, 439px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-img); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13,36,54,.86) 4%, rgba(13,36,54,.24) 55%, rgba(13,36,54,.04) 100%); }
.tile:hover img { transform: scale(1.045); }
.tile h3 { position: absolute; left: clamp(1rem, 1.7vw, 1.5rem); right: clamp(1rem, 1.7vw, 1.5rem); bottom: clamp(1rem, 1.7vw, 1.5rem); color: #fff; }
/* tiles de texto, intercalados entre os de foto, como no original */
.tile--text { background: var(--surface-2); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 2vw, 1.75rem); }
.tile--text::after { display: none; }
.tile--text h3 { color: var(--ink); position: static; }
.tile--text p { color: var(--ink-soft); font-size: 17px; margin: 0; }

/* ============================================================
   BLOCOS EMPILHADOS — no original, cards de consulta em sticky
   ============================================================ */

.stack-head { text-align: center; padding: 0 var(--edge) clamp(1.5rem, 3vw, 2.5rem); }
.stack { padding: 0 var(--edge) var(--section-y); display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.75rem); }

.plan {
  position: sticky;
  top: 72px;
  border-radius: 28px;
  background: var(--surface);
  overflow: hidden;
  padding: clamp(1.5rem, 3.3vw, 3rem);
}
.plan:nth-child(2) { top: 92px; background: var(--surface-2); }
.plan:nth-child(3) { top: 112px; background: var(--ink-deep); color: #fff; }
.plan:nth-child(3) h3, .plan:nth-child(3) h4 { color: #fff; }
.plan:nth-child(3) .plan__list li { border-color: rgba(255,255,255,.16); }
.plan:nth-child(3) .plan__list span { color: rgba(255,255,255,.7); }
.plan:nth-child(3) .plan__intro { color: rgba(255,255,255,.78); }

.plan > h3 { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.plan__body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.plan__intro { color: var(--ink-soft); font-size: 19px; }
.plan__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.plan__cols h4 { font-family: var(--font-medium); font-weight: 400; font-size: 20px; letter-spacing: -.03em; margin-bottom: .75rem; }
.plan__list li { padding: .55rem 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.3; }
.plan__list strong { font-family: var(--font-medium); font-weight: 400; display: block; }
.plan__list span { display: block; color: var(--ink-soft); font-size: 16px; margin-top: .1rem; }
.plan__foot { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ============================================================
   DIFERENCIAIS — fundo escuro, título creme, grade escalonada
   ============================================================ */

.dark { background: var(--ink-deep); color: #fff; padding-block: var(--section-y); }
.dark__head { text-align: center; padding-inline: var(--edge); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.dark__head h2 { color: var(--bg); }

.perks { padding-inline: var(--edge); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2.25rem) clamp(1rem, 2.4vw, 2.75rem); max-width: 1400px; margin-inline: auto; }
/* no original as colunas ficam escalonadas em altura */
.perks > :nth-child(3n+2) { margin-top: clamp(-3.5rem, -2.5vw, -.5rem); }
.perks > :nth-child(3n+3) { margin-top: clamp(.25rem, 1vw, 1rem); }

.perk { border-top: 1px solid rgba(255,255,255,.2); padding-top: clamp(1rem, 1.8vw, 1.5rem); }
.perk__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.perk__row h3 { color: #fff; max-width: 14ch; }
.perk__icon { width: 62px; height: 62px; flex: none; color: var(--on-dark-soft); opacity: .85; }
.perk p { color: rgba(255,255,255,.72); font-size: 19px; line-height: 1.28; max-width: 34ch; }
.dark__foot { text-align: right; padding-inline: var(--edge); margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 1400px; margin-left: auto; margin-right: auto; }

/* ============================================================
   FAQ — coluna de 667px, perguntas GroteskMedium 24px
   ============================================================ */

.faq-sec { padding-block: var(--section-y); }
.faq-sec__head { text-align: center; padding-inline: var(--edge); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.faq { width: min(667px, calc(100% - 2 * var(--edge))); margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-medium); font-weight: 400;
  font-size: clamp(1.1rem, 1.67vw, 24px); letter-spacing: -.03em; line-height: 1.25;
  color: var(--ink); padding: clamp(1.1rem, 1.9vw, 1.65rem) 2.6rem clamp(1.1rem, 1.9vw, 1.65rem) 0;
  position: relative; transition: color .3s ease;
}
.faq__q:hover { color: var(--accent); }
.faq__q::before, .faq__q::after {
  content: ''; position: absolute; right: .25rem; top: 50%;
  width: 14px; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease-hover);
}
.faq__q::before { transform: translateY(-50%) rotate(90deg); }
.faq__q::after { transform: translateY(-50%); }
.faq__q[aria-expanded='true']::before { transform: translateY(-50%) rotate(0deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.faq__a > div { padding-bottom: clamp(1.1rem, 1.9vw, 1.65rem); color: var(--ink-soft); }
.faq__a ul { margin-top: .75rem; display: grid; gap: .5rem; }
.faq__a li { padding-left: 1.1rem; position: relative; }
.faq__a li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---------- CTA final ---------- */

.closer { text-align: center; padding: var(--section-y) var(--edge); }
.closer h2 { max-width: min(760px, 78vw); margin-inline: auto; margin-bottom: 1.25rem; }
.closer p { color: var(--ink-soft); margin-bottom: 2rem; }
.closer__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ============================================================
   EQUIPE — carrossel de retratos com título sobreposto,
   mesmo padrão do "Latest Blogs" do original.
   ============================================================ */

.people { position: relative; padding-bottom: var(--section-y); overflow: hidden; }
.people__head { text-align: center; padding: 0 var(--edge) clamp(1.5rem, 3vw, 2.5rem); }
.people__ticker {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* o dedo ainda rola a página na vertical */
  -webkit-user-select: none; user-select: none;
}
.people__ticker.is-dragging { cursor: grabbing; }
/* sem JS, ou com movimento reduzido: rolagem horizontal nativa */
.people__ticker.is-native { overflow-x: auto; cursor: default; scrollbar-width: thin; }
.people__track { display: flex; gap: clamp(.75rem, 1.5vw, 20px); width: max-content; will-change: transform; }
.people__ticker.is-native .people__track { padding-inline: var(--edge); }
.person { flex: none; width: clamp(230px, 28vw, 400px); }
.person__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface);
  display: grid; place-items: center;
  overflow: hidden; position: relative;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-img); -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.person:hover .person__photo img { transform: scale(1.04); }
.person__initials { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--surface-2); }
.person h3 { font-family: var(--font-medium); font-weight: 400; font-size: 20px; letter-spacing: -.03em; margin-top: 1rem; }
.person p { font-size: 17px; color: var(--ink-soft); margin-top: .2rem; }

/* ---------- faixa de imagem ---------- */

.band { padding: 0 var(--edge) var(--section-y); }
.band__card { border-radius: 28px; overflow: hidden; height: clamp(240px, 30vw, 440px); }
.band__card img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }

/* ---------- localização ---------- */

.place { padding: 0 var(--edge) var(--section-y); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1rem, 2vw, 1.5rem); }
.place__info { background: var(--surface); border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 1.6rem; }
.place__row dt { font-family: var(--font-compact); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; }
.place__row dd { margin: 0; font-size: 19px; line-height: 1.35; }
.place__row a { transition: color .3s ease; }
.place__row a:hover { color: var(--accent); }
.place__map { border-radius: 28px; overflow: hidden; min-height: 380px; background: var(--surface-2); }
.place__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

/* ---------- rodapé ---------- */

.footer { padding: var(--section-y) 20px calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.footer__col h5 { font-family: var(--font-medium); font-weight: 400; font-size: 19px; margin: 0 0 1rem; letter-spacing: -.03em; }
.footer__col li { margin-bottom: .5rem; }
.footer__col a, .footer__col span { font-size: 17px; color: var(--ink-soft); transition: color .3s ease; }
.footer__col a:hover { color: var(--accent); }
.footer__legal { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: 16px; color: var(--ink-soft); }

/* ---------- WhatsApp ---------- */

.wa {
  position: fixed; right: clamp(1rem, 2vw, 1.75rem);
  bottom: calc(clamp(1rem, 2vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 70; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink-deep); display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(13,36,54,.26);
  transition: transform .45s var(--ease-hover), box-shadow .45s var(--ease-hover);
}
.wa:hover { background: var(--accent); transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(13,36,54,.32); }
.wa svg { width: 29px; height: 29px; fill: #fff; }

/* ============================================================
   Animações — o estado visível é o padrão do CSS.
   Nada aqui roda sem a marca .js-anim, posta pelo JS.
   ============================================================ */

.js-anim [data-reveal] {
  opacity: 0; transform: translateY(75px);
  transition: transform .75s var(--ease-out-quint), opacity .75s var(--ease-out-quint);
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }
.js-anim [data-reveal='slow'] { transition-duration: 1.2s; transition-timing-function: var(--ease-out-expo); }

.js-anim .split-line { display: block; overflow: hidden; }
.js-anim .split-line > span { display: block; transform: translateY(101%); transition: transform .9s var(--ease-out-quint); }
.js-anim .split-heading.is-in .split-line > span { transform: none; }

.js-anim [data-zoom] { transform: scale(1.2); transition: transform 1.4s var(--ease-out-expo); }
.js-anim [data-zoom].is-in { transform: scale(1); }

@supports (animation-timeline: view()) {
  .hero__media img { animation: hero-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes hero-parallax { from { transform: translateY(-6%); } to { transform: translateY(4%); } }
}

/* ---------- responsivo ---------- */

@media (max-width: 1100px) {
  .plan__body { grid-template-columns: 1fr; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perks > :nth-child(3n+2), .perks > :nth-child(3n+3) { margin-top: 0; }
  .place { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; max-width: 620px; }
  .figure--right { text-align: center; }
  .figure p { margin-inline: auto; max-width: 30ch; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }

  /* ---------- escala tipográfica do celular ----------
     Os clamps do desktop usam vw. Num telefone todo termo vw colapsa no mínimo
     do clamp, que era um piso de segurança e não um tamanho pensado: o título
     do hero caía para 33.6px, menor que o título de seção (48px) e menos da
     metade do wordmark (73px), e o botão ficava em 12.8px — abaixo do corpo.
     Aqui a escala é declarada para o telefone, com vw para acompanhar a
     largura entre 360 e 430. */
  /* o hero manda na página: precisa de seletor tão específico quanto o do
     desktop (.hero__top h1) para vencer, e de corpo acima do resto */
  .hero__top h1 { font-size: clamp(2.75rem, 12vw, 3.4rem); }
  /* a frase de abertura tem 86 caracteres: acima disso ela quebra em seis
     linhas irregulares numa coluna de 354pt */
  .t-big     { font-size: clamp(2rem, 9vw, 2.5rem); }
  .t-section { font-size: clamp(2.6rem, 12vw, 3.25rem); }
  .t-card    { font-size: 1.5rem; }
  .figure__num { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  /* 16px e mais respiro vertical: a área de toque passa de 42 para 48px */
  .btn { font-size: 1rem; padding: .9em 1.6em; }
  .nav {
    position: fixed; inset: 0 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: calc(84px + env(safe-area-inset-top, 0px)) var(--edge) 1.5rem;
    transform: translateY(-101%); transition: transform .55s var(--ease-hover);
    box-shadow: 0 18px 40px rgba(13,36,54,.12);
  }
  .nav.is-open { transform: none; }
  .nav a { padding-block: .9rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a::after { display: none; }
  .burger { display: grid; }
  .header__cta { display: none; }

  /* No desktop a frase mora nos dois cantos do card. No retrato isso vira
     dois blocos órfãos com um vão morto no meio: aqui eles viram um bloco só,
     apoiado na base, e a foto fica livre em cima. */
  .hero__card {
    height: auto; min-height: 62vh;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: .7rem;
    padding: 1.75rem 1.5rem 2rem;
  }
  .hero__top, .hero__bottom { position: static; text-align: left; padding: 0; max-width: 100%; margin: 0; }
  /* empilhado, o complemento no mesmo corpo do título pesaria demais */
  .hero__bottom p { font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
  /* o botão sai do absoluto e entra na pilha, alinhado à esquerda como o texto */
  .hero__btn { position: static; transform: none; align-self: flex-start; margin-top: .35rem; }
  .hero__btn:hover { transform: translateY(-2px); }
  .hero__card::after {
    background:
      linear-gradient(to bottom, rgba(13,36,54,.74) 0%, rgba(13,36,54,.3) 17%, rgba(13,36,54,0) 33%),
      linear-gradient(to top, rgba(13,36,54,.92) 13%, rgba(13,36,54,.46) 38%, rgba(13,36,54,0) 60%);
  }

  .perks { grid-template-columns: 1fr; }
  .plan__cols { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .dark__foot { text-align: center; }
  .wordmark__art { width: 58vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-anim [data-reveal], .js-anim [data-zoom], .js-anim .split-line > span { opacity: 1 !important; transform: none !important; }
  .marquee__row { transform: none !important; }
}