/* Hipótese B · Veio — Dra. Luciana Maldonado Guimarães */
:root{
  /* cor (grafite do painel da recepção, rosé do logo, creme do mármore) */
  --b-grafite-0:#1c1a1d;
  --b-grafite-1:#262427;
  --b-grafite-2:#343135;
  --b-grafite-logo:#727376;
  --b-rose:#f3c1b2;
  --b-rose-claro:#fde3e2;
  --b-rose-fundo:#c98f80;
  --b-creme:#f4ece6;
  --b-creme-suave:#d9cdc8;
  --b-cinza-texto:#cdc1bd;
  --b-tinta-botao:#2a2124;

  /* tipografia */
  --b-serifa:"Noto Serif Display", "Times New Roman", serif;
  --b-sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --b-titulo:clamp(2.2rem, min(.7rem + 3.5vw, 7.3svh), 4.1rem);
  --b-apoio:clamp(.98rem, .9rem + .25vw, 1.12rem);

  /* espaço */
  --b-margem:clamp(1.15rem, 5.4vw, 6.5rem);
  --b-topo-h:clamp(3.6rem, 3rem + 1.6vw, 5rem);
  --b-gap:clamp(.9rem, .6rem + 1vw, 1.6rem);
  --b-ease:cubic-bezier(.2,.7,.1,1);
}

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

/* ---------- topo ---------- */
.b-topo{
  position:absolute;inset:0 0 auto 0;z-index:5;height:var(--b-topo-h);
  display:flex;align-items:center;gap:2rem;padding:0 var(--b-margem);
}
.b-topo::before{content:"";position:absolute;inset:0 0 -2.5rem 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(22,20,23,.82), rgba(22,20,23,.55) 55%, rgba(22,20,23,0));}
.b-marca{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;margin-right:auto}
.b-marca-nome{font-family:var(--b-sans);font-weight:400;font-size:.86rem;letter-spacing:.34em;text-transform:uppercase;color:var(--b-creme)}
.b-marca-sub{font-family:var(--b-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--b-rose)}
.b-nav{display:flex;gap:clamp(1rem,2vw,2.2rem)}
.b-nav a{font-size:.86rem;text-decoration:none;color:var(--b-creme-suave);position:relative;padding:.4rem 0}
.b-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--b-rose);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--b-ease)}
.b-nav a:hover,.b-nav a:focus-visible{color:var(--b-creme)}
.b-nav a:hover::after,.b-nav a:focus-visible::after{transform:scaleX(1)}
.b-topo-cta{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:99px;
  border:1px solid color-mix(in oklab, var(--b-rose) 55%, transparent);
  color:var(--b-rose-claro);text-decoration:none;font-size:.84rem;font-weight:450;
  background:color-mix(in oklab, var(--b-grafite-0) 55%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .4s, color .4s;
}
.b-topo-cta svg{width:1.05rem;height:1.05rem;fill:currentColor}
.b-topo-cta:hover{background:var(--b-rose);color:var(--b-tinta-botao)}

/* ---------- hero ---------- */
.b-hero{
  position:relative;isolation:isolate;overflow:clip;
  min-height:100svh;min-height:max(100svh, 40rem);
  display:grid;align-items:center;
  padding:calc(var(--b-topo-h) + 1rem) var(--b-margem) clamp(2rem, 6svh, 4rem);
}

/* mármore: quadro estático (sem WebGL / antes da cena) + canvas por cima */
.b-marmore{
  position:absolute;inset:0;z-index:-2;
  background:var(--b-grafite-1) url("../img/b-veio-quadro-1440.webp") center/cover no-repeat;
}
/* com JS no desktop, a pedra começa apagada e o shader a acende; sem WebGL volta o quadro */
@media (min-width: 761px){ .js .b-marmore:not(.b-sem-gl){background-image:none} }
.b-marmore canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--b-ease)}
.b-marmore canvas.is-on{opacity:1}
.b-marmore-luz,.b-marmore-toque{position:absolute;inset:0;pointer-events:none;display:none}

/* granulado fino fixo (4%) */
.b-hero::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* retrato */
.b-retrato{
  position:absolute;z-index:1;margin:0;pointer-events:none;
  right:clamp(0rem, 4.5vw - 1rem, 4rem);bottom:0;
  height:calc(100% - var(--b-topo-h) - .5rem);max-height:56rem;
  aspect-ratio:1523/1800;
}
.b-retrato picture,.b-retrato img{width:100%;height:100%}
.b-retrato img{object-fit:contain;object-position:bottom center;
  filter:saturate(.96) contrast(1.02);
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 7%);
          mask-image:linear-gradient(to top, transparent 0, #000 7%);
}

/* placa de identificação, à direita da cabeça */
.b-placa{
  position:absolute;z-index:2;
  right:-1.2rem;top:47%;
  display:grid;gap:.3rem;max-width:15.5rem;
  padding:.9rem 1rem .95rem 1.05rem;
  background:color-mix(in oklab, var(--b-grafite-0) 80%, transparent);
  border-left:1px solid var(--b-rose);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.b-placa-veio{font-family:var(--b-mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--b-rose)}
.b-placa-nome{font-family:var(--b-sans);font-weight:500;font-size:.95rem;line-height:1.25;color:var(--b-creme)}
.b-placa-esp{font-size:.8rem;color:var(--b-creme-suave)}
.b-placa-reg{font-family:var(--b-mono);font-size:.72rem;letter-spacing:.06em;color:var(--b-creme)}

/* texto */
.b-texto{position:relative;z-index:3;max-width:min(40rem, 48vw);display:grid;gap:var(--b-gap);align-content:center}
.b-sobre{margin:0;display:flex;align-items:center;gap:.8rem;font-family:var(--b-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--b-rose)}
.b-sobre-traco{width:2.6rem;height:1px;background:linear-gradient(90deg, transparent, var(--b-rose));flex:none}
.b-titulo{
  margin:0;font-family:var(--b-serifa);font-weight:200;font-size:var(--b-titulo);
  line-height:1.04;letter-spacing:-.012em;color:var(--b-creme);
  font-variation-settings:"wdth" 100;
}
.b-linha{display:block;overflow:clip;overflow-clip-margin:.25em;padding-bottom:.04em}
.b-linha>span{display:inline-block}
.b-titulo em{font-style:italic;font-weight:300;color:var(--b-rose);padding-right:.04em}
.b-citacao{margin:0;padding-left:1.1rem;border-left:1px solid color-mix(in oklab, var(--b-rose) 70%, transparent);max-width:33rem}
.b-citacao p{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.04rem, .95rem + .35vw, 1.28rem);line-height:1.42;color:var(--b-rose-claro)}
.b-citacao footer{margin-top:.45rem;font-family:var(--b-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--b-cinza-texto)}
.b-citacao footer::before{content:"— "}
.b-apoio{margin:0;font-size:var(--b-apoio);line-height:1.55;color:var(--b-creme-suave);max-width:32rem}
.b-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:.2rem}
.b-cta{
  display:inline-grid;gap:.05rem;padding:.8rem 1.5rem .78rem;border-radius:99px;text-decoration:none;
  background:linear-gradient(in oklch 100deg, var(--b-rose-claro), var(--b-rose) 60%, #ebae9c);
  color:var(--b-tinta-botao);box-shadow:0 0 0 1px rgba(255,235,228,.35) inset, 0 14px 40px -12px rgba(243,193,178,.55);
  transition:transform .4s var(--b-ease), box-shadow .4s;
}
.b-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,235,228,.5) inset, 0 20px 50px -12px rgba(243,193,178,.75)}
.b-cta:focus-visible,.b-sec:focus-visible,.b-topo-cta:focus-visible,.b-nav a:focus-visible{outline:2px solid var(--b-rose-claro);outline-offset:3px}
.b-cta-rotulo{font-weight:550;font-size:1rem;letter-spacing:.005em}
.b-cta-num{font-family:var(--b-mono);font-size:.74rem;letter-spacing:.04em;color:#4a383b}
.b-sec{font-size:.92rem;color:var(--b-creme);text-decoration:none;border-bottom:1px solid color-mix(in oklab, var(--b-creme) 40%, transparent);padding-bottom:.15rem}
.b-sec:hover{border-color:var(--b-rose);color:var(--b-rose-claro)}
.b-prova{margin:.15rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;font-size:.86rem;color:var(--b-creme-suave)}
.b-prova strong{font-weight:550;color:var(--b-creme)}
.b-estrelas{color:var(--b-rose);letter-spacing:.12em;font-size:.8rem}
.b-prova-sep{width:3px;height:3px;border-radius:50%;background:var(--b-rose)}

.b-glossa{
  position:absolute;z-index:3;left:var(--b-margem);bottom:clamp(.9rem, 2.4svh, 1.6rem);margin:0;
  font-family:var(--b-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--b-cinza-texto);
}
.b-glossa i{font-family:var(--b-serifa);font-size:1.05em;letter-spacing:.04em;text-transform:none;color:var(--b-rose)}

/* ---------- notebook baixo ---------- */
@media (max-height: 760px) and (min-width: 761px){
  .b-citacao p{font-size:1rem}
  .b-apoio{font-size:.95rem}
  .b-texto{gap:.85rem}
}
@media (max-width: 1180px) and (min-width: 761px){
  .b-nav{display:none}
  .b-retrato{right:-8vw;height:calc(88% - var(--b-topo-h))}
  .b-placa{right:calc(8vw + 1rem)}
  .b-sobre{letter-spacing:.13em}
}

/* ---------- celular ---------- */
@media (max-width: 760px){
  :root{--b-topo-h:3.75rem}
  .b-topo{gap:1rem}
  .b-nav{display:none}
  .b-marca-nome{font-size:.74rem;letter-spacing:.28em}
  .b-marca-sub{font-size:.56rem}
  .b-topo-cta{padding:.5rem .8rem}
  .b-marmore{background-image:url("../img/b-veio-quadro-390.webp");background-position:center top}
  .b-marmore-luz,.b-marmore-toque{display:block;
    -webkit-mask:url("../img/b-veio-quadro-390.webp") center top/cover no-repeat;
            mask:url("../img/b-veio-quadro-390.webp") center top/cover no-repeat;
    -webkit-mask-mode:luminance;mask-mode:luminance;
  }
  /* fluxo: uma faixa rosé que corre só por dentro dos veios (máscara de luminância do próprio quadro) */
  .b-marmore-luz{
    background:linear-gradient(115deg, transparent 0 38%, rgba(253,227,226,.0) 40%, rgba(253,215,203,.55) 47%, rgba(255,240,232,.75) 50%, rgba(253,215,203,.55) 53%, transparent 62% 100%) 0 0/100% 300% no-repeat;
    animation:b-fluxo 30s linear infinite;mix-blend-mode:screen;opacity:.75;
  }
  .b-marmore-toque{
    background:radial-gradient(circle 9rem at var(--b-tx,70%) var(--b-ty,22%), rgba(255,226,214,.8), transparent 70%);
    mix-blend-mode:screen;opacity:0;transition:opacity .6s;
  }
  .b-hero.is-toque .b-marmore-toque{opacity:.9}

  .b-hero{align-items:start;padding-top:calc(var(--b-topo-h) + min(44svh, 23rem));padding-bottom:2.2rem}
  .b-retrato{
    top:calc(var(--b-topo-h) - .2rem);bottom:auto;right:-17vw;
    height:min(54svh, 29rem);
  }
  .b-retrato img{object-position:top center;
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 55%, transparent 86%);
            mask-image:linear-gradient(to bottom, #000 0, #000 55%, transparent 86%);
  }
  .b-placa{
    top:43%;right:calc(17vw + var(--b-margem) - .35rem);max-width:7.9rem;
    padding:.55rem .6rem .6rem .65rem;gap:.2rem;
  }
  .b-placa-nome{font-size:.8rem}
  .b-placa-esp{font-size:.66rem;line-height:1.3}
  .b-placa-reg{font-size:.64rem;letter-spacing:.02em;line-height:1.45}
  .b-texto{max-width:none;gap:.95rem}
  .b-sobre{font-size:.62rem;letter-spacing:.14em;gap:.6rem}
  .b-sobre-traco{width:1.4rem}
  .b-titulo{line-height:1.08;text-wrap:balance}
  .b-linha,.b-linha>span{display:inline;overflow:visible}
  .b-sobre{display:none}
  .b-acoes{order:3}
  .b-prova{order:4}
  .b-apoio{order:5}
  .b-citacao{padding-left:.9rem}
  .b-apoio{font-size:.95rem}
  .b-acoes{gap:.8rem 1.1rem}
  .b-cta{width:100%;justify-items:center;text-align:center}
  .b-prova{font-size:.8rem;gap:.25rem .6rem}
  .b-prova-sep{display:none}
  .b-glossa{display:none}
}
@media (max-width: 374px){
  .b-marca-sub{letter-spacing:.14em}
  .b-marca-nome{letter-spacing:.22em}
  .b-placa{max-width:7.1rem}
  .b-placa-nome{font-size:.72rem}
  .b-placa-esp{font-size:.6rem}
  .b-placa-reg{font-size:.58rem}
  .b-titulo{font-size:2rem}
}
@keyframes b-fluxo{
  from{background-position:0 100%}
  to{background-position:0 -100%}
}

/* ---------- entrada coreografada (só com JS) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .b-linha>span{animation:b-sobe 1.1s var(--b-ease) both}
  .js .b-linha:nth-child(1)>span{animation-delay:.15s}
  .js .b-linha:nth-child(2)>span{animation-delay:.3s}
  .js .b-linha:nth-child(3)>span{animation-delay:.45s}
  .js .b-sobre{animation:b-entra .9s var(--b-ease) .05s both}
  .js .b-sobre-traco{animation:b-traco 1.2s var(--b-ease) .1s both;transform-origin:left}
  .js .b-citacao{animation:b-entra 1s var(--b-ease) .8s both}
  .js .b-apoio{animation:b-entra 1s var(--b-ease) 1s both}
  .js .b-acoes{animation:b-entra 1s var(--b-ease) 1.15s both}
  .js .b-prova{animation:b-entra 1s var(--b-ease) 1.3s both}
  .js .b-retrato{animation:b-retrato 1.6s var(--b-ease) .1s both}
  .js .b-placa{animation:b-placa 1.1s var(--b-ease) 1.2s both}
  .js .b-topo{animation:b-entra .9s var(--b-ease) .2s both}
  .js .b-glossa{animation:b-entra 1s var(--b-ease) 1.6s both}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px){
  .js .b-linha>span{animation:none}
  .js .b-titulo{animation:b-entra 1.1s var(--b-ease) .2s both}
}
@keyframes b-sobe{from{transform:translateY(105%)}to{transform:none}}
@keyframes b-entra{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}
@keyframes b-traco{from{transform:scaleX(0)}to{transform:none}}
@keyframes b-retrato{from{opacity:0;transform:translateY(1.5rem) scale(.985)}to{opacity:1;transform:none}}
@keyframes b-placa{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion: reduce){
  .b-marmore-luz{animation:none;opacity:0}
  /* com JS no desktop, a pedra começa apagada e o shader a acende; sem WebGL volta o quadro */
@media (min-width: 761px){ .js .b-marmore:not(.b-sem-gl){background-image:none} }
.b-marmore canvas{transition:none}
}