/* ============================================================================
   REINVENTA · BIO (link na bio) — Gabriela Pavani
   Tradução fiel e responsiva do design "Reinventa Bio" (art board 1366×2585).
   Tipos legíveis e fluidos (rem/clamp); os três cabeçalhos centrais
   (subtítulo, tagline, rodapé) usam colunas largas + quebras explícitas <br/>
   para casar com as quebras do design sem encolher o restante.
   ============================================================================ */

:root{
  --accent:#ac7c58;            /* dourado */
  --accent-bright:#c8966a;     /* dourado claro (hover) */
  --accent-rgb:172,124,88;
  --cream:#efe9df;             /* texto claro quente */
  --slate:#6f8f9a;             /* azul-ardósia (subtítulos) */
  --stage:#0f151b;             /* fundo do cartão */
  --bg-1:#11171f;              /* radial externo (centro) */
  --bg-2:#0a0e13;              /* radial externo (borda) */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Mulish", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--cream);
  background:radial-gradient(120% 90% at 50% 0%, var(--bg-1) 0%, var(--bg-2) 70%);
  background-attachment:fixed;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ----- acessibilidade ----- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-120%);
  background:var(--accent); color:#0a0e13; font-family:var(--sans); font-weight:700;
  font-size:.9rem; padding:10px 18px; border-radius:0 0 12px 12px; z-index:200;
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translate(-50%,0); outline:none; }

/* ============================ LAYOUT / CARTÃO ============================ */
.bio{
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(12px, 4vw, 44px)
          calc(clamp(12px, 4vw, 44px) + env(safe-area-inset-right))
          calc(clamp(12px, 4vw, 44px) + env(safe-area-inset-bottom))
          calc(clamp(12px, 4vw, 44px) + env(safe-area-inset-left));
}
.bio__card{
  position:relative; isolation:isolate;
  width:100%; max-width:31rem;               /* ≈ 496px */
  background:var(--stage);
  border-radius:clamp(22px, 6vw, 34px);
  padding:clamp(30px,8vw,54px) clamp(22px,6.4vw,40px) clamp(34px,9vw,56px);
  box-shadow:0 50px 130px -34px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}
/* moldura dupla decorativa (design: 2px .42 / 1px .13) */
.bio__card::before,
.bio__card::after{ content:""; position:absolute; pointer-events:none; border-style:solid; z-index:1; }
.bio__card::before{
  inset:clamp(10px,2.7vw,16px); border-width:2px;
  border-color:rgba(var(--accent-rgb),.42); border-radius:clamp(16px,5vw,26px);
}
.bio__card::after{
  inset:clamp(15px,3.7vw,22px); border-width:1px;
  border-color:rgba(var(--accent-rgb),.14); border-radius:clamp(12px,4.2vw,21px);
}
/* conteúdo acima das marcas d'água */
.bio__card > :not(.ghost){ position:relative; z-index:2; }

/* marcas d'água (fragmentos do wordmark, bem sutis) */
.ghost{
  position:absolute; z-index:0; opacity:.075; filter:grayscale(.4) saturate(.5);
  pointer-events:none; user-select:none; height:auto;
}
.ghost--re{ left:4%;  top:13%; width:34%; }
.ghost--inv{ right:-6%; top:33%; width:62%; }

/* ============================ CABEÇALHO ============================ */
.bio__head{ text-align:center; }
.bio__logo{ width:min(62%, 17rem); height:auto; margin:0 auto; }

.bio__portrait{
  position:relative;
  width:min(42%, 11.5rem); aspect-ratio:1;
  margin:clamp(16px,3.4vw,24px) auto 0;
}
.bio__glow{
  position:absolute; inset:-16%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.5) 0%, rgba(var(--accent-rgb),0) 64%);
  filter:blur(10px);
  animation:rvGlow 7s ease-in-out infinite;
}
.bio__photo{
  position:relative; z-index:1;
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:50% 15%;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7);
  animation:rvFloat 6.5s ease-in-out infinite;
}

/* ====== SUBTÍTULO — coluna larga (design: ~94% da largura), 1–2 linhas ===== */
.bio__subtitle{
  max-width:33rem; margin:clamp(20px,5vw,32px) auto 0;     /* praticamente toda a largura do cartão */
  text-align:center; font-family:var(--sans); font-weight:500;
  font-size:clamp(.66rem, 1.1vw + .46rem, .75rem);          /* legível (~10.5–12px) */
  letter-spacing:.085em; text-transform:uppercase; color:var(--accent);
  line-height:1.5; text-wrap:balance;
}

/* ============================ DIVISOR (estrela) ============================ */
.bio__divider{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,3vw,16px); width:min(72%, 23rem);
  margin:clamp(14px,3.4vw,22px) auto 0; color:var(--accent);
}
.bio__divider span{ flex:1; height:1px; background:linear-gradient(to right, rgba(var(--accent-rgb),0), currentColor); }
.bio__divider span:last-child{ background:linear-gradient(to left, rgba(var(--accent-rgb),0), currentColor); }
.bio__divider svg{ flex:none; width:clamp(16px,4vw,22px); height:auto; }

/* ====== TAGLINE — coluna larga + <br/> do design => 2 linhas ============== */
.bio__tagline{
  max-width:29rem; margin:clamp(16px,4vw,26px) auto 0;
  text-align:center; font-family:var(--serif); font-weight:500;
  font-size:clamp(1rem, 2.8vw + .3rem, 1.34rem);            /* legível (~16–21.5px) */
  line-height:1.28; color:var(--cream); letter-spacing:.004em;
}

/* ============================ CARTÕES (links) ============================ */
.bio__links{ margin:clamp(22px,5.4vw,34px) 0 0; }
.bio__links ul{ list-style:none; display:flex; flex-direction:column; gap:clamp(11px,2.6vw,15px); }

.card{
  position:relative; display:flex; align-items:center;
  gap:clamp(9px,2.4vw,14px);
  min-height:clamp(101px, 26vw, 114px);
  padding:clamp(14px,3.4vw,19px) clamp(15px,3.6vw,22px);
  border:1.5px solid rgba(var(--accent-rgb),.42);
  border-radius:clamp(16px,3.6vw,22px);
  background:rgba(255,255,255,.012);
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.card--primary{ border-color:rgba(var(--accent-rgb),.78); background:rgba(var(--accent-rgb),.06); }
@media (hover:hover){
  .card:hover{
    transform:translateY(-5px); border-color:var(--accent-bright);
    background:rgba(var(--accent-rgb),.10);
    box-shadow:0 22px 46px -16px rgba(0,0,0,.65);
  }
}
.card:active{ transform:translateY(-1px) scale(.992); }
.card:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }

.card__icon{ flex:none; width:clamp(40px,10.6vw,50px); display:grid; place-items:center; }
.card__icon img{ width:100%; height:auto; }
.card__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.card__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(.92rem, 1.6vw + .55rem, 1.16rem);
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream); line-height:1.1;
}
.card__sub{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(.84rem, 1.2vw + .55rem, .98rem);
  color:var(--slate); line-height:1.2;
}
.card__arrow{
  flex:none; width:clamp(36px,8.2vw,44px); height:clamp(36px,8.2vw,44px);
  border-radius:50%; background:var(--accent); display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.35);
  transition:background .35s ease;
}
.card:hover .card__arrow{ background:var(--accent-bright); }
.card__arrow svg{ width:44%; height:auto; color:#fbf7f0; display:block; }

/* ====== RODAPÉ — coluna larga + <br/> do design => 2 linhas =============== */
.bio__footer{
  max-width:23rem; margin:clamp(20px,5vw,32px) auto 0;
  text-align:center; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.2rem, 2.6vw + .4rem, 1.46rem);          /* legível (~19–23px) */
  line-height:1.24; color:var(--slate);
}
.bio__footer .accent{ color:var(--accent); }

/* ============================ ANIMAÇÕES ============================ */
@keyframes rvFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes rvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.8%); } }
@keyframes rvGlow{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.05); } }

.fx{ animation:rvFadeUp .8s cubic-bezier(.2,.8,.25,1) both; animation-delay:var(--d,0s); }

@media (prefers-reduced-motion: reduce){
  .fx{ animation:none !important; }
  .bio__photo, .bio__glow{ animation:none !important; }
  .card{ transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* ============================ BANNER DE CONSENTIMENTO (analytics.js) ======
   O motor injeta .ra-cb com fonte "Hanken Grotesk" e dourado #b89763.
   Aqui alinhamos à identidade desta página (Mulish + dourado do design). */
body .ra-cb{ font-family:var(--sans); background:rgba(13,18,24,.97); }
body .ra-cb__b{ font-family:var(--sans); }
body .ra-cb__b--a{ background:var(--accent); color:#0a0e13; }
body .ra-cb__b--a:hover{ filter:brightness(1.08); }
body .ra-cb__txt a{ color:var(--accent-bright); }