/* ═══════════════════════════════════════════════════════════════
   Dra. Laura Elisa — sistema de design
   Base: SitesBrz  ·  Acabamento: apple-design
   Paleta oficial da profissional (ver README para a regra de uso).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* paleta oficial */
  --preto:    #0F1115;
  --musgo:    #1F3D33;
  --salvia:   #A7B49C;
  --areia:    #E7D9C4;
  --offwhite: #F6F3EF;
  --rosa:     #C08D8D;
  --dourado:  #D4AF7A;
  /* o dourado da paleta mede 1.9:1 no off-white — ilegível como texto.
     Este é o mesmo tom escurecido até passar em off-white (5.7:1) e areia (4.5:1). */
  --ouro-texto: #755C30;

  /* derivadas — mesma família, ajustadas para contraste e profundidade */
  --musgo-fundo:  #17322A;
  --musgo-card:   #24473C;
  --preto-card:   #171A20;
  --areia-clara:  #F0E7D9;
  --branco:       #FFFFFF;

  /* REGRA DE CONTRASTE
     Sálvia, areia, rosa e dourado reprovam como texto sobre o off-white
     (1.3–2.6:1). Só entram como texto em cima de musgo ou preto, onde
     medem de 5.4 a 13.6:1. No claro, texto é sempre musgo ou preto. */

  /* seção clara */
  --l-bg:     var(--offwhite);
  --l-ink:    #16231F;
  --l-ink-2:  #45574F;
  --l-ink-3:  #6C7B73;
  --l-line:   rgba(31, 61, 51, .14);
  --l-line-2: rgba(31, 61, 51, .07);

  /* seção escura */
  --d-ink:    var(--areia);
  --d-ink-2:  var(--salvia);
  --d-ink-3:  rgba(231, 217, 196, .66);
  --d-line:   rgba(212, 175, 122, .26);
  --d-line-2: rgba(231, 217, 196, .12);

  /* materiais (§12) */
  --glass-l:   rgba(246, 243, 239, .78);
  --glass-d:   rgba(15, 17, 21, .68);
  --blur:      saturate(180%) blur(22px);
  --shadow-s:  0 1px 2px rgba(22, 40, 34, .04), 0 6px 18px rgba(22, 40, 34, .05);
  --shadow-m:  0 2px 8px rgba(22, 40, 34, .06), 0 22px 54px rgba(22, 40, 34, .10);
  --shadow-l:  0 4px 14px rgba(10, 14, 12, .18), 0 40px 90px rgba(10, 14, 12, .26);

  /* molas: damping 1.0, response 0.3–0.4 (§4) */
  --spring:  cubic-bezier(.32, .72, 0, 1);
  --t-fast:  240ms var(--spring);
  --t-base:  400ms var(--spring);
  --t-slow:  680ms var(--spring);

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --shell: 1180px;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);
}

/* ── 2. Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo [hidden] vale menos que qualquer regra de display num seletor de
   classe. Sem esta linha, .sheet{display:flex} mantinha o menu fechado ocupando
   a tela: invisível, mas interceptando cliques e tabulável. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.75rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

/* height:auto é obrigatório: os atributos width/height do HTML (que existem
   para reservar espaço e evitar layout shift) viram altura de apresentação e
   esticariam a imagem quando o CSS define só a largura. */
img, svg, iframe { max-width: 100%; display: block; }
/* controles não herdam a fonte do documento por padrão — sem isto o botão do menu cai para Arial */
button, input, select, textarea { font: inherit; color: inherit; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  position: relative;
  z-index: 1;                 /* mantém o conteúdo acima da camada de grão */
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--musgo); color: var(--offwhite);
  padding: .8rem 1.3rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ── 3. Tipografia ─────────────────────────────────────────────
   O preflight de frameworks CSS costuma zerar `h2 {}`; por isso os
   seletores de título levam `body` na frente. Tracking e leading são
   específicos por tamanho, nunca um valor só (§15). */
/* A serifada é a mesma da linha "MÉDICA · CRM-SP" da logo: o site e a marca
   passam a usar a mesma letra. Ela é de traço fino e altura-x pequena, então
   só aparece em tamanho grande — peso 500 em vez de 400 para não ficar frágil,
   e nada de rótulo pequeno nela. Rótulo é papel da sem-serifa. */
.display, body h1, body h2, .quote-text, .cta-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
}

.display {
  font-size: clamp(2.9rem, 7.1vw, 5.35rem);   /* +13%: a Cormorant tem altura-x menor */
  line-height: .99;
  letter-spacing: -.012em;                    /* face estreita pede menos aperto */
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

body h2 {
  font-size: clamp(2.3rem, 4.6vw, 3.45rem);
  line-height: 1.05;
  letter-spacing: -.009em;
  margin: 0;
  text-wrap: balance;
}

body h3 { font-size: 1.4375rem; line-height: 1.25; letter-spacing: -.008em; font-weight: 600; margin: 0; }
body h4 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; margin: 0; letter-spacing: -.003em; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.1875rem);
  line-height: 1.66;
  max-width: 33em;
  margin: 0 0 2.5rem;
}

.prose p { margin: 0 0 1.2rem; font-size: 1.0625rem; line-height: 1.75; max-width: 36em; }

/* text-wrap: pretty evita a palavra órfã sozinha na última linha.
   Onde o navegador não suporta, simplesmente não faz nada. */
.prose p, .lede, .s-sub, .cta__sub, .area p, .tl__body p, .place p, .ftr__tag {
  text-wrap: pretty;
}
/* algarismos de texto (old-style): próprios para números dentro de frase,
   diferente dos de caixa-alta, que são todos da mesma altura */
.tl__when, .brand__crm, .strip__v, .ftr__bottom p {
  font-variant-numeric: oldstyle-nums;
}
.prose p:last-child { margin-bottom: 0; }

/* ── 4. Temas de seção ─────────────────────────────────────── */
.s { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }

.s--light { background: var(--l-bg);   color: var(--l-ink); }
.s--sand  { background: var(--areia);  color: var(--l-ink); }
.s--moss  { background: var(--musgo-fundo); color: var(--d-ink); }
.s--ink   { background: var(--preto);  color: var(--d-ink); }


.s--light .prose p, .s--sand .prose p { color: var(--l-ink-2); }
.s--moss  .prose p, .s--ink  .prose p { color: var(--d-ink-2); }

.s--light .prose strong, .s--sand .prose strong { color: var(--l-ink); font-weight: 600; }
.s--moss  .prose strong, .s--ink  .prose strong { color: var(--areia); font-weight: 600; }

.s--moss h2, .s--ink h2, .s--moss h3, .s--ink h3 { color: var(--areia); }

/* cabeçalho de seção com numeral editorial */
.s-head { display: grid; gap: 1.15rem; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); max-width: 44rem; }
/* risco curto antes do rótulo de seção, o mesmo filete que assina as fotos.
   Rótulo é maquinário, não voz: fica na sem-serifa. */
.s-head .num {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dourado);
}
.s-head .num::before {
  content: '';
  width: 1.85rem; height: 1px;
  background: currentColor;
  opacity: .55;
}
/* o cabeçalho de seção fecha com o mesmo filete que assina as fotos */
.s-head::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: .4rem;
  background: currentColor;
  opacity: .13;
}
.s--light .s-head .num, .s--sand .s-head .num { color: var(--ouro-texto); }
.s-sub { margin: .35rem 0 0; font-size: 1.0625rem; line-height: 1.65; max-width: 38em; color: var(--l-ink-2); }
.s--moss .s-sub, .s--ink .s-sub { color: var(--d-ink-2); }

.rule { height: 1px; border: 0; margin: 0; background: var(--l-line); }
.s--moss .rule, .s--ink .rule { background: var(--d-line-2); }

/* ── 5. Botões — feedback no pointer-down (§1) ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.004em;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  will-change: transform;
}
.btn:active, .btn.is-pressed { transform: scale(.972); }

.btn--gold  { background: var(--dourado); color: #241A0B; box-shadow: var(--shadow-s); }
.btn--gold:hover  { background: #DFBF90; box-shadow: var(--shadow-m); }

.btn--moss  { background: var(--musgo); color: var(--offwhite); box-shadow: var(--shadow-s); }
.btn--moss:hover  { background: #2A5145; box-shadow: var(--shadow-m); }

.btn--outline-l { border-color: var(--l-line); color: var(--l-ink); }
.btn--outline-l:hover { border-color: var(--musgo); }

.btn--outline-d { border-color: var(--d-line); color: var(--areia); }
.btn--outline-d:hover { border-color: var(--dourado); background: rgba(212,175,122,.08); }

.btn--sm  { padding: .58rem 1.15rem; font-size: .8125rem; }
.btn--xl  { padding: 1.2rem 2.6rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.btn--xl .ico { width: 1.35em; height: 1.35em; }

/* ── 6. Header — material translúcido que troca de tema (§12) ─ */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base);
}
.hdr__in { display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; }

/* sobre o hero escuro: transparente */
.hdr { background: transparent; color: var(--areia); }
/* depois de rolar: material claro ou escuro conforme a seção sob ele */
.hdr.is-stuck {
  background: var(--glass-l);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: var(--l-ink);
}
.hdr.is-stuck.on-dark {
  background: var(--glass-d);
  color: var(--areia);
}
/* borda de rolagem em gradiente, não um traço de 1px (§12) */
.hdr::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -20px; height: 20px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(15,17,21,.06), transparent);
  transition: opacity var(--t-base);
}
.hdr.is-stuck::after { opacity: 1; }

/* Progresso de leitura: um fio de 1px na base do header.
   Anima por scaleX (propriedade de composição) — nunca por width. */
.hdr__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
}
.hdr__progress span {
  display: block;
  height: 100%;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity var(--t-base);
}
.hdr.is-stuck .hdr__progress span { opacity: .85; }

/* padding-block cresce o alvo de toque sem mexer na altura do header (min-height manda) */
.brand { display: flex; align-items: center; gap: .85rem; margin-right: auto; min-width: 0; padding-block: .5rem; }
.brand__logo { height: 1.6rem; width: auto; transition: opacity var(--t-fast); }
.brand__logo--dark { display: none; }
.hdr.is-stuck:not(.on-dark) .brand__logo--light { display: none; }
.hdr.is-stuck:not(.on-dark) .brand__logo--dark  { display: block; }
.brand__crm {
  font-size: .6875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .62;
  padding-left: .85rem;
  border-left: 1px solid currentColor;
  white-space: nowrap;
}

.nav { display: none; gap: 1.75rem; }
.nav a {
  position: relative;
  font-size: .875rem;
  padding: .4rem 0;
  opacity: .78;
  transition: opacity var(--t-fast);
}
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;      /* sai pelo mesmo caminho por onde entrou (§7) */
  transition: transform var(--t-base);
}
.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; }
.nav a.is-active::after { transform: scaleX(1); }

.hdr__cta { display: none; }

.burger {
  display: grid; place-items: center; gap: 5px;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid currentColor; border-radius: var(--r-sm);
  background: transparent; color: inherit; cursor: pointer;
  opacity: .8;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger:active { transform: scale(.94); }
.burger span {
  display: block; width: 1.05rem; height: 1.3px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base);
}
.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child  { transform: translateY(3px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: rotate(-45deg); }

@media (min-width: 960px) {
  .nav { display: flex; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
}

/* sheet mobile — ancorado no botão, materializa (§7, §12) */
.scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(15, 17, 21, .42);
  opacity: 0; transition: opacity var(--t-base);
}
.scrim.is-open { opacity: 1; }

.sheet {
  position: fixed; z-index: 99;
  top: 4.75rem; left: var(--pad); right: var(--pad);
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--d-line);
  background: rgba(23, 50, 42, .92);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-l);
  transform-origin: top right;
  transform: scale(.94) translateY(-10px);
  opacity: 0; filter: blur(6px);
  transition: transform var(--t-base), opacity var(--t-fast), filter var(--t-fast);
}
.sheet.is-open { transform: none; opacity: 1; filter: none; }
/* :not(.btn) é obrigatório, não cosmético. Como seletor, `.sheet a` tem
   especificidade maior que `.btn--gold`, então sem isto a cor de link do menu
   sobrescrevia a cor própria do botão: "Agendar consulta" saía em areia sobre
   dourado, 1.48:1 — a ação principal do site, invisível, justamente no celular. */
.sheet a:not(.btn) {
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  color: var(--areia);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.sheet a:not(.btn):active { background: rgba(212,175,122,.12); transform: scale(.985); }
.sheet .btn { margin-top: .6rem; }

/* ── 6b. Grão ───────────────────────────────────────────────
   Ruído quase imperceptível sobre os blocos escuros: quebra a chapada digital
   e dá sensação de impresso. Fica atrás do conteúdo (.shell tem z-index 1) e
   some para quem pediu menos transparência. */
.hero, .strip, .ftr { position: relative; }
.hero::after, .s--moss::after, .s--ink::after, .strip::after, .ftr::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 7. Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--preto);
  color: var(--d-ink);
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(31,61,51,.55) 0%, transparent 60%),
    radial-gradient(60% 50% at 8% 90%, rgba(212,175,122,.10) 0%, transparent 65%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(3rem, 6vw, 5.5rem);
    /* Alinhado pelo topo, não centralizado. Centralizadas, as duas colunas
       flutuavam sem encostar em nada — a foto começava 94px abaixo do título
       e terminava 94px acima. Uma borda compartilhada lê como decisão. */
    align-items: start;
  }
  /* A caixa do título começa acima da altura de maiúscula, pelo espaço que a
     fonte reserva para ascendentes. Sem esta compensação o alinhamento é
     correto na matemática e errado no olho. */
  .hero .display { margin-top: -.19em; }
}

/* O título é branco inteiro. Uma palavra em cor de destaque no meio de uma
   série de três não é ênfase — é decoração, e não havia razão para ser
   justamente a do meio. A presença vem do tamanho e da fonte. */
.hero .display { color: var(--offwhite); }
.hero__lede { color: var(--d-ink-2); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.75rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: 0; padding: 1.5rem 0 0; list-style: none;
  border-top: 1px solid var(--d-line-2);
}
.hero__meta li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .8125rem; letter-spacing: .01em;
  color: var(--d-ink-3);
}
.hero__meta li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--dourado); flex: none;
}

/* A foto ocupa a coluna inteira: bordas rentes à margem da página, dos dois
   lados, alinhadas com o texto e o menu. Antes havia um retângulo de contorno
   deslocado atrás da imagem — removido: no fundo escuro ele lia como um traço
   solto, não como elemento gráfico. A forma vem do raio e da sombra. */
.frame { position: relative; margin: 0; }

.frame img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l);
}
.frame figcaption {
  position: relative;
  margin-top: 1.5rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}
.frame--light figcaption { color: var(--l-ink-3); }

/* Filete de assinatura sob a foto. Entra no fluxo (display:block), então ocupa
   espaço próprio em vez de flutuar sobre o que vem depois — foi justamente o
   posicionamento solto que fazia a moldura anterior parecer um erro. */
.frame::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.15rem;
  background: var(--dourado);
  opacity: .42;
}
/* em seção clara o dourado puro some: usa o tom escurecido */
.frame--light::after { background: var(--ouro-texto); opacity: .45; }
/* figura empilhada acima de outro bloco: respiro embaixo */
.frame--stacked { margin-bottom: 1.5rem; }

/* ── 8. Faixa de credenciais ───────────────────────────────── */
.strip { background: var(--musgo); color: var(--areia); padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.strip__grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .strip__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.strip__item { display: grid; gap: .4rem; }
@media (min-width: 720px) {
  .strip__item + .strip__item { padding-left: 2.5rem; border-left: 1px solid var(--d-line-2); }
}
.strip__k { font-size: .6875rem; letter-spacing: .17em; text-transform: uppercase; color: var(--dourado); }
.strip__v { font-size: .9375rem; line-height: 1.5; color: var(--areia); }

/* ── 9. Grids assimétricos ─────────────────────────────────── */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split--7-5 { grid-template-columns: 1.15fr .85fr; }
  .split--5-7 { grid-template-columns: .85fr 1.15fr; }
  .split--start { align-items: start; }
}

.quote {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--dourado);
}
.quote-text {
  position: relative;
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  line-height: 1.3;
  letter-spacing: -.006em;
  margin: 0;
}
/* aspa pendurada fora da margem: o texto continua alinhado ao resto da coluna */
.quote-text::before {
  content: '“';
  position: absolute;
  right: 100%;
  margin-right: .12em;
  color: var(--ouro-texto);
  opacity: .5;
}
.quote-text::after { content: '”'; margin-left: .04em; color: var(--ouro-texto); opacity: .5; }
.s--light .quote-text, .s--sand .quote-text { color: var(--musgo); }

/* ── 10. Princípios ──────────────────────────────
   Eram três cartões de altura cheia com ícone, ocupando a posição de honra da
   seção. O conteúdo, porém, é colável em qualquer site médico do Brasil sem
   trocar uma palavra — não merece mais peso que a trajetória dela, que é
   infalsificável. Viraram três linhas subordinadas ao próprio texto. */
.principios {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  max-width: 40em;
}
.principios li {
  padding-left: 1.1rem;
  border-left: 1px solid var(--l-line);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--l-ink-2);
  text-wrap: pretty;
}
.principios b { color: var(--l-ink); font-weight: 600; }

/* ── 11. Timeline ──────────────────────────────────────────── */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li {
  position: relative;
  display: grid;
  gap: .5rem 2.5rem;
  padding: clamp(1.75rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--d-line-2);
}
.tl li:last-child { border-bottom: 1px solid var(--d-line-2); }
@media (min-width: 820px) { .tl li { grid-template-columns: 15rem 1fr; } }

.tl__when { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dourado); padding-top: .3rem; }
.tl__when em { font-style: normal; color: var(--rosa); }
.tl__body h3 { color: var(--areia); }
.tl__body p { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.7; color: var(--d-ink-2); max-width: 36em; }
.tl__body strong { color: var(--areia); font-weight: 600; }

/* ── 11b. A rede pública ────────────────────────────
   Este é o conteúdo que nenhum concorrente copia e que a lei brasileira deixa
   de pé quando probe depoimento e antes/depois. Estava como lista de 14px no
   fim da seção; passa a ter título próprio, hospital-base em corpo grande e
   itens legíveis. Uma frase decodifica as siglas de uma vez, em vez de deixar
   onze delas sem glosa para quem chega do Instagram. */
.rede { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.rede__titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.009em;
  color: var(--areia);
  margin: 0;
  max-width: 18em;
  text-wrap: balance;
}
.rede__decoder {
  margin: 1rem 0 0;
  max-width: 44em;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--d-ink-2);
  text-wrap: pretty;
}

.rede__base {
  margin: clamp(2.25rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--d-line);
}
.rede__base-k {
  margin: 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dourado);
}
.rede__base-v {
  margin: .8rem 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -.008em;
  color: var(--offwhite);
}
.rede__base-m { margin: .6rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--d-ink-2); }

.rede__grade { display: grid; gap: 2rem; }
@media (min-width: 820px) { .rede__grade { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
.rede__grade h4 {
  margin: 0 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--d-line);
  color: var(--dourado);
  letter-spacing: .01em;
}
.rede__grade ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.rede__grade li { font-size: 1rem; line-height: 1.5; color: var(--areia); text-wrap: pretty; }

/* ── 12. Áreas de atuação — grade editorial numerada ───────── */
.areas { display: grid; gap: 0; }
@media (min-width: 640px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(4, 1fr); } }

.area {
  padding: clamp(1.6rem, 2.6vw, 2rem) 0;
  border-top: 1px solid var(--l-line);
  transition: background-color var(--t-base);
}
@media (min-width: 640px) {
  .area { padding-inline: clamp(1.1rem, 2vw, 1.6rem); }
  .area:nth-child(2n) { border-left: 1px solid var(--l-line-2); }
}
@media (min-width: 1000px) {
  .area:nth-child(2n) { border-left: 0; }
  .area:not(:nth-child(4n+1)) { border-left: 1px solid var(--l-line-2); }
  .area:nth-child(4n+1) { padding-left: 0; }
  .area:nth-child(4n)   { padding-right: 0; }
}
.area__n {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ouro-texto);
  letter-spacing: .12em;
}
.area h3 { margin-top: .7rem; color: var(--musgo); }
.area p { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--l-ink-2); }

/* ── 13. Localização ───────────────────────────────────────── */
.places { display: grid; gap: 1.25rem; }
.place {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--offwhite);
  border: 1px solid rgba(31, 61, 51, .08);
  box-shadow: var(--shadow-s);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.place:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.place__tag {
  display: inline-block; margin-bottom: .85rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro-texto);
}
.place h3 { color: var(--musgo); }
.place address, .place p {
  margin: .7rem 0 0; font-style: normal;
  font-size: .9375rem; line-height: 1.7; color: var(--l-ink-2);
}
/* Alvo de toque: o sublinhado vem de text-decoration (e não de border-bottom)
   para o padding poder crescer a área tocável sem descolar o traço do texto. */
.arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .6rem; padding-block: .55rem;
  font-size: .875rem; font-weight: 600; color: var(--musgo);
  text-decoration: underline;
  text-decoration-color: rgba(31,61,51,.3);
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast), gap var(--t-fast);
}
.arrow:hover { color: var(--ouro-texto); text-decoration-color: var(--ouro-texto); gap: .65rem; }

.map {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(31, 61, 51, .12);
  box-shadow: var(--shadow-m);
  background: var(--areia-clara);
  height: 100%;
  min-height: 22rem;
}
.map iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; }

/* ── 14. Conteúdo / Instagram ──────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.tags li {
  padding: .42rem .9rem; border-radius: 999px;
  border: 1px solid var(--l-line);
  font-size: .8125rem; color: var(--l-ink-2);
}

.ig {
  display: grid; gap: .35rem; align-content: start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--preto);
  color: var(--areia);
  box-shadow: var(--shadow-m);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.ig:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.ig:active { transform: scale(.987); }
.ig__ico {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--d-line);
  color: var(--dourado);
}
.ig__ico svg { width: 1.35rem; height: 1.35rem; }
.ig__handle { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.8rem; letter-spacing: -.006em; color: var(--offwhite); }
.ig__meta { font-size: .875rem; line-height: 1.55; color: var(--d-ink-3); margin-top: .3rem; }
.ig__cta { margin-top: 1.4rem; font-size: .875rem; font-weight: 600; color: var(--dourado); letter-spacing: .01em; }

/* ── 15. CTA ───────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta__mark {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: min(30rem, 76vw);
  color: var(--dourado);
  opacity: .085;
  pointer-events: none;
}
.cta__in { position: relative; max-width: 42rem; margin-inline: auto; }
.cta-title { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.02; letter-spacing: -.011em; margin: 0 0 1.25rem; color: var(--offwhite); }
.cta__sub { margin: 0 auto 2.75rem; max-width: 32em; font-size: 1.0625rem; line-height: 1.65; color: var(--d-ink-2); }
.cta__note { margin: 1.4rem 0 0; font-size: .8125rem; color: var(--d-ink-3); }

/* ── Emergência ─────────────────────────────────────────────
   O único conteúdo da página cujo valor é inversamente proporcional ao tempo
   de encontrá-lo. Três decisões vêm daí:
   1. Não carrega .rv — informação de crise nunca depende de animação ter rodado.
   2. O número é o elemento tipográfico dominante do bloco, não parte da frase.
   3. O rosa da paleta mede 4.21:1 aqui e reprova como texto. Ele fica na borda,
      onde é decoração; o texto usa areia (8.56:1) e sálvia (5.46:1). */
.emergency {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(192, 141, 141, .55);
  background: rgba(192, 141, 141, .1);
  text-align: left;
}
.emergency__lead {
  margin: 0;
  color: var(--areia);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.004em;
}
.emergency__body {
  margin: .3rem 0 0;
  color: var(--d-ink-2);
  font-size: .875rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.emergency__calls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}
.emergency__call {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  min-height: 44px;                 /* alvo de toque, não decoração */
  padding: .65rem 1.1rem;
  border: 1px solid rgba(231, 217, 196, .28);
  border-radius: 999px;
  color: var(--areia);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.emergency__call:hover  { background: rgba(231, 217, 196, .08); border-color: rgba(231, 217, 196, .5); }
.emergency__call:active { transform: scale(.975); }
.emergency__call strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;   /* número de telefone é dado, não texto corrido */
}
.emergency__call span { font-size: .8125rem; color: var(--d-ink-2); }

/* rota discreta no menu: fica abaixo do CTA e fora do conjunto de navegação,
   para não empurrar a decisão do visitante de 7 opções para 8 */
.sheet__emergencia {
  margin-top: .5rem;
  padding-top: .85rem !important;
  border-top: 1px solid var(--d-line-2);
  font-size: .8125rem !important;
  color: var(--d-ink-2) !important;
  text-align: center;
}

/* ── 15b. Atalho de agendamento no mobile ───────────────────
   Aparece depois do hero e some quando a seção de contato entra na tela —
   dois convites iguais ao mesmo tempo viram ruído, não insistência. */
.fab {
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  background: var(--dourado);
  color: #241A0B;
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(10, 14, 12, .3), 0 2px 6px rgba(10, 14, 12, .2);
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.fab.is-in { transform: none; opacity: 1; }
.fab:active { transform: scale(.96); }
.fab .ico { width: 1.25rem; height: 1.25rem; }

@media (min-width: 960px) { .fab { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fab { transform: none; transition: opacity 200ms ease; }
  .fab:active { transform: none; }
}

/* ── 16. Footer ────────────────────────────────────────────── */
.ftr { background: var(--preto); color: var(--d-ink-2); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.25rem; }
.ftr__grid { display: grid; gap: 2.75rem; }
@media (min-width: 820px) { .ftr__grid { grid-template-columns: 1.3fr .85fr .85fr; gap: 3rem; } }

.ftr__logo { height: 2.5rem; width: auto; margin-bottom: 1.4rem; }
.ftr__tag { margin: 0; max-width: 24em; font-size: .9375rem; line-height: 1.65; color: var(--d-ink-3); }

.ftr__col { display: grid; gap: .1rem; align-content: start; justify-items: start; }
.ftr__col h3 {
  margin-bottom: .45rem;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dourado); margin-bottom: .3rem;
}
.ftr__col a { font-size: .9375rem; color: var(--d-ink-2); padding-block: .45rem; transition: color var(--t-fast), transform var(--t-fast); }
.ftr__col a:hover { color: var(--areia); transform: translateX(2px); }
.ftr__col address { font-style: normal; font-size: .875rem; line-height: 1.7; color: var(--d-ink-3); margin-top: .3rem; }

.ftr__bottom {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--d-line-2);
  display: grid; gap: .6rem;
}
@media (min-width: 760px) { .ftr__bottom { grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; } }
.ftr__bottom p { margin: 0; font-size: .75rem; line-height: 1.65; color: rgba(231,217,196,.55); }

/* ── 17. Reveal ao rolar ─────────────────────────────────────
   Dois caminhos. O padrão é por transição, acionada pelo IntersectionObserver.
   Onde o navegador entende animação guiada por rolagem, o CSS assume sozinho:
   a animação passa a ser função da posição na tela, roda no compositor e o
   JavaScript sai do caminho. */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--spring), transform var(--t-slow); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }

/* a foto materializa: escala + opacidade juntas (§12) */
.rv-img { opacity: 0; transform: scale(1.05); transition: opacity 620ms var(--spring), transform 900ms var(--spring); }
.rv-img.in { opacity: 1; transform: none; }

.no-js .rv, .no-js .rv-img { opacity: 1; transform: none; }

/* Rede de segurança: o script marca assim qualquer elemento que continue
   invisível depois do carregamento. Conteúdo nunca depende de animação. */
.rv-forcado { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }

@keyframes rv-entra     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rv-img-entra { from { opacity: 0; transform: scale(1.05); }     to { opacity: 1; transform: none; } }
@keyframes rv-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: view()) {
  .rv:not(.rv--imediato), .rv-img:not(.rv--imediato) {
    transition: none;                   /* a linha do tempo substitui a transição */
    animation-timing-function: linear;  /* a curva quem dá é o deslocamento */
    animation-fill-mode: both;
    animation-timeline: view();
  }
  .rv:not(.rv--imediato)     { animation-name: rv-entra;     animation-range: entry 8% entry 46%; }
  .rv-img:not(.rv--imediato) { animation-name: rv-img-entra; animation-range: entry 5% entry 50%; }

  /* PRIMEIRA TELA: entrada por tempo, não por rolagem.
     O que já nasce visível nunca "entra" na tela — não há rolagem anterior que
     acione a linha do tempo, e o elemento ficaria parado no quadro inicial,
     ou seja, invisível. Acima da dobra, portanto, animação comum. */
  .rv--imediato        { transition: none; animation: rv-entra 620ms var(--spring) both; }
  .rv-img.rv--imediato { transition: none; animation: rv-img-entra 820ms var(--spring) both; }

  /* o progresso de leitura também deixa de precisar de JavaScript */
  .hdr__progress span {
    animation: rv-progresso linear both;
    animation-timeline: scroll(root block);
  }
}

/* ── 18. Acessibilidade — três sinais independentes (§14) ──── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* reduzir movimento não é remover feedback: vira cross-fade */
  .rv, .rv-img { transform: none; transition: opacity 200ms ease; }
  /* desliga as linhas do tempo: sem deslocamento e sem barra correndo */
  .rv, .rv-img, .rv--imediato, .hdr__progress span { animation: none !important; }
  .rv, .rv-img { opacity: 1; }
  .hdr__progress span { transform: scaleX(0); }
  .sheet { transform: none !important; filter: none !important; transition: opacity 200ms ease; }
  .btn:active, .btn.is-pressed { transform: none; filter: brightness(.92); }
  .place:hover, .ig:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .hero::after, .s--moss::after, .s--ink::after, .strip::after, .ftr::after { display: none; }
  .hdr.is-stuck { background: var(--offwhite); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr.is-stuck.on-dark { background: var(--preto); }
  .sheet { background: var(--musgo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --l-ink-2: #2B3B35; --l-ink-3: #3C4D46;
    --l-line: rgba(31,61,51,.4); --l-line-2: rgba(31,61,51,.28);
    --d-ink-2: #E7D9C4; --d-ink-3: rgba(231,217,196,.85);
    --d-line: rgba(212,175,122,.6); --d-line-2: rgba(231,217,196,.35);
  }
  .hdr.is-stuck { background: var(--offwhite); backdrop-filter: none; }
  .hdr.is-stuck.on-dark { background: var(--preto); }
  .place { border-color: rgba(31,61,51,.35); }
  .emergency { border-color: var(--rosa); }
  .emergency__call { border-color: var(--areia); }
}

@media print {
  .hdr, .sheet, .scrim, .burger, .map, .btn, .cta__mark { display: none !important; }
  .rv, .rv-img { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .s--moss, .s--ink, .hero, .ftr, .strip { background: #fff !important; color: #000 !important; }
  /* impresso, a emergência é o que alguém prende na geladeira */
  .emergency { border: 1.5pt solid #000 !important; background: #fff !important; }
  .emergency__lead, .emergency__body, .emergency__call,
  .emergency__call strong, .emergency__call span { color: #000 !important; }
  .emergency__call { border-color: #000 !important; }
}