/* Dra. Ivana Bordignon — landing (prévia). Medidas da Hero em --u = 1px da referência 1536×1024. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/Figtree-latin.woff2') format('woff2');
}

:root {
  --tinta: #110b07;
  --tinta-suave: #2a211b;
  --bronze-escuro: #6b3a10;
  --bronze: #8a5222;
  --bronze-claro: #a9682e;
  --bronze-nota: #8b5e37;
  --botao: #6f421d;
  --botao-claro: #7a461d;
  --marfim: #f9f3e9;
  --linha: #b08a63;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Figtree', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--marfim); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--marfim); color: var(--tinta); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--bronze-escuro); outline-offset: 3px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; text-decoration: none; color: #fff; font-family: var(--sans); font-weight: 500; text-transform: uppercase; white-space: nowrap; border-radius: 999px; background: linear-gradient(90deg, var(--botao-claro), var(--botao)); transition: filter .2s ease; }
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(.95); }
.btn__ico, .btn__seta { flex: none; fill: currentColor; }

/* ---------- Hero ---------- */
.hero { position: relative; container-type: inline-size; background: #c9b6a3; }
.hero__stage { position: relative; }
.hero__foto img { width: 100%; height: auto; }

.marca { display: flex; align-items: center; text-decoration: none; color: var(--tinta); }
.marca__mono { position: relative; flex: none; border-radius: 50%; border: 1px solid var(--bronze-escuro); color: var(--bronze-escuro); font-family: var(--serif); font-variation-settings: 'opsz' 48, 'SOFT' 50, 'WONK' 0; font-weight: 340; line-height: 1; }
.marca__i, .marca__b { position: absolute; }
.marca__texto { display: flex; flex-direction: column; align-items: center; }
.marca__nome { font-family: var(--serif); font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 0; font-weight: 340; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.marca__prof { font-family: var(--sans); font-weight: 400; text-transform: uppercase; color: #4e3d31; line-height: 1; white-space: nowrap; }

.nav { display: none; }
.nav a { position: relative; display: block; text-decoration: none; text-transform: uppercase; font-family: var(--sans); font-weight: 500; color: #16100b; white-space: nowrap; }
.nav a:hover { color: var(--bronze-escuro); }
.nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; background: var(--bronze-escuro); }

.btn--topo { display: none; }

.menu-toggle { position: relative; flex: none; padding: 0; border: 1px solid var(--bronze-escuro); border-radius: 50%; background: transparent; color: var(--bronze-escuro); cursor: pointer; }
.menu-toggle__linhas, .menu-toggle__linhas::before, .menu-toggle__linhas::after { position: absolute; left: 50%; top: 50%; display: block; height: 2px; background: currentColor; border-radius: 1px; content: ''; }
.menu-toggle__linhas { transform: translate(-50%, -50%); }
.menu-toggle__linhas::before { transform: translate(-50%, calc(-50% - var(--gap-linhas))); }
.menu-toggle__linhas::after { transform: translate(-50%, calc(-50% + var(--gap-linhas))); }
.menu-toggle[aria-expanded='true'] { background: rgba(249, 243, 233, .9); }

.menu-painel { position: absolute; z-index: 20; min-width: 248px; padding: 18px 20px 20px; background: var(--marfim); border: 1px solid #d9c3a6; border-radius: 18px; box-shadow: 0 12px 32px rgba(70, 40, 15, .12); }
.menu-painel[hidden] { display: none; }
.menu-painel ul a { display: block; padding: 11px 2px; text-decoration: none; text-transform: uppercase; font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--tinta); border-bottom: 1px solid #eadbc6; }
.menu-painel ul a:hover { color: var(--bronze-escuro); }
.btn--painel { margin-top: 16px; gap: 10px; padding: 12px 18px; font-size: 14px; letter-spacing: .05em; }
.btn--painel .btn__ico { width: 20px; height: 20px; }

.hero__chamada { display: flex; align-items: center; margin: 0; font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 50, 'WONK' 0; font-weight: 350; color: #844c16; line-height: 1; }
.hero__chamada::before { content: ''; flex: none; height: 1px; background: var(--linha); }
.hero__titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0; color: var(--tinta); }
.hero__titulo span, .hero__titulo em { display: block; white-space: nowrap; }
/* folga de pintura: background-clip:text so pinta dentro da caixa; padding + margem negativa nao alteram o fluxo */
.hero__l3 { padding: .3em 0; margin-bottom: -.3em; font-style: italic; font-weight: 420; background: linear-gradient(90deg, #8a5222 0%, #8a5222 38%, #a9682e 55%, #8a5222 72%, #87511f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__texto { margin: 0; font-family: var(--sans); color: var(--tinta); }
.hero__texto strong { display: block; font-weight: 500; }
.hero__texto span { display: block; font-weight: 400; color: var(--tinta-suave); }
.hero__nota { margin: 0; font-family: var(--sans); color: var(--bronze-nota); }

/* ----- Celular: foto da doutora, texto abaixo ----- */
@media (max-width: 767px) {
  /* Hero mobile: composicao da referencia mobile aprovada (853x1844), proporcional a largura. --m = 1px dessa referencia.
     Fundo fotografico continuo do cabecalho ao fim; a doutora e a mesma fotografia da placa aprovada (ver dados/DERIVADOS.json). */
  .hero__stage { --m: calc(100cqw / 853); aspect-ratio: 853 / 1844; overflow: hidden; }
  .hero__foto img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

  .marca { position: absolute; left: calc(56 * var(--m)); top: calc(54 * var(--m)); gap: calc(30 * var(--m)); }
  .marca__mono { width: calc(92 * var(--m)); height: calc(92 * var(--m)); border-width: max(1px, calc(1.8 * var(--m))); }
  .marca__i { left: calc(24 * var(--m)); top: calc(11 * var(--m)); font-size: calc(55 * var(--m)); }
  .marca__b { left: calc(41 * var(--m)); top: calc(18 * var(--m)); font-size: calc(55 * var(--m)); }
  .marca__texto { margin-top: calc(6 * var(--m)); }
  .marca__nome { font-size: max(12px, calc(28.2 * var(--m))); letter-spacing: .122em; margin-right: -.122em; }
  .marca__prof { margin-top: calc(9 * var(--m)); font-size: max(8px, calc(14.1 * var(--m))); letter-spacing: .27em; margin-right: -.27em; color: #584633; }

  .menu-toggle { position: absolute; left: calc(727 * var(--m)); top: calc(63 * var(--m)); width: calc(75 * var(--m)); height: calc(75 * var(--m)); border-width: max(1px, calc(2 * var(--m))); --gap-linhas: calc(10.5 * var(--m)); }
  .menu-toggle__linhas, .menu-toggle__linhas::before, .menu-toggle__linhas::after { width: calc(31 * var(--m)); height: max(1.5px, calc(2.6 * var(--m))); }
  .menu-toggle::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
  .menu-painel { top: calc(156 * var(--m)); right: 16px; left: 16px; }

  .hero__copy { position: absolute; left: calc(57 * var(--m)); top: calc(224 * var(--m)); width: calc(760 * var(--m)); }
  .hero__chamada { gap: calc(19 * var(--m)); font-size: calc(28.6 * var(--m)); color: #6f4215; }
  .hero__chamada::before { width: calc(66 * var(--m)); height: max(1px, calc(2 * var(--m))); }
  .hero__titulo { margin-top: calc(25.8 * var(--m)); font-size: calc(127 * var(--m)); line-height: calc(98 * var(--m)); letter-spacing: -.057em; word-spacing: .07em; }
  .hero__l1 { letter-spacing: -.067em; }
  .hero__l3 { margin-top: calc(.5 * var(--m) - .3em); font-size: calc(149.5 * var(--m)); line-height: calc(105 * var(--m)); letter-spacing: -.037em; }
  .hero__texto { margin-top: calc(46.4 * var(--m)); padding-left: calc(11 * var(--m)); font-size: max(14px, calc(32.2 * var(--m))); line-height: 1.242; }
  .hero__texto span { max-width: calc(560 * var(--m)); font-weight: 350; }
  .btn--cta { margin-top: calc(35.9 * var(--m)); margin-left: calc(7 * var(--m)); width: calc(707 * var(--m)); height: calc(100 * var(--m)); padding: 0 0 0 calc(63 * var(--m)); gap: calc(31 * var(--m)); font-size: max(12px, calc(29.7 * var(--m))); letter-spacing: .016em; }
  .btn--cta .btn__ico { width: calc(48 * var(--m)); height: calc(48 * var(--m)); }
  .btn--cta .btn__seta { width: calc(40 * var(--m)); height: calc(29 * var(--m)); margin-left: calc(-1 * var(--m)); }
  .hero__nota { margin-top: calc(14.6 * var(--m)); padding-left: calc(11 * var(--m)); font-size: max(10px, calc(20.8 * var(--m))); letter-spacing: .01em; color: #664422; }
}

/* ----- Tablet e desktop: composição da referência, proporcional à largura ----- */
/* telas estreitas: os tamanhos minimos de leitura alongam o bloco de texto; o palco cresce um pouco e a foto, ancorada
   embaixo, acompanha (escala <=2,5%, corte lateral <=1,2% de cada lado), mantendo a nota acima do cabelo */
@media (max-width: 374px) {
  .hero__stage { aspect-ratio: 853 / 1862; }
  .hero__foto img { object-position: 50% 100%; }
}
@media (max-width: 359px) {
  .hero__stage { aspect-ratio: 853 / 1905; }
}

@media (min-width: 768px) {
  .hero__stage { --u: calc(100cqw / 1536); aspect-ratio: 1536 / 1024; overflow: hidden; }
  .hero__foto img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

  .marca { position: absolute; left: calc(59 * var(--u)); top: calc(24 * var(--u)); gap: calc(29 * var(--u)); }
  .marca__mono { width: calc(65 * var(--u)); height: calc(65 * var(--u)); border-width: max(1px, calc(1.3 * var(--u))); }
  .marca__i { left: calc(17 * var(--u)); top: calc(8 * var(--u)); font-size: calc(39 * var(--u)); }
  .marca__b { left: calc(29 * var(--u)); top: calc(13 * var(--u)); font-size: calc(39 * var(--u)); }
  .marca__nome { font-size: max(12px, calc(23 * var(--u))); letter-spacing: .122em; margin-right: -.122em; }
  .marca__texto { margin-top: calc(7 * var(--u)); }
  .marca__prof { margin-top: calc(10 * var(--u)); font-size: max(9px, calc(10.7 * var(--u))); letter-spacing: .38em; margin-right: -.38em; }

  .menu-toggle { position: absolute; left: calc(1443 * var(--u)); top: calc(29 * var(--u)); width: max(40px, calc(52 * var(--u))); height: max(40px, calc(52 * var(--u))); border-width: max(1px, calc(1.5 * var(--u))); --gap-linhas: max(6px, calc(7.6 * var(--u))); }
  .menu-toggle__linhas, .menu-toggle__linhas::before, .menu-toggle__linhas::after { width: max(17px, calc(22 * var(--u))); height: max(1.5px, calc(1.8 * var(--u))); }
  .menu-painel { top: calc(92 * var(--u) + 6px); right: calc(41 * var(--u)); }

  .hero__copy { position: absolute; left: calc(899 * var(--u)); top: calc(195 * var(--u)); width: calc(600 * var(--u)); }
  /* sobre a foto, bronze levemente mais escuro que o da referencia para contraste legivel (ver RELATORIO) */
  .hero__chamada { gap: calc(15 * var(--u)); font-size: max(14px, calc(22.7 * var(--u))); color: #774515; }
  .hero__chamada::before { width: calc(53 * var(--u)); }
  .hero__titulo { margin-top: calc(21.5 * var(--u)); font-size: calc(117 * var(--u)); line-height: calc(87 * var(--u)); letter-spacing: -.057em; word-spacing: .07em; }
  .hero__l1 { letter-spacing: -.067em; }
  .hero__l3 { margin-top: calc(4 * var(--u) - .3em); font-size: calc(137 * var(--u)); line-height: calc(91 * var(--u)); letter-spacing: -.037em; }
  .hero__texto { margin-top: calc(35 * var(--u)); padding-left: calc(5 * var(--u)); font-size: max(15px, calc(24.6 * var(--u))); line-height: max(20px, calc(32 * var(--u))); }
  .hero__texto span { max-width: calc(410 * var(--u)); }
  .btn--cta { margin-top: calc(27 * var(--u)); margin-left: calc(4 * var(--u)); min-width: calc(479 * var(--u)); height: max(46px, calc(77 * var(--u))); padding: 0 calc(36 * var(--u)) 0 calc(46 * var(--u)); gap: calc(23 * var(--u)); font-size: max(13px, calc(20.7 * var(--u))); letter-spacing: .016em; }
  .btn--cta .btn__ico { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
  .btn--cta .btn__seta { width: calc(21 * var(--u)); height: calc(15.5 * var(--u)); margin-left: calc(-4 * var(--u)); }
  .hero__nota { margin-top: calc(15 * var(--u)); padding-left: calc(33 * var(--u)); font-size: max(12px, calc(15 * var(--u))); letter-spacing: .01em; color: #6c492b; }
}

@media (min-width: 900px) {
  /* ancorado pela borda direita (x=1420 na referencia): com a fonte minima de 12px ele cresce para a esquerda, sem tocar o menu */
  .btn--topo { display: inline-flex; position: absolute; right: calc(116 * var(--u)); top: calc(30 * var(--u)); min-width: calc(262 * var(--u)); height: max(34px, calc(50 * var(--u))); padding: 0 calc(20 * var(--u)) 0 calc(28 * var(--u)); gap: calc(18 * var(--u)); font-size: max(12px, calc(15 * var(--u))); letter-spacing: .045em; background: #683f1c; }
  .btn--topo .btn__ico { width: max(17px, calc(24 * var(--u))); height: max(17px, calc(24 * var(--u))); }
}

@media (min-width: 1120px) {
  .nav { display: block; position: absolute; left: calc(540 * var(--u)); top: calc(46.5 * var(--u)); }
  .nav ul { display: flex; gap: calc(42 * var(--u)); }
  .nav a { font-size: calc(16 * var(--u)); letter-spacing: .01em; line-height: 1; }
  .nav a[aria-current]::after { bottom: calc(-12.5 * var(--u)); height: calc(3 * var(--u)); }

}

/* ---------- Marcadores temporários (somem conforme as seções são aprovadas) ---------- */
.obra { display: grid; place-items: center; min-height: 140px; padding: 24px 16px; border-top: 1px dashed #d8c4aa; color: #7a6450; font-size: 14px; letter-spacing: .04em; text-align: center; }
.obra p { margin: 0; }

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