/* =============================================================================
   Dra. Ana Júlia Resende — folha de estilo única
   Identidade: off-white de base, texto petróleo, um acento quente por tela.
   Todas as cores de texto auditadas em WCAG 2.1 AA (ver bloco de tokens).
   ============================================================================= */

/* ---------- 1. Fontes -------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Fallbacks métricos: evitam deslocamento de layout na troca de fonte. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 101%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 105%; ascent-override: 98%; descent-override: 22%; line-gap-override: 0%;
}

/* ---------- 2. Tokens --------------------------------------------------- */

:root {
  /* Primitivos oficiais da marca — não alterar */
  --ajr-petroleo:    #22424C;
  --ajr-offwhite:    #F6F5F2;
  --ajr-white:       #FFFFFF;
  --ajr-areia:       #DED7D2;
  --ajr-nude-claro:  #E6D7CA;
  --ajr-dourado:     #BFA378;
  --ajr-nude:        #C0A48F;
  --ajr-taupe:       #BFB3A8;
  --ajr-linha:       #E4DDD5;

  /* Derivados de acessibilidade — mesmo pigmento, outro valor tonal.
     Existem porque o dourado e o taupe oficiais reprovam em contraste de texto. */
  --ajr-petroleo-900: #1A333A;   /* hover  */
  --ajr-petroleo-950: #16292F;   /* active */
  --ajr-ink-2:        #4F6169;   /* texto secundário — 5.93:1 sobre off-white */
  --ajr-dourado-ink:  #6E5A38;   /* dourado legível  — 6.05:1 sobre off-white */
  --ajr-dourado-luz:  #D2B384;   /* dourado sobre petróleo — 5.39:1 */
  --ajr-nude-luz:     #D3B49D;   /* nude sobre petróleo — 5.53:1 */
  --ajr-linha-forte:  #8D847C;   /* borda de campo — 3.37:1 sobre off-white */
  --ajr-erro:         #8E3B2F;   /* 6.84:1 sobre off-white */
  --ajr-desabilitado: #F1EEEA;

  /* Semânticos — use SEMPRE estes nos componentes */
  --text-primary:      var(--ajr-petroleo);
  --text-secondary:    var(--ajr-ink-2);
  --text-accent:       var(--ajr-dourado-ink);
  --text-on-dark:      var(--ajr-offwhite);
  --text-on-dark-2:    var(--ajr-areia);
  --text-on-dark-accent: var(--ajr-dourado-luz);

  --surface:          var(--ajr-offwhite);
  --surface-raised:   var(--ajr-white);
  --surface-alt:      var(--ajr-areia);
  --surface-soft:     var(--ajr-nude-claro);
  --surface-inverse:  var(--ajr-petroleo);

  --line:         var(--ajr-linha);        /* fio decorativo, nunca informativo */
  --line-strong:  var(--ajr-linha-forte);  /* fio com função */
  --line-accent:  var(--ajr-dourado);
  --line-on-dark: rgba(246, 245, 242, .14);

  --focus-ring:         var(--ajr-petroleo);
  --focus-ring-on-dark: var(--ajr-nude-claro);

  /* Tipografia */
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --font-body:    'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.5rem,  1.60rem + 2.50vw, 3.5rem);
  --fs-h1:      clamp(2.5rem,  1.75rem + 3.33vw, 4.75rem);
  --fs-h2:      clamp(1.875rem, 1.417rem + 2.04vw, 3.25rem);
  --fs-h3:      clamp(1.5rem,  1.25rem + 1.11vw, 2.25rem);
  --fs-h4:      clamp(1.25rem, 1.125rem + 0.56vw, 1.625rem);
  --fs-h5:      clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --fs-lead:    clamp(1.125rem, 1.0625rem + 0.28vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --fs-caption: clamp(0.8125rem, 0.792rem + 0.093vw, 0.875rem);
  --fs-eyebrow: clamp(0.719rem, 0.6875rem + 0.139vw, 0.8125rem);

  --lh-h1: 1.06; --lh-h2: 1.12; --lh-h3: 1.18; --lh-h4: 1.28;
  --lh-body: 1.65; --lh-lead: 1.55;

  --ls-h1: -.015em; --ls-h2: -.01em; --ls-h3: -.005em;
  --ls-ui: .02em; --ls-btn: .04em; --ls-eyebrow: .18em;

  /* Espaço, forma, elevação */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px; --sp-10: 96px;
  --sp-11: 128px; --sp-12: 160px;

  --radius-sm: 3px; --radius: 4px; --radius-lg: 6px;

  --shadow-1: 0 1px 2px rgba(34, 66, 76, .04);
  --shadow-2: 0 10px 40px rgba(34, 66, 76, .07);
  --shadow-3: 0 18px 60px rgba(34, 66, 76, .10);

  --w-prose: 40rem;
  --w-narrow: 50rem;
  --w-container: 1200px;
  --w-wide: 1360px;
  --gutter: 24px;
  --section-y: 64px;

  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms;
  --dur-5: 620ms; --dur-6: 1200ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);

  --header-h: 72px;
}

@media (min-width: 768px)  { :root { --gutter: 40px; --section-y: 96px;  --header-h: 88px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; --section-y: 112px; --header-h: 96px; } }
@media (min-width: 1440px) { :root { --section-y: 128px; } }

/* ---------- 3. Reset e base -------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: 1.35; }

p { margin: 0 0 var(--sp-5); text-wrap: pretty; hyphens: none; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible { outline-color: var(--focus-ring-on-dark); }

::selection { background: var(--ajr-nude-claro); color: var(--ajr-petroleo); }

/* ---------- 4. Utilitários de layout ------------------------------------ */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--w-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--dense { padding-block: calc(var(--section-y) * .875); }
.section--alt  { background: var(--surface-alt); }
.section--soft { background: var(--surface-soft); }
.section--inverse { background: var(--surface-inverse); color: var(--text-on-dark); }
.section--hairline { border-top: 1px solid var(--line); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--ajr-petroleo); color: var(--ajr-offwhite);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- 5. Tipografia de marca -------------------------------------- */

.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  line-height: 1.4;
}
.eyebrow::before {
  content: ''; flex: none; width: 24px; height: 1px;
  background: var(--line-accent);
}
.eyebrow--plain::before { display: none; }
.on-dark .eyebrow { color: var(--text-on-dark-accent); }
.on-dark .eyebrow::before { background: var(--ajr-dourado-luz); }

.section-head { margin-bottom: var(--sp-8); max-width: 46rem; }
.section-head h2 { max-width: 20ch; }
.section-head .lead { margin-top: var(--sp-5); max-width: 54ch; }

.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--text-secondary);
}
.on-dark .lead { color: var(--text-on-dark-2); }

.prose { max-width: 40rem; }
.prose p { color: var(--text-secondary); }
.caption { font-size: var(--fs-caption); color: var(--text-secondary); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--gold { width: 40px; height: 1px; background: var(--line-accent); border: 0; }

/* ---------- 6. Botões e links ------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-6);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500;
  letter-spacing: var(--ls-btn); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.btn--primary { background: var(--ajr-petroleo); color: var(--ajr-offwhite); }
.btn--primary:hover { background: var(--ajr-petroleo-900); transform: translateY(-1px); }
.btn--primary:active { background: var(--ajr-petroleo-950); transform: translateY(0); }

.btn--secondary {
  background: transparent; color: var(--ajr-petroleo);
  border-color: var(--ajr-petroleo);
}
.btn--secondary:hover { background: rgba(34, 66, 76, .06); }
.btn--secondary:active { background: rgba(34, 66, 76, .10); }

.btn--small { min-height: 42px; padding: 0 var(--sp-5); font-size: .875rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--ajr-areia); color: var(--ajr-ink-2);
  border-color: transparent; cursor: not-allowed; transform: none;
}

.on-dark .btn--primary { background: var(--ajr-offwhite); color: var(--ajr-petroleo); }
.on-dark .btn--primary:hover { background: #fff; }
.on-dark .btn--secondary { color: var(--ajr-offwhite); border-color: var(--ajr-nude-claro); }
.on-dark .btn--secondary:hover { background: rgba(246, 245, 242, .08); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--line-accent);
  padding-bottom: 4px;
  transition: border-color var(--dur-2) var(--ease-out);
}
.link-arrow svg { flex: none; transition: transform var(--dur-2) var(--ease-soft); }
.link-arrow:hover { border-bottom-color: var(--ajr-petroleo); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--ajr-offwhite); border-bottom-color: var(--ajr-dourado-luz); }
.on-dark .link-arrow:hover { border-bottom-color: var(--ajr-offwhite); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-6); }
@media (max-width: 519px) { .actions .btn { width: 100%; } }

/* ---------- 7. Cabeçalho ------------------------------------------------ */

.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur-3) var(--ease-in-out),
              background-color var(--dur-3) var(--ease-in-out),
              border-color var(--dur-3) var(--ease-in-out);
}
.header.is-stuck {
  height: 64px;
  background: rgba(246, 245, 242, .94);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}
@media (min-width: 1024px) { .header.is-stuck { height: 68px; } }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); width: 100%;
}
.header__brand { display: block; flex: none; line-height: 0; padding: 4px; }
.header__logo { width: 208px; transition: width var(--dur-3) var(--ease-in-out); }
.header.is-stuck .header__logo { width: 176px; }

/* Abaixo de 520px o <picture> troca o arquivo para o monograma — o CSS só ajusta
   o tamanho. Assim o celular não baixa a logo completa, que ficaria oculta. */
@media (max-width: 519px) {
  .header__logo,
  .header.is-stuck .header__logo { width: 40px; }
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--sp-7); }
  .nav a {
    position: relative; text-decoration: none; font-size: .9375rem; font-weight: 500;
    letter-spacing: var(--ls-ui); padding: 6px 0; color: var(--text-primary);
  }
  .nav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--ajr-dourado); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-3) var(--ease-out);
  }
  .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
  .nav a.is-active { font-weight: 600; }
}

.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; color: var(--text-primary);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ajr-offwhite);
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out),
              visibility 0s linear var(--dur-4);
}
.nav-overlay.is-open {
  opacity: 1; transform: translateY(0); visibility: visible;
  transition-delay: 0s;
}
.nav-overlay__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.nav-overlay__list { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.nav-overlay__list a {
  display: block; padding: var(--sp-5) 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
  text-decoration: none;
}
.nav-overlay__foot { margin-top: auto; padding-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.nav-overlay__foot a.plain { text-decoration: none; font-size: .9375rem; color: var(--text-secondary); }

/* ---------- 8. Hero ----------------------------------------------------- */

.hero { position: relative; padding-block: var(--sp-8) var(--sp-9); overflow: hidden; }
@media (min-width: 1024px) {
  .hero { padding-block: var(--sp-9) var(--sp-10); }
}

.hero__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); align-items: center; }
}

.hero__status {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 var(--sp-6); max-width: 40ch;
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.hero__status::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ajr-dourado); margin-top: .55em;
}
.hero h1 { max-width: 15ch; margin-bottom: var(--sp-5); }
.hero__lead { max-width: 44ch; margin-bottom: var(--sp-7); }
.hero__actions { margin-bottom: var(--sp-7); }
.hero__credential {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-caption); color: var(--text-secondary);
  letter-spacing: var(--ls-ui);
}
.hero__credential::before { content: ''; width: 24px; height: 1px; background: var(--line-strong); flex: none; }

/* Figura: sangra até a borda direita da janela no desktop, full-bleed no mobile.
   --bleed é a distância exata entre a borda do contêiner e a borda da janela. */
.hero__figure { position: relative; }
.hero__media {
  position: relative; z-index: 1;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ajr-areia); border-radius: var(--radius);
  display: grid; place-items: center;
}
.hero__media img.photo { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
@media (min-width: 768px) and (max-width: 1023px) { .hero__media { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
  .hero__figure {
    --bleed: calc((100vw - min(100vw, var(--w-container))) / 2 + var(--gutter));
    margin-right: calc(-1 * var(--bleed));
  }
  .hero__media {
    aspect-ratio: 4 / 5; width: 100%; max-width: 560px; max-height: min(72vh, 660px);
    margin-left: auto; border-radius: var(--radius) 0 0 var(--radius);
  }
}
/* Faixa nude atrás da foto — só entra quando há folga real entre as colunas. */
@media (min-width: 1360px) {
  .hero__figure::before {
    content: ''; position: absolute; z-index: 0;
    right: 512px; bottom: -32px; width: 168px; height: 52%;
    background: var(--ajr-nude-claro);
  }
}

/* Placeholder elegante enquanto a fotografia não existe */
.hero__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.hero__placeholder img { width: 38%; opacity: .14; }
.hero__placeholder::after {
  content: ''; position: absolute; inset: 32px;
  background:
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) left  top   / 1px 28% no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) left  top   / 28% 1px no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) right top   / 1px 28% no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) right top   / 28% 1px no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) left  bottom/ 1px 28% no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) left  bottom/ 28% 1px no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) right bottom/ 1px 28% no-repeat,
    linear-gradient(var(--ajr-dourado), var(--ajr-dourado)) right bottom/ 28% 1px no-repeat;
}

/* ---------- 9. Faixa de ancoragem --------------------------------------- */

.proof { border-block: 1px solid var(--line); }
.proof__grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-8); }
@media (min-width: 768px) {
  .proof__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .proof__item + .proof__item { border-left: 1px solid var(--line); padding-left: var(--sp-7); }
  .proof__item { padding-right: var(--sp-7); }
}
.proof__item + .proof__item { padding-top: var(--sp-6); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .proof__item + .proof__item { padding-top: 0; border-top: 0; } }
.proof__title { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 600; margin-bottom: var(--sp-2); }
.proof__text { font-size: var(--fs-caption); color: var(--text-secondary); margin: 0; }

/* ---------- 10. Para quem é --------------------------------------------- */

.quotes { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
.quote {
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-5);
  border-left: 1px solid var(--line-accent);
  font-size: var(--fs-lead); line-height: 1.5;
  color: var(--text-primary); max-width: 44ch;
}
.quotes-note {
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--ajr-taupe);
  max-width: 60ch; color: var(--text-secondary);
}

/* ---------- 11. Pilares (como é o cuidado) ------------------------------ */

.pillars { display: grid; gap: var(--sp-7); }
@media (min-width: 768px)  { .pillars { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-7); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); } }
.pillar__icon { color: var(--ajr-dourado); margin-bottom: var(--sp-5); }
.pillar h3 { font-size: var(--fs-h5); margin-bottom: var(--sp-3); }
.pillar p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; max-width: 34ch; }

/* ---------- 12. Etapas da consulta -------------------------------------- */

.steps { position: relative; display: grid; gap: var(--sp-7); margin-top: var(--sp-10); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); margin-top: var(--sp-11); }
}
.steps::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px;
  background: var(--line);
}
@media (min-width: 1024px) {
  .steps::before { left: 0; right: 0; top: 28px; bottom: auto; width: auto; height: 1px; }
}
.step { position: relative; padding-left: var(--sp-8); }
@media (min-width: 1024px) { .step { padding-left: 0; } }
.step__num {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display);
  line-height: 1; color: var(--text-accent); letter-spacing: -.02em;
  margin-bottom: var(--sp-4);
}
@media (max-width: 1023px) {
  .step__num {
    position: absolute; left: 0; top: -4px; width: 24px;
    font-size: 1.375rem; text-align: center;
    background: var(--surface); padding-block: 4px;
  }
}
@media (min-width: 1024px) {
  .step__num { background: var(--surface); padding-right: 16px; }
}
.step h3 { font-size: var(--fs-h5); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; max-width: 34ch; }

/* ---------- 13. Cards de frentes de cuidado ----------------------------- */

.cards { display: grid; gap: var(--sp-5); }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.card {
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              transform 260ms var(--ease-out);
}
@media (min-width: 768px) { .card { padding: 36px 32px; } }
.card:hover { border-color: #D8CFC4; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__icon { color: var(--ajr-dourado); margin-bottom: var(--sp-5); }
.card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.card__kicker {
  font-size: var(--fs-caption); color: var(--text-accent);
  margin: 0 0 var(--sp-4); max-width: 34ch;
}
.card__panel p { color: var(--text-secondary); margin: 0; max-width: 42ch; }

/* Gatilho do acordeão: só existe visualmente no celular. No desktop o JS remove
   o botão e o título volta a ser texto puro. Sem JS, tudo nasce aberto. */
.card__trigger {
  display: flex; width: 100%; gap: var(--sp-4);
  align-items: flex-start; justify-content: space-between;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit;
  font: inherit; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h3);
}
.card__chevron {
  flex: none; width: 20px; height: 20px; margin-top: 6px; position: relative;
}
.card__chevron::before, .card__chevron::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%);
}
.card__chevron::before { width: 14px; height: 1px; }
.card__chevron::after {
  width: 1px; height: 14px;
  transition: transform var(--dur-3) var(--ease-in-out), opacity var(--dur-3) var(--ease-in-out);
}
.card__trigger[aria-expanded='true'] .card__chevron::after {
  transform: translate(-50%, -50%) rotate(90deg); opacity: 0;
}

@media (max-width: 767px) {
  /* O card deixa de ser flex: dentro de um item flex, o painel em grid não
     resolve `1fr` e colapsa para 0. Em bloco, o acordeão mede certo. */
  .card { display: block; }

  /* colapsado por padrão; o JS abre o primeiro */
  .card__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-4) var(--ease-in-out);
  }
  .card__panel[data-open='true'] { grid-template-rows: 1fr; }
  .card__panel > div { overflow: hidden; }
  .card__panel p {
    padding-top: var(--sp-4);
    opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 60ms;
  }
  .card__panel[data-open='true'] p { opacity: 1; }

  /* fechado, o card não precisa de tanto respiro embaixo */
  .card { padding-bottom: var(--sp-5); }
  .card__icon { margin-bottom: var(--sp-4); }
  .card__kicker { margin-bottom: 0; }
  .card h3 { margin-bottom: var(--sp-3); }
  .card__trigger { padding-block: 8px; min-height: 44px; align-items: center; }
  .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
}

/* ---------- 14. Faixa escura (postura clínica) -------------------------- */

.stance { position: relative; overflow: hidden; }
.stance__mono {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 420px; opacity: .08; pointer-events: none;
}
@media (max-width: 1023px) { .stance__mono { display: none; } }
.stance__grid { display: grid; gap: var(--sp-8); position: relative; }
@media (min-width: 1024px) { .stance__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.stance__col h3 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ajr-dourado-luz); margin-bottom: var(--sp-5);
}
.stance__list li {
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-on-dark);
  color: var(--text-on-dark);
}
.stance__list li:first-child { border-top: 1px solid var(--line-on-dark); }
.stance__list strong { font-weight: 500; }
.stance__list span {
  display: block; margin-top: 6px; font-size: var(--fs-caption);
  color: var(--ajr-areia); max-width: 46ch;
}
.stance__close {
  margin-top: var(--sp-9); padding-top: var(--sp-7);
  border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.stance__close p {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  color: var(--text-on-dark); max-width: 22ch; margin: 0;
}

/* ---------- 15. Sobre --------------------------------------------------- */

.about { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-10); align-items: start; } }
.about__media {
  position: relative; aspect-ratio: 4 / 5; background: var(--ajr-areia);
  border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
}
.about__media img.photo { width: 100%; height: 100%; object-fit: cover; }
.about__media .mono { width: 42%; opacity: .16; }
.about__facts { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.about__facts div {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-caption);
}
.about__facts dt { flex: none; width: 8.5rem; color: var(--text-secondary); letter-spacing: var(--ls-ui); }
.about__facts dd { margin: 0; font-weight: 500; }

/* ---------- 16. Estrutura (equipe + recursos) --------------------------- */

.split { display: grid; gap: var(--sp-9); }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.tick { display: grid; gap: var(--sp-5); }
.tick li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-4); align-items: start; }
.tick svg { color: var(--ajr-dourado); margin-top: 2px; }
.tick strong { display: block; font-weight: 500; margin-bottom: 2px; }
.tick span { color: var(--text-secondary); font-size: var(--fs-caption); }

/* ---------- 17. FAQ ----------------------------------------------------- */

.faq { max-width: var(--w-narrow); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { margin: 0; font-family: var(--font-body); font-size: 1rem; }
.faq__trigger {
  display: flex; width: 100%; gap: var(--sp-6); align-items: flex-start;
  justify-content: space-between; padding: var(--sp-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: var(--fs-h5); font-weight: 500;
  line-height: 1.4; color: var(--text-primary);
  transition: color var(--dur-2) var(--ease-out);
}
@media (min-width: 768px) { .faq__trigger { padding: 28px 0; } }
.faq__trigger:hover { color: var(--ajr-petroleo-900); }
.faq__trigger[aria-expanded='true'] { font-weight: 600; }
.faq__icon { flex: none; position: relative; width: 20px; height: 20px; margin-top: 4px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 16px; height: 1px; }
.faq__icon::after {
  width: 1px; height: 16px;
  transition: transform var(--dur-3) var(--ease-in-out), opacity var(--dur-3) var(--ease-in-out);
}
.faq__trigger[aria-expanded='true'] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__trigger:hover .faq__icon { color: var(--text-accent); }
.faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-4) var(--ease-in-out);
}
.faq__panel[data-open='true'] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding: 0 var(--sp-8) var(--sp-6) 0; margin: 0;
  color: var(--text-secondary); max-width: 66ch;
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 60ms;
}
.faq__panel[data-open='true'] p { opacity: 1; }

/* ---------- 18. Consultório --------------------------------------------- */

.clinic { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .clinic { grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; } }
.timeline { display: grid; gap: 0; margin-top: var(--sp-7); }
.timeline li {
  position: relative; padding: var(--sp-4) 0 var(--sp-4) var(--sp-7);
  border-bottom: 1px solid var(--line); color: var(--text-secondary);
}
.timeline li:first-child { border-top: 1px solid var(--line); }
.timeline li::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent;
}
.timeline li[data-state='done']::before { background: var(--line-strong); border-color: var(--line-strong); }
.timeline li[data-state='now']::before { background: var(--ajr-dourado); border-color: var(--ajr-dourado-ink); box-shadow: 0 0 0 4px rgba(191, 163, 120, .22); }
.timeline li[data-state='now'] { color: var(--text-primary); font-weight: 500; }

.address { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
.address li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-4); align-items: start; }
.address svg { color: var(--ajr-dourado); margin-top: 3px; }
.address a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.address a:hover { border-bottom-color: var(--ajr-petroleo); }

.clinic__media {
  aspect-ratio: 4 / 3; background: var(--ajr-areia); border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.clinic__media img.mono { width: 32%; opacity: .16; }
.clinic__media .tag {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5);
  background: var(--ajr-offwhite); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-caption); color: var(--text-secondary);
}

/* ---------- 19. Formulário ---------------------------------------------- */

.contact { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-10); align-items: start; } }

.form-card {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 768px) { .form-card { padding: var(--sp-8); } }

.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); align-content: start; }
.field label { font-size: .8125rem; font-weight: 500; letter-spacing: var(--ls-ui); color: var(--text-secondary); }
.field .hint { font-size: var(--fs-caption); color: var(--text-secondary); margin: 0; }
.field .opt { color: var(--text-secondary); font-weight: 400; }

.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  background: var(--ajr-white); color: var(--text-primary);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; /* 16px evita zoom automático no iOS */
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  appearance: none;
}
.textarea { min-height: 140px; padding: 14px var(--sp-4); line-height: 1.6; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #756C62; }
.input:hover, .select:hover, .textarea:hover { border-color: #6F675E; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ajr-petroleo);
  box-shadow: 0 0 0 3px rgba(34, 66, 76, .12);
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322424C' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea { border-color: var(--ajr-erro); }

.error {
  display: none; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: var(--ajr-erro);
}
.field[data-invalid='true'] .error { display: flex; }
.error svg { flex: none; }

.consent { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-4); align-items: start; }
.consent input[type='checkbox'] {
  appearance: none; width: 18px; height: 18px; margin: 3px 0 0;
  border: 1px solid var(--line-strong); border-radius: 2px; background: var(--ajr-white);
  cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.consent input[type='checkbox']::after {
  content: ''; width: 10px; height: 6px; border: 1.5px solid var(--ajr-offwhite);
  border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0; transition: opacity var(--dur-1) var(--ease-out);
}
.consent input[type='checkbox']:checked { background: var(--ajr-petroleo); border-color: var(--ajr-petroleo); }
.consent input[type='checkbox']:checked::after { opacity: 1; }
.consent label { font-size: var(--fs-caption); color: var(--text-secondary); max-width: 62ch; }
.consent a { color: var(--text-primary); }

.form-alert {
  display: none; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--ajr-erro); border-radius: var(--radius-sm);
  background: #FBF3F1; color: var(--ajr-erro); font-size: var(--fs-caption);
}
.form-alert[data-visible='true'] { display: flex; }
.form-alert ul { margin-top: 6px; display: grid; gap: 2px; }
.form-alert a { color: inherit; }

.form-success { display: none; }
.form-success[data-visible='true'] { display: block; min-height: 320px; }
.form-success .rule--gold { margin-bottom: var(--sp-5); }
.form-success h3 { margin-bottom: var(--sp-4); }
.form-success dl { margin: var(--sp-6) 0 var(--sp-7); border-top: 1px solid var(--line); }
.form-success dl div { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-caption); }
.form-success dt { width: 8rem; flex: none; color: var(--text-secondary); }
.form-success dd { margin: 0; }

.submitting .btn--primary { position: relative; overflow: hidden; }
.submitting .btn--primary::after {
  content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 40%;
  background: var(--ajr-dourado); animation: sweep 900ms linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* ---------- 20. Rodapé -------------------------------------------------- */

.footer { background: var(--surface-inverse); color: var(--text-on-dark-2); }
.footer__grid { display: grid; gap: var(--sp-8); padding-block: var(--sp-9) var(--sp-7); }
@media (min-width: 768px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: var(--sp-7); padding-block: var(--sp-10) var(--sp-8); } }
.footer__logo { width: 200px; margin-bottom: var(--sp-5); }
.footer__sign { font-size: .9375rem; max-width: 34ch; margin: 0; color: var(--ajr-areia); }
.footer h2 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--ajr-dourado-luz); margin-bottom: var(--sp-4);
}
.footer ul { display: grid; gap: 14px; }
.footer li { font-size: .9375rem; }
.footer a { text-decoration: none; color: var(--ajr-areia); transition: color var(--dur-2) var(--ease-out); }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ajr-dourado-luz); }
.footer__contact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.footer__contact svg { color: var(--ajr-dourado-luz); margin-top: 3px; }
.footer__legal {
  border-top: 1px solid var(--line-on-dark); padding-block: var(--sp-7);
  display: grid; gap: var(--sp-5); font-size: .8125rem; color: var(--ajr-taupe);
}
@media (min-width: 1024px) { .footer__legal { grid-template-columns: 1fr auto; align-items: start; } }
.footer__legal p { margin: 0; max-width: 82ch; }
.footer__legal a { color: var(--ajr-taupe); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 21. Barra fixa mobile --------------------------------------- */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: var(--sp-3);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--ajr-offwhite); border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease-out);
}
.mobilebar.is-visible { transform: translateY(0); }
.mobilebar .btn { flex: 1 1 68%; min-height: 48px; padding-inline: var(--sp-4); }
.mobilebar .btn--secondary { flex: 1 1 32%; }
@media (min-width: 1024px) { .mobilebar { display: none; } }

/* ---------- 22. Páginas de texto ---------------------------------------- */

.doc { padding-block: var(--sp-9) var(--sp-10); }
.doc h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-5); }
.doc h2 { font-size: var(--fs-h4); margin: var(--sp-8) 0 var(--sp-4); }
.doc p, .doc li { color: var(--text-secondary); max-width: 68ch; }
.doc ul { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.doc li { position: relative; padding-left: var(--sp-5); }
.doc li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--line-accent); }
.doc a { color: var(--text-primary); }
.doc .updated { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ---------- 22b. Alvos de toque -------------------------------------------
   Em tela de toque, todo controle chega a 44px de área tocável. Onde ampliar a
   caixa estragaria o ritmo visual, a área cresce por pseudo-elemento invisível. */

@media (max-width: 1023px) {
  .footer ul { gap: 4px; }
  .footer li > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer__contact li,
  .address li { align-items: center; }
  .footer__contact li > a,
  .address a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .nav-overlay__foot a.plain {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  .link-arrow { position: relative; }
  .link-arrow::after {
    content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
  }

  /* A caixa do checkbox continua com 18px, mas passa a ter 34px de toque. */
  .consent input[type='checkbox'] { position: relative; }
  .consent input[type='checkbox']::before {
    content: ''; position: absolute; inset: -8px;
  }
}

/* ---------- 23. Movimento ------------------------------------------------ */

[data-reveal] { opacity: 1; }
.js [data-reveal].is-armed { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js [data-reveal].is-armed { opacity: 1 !important; transform: none !important; }
  .submitting .btn--primary::after { display: none; }
}

/* ---------- 24. Impressão ------------------------------------------------ */

@media print {
  .header, .mobilebar, .nav-overlay, .btn, .link-arrow { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
  .section--inverse { background: #fff !important; color: #000 !important; }
}