/* ============================================================
   components.css — CTAs, logos 3D, accordions, KPIs, proof,
   objetivo, bloco final. Tema via tokens --t-*. Sem caixa-alta.
   ============================================================ */

/* ============================================================
   CTAs (acento elétrico)
   ============================================================ */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 1;
  letter-spacing: var(--tracking-grotesk);
  transition: background var(--duration-fast) var(--ease-apple), box-shadow var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple);
  text-decoration: none;
}
.cta:hover { text-decoration: none; }
.cta--primary { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: #fff; box-shadow: var(--glow-accent); }
.cta--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -8px rgba(124,92,255,0.7); }
.cta--primary:active { transform: translateY(0); }
.cta--secondary { background: var(--surface-2); color: var(--t-primary); border: var(--hairline) solid var(--surface-line); }
.cta--secondary:hover { transform: translateY(-2px); border-color: var(--accent-bright); color: var(--accent-bright); }

.topbar .cta { padding: 8px 16px; font-size: 0.82rem; }
.cta__icon { width: 16px; height: 16px; flex-shrink: 0; }
.topbar .cta__label { display: inline; }
@media (max-width: 600px) { .topbar .cta__label { display: none; } .topbar .cta { padding: 8px; } }

/* ============================================================
   Trajetória — logos 3D lado a lado (em seção clara)
   ============================================================ */
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-10); }
.logo-tile {
  perspective: 900px; display: block; width: 100%;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-card);
  border: var(--hairline) solid var(--surface-line);
  background: var(--surface);
  box-shadow: var(--shadow-sm); position: relative;
  transition: box-shadow var(--duration-normal) var(--ease-apple), border-color var(--duration-normal) var(--ease-apple);
}
.logo-tile:hover { box-shadow: var(--shadow-md); }
.logo-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.logo-tile__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); transform-style: preserve-3d; transition: transform var(--duration-fast) var(--ease-out-expo); }
.logo3d { position: relative; width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; transform: translateZ(46px); transform-style: preserve-3d; }
.logo3d__img { max-width: 150px; max-height: 74px; width: auto; height: auto; object-fit: contain; }
/* Itaú: letras vazadas → preenchimento branco atrás (revela letras brancas) + sombra limpa no container */
.logo-tile[style*="EC7000"] .logo3d { filter: drop-shadow(0 14px 12px rgba(0,0,0,0.22)); }
.logo-tile[style*="EC7000"] .logo3d::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 58px; background: #fff; border-radius: 18px; z-index: 0; }
.logo-tile[style*="EC7000"] .logo3d__img { max-height: 82px; position: relative; z-index: 1; }
.logo3d__mark { color: var(--accent); font-family: var(--font-serif); font-style: italic; font-size: 2.8rem; line-height: 1; }
.logo-tile__name { font-family: var(--font-serif); font-size: var(--text-subhead); letter-spacing: var(--tracking-tight); color: var(--t-primary); }
.logo-tile__period { font-size: var(--text-small); color: var(--t-tertiary); }
.logo-tile__glare { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.5), rgba(255,255,255,0) 42%); opacity: 0; transition: opacity var(--duration-normal) var(--ease-apple); pointer-events: none; z-index: 4; }
.logo-tile.is-hover .logo-tile__glare { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .logo-tile__glare { display: none; } }

.traj-detail { border: var(--hairline) solid var(--surface-line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--space-8); }
.traj-detail__company { font-family: var(--font-serif); font-style: italic; font-size: var(--text-subhead); color: var(--accent-bright); margin-bottom: var(--space-5); }

/* ============================================================
   Accordion (Stack, Objetivo)
   ============================================================ */
.accordion { display: grid; gap: var(--space-4); }
.accordion__item { border: var(--hairline) solid var(--surface-line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-normal) var(--ease-apple), border-color var(--duration-normal) var(--ease-apple), transform var(--duration-normal) var(--ease-apple); }
.accordion__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.accordion__item.is-open { box-shadow: var(--shadow-md); border-color: var(--accent); transform: none; }
.accordion__trigger { width: 100%; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8); text-align: left; }
.accordion__marker { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--t-secondary); font-size: 0.8rem; transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple); }
.accordion__item.is-open .accordion__marker { transform: rotate(90deg); background: var(--accent); color: #fff; }
.accordion__title-wrap { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.accordion__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-subhead); letter-spacing: var(--tracking-tight); color: var(--t-primary); }
.accordion__subtitle { font-size: var(--text-small); color: var(--t-tertiary); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-apple); }
.accordion__panel-inner { padding: 0 var(--space-8) var(--space-8); color: var(--t-secondary); }
@media (prefers-reduced-motion: reduce) { .accordion__panel { transition: none; } }

.panel__role { font-family: var(--font-serif); font-size: var(--text-lead); color: var(--t-primary); margin-bottom: var(--space-3); }
.panel__manifesto { margin-bottom: var(--space-5); font-size: var(--text-lead); line-height: var(--leading-relaxed); max-width: 64ch; color: var(--t-secondary); }
.panel__bullets { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.panel__bullets li { position: relative; padding-left: 1.6em; max-width: 64ch; line-height: var(--leading-normal); color: var(--t-secondary); }
.panel__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent-bright); }
.panel__stack { font-size: var(--text-small); color: var(--t-tertiary); padding-top: var(--space-4); border-top: var(--hairline) solid var(--t-line); }
.subrole { padding-top: var(--space-6); }
.subrole + .subrole { margin-top: var(--space-6); border-top: var(--hairline) solid var(--t-line); }
.subrole__period { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); margin-bottom: var(--space-2); }
.panel__label { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); margin: var(--space-5) 0 var(--space-3); }
.panel__label:first-child { margin-top: var(--space-2); }
.panel__case { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--surface-2); border-radius: var(--radius-card); font-size: var(--text-small); line-height: var(--leading-relaxed); color: var(--t-secondary); border-left: 2px solid var(--accent); }

/* ============================================================
   IA — bullets + KPIs + prova viva
   ============================================================ */
.ai-bullets { display: grid; gap: var(--space-8); margin-bottom: var(--space-16); }
.ai-bullet { position: relative; padding-left: 1.8em; max-width: 66ch; font-size: var(--text-lead); line-height: var(--leading-relaxed); }
.ai-bullet::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 18px 2px var(--accent); }
.ai-bullet__label { font-weight: var(--weight-medium); color: var(--t-primary); }
.ai-bullet__text { color: var(--t-secondary); }

.kpi-section-title { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); margin: 0 0 var(--space-10); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-12) var(--space-8); }
.kpi { display: flex; flex-direction: column; gap: var(--space-3); }
.kpi__value { font-family: var(--font-serif); font-style: italic; font-size: var(--text-kpi); line-height: 0.9; letter-spacing: var(--tracking-display); background: linear-gradient(150deg, #fff 20%, var(--accent-bright) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi__label { font-size: var(--text-small); color: var(--t-secondary); max-width: 22ch; line-height: var(--leading-snug); }

.proof { margin-top: var(--space-20); padding: var(--space-8); border-radius: var(--radius-card-lg); background: var(--surface); border: var(--hairline) solid var(--surface-line); max-width: 60ch; }
.proof__label { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); margin-bottom: var(--space-3); }
.proof__text { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lead); color: var(--t-primary); line-height: var(--leading-relaxed); }

/* ============================================================
   Objetivo
   ============================================================ */
.objective__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
@media (max-width: 600px) { .objective__cols { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============================================================
   Bloco final
   ============================================================ */
.final { position: relative; text-align: center; padding-block: var(--space-section); background: var(--section-bg); color: var(--t-primary); overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.final .container { position: relative; z-index: 1; }
.final__p1 { font-family: var(--font-serif); font-style: italic; font-size: var(--text-statement); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 24ch; margin-inline: auto; color: var(--t-primary); }
.final__p2 { margin-top: var(--space-8); color: var(--t-secondary); font-size: var(--text-lead); }
.final__p2 span { display: block; }
.final__p3 { margin-top: var(--space-6); color: var(--t-primary); font-size: var(--text-lead); }
.final__next-label { margin: var(--space-16) 0 var(--space-8); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); }
.final__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.final__cta-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.final__cta-sub { font-size: var(--text-small); color: var(--t-tertiary); }
.final__cta-row .cta { min-width: 260px; }
.final__signature { margin-top: var(--space-16); font-family: var(--font-serif); font-style: italic; color: var(--t-secondary); font-size: var(--text-subhead); }

/* ============================================================
   Fonte do nome/títulos: Space Grotesk em pé (escolha do Victor).
   Override final — converte os antigos display "serif" pra grotesk.
   ============================================================ */
.hero__name, .section__header, .section__header em, .about__identity,
.what__headline, .ai__manifesto, .kpi__value, .proof__text,
.final__p1, .final__signature, .traj-detail__company, .logo3d__mark,
.logo-tile__name, .accordion__title, .panel__role, .marquee__track span,
.monogram {
  font-family: var(--font-grotesk);
  font-style: normal;
}
.hero__name { font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; padding-bottom: 0.12em; }
.section__header { font-weight: 600; letter-spacing: -0.03em; }
.section__header em { font-weight: 600; }
.what__headline, .ai__manifesto, .final__p1 { font-weight: 600; letter-spacing: -0.025em; }
.about__identity, .accordion__title, .panel__role, .logo-tile__name, .traj-detail__company { font-weight: 600; letter-spacing: -0.02em; }
.kpi__value { font-weight: 700; letter-spacing: -0.04em; }
.marquee__track span { font-weight: 500; }
.monogram { font-weight: 700; }

/* ============================================================
   Retrato 3D (Sobre) — recorte sem fundo, halo violeta, parallax
   ============================================================ */
.portrait { position: relative; width: 100%; max-width: 330px; margin-inline: auto; aspect-ratio: 420 / 480; perspective: 1000px; }
.portrait__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--duration-fast) var(--ease-out-expo); }
.portrait__glow {
  position: absolute; left: 50%; top: 42%; width: 122%; aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-30px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,92,255,0.55), rgba(54,224,196,0.12) 56%, transparent 74%);
  filter: blur(16px); z-index: 0;
  animation: breathe 6.5s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity: 0.7; transform: translate(-50%,-50%) translateZ(-30px) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) translateZ(-30px) scale(1.07); }
}
.portrait__ring {
  position: absolute; left: 50%; top: 44%; width: 100%; aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-10px); border-radius: 50%;
  border: 1px solid rgba(124,92,255,0.3); box-shadow: inset 0 0 50px rgba(124,92,255,0.12);
  z-index: 1;
}
.portrait__img {
  position: relative; z-index: 2; width: 100%; height: auto; display: block;
  transform: translateZ(55px);
  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.6));
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}
@media (prefers-reduced-motion: reduce) { .portrait__glow { animation: none; } }

/* ============================================================
   Trajetória v2 — clareza de clique, tile cresce/encolhe,
   cargos animados, Dattos maior e mais saltado.
   ============================================================ */
.traj-hint { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--t-secondary); margin-bottom: var(--space-6); }
.traj-hint::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }

.logo-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); }
.logo-tile { flex: 1 1 220px; transition: flex-grow var(--duration-normal) var(--ease-apple), box-shadow var(--duration-normal) var(--ease-apple), border-color var(--duration-normal) var(--ease-apple); }
.logo-tile.is-selected { flex-grow: 1.7; }

.logo-tile__plus { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--surface-line); display: flex; align-items: center; justify-content: center; color: var(--t-tertiary); z-index: 5; transition: background var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple), border-color var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple); }
.logo-tile__plus::before { content: "+"; font-size: 18px; line-height: 1; }
.logo-tile.is-selected .logo-tile__plus { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(180deg); }
.logo-tile.is-selected .logo-tile__plus::before { content: "\2212"; } /* − */

/* Dattos: maior, sem sombra, mais saltado pra frente */
.logo-tile[style*="091F68"] .logo3d { transform: translateZ(70px); }
.logo-tile[style*="091F68"] .logo3d__img { max-width: 190px; max-height: 98px; }

/* Detalhe animado (recolhe/expande ao trocar de empresa) */
.traj-detail { overflow: hidden; transition: max-height 360ms var(--ease-apple), opacity 220ms var(--ease-apple); }

/* Painel de detalhe herda a cor da marca + logo pequena (navegação clara) */
.traj-detail__body { border-left: 3px solid var(--accent); padding-left: var(--space-6); }
.traj-detail__head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-6); }
.traj-detail__logo { height: 28px; width: auto; flex-shrink: 0; }
.traj-detail__company { margin: 0; color: var(--accent); }
@media (max-width: 600px) { .traj-detail__body { padding-left: var(--space-4); } }

/* KPIs: não quebrar o valor (ex.: 3-5x) + centralizar no mobile */
.kpi__value { white-space: nowrap; }
@media (max-width: 600px) {
  .kpi-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10) var(--space-8); }
  .kpi { flex: 0 1 150px; align-items: center; text-align: center; }
  .kpi__label { max-width: 20ch; }
}

/* ============================================================
   Trilha de navegação lateral (dots) + offset de âncora
   ============================================================ */
.hero, .section, .final { scroll-margin-top: 72px; }

.dotnav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 13px; }
.dotnav__item { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; transform-origin: right center; transition: transform var(--duration-fast) var(--ease-apple); }
.dotnav__item:hover { text-decoration: none; transform: scale(1.14); } /* cresce ao passar o mouse */
/* rótulo SEMPRE visível, discreto; pílula glassy lê em fundo claro e escuro */
.dotnav__label { order: 1; white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.01em; color: #fff; background: rgba(12,11,15,0.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: var(--radius-pill); opacity: 0.78; transition: opacity var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple), border-color var(--duration-fast) var(--ease-apple); }
.dotnav__item:hover .dotnav__label { opacity: 1; }
.dotnav__item.is-active .dotnav__label { opacity: 1; color: var(--accent-bright); border-color: var(--accent); }
.dotnav__dot { order: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple), box-shadow var(--duration-fast) var(--ease-apple); }
.dotnav__item.is-active .dotnav__dot { opacity: 1; transform: scale(1.5); box-shadow: 0 0 12px var(--accent-bright); background: var(--accent-bright); }
/* Mobile: trilha discreta só com pontos (toque pra pular) */
@media (max-width: 860px) {
  .dotnav { right: 9px; gap: 11px; }
  .dotnav__label { display: none; }
  .dotnav__dot { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) { .dotnav__item, .dotnav__dot { transition: none; } }

/* ============================================================
   Contato — pergunta de fit (Sim/Não) + respostas
   ============================================================ */
.fit { margin-top: var(--space-12); }
.fit__question { font-weight: 600; letter-spacing: -0.02em; font-size: var(--text-statement); line-height: var(--leading-snug); max-width: 22ch; margin-inline: auto; color: var(--t-primary); }
.fit__choices { margin-top: var(--space-8); display: flex; justify-content: center; gap: var(--space-4); }
.fit__btn { min-width: 132px; background: var(--surface-2); color: var(--t-primary); border: 1px solid var(--surface-line); box-shadow: none; }
.fit__btn:hover { border-color: var(--accent-bright); color: var(--accent-bright); transform: translateY(-2px); }
.fit__btn.is-chosen { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); color: #fff; border-color: transparent; box-shadow: var(--glow-accent); }
.fit__btn.is-chosen:hover { color: #fff; }
.fit__response[hidden] { display: none; }
.fit__response { margin-top: var(--space-10); opacity: 0; transform: translateY(10px); transition: opacity var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo); }
.fit__response.is-in { opacity: 1; transform: none; }
.fit__msg { font-size: var(--text-lead); color: var(--t-secondary); max-width: 52ch; margin-inline: auto; line-height: var(--leading-relaxed); }
.fit__response .final__ctas { margin-top: var(--space-8); }
.fit__response > .final__cta-row { margin-top: var(--space-8); display: flex; justify-content: center; }

/* ============================================================
   Skin in the game
   ============================================================ */
.skin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-16); }
@media (max-width: 760px) { .skin__grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.skin__list { display: grid; gap: var(--space-3); }
.skin__list li { position: relative; padding-left: 1.5em; color: var(--t-secondary); line-height: var(--leading-normal); max-width: 52ch; }
.skin__list li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent-bright); }
.skin__arch { margin-bottom: var(--space-16); }
.skin__arch-item { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; border-top: var(--hairline) solid var(--t-line); }
.skin__arch-item:last-child { border-bottom: var(--hairline) solid var(--t-line); }
.skin__weight { flex-shrink: 0; width: 62px; font-weight: 700; font-size: var(--text-subhead); color: var(--accent-bright); letter-spacing: -0.02em; }
.skin__arch-text { color: var(--t-secondary); line-height: var(--leading-normal); max-width: 60ch; }
.skin__stat { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-card-lg); background: var(--surface); border: var(--hairline) solid var(--surface-line); }
.skin__stat-value { flex-shrink: 0; font-weight: 700; font-size: var(--text-kpi); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; background: linear-gradient(150deg, #fff 20%, var(--accent-bright) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skin__stat-label { color: var(--t-secondary); font-size: var(--text-lead); line-height: var(--leading-snug); }
@media (max-width: 600px) { .skin__stat { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }