/* Hipótese B · "O traçado" */
:root {
  /* cor (amostrada do retrato e do consultório) */
  --b-noite: #0b2524;        /* verde-petróleo profundo, fundo */
  --b-noite-2: #113231;
  --b-petroleo: #1a4442;
  --b-agua: #8fc0b5;         /* verde-água acinzentado da blusa / vidro */
  --b-agua-escuro: #3f706a;
  --b-bronze: #7a5a3c;       /* painel de vidro bronze da recepção */
  --b-ouro: #c9ab78;         /* dourado-velho das molduras */
  --b-creme: #f3e8d5;        /* texto e traçado */
  --b-areia: #d9c3ab;
  --b-texto-2: #c9d6cf;      /* apoio sobre a noite */

  /* tipo */
  --b-f-titulo: "Host Grotesk", system-ui, sans-serif;
  --b-f-mono: "Red Hat Mono", ui-monospace, monospace;
  --b-t-titulo: clamp(2.35rem, min(1.2rem + 3.9vw, 8.2vh), 5.1rem);
  --b-t-apoio: clamp(1.02rem, 0.92rem + 0.35vw, 1.2rem);
  --b-t-mono: clamp(0.7rem, 0.66rem + 0.15vw, 0.8rem);

  /* espaço */
  --b-borda: clamp(1.25rem, 0.6rem + 3.4vw, 5rem);
  --b-nav-h: clamp(3.75rem, 3.3rem + 1.5vw, 5rem);
  --b-raio: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--b-noite);
  color: var(--b-creme);
  font-family: var(--b-f-titulo);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- navegação ---------- */
.b-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  height: var(--b-nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--b-borda);
}
.b-marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--b-creme); }
.b-marca-coracao { width: 2.1rem; height: auto; color: var(--b-ouro); flex: none; overflow: visible; }
.b-marca-nome { display: flex; flex-direction: column; font-size: .98rem; line-height: 1.02; font-weight: 300; letter-spacing: -.01em; }
.b-marca-nome b { font-weight: 700; }
.b-links { display: flex; gap: 1.8rem; margin-left: auto; font-size: .95rem; }
.b-links a { text-decoration: none; color: var(--b-texto-2); }
.b-links a:hover { color: var(--b-creme); }
.b-nav-zap {
  text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: .55rem 1.1rem; border-radius: var(--b-raio);
  border: 1px solid color-mix(in oklab, var(--b-ouro) 70%, transparent);
  color: var(--b-creme);
}
.b-nav-zap:hover { background: color-mix(in oklab, var(--b-ouro) 18%, transparent); }

/* ---------- hero ---------- */
.b-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: var(--b-nav-h) minmax(0, 1fr) clamp(100px, 17vh, 230px) auto;
  grid-template-areas:
    ".      ."
    "texto  ."
    "faixa  faixa"
    "ficha  ficha";
  padding: 0 var(--b-borda);
  background:
    radial-gradient(120% 90% at 78% 40% in oklab, var(--b-noite-2), var(--b-noite) 70%);
}

/* malha: manchas radiais grandes, sem filtro de desfoque */
.b-malha { position: absolute; inset: 0; z-index: -3; overflow: clip; }
.b-mancha { position: absolute; border-radius: 50%; will-change: transform; }
.b-m1 { /* luz verde-água por trás dela */
  width: 70vw; height: 70vw; left: 46%; top: -18%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--b-agua-escuro) 75%, var(--b-noite)), transparent);
  opacity: .85;
  animation: b-deriva-1 34s ease-in-out infinite alternate;
}
.b-m2 { /* bronze baixo à esquerda */
  width: 62vw; height: 62vw; left: -22%; top: 38%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--b-bronze) 55%, var(--b-noite)), transparent);
  opacity: .7;
  animation: b-deriva-2 40s ease-in-out infinite alternate;
}
.b-m3 { /* petróleo médio no alto à esquerda */
  width: 55vw; height: 55vw; left: 4%; top: -30%;
  background: radial-gradient(closest-side in oklab, var(--b-petroleo), transparent);
  opacity: .8;
  animation: b-deriva-3 28s ease-in-out infinite alternate;
}
.b-m4 { /* dourado-velho muito fraco perto da faixa do traçado */
  width: 46vw; height: 30vw; left: 30%; top: 62%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--b-ouro) 22%, var(--b-noite)), transparent);
  opacity: .6;
  animation: b-deriva-1 36s ease-in-out infinite alternate-reverse;
}
@keyframes b-deriva-1 { to { transform: translate(-6%, 7%) scale(1.08); } }
@keyframes b-deriva-2 { to { transform: translate(9%, -6%) scale(.94); } }
@keyframes b-deriva-3 { to { transform: translate(7%, 9%) scale(1.1); } }

.b-ecg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.b-grao {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* retrato */
.b-retrato {
  position: absolute; z-index: 1; margin: 0;
  right: calc(var(--b-borda) * .4);
  bottom: 0;
  height: min(86svh, 62vw);
  aspect-ratio: 1;
  pointer-events: none;
}
.b-retrato img {
  width: 100%; height: 100%; object-fit: contain;
  --b-masc-v: linear-gradient(to bottom, #000 80%, transparent 99%);
  --b-masc-h: linear-gradient(to right, transparent 0, #000 13%);
  -webkit-mask-image: var(--b-masc-v), var(--b-masc-h);
          mask-image: var(--b-masc-v), var(--b-masc-h);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter:
    drop-shadow(-5px -3px 10px color-mix(in oklab, var(--b-agua) 32%, transparent))
    saturate(.94) contrast(1.02);
}

/* texto */
.b-conteudo {
  grid-area: texto;
  align-self: end;
  position: relative; z-index: 2;
  max-width: 40rem;
  padding-top: clamp(0rem, 8vh - 3.5rem, 3rem);
}
.b-sobre {
  font-family: var(--b-f-mono); font-size: var(--b-t-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-ouro);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: .8rem;
}
.b-sobre::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; }
.b-sobre span { color: var(--b-agua); }
.b-titulo {
  font-size: var(--b-t-titulo);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 1.5rem;
  font-weight: 300;
  text-wrap: balance;
}
.b-titulo span { display: block; }
.b-forte { font-weight: 700; color: var(--b-creme); }
.b-leve { color: color-mix(in oklab, var(--b-creme) 90%, var(--b-agua)); }
.b-apoio {
  font-size: var(--b-t-apoio);
  color: var(--b-texto-2);
  max-width: 33rem;
  margin: 0 0 2rem;
  text-wrap: pretty;
}
.b-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.b-botao {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.6rem 1rem 1.3rem;
  border-radius: var(--b-raio);
  background: var(--b-creme); color: var(--b-noite);
  font-weight: 600; font-size: 1.04rem; text-decoration: none;
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--b-ouro) 60%, transparent);
  transition: transform .25s, background .25s;
}
.b-botao svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.b-botao:hover { transform: translateY(-2px); background: #fff7ea; }
.b-botao:focus-visible, .b-tel:focus-visible, .b-nav-zap:focus-visible, .b-links a:focus-visible, .b-marca:focus-visible {
  outline: 2px solid var(--b-ouro); outline-offset: 4px;
}
.b-tel { text-decoration: none; font-weight: 500; color: var(--b-creme); border-bottom: 1px solid color-mix(in oklab, var(--b-ouro) 55%, transparent); padding-bottom: .15rem; }
.b-tel-rot { color: var(--b-texto-2); font-weight: 400; }

/* faixa onde corre o traçado (só marca a posição para o script) */
.b-faixa { grid-area: faixa; pointer-events: none; }
.b-escala {
  position: absolute; z-index: 2; margin: 0;
  left: var(--b-borda);
  top: var(--b-escala-y, auto);
  font-family: var(--b-f-mono); font-size: .68rem; letter-spacing: .12em;
  color: color-mix(in oklab, var(--b-agua) 75%, var(--b-noite));
  opacity: 0;
  transition: opacity .8s .6s;
}
.b-escala.b-pronta { opacity: 1; }

/* ficha técnica, como rodapé de laudo */
.b-ficha {
  grid-area: ficha;
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-top: 1px solid color-mix(in oklab, var(--b-agua) 30%, transparent);
  margin: 0 calc(var(--b-borda) * -1);
  padding: 0 var(--b-borda);
  background: linear-gradient(to bottom in oklab, color-mix(in oklab, var(--b-noite) 70%, transparent), var(--b-noite));
}
.b-ficha-col {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.2rem 1.15rem 0;
  min-width: 0;
}
.b-ficha-col + .b-ficha-col { padding-left: 1.2rem; border-left: 1px solid color-mix(in oklab, var(--b-agua) 18%, transparent); }
.b-rot {
  font-family: var(--b-f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--b-agua) 85%, var(--b-creme));
}
.b-val { font-family: var(--b-f-mono); font-size: var(--b-t-mono); color: var(--b-creme); letter-spacing: .02em; }
.b-val-nome { font-family: var(--b-f-titulo); font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.b-val b { font-weight: 500; font-size: 1.05em; }
.b-estrelas { color: var(--b-ouro); letter-spacing: .1em; margin: 0 .3rem; }

/* ---------- entrada (só com JS) ---------- */
.js [data-rev] { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .b-retrato[data-rev] { transform: translateY(24px); transition-duration: 1.4s, 1.6s; }
.js .b-pronto [data-rev], .js .b-pronto[data-rev] { opacity: 1; transform: none; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .b-links { display: none; }
  .b-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .b-retrato { height: min(82svh, 64vw); right: -9vw; }
  .b-conteudo { max-width: 31rem; }
  .b-tel-rot { display: none; }
  .b-ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .8fr); }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  :root { --b-nav-h: 3.6rem; --b-rw: min(118vw, calc((36svh + 80px) * 1.06)); }
  body { font-size: 16px; }
  .b-nav { gap: 1rem; }
  .b-marca-coracao { width: 1.7rem; }
  .b-marca-nome { font-size: .86rem; }
  .b-nav-zap { margin-left: auto; padding: .45rem .9rem; font-size: .85rem; }
  .b-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(var(--b-nav-h) + min(36svh, 92vw)) 80px auto auto;
    grid-template-areas: "." "faixa" "texto" "ficha";
  }
  .b-retrato {
    top: var(--b-nav-h); bottom: auto;
    right: calc(var(--b-rw) * -0.2);
    height: auto; width: var(--b-rw);
  }
  .b-retrato img { --b-masc-v: linear-gradient(to bottom, #000 58%, transparent 88%); }
  .b-conteudo { align-self: start; padding-top: .2rem; }
  .b-sobre { display: none; }
  .b-titulo { font-size: clamp(2.1rem, 1.1rem + 5.2vw, 3.4rem); margin-bottom: 1rem; }
  .b-conteudo { max-width: 34rem; }
  .b-apoio { font-size: 1rem; margin-bottom: 1.4rem; }
  .b-botao { padding: .9rem 1.3rem .9rem 1.1rem; font-size: 1rem; }
  .b-acoes { gap: .9rem 1.2rem; }
  .b-ficha { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
  .b-ficha-col, .b-ficha-col + .b-ficha-col { padding: .75rem 0; border-left: 0; }
  .b-ficha-col:nth-child(2) { grid-row: auto; }
  .b-ficha-col + .b-ficha-col { border-top: 1px solid color-mix(in oklab, var(--b-agua) 18%, transparent); }
  .b-escala { display: none; }
  .b-m1 { width: 130vw; height: 130vw; left: 10%; top: -20%; }
  .b-m2 { width: 120vw; height: 120vw; left: -50%; top: 45%; }
}

@media (max-width: 820px) and (max-height: 760px) {
  :root { --b-rw: min(118vw, calc((32svh + 72px) * 1.06)); }
  .b-hero { grid-template-rows: calc(var(--b-nav-h) + min(32svh, 92vw)) 72px auto auto; }
  .b-titulo { font-size: 2.05rem; margin-bottom: .8rem; }
  .b-apoio { font-size: .97rem; line-height: 1.45; margin-bottom: 1.1rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rev] { opacity: 1; transform: none; }
  .b-escala { opacity: 1; }
}