/* =========================================================================
   Olive Dermatologia — v3 "Jeton register"
   Identidade intacta (Marcellus + Inter, oliva/bone/ink/mauve) sobre a
   gramática Jeton: hero drenchado com cena full-bleed, dock flutuante,
   pílulas, palavras gigantes, bandas de cor, footer com wordmark chapado.
   ========================================================================= */

/* ---------- 0. Fontes -------------------------------------------------- */

@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  --cui-idx-w: 3.4rem;              /* coluna do índice C/0x */
  --cui-gap: clamp(14px, 3vw, 32px);
  --cui-row: max(74px, calc(clamp(1.7rem, 3.1vw, 2.6rem) * 1.06 + 30px));
  --bone: #f2f1eb;
  --bone-warm: #f4f1e8;
  --greige: #ece8dd;
  --olive: #6C6832;
  --olive-deep: #565322;
  --olive-light: #8d864f;
  --ink: #2d2623;
  --stone: #6f6558;          /* legendas, 5.05:1 sobre bone */
  --mauve-ink: #7a5f54;      /* detalhes pequenos, 5.2:1 sobre bone */
  --mauve: #9b8076;          /* só texto grande */
  --hairline: rgba(45, 38, 35, 0.14);

  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  --pad: clamp(20px, 6vw, 96px);
  --content-w: 1240px;
  --top-h: 76px;
  --r-frame: 22px;           /* geometria arredondada Jeton */
  --r-card: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* escala z semântica */
  --z-dock: 90;
  --z-top: 100;
  --z-menu: 200;
}

/* ---------- 2. Reset / base --------------------------------------------- */

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

html { scroll-behavior: smooth; overflow-x: clip; }
html.js { scroll-behavior: auto; } /* Lenis assume */
/* BUG FASE 2: `body{overflow-x:clip}` (abaixo) não propaga para o viewport —
   o `html` ficava com overflow-x:visible e o scrub horizontal do reveal
   (fx left/right, translateX até 46px) furava a borda em telas estreitas
   (--pad chega a ~20px em 360/390px, menor que os 46px de curso). Clipar
   também no `html` fecha o vazamento na origem real, sem depender de nenhum
   componente específico. */

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; }
address { font-style: normal; }
sup { font-size: 0.55em; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .clinica :focus-visible { outline-color: var(--bone); }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 10px;
  z-index: calc(var(--z-menu) + 10);
  background: var(--ink); color: var(--bone);
  padding: 10px 18px; font-size: 14px; text-decoration: none;
  border-radius: 999px;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: none; }

::selection { background: var(--olive); color: var(--bone); }


/* ---------- 3. Botões e pílulas ------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none;
  padding: 16px 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--olive); color: var(--bone); }
.btn--solid:hover { background: var(--olive-deep); }

/* ---------- 4. Barra superior --------------------------------------------- */

.top {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-top);
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.top__brand { display: grid; }
.top__wm { grid-area: 1 / 1; width: 82px; transition: opacity 0.5s ease; }
.top[data-tone="dark"] .top__wm--ink { opacity: 0; }
.top[data-tone="dark"] .top__wm--bone { opacity: 1; }
.top[data-tone="light"] .top__wm--ink { opacity: 1; }
.top[data-tone="light"] .top__wm--bone { opacity: 0; }

.top__brand { padding: 8px 10px; margin: -8px -10px; } /* área de toque ≥44px */

/* ---------- 5. Dock flutuante (Jeton) -------------------------------------- */

.dock {
  position: fixed; bottom: 18px; left: 50%;
  translate: -50% 0;
  z-index: var(--z-dock);
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  /* liquid glass: refração (blur + saturação), borda especular e brilho
     interno no topo — o vidro pega a luz da página que passa por baixo.
     O branco translúcido ficava em 0,62/0,34: sobre o vídeo do hero o campo
     claro atravessava e os rótulos `--stone` mediam 1,93:1. Base em bone com
     alfa alto mantém a refração (o blur continua trabalhando) e dá ao texto
     um fundo previsível em qualquer lâmina. */
  background: linear-gradient(
      to bottom,
      rgba(246, 245, 240, 0.95),
      rgba(238, 236, 228, 0.9)
    );
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow:
    0 14px 44px rgba(45, 38, 35, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(45, 38, 35, 0.06);
}

.dock__home {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bone);
  transition: background-color 0.3s var(--ease-out);
}
.dock__home:hover { background: var(--greige); }

.dock__links { display: flex; }
.dock__links a {
  font-size: 14px; font-weight: 500;
  /* --stone (5,05:1 sobre bone chapado) media 3,9:1 quando o vidro flutua
     sobre o vídeo do hero. A hierarquia da dock vem da pílula oliva do item
     ativo, não de rebaixar os inativos até o limite da legibilidade. */
  color: var(--ink);
  text-decoration: none;
  padding: 12px 15px;
  border-radius: 999px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.dock__links a:hover { color: var(--olive); }
.dock__links a.is-active { color: var(--bone); background: var(--olive); }

.dock__menu {
  display: none;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  background: var(--bone);
  border: none; cursor: pointer;
  padding: 13px 20px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .dock__links { display: none; }
  .dock__menu { display: block; }
  .dock { bottom: 14px; }
}

/* pílula do WhatsApp (Jeton: Support) */
.whats {
  position: fixed; bottom: 18px; right: max(18px, calc((100vw - 1560px) / 2));
  z-index: var(--z-dock);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
  color: var(--bone);
  text-decoration: none;
  /* mesma correção da dock: a 78%/86% de alfa o campo por baixo atravessava
     e o bone media 3,47:1 sobre a pílula. Quase opaco, o par bone/oliva
     volta aos 5,0:1 medidos no chapado. */
  background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--olive) 95%, transparent),
      color-mix(in srgb, var(--olive-deep) 97%, transparent)
    );
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 14px 21px;
  border-radius: 999px;
  box-shadow:
    0 14px 44px rgba(45, 38, 35, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.whats:hover { background: var(--olive-deep); transform: translateY(-2px); }
.dock__links a.is-active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }

/* perto do fim, o chrome sai de cena — o wordmark monumental fica sozinho */
.dock, .whats { transition: translate 0.5s var(--ease-out), opacity 0.5s ease, background-color 0.3s var(--ease-out); }
html.at-end .dock, html.at-end .whats {
  translate: 0 140%;
  opacity: 0;
  pointer-events: none;
}
html.at-end .dock { translate: -50% 140%; }

@media (max-width: 900px) {
  .whats { bottom: 14px; right: 14px; }   /* mesma régua do dock mobile */
}
/* abaixo de ~640px a pílula com texto colide com o dock centrado (medido:
   a sobreposição começa em ~596px) — fica só o balão de diálogo */
@media (max-width: 640px) {
  .whats {
    width: 52px; height: 52px;
    padding: 0;
    justify-content: center;
  }
  .whats__label { display: none; }
}

/* ---------- 6. Menu mobile ---------------------------------------------- */

.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--top-h) + 30px) var(--pad) 110px;
  background: var(--bone);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.4s var(--ease-out);
}
html.menu-open .top .top__wm--bone { opacity: 0; }
html.menu-open .top .top__wm--ink { opacity: 1; }
html.menu-open .dock { z-index: 210; }
html.menu-open .whats { opacity: 0; pointer-events: none; }

.menu__links { display: flex; flex-direction: column; gap: 10px; }
.menu__links a {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8.5vw, 3rem);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.menu__links a:hover { color: var(--olive); }

.menu__foot { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--stone); }
.menu__foot a { color: var(--ink); text-decoration: none; }

/* ---------- 7. Cabeçalho de seção (sistema da marca) ---------------------- */

.sec-head {
  display: flex; align-items: center; gap: 14px;
  padding-top: clamp(72px, 12vh, 130px);
  margin-bottom: clamp(34px, 5vh, 56px);
}
.sec-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.sec-head__mark { width: 38px; opacity: 0.85; }
.sec-head__label {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mauve-ink);
}

.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  /* `text-wrap: nowrap` vivia aqui e era sobrescrito por `balance` quatro
     linhas abaixo. Os títulos já cabem em uma linha pelo clamp; nowrap ativo
     de verdade estouraria a caixa em 360px. */
  text-wrap: balance;
  color: var(--ink);
}

main { position: relative; z-index: 1; }
main > section { padding-inline: var(--pad); }
/* CAMPO POR SEÇÃO, NÃO POR VARIÁVEL GLOBAL.
   Havia um único `--page-bg` no :root, interpolado em 1,1s conforme a seção
   que cobria o centro do viewport. Consequências medidas: (a) o texto bone do
   manifesto continuava bone enquanto o fundo lerpava para bone — 1,46:1 no
   meio da leitura; (b) um link direto para #contato pintava a página inteira
   de oliva por 2,6s antes de assentar; (c) `.cui__item{background:var(--bone)}`
   é fixo, então durante a transição aparecia uma emenda horizontal.
   Agora cada seção carrega o próprio campo em CSS estático: fundo e cor de
   texto passam a ser governados pelo mesmo relógio (nenhum). A troca de campo
   vira a borda arredondada da folha que chega — o idioma que a página já usa. */
main > section:not(.hero) {
  position: relative;
  z-index: 1;
  background-color: var(--bone);
  border-top-left-radius: clamp(20px, 4vw, 44px);
  border-top-right-radius: clamp(20px, 4vw, 44px);
}
/* a folha oliva chega RETA: nos cantos arredondados vazava o hero claro
   ("o branco") atrás da lâmina — o cliente quer a junção inteira verde.
   As demais folhas mantêm o raio: o que vaza nos cantos delas é o campo
   da lâmina anterior, não uma cena clara. */
main > section.clinica { border-top-left-radius: 0; border-top-right-radius: 0; }
/* especificidade: `main > section:not(.hero)` vale (0,1,2) e venceria um
   `.clinica` solto (0,1,0) — o campo oliva virava bone e o manifesto ficava
   bone sobre bone. Os seletores abaixo empatam em elementos e ganham na classe. */
main > section.clinica { background-color: var(--olive); }
main > section.medicas { background-color: var(--greige); }

main > section > * { max-width: var(--content-w); margin-inline: auto; }

/* a primeira folha chega com cantos arredondados sobre a cena */
/* uma tela, um texto: a lâmina tem exatamente a altura do viewport e o
   manifesto ocupa o miolo — nada de rolar para completar a leitura */
.clinica {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.clinica > .sec-head,
.clinica > .manifesto { position: relative; z-index: 1; }
.clinica > .sec-head {
  flex: none;
  width: 100%;               /* em coluna flex, margin-inline:auto encolheria ao conteúdo */
  padding-top: clamp(46px, 7vh, 88px);
  margin-bottom: 0;
}

/* ramos desenhados: textura de fundo full-bleed atrás do manifesto */
.clinica__branches {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* a faixa do cabeçalho fica limpa: um ramo cruzando "A clínica" a 14px suja
     a leitura. Perseguir a geometria do SVG é frágil — a máscara é exata. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 10%, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 10%, #000 24%);
}
.clinica__branches svg { position: absolute; overflow: visible; }
.clinica__branches path {
  fill: none;
  stroke: var(--bone);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clinica__branches .branch-inst { opacity: 0.26; }
@media (prefers-reduced-motion: reduce) {
  .clinica__branches path { stroke-dashoffset: 0 !important; }
}

/* ---------- 8. Hero — vídeo escrutado pelo scroll (Simple. Private. Open.) --- */
/* Verbo dominante: escorrer dentro da moldura — a janela (pin) fica parada,
   o vídeo (currentTime) passa por dentro, amarrado ao progresso do scroll. */

.hero {
  position: relative;
  z-index: 0;
  height: 320vh;
  background: var(--olive);
  padding-inline: 0 !important;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  overflow: clip;
  /* o pin é full-bleed: escapa do max-width de `main > section > *`,
     senão o vídeo ganha barras laterais do campo oliva */
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.hero__scene {
  position: absolute; inset: 0;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--olive-deep);
}
/* scrim tingido de oliva (nunca preto puro) — opacidade cai conforme o
   vídeo escurece; valor-base cobre o caso sem JS/reduced-motion (frame claro). */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(35, 33, 14, 0.8) 0%, rgba(35, 33, 14, 0.56) 20%, rgba(35, 33, 14, 0.5) 50%, rgba(35, 33, 14, 0.58) 80%, rgba(35, 33, 14, 0.8) 100%),
    var(--olive-deep);
  opacity: 0.5;
}
/* banda fixa (não amarrada ao hp) que garante a legibilidade dos metadados
   do topo mesmo quando o vídeo, ali, está estourado de claro (janela/céu) */
.hero__scrim-top {
  position: absolute; inset: 0 0 auto 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(20, 19, 8, 0.7) 0%, rgba(20, 19, 8, 0.52) 45%, rgba(20, 19, 8, 0.04) 100%);
}

.hero__frame {
  position: relative; z-index: 2;
  width: 100%;
  max-width: none !important;
  height: 100%;
  display: flex; flex-direction: column;
  padding: calc(var(--top-h) + 16px) var(--pad) 96px;
}

.hero__meta {
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 12.5px; font-weight: 480;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 10px rgba(20, 19, 8, 0.4);
}
.hero__coords { text-wrap: nowrap; }
/* as coordenadas completas não cabem na mesma régua da localidade num
   telefone; empilhar preserva as duas em vez de quebrar as duas */
@media (max-width: 700px) {
  .hero__meta { flex-direction: column; gap: 4px; }
  /* "Clínica de Dermatologia..." em UMA linha: 12,5px quebrava em duas */
  .hero__meta span { text-wrap: nowrap; font-size: clamp(9px, 3vw, 12.5px); }
}

/* ticks de progresso verticais, à esquerda, centrados no pin inteiro */
.hero__ticks {
  position: absolute;
  left: var(--pad);
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: flex; flex-direction: column; gap: 11px;
}
.hero__tick {
  width: 2px; height: 12px;
  background: rgba(242, 241, 235, 0.4);
  transition: background-color 0.4s ease, height 0.4s ease;
}
.hero__tick.is-active { background: var(--bone); height: 22px; }

@media (max-width: 900px) {
  .hero__ticks { left: 16px; }
}

.hero__phrases {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: clamp(48px, 9vw, 130px);
}
.hero__phrase {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(20, 19, 8, 0.35);
  opacity: 0;
}
/* sem JS: a primeira frase fica legível e estática */
.hero__phrase:first-of-type { opacity: 1; }

/* Sem motor (no-js, reduced-motion ou boot-failed) as três frases eram
   empilhadas em `grid-area: 1/1` e só a primeira recebia opacidade 1 — as
   outras duas nunca chegavam ao leitor. Aqui elas saem do empilhamento e
   viram um bloco de três linhas, que é a leitura correta quando não há
   dissolução para diferenciá-las. */
html:not(.js) .hero__phrases,
html.reduced .hero__phrases,
html.boot-failed .hero__phrases {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 26px);
}
html:not(.js) .hero__phrase,
html.reduced .hero__phrase,
html.boot-failed .hero__phrase {
  grid-area: auto;
  opacity: 1;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
}

@keyframes dotDrop {
  0% { transform: translateY(-3px); opacity: 0; }
  35% { transform: translateY(0); opacity: 1; }
  75%, 100% { transform: translateY(3px); opacity: 0; }
}

/* entrada do hero — CSS puro */
@media (prefers-reduced-motion: no-preference) {
  .hero__meta, .hero__phrases, .hero__ticks {
    transition: opacity 0.5s ease;
    animation: heroIn 1.1s var(--ease-out) both;
  }
  .hero__meta { animation-delay: 0.15s; }
  .hero__phrases { animation-delay: 0.3s; }
  .hero__ticks { animation-delay: 0.5s; }
  /* fill: backwards (não both) — depois de entrar, o JS assume a opacidade
     via inline style para escondê-lo ao rolar; "both" travaria em opacity:1 */
  .hero__scene { animation: sceneIn 2s var(--ease-out) 0.4s both; }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes sceneIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
}

/* ---------- 9. A clínica / manifesto — campo oliva, ramos desenhados atrás -- */
/* Verbo dominante: acender (o manifesto entra palavra a palavra). Os ramos
   são uma segunda camada de "desenhar" amarrada ao mesmo scrub, mas ficam
   atrás, em traço fraco — não competem com o texto. */

/* #clinica virou campo oliva: o cabeçalho de seção precisa do par bone */
#clinica .sec-head::after { background: rgba(242, 241, 235, 0.22); }
#clinica .sec-head__mark { opacity: 0.92; }
/* 0,78 de alfa sobre oliva media 3,29:1 — abaixo do mínimo para 14px */
#clinica .sec-head__label { color: var(--bone); }


/* credo: a batida de respiro vem de escala + deslocamento + vazio,
   não mais de uma banda invertida (era uma lâmina inteira só para isso) */

/* fechamento volta ao eixo (o texto disperso em três alinhamentos era a queixa)
   e sobe para Marcellus — vira a linha de assinatura da lâmina */

/* ---------- 11. Cuidados ------------------------------------------------------ */

.cuidados__head {
  display: block;
  margin-bottom: clamp(40px, 6vh, 70px);
}

/* anatomia Webisoft /services: linha fechada [índice][palavra][metadado][+],
   painel aberto inverte o campo (banda oliva full-bleed, texto bone). */
.cui {
  display: grid;
  border-top: 1px solid rgba(45, 38, 35, 0.12);
  margin-bottom: 0;
}
.cui__item {
  border-bottom: 1px solid rgba(45, 38, 35, 0.12);
  /* corpo abaixo da faixa: é ele que dá o curso de scroll entre um pin e o
     seguinte (sem isso, duas linhas grudam no mesmo instante) e que, sendo
     opaco, cobre o item anterior ao subir — a mecânica do Webisoft */
  padding-bottom: clamp(80px, 11vh, 140px);
  /* pilha: cada linha gruda um degrau abaixo da anterior e o item seguinte,
     opaco, desliza por cima — deixando só a faixa-título acumulada no topo */
  position: sticky;
  background: var(--bone);
}
.cui__item:nth-child(1) { top: 0; }
.cui__item:nth-child(2) { top: var(--cui-row); }
.cui__item:nth-child(3) { top: calc(var(--cui-row) * 2); }
.cui__item:nth-child(4) { top: calc(var(--cui-row) * 3); }
/* sem z-index no aberto: o item seguinte (posterior no DOM) precisa cobrir
   o painel ao subir — é isso que acumula as faixas no topo (idioma Webisoft) */
/* pista: sticky para de grudar quando o fundo do container passa. Sem folga,
   os últimos itens não chegam a acumular no topo. 2,5 linhas dão o curso. */
/* pista da pilha: sticky é clampado pelo fundo do container. Para as faixas
   ficarem acumuladas por um trecho de leitura (e não colapsarem), o container
   precisa continuar bem abaixo da janela.
   BUG: o comentário original pedia ~7 linhas de folga e o código tinha 2. Com
   148px de curso, C/02 e C/03 travavam por menos de meia rolagem e soltavam
   as três juntas — lia como "não trava". */
.cui { padding-bottom: 0; }
/* E a folga precisa ser CONTEÚDO, não padding: o bloco que contém um elemento
   sticky é o content box do pai, então padding-bottom no `.cui` não estendia
   curso nenhum — era por isso que aumentar de 2 para 7 linhas não mudava nada.
   Um pseudo-elemento é uma caixa filha de verdade e estende o content box. */
.cui::after { content: ''; display: block; height: calc(var(--cui-row) * 9); }

/* ≤640px a pilha comeria o viewport inteiro — volta ao fluxo normal */
/* o mobile usa a MESMA pilha sticky do desktop: a versão `position: static`
   deixava as faixas soltas na rolagem — pedido explícito do cliente */

.cui__row {
  display: grid;
  grid-template-columns: var(--cui-idx-w) 1fr auto auto;
  align-items: center;
  column-gap: var(--cui-gap);
  min-height: 74px;
  padding-block: 14px;
  cursor: pointer;
  list-style: none;
}
.cui__row::-webkit-details-marker { display: none; }

.cui__index {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  /* --olive-light (#8d864f) mede 3,28:1 sobre bone: serve para texto grande,
     não para 12px. --mauve-ink é o token calibrado (5,17:1). */
  color: var(--mauve-ink);
}
.cui__word {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: opacity 0.3s ease;
}
.cui__row:hover .cui__word { opacity: 0.72; }
.cui__meta {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mauve-ink);
  text-align: right;
  white-space: nowrap;
}
.cui__plus {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.cui__plus::before, .cui__plus::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  background: var(--stone);
}
.cui__plus::before { width: 16px; height: 1.5px; }
.cui__plus::after { width: 1.5px; height: 16px; }
/* o + gira 45° inteiro (não só um traço) — vira × de verdade */
/* o giro do "+" segue o progresso do scrub (definido em JS), não [open] */
.cui__plus { transform: rotate(calc(45deg * var(--cui-p, 1))); }

/* painel: inverte o campo — banda oliva full-bleed, texto bone */
/* full-bleed: só margem negativa. `width:100vw` junto do max-width herdado
   de `main > section > *` deslocava o conteúdo para a borda do viewport. */
.cui {
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}
.cui__row { padding-inline: var(--pad); }
/* Os quatro painéis chegam ABERTOS e encolhem conforme a lâmina rola.
   A altura é escrubada pelo rAF (initCuidados), então o painel precisa ser
   uma caixa recortável — sem `overflow: hidden` o conteúdo vazaria para fora
   enquanto a altura cai. */
.cui__panel {
  overflow: hidden;
  /* full-bleed: escapa do max-width do container centrado (mesma fórmula
     do credo), mas com overflow-x:clip no html como rede de segurança */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.cui__panel-in {
  max-width: calc(var(--content-w) + 2 * var(--pad));
  margin-inline: auto;
  padding: clamp(28px, 5vh, 52px) var(--pad) clamp(28px, 5vh, 52px)
           calc(var(--pad) + var(--cui-idx-w) + var(--cui-gap));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
}
.cui__desc {
  max-width: 420px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
}
.cui__pict {
  width: clamp(72px, 9vw, 120px);
  height: clamp(72px, 9vw, 120px);
  flex-shrink: 0;
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  /* nada de animação de entrada: a altura é contínua, amarrada ao scroll */
}
@media (prefers-reduced-motion: reduce) {
  .cui__item[open] .cui__panel { animation: none; }
}

@media (max-width: 640px) {
  .cui__row {
    grid-template-columns: auto 1fr auto;
    row-gap: 4px;
  }
  .cui__meta {
    grid-column: 1 / -1;
    text-align: left;
    order: 3;
  }
  .cui__panel-in { padding-inline: var(--pad); flex-direction: column; align-items: flex-start; gap: 24px; }
  .cui__pict { align-self: center; }
}

/* ---------- 11b. Tecnologias — mesma gramática de linha, sem expansão ------- */


.tecnologias .sec-title { max-width: 18ch; }

/* ---------- 12. Médicas -------------------------------------------------------- */

.medicas .sec-title { margin-bottom: clamp(44px, 7vh, 80px); }

/* título em escada (Zipline): duas linhas, a segunda deslocada à direita */

.doc-grid {
  display: grid;
  max-width: 980px;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(70px, 11vh, 120px);
}
@media (min-width: 800px) {
  .doc-grid { grid-template-columns: 1fr 1fr; transition: grid-template-columns 0.75s var(--ease-out); }
  .doc-grid.focus-0 { grid-template-columns: 1fr 0fr; gap: 0; }
  .doc-grid.focus-1 { grid-template-columns: 0fr 1fr; gap: 0; }
}

.doc { min-width: 0; transition: opacity 0.5s ease; }
/* `opacity:0` + `pointer-events:none` tirava o cartão da vista mas não do
   caminho do teclado: sobravam três paradas de foco em controles invisíveis,
   com o anel de foco desenhado fora da tela. O atributo `inert` (aplicado em
   initDocs) é o que realmente os remove da ordem de tabulação. */
.doc.is-away {
  opacity: 0;
  pointer-events: none;
  /* e sai da ALTURA da grade também: colapsado para 0 de largura, o texto do
     cartão quebrava em uma palavra por linha e virava uma torre de ~1.100px
     que esticava a linha inteira — sobravam 511px de vazio sob o cartão aberto */
  max-height: 0;
  overflow: hidden;
}
@media (max-width: 799px) {
  /* no celular a classe nem chega a ser aplicada (ver initDocs) — a outra
     médica permanece na página com o dossiê do vizinho aberto */
}

/* foto clicável */
.doc__open {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
}
.doc__frame {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;   /* proporção nativa das duas fotos: nada é cortado */
  overflow: hidden;
  border-radius: var(--r-frame);
  /* a foto ocupa o card inteiro — a banda ink em volta saiu */
  background: none;
  padding: 0;
}
.doc__open:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; border-radius: var(--r-frame); }

/* Retrato retangular, foto inteira.
   O recorte oval do selo com anel duplo por cima saiu: o cliente prefere o
   enquadramento reto. As duas fotos são exatamente 2:3 (1066×1600 e
   1333×2000), então a moldura nessa proporção mostra a imagem COMPLETA — sem
   corte nenhum, que era o outro pedido. */
.doc__mask {
  position: relative;
  display: block;
  width: 100%; height: 100%;
}
.doc__mask picture {
  display: block; width: 100%; height: 100%;
}
.doc__mask picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: scale 0.7s var(--ease-out);
}
.doc__open:hover .doc__mask picture img { scale: 1.04; }

/* placeholder (Drª. Heloísa): mesma janela oval, preenchida em cor de marca até o retrato chegar */


.doc:hover .doc__crm {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--mauve-ink);
}

/* nome/CRM à esquerda, controles à direita, na MESMA linha: empilhados,
   eles custavam ~62px de altura por cartão sem acrescentar informação */
.doc__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 28px);
}
/* no telefone estreito a linha do CRM quebrava em duas: a folga entre o nome
   e os controles é que faltava, não o espaço do texto */
.doc__id { min-width: 0; }
.doc__crm { text-wrap: nowrap; }
.doc__links { display: flex; gap: 8px; flex-shrink: 0; }
@media (min-width: 480px) { .doc__links { gap: 12px; } }
.doc__chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 11px 19px;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.doc__chip:hover { background: var(--olive); border-color: var(--olive); color: var(--bone); }

/* dossiê */
.doc.is-open {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
}
@media (min-width: 800px) {
  .doc.is-open {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    /* as faixas se empacotam no topo: com o retrato em 2:3 ele fica mais alto
       que info+dossiê, e sem isso a sobra era distribuída ENTRE as duas —
       abrindo um vão de ~290px no meio da coluna de texto */
    grid-template-rows: max-content max-content;
    align-content: start;
    align-items: start;
  }
  .doc.is-open .doc__open { grid-row: 1 / 3; align-self: start; }
  .doc.is-open .doc__info { grid-column: 2; padding-top: 0; }
  .doc.is-open .doc__bio { margin-top: 0; }
  .doc.is-open .doc__dossier { grid-column: 2; }
}

.doc__dossier {
  position: relative;
  margin-top: 22px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
html.js:not(.reduced) .doc__dossier:not([hidden]) { animation: dossierIn 0.6s var(--ease-out); }
@keyframes dossierIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}


.doc__bio {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--stone);
  max-width: 46ch;
  text-wrap: pretty;
}
.doc__cv {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.doc__cv em { font-style: italic; }
.doc__cv li {
  position: relative;
  max-width: 52ch;      /* sem isso a lista encostava na borda direita do cartão */
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.doc__cv li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 14px; height: 1px;
  background: var(--olive);
}
.doc__cta { margin-top: 26px; }

/* ---------- 13. Contato --------------------------------------------------------- */

.contato__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: start;
  padding-bottom: clamp(90px, 14vh, 160px);
}

.contato__info address {
  margin-top: 26px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--stone);
}
.contato__hours {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mauve-ink);
}
/* telefone é o canal principal — presença tipográfica forte */
/* o telefone não tem mais voz própria: o cliente quer o número IDÊNTICO ao
   @ do Instagram — a regra `.contato__cell a` estiliza os dois. O que sobrava
   aqui (peso 500, tabular-nums, tracking apertado, sublinhado oliva) era a
   diferença que ele notou. */

/* .contato__actions e .contato__trio: a definição válida está adiante,
   na seção "Contato: o telefone ancora a grade de canais". */
.contato__cell { display: grid; gap: 8px; min-width: 0; }
.contato__label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mauve-ink);
}
.contato__cell a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px;
  color: var(--ink);
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  overflow-wrap: break-word;
  transition: color 0.25s ease;
  /* alvo de toque ≥44px sem empurrar o layout visual */
  padding-block: 11px;
  margin-block: -11px;
}
.contato__cell a:hover { color: var(--olive); }

@media (max-width: 560px) {
  .contato__trio { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 760px) {
  .cuidados__head, .tecnologias__head, .contato__grid { grid-template-columns: 1fr; }
}

/* ---------- 14. Footer (Jeton: wordmark chapado sobre campo claro) ------------ */

.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--bone);
  padding: 0 var(--pad) 120px;
}

.footer__rule {
  max-width: var(--content-w);
  margin-inline: auto;
  height: 1px;
  background: var(--hairline);
}

.footer__credits {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-top: 34px;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--stone);
}

.footer__wm {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-top: clamp(40px, 7vh, 80px);
  display: flex;
}
.footer__wm img { width: 100%; }

/* ---------- 15. Reveals (IO + transição CSS; conteúdo visível por padrão) ----- */

.reveal, .bigwords__row { will-change: transform, opacity; }
.doc__frame picture img { will-change: transform; }

/* ---------- 16. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* barra superior se recolhe ao rolar para baixo */
.top {
  transition: transform 0.45s var(--ease-out);
}
.top.is-hidden { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  .top { transition: none; }
}

/* =========================================================================
   v4.1 — Tecnologias: a moldura parada (modelo Hervé Baillargeon)
   Cuidados é "expandir" (linhas que abrem ao clique). Aqui o verbo é
   "escorrer dentro da moldura": uma janela fixa, o conteúdo passando por
   dentro no scroll. Gramáticas opostas — as duas lâminas não se confundem.
   ========================================================================= */

.tec { display: grid; gap: clamp(40px, 6vh, 64px); padding-bottom: clamp(70px, 11vh, 120px); }
.tec__pin { display: grid; gap: clamp(40px, 6vh, 64px); }

.tec__item { margin: 0; }

.tec__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-frame);
  min-height: clamp(280px, 44vh, 420px);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 40px) 0;
  display: grid;
  align-content: center;
  /* minimalista: sem campo de cor — canvas puro, traço e letra em ink */
  background: none;
  color: var(--ink);
  border-radius: 0;
  padding-inline: 0;
}

/* o floral do guia como marca d'água — textura da marca, não desenho de máquina */
.tec__etch {
  position: absolute;
  right: -6%; bottom: -12%;
  width: clamp(180px, 26vw, 320px);
  opacity: 0.14;
  pointer-events: none;
}

.tec__desc {
  position: relative;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  max-width: 52ch;
  text-wrap: pretty;
}

.tec__caption {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  margin-top: 18px;
}
.tec__index {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mauve-ink);
  font-variant-numeric: tabular-nums;
}
.tec__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--ink);
}

/* modo JS: as quatro molduras coincidem e viram UMA janela sticky */
html.js:not(.reduced):not(.boot-failed) .tec {
  /* 300vh custava 2.961px de rolagem para quatro parágrafos curtos. Com as
     janelas cruzadas não há mais tela vazia para preencher, então o curso
     encolhe: 240vh dá ~35vh de leitura por tecnologia. */
  height: 240vh;
  display: block;
  padding-bottom: 0;
}
html.js:not(.reduced):not(.boot-failed) .tec__pin {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  place-content: center;
  align-content: center;
  gap: 0;
}
html.js:not(.reduced):not(.boot-failed) .tec__item {
  grid-area: 1 / 1;
  width: min(1240px, calc(100vw - 2 * var(--pad)));
}


/* chip só-ícone (Instagram) e chip "Currículo +" (a affordance que o
   botão "Perfil" sobre a foto costumava carregar, agora na linha de
   metadados, onde o olho já está lendo nome e CRM) */
.doc__chip--ico {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
}
/* só o "+", como o cliente pediu — o clique na foto é a outra porta de
   entrada para o currículo, então o botão não precisa carregar o rótulo */
.doc__chip--cv {
  font-family: var(--font-body);
  cursor: pointer;
  background: none;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
}
.doc__plus {
  position: relative;
  width: 11px; height: 11px;
  display: inline-block;
  margin-left: 2px;
}
.doc__plus::before, .doc__plus::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.doc__plus::before { width: 11px; height: 1.3px; }
.doc__plus::after { width: 1.3px; height: 11px; }
.doc__chip--cv[aria-expanded="true"] .doc__plus::before { transform: rotate(45deg); }
.doc__chip--cv[aria-expanded="true"] .doc__plus::after { transform: rotate(45deg); }

/* ---- Contato: o telefone ancora a grade de canais ---- */

.contato__cell--phone { padding-bottom: clamp(20px, 3vh, 30px); }

/* ---- Tecnologias: modelo 3D em hidden-line dentro da moldura ---- */

.tec__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* com JS o modelo substitui o floral de fallback */
html.js:not(.boot-failed) .tec__etch { display: none; }

/* o caption agora vive DENTRO da moldura: participa do crossfade da figure
   (fora dela, sobrepunham-se em fantasma entre uma tecnologia e outra) */
.tec__frame { position: relative; }
.tec__caption {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 0 16px;
}
.tec__caption .tec__index { display: block; margin-bottom: 6px; }
.tec__caption .tec__name { display: block; color: inherit; }
.tec__desc { position: relative; z-index: 2; max-width: 34ch; font-size: clamp(1rem, 1.25vw, 1.12rem); }
.tec__frame { max-width: none; min-height: clamp(430px, 66vh, 620px); }

@media (max-width: 760px) {
  /* no retrato a moldura vira coluna: faixa do modelo em cima, texto embaixo */
  .tec__frame {
    min-height: clamp(520px, 78vh, 620px);
    padding-top: calc(clamp(520px, 78vh, 620px) * 0.42);
  }
  .tec__canvas { height: 42%; bottom: auto; }
}

/* ---- v4.2: nome das médicas em Marcellus (herdava o bold default do h3) ---- */
.doc__info h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}

/* uma linha também nos títulos longos: encolhe antes de quebrar */
.contato .sec-title { font-size: clamp(1.45rem, 2.9vw, 2.5rem); }

/* =========================================================================
   A clínica — o manifesto inteiro, tipografado sobre o campo oliva, cabendo
   numa tela só. O corpo é travado por `min(vw, vh)`: em telas baixas o texto
   encolhe junto, em vez de transbordar e obrigar a rolagem.
   ========================================================================= */

.manifesto {
  flex: 1 0 auto;            /* cresce para centrar; nunca encolhe abaixo do texto
                                — numa tela baixíssima a lâmina passa de 100svh
                                em vez de cortar o manifesto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6em;                /* maior que a entrelinha: sem isso as frases viram um bloco só */
  position: relative;
  z-index: 1;
  max-width: 38ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.3rem, min(2.45vw, 3.8vh), 2.5rem);
  /* o rodapé reserva a faixa do dock flutuante — sem isso o último parágrafo
     encosta no vidro em telas baixas */
  padding-block: clamp(24px, 4vh, 52px) clamp(84px, 11vh, 118px);
}

.mf__line {
  font-family: var(--font-display);
  font-size: 1em;
  line-height: 1.6;
  color: var(--bone);
  text-wrap: pretty;
}
.mf__line em { font-style: italic; }

@media (max-width: 860px) {
  .manifesto {
    max-width: none;
    gap: 1.5em;
    font-size: clamp(1.2rem, 4.8vw, 1.5rem);
    padding-block: clamp(28px, 5vh, 48px) clamp(96px, 14vh, 140px);
  }
  /* no retrato o texto ocupa a largura toda: os ramos não têm margem para
     onde fugir, então recuam de opacidade em vez de posição */
  .clinica__branches .branch-inst { opacity: 0.15; }
}

/* Contato — os quatro canais numa grade única, com o telefone na mesma régua */
.contato__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vh, 38px) clamp(24px, 4vw, 56px);
  align-content: start;
  padding-top: 4px;
}
/* Duas colunas de duas, sem buraco.
   Antes: telefone ocupava a linha inteira, e-mail e como-chegar dividiam a
   linha 2 e o Instagram era forçado a `grid-column: 2` na linha 3 — deixando
   a célula linha-3/coluna-1 visivelmente vazia. Agora cada coluna carrega
   duas células e o Instagram cai exatamente sob "Como chegar", que era o
   pedido, sem sobrar vão. */
.contato__cell--phone { grid-column: 1; grid-row: 1; padding-bottom: 0; }
.contato__trio {
  display: contents;   /* as células entram na mesma grade do telefone */
}
.contato__trio .contato__cell:nth-child(1) { grid-column: 1; grid-row: 2; }  /* e-mail */
.contato__trio .contato__cell:nth-child(2) { grid-column: 2; grid-row: 1; }  /* como chegar */
.contato__cell--insta { grid-column: 2; grid-row: 2; }
.contato__label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mauve-ink);
  margin-bottom: 6px;
}
.contato__cell a { font-size: 15.5px; }
@media (max-width: 560px) {
  .contato__actions { grid-template-columns: 1fr; }
}

/* o título vive dentro do pin: fica presente enquanto as tecnologias passam */
.tec__title {
  grid-area: 2 / 1;
  align-self: start;
  margin: 0 0 clamp(16px, 3vh, 40px);
  position: relative;
  z-index: 3;
}
html.js:not(.reduced):not(.boot-failed) .tec__pin {
  align-content: center;
  justify-items: stretch;
}
html.js:not(.reduced):not(.boot-failed) .tec__title {
  grid-area: auto;
  align-self: auto;
}
/* o pin tem três faixas: rótulo, título e a janela por onde as tecnologias
   passam. As duas primeiras ficam presentes o curso inteiro. */
html.js:not(.reduced):not(.boot-failed) .tec__pin { grid-template-rows: auto auto 1fr; }
html.js:not(.reduced):not(.boot-failed) .tec__item { grid-row: 3; grid-column: 1; }
html.js:not(.reduced):not(.boot-failed) .sec-head--pinned { grid-row: 1; }
html.js:not(.reduced):not(.boot-failed) .tec__title { grid-row: 2; }

/* Médicas: mais respiro entre a foto e o nome */
.doc__info { padding-top: clamp(22px, 3vh, 40px); }

/* uma coluna no retrato: a ordem do DOM manda, sem posicionamento explícito */
@media (max-width: 560px) {
  .contato__cell--phone,
  .contato__trio .contato__cell:nth-child(1),
  .contato__trio .contato__cell:nth-child(2),
  .contato__cell--insta { grid-column: 1; grid-row: auto; }
}

/* cabeçalho de seção dentro do pin: sem o respiro de topo que ele usa quando
   abre uma lâmina, e sem o selo (o canto superior esquerdo fica limpo) */
/* o pin encosta no topo do viewport; o rótulo precisa passar por baixo da
   barra fixa sem colar na borda */
.sec-head--pinned {
  padding-top: calc(var(--top-h) + clamp(8px, 2vh, 24px));
  margin-bottom: clamp(10px, 1.6vh, 18px);
  grid-area: 1 / 1;
}