/* ============================================================
   Dr. Lucas Mostardeiro — "A Consulta das Nove"
   O site é uma consulta transcrita: 9:00 → 9:57.
   Papel · Tinta · Azul-marinho · Bronze.
   ============================================================ */

:root {
  --papel:        #f5f1e8;   /* papel de receituário */
  --papel-claro:  #fbf8f1;
  --tinta:        #161d30;   /* azul-marinho profundo (da marca LM) */
  --tinta-2:      #1f2742;
  --negatoscopio: #0b0d13;   /* sala com a luz apagada */
  --azul:    #44597e;   /* azul-aço — voz da técnica ultrassônica */
  --bronze:       #a8763e;   /* detalhe precioso e raro */
  --bronze-forte: #8c5f2e;   /* bronze AA sobre papel */
  --bronze-claro: #c99a5b;   /* bronze sobre fundos escuros */
  --grafite:      #6e675c;   /* metadados sobre papel */
  --hairline:     rgba(22, 29, 48, .18);
  --hairline-dim: rgba(22, 29, 48, .09);
  --hairline-luz: rgba(245, 241, 232, .18);

  --ff-serif: "Fraunces", Georgia, serif;       /* voz do paciente + títulos */
  --ff-sans:  "Hanken Grotesk", system-ui, sans-serif;  /* voz do médico + UI */
  --ff-mono:  "Spline Sans Mono", ui-monospace, monospace; /* relógio + prontuário */

  --maxw: 1180px;
  --pad: clamp(1.4rem, 4vw, 4rem);
  --ease: cubic-bezier(.23, .62, .22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-sans);
  font-weight: 340;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.62;
  font-size: 1.04rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; } /* os atributos width/height do HTML não podem travar a altura */
a { color: inherit; }
em { font-style: italic; }
::selection { background: var(--tinta); color: var(--papel); }

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

.skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--tinta); color: var(--papel); padding: .6rem 1.1rem; text-decoration: none; font-family: var(--ff-mono); font-size: .8rem; }
.skip:focus { left: .6rem; top: .6rem; }

.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;
}

/* botões que dependem de JS ficam ocultos sem ele */
html:not(.js) .chrome__index, html:not(.js) .mapa__carregar { display: none; }

/* rótulos mono reutilizáveis */
.mono, .momento__hora, .clock, .chrome__index {
  font-family: var(--ff-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ============================================================
   CHROME FIXO — monograma, relógio, índice
   A cor segue a seção sob a barra (JS alterna .chrome--tinta):
   claro sobre seções escuras, marinho sobre seções claras.
   ============================================================ */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1.2rem, 3vw, 2.2rem);
  pointer-events: none;
  color: var(--papel);
  text-shadow: 0 1px 14px rgba(8, 10, 18, .4);
  transition: color .35s var(--ease);
}
.chrome--tinta { color: var(--tinta); text-shadow: none; }
.chrome__brand, .clock, .chrome__index { color: inherit; pointer-events: auto; }
.chrome__brand {
  font-family: var(--ff-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em;
  text-decoration: none; line-height: 1;
}
.chrome__brand i { font-style: italic; }
.chrome__right { display: flex; align-items: center; gap: 1.4rem; }
.clock { font-size: .72rem; font-weight: 500; }
.chrome__index {
  position: relative;
  font-size: .66rem; font-weight: 500; background: none; cursor: pointer;
  border: 1px solid currentColor; padding: .42rem .85rem; border-radius: 100px;
  color: inherit;
  transition: letter-spacing .3s var(--ease), color .35s var(--ease);
}
/* área de toque ≥44px sem engordar o visual */
.chrome__index::after { content: ""; position: absolute; inset: -8px -6px; }
.chrome__index:hover { letter-spacing: .3em; }

/* ============================================================
   ÍNDICE DA CONSULTA — overlay
   ============================================================ */
.index {
  position: fixed; inset: 0; z-index: 200;
  background: var(--tinta); color: var(--papel);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  gap: 2rem; padding: 4rem var(--pad);
  overflow-y: auto; /* telas baixas: rola em vez de cortar */
}
.index[hidden] { display: none; }
.index__title { margin-top: auto; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-claro); }
.index__list { list-style: none; display: grid; gap: .2rem; text-align: center; }
.index__list a {
  display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; min-height: 44px;
  font-family: var(--ff-serif); font-weight: 300; font-size: clamp(1.2rem, 3.2vh, 1.7rem);
  padding: .1rem .6rem; transition: color .3s;
}
.index__list a span { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; color: var(--bronze-claro); }
.index__list a:hover { color: var(--bronze-claro); }
.index__cta {
  margin-bottom: auto; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--papel); text-decoration: none; border-bottom: 1px solid var(--bronze-claro);
  transition: color .3s;
}
.index__cta:hover { color: var(--bronze-claro); }
.index__close {
  position: absolute; top: 1.1rem; right: clamp(1.2rem, 3vw, 2.2rem);
  background: none; border: 0; color: var(--papel); font-size: 2rem; line-height: 1;
  cursor: pointer; padding: .4rem .7rem;
}
.index__close:hover { color: var(--bronze-claro); }

/* ============================================================
   9:00 · HERO — "Pode entrar"
   >>> A foto de fundo é definida em --hero-img, logo abaixo.
   ============================================================ */
.hero {
  /* >>> PARA TROCAR PELA SUA FOTO: substitua o arquivo na linha abaixo <<< */
  --hero-img: url("assets/img/hero-dr-lucas.webp");
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6.5rem var(--pad) 1.6rem;
  color: var(--papel);
  background-color: var(--tinta);
  background-image:
    linear-gradient(200deg, rgba(22,29,48,.42) 0%, rgba(22,29,48,.6) 58%, rgba(11,13,19,.92) 100%),
    var(--hero-img, radial-gradient(120% 90% at 78% 12%, #2b3552 0%, var(--tinta) 55%, #10141f 100%));
  background-size: cover;
  background-position: center 28%;
}
.hero__body { max-width: var(--maxw); width: 100%; margin-inline: auto; }
.hero__kicker {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--bronze-claro); margin-bottom: 1.4rem;
}
.hero__title {
  font-family: var(--ff-serif); font-weight: 330; line-height: 1.02; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  max-width: 16ch; margin-bottom: 1.5rem;
}
.hero__title em { color: var(--bronze-claro); }
.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 330;
  color: rgba(245,241,232,.85); max-width: 44ch; margin-bottom: 2.2rem;
}
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--papel); color: var(--tinta);
  font-family: var(--ff-sans); font-weight: 560; font-size: .98rem; text-decoration: none;
  padding: 1.02rem 1.9rem; border-radius: 100px;
  transition: transform .35s var(--ease), background .35s, color .35s;
}
.btn:hover { transform: translateY(-3px); background: var(--bronze); color: #fff; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }

.hero__plate {
  max-width: var(--maxw); width: 100%; margin: 3rem auto 0;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  border-top: 1px solid var(--hairline-luz); padding-top: 1.1rem;
  font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,.62);
}
.hero__plate span:first-child { color: var(--papel); }

.hero__scroll {
  max-width: var(--maxw); width: 100%; margin: 1.6rem auto 0;
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,241,232,.5); display: flex; align-items: center; gap: .9rem;
}
.hero__scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--bronze-claro), transparent); animation: descer 2.2s var(--ease) infinite; }
@keyframes descer { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   ESTRUTURA DOS MOMENTOS (seções da consulta)
   ============================================================ */
.momento { max-width: var(--maxw); margin-inline: auto; padding: clamp(5rem, 11vw, 8.5rem) var(--pad) clamp(3rem, 7vw, 5.5rem); }
.momento__head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.momento__hora {
  font-size: .7rem; font-weight: 500; color: var(--bronze-forte);
  display: inline-block; border-top: 1px solid var(--bronze); padding-top: .55rem; margin-bottom: 1.3rem;
}
.voz-paciente {
  font-family: var(--ff-serif); font-style: italic; font-weight: 320;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: -.015em;
  color: var(--tinta);
}
.momento__head--escuro .momento__hora { color: var(--bronze-claro); border-color: var(--bronze-claro); }
.momento__head--escuro .voz-paciente { color: var(--papel); }

/* ============================================================
   9:04 · TRANSCRIÇÃO + FICHA
   ============================================================ */
.transcricao { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.transcricao__fala p { max-width: 56ch; margin-bottom: 1.3rem; font-size: 1.08rem; }
.transcricao__fala strong { font-weight: 580; }

.ficha { border-left: 1px solid var(--hairline); padding-left: clamp(1.2rem, 2.5vw, 2rem); }
.ficha__rotulo { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--grafite); margin-bottom: 1.2rem; }
.ficha__lista { display: grid; }
.ficha__item { padding: .8rem 0; border-bottom: 1px solid var(--hairline-dim); }
.ficha__item dt { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grafite); }
.ficha__item dd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 460; font-size: .98rem; }
.ficha__item .check { width: 17px; height: 15px; flex: none; }
.check path { stroke: var(--azul); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) .15s; }
.ficha__item.is-in .check path { stroke-dashoffset: 0; }

/* ============================================================
   9:14 · O EXAME — desenho + comparação
   ============================================================ */
.exame__intro { font-size: 1.12rem; max-width: 48ch; margin-bottom: 2.4rem; }
.exame__radio { position: absolute; opacity: 0; pointer-events: none; }
.exame__tabs { display: inline-flex; border: 1px solid var(--hairline); border-radius: 100px; padding: .3rem; gap: .3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.exame__tabs label {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 0 1.25rem; border-radius: 100px; cursor: pointer; color: var(--grafite);
  transition: background .3s, color .3s;
}
#t-conv:checked ~ .exame__tabs label[for="t-conv"],
#t-ultra:checked ~ .exame__tabs label[for="t-ultra"] { background: var(--tinta); color: var(--papel); }
#t-conv:focus-visible ~ .exame__tabs label[for="t-conv"],
#t-ultra:focus-visible ~ .exame__tabs label[for="t-ultra"] { outline: 2px solid var(--bronze); outline-offset: 3px; }

.exame__mesa {
  display: grid; grid-template-columns: 1fr minmax(200px, 280px) 1fr;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; justify-items: stretch;
  max-width: 980px;
}
.perfil { grid-column: 2; grid-row: 1 / span 6; }
.perfil svg { width: 100%; height: auto; }
.perfil__traco { stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.exame__mesa.is-in .perfil__traco { stroke-dashoffset: 0; }

.callouts { display: none; list-style: none; }
#t-conv:checked ~ .exame__mesa .callouts--conv { display: contents; }
#t-ultra:checked ~ .exame__mesa .callouts--ultra { display: contents; }
.callouts li {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.65; animation: callout .5s var(--ease) both;
}
.callouts li:nth-child(odd)  { grid-column: 1; text-align: right; justify-self: end; }
.callouts li:nth-child(even) { grid-column: 3; text-align: left; justify-self: start; }
.callouts li:nth-child(1) { grid-row: 1; animation-delay: .05s; }
.callouts li:nth-child(2) { grid-row: 2; animation-delay: .12s; }
.callouts li:nth-child(3) { grid-row: 3; animation-delay: .19s; }
.callouts li:nth-child(4) { grid-row: 4; animation-delay: .26s; }
.callouts li:nth-child(5) { grid-row: 5; animation-delay: .33s; }
.callouts li::after {
  content: ""; display: block; width: 42px; height: 1px; margin-top: .45rem;
  background: currentColor; opacity: .5;
}
.callouts li:nth-child(odd)::after { margin-left: auto; }
.callouts--conv li { color: var(--grafite); }
.callouts--ultra li { color: var(--azul); }
@keyframes callout { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.exame__fecho {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--ff-serif); font-style: italic; font-weight: 340;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--bronze-forte); max-width: 34ch;
}

/* ============================================================
   9:24 · O PLANO — folha timbrada
   ============================================================ */
.folha {
  background: var(--papel-claro); border: 1px solid var(--hairline-dim); border-radius: 4px;
  padding: clamp(1.8rem, 4.5vw, 3.5rem);
  box-shadow: 0 30px 60px -42px rgba(22, 29, 48, .45);
}
.folha__timbre {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bronze-forte); border-bottom: 1px solid var(--hairline); padding-bottom: 1.1rem;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.folha__timbre i { font-style: italic; }
.folha__etapas {
  list-style: none; display: grid;
  grid-template-areas: "e1 e2" "e3 e2" "e4 e2";
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.6rem, 3.5vw, 2.6rem) clamp(2rem, 5vw, 4rem);
}
.etapa:nth-child(1) { grid-area: e1; }
.etapa:nth-child(2) { grid-area: e2; }
.etapa:nth-child(3) { grid-area: e3; }
.etapa:nth-child(4) { grid-area: e4; }
.etapa { border-top: 1px solid var(--hairline); padding-top: 1.2rem; }
.etapa__no { font-family: var(--ff-serif); font-style: italic; font-weight: 320; font-size: 2rem; color: var(--bronze); display: block; line-height: 1; margin-bottom: .7rem; }
.etapa h3 { font-family: var(--ff-serif); font-weight: 430; font-size: 1.32rem; margin-bottom: .45rem; }
.etapa p { color: #3d4357; font-size: .99rem; max-width: 46ch; }
.etapa__foto { margin-top: 1.5rem; }
.etapa__foto img { width: 100%; border-radius: 3px; aspect-ratio: 4/4.6; object-fit: cover; }
.etapa__foto figcaption { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); margin-top: .8rem; }

/* ============================================================
   9:33 · PAUSA
   ============================================================ */
.pausa {
  background: var(--tinta); color: var(--papel);
  min-height: 86svh; display: grid; place-items: center;
  padding: clamp(5rem, 12vw, 9rem) var(--pad);
}
.pausa__quote { max-width: min(56rem, 100%); text-align: center; }
.pausa__quote p {
  font-family: var(--ff-serif); font-weight: 300; font-size: clamp(1.7rem, 4.4vw, 3.3rem);
  line-height: 1.22; letter-spacing: -.015em;
}
.pausa__quote em { color: var(--bronze-claro); }
.pausa__quote figcaption { margin-top: 2.4rem; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(245,241,232,.6); }

/* ============================================================
   9:38 · DO OUTRO LADO DA MESA
   ============================================================ */
.medico__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.medico__abre { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4; margin-bottom: 1.4rem; }
.medico__bio > p:not(.medico__abre):not(.medico__placa) { max-width: 54ch; margin-bottom: 1.2rem; font-size: 1.05rem; }
.medico__bio strong { font-weight: 570; }
.medico__placa {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grafite); border-block: 1px solid var(--hairline); padding: .9rem 0; margin: 1.8rem 0;
}
.medico__selos { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.selo { height: 58px; width: auto; opacity: 0; transform: scale(1.14) rotate(-3deg); }
.selo.is-in { animation: carimbo .42s var(--ease) forwards; }
.selo.is-in + .selo.is-in { animation-delay: .22s; }
@keyframes carimbo { 60% { opacity: 1; } 100% { opacity: .85; transform: none; } }

.medico__foto img {
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%;
  border-radius: 3px; filter: sepia(.06) saturate(1.04);
}

/* ============================================================
   9:43 · O NEGATOSCÓPIO
   ============================================================ */
.negatoscopio { background: var(--negatoscopio); color: var(--papel); padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.negatoscopio > * { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.negatoscopio__resposta, .vozes__resposta, .faq__resposta, .saida__resposta {
  font-size: 1.12rem; margin-top: -1.2rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.negatoscopio__resposta { color: rgba(245,241,232,.8); }

.negatoscopio__barra {
  height: 5px; border-radius: 100px; padding: 0;
  background: linear-gradient(90deg, transparent, rgba(245,241,232,.85) 18%, #fff 50%, rgba(245,241,232,.85) 82%, transparent);
  box-shadow: 0 6px 38px rgba(245, 241, 232, .35), 0 2px 12px rgba(245, 241, 232, .25);
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.negatoscopio__mesa { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); align-items: start; }
.prancha:nth-child(even) { transform: translateY(clamp(.8rem, 2.2vw, 1.8rem)); }
.prancha__zoom {
  display: block; width: 100%; background: #000; border: 1px solid rgba(245,241,232,.14);
  border-radius: 3px; padding: 0; cursor: zoom-in; overflow: hidden;
  transition: border-color .35s, transform .45s var(--ease);
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.85);
}
.prancha__zoom:hover { border-color: var(--bronze-claro); transform: translateY(-4px); }
.prancha__meia { position: relative; display: block; }
.prancha__meia + .prancha__meia { border-top: 1px solid rgba(245,241,232,.14); }
.prancha__meia img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.prancha__tag {
  position: absolute; top: .55rem; left: .55rem;
  font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,.85); background: rgba(11,13,19,.62); backdrop-filter: blur(2px);
  border: 1px solid rgba(245,241,232,.22); border-radius: 2px; padding: .28rem .5rem .24rem; line-height: 1;
}
.prancha__tag--depois { color: var(--bronze-claro); border-color: rgba(201,154,91,.55); }
.prancha figcaption {
  margin-top: 1rem; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,241,232,.6); display: flex; gap: .8rem; align-items: baseline;
}
.prancha figcaption span { color: var(--bronze-claro); }
.negatoscopio__hint { margin-top: 2rem; font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(245,241,232,.58); }
.negatoscopio__nota { margin-top: .9rem; font-size: .86rem; color: rgba(245,241,232,.6); max-width: 64ch; }

/* ============================================================
   9:48 · OUTRAS VOZES
   ============================================================ */
.vozes__resposta { color: var(--grafite); }
.vozes__lista { display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); }
.voz { max-width: 34rem; border-left: 1px solid var(--bronze); padding-left: clamp(1.2rem, 3vw, 2rem); }
.voz--dir { margin-left: auto; border-left: 0; border-right: 1px solid var(--bronze); padding-left: 0; padding-right: clamp(1.2rem, 3vw, 2rem); text-align: right; }
.voz p { font-family: var(--ff-serif); font-style: italic; font-weight: 340; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.42; }
.voz figcaption { margin-top: 1rem; font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grafite); }

/* ============================================================
   9:52 · FAQ
   ============================================================ */
.faq__resposta { color: var(--grafite); }
.faq__lista { border-top: 1px solid var(--hairline); max-width: 880px; }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1.4rem; padding: 1.45rem 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary span {
  font-family: var(--ff-serif); font-style: italic; font-weight: 350;
  font-size: clamp(1.12rem, 2vw, 1.42rem); transition: color .3s;
}
.qa[open] summary span { color: var(--bronze-forte); }
.qa summary i { position: relative; width: 15px; height: 15px; flex: none; }
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.6px;
  background: var(--tinta); transition: transform .35s var(--ease), background .3s;
}
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--bronze-forte); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa__resp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa[open] .qa__resp { grid-template-rows: 1fr; }
.qa__resp p { overflow: hidden; min-height: 0; max-width: 60ch; padding-bottom: 0; color: #3d4357; }
.qa[open] .qa__resp p { padding-bottom: 1.5rem; }

/* ============================================================
   9:57 · ANTES DE VOCÊ IR
   ============================================================ */
.saida { background: var(--tinta); color: var(--papel); padding: clamp(5rem, 11vw, 8.5rem) var(--pad) clamp(3rem, 6vw, 4.5rem); }
.saida > * { max-width: var(--maxw); margin-inline: auto; }
.saida__resposta { color: rgba(245,241,232,.8); }
.saida__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.receita {
  background: var(--papel-claro); color: var(--tinta); border-radius: 4px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 36px 70px -40px rgba(0, 0, 0, .7);
  transform: rotate(-.6deg);
}
.receita__timbre {
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--hairline); padding-bottom: 1rem; margin-bottom: 1.6rem; line-height: 1.9;
}
.receita__timbre i { font-style: italic; }
.receita__timbre span { font-size: .58rem; letter-spacing: .16em; color: var(--grafite); }
.receita__rotulo { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-forte); margin-bottom: 1rem; }
.receita__itens { list-style: none; display: grid; gap: .65rem; margin-bottom: 2rem; }
.receita__itens li { position: relative; padding-left: 1.7rem; font-size: .99rem; font-weight: 420; }
.receita__itens li::before { content: "✓"; position: absolute; left: 0; color: var(--azul); font-weight: 600; }
.receita__assina { margin-bottom: 1.8rem; }
.rubrica { width: min(240px, 70%); height: auto; }
.rubrica path { stroke: var(--bronze-forte); stroke-width: 2; stroke-linecap: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.receita.is-in .rubrica path { stroke-dashoffset: 0; }
.receita__assina p { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grafite); border-top: 1px solid var(--hairline); padding-top: .5rem; margin-top: -6px; width: min(280px, 80%); }
.btn--receita { width: 100%; justify-content: center; background: var(--tinta); color: var(--papel); }
.btn--receita:hover { background: var(--bronze-forte); color: #fff; }

.contato { display: grid; gap: 1.3rem; margin-bottom: 2rem; }
.contato > div { border-bottom: 1px solid var(--hairline-luz); padding-bottom: 1.3rem; }
.contato dt { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-claro); margin-bottom: .35rem; }
.contato dd { color: rgba(245,241,232,.88); line-height: 1.55; }
.contato a { color: inherit; text-decoration-color: var(--bronze-claro); text-underline-offset: 3px; }
.contato a:hover { color: #fff; }

.mapa { border: 1px solid var(--hairline-luz); border-radius: 4px; overflow: hidden; }
.mapa__carregar {
  display: flex; align-items: center; gap: 1.1rem; width: 100%; text-align: left;
  background: var(--tinta-2); border: 0; color: var(--papel); padding: 1.3rem 1.4rem; cursor: pointer;
  transition: background .3s;
}
.mapa__carregar:hover { background: #26304e; }
.mapa__pin { font-size: 1.6rem; color: var(--bronze-claro); line-height: 1; }
.mapa__txt { display: grid; gap: .15rem; font-size: .92rem; }
.mapa__txt strong { font-weight: 560; }
.mapa__txt { color: rgba(245,241,232,.75); }
.mapa iframe { width: 100%; height: 300px; border: 0; filter: grayscale(1) contrast(1.04); }
.mapa__externo {
  display: block; padding: .8rem 1.4rem; font-family: var(--ff-mono); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,241,232,.65);
  text-decoration: none; border-top: 1px solid var(--hairline-luz);
}
.mapa__externo:hover { color: var(--bronze-claro); }

.saida__proxima {
  margin-top: clamp(3.5rem, 8vw, 6rem); text-align: center;
  font-family: var(--ff-mono); font-size: clamp(.78rem, 1.6vw, 1rem); letter-spacing: .42em;
  text-transform: uppercase; color: rgba(245,241,232,.55);
}
.saida__proxima em { font-family: var(--ff-serif); font-style: italic; text-transform: none; letter-spacing: .04em; color: var(--bronze-claro); font-size: 1.35em; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape { background: var(--negatoscopio); color: rgba(245,241,232,.6); text-align: center; padding: 2rem var(--pad) 5rem; font-size: .8rem; display: grid; gap: .4rem; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  border: 0; background: transparent; padding: 0;
  width: min(94vw, 1080px); max-width: none;
  margin: auto; /* o reset global (* {margin:0}) mataria a centralização nativa do dialog */
}
.lightbox::backdrop { background: rgba(8, 10, 9, .88); backdrop-filter: blur(3px); }
.lightbox__par { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lightbox__par figure { position: relative; }
.lightbox img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: #000; border-radius: 4px; }
.lightbox__par figcaption {
  position: absolute; top: .65rem; left: .65rem;
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,.85); background: rgba(11,13,19,.62);
  border: 1px solid rgba(245,241,232,.22); border-radius: 2px; padding: .3rem .55rem .26rem; line-height: 1;
}
.lightbox__par figure:last-child figcaption { color: var(--bronze-claro); border-color: rgba(201,154,91,.55); }
.lightbox p { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,241,232,.75); margin-top: .9rem; text-align: center; }
.lightbox__fechar {
  position: absolute; top: -.6rem; right: -.4rem; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--papel); color: var(--tinta); font-size: 1.4rem; cursor: pointer; line-height: 1;
}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wa {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 110;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bronze); display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px rgba(168, 118, 62, .65);
  transition: opacity .45s var(--ease), transform .45s var(--ease), background .3s;
}
/* só esconde quando há JS para revelá-lo depois do hero */
html.js .wa { opacity: 0; transform: translateY(16px); pointer-events: none; }
html.js .wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa:hover { background: var(--bronze-forte); }
.wa svg { width: 27px; height: 27px; fill: #fff; }

/* ============================================================
   REVEAL on scroll (só com JS ativo)
   ============================================================ */
html.js :is(.momento__head, .transcricao__fala, .ficha__item, .exame__intro, .exame__tabs,
  .exame__mesa, .exame__fecho, .folha, .pausa__quote, .medico__abre, .medico__bio, .medico__foto,
  .negatoscopio__barra, .prancha, .voz, .qa, .receita, .saida__info, .saida__proxima,
  .negatoscopio__resposta, .vozes__resposta, .faq__resposta, .saida__resposta) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.js :is(.momento__head, .transcricao__fala, .ficha__item, .exame__intro, .exame__tabs,
  .exame__mesa, .exame__fecho, .folha, .pausa__quote, .medico__abre, .medico__bio, .medico__foto,
  .negatoscopio__barra, .prancha, .voz, .qa, .receita, .saida__info, .saida__proxima,
  .negatoscopio__resposta, .vozes__resposta, .faq__resposta, .saida__resposta).is-in {
  opacity: 1; transform: none;
}
html.js .selo { transition: none; } /* selos usam keyframes próprios */

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js :is(.momento__head, .transcricao__fala, .ficha__item, .exame__intro, .exame__tabs,
    .exame__mesa, .exame__fecho, .folha, .pausa__quote, .medico__abre, .medico__bio, .medico__foto,
    .negatoscopio__barra, .prancha, .voz, .qa, .receita, .saida__info, .saida__proxima,
    .negatoscopio__resposta, .vozes__resposta, .faq__resposta, .saida__resposta) { opacity: 1; transform: none; }
  .perfil__traco, .check path, .rubrica path { stroke-dashoffset: 0 !important; }
  .selo { opacity: .85 !important; transform: none !important; }
  html.js .wa { opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1020px) {
  .transcricao { grid-template-columns: 1fr; }
  /* a foto é panorâmica e o médico está a ~66% da largura: em telas médias,
     "center" deixaria só o ombro dele em quadro */
  .hero { background-position: 66% 28%; }
  .negatoscopio__mesa { grid-template-columns: repeat(2, 1fr); }
  .ficha { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 1.6rem; }
  .folha__etapas { grid-template-areas: "e1" "e2" "e3" "e4"; grid-template-columns: 1fr; }
  .medico__grid { grid-template-columns: 1fr; }
  .medico__foto { max-width: 460px; }
  .saida__grid { grid-template-columns: 1fr; }
  .receita { transform: none; max-width: 560px; }
}

@media (max-width: 720px) {
  .chrome { padding: .9rem 1rem; }
  .chrome__brand { font-size: 1.3rem; }
  .chrome__right { gap: .8rem; }
  .clock { font-size: .58rem; letter-spacing: .12em; white-space: nowrap; }
  .chrome__index { font-size: .58rem; letter-spacing: .12em; padding: .34rem .65rem; }
  /* no celular, a foto panorâmica não cabe atrás do texto sem esconder o médico:
     ela vira uma faixa própria no topo (rosto livre, a ~64% da largura da foto)
     e o texto corre abaixo, sobre o azul-marinho em que a faixa se dissolve */
  .hero { padding: 0 var(--pad) 1.2rem; background-image: none; }
  .hero::before {
    content: "";
    flex: 1 1 auto;
    min-height: clamp(300px, 60vw, 430px);
    margin: 0 calc(-1 * var(--pad)) 1.5rem;
    background-image:
      linear-gradient(180deg, rgba(22,29,48,.38) 0%, rgba(22,29,48,0) 30%, rgba(22,29,48,0) 60%, rgba(22,29,48,.62) 86%, var(--tinta) 100%),
      var(--hero-img);
    background-size: cover;
    background-position: 64% 22%;
  }
  .hero__kicker { letter-spacing: .2em; font-size: .64rem; }
  .hero__plate { gap: .35rem 1.2rem; font-size: .6rem; }

  .exame__mesa { grid-template-columns: 1fr; max-width: 420px; }
  .perfil { grid-column: 1; grid-row: auto; max-width: 230px; margin-inline: auto; }
  .callouts li, .callouts li:nth-child(odd), .callouts li:nth-child(even) {
    grid-column: 1; grid-row: auto; text-align: left; justify-self: start;
  }
  .callouts li::after, .callouts li:nth-child(odd)::after { margin-left: 0; width: 30px; }

  .negatoscopio__mesa { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent; }
  .negatoscopio__mesa .prancha { flex: 0 0 78vw; scroll-snap-align: center; transform: none; }

  .lightbox__par { grid-template-columns: 1fr; }
  .lightbox img { max-height: 38vh; }

  .voz, .voz--dir { max-width: 100%; margin-left: 0; border-right: 0; border-left: 1px solid var(--bronze); padding-right: 0; padding-left: 1.2rem; text-align: left; }

  .saida__proxima { letter-spacing: .26em; }
  .rodape { padding-bottom: 6rem; }
  .br-desk { display: none; }
}