/* Bio institucional: tipografia, cores e componentes do brandbook Yokoten. */
.bio-page{font-weight:400;overflow-x:visible}
.bio-wrap{width:min(calc(100% - 48px),704px);margin-inline:auto;padding:32px 0 40px}
.bio-brandbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--navy-soft)}
.bio-logo{width:144px;height:auto}
.bio-socials{display:flex;gap:8px}
.bio-socials a{display:grid;place-items:center;width:44px;height:44px;color:var(--gray-300);border:1px solid var(--navy-soft);border-radius:50%;transition:color .18s var(--ease),border-color .18s var(--ease)}
.bio-socials a:hover{color:var(--white);border-color:var(--blue-glow)}
.bio-socials svg{width:19px;height:19px}

/* O retrato e a assinatura formam o primeiro bloco, sem texto sobre o rosto. */
.bio-identity{display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"signature portrait";gap:20px 40px;align-items:center;margin:32px 12px 32px 0}
.bio-signature{grid-area:signature}
.bio-identity h1{font-size:56px;line-height:1;letter-spacing:-.045em;white-space:nowrap;margin-bottom:0}
.bio-name-accent{font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:1.38em;line-height:1;letter-spacing:-.025em;color:var(--blue-glow);margin-left:.14em}
.bio-portrait-frame{grid-area:portrait;position:relative}
.bio-portrait-frame::after{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid var(--gold-dark);border-radius:var(--radius);pointer-events:none}
.bio-portrait{position:relative;z-index:1;width:100%;height:248px;object-fit:cover;object-position:51% center;border-radius:var(--radius);background:var(--navy-deep)}
.bio-introduction{padding-left:24px;border-left:2px solid var(--gold)}
.bio-theme{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--white);margin:0;max-width:580px;text-wrap:balance}
.bio-header{padding-bottom:8px}

/* Cartões individuais: entrada no wrapper; interação no link, sem conflitos. */
.bio-group{margin-top:40px}
.bio-group h2{font-size:24px;line-height:1.3;letter-spacing:-.035em;margin-bottom:24px;text-wrap:initial}
.bio-group h2::before{content:"";display:block;width:32px;height:2px;background:var(--gold);margin-bottom:16px}
.bio-cards{display:grid;gap:14px}
.bio-card{--bio-accent:var(--blue-glow);position:relative;isolation:isolate;display:grid;grid-template-columns:44px minmax(0,1fr) 32px;gap:18px;align-items:center;padding:24px;min-height:112px;background:var(--bio-surface,var(--navy-deep));border:1px solid var(--navy-soft);border-radius:var(--radius);transition:transform .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);-webkit-tap-highlight-color:transparent}
.bio-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(125deg,var(--bio-accent),transparent 40%,var(--bio-accent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.bio-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);background:color-mix(in srgb,var(--bio-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--bio-accent) 24%,transparent);color:var(--bio-accent);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.bio-card-icon svg{display:block;width:26px;height:26px}
.bio-card-copy{min-width:0}
.bio-card-title{display:block;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.025em;color:var(--white);margin-bottom:6px}
.bio-card-description{display:block;font-size:16px;line-height:1.6;color:var(--bio-text,var(--gray-300))}
.bio-arrow{display:grid;place-items:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--bio-accent) 24%,transparent);border-radius:50%;font-family:var(--font-body);font-size:22px;line-height:1;color:var(--bio-accent);transition:transform .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
/* Logos oficiais das formações acima de toda a área de texto. */
.bio-card--course{grid-template-columns:minmax(0,1fr) 32px;gap:10px;padding-block:20px}
.bio-card-brand{display:flex;align-items:center;grid-column:1;grid-row:1;min-width:0;min-height:18px}
.bio-card-brand img{width:min(100%,104px);height:auto;transition:transform .4s var(--ease);transform-origin:left center}
.bio-card--course .bio-card-copy{grid-column:1 / -1;grid-row:2}
.bio-card--course .bio-arrow{grid-column:2;grid-row:1}
.bio-card--course:is(:hover,:focus-visible) .bio-card-brand img{transform:translateY(-1px)}
.bio-card[data-bio-link="black-belt"]{--bio-accent:var(--gold);border-color:color-mix(in srgb,var(--gold) 28%,var(--navy-soft))}
/* Cores de produto: brandbook-green-belt.html e identidade-yellow-belt.html. */
.bio-card[data-bio-link="green-belt"]{--bio-accent:#06210F;--bio-surface:#22B14C;--bio-hover:#5CC23A;--bio-text:#06210F;border-color:var(--bio-surface)}
.bio-card[data-bio-link="white-yellow-belt"]{--bio-accent:var(--midnight);--bio-surface:#FFD60A;--bio-hover:#E0A800;--bio-text:var(--midnight);border-color:var(--bio-surface)}
.bio-group--ferramentas .bio-card{background:var(--midnight-2)}
.bio-card:is(:hover,:focus-visible){background:var(--bio-hover,var(--navy));border-color:var(--bio-accent);box-shadow:0 12px 28px -18px color-mix(in srgb,var(--bio-accent) 50%,transparent)}
.bio-card:is(:hover,:focus-visible)::before{opacity:.8}
.bio-card:is(:hover,:focus-visible) .bio-card-icon{border-color:var(--bio-accent);box-shadow:0 0 18px color-mix(in srgb,var(--bio-accent) 22%,transparent);transform:translateY(-2px) scale(1.06)}
.bio-card:is(:hover,:focus-visible) .bio-arrow{background:var(--bio-accent);color:var(--bio-surface,var(--midnight));transform:translateX(3px)}
.bio-card:active{transform:scale(.985);transition-duration:.1s}
@media(hover:hover) and (pointer:fine){
  .bio-card:hover{transform:translateY(-4px)}
  .bio-card:hover:active{transform:translateY(-1px) scale(.99)}
}
.bio-compare{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-top:8px;padding:10px 0;font-size:14px;line-height:1.6;color:var(--blue-glow);text-underline-offset:4px}
.bio-compare:hover{text-decoration:underline}
.bio-compare span{font-size:20px}

/* Ivory e azul profundo mantêm o contraste dos serviços empresariais. */
.bio-group--empresas .bio-card{--bio-accent:var(--blue-deep);background:var(--ivory);border-color:var(--ivory)}
.bio-group--empresas .bio-card-title{color:var(--midnight)}
.bio-group--empresas .bio-card-description{color:var(--gray-700)}
.bio-group--empresas .bio-card:is(:hover,:focus-visible){border-color:var(--blue-deep)}
.bio-group--empresas .bio-card:is(:hover,:focus-visible) .bio-arrow{color:var(--white)}
.bio-page .bio-group--empresas :focus-visible{outline-color:var(--blue-glow)}
.bio-card--campaign{--bio-accent:var(--gold);margin-top:40px;border-color:var(--gold)}

/* Componentes e dados do rodapé institucional, adaptados à largura da bio. */
.bio-site-footer{padding:40px 0 28px}
.bio-footer-wrap{width:min(calc(100% - 48px),704px);margin-inline:auto}
.bio-footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;margin-bottom:32px}
.bio-site-footer .footer-tag{font-size:14.5px;margin-bottom:16px;max-width:none}
.bio-site-footer h3{font-size:14px;letter-spacing:.16em;margin-bottom:12px}
.bio-site-footer .footer-links li{padding:0}
.bio-site-footer .footer-links a{display:flex;align-items:center;min-height:44px;line-height:1.5}
.bio-site-footer .footer-legal{display:grid;gap:8px;padding-top:24px}
.bio-site-footer .footer-legal .cnpj{white-space:nowrap}
.bio-site-footer .footer-bottom{margin-top:24px;padding-top:16px;gap:8px;font-size:12px;letter-spacing:.035em;text-transform:none}
.bio-site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-body);font-size:14px;letter-spacing:0}
.bio-site-footer .footer-top-link{margin-top:20px}
.bio-site-footer .footer-top-link a{min-height:44px}
.bio-whatsapp-float{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:10;display:grid;place-items:center;width:56px;height:56px;border:1px solid color-mix(in srgb,#25D366 72%,var(--white));border-radius:50%;background:#25D366;color:var(--midnight);box-shadow:0 14px 28px -12px color-mix(in srgb,#25D366 76%,transparent);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.bio-whatsapp-float svg{width:28px;height:28px}
.bio-whatsapp-float:is(:hover,:focus-visible){background:#62E38D;transform:translateY(-3px);box-shadow:0 18px 32px -12px color-mix(in srgb,#25D366 90%,transparent)}
.bio-whatsapp-float:active{transform:scale(.96)}
.bio-page :focus-visible{outline:2px solid var(--blue-glow);outline-offset:4px}
.bio-page #conteudo:focus{outline:none}

@media(max-width:600px){
  .bio-wrap{width:calc(100% - 40px);padding-top:20px;padding-bottom:32px}
  .bio-brandbar{padding-bottom:16px}
  .bio-logo{width:124px}
  .bio-socials{gap:4px}
  .bio-identity{grid-template-columns:1fr;grid-template-areas:"signature" "portrait";gap:16px;margin:24px 8px 24px 0}
  .bio-identity h1{font-size:40px;margin-bottom:0}
  .bio-signature{align-self:center}
  .bio-portrait{height:auto;aspect-ratio:3/2;object-position:51% center;border-radius:var(--radius-sm)}
  .bio-portrait-frame::after{inset:8px -8px -8px 8px;border-radius:var(--radius-sm)}
  .bio-introduction{padding-left:16px}
  .bio-theme{font-size:17px;line-height:1.5}
  .bio-group{margin-top:36px}
  .bio-group h2{font-size:21px;margin-bottom:20px}
  .bio-group h2::before{margin-bottom:12px;width:24px}
  .bio-card{grid-template-columns:32px minmax(0,1fr) 24px;gap:12px;padding:20px 16px}
  .bio-card:not(.bio-card--course) .bio-card-copy{display:contents}
  .bio-card:not(.bio-card--course) .bio-card-title{grid-column:2;grid-row:1;margin:0}
  .bio-card:not(.bio-card--course) .bio-card-description{grid-column:1 / -1;grid-row:2}
  .bio-card:not(.bio-card--course) .bio-arrow{grid-column:3;grid-row:1}
  .bio-card--course{grid-template-columns:minmax(0,1fr) 24px;row-gap:12px;padding-block:18px}
  .bio-card-brand{min-height:16px}
  .bio-card-brand img{width:min(100%,88px)}
  .bio-card-icon{grid-column:1;grid-row:1;width:32px;height:32px;border-radius:var(--radius-sm)}
  .bio-card-icon svg{width:23px;height:23px}
  .bio-card-title{font-size:16px}
  .bio-card-description{font-size:16px;line-height:1.6}
  .bio-arrow{width:24px;height:24px;font-size:18px}
  .bio-footer-wrap{width:calc(100% - 40px)}
  .bio-footer-grid{grid-template-columns:1fr;gap:28px}
  .bio-site-footer .footer-bottom{align-items:flex-start}
  .bio-whatsapp-float{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:374px){
  .bio-identity h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bio-page *,.bio-page *::before,.bio-page *::after{animation:none!important;transition:none!important}
  .bio-card,.bio-card-icon,.bio-card-brand img,.bio-arrow,.bio-site-footer a,.bio-whatsapp-float{transform:none!important}
}
