/* Hero D — "17º andar" · Dr. Marcus Bressan (Clínica Avicena)
   O consultório real em tela cheia; a luz que entra pela janela segue a hora de Maringá. */

:root {
  /* paleta tirada da foto */
  --madeira: #826d5e;
  --madeira-escura: #3b2d25;
  --madeira-noite: #241b16;
  --caramelo: #b08a66;
  --ceu: #dde8ed;
  --ceu-escuro: #b2bcc9;
  --tinta: #f4efe7;            /* sobre a madeira e a sombra */
  --tinta-escura: #2b211b;     /* sobre a janela clara, de dia */
  --ambar: #e0a35a;
  --ambar-escuro: #c9893f;
  --noite: #1d2a40;
  --sombra-cor: 28, 20, 16;

  /* definidas pela hora (hero.js) */
  --jan-a: #f2f0ea;
  --jan-b: #f6f4ef;
  --jan-c: #ece8e0;
  --sala-a: #bdb3a3;
  --sala-b: #b0a38f;
  --noite-alpha: 0;
  --cidade-alpha: 0;
  --tinta-janela: var(--tinta-escura);

  /* tipografia */
  --fonte-titulo: "Petrona", Georgia, "Times New Roman", serif;
  --fonte-texto: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --tam-titulo: clamp(2.5rem, 1.1rem + 4.9vw, 5.1rem);
  --tam-apoio: clamp(0.92rem, 0.84rem + 0.3vw, 1.06rem);

  /* espaçamento */
  --margem: clamp(1.25rem, 1rem + 2.6vw, 4.5rem);
  --nav-altura: 5.5rem;
  --raio: 999px;
  --suave: cubic-bezier(.2,.7,.2,1);
}

@property --jan-a { syntax: "<color>"; inherits: true; initial-value: #f2f0ea; }
@property --jan-b { syntax: "<color>"; inherits: true; initial-value: #f6f4ef; }
@property --jan-c { syntax: "<color>"; inherits: true; initial-value: #ece8e0; }
@property --sala-a { syntax: "<color>"; inherits: true; initial-value: #bdb3a3; }
@property --sala-b { syntax: "<color>"; inherits: true; initial-value: #b0a38f; }
@property --noite-alpha { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cidade-alpha { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tinta-janela { syntax: "<color>"; inherits: true; initial-value: #2b211b; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--madeira-escura);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- seção ---------- */
.hd {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--nav-altura) 1fr auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--madeira-escura);
  transition: --jan-a 2.4s linear, --jan-b 2.4s linear, --jan-c 2.4s linear,
              --sala-a 2.4s linear, --sala-b 2.4s linear,
              --noite-alpha 2.4s linear, --cidade-alpha 2.4s linear, --tinta-janela 1.2s linear;
}
@supports (min-height: 100svh) { .hd { min-height: 100svh; } }

/* ---------- cena ---------- */
.hd-cena {
  position: absolute; inset: 0; z-index: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}
.hd-caixa {
  --r: 1.6;                         /* proporção da foto */
  --foco-x: .5;                     /* ponto de interesse quando sobra foto */
  --foco-y: .45;
  position: absolute;
  width: max(100cqw, calc(100cqh * var(--r)));
  height: max(100cqh, calc(100cqw / var(--r)));
  left: calc((100cqw - max(100cqw, calc(100cqh * var(--r)))) * var(--foco-x));
  top: calc((100cqh - max(100cqh, calc(100cqw / var(--r)))) * var(--foco-y));
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.045);
  will-change: transform;
}
.hd-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  opacity: 0;
  animation: hd-acende 1.6s var(--suave) .1s forwards;
}
.hd-luz { position: absolute; pointer-events: none; }

/* luz geral da sala: tinge madeira, chão e sofá com a temperatura da hora (tons médios: soft-light só colore) */
.hd-luz--sala {
  inset: 0;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(90% 75% at 24% 36% in oklch, var(--sala-a) 0%, color-mix(in oklab, var(--sala-a) 60%, transparent) 40%, transparent 74%),
    radial-gradient(70% 60% at 62% 70% in oklch, color-mix(in oklab, var(--sala-b) 75%, transparent) 0%, transparent 70%),
    radial-gradient(60% 50% at 88% 20% in oklch, color-mix(in oklab, var(--sala-b) 50%, transparent) 0%, transparent 70%);
  opacity: 0;
  animation: hd-acende 2.2s var(--suave) .4s forwards, hd-deriva 34s ease-in-out 2.6s infinite alternate;
}

/* véu da janela: cobre persianas e vidro, multiplica a cor da hora sobre o branco estourado */
.hd-luz--janela {
  left: 0; top: 0;
  width: 56%; height: 76%;
  mix-blend-mode: multiply;
  background:
    linear-gradient(to bottom in oklch, var(--jan-b) 0%, color-mix(in oklab, var(--jan-b) 0%, transparent) 34%),
    radial-gradient(85% 70% at 50% 40% in oklch, var(--jan-b) 0%, var(--jan-a) 45%, var(--jan-c) 100%);
  -webkit-mask-image: radial-gradient(96% 94% at 46% 42%, #000 58%, transparent 100%);
  mask-image: radial-gradient(96% 94% at 46% 42%, #000 58%, transparent 100%);
  opacity: 0;
  transform-origin: 46% 42%;
  animation: hd-acende 2s var(--suave) .3s forwards, hd-respira 10s ease-in-out 2.3s infinite;
}

/* penumbra fora do expediente */
.hd-luz--noite {
  inset: 0;
  mix-blend-mode: multiply;
  background:
    radial-gradient(80% 70% at 26% 38% in oklch, color-mix(in oklch, var(--noite) 50%, #7d8fa8) 0%, var(--noite) 72%);
  opacity: var(--noite-alpha);
}

/* a cidade acesa, no vidro, só à noite */
.hd-cidade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen;
  opacity: var(--cidade-alpha);
}
.hd-cidade circle {
  animation: hd-pisca var(--d, 9s) ease-in-out var(--a, 0s) infinite alternate;
  transform-box: fill-box;
}

/* sombra do chão: onde vivem nome, registro e prova */
.hd-sombra {
  position: absolute; inset: 0;
  background:
    linear-gradient(in oklab to top, rgba(var(--sombra-cor), .88) 0%, rgba(var(--sombra-cor), .64) 15%, rgba(var(--sombra-cor), .22) 32%, rgba(var(--sombra-cor), 0) 46%);
}

/* granulado fino */
.hd-grao {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: .055;
}

/* ---------- navegação ---------- */
.hd-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--margem);
  height: var(--nav-altura);
  opacity: 0;
  animation: hd-surge 1s var(--suave) .5s forwards;
}
.hd-marca {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--tinta-janela);
}
/* reflexo no vidro atrás da marca: garante leitura de dia sobre o trilho da persiana */
.hd-marca::before {
  content: ""; position: absolute; inset: -1.2rem -2rem; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0));
  opacity: 1; transition: opacity 1.2s linear;
}
.hd--noite .hd-marca::before { opacity: 0; }
.hd-marca__espiral { width: 2.3rem; height: 2.3rem; flex: none; }
.hd-marca__texto {
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.3rem; line-height: 1;
  letter-spacing: .01em;
  display: flex; flex-direction: column;
}
.hd-marca__texto small {
  font-family: var(--fonte-texto); font-weight: 600; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: .82; margin-bottom: .22rem;
}
.hd-links { display: flex; gap: 2rem; margin-left: auto; margin-right: 2rem; }
.hd-links a {
  color: var(--tinta); font-size: .9rem; font-weight: 500; letter-spacing: .01em;
  opacity: .92;
  position: relative;
  padding: .35rem 0;
}
.hd-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--suave);
}
.hd-links a:hover::after { transform: scaleX(1); }
.hd-nav__botao {
  color: var(--tinta); font-size: .9rem; font-weight: 600;
  border: 1px solid color-mix(in oklab, var(--tinta) 55%, transparent);
  border-radius: var(--raio);
  padding: .6rem 1.15rem;
  background: rgba(var(--sombra-cor), .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .4s var(--suave), border-color .4s var(--suave);
}
.hd-nav__botao:hover { background: rgba(var(--sombra-cor), .4); border-color: var(--tinta); }

/* ---------- conteúdo (na janela) ---------- */
.hd-conteudo {
  position: relative; z-index: 2;
  align-self: center;
  padding: 0 var(--margem) clamp(1rem, 5vh, 4rem);
  max-width: min(46rem, 60%);
  color: var(--tinta-janela);
}
.hd-apoio {
  margin: 0 0 1.1rem;
  font-size: var(--tam-apoio);
  font-weight: 500;
  letter-spacing: .01em;
  opacity: 0;
  animation: hd-surge 1s var(--suave) .7s forwards;
}
.hd-apoio strong { font-weight: 600; }
.hd-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--tam-titulo);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.hd-titulo em { font-style: italic; font-weight: 400; }
.hd-titulo__linha { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hd-titulo__linha > span {
  display: block;
  transform: translateY(108%);
  animation: hd-sobe 1.25s var(--suave) forwards;
}
.hd-titulo__linha:nth-child(1) > span { animation-delay: .55s; }
.hd-titulo__linha:nth-child(2) > span { animation-delay: .7s; }
.hd-titulo__linha:nth-child(3) > span { animation-delay: .85s; }

.hd-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem;
  margin-top: 2rem;
  opacity: 0;
  animation: hd-surge 1.1s var(--suave) 1.3s forwards;
}
.hd-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .72rem 1.35rem .72rem 1.05rem;
  border-radius: var(--raio);
  background: var(--ambar);
  color: var(--tinta-escura);
  box-shadow: 0 12px 30px -14px rgba(40, 24, 10, .7);
  transition: transform .5s var(--suave), background .4s var(--suave), box-shadow .5s var(--suave);
}
.hd-botao svg { width: 1.35rem; height: 1.35rem; flex: none; }
.hd-botao__texto { display: flex; flex-direction: column; line-height: 1.15; }
.hd-botao__texto strong { font-weight: 600; font-size: .95rem; }
.hd-botao__texto small { font-size: .72rem; font-weight: 500; opacity: .8; letter-spacing: .01em; }
.hd-botao:hover { background: var(--ambar-escuro); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(40, 24, 10, .8); }
.hd-botao--leve {
  color: var(--tinta-janela);
  background: color-mix(in oklab, var(--tinta) 42%, transparent);
  border: 1px solid color-mix(in oklab, var(--tinta-janela) 35%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: none;
  padding: .85rem 1.3rem;
  font-size: .9rem; font-weight: 600;
}
.hd-botao--leve:hover { background: color-mix(in oklab, var(--tinta) 62%, transparent); border-color: var(--tinta-janela); transform: none; box-shadow: none; }
.hd--noite .hd-botao { box-shadow: 0 0 0 1px rgba(224, 163, 90, .22), 0 0 44px -4px rgba(224, 163, 90, .55), 0 12px 30px -14px rgba(0, 0, 0, .7); }
.hd--noite .hd-botao--leve { background: rgba(var(--sombra-cor), .28); }
.hd--noite .hd-botao--leve:hover { background: rgba(var(--sombra-cor), .5); }

/* ---------- a prova, no vidro ---------- */
.hd-prova {
  position: absolute; z-index: 2;
  left: 39.5%; top: 15.5%;
  width: 12.4rem;
  margin: 0;
  color: var(--tinta-janela);
  opacity: 0;
  animation: hd-surge 1.2s var(--suave) 1.6s forwards;
}
.hd-prova blockquote {
  margin: 0; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.28rem; line-height: 1.3;
  text-wrap: balance;
}
.hd-prova figcaption { margin-top: .55rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.hd-prova figcaption::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: currentColor; vertical-align: middle; margin-right: .5rem; opacity: .7; }

/* ---------- base (na sombra do chão) ---------- */
.hd-base {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1.2rem 2.5rem;
  padding: 1rem var(--margem) clamp(1.3rem, 3.4vh, 2.4rem);
  color: var(--tinta);
  opacity: 0;
  animation: hd-surge 1.2s var(--suave) 1.5s forwards;
}
.hd-medico { display: flex; align-items: center; gap: 1rem; }
.hd-medico__foto {
  width: 4.1rem; height: 4.1rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  background: radial-gradient(circle at 50% 30%, #e8dcc8, #c9b094);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--tinta) 55%, transparent), 0 10px 24px -10px rgba(0,0,0,.6);
}
.hd-medico__texto { display: flex; flex-direction: column; gap: .12rem; font-size: .86rem; line-height: 1.3; }
.hd-medico__texto strong { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.12rem; letter-spacing: .005em; }
.hd-medico__texto span { opacity: .86; }
.hd-medico__crm { font-size: .76rem; letter-spacing: .04em; opacity: .72 !important; }
.hd-opinioes {
  grid-column: 3; justify-self: end;
  margin: 0; text-align: right;
  font-size: .86rem; line-height: 1.3; opacity: .92;
  display: flex; flex-direction: column;
}
.hd-opinioes__num { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 500; line-height: 1; margin-right: .2rem; }
.hd-opinioes small { font-size: .74rem; opacity: .72; margin-top: .15rem; }
.hd-opinioes small::before { content: "★ "; color: var(--ambar); }
.hd-relogio {
  grid-column: 1 / -1;
  margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .62;
}
.hd-relogio__ponto {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--ambar);
  animation: hd-pulsa 10s ease-in-out infinite;
}

/* ---------- animações ---------- */
@keyframes hd-acende { to { opacity: 1; } }
@keyframes hd-surge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hd-sobe { to { transform: translateY(0); } }
@keyframes hd-respira {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.035); }        /* 4 s inspira, 6 s expira */
}
@keyframes hd-deriva {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 3% -2%, -3% 2%, 2% 3%; }
}
@keyframes hd-pisca { from { opacity: .35; } to { opacity: 1; } }
@keyframes hd-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ambar) 55%, transparent); }
  40% { box-shadow: 0 0 0 .4rem color-mix(in oklab, var(--ambar) 0%, transparent); }
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .hd-links { gap: 1.3rem; margin-right: 1.2rem; }
  .hd-conteudo { max-width: min(46rem, 66%); }
  .hd-prova { left: 42%; top: 12%; width: 11.5rem; }
  .hd-prova blockquote { font-size: 1.15rem; }
}
@media (max-width: 860px) {
  :root { --nav-altura: 4.6rem; }
  .hd-links { display: none; }
  .hd-caixa { --foco-x: .34; --foco-y: .5; }
  .hd-luz--janela { width: 60%; height: 76%; }
  .hd-conteudo { max-width: 34rem; }
  .hd-prova { left: 47%; top: 11%; width: 11rem; }
  .hd-prova blockquote { font-size: 1.1rem; }
  .hd-base { grid-template-columns: auto 1fr; gap: .8rem 1.5rem; }
  .hd-opinioes { grid-column: 2; }
}
@media (max-width: 600px) {
  /* celular: a janela fica no alto com a frase no vidro; título e ações descem para a sombra do chão */
  .hd { grid-template-rows: var(--nav-altura) auto 1fr auto; }
  .hd-caixa { --foco-x: .3; --foco-y: .42; }
  .hd-luz--janela { width: 62%; height: 70%; }
  .hd-sombra {
    background:
      linear-gradient(in oklab to top, rgba(var(--sombra-cor), .93) 0%, rgba(var(--sombra-cor), .88) 28%, rgba(var(--sombra-cor), .8) 46%, rgba(var(--sombra-cor), .62) 58%, rgba(var(--sombra-cor), .3) 68%, rgba(var(--sombra-cor), 0) 78%);
  }
  .hd-prova { position: static; order: 1; width: auto; margin: 1.2rem var(--margem) 0; max-width: 17rem; color: var(--tinta-janela); }
  .hd-prova blockquote { font-size: 1.08rem; }
  .hd-conteudo {
    order: 2;
    align-self: end;
    max-width: none;
    padding-top: 7.5rem;
    padding-bottom: .5rem;
    color: var(--tinta);           /* sempre sobre a sombra: tinta clara */
  }
  .hd-apoio { margin-bottom: .7rem; font-size: .82rem; }
  .hd-titulo { font-size: clamp(2.25rem, 1.1rem + 7vw, 2.9rem); }
  .hd-acoes { margin-top: 1.1rem; gap: .5rem 1rem; flex-direction: column; align-items: flex-start; }
  .hd-botao { padding: .6rem 1.2rem .6rem .95rem; }
  .hd-botao--leve {
    background: none; border: 0; padding: .35rem 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--tinta); font-size: .86rem; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: color-mix(in oklab, var(--tinta) 45%, transparent);
  }
  .hd-botao--leve:hover { background: none; }
  .hd-base { order: 3; grid-template-columns: auto 1fr; padding-top: .9rem; gap: .5rem 1rem; align-items: center; }
  .hd-medico__foto { width: 3.1rem; height: 3.1rem; }
  .hd-medico__texto { font-size: .74rem; gap: .05rem; }
  .hd-medico__texto strong { font-size: .98rem; }
  .hd-medico__crm { font-size: .68rem; }
  .hd-opinioes { grid-column: 1 / -1; justify-self: start; text-align: left; flex-direction: row; align-items: baseline; gap: .3rem; font-size: .78rem; white-space: nowrap; }
  .hd-opinioes::before { content: "★ "; color: var(--ambar); }
  .hd-opinioes__num { font-size: 1.05rem; }
  .hd-opinioes small { display: none; }
  .hd-relogio { display: none; }
}
@media (max-width: 380px) {
  .hd-titulo { font-size: 2.15rem; }
  .hd-conteudo { padding-top: 6rem; }
  .hd-prova { max-width: 15rem; }
}
@media (max-height: 640px) and (min-width: 601px) {
  .hd-conteudo { padding-top: 0; }
  .hd-titulo { font-size: clamp(2.2rem, 5vh + 1rem, 4rem); }
  .hd-prova { display: none; }
}

/* ---------- movimento reduzido: reset geral ---------- */
@media (prefers-reduced-motion: reduce) {
  .hd *, .hd *::before, .hd *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hd-caixa { transform: none !important; }
  .hd-luz--janela, .hd-luz--sala, .hd-foto, .hd-nav, .hd-apoio, .hd-acoes, .hd-base, .hd-prova { opacity: 1; }
  .hd-titulo__linha > span { transform: none; }
}