/* =========================================================================
   === BIO (link-in-bio) — estilos exclusivos ===
   Carrega depois de css/base.css (tokens, reset, tipografia, botões — comuns
   às 3 páginas do site). Motivo "passaporte/embarque" — ver
   PROJETO-LANDING-PAGES.md §11.
   ========================================================================= */
body{
  min-height:100vh;
  background:
    radial-gradient(720px 420px at 15% -10%, var(--mint-300) 0%, transparent 60%),
    radial-gradient(640px 380px at 110% 10%, var(--gold-100) 0%, transparent 55%),
    var(--background);
}
a{ color:inherit; }

/* --- Page shell --- */
.bio{
  width:100%; max-width:480px; margin-inline:auto;
  padding:var(--sp-2xl) var(--sp-lg) var(--sp-xl);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.bio__logo{ width:104px; height:104px; object-fit:contain; margin-bottom:var(--sp-md); }

.bio__eyebrow{
  font-size:.75rem; font-weight:600; line-height:1.33; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-600); margin-bottom:var(--sp-xs);
}

.bio__title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,5vw,1.75rem);
  line-height:1.2; letter-spacing:-.01em; color:var(--foreground); margin:0;
}

.bio__tagline{
  font-family:var(--font-display); font-weight:700; font-style:italic;
  font-size:1rem; color:var(--teal-700); margin:var(--sp-sm) 0 0;
}

.bio__blurb{
  font-size:.9375rem; color:var(--muted-foreground); max-width:38ch;
  margin:var(--sp-md) 0 0;
}

/* --- Sections --- */
.bio__section{ width:100%; margin-top:var(--sp-2xl); }

.bio__section-label{
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-foreground); margin-bottom:var(--sp-md); text-align:left;
}

/* --- Ticket cards (Recife / Curitiba) ---
   Motivo "passaporte/embarque" (liga com a oferta "Seu Passaporte" da LP de Recife):
   bloco de cor sólida com o código do aeroporto + picote de bilhete separando do corpo.
   Diferenciação por composição, não por paleta nova (tokens do DS são fixos — ver
   PROJETO-LANDING-PAGES.md §10.6): Recife = Navy, Curitiba = Teal. */
.bio__links{ display:flex; flex-direction:column; gap:var(--sp-xl); }

.bio-ticket{
  display:flex; align-items:stretch; width:100%; text-align:left;
  border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.bio-ticket:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
.bio-ticket--recife:hover{ transform:translateY(-5px) rotate(-0.7deg); box-shadow:0 22px 40px rgba(10,34,57,.28); }
.bio-ticket--curitiba:hover{ transform:translateY(-5px) rotate(0.7deg); box-shadow:0 22px 40px rgba(15,72,82,.28); }

.bio-ticket__stub{
  flex:0 0 108px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:22px 6px; color:#fff;
}
.bio-ticket--recife .bio-ticket__stub{ background:linear-gradient(165deg, var(--navy-400) 0%, var(--navy-700) 100%); }
.bio-ticket--curitiba .bio-ticket__stub{ background:linear-gradient(165deg, var(--teal-400) 0%, var(--teal-800) 100%); }

.bio-ticket__stub-icon{ width:18px; height:18px; opacity:.8; }
.bio-ticket__code{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; letter-spacing:.03em; line-height:1; }
.bio-ticket__city{ font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }

/* picote (seam) entre o canhoto e o corpo do bilhete */
.bio-ticket__stub::after{
  content:""; position:absolute; top:16px; bottom:16px; right:0;
  border-right:2px dashed rgba(255,255,255,.4);
}
.bio-ticket__stub::before, .bio-ticket__body::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  background:var(--background); z-index:2;
}
.bio-ticket__stub::before{ right:-9px; top:-9px; }
.bio-ticket__body::after{ left:-9px; bottom:-9px; }

.bio-ticket__body{
  flex:1 1 auto; min-width:0; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-sm);
  padding:16px 20px; background:var(--card);
}
.bio-ticket__text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bio-ticket__title{ font-family:var(--font-display); font-weight:800; font-size:1.0625rem; line-height:1.25; color:var(--foreground); }
.bio-ticket__subtitle{ font-size:.8125rem; color:var(--muted-foreground); }

.bio-ticket__chevron{ flex:0 0 auto; width:20px; height:20px; color:var(--border-strong); transition:transform .2s ease, color .2s ease; }
.bio-ticket--recife:hover .bio-ticket__chevron{ color:var(--navy-500); transform:translateX(4px); }
.bio-ticket--curitiba:hover .bio-ticket__chevron{ color:var(--teal-500); transform:translateX(4px); }

/* --- Contact pills (WhatsApp / e-mail) --- */
.bio__contact{ display:flex; flex-direction:column; gap:var(--sp-sm); }

.bio-pill{
  display:flex; align-items:center; gap:var(--sp-sm);
  width:100%; padding:12px var(--sp-lg);
  border-radius:var(--r-full); border:1.5px solid var(--border-strong);
  background:transparent; color:var(--navy-600); font-weight:600; font-size:.9375rem;
  transition:transform .18s ease, border-color .18s ease, color .18s ease;
}
.bio-pill:hover{ transform:translateY(-2px); border-color:var(--teal-500); color:var(--teal-700); }
.bio-pill:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
.bio-pill svg{ width:18px; height:18px; flex:0 0 auto; }

/* --- Footer --- */
.bio__footer{ margin-top:var(--sp-2xl); }
.bio__footer p{ font-size:.75rem; line-height:1.5; color:var(--muted-foreground); margin:0 0 var(--sp-xs); }
.bio__footer .tagline{ font-family:var(--font-display); font-weight:700; font-style:italic; color:var(--teal-600); }