/* ============================================================================
   Patrícia Barros — landing page
   Camada sobre o design system Classical (css/classical.css).
   Paleta e regras de aplicação: ver PALETTE.md.
   Regra do projeto: nunca escrever hex no markup — sempre var(--token).
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Papel e tinta */
  --color-bg: #faf6f0;
  --color-text: #241d18;
  --color-divider: rgba(74, 35, 56, .18);
  /* A moldura das fotos (.plate, do Classical) lê este token. O PALETTE.md não o
     lista, e o cinza do Classical destoava do marfim — passa para a areia. */
  --color-surface: var(--pb-sand-200);

  /* Ação — terracota */
  --color-accent-300: #e5a98f;
  --color-accent: #c0563a;
  --color-accent-600: #a8462d;
  --color-accent-700: #8b3722;

  /* Neutros de texto */
  --color-neutral-100: #f3e8da;
  --color-neutral-600: #857468;
  --color-neutral-700: #6a594e;
  --color-neutral-800: #4e4038;
  --color-neutral-900: #2b211b;

  --pb-sand-200: #eadcc9;

  /* Ameixa — seção de contato */
  --pb-plum: #3e1d2e;
  --pb-plum-700: #572c41;
  --pb-plum-ink: #f7ece4;         /* texto corrido sobre ameixa */
  --pb-plum-ink-strong: #fbf3ec;  /* título */
  --pb-plum-ink-soft: #e6d4c8;    /* apoio */
  --pb-plum-ink-muted: #c9b3a5;   /* metadados */

  /* Ouro — só como traço decorativo, nunca carrega ação */
  --pb-gold: #b07a2b;

  --pb-measure: 1180px;
  --pb-gutter: clamp(20px, 5vw, 80px);
  --pb-section-y: clamp(56px, 8vw, 120px);
  --pb-header-h: 80px;
}

/* --- 2. Base ------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

.page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  /* `clip` contém o vazamento lateral sem virar um contêiner de rolagem —
     `hidden` aqui quebraria o position:sticky do cabeçalho. */
  overflow-x: hidden;
  overflow-x: clip;
}

section[id] { scroll-margin-top: var(--pb-header-h); }

.wrap { max-width: var(--pb-measure); margin: 0 auto; }

.section {
  padding: var(--pb-section-y) var(--pb-gutter);
  border-top: 1px solid var(--color-divider);
}
.section--sand { background: var(--color-neutral-100); }

/* Grau quente das fotografias (PALETTE.md §6). Vem depois de .plate,
   do Classical, para vencer o filtro arquivístico padrão. */
.photo-warm { filter: sepia(.12) saturate(1.04) contrast(1.03); }

/* Kicker de seção: "01 Sinais" */
.kicker {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.kicker__num {
  font-feature-settings: 'tnum';
  color: var(--pb-gold);
  margin-right: 8px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

/* Corpo justificado — a coluna editorial do Classical */
.prose {
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.8;
  text-align: justify;
  hyphens: auto;
  margin: 0 0 var(--space-3);
}
.prose--tail { margin-bottom: var(--space-6); }

.btn-lg { font-size: 15px; padding: var(--space-3) var(--space-6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Cabeçalho -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--pb-gutter);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header__brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.01em;
  margin-right: auto;
  text-decoration: none;
  color: var(--color-text);
}
.site-header__brand:hover { color: var(--color-accent-700); }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav__link {
  font-size: 13.5px;
  text-decoration: none;
  color: var(--color-neutral-800);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.site-nav__link:hover { color: var(--color-accent-700); }
.site-nav__link[aria-current="true"] {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- 4. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(560px, 88svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 12%;
}
/* O texto assenta sobre um degradê que devolve o papel na base */
.hero__scrim {
  position: relative;
  width: 100%;
  padding: clamp(200px, 42vh, 420px) var(--pb-gutter) clamp(40px, 6vw, 72px);
  background: linear-gradient(
    to top,
    var(--color-bg) 42%,
    color-mix(in srgb, var(--color-bg) 88%, transparent) 55%,
    color-mix(in srgb, var(--color-bg) 30%, transparent) 78%,
    transparent 100%
  );
}
.hero .kicker { margin-bottom: var(--space-3); }
/* 16ch quebrava a frase em três linhas curtas, empilhadas como um bloco.
   Com mais medida e balance ela assenta em duas linhas de comprimento igual. */
.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(38px, 6.6vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  max-width: 22ch;
  text-wrap: balance;
}
.hero__lede {
  max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
  color: var(--color-neutral-800);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --- 5. Sinais ----------------------------------------------------------- */

.signals__title { max-width: 22ch; }

/* Um filete de 1px separa as células: o fundo do grid vaza pelo gap.
   As colunas são contadas à mão (1 / 2 / 3) porque os seis sinais precisam
   preencher a grade — com auto-fit, uma célula vazia vira um bloco de cor. */
.signals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
@media (min-width: 620px) { .signals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .signals { grid-template-columns: repeat(3, 1fr); } }
.signals__item { background: var(--color-bg); padding: var(--space-6) var(--space-4); }
.signals__term {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.2;
}
.signals__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}
.signals__close {
  margin: var(--space-6) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
  color: var(--color-neutral-800);
  max-width: 40ch;
}

/* --- 6. Sobre ------------------------------------------------------------ */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.about__figure { margin: 0; }
/* height:auto é obrigatório: os atributos width/height do <img> entram como
   height fixa e, com as duas medidas resolvidas, o aspect-ratio é ignorado. */
.about__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
}
/* Em duas colunas o retrato vira quadrado: a 4/5 fica bem mais alta que a
   coluna de texto e abre um vão ao lado dela. No celular, empilhado, não há
   coluna vizinha para acompanhar — ali a proporção de retrato continua. */
@media (min-width: 760px) {
  .about__photo { aspect-ratio: 1 / 1; }
}
.about__caption {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-2);
}
.about__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- 7. Método ----------------------------------------------------------- */

/* Cabeçalho centralizado, no mesmo registro da faixa de citação: kicker,
   título e parágrafo empilhados numa coluna única no centro da página. */
.method__head {
  max-width: 700px;
  margin: 0 auto clamp(32px, 5vw, 72px);
  text-align: center;
}
.method__head .section-title {
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.method__intro {
  margin: 0;
  color: var(--color-neutral-800);
  text-align: center;
  hyphens: manual;
}

.method { display: grid; gap: var(--space-6); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .method { grid-template-columns: 190px 1fr; gap: clamp(32px, 5vw, 88px); }
}

/* Trilho lateral: acompanha a etapa em foco enquanto a página rola */
.method__rail {
  position: sticky;
  top: calc(var(--pb-header-h) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-4);
}
.method__rail-label {
  margin: 0 0 var(--space-2);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.method__rail-count { font-feature-settings: 'tnum'; color: var(--color-accent-700); }
.method__rail-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-neutral-600);
  transition: color .4s ease;
}
.method__rail-item[data-on="1"] { color: var(--color-accent-700); }
.method__rail-num { font-feature-settings: 'tnum'; font-size: 11px; }

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

.step {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-divider);
  padding: clamp(28px, 4vw, 56px) 0;
  transition: opacity .7s ease, transform .7s ease, border-color .5s ease;
}
.step:last-child { border-bottom: 1px solid var(--color-divider); }
@media (min-width: 700px) {
  .step { grid-template-columns: 128px 1fr; gap: clamp(20px, 3vw, 48px); }
}
/* A revelação só entra quando há JS para desligá-la de volta */
.js .step { opacity: .5; transform: translateY(14px); }
.js .step[data-on="1"] { opacity: 1; transform: none; }

.step[data-active="1"] { border-top-color: var(--color-accent); }
.step__num {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.9;
  color: var(--color-accent-300);
  font-feature-settings: 'tnum';
  transition: color .4s ease;
}
.step[data-active="1"] .step__num { color: var(--color-accent); }
.step__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.step__question {
  margin: 0 0 var(--space-4);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--color-accent-700);
  font-style: italic;
}
.step__body { margin: 0 0 var(--space-4); max-width: 62ch; }
.step__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* --- 8. Faixa de citação -------------------------------------------------- */

.quote-band { position: relative; border-top: 1px solid var(--color-divider); }
.quote-band__photo {
  width: 100%;
  height: clamp(260px, 42vw, 520px);
  object-fit: cover;
  object-position: 50% 55%;
  border-left: 0;
  border-right: 0;
}
.quote-band__body {
  padding: clamp(40px, 6vw, 88px) var(--pb-gutter);
  max-width: var(--pb-measure);
  margin: 0 auto;
}
/* Citação centralizada: margin auto centra a caixa de 32ch, text-align centra
   as linhas dentro dela, e balance iguala o comprimento das duas linhas. */
.quote-band__text {
  margin: 0 auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 32ch;
  text-align: center;
  text-wrap: balance;
}
.quote-band__cite {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  text-align: center;
}

/* --- 9. Serviços --------------------------------------------------------- */

/* Sem trava de medida: cabe em uma linha nas telas grandes e quebra sozinho
   nas menores, onde o clamp do tamanho já reduz a fonte. */
.services__title { margin-bottom: var(--space-8); text-wrap: balance; }
/* São três cartões, então auto-fit deixaria 2 + 1 órfão na faixa intermediária,
   com um vão do lado do terceiro. Na faixa de duas colunas ele ocupa a linha
   inteira; a partir de 950px os três dividem uma linha só. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 620px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .services__grid .service:last-child { grid-column: 1 / -1; }
}
@media (min-width: 950px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .services__grid .service:last-child { grid-column: auto; }
}
.service {
  padding: var(--space-6);
  gap: var(--space-3);
  background: var(--color-bg);
}
.service .card-kicker { margin: 0; }
.service__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  margin: 0;
}
.service__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-800);
  flex: 1;
}

/* Faixa promocional: moldura em ouro — traço, nunca preenchimento */
.offer {
  margin-top: clamp(28px, 4vw, 56px);
  border: 1px solid var(--pb-gold);
  background: var(--color-bg);
  padding: clamp(24px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.offer__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.offer__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.offer__body {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.8;
  color: var(--color-neutral-800);
  max-width: 50ch;
  text-wrap: pretty;
}
.offer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.offer__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-neutral-600);
}

.details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) clamp(24px, 3vw, 56px);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
@media (min-width: 640px)  { .details { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .details { grid-template-columns: repeat(4, 1fr); } }
.details__term { margin: 0 0 4px; font-family: var(--font-heading); font-size: 17px; }
.details__desc { margin: 0; font-size: 14px; line-height: 1.65; color: var(--color-neutral-700); }

/* --- 10. Depoimentos ----------------------------------------------------- */

/* Cabeçalho centralizado, como método e dúvidas. Antes a nota ficava numa
   segunda coluna alinhada pela linha do kicker, sobrando solta no alto à
   direita enquanto o título seguia por mais duas linhas abaixo dela. */
.tst__head {
  max-width: 700px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.tst__head .section-title {
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.tst__note {
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-600);
  max-width: 42ch;
  text-wrap: balance;
}
.tst__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.tst {
  margin: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-top: 2px solid var(--color-accent);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tst__mark {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 0.6;
  color: var(--color-accent-300);
}
.tst__quote {
  margin: 0;
  flex: 1;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-neutral-900);
  text-wrap: pretty;
}
.tst__by {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* --- 11. Dúvidas --------------------------------------------------------- */

/* Uma coluna centrada: cabeçalho no topo, perguntas embaixo. Em duas colunas
   o bloco de título era muito mais curto que a lista e sobrava um vazio grande
   no canto inferior esquerdo. */
.faq {
  max-width: 620px;
  margin-inline: auto;
}
.faq__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.faq__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.faq__note {
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-neutral-700);
  max-width: 34ch;
}
.faq__list { border-bottom: 1px solid var(--color-divider); }
.faq__item { border-top: 1px solid var(--color-divider); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--color-text);
  transition: color .25s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-accent-700); }
.faq__sign {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  color: var(--color-accent);
  flex: none;
}
.faq__sign::after { content: "+"; }
.faq__item[open] .faq__sign::after { content: "−"; }
.faq__a {
  margin: 0;
  padding: 0 0 var(--space-4);
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-neutral-800);
}

/* --- 12. Contato --------------------------------------------------------- */

.contact {
  border-top: 1px solid var(--color-divider);
  background: var(--pb-plum);
  color: var(--pb-plum-ink);
}
.contact__grid {
  max-width: var(--pb-measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}
.contact__body { padding: clamp(48px, 7vw, 110px) clamp(20px, 4vw, 64px); }
.contact .kicker { margin-bottom: var(--space-3); color: var(--color-accent-300); }
.contact__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: var(--pb-plum-ink-strong);
}
.contact__lede {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  margin: 0 0 var(--space-6);
  max-width: 44ch;
  color: var(--pb-plum-ink-soft);
}
/* Botão sobre o ameixa: terracota clara, o único passo que ganha contraste no escuro */
.btn-on-plum { color: var(--color-accent-300); border-color: var(--color-accent-300); }
.btn-on-plum:hover  { background: color-mix(in srgb, var(--color-accent-300) 16%, transparent); }
.btn-on-plum:active { background: color-mix(in srgb, var(--color-accent-300) 26%, transparent); }

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--pb-plum-700);
}
.contact__links a {
  color: var(--pb-plum-ink);
  text-decoration: none;
  font-size: 14.5px;
}
.contact__links a:hover { color: var(--pb-plum-ink); text-decoration: underline; }
.contact__phone { font-feature-settings: 'tnum'; }
.contact__meta {
  margin: var(--space-3) 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pb-plum-ink-muted);
}
.contact__photo {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 40vw, 560px);
  object-fit: cover;
  object-position: 50% 25%;
}

/* --- 13. Rodapé ---------------------------------------------------------- */

.site-footer {
  padding: var(--space-6) var(--pb-gutter) var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.site-footer__inner {
  max-width: var(--pb-measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
}
.site-footer__name { margin: 0; font-family: var(--font-heading); font-size: 16px; }
.site-footer__note { margin: 0; font-size: 12.5px; color: var(--color-neutral-600); }

/* --- 14. Barra fixa do celular ------------------------------------------- */

.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--color-bg) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-accent);
}
.mobile-cta__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.2;
  flex: 1;
}
.mobile-cta .btn { flex: none; min-height: 44px; }

/* --- 15. Breakpoints globais --------------------------------------------- */

@media (min-width: 900px) {
  [data-only-mobile] { display: none !important; }
}
@media (max-width: 899px) {
  [data-hide-mobile] { display: none !important; }
  /* espaço para a barra fixa não cobrir o rodapé */
  .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .step { opacity: 1; transform: none; }
  .step { transition: border-color .3s ease; }
}