/* ═══════════════════════════════════════════════════════════
   SOLUTE RH · BIO — PARA EMPRESAS — canvas 9:16
   Mesmo acabamento da principal: superfícies chapadas,
   arestas definidas, laranja como acento pontual.
   ═══════════════════════════════════════════════════════════ */

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

:root{
  --ink:#0A0B0D;
  --surface:#121317;
  --surface-2:#171920;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --brand:#F37021;
  --brand-hi:#FF8845;
  --wa:#25D366;

  --text:#FFFFFF;
  --muted:#A2A7AE;
  --dim:#6E747C;

  --ease:cubic-bezier(.2,.7,.3,1);

  --font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  background:#050506;
  color:var(--text);
  min-height:100svh;
  display:grid;place-items:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.outer{position:fixed;inset:0;z-index:0;pointer-events:none;background:#050506}

/* ═══ PALCO 9:16 ═════════════════════════════════════════════ */
.stage{
  position:relative;z-index:2;
  aspect-ratio:9/16;
  width:min(100vw, calc(100svh * 9 / 16), 495px);
  max-height:100svh;
  container-type:size;
  border-radius:clamp(0px,2vmin,18px);
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--line), 0 24px 70px -30px #000;
  isolation:isolate;
}

/* unidade = 1% da largura do palco (nos filhos: um container não se consulta) */
.stage > *{--u:4px}
@supports (width:1cqw){ .stage > *{--u:clamp(3.5px, 1cqw, 4.95px)} }

.screen{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  font-size:calc(var(--u)*3.55);
}
.screen::-webkit-scrollbar{display:none}

/* fundo: profundidade tonal, sem trama nenhuma */
.wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.018) 22%,
    transparent 52%);
}
.wash::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 calc(var(--u)*26) rgba(0,0,0,.5);
}

.progress{
  position:absolute;top:0;left:0;height:2px;width:100%;z-index:55;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--brand);
  pointer-events:none;
}

/* ═══ CONTEÚDO ═══════════════════════════════════════════════ */
.content{
  position:relative;z-index:10;
  padding:calc(var(--u)*6) calc(var(--u)*6) calc(var(--u)*29);
  display:flex;flex-direction:column;
  gap:calc(var(--u)*5);
}

/* ── Topo ──────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*3)}

.pill{
  display:inline-flex;align-items:center;gap:calc(var(--u)*1.6);
  padding:calc(var(--u)*1.7) calc(var(--u)*3);
  font-size:calc(var(--u)*2.75);font-weight:600;
  color:var(--text);text-decoration:none;
  border-radius:calc(var(--u)*2.4);
  background:var(--surface);
  border:1px solid var(--line);
  transition:border-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}
.pill svg{width:calc(var(--u)*3.3);height:calc(var(--u)*3.3);flex:none}
.pill:hover{border-color:var(--brand);color:var(--brand-hi)}
.pill-back svg{transition:transform .28s var(--ease)}
.pill-back:hover svg{transform:translateX(calc(var(--u)*-.8))}
.pill-ig{font-size:calc(var(--u)*2.5)}

/* ── Identidade (sobe e dissolve no scroll) ────────────────── */
.ident{
  display:flex;align-items:center;gap:calc(var(--u)*3.6);
  transform:translate3d(0,var(--py,0),0);
  will-change:transform,opacity;
}

.avatar-wrap{
  position:relative;flex:none;
  width:calc(var(--u)*19);height:calc(var(--u)*19);
  display:grid;place-items:center;
}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring circle{
  fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:308;stroke-dashoffset:308;
  transform:rotate(-90deg);transform-origin:50% 50%;
  animation:drawRing 1.15s var(--ease) .3s forwards;
}
@keyframes drawRing{to{stroke-dashoffset:0}}

/* largura E altura explícitas: os atributos width/height do <img>
   entram como presentational hints e venceriam um aspect-ratio */
.avatar{
  width:calc(var(--u)*16.2);height:calc(var(--u)*16.2);
  border-radius:50%;object-fit:cover;object-position:50% 16%;
  background:var(--surface);display:block;
}

.ident-txt{min-width:0}
.ident-txt b{
  display:block;
  font-size:calc(var(--u)*5.2);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--text);
}

/* ── Título ────────────────────────────────────────────────── */
.head{display:flex;flex-direction:column;gap:calc(var(--u)*2.2)}

.kicker{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  font-size:calc(var(--u)*2.3);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
}
.kicker::after{content:"";flex:1;height:1px;background:var(--line)}

.title{
  font-size:calc(var(--u)*8.4);font-weight:800;
  line-height:1.04;letter-spacing:-.034em;color:var(--text);
}
.title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.title .w i{display:inline-block;font-style:normal;transform:translateY(110%)}
.title .w.hl i{color:var(--brand)}

.sub{
  font-size:calc(var(--u)*3.05);color:var(--muted);
  font-weight:500;line-height:1.5;
}

/* ═══ CARDS ══════════════════════════════════════════════════ */
.links{display:flex;flex-direction:column;gap:calc(var(--u)*5.5)}

.card{
  --dy:0px;
  display:block;position:relative;
  text-decoration:none;color:inherit;
  transform:translate3d(0,var(--dy),0);
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}

.badge{
  display:inline-flex;align-items:center;
  margin-bottom:calc(var(--u)*1.8);
  padding:calc(var(--u)*1.2) calc(var(--u)*2.4);
  border-radius:calc(var(--u)*1.6);
  font-size:calc(var(--u)*2.2);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:#180B02;background:var(--brand);
}

/* artes com alfa: sem moldura, drop-shadow respeita o canal */
.art{display:block;position:relative}
/* sem filter aqui: clip-path no card + filter no descendente
   faz o Chrome nao pintar a imagem. Sobre fundo quase preto a
   sombra nao rendia nada mesmo. */
.art img{
  display:block;width:100%;height:auto;
  transition:transform .45s var(--ease);
}
.card:hover .art img{transform:translateY(calc(var(--u)*-.6))}

/* foto opaca sem texto embutido: recorte próprio, alinhado à
   largura visível das artes com alfa (84,8% = 848/1000) */
.art-photo{
  position:relative;display:block;
  width:84.8%;margin-inline:auto;
  border-radius:calc(var(--u)*3.2);
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
  transition:border-color .22s var(--ease),transform .45s var(--ease);
}
.art-photo img{
  display:block;width:100%;height:auto;
  transition:transform .5s var(--ease);
}
.card:hover .art-photo{border-color:var(--brand);transform:translateY(calc(var(--u)*-.6))}
.card:hover .art-photo img{transform:scale(1.02)}

.art-photo .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.10) 0%,rgba(10,11,13,.05) 38%,rgba(10,11,13,.88) 100%);
}
.art-photo h2{
  position:absolute;z-index:2;left:calc(var(--u)*3.4);right:calc(var(--u)*3.4);
  bottom:calc(var(--u)*2.8);
  font-size:calc(var(--u)*5.2);font-weight:800;
  letter-spacing:-.028em;line-height:1.1;
}

/* legenda */
.cap{
  display:flex;align-items:center;gap:calc(var(--u)*2.6);
  margin-top:calc(var(--u)*1.6);
  padding:0 calc(var(--u)*1.4);
}
.cap .txt{
  flex:1;min-width:0;
  font-size:calc(var(--u)*2.85);font-weight:500;line-height:1.35;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.card:hover .cap .txt{color:var(--text)}

.arrow{
  width:calc(var(--u)*7.4);height:calc(var(--u)*7.4);flex:none;
  border-radius:50%;display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.arrow svg{width:42%;height:42%;transition:transform .28s var(--ease)}
.card:hover .arrow{background:var(--brand);border-color:var(--brand)}
.card:hover .arrow svg{transform:translateX(calc(var(--u)*.6))}

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

/* ── Rodapé ────────────────────────────────────────────────── */
.foot{
  text-align:center;
  font-size:calc(var(--u)*2.5);color:var(--dim);font-weight:500;
  line-height:1.6;padding-top:calc(var(--u)*1);
}
.foot a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.foot a:hover{color:var(--brand-hi)}
.foot .sep{opacity:.4;margin:0 calc(var(--u)*1)}

/* ═══ AÇÃO FIXA ══════════════════════════════════════════════ */
.dock{
  position:absolute;z-index:40;left:0;right:0;bottom:0;
  padding:calc(var(--u)*8) calc(var(--u)*6) calc(var(--u)*5);
  background:linear-gradient(180deg,transparent,var(--ink) 46%);
  pointer-events:none;
}
.cta{
  pointer-events:auto;
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:calc(var(--u)*2.2);
  height:calc(var(--u)*13.4);
  border-radius:calc(var(--u)*2.8);
  text-decoration:none;color:#06180D;
  font-size:calc(var(--u)*3.6);font-weight:800;letter-spacing:-.012em;
  background:var(--wa);
  transition:filter .2s var(--ease),transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cta svg{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);flex:none}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:scale(.99)}

.scroll-hint{
  position:absolute;z-index:41;left:50%;bottom:calc(var(--u)*20);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);
  font-size:calc(var(--u)*2.05);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:700;pointer-events:none;
  text-shadow:0 1px calc(var(--u)*2) rgba(0,0,0,.95);
  transition:opacity .3s var(--ease);
}
.scroll-hint svg{
  width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.95));
  animation:bob 1.9s var(--ease) infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(calc(var(--u)*1.1));opacity:1}
}
.scroll-hint.gone{opacity:0}

/* ═══ ABERTURA ═══════════════════════════════════════════════ */
.intro{
  position:absolute;inset:0;z-index:100;
  display:grid;place-items:center;background:var(--ink);
}
.intro .glyph{
  width:calc(var(--u)*19);height:calc(var(--u)*19);
  opacity:0;transform:scale(.9);
  animation:glyphIn .7s var(--ease) forwards;
}
@keyframes glyphIn{to{opacity:1;transform:scale(1)}}
.intro.out{animation:fadeOut .45s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* ── Revelação ─────────────────────────────────────────────── */
.rv{
  opacity:0;transform:translateY(calc(var(--u)*2.6));
  transition:opacity .5s var(--ease) var(--d,0s),
             transform .5s var(--ease) var(--d,0s);
}
.rv.in{opacity:1;transform:none}

.rvc{opacity:0;clip-path:inset(16% 0 0 0)}
.rvc.in{
  opacity:1;clip-path:inset(0 0 0 0);
  transition:opacity .5s var(--ease) var(--d,0s),
             clip-path .75s var(--ease) var(--d,0s);
}

.title.in .w i{
  animation:riseIn .7s var(--ease) forwards;
  animation-delay:var(--wd,0s);
}
@keyframes riseIn{to{transform:none}}

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

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .rv{opacity:1;transform:none}
  .rvc{opacity:1;clip-path:none}
  .title .w i{transform:none}
  .intro{display:none}
}