/* Captura da aula Design com IA: a foto do trio e o cartao escuro com o formulario.
   No computador a foto ocupa a esquerda e o cartao fica colado a direita; no
   celular a foto vem primeiro e o cartao sobe por cima. As cores vem de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, p { margin: 0; }

/* Palco: a foto e o cartao. */
.palco { position: relative; display: grid; overflow: hidden; }
.palco__foto { position: relative; height: 58vh; min-height: 340px; overflow: hidden; }
.palco__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; animation: assentar 3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes assentar { from { transform: scale(1.08); } to { transform: none; } }
.palco__foto::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: linear-gradient(to bottom, transparent, var(--cor-fundo)); }

/* Cartao escuro. */
.cartao { position: relative; z-index: 1; display: grid; justify-items: start; gap: 16px; width: min(100% - 24px, 560px); margin: -110px auto 40px; padding: 30px 24px 32px; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 70%); animation: subir 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.logo { width: auto; height: 64px; }
.quando { color: var(--cor-destaque); font-family: var(--fonte-titulo); font-size: 0.92rem; font-weight: 500; }
h1 { max-width: 100%; margin-top: 4px; font-family: var(--fonte-titulo); font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 800; line-height: 1.02; text-wrap: balance; }
.apoio { max-width: 34em; color: var(--cor-texto-2); font-size: 1.02rem; }

/* Formulario: rotulo em cima, campo retangular. */
.formulario { display: grid; gap: 14px; width: 100%; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--cor-borda); }
.formulario .campo { display: grid; gap: 6px; }
.formulario .campo > label { color: var(--cor-texto-2); font-family: var(--fonte-titulo); font-size: 0.85rem; font-weight: 800; }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--campo-borda); border-radius: 10px; background: var(--campo-fundo); color: var(--cor-texto); font: inherit; font-size: 1rem; transition: border-color 0.2s ease; }
.formulario .campo input::placeholder { color: var(--cor-texto-3); }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--campo-foco); outline: none; }
.formulario .campo--erro input { border-color: #ff8a7a; }
.campo__erro { color: #ffb4a8; font-size: 0.82rem; }
.botao--enviar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 4px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--cor-acento); color: var(--cor-acento-texto); font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; }
.botao--enviar:hover { filter: brightness(1.05); transform: translateY(-2px); }
.botao--enviar:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; }
.botao--enviar svg { width: 20px; height: 20px; transition: transform 0.2s ease; }
.botao--enviar:hover svg { transform: translateX(4px); }
.formulario .formulario__confianca { display: block; color: var(--cor-texto-3); font-size: 0.8rem; line-height: 1.55; text-align: left; }

/* Computador: tudo cabe na altura da janela. */
@media (min-width: 980px) and (min-height: 640px) {
  html, body { height: 100%; }
  body { position: relative; overflow: hidden; }
  .palco { height: 100vh; height: 100dvh; align-items: stretch; }
  .palco__foto { position: absolute; inset: 0; height: auto; }
  .palco__foto::after { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 28%; background: linear-gradient(to bottom, transparent, rgb(12 35 32 / 70%)); }
  .palco__foto img { object-position: 50% 22%; }
  .cartao { align-content: start; gap: clamp(8px, 1.6vh, 16px); width: 520px; height: 100%; margin: 0 max(24px, calc((100% - 1440px) / 2 + 96px)) 0 auto; padding: clamp(24px, 5vh, 52px) 44px 0; border: 0; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); animation-name: descer; }
  @keyframes descer { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
  .logo { height: clamp(56px, 9vh, 84px); }
  h1 { font-size: clamp(2rem, 5.2vh, 3.2rem); }
  .apoio { font-size: clamp(0.92rem, 1.9vh, 1.02rem); }
  .formulario { gap: clamp(8px, 1.4vh, 14px); margin-top: 0; padding-top: clamp(12px, 2.2vh, 22px); }
  .formulario .campo input:not([type="checkbox"]):not([type="radio"]) { min-height: clamp(44px, 5.8vh, 52px); }
  .botao--enviar { min-height: clamp(46px, 6.2vh, 56px); }
  .rodape { position: absolute; right: 50%; bottom: 0; left: 0; z-index: 2; padding: 0 max(20px, 3vw) 20px; color: rgb(243 239 230 / 80%); font-size: 0.8rem; }
  .rodape a:hover { color: var(--cor-acento); }
}
@media (min-width: 980px) and (max-height: 639px) {
  .palco { min-height: 100vh; }
  .palco__foto { position: absolute; inset: 0; height: auto; }
  .palco__foto::after { display: none; }
  .cartao { width: 520px; margin: 32px max(24px, calc((100% - 1440px) / 2 + 96px)) 32px auto; padding: 32px 44px; border: 0; background: transparent; box-shadow: none; }
}

/* Rodape. */
.rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding: 22px max(20px, 5vw) 30px; color: var(--cor-texto-3); font-size: 0.85rem; }
.rodape nav { display: flex; gap: 24px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--cor-destaque); }
@media (max-width: 700px) { .rodape { justify-content: center; text-align: center; } }
/* Porta de acesso: a pagina fica escondida ate a senha certa (so uma cortina para a previa, nao e seguranca de servidor). */
html.porta-fechada { overflow: hidden; }
html.porta-fechada body > :not(.porta) { visibility: hidden; }
.porta { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: var(--cor-fundo); }
.porta[hidden] { display: none; }
.porta__caixa { display: grid; gap: 12px; width: min(100%, 360px); padding: 32px 28px 28px; border: 1px solid var(--cor-borda); border-radius: 18px; background: var(--cor-superficie); text-align: center; }
.porta__caixa img { width: auto; height: 56px; margin: 0 auto 6px; }
.porta__caixa p { margin: 0 0 6px; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.5; }
.porta__rotulo { color: var(--cor-texto-3); font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.porta__caixa input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-fundo); color: var(--cor-texto); font: inherit; font-size: 16px; letter-spacing: 0.12em; text-align: center; }
.porta__caixa input:focus { outline: 2px solid var(--cor-acento); outline-offset: 1px; }
.porta__caixa button { width: 100%; justify-content: center; }
.porta__caixa small { color: #e53935; font-size: 0.85rem; }
/* Rodape centralizado, com o logo pequeno da GMV em cima. */
footer.rodape { position: static; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px 36px; border-top: 1px solid var(--cor-borda) !important; text-align: center; }
footer.rodape .rodape__logo { display: block; width: auto; height: 64px; margin: 0 auto; opacity: 0.92; }
footer.rodape p { margin: 0; }
footer.rodape nav { justify-content: center; gap: 20px; }

/* Reflexo que passa pelas letras do logo. */
.logo-reflexo { position: relative; display: inline-block; line-height: 0; }
.logo-reflexo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 85%) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 160% 0; -webkit-mask: url("imagens/logo.png") center / contain no-repeat; mask: url("imagens/logo.png") center / contain no-repeat; animation: reflexo 4s ease-in-out 1.2s infinite; }
@keyframes reflexo { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }

/* Botao com cara de magica: a cor corre devagar e um brilho atravessa. */
.cartao .botao--enviar, .doc .botao--enviar, .botao--final { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(100deg, var(--cor-acento) 0%, #f3e2a8 35%, var(--cor-acento) 55%, #a67c2e 80%, var(--cor-acento) 100%); background-size: 220% 100%; animation: botao-cor 6s linear infinite; }
.cartao .botao--enviar::before, .doc .botao--enviar::before, .botao--final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 55%) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: botao-brilho 3.2s ease-in-out 1s infinite; }
.cartao .botao--enviar::after, .doc .botao--enviar::after, .botao--final::after { content: ""; position: absolute; top: 7px; right: 14px; width: 9px; height: 9px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: botao-faisca 2.4s ease-in-out infinite; }
@keyframes botao-cor { to { background-position: -220% 0; } }
@keyframes botao-brilho { 0% { background-position: 160% 0; } 50%, 100% { background-position: -60% 0; } }
@keyframes botao-faisca { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* Botao do topo abre o formulario em janela: largura do texto, nao da coluna. */
.cartao a.botao--abrir { width: auto; margin-top: 10px; padding: 0 34px; text-decoration: none; }
@media (max-width: 899px) { .cartao a.botao--abrir { justify-self: center; } }

/* Formulario dentro da janela de diagnostico. */
.doc--form { max-width: 520px; }
.doc--form .formulario { margin-top: 0; padding-top: 0; border-top: 0; }
.doc--form .doc__data { margin-bottom: 20px; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.6; }

/* Termos e privacidade em janela. */
.doc { width: min(100% - 24px, 640px); max-height: min(86vh, 760px); padding: 0; border: 1px solid var(--cor-borda); border-radius: 18px; background: var(--cor-superficie); color: var(--cor-texto); font-family: var(--fonte-texto); overflow: hidden; box-shadow: 0 50px 120px -30px rgb(0 0 0 / 80%); }
.doc[open] { display: flex; flex-direction: column; animation: doc-entra 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.doc::backdrop { background: rgb(5 5 5 / 78%); animation: doc-fundo 0.3s ease both; }
@keyframes doc-entra { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes doc-fundo { from { opacity: 0; } to { opacity: 1; } }
.doc__topo { position: relative; padding: 30px 64px 22px 32px; border-bottom: 1px solid var(--cor-borda); }
.doc__selo { margin: 0 0 8px; color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.doc h2 { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; line-height: 1.05; }
.doc__fechar { position: absolute; top: 22px; right: 20px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cor-borda); border-radius: 50%; background: transparent; color: var(--cor-texto); cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease; }
.doc__fechar:hover { border-color: var(--cor-acento); transform: rotate(90deg); }
.doc__fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.doc__corpo { padding: 26px 32px 34px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent; }
.doc__corpo::-webkit-scrollbar { width: 10px; }
.doc__corpo::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.doc__corpo::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 16%); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
.doc__corpo::-webkit-scrollbar-thumb:hover { background-color: var(--cor-acento); }
.doc__corpo::-webkit-scrollbar-button { display: none; height: 0; }
.doc__data { margin: 0 0 18px; color: var(--cor-texto-3); font-size: 0.82rem; }
.doc h3 { margin: 24px 0 8px; font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; }
.doc h3:first-of-type { margin-top: 0; }
.doc__corpo p { margin: 0; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.7; }
@media (max-width: 600px) { .doc { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; } .doc__topo { padding: 24px 60px 18px 22px; } .doc__corpo { padding: 22px 22px 30px; } }
body:has(.doc[open]) { overflow: hidden; }

/* Janela de saida com a cara da aula. */
body .flxp-ps { background: rgb(5 5 5 / 82%); }
body .flxp-ps .flxp-ps__caixa { max-width: 440px; padding: 30px 30px 24px; border: 1px solid var(--cor-borda); border-radius: 20px; background: radial-gradient(120% 70% at 50% 0%, rgb(201 162 74 / 16%), transparent 60%), var(--cor-superficie); box-shadow: 0 50px 120px -30px rgb(0 0 0 / 85%); }
body .flxp-ps .flxp-ps__caixa::before { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 0; background: url("imagens/logo.png") center / contain no-repeat; }
body .flxp-ps .flxp-ps__titulo { margin-bottom: 12px; font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.05; text-wrap: balance; }
body .flxp-ps .flxp-ps__texto { margin-bottom: 22px; font-size: 0.98rem; line-height: 1.6; }
body .flxp-ps .flxp-ps__botao { position: relative; overflow: hidden; min-height: 56px; border-radius: 12px; font-family: var(--fonte-titulo); font-size: 1.05rem; background: linear-gradient(100deg, var(--cor-acento) 0%, #f3e2a8 35%, var(--cor-acento) 55%, #a67c2e 80%, var(--cor-acento) 100%); background-size: 220% 100%; animation: botao-cor 6s linear infinite; transition: transform 0.2s ease; }
body .flxp-ps .flxp-ps__botao:hover { transform: translateY(-2px); }
body .flxp-ps .flxp-ps__nao { margin-top: 14px; color: var(--cor-texto-3); font-size: 0.85rem; text-decoration: none; }
body .flxp-ps .flxp-ps__nao:hover { color: var(--cor-texto-2); }
body .flxp-ps .flxp-ps__fechar { top: 14px; right: 14px; border: 1px solid var(--cor-borda); font-size: 20px; transition: transform 0.25s ease, border-color 0.25s ease; }
body .flxp-ps .flxp-ps__fechar:hover { transform: rotate(90deg); border-color: var(--cor-acento); }

/* No computador, a tela desconta a barra da contagem e o cartao cabe inteiro, colado a direita. */
@media (min-width: 980px) and (min-height: 640px) {
  /* Composicao delimitada: o texto para de crescer e ganha um recuo que tem teto; a foto segue ate a borda direita da tela. */
  .palco { --recuo: clamp(48px, 6vw, 120px); --coluna: clamp(552px, 30vw, 660px); --borda: min(max(0px, (100% - 1600px) / 2), 160px); height: calc(100vh - 62px); height: calc(100dvh - 62px); }
  .palco__foto { left: calc(var(--borda) + var(--recuo) + var(--coluna) - 140px); right: 0; }
  .palco__foto::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 140px; background: linear-gradient(to left, transparent, var(--cor-fundo)); }
  .cartao { width: calc(var(--borda) + var(--recuo) + var(--coluna)); margin: 0 auto 0 0 !important; padding-left: calc(var(--borda) + var(--recuo)); padding-right: 48px; border: 0; background: transparent; box-shadow: none; }
  .palco__foto img { object-position: 45% 0; }
  .cartao { gap: clamp(4px, 1vh, 10px); padding-top: clamp(12px, 2.4vh, 30px); -webkit-mask-image: none; mask-image: none; }
  .cartao .logo { height: clamp(44px, 7.5vh, 76px) !important; }
  .cartao .quando { font-size: clamp(0.78rem, 1.6vh, 0.9rem); }
  .cartao h1 { font-size: clamp(1.5rem, 3.9vh, 2.5rem); line-height: 1.08; }
  .cartao .apoio { font-size: clamp(0.82rem, 1.65vh, 0.95rem); line-height: 1.5; }
  .formulario { gap: clamp(4px, 0.9vh, 10px); padding-top: clamp(8px, 1.4vh, 16px); }
  .formulario .campo { gap: 3px; }
  .formulario .campo > label { font-size: 0.78rem; }
  .formulario .campo input:not([type="checkbox"]):not([type="radio"]) { min-height: clamp(40px, 5.2vh, 48px); }
  .cartao .botao--enviar { min-height: clamp(44px, 5.8vh, 54px); }
  .formulario .formulario__confianca { font-size: 0.74rem; line-height: 1.45; }
}

/* Celular: o trio inteiro e centralizado na foto. */
@media (max-width: 979px) {
  .palco__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .palco__foto img { position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: 100%; transform: translateX(-50%); animation: none; }
  .cartao { margin-top: -40px; }
  .cartao .logo { height: 84px !important; }
}

/* Aviso de cookies e botao da contagem no verde-agua da marca. */
body .flxp-ck button { background: #00a99d; color: #fff; border: 0; }
body .flxp-ck button:hover { background: #0e8b81; }
body .flxp-cr .flxp-cr__link { background: #00a99d; color: #fff; }
body .flxp-cr .flxp-cr__link:hover { background: #0e8b81; }

/* Secoes abaixo da dobra. */
@media (min-width: 980px) and (min-height: 640px) {
  html, body { height: auto; }
  body { overflow: visible; overflow-x: clip; }
  .rodape { position: static; color: var(--cor-texto-3); }
}
.bloco { padding: clamp(64px, 10vw, 120px) 20px; border-top: 1px solid var(--cor-borda); }
.bloco__miolo { width: min(100%, 1080px); margin: 0 auto; }
.bloco__miolo--duplo { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bloco__miolo--centro { max-width: 680px; text-align: center; }
@media (min-width: 860px) { .bloco__miolo--duplo { grid-template-columns: 1fr 1fr; } }
.bloco__etiqueta { margin-bottom: 14px; color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bloco__titulo { max-width: 20ch; margin: 0 0 18px; font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.05; text-wrap: balance; }
.bloco__miolo--centro .bloco__titulo { margin-inline: auto; }
.bloco__intro { max-width: 58ch; margin-bottom: 14px; color: var(--cor-texto-2); font-size: 1.05rem; line-height: 1.65; }
.bloco__miolo--centro .bloco__intro { margin-inline: auto; }
.passos { display: grid; gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .passos { grid-template-columns: repeat(2, 1fr); } }
.passos li { padding: 26px 24px; border: 1px solid var(--cor-borda); border-radius: 14px; background: var(--cor-superficie); }
.passos__n { display: block; margin-bottom: 14px; color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 800; }
.passos h3 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 1.2rem; }
.passos p { color: var(--cor-texto-2); font-size: 0.97rem; line-height: 1.6; }
.checks { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 34px; color: var(--cor-texto-2); font-size: 1.02rem; line-height: 1.6; }
.checks li::before { content: ""; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #00a99d; -webkit-mask: none; }
.checks li::after { content: ""; position: absolute; top: 9px; left: 6px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.conduz__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 30%; border-radius: 16px; }
.bloco--final { background: radial-gradient(80% 60% at 50% 0%, rgb(201 162 74 / 14%), transparent 70%); }
.botao--final { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; color: var(--cor-acento-texto); font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 800; width: auto; min-height: 58px; margin-top: 22px; padding: 0 34px; text-decoration: none; }
.botao--final:hover svg { transform: translateX(4px); }

/* Faixa inclinada entre o topo e as secoes. */
.faixa { position: relative; z-index: 2; margin: -18px -4% 0; padding: 16px 0; overflow: hidden; background: var(--cor-superficie); border-block: 1px solid var(--cor-borda); transform: rotate(-2.2deg); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 80%); }
.faixa__trilho { display: flex; width: max-content; animation: faixa-corre 40s linear infinite; }
.faixa span { display: inline-flex; align-items: center; gap: 14px; padding-right: 28px; color: var(--cor-texto-3); font-family: var(--fonte-titulo); font-size: clamp(1rem, 2.2vw, 1.5rem); white-space: nowrap; }
.faixa b { color: var(--cor-texto); font-weight: 700; }
.faixa img { width: 28px; height: 28px; border-radius: 6px; opacity: 0.85; }
.faixa__sep { display: inline-block; width: 8px; height: 8px; margin: 0 10px; border-radius: 2px; background: var(--cor-acento); transform: rotate(45deg); opacity: 0.9; vertical-align: middle; }
@keyframes faixa-corre { to { transform: translateX(-50%); } }
.faixa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgb(243 226 168 / 22%) 48%, rgb(255 255 255 / 35%) 50%, rgb(243 226 168 / 22%) 52%, transparent 60%) no-repeat; background-size: 220% 100%; background-position: 170% 0; animation: faixa-brilho 4.5s ease-in-out 1s infinite; }
@keyframes faixa-brilho { 0% { background-position: 170% 0; } 55%, 100% { background-position: -70% 0; } }
.faixa + .bloco { border-top: 0; }

/* Toque de magica nas secoes. */
.passos li { position: relative; overflow: hidden; padding: 0 0 26px; transition: transform 0.35s ease, border-color 0.35s ease; }
.passos li > :not(img) { margin-inline: 24px; }
.passos__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 20px; transition: transform 0.6s ease; }
.passos li::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 10%) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0; }
.passos li:hover { transform: translateY(-6px); border-color: var(--cor-acento); }
.passos li:hover .passos__img { transform: scale(1.06); }
.passos li:hover::after { animation: botao-brilho 1.2s ease; }
.bloco--aula { background: radial-gradient(60% 50% at 85% 0%, rgb(0 169 157 / 12%), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgb(201 162 74 / 10%), transparent 70%); }
.bloco__titulo .brilho { background: none; color: var(--cor-acento); }
.conduz__foto { box-shadow: 0 30px 80px -30px rgb(201 162 74 / 35%); }
.revelar-suave { animation: subir 0.9s both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
@supports (animation-timeline: view()) { .passos li, .checks li, .conduz__foto { animation: subir 1s both; animation-timeline: view(); animation-range: entry 0% entry 55%; } }

/* Ferramentas. */
.ferramentas { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 860px) { .ferramentas { grid-template-columns: repeat(2, 1fr); } }
.ferramenta { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; padding: 16px; border: 1px solid var(--cor-borda); border-radius: 14px; background: var(--cor-superficie); transition: border-color 0.3s ease, transform 0.3s ease; }
.ferramenta:hover { border-color: var(--cor-acento); transform: translateY(-4px); }
.ferramenta img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.ferramenta h3 { margin: 4px 0 4px; font-family: var(--fonte-titulo); font-size: 1.25rem; }
.ferramenta__para { margin-bottom: 8px; color: var(--cor-acento); font-size: 0.85rem; font-weight: 700; }
.ferramenta p:last-child { color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 520px) { .ferramenta { grid-template-columns: 1fr; } .ferramenta img { aspect-ratio: 16 / 10; } }

/* Efeitos de rolagem. */
.surge { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease var(--atraso, 0ms), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--atraso, 0ms); }
.surge.visivel { opacity: 1; transform: none; }
.progresso { position: fixed; top: 0; left: 0; right: 0; z-index: 2147481000; height: 3px; background: linear-gradient(90deg, #00a99d, var(--cor-acento)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.expert--lado:first-child { translate: calc(var(--p, 0) * -30px) calc(var(--p, 0) * 24px); }
.expert--lado:last-child { translate: calc(var(--p, 0) * 30px) calc(var(--p, 0) * 24px); }

/* Icones das ferramentas. */
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 3vw, 28px); max-width: 720px; margin: 36px 0 0; padding: 0; list-style: none; }
.apps li { display: grid; justify-items: center; gap: 10px; }
.apps img { width: clamp(64px, 14vw, 120px); height: auto; filter: drop-shadow(0 16px 24px rgb(0 0 0 / 55%)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); animation: flutua 5s ease-in-out infinite; }
.apps li:nth-child(2) img { animation-delay: -1.2s; }
.apps li:nth-child(3) img { animation-delay: -2.4s; }
.apps li:nth-child(4) img { animation-delay: -3.6s; }
.apps li:hover img { transform: translateY(-8px) rotate(-4deg) scale(1.06); }
.apps span { color: var(--cor-texto-2); font-family: var(--fonte-titulo); font-size: clamp(0.8rem, 2vw, 1rem); font-weight: 700; }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* Os icones de ChatGPT, Gemini e Claude vieram com borda quadriculada: o recorte mostra so o quadrado do app. */
.apps img, .ferramenta__icone { clip-path: inset(14% round 22%); scale: 1.3; }
.ferramenta h3 { display: flex; align-items: center; gap: 10px; }
.ferramenta__icone { width: 34px !important; height: 34px !important; aspect-ratio: 1 !important; object-fit: contain !important; border-radius: 0 !important; }

/* Especialistas recortados. */
.experts { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-top: 40px; border: 1px solid var(--cor-borda); border-radius: 20px; background: radial-gradient(70% 60% at 50% 100%, rgb(201 162 74 / 30%), transparent 70%), var(--cor-superficie); }
.expert img { filter: drop-shadow(0 20px 30px rgb(0 0 0 / 50%)); }
.expert { position: relative; margin: 0; }
.expert img { width: 100%; height: auto; }
.expert--lado { width: 38%; margin-inline: -7%; }
.expert--centro { z-index: 1; width: 48%; }
.expert figcaption { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

/* Quem conduz: tres retratos lado a lado preenchendo o espaco. */
.experts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.experts .expert { position: relative; width: auto; margin: 0; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: 16px; }
.experts .expert--centro { translate: 0 -18px; }
.experts .expert img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: none; transition: transform 0.6s ease; }
.experts .expert:hover img { transform: scale(1.05); }
.experts .expert--lado:first-child, .experts .expert--lado:last-child { translate: 0 calc(var(--p, 0) * 18px); }

/* Chamada final: grade de planta que se move e luz laranja e verde respirando. */
.bloco--final { position: relative; overflow: hidden; isolation: isolate; }
.bloco--final::before { content: ""; position: absolute; inset: -40px; z-index: -1; background-image: linear-gradient(var(--cor-borda) 1px, transparent 1px), linear-gradient(90deg, var(--cor-borda) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 75%); animation: grade-anda 18s linear infinite; }
.bloco--final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 30% 40%, rgb(201 162 74 / 26%), transparent 70%), radial-gradient(35% 45% at 72% 62%, rgb(0 169 157 / 20%), transparent 70%); animation: luz-respira 9s ease-in-out infinite alternate; }
@keyframes grade-anda { to { transform: translate(48px, 48px); } }
@keyframes luz-respira { 0% { transform: translate(-4%, -2%) scale(1); opacity: 0.8; } 100% { transform: translate(4%, 3%) scale(1.12); opacity: 1; } }

/* Para quem e: video em loop no fundo, escurecido para o texto ler bem. */
.bloco--quem { position: relative; overflow: hidden; isolation: isolate; }
.bloco__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bloco--quem::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 10 10 / 94%) 0%, rgb(10 10 10 / 80%) 50%, rgb(10 10 10 / 62%) 100%), linear-gradient(to bottom, var(--cor-fundo), transparent 18%, transparent 82%, var(--cor-fundo)); }
@media (max-width: 859px) { .bloco--quem::before { background: rgb(10 10 10 / 84%); } }

/* Etiquetas mais sobrias: cinza claro, fina, com um tracinho laranja discreto. */
.bloco__etiqueta { display: inline-flex; align-items: center; gap: 10px; color: var(--cor-texto-2); font-family: var(--fonte-texto); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; }
.bloco__etiqueta::before { content: none; }
.passos__n { width: fit-content; background: linear-gradient(90deg, #d9d9d9 0%, #8a8a8a 55%, #3a3a3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bloco__etiqueta { background: linear-gradient(90deg, #d9d9d9 0%, #8a8a8a 55%, #3a3a3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Borda dos cartoes que some para baixo, fundindo no fundo. */
.passos li, .ferramenta { border: 1px solid transparent !important; background: linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box, linear-gradient(to bottom, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 6%) 45%, transparent 85%) border-box !important; }
.passos li:hover, .ferramenta:hover { background: linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box, linear-gradient(to bottom, rgb(201 162 74 / 70%) 0%, rgb(201 162 74 / 15%) 50%, transparent 90%) border-box !important; }
.experts .expert { border: 1px solid transparent; background: linear-gradient(to bottom, rgb(255 255 255 / 22%), transparent 80%) border-box; }

/* Nome na carta: sem selo, texto sobre um esmaecido escuro que sobe da base. */
#sec-quem-conduz .experts .expert::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgb(10 10 10 / 92%), transparent); pointer-events: none; }
#sec-quem-conduz .experts .expert figcaption { z-index: 1; left: 0; right: 0; bottom: 16px; transform: none; padding: 0; background: none; border-radius: 0; text-align: center; font-size: clamp(0.95rem, 1.6vw, 1.25rem); letter-spacing: 0.02em; color: #fff; }

/* Troca de nome e texto ao passar ou tocar na carta. */
#sec-quem-conduz .bloco__miolo--duplo { align-items: start; }
#expert-nome, #expert-bio { transition: opacity 0.16s ease, transform 0.16s ease; }
#expert-nome.troca, #expert-bio.troca { opacity: 0; transform: translateY(8px); }
#sec-quem-conduz .experts .expert { cursor: pointer; }
#sec-quem-conduz .experts .expert.ativo { z-index: 5 !important; outline: none; border: 2px solid transparent !important; background: linear-gradient(135deg, #7a5a1e 0%, #c9a24a 22%, #f3e2a8 45%, #b8892f 62%, #6e4f17 80%, #d9b766 100%) border-box !important; box-shadow: 0 0 26px -8px rgb(184 137 47 / 55%), 0 30px 50px -20px rgb(0 0 0 / 85%) !important; }

/* Quem conduz: fotos maiores. */
#sec-quem-conduz .bloco__miolo { width: min(100%, 1240px); }
@media (min-width: 860px) { #sec-quem-conduz .bloco__miolo--duplo { grid-template-columns: 1.6fr 1fr; } }
#sec-quem-conduz .experts { gap: 0; padding: 30px 20px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sec-quem-conduz .experts .expert { box-shadow: 0 30px 50px -20px rgb(0 0 0 / 85%), 0 10px 20px rgb(0 0 0 / 50%); transition: transform 0.18s ease-out, z-index 0s; }
#sec-quem-conduz .experts .expert img { transition-duration: 0.25s; }
#sec-quem-conduz .experts .expert--lado:first-child { z-index: 1; margin: 0; transform: translateX(22%) rotate(-7deg) translateY(16px); }
#sec-quem-conduz .experts .expert--centro { z-index: 3; transform: none; translate: 0 0; }
#sec-quem-conduz .experts .expert--lado, #sec-quem-conduz .experts .expert--centro { width: auto; }
#sec-quem-conduz .experts { align-items: center; }
#sec-quem-conduz .experts .expert--lado:last-child { z-index: 2; margin: 0; transform: translateX(-22%) rotate(7deg) translateY(16px); }
#sec-quem-conduz .experts .expert:hover { z-index: 4; transform: translateY(-10px) rotate(0); }

/* Prova social em pilula. */
.prova { display: inline-flex; align-items: center; gap: 14px; padding: 6px 18px 6px 6px; border: 1px solid transparent; border-radius: 99px; background: linear-gradient(var(--cor-fundo), var(--cor-fundo)) padding-box, linear-gradient(90deg, rgb(201 162 74 / 60%), rgb(255 255 255 / 8%)) border-box; text-align: left; }
.prova__rostos { display: flex; }
.prova__rostos img, .prova__rostos span { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--cor-superficie); object-fit: cover; filter: grayscale(1); }
.prova__rostos > * + * { margin-left: -12px; }
.prova__rostos span { display: grid; place-items: center; background: linear-gradient(135deg, #b8892f, #f3e2a8); color: #1a1408; font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 800; }
.prova p { margin: 0; color: var(--cor-texto-2); font-size: 0.82rem; line-height: 1.35; max-width: 24ch; }
.prova strong { color: var(--cor-texto); font-weight: 600; }
.prova { gap: 10px; padding: 0; border: 0; background: none; }
.prova__rostos img, .prova__rostos span { width: 24px !important; height: 24px !important; border-width: 1.5px; }
.prova__rostos > * + * { margin-left: -8px; }
.prova__rostos span { background: var(--cor-superficie); color: var(--cor-texto-2); font-size: 0.8rem; font-weight: 600; border-color: var(--cor-borda); }
.prova p { max-width: none; font-size: 0.76rem; white-space: nowrap; }

/* Carrossel dos passos. */
.bloco--aula .passos { display: flex !important; grid-template-columns: none !important; gap: 20px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding: 6px 0 10px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.bloco--aula .passos::-webkit-scrollbar { display: none; }
.bloco--aula .passos li { flex: 0 0 min(78%, 520px); scroll-snap-align: start; opacity: 0.5; transform: scale(0.97); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease !important; }
.bloco--aula .passos li.foco { opacity: 1; transform: none; }
.bloco--aula .passos li .passos__img { aspect-ratio: 16 / 10; }
.carrossel__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.carrossel__pontos { display: flex; gap: 8px; }
.carrossel__pontos span { width: 8px; height: 8px; border-radius: 99px; background: var(--cor-borda); cursor: pointer; transition: width 0.35s ease, background 0.35s ease; }
.carrossel__pontos span.ativo { width: 28px; background: linear-gradient(90deg, #b8892f, #f3e2a8); }
.carrossel__setas { display: flex; gap: 10px; }
.carrossel__seta { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--cor-borda); border-radius: 50%; background: transparent; color: var(--cor-texto); cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.carrossel__seta:hover { border-color: var(--cor-acento); background: rgb(201 162 74 / 10%); transform: scale(1.06); }
.carrossel__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .bloco--aula .passos li { flex-basis: 86%; } }

/* Certificado. */
.cert__foto { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid transparent; background: linear-gradient(135deg, #7a5a1e, #c9a24a 30%, #f3e2a8 50%, #b8892f 70%, #6e4f17) border-box; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 90%), 0 0 60px -20px rgb(201 162 74 / 35%); transform: rotate(-2deg); transition: transform 0.4s ease; }
.cert__foto:hover { transform: rotate(0) scale(1.02); }
.cert__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cert__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgb(243 226 168 / 25%) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 170% 0; animation: faixa-brilho 5s ease-in-out 1.5s infinite; }
.bloco--certificado .checks li::before { background: linear-gradient(135deg, #b8892f, #f3e2a8); }
.bloco--certificado .checks li::after { border-color: #1a1408; }

.cert { max-width: 1000px; margin: 0 auto; text-align: center; }
.cert__selo-topo { display: inline-block; padding: 8px 16px; border-radius: 10px; background: #1a1a1a; color: #e8e8e8; font-weight: 600; font-size: 0.9rem; margin: 0 0 20px; }
.cert__titulo { font-family: var(--fonte-titulo); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0 0 44px; color: var(--cor-texto); }
.cert__titulo em { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 700; background: linear-gradient(135deg, #a67c2e, #f3e2a8 50%, #c9a24a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cert__papel { position: relative; background: radial-gradient(circle at 50% 40%, #fbf8f1, #f1ece0); border-radius: 8px; padding: 22px; box-shadow: 0 50px 90px -30px rgb(0 0 0 / 90%); color: #2b2b2b; }
.cert__moldura { border: 1px solid #c9b27a; outline: 1px solid #c9b27a; outline-offset: -8px; padding: 32px 40px 28px; }
.cert__cabeca { display: flex; justify-content: space-between; align-items: center; }
.cert__cabeca img { height: 64px; width: auto; filter: invert(1) brightness(0.25); }
.cert__roseta { width: 40px; color: #a8a8a8; }
.cert__tipo { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0 14px; color: #8a6d2b; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; }
.cert__tipo::before, .cert__tipo::after { content: ""; width: 60px; height: 1px; background: #c9b27a; }
.cert__certificamos { margin: 0; color: #555; font-size: 0.95rem; }
.cert__nome { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: clamp(2rem, 5vw, 3.6rem); color: #15151f; margin: 6px auto 12px; padding-bottom: 8px; border-bottom: 1px solid #d7d0bf; max-width: 520px; min-height: 1.3em; overflow-wrap: anywhere; }
.cert__texto { margin: 0 0 28px; color: #444; line-height: 1.6; }
.cert__texto strong { color: #15151f; }
.cert__pe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.cert__linha { border-top: 1px solid #cfc7b4; padding-top: 6px; text-align: left; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #777; position: relative; }
.cert__linha svg { position: absolute; bottom: 100%; left: 0; width: 160px; }
.cert__linha--dir { text-align: right; }
.cert__linha--dir b { position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; font-size: 1rem; letter-spacing: 0.05em; color: #15151f; }
.cert__medalha { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 0deg, #a67c2e, #f3e2a8, #b8892f, #f3e2a8, #a67c2e, #e6c98a, #a67c2e); box-shadow: 0 8px 18px rgb(0 0 0 / 30%), inset 0 0 0 6px rgb(255 255 255 / 25%); clip-path: polygon(50% 0, 61% 6%, 74% 3%, 80% 15%, 93% 18%, 93% 31%, 100% 42%, 95% 54%, 100% 66%, 90% 75%, 88% 89%, 75% 91%, 64% 100%, 50% 95%, 36% 100%, 25% 91%, 12% 89%, 10% 75%, 0 66%, 5% 54%, 0 42%, 7% 31%, 7% 18%, 20% 15%, 26% 3%, 39% 6%); }
.cert__medalha span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3c8, #c9a24a 60%, #8a6420); color: #4a3510; font-family: var(--fonte-titulo); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; }
.cert__nota { margin: 22px 0 0; color: var(--cor-texto-2); font-size: 0.95rem; }
@media (max-width: 640px) { .cert__papel { padding: 10px; } .cert__moldura { padding: 20px 14px; outline-offset: -5px; } .cert__cabeca img { height: 44px; } .cert__pe { grid-template-columns: 1fr; justify-items: center; gap: 14px; } .cert__linha { display: none; } .cert__medalha { width: 76px; height: 76px; } .cert__medalha span { width: 46px; height: 46px; font-size: 0.7rem; } }

/* Topo cabe na tela no computador. */
@media (min-width: 900px) {
  .cartao { padding-top: 22px !important; padding-bottom: 18px !important; }
  .cartao .logo { height: 72px !important; }
  .cartao .quando { margin: 8px 0 6px !important; font-size: 0.9rem !important; }
  .cartao h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important; margin: 0 0 8px !important; line-height: 1.05 !important; }
  .cartao .apoio { font-size: 0.92rem !important; line-height: 1.45 !important; margin: 0 0 10px !important; }
  .cartao .prova { margin: 0 0 10px !important; padding-bottom: 10px !important; }
  .cartao .formulario { gap: 8px !important; }
  .cartao .campo { gap: 4px !important; margin: 0 !important; }
  .cartao .campo label { font-size: 0.8rem !important; }
  .cartao input { min-height: 44px !important; height: 44px !important; padding-top: 8px !important; padding-bottom: 8px !important; font-size: 0.95rem !important; }
  .cartao .botao--enviar { min-height: 50px !important; padding-top: 12px !important; padding-bottom: 12px !important; margin-top: 4px !important; }
  .cartao .formulario p, .cartao small { font-size: 0.75rem !important; margin-top: 4px !important; }
}

@media (min-width: 900px) {
  .cartao { justify-content: center !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .cartao .logo { height: 56px !important; }
  .cartao .quando { margin: 4px 0 4px !important; }
  .cartao h1 { font-size: clamp(1.5rem, 2vw, 1.95rem) !important; }
  .cartao .quando { font-size: 0.82rem !important; }
  .cartao .apoio { font-size: 0.8rem !important; line-height: 1.45 !important; max-width: 46ch; margin-left: auto !important; margin-right: auto !important; }
  .cartao input, .cartao .iti input { height: 40px !important; min-height: 40px !important; }
  .cartao .botao--enviar { min-height: 46px !important; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .cartao .prova { display: none !important; }
}

.cert__papel { max-width: 680px; margin: 0 auto; padding: 16px; }
.cert__moldura { padding: 22px 28px 20px; }
.cert__cabeca img { height: 46px; }
.cert__roseta { width: 30px; }
.cert__tipo { margin: 10px 0 8px; font-size: 0.7rem; }
.cert__nome { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 400px; }
.cert__texto { font-size: 0.9rem; margin-bottom: 20px; }
.cert__medalha { width: 76px; height: 76px; }
.cert__medalha span { width: 46px; height: 46px; font-size: 0.7rem; }
.cert__linha svg { width: 120px; }
.cert__titulo { margin-bottom: 32px; }

.cert__nome--digita::after { content: ""; display: inline-block; width: 2px; height: 0.9em; margin-left: 4px; vertical-align: -0.1em; background: #c9a24a; animation: cert-cursor 0.9s steps(1) infinite; }
@keyframes cert-cursor { 50% { opacity: 0; } }

.consentimento { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 0.78rem; line-height: 1.45; color: var(--cor-texto-2); cursor: pointer; margin: 2px 0; }
.consentimento input { appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid #6b5a33; border-radius: 5px; background: #0a0a0a; display: grid; place-items: center; cursor: pointer; }
.consentimento input:checked { background: linear-gradient(135deg, #a67c2e, #f3e2a8); border-color: #c9a24a; }
.consentimento input:checked::after { content: ""; width: 5px; height: 9px; border: solid #1a1408; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.consentimento input:focus-visible { outline: 2px solid #c9a24a; outline-offset: 2px; }
.consentimento a { color: #e6c98a; text-decoration: underline; }

.cartao .consentimento input { height: 18px !important; min-height: 18px !important; width: 18px !important; padding: 0 !important; }
@media (min-width: 900px) and (max-height: 820px) { .cartao .formulario__confianca { display: none !important; } }

/* Duvidas. */
.bloco__miolo--faq { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 860px) { .bloco__miolo--faq { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .faq__topo { position: sticky; top: 110px; } }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid transparent; border-radius: 16px; background: linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box, linear-gradient(to bottom, rgb(255 255 255 / 16%), transparent 90%) border-box; transition: background 0.3s ease; }
.faq details[open] { background: linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box, linear-gradient(135deg, #7a5a1e, #c9a24a 30%, #f3e2a8 50%, #b8892f 70%, transparent) border-box; }
.faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; font-family: var(--fonte-titulo); font-size: clamp(1.02rem, 2vw, 1.2rem); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--cor-borda); border-radius: 50%; transition: transform 0.3s ease, border-color 0.3s ease; }
.faq summary span::before, .faq summary span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--cor-texto); transform: translate(-50%, -50%); transition: transform 0.3s ease; }
.faq summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary span { border-color: var(--cor-acento); transform: rotate(180deg); }
.faq details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.faq summary:hover span { border-color: var(--cor-acento); }
.faq details p { margin: 0; padding: 0 24px 24px; color: var(--cor-texto-2); font-size: 1rem; line-height: 1.7; animation: faq-abre 0.35s ease; }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Sem linha entre as secoes: a pagina corre continua. */
.bloco { border-top: 0 !important; border-bottom: 0 !important; }

/* Arredondamento unico em todos os botoes. */
.botao--enviar, .cartao .botao--enviar, .botao--final, body .flxp-ck button, body .flxp-cr .flxp-cr__link { border-radius: 12px !important; }
.bloco .botao--final { width: auto !important; max-width: 100%; min-height: 58px; padding: 0 36px; }

/* Conteudo do cartao centralizado. */
.cartao { justify-items: center; text-align: center; }
.cartao h1, .cartao .apoio { margin-inline: auto; }
.cartao .formulario { text-align: left; }
.formulario .formulario__confianca { text-align: center; }
@media (min-width: 900px) {
  .cartao { justify-items: start; text-align: left; }
  .cartao h1, .cartao .apoio { margin-inline: 0 !important; }
  .formulario .formulario__confianca { text-align: left; }
}

/* Assinatura GMV: o PNG e quadrado com respiro em volta; o tamanho maior e as margens negativas compensam o vazio. */
.cartao .logo-reflexo { display: block; max-width: 100%; margin: -50px 0 -56px; }
.cartao .logo { height: 180px !important; max-width: 100%; object-fit: contain; }
@media (min-width: 900px) {
  .cartao .logo-reflexo { margin: -53px 0 -59px; }
  .cartao .logo { height: 190px !important; }
}

/* Titulos sobrios, no espirito da Helvetica: peso 700 e letras um pouco mais fechadas. */
h1, h2, h3, .cartao h1 { font-weight: 700 !important; letter-spacing: -0.02em; }

/* Monitor largo: a foto fica ancorada no trio, sem esticar. */
@media (min-width: 1700px) and (min-height: 640px) {
  .palco__foto img { object-position: 50% 0; }
  .rodape { left: var(--borda); }
}

/* Telas largas: o conteudo cresce junto com a tela. */
@media (min-width: 1600px) and (min-height: 800px) {
  .cartao .logo-reflexo { margin: -64px 0 -71px; }
  .cartao .logo { height: 230px !important; }
  .cartao h1 { font-size: clamp(2rem, 1.7vw, 2.7rem) !important; margin-bottom: 12px !important; }
  .cartao .apoio { font-size: 0.98rem !important; line-height: 1.5 !important; max-width: 52ch; margin-bottom: 14px !important; }
  .cartao .formulario { gap: 12px !important; }
  .cartao .campo label { font-size: 0.86rem !important; }
  .cartao input, .cartao .iti input { height: 48px !important; min-height: 48px !important; font-size: 1rem !important; }
  .cartao .botao--enviar { min-height: 56px !important; font-size: 1.12rem; }
  .cartao .prova { display: inline-flex !important; }
  .cartao .consentimento { font-size: 0.84rem; }
}

/* Estilo preto premium: sem bordas, superficies quase pretas, mais respiro, titulos grandes e fechados. */
body { background: #000; }
.bloco, .faq, .ferramenta, .ferramentas, .apps li, .doc, .doc__topo, .faq details, .faq summary, .campo, .formulario, .para-quem li, .rodape, .prova, .cartao, [class*="flxb-"] { border: 0 !important; box-shadow: none !important; }
.ferramenta, .faq details, [class*="flxb-"][class*="cartao"], [class*="flxb-"][class*="item"], [class*="flxb-"][class*="passo"], [class*="flxb-"][class*="numero"] { background: var(--cor-superficie) !important; border-radius: var(--raio) !important; }
.bloco { padding-top: clamp(72px, 10vw, 128px) !important; padding-bottom: clamp(72px, 10vw, 128px) !important; }
.bloco__titulo, .bloco h2, .doc h2 { letter-spacing: -0.03em; line-height: 1.04; }
.bloco__etiqueta, .bloco .bloco__etiqueta { color: var(--cor-texto-3); letter-spacing: 0.18em; }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]) { border-radius: 14px; background: var(--campo-fundo); }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]):focus { box-shadow: 0 0 0 2px var(--campo-foco) !important; }
.prova__rostos { display: none !important; }
.prova { padding: 0 !important; background: transparent !important; }
.faq details { margin-bottom: 10px; }
.faq summary span { border: 1px solid var(--cor-texto-3) !important; }
.ferramenta > img:first-child { display: none !important; }
.passos .passos__img { aspect-ratio: 1 / 1 !important; width: 46% !important; height: auto !important; max-height: none !important; margin: 28px auto 6px !important; object-fit: cover; border-radius: 24px; background: #000; }
/* Plano por fases. */
.fases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: fase; }
.fases li { display: grid; align-content: start; gap: 10px; padding: 28px 24px; background: var(--cor-superficie); border-radius: var(--raio); }
.fases__n { color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fases h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.fases p { margin: 0; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.55; }
.fases li:last-child { background: linear-gradient(160deg, rgb(201 162 74 / 22%), var(--cor-superficie) 60%); }
@media (max-width: 1100px) { .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .fases { grid-template-columns: 1fr; } }
.bloco__acao { display: flex; justify-content: center; margin-top: 40px; }
.bloco__acao .botao--final { text-decoration: none; }

/* Momentos do negócio. */
.momentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 44px 0 0; padding: 0; list-style: none; }
.momentos li { display: grid; align-content: start; gap: 14px; padding: 36px 30px; background: var(--cor-superficie); border-radius: var(--raio); }
.momentos__n { font-family: var(--fonte-titulo); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--cor-acento); }
.momentos h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.momentos p { margin: 0; color: var(--cor-texto-2); font-size: 0.98rem; line-height: 1.6; }
.momentos__diag { margin-top: 10px; padding-top: 18px; color: var(--cor-texto); font-size: 0.95rem; }
.momentos__diag strong { display: block; margin-bottom: 6px; color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 900px) { .momentos { grid-template-columns: 1fr; } .momentos li { padding: 30px 24px; } }

/* Antes e depois por frente. */
.virada { display: grid; gap: 8px; margin: 44px 0 0; }
.virada__cabeca, .virada__linha { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 24px; align-items: start; }
.virada__cabeca { padding: 0 30px 8px; color: var(--cor-texto-2); font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.virada__cabeca span:last-child { color: var(--cor-acento); }
.virada__linha { padding: 26px 30px; background: var(--cor-superficie); border-radius: var(--raio); }
.virada__frente { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.virada__hoje { margin: 0; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.55; }
.virada__depois { margin: 0; color: var(--cor-texto); font-size: 0.98rem; font-weight: 500; line-height: 1.55; }
@media (max-width: 800px) {
  .virada__cabeca { display: none; }
  .virada__linha { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .virada__hoje::before, .virada__depois::before { display: block; margin-bottom: 4px; font-family: var(--fonte-titulo); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .virada__hoje::before { content: "Hoje"; color: var(--cor-texto-3); }
  .virada__depois::before { content: "Com o GMV"; color: var(--cor-acento); }
}

/* Apoios do acompanhamento. */
.apoios { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.apoios__cabeca { position: sticky; top: 96px; }
.apoios__cabeca .bloco__intro { margin-bottom: 0; }
.apoios__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.apoios__lista li { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; padding: 22px 30px 22px 22px; background: var(--cor-superficie); border-radius: var(--raio); }
.apoios__icone { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 18px; mix-blend-mode: screen; }
.apoios__n { padding-top: 6px; color: var(--cor-acento); font-family: var(--fonte-titulo); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; }
.apoios h3 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.apoios p { margin: 0; color: var(--cor-texto-2); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 900px) {
  .apoios { grid-template-columns: 1fr; gap: 28px; }
  .apoios__cabeca { position: static; }
  .apoios__lista li { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  .apoios__icone { width: 96px; height: 96px; }
}

/* GMV OS: texto de um lado e a tela do sistema desenhada em CSS do outro. */
.os-grade { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.os-lista { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.os-lista li { display: grid; gap: 4px; }
.os-lista strong { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.os-lista span { color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.55; }
.os-plataformas { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.os-plataformas li { margin: 0; padding: 0; }
.os-plataformas button { appearance: none; cursor: pointer; padding: 9px 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #161616 0%, #0b0b0b 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); color: var(--cor-texto-2); font-family: var(--fonte-titulo); font-size: 0.82rem; font-weight: 600; transition: color 0.3s ease, box-shadow 0.3s ease, translate 0.3s ease; }
.os-plataformas button:hover { color: var(--cor-texto); translate: 0 -2px; }
.os-plataformas button.ativo { color: #000; background: var(--cor-texto); box-shadow: none; }
.os-plataformas button:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; }
.os-figura img { transition: opacity 0.35s ease, transform 0.35s ease; }
.os-figura img.troca { opacity: 0; transform: scale(0.985); }
.os-nota { margin: 18px 0 0; color: var(--cor-texto-3); font-size: 0.9rem; }
.os-figura { margin: 0; }
.os-figura img { display: block; width: 100%; height: auto; border-radius: 22px; -webkit-mask-image: radial-gradient(130% 110% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(130% 110% at 50% 50%, #000 62%, transparent 100%); }
.os { overflow: hidden; border-radius: 18px; background: #0c0c0c; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 40px 80px -40px rgb(0 0 0 / 90%); font-family: var(--fonte-texto); }
.os__barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #121212; }
.os__barra span { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; }
.os__barra em { margin-inline: auto; padding-right: 44px; font-style: normal; font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-texto-3); }
.os__corpo { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-height: 340px; }
.os__menu { display: grid; align-content: start; gap: 4px; padding: 16px 12px; background: #0f0f0f; }
.os__menu b, .os__menu span { padding: 9px 12px; border-radius: 9px; color: var(--cor-texto-3); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.os__menu b { color: var(--cor-texto); background: #1a1a1a; }
.os__tela { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.os__tile { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 12px; background: #161616; }
.os__tile--largo { grid-column: span 2; }
.os__tile small { color: var(--cor-texto-3); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.os__tile strong { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.os__tile p { margin: 0; color: var(--cor-texto-2); font-size: 0.85rem; line-height: 1.45; }
.os__barras { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 8px; }
.os__barras i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #2c2c2c; }
.os__barras i:last-child { background: var(--cor-acento); }
.os__check { display: grid; gap: 7px; margin: 6px 0 0; padding: 0; list-style: none; }
.os__check li { position: relative; padding-left: 22px; color: var(--cor-texto-2); font-size: 0.85rem; line-height: 1.4; }
.os__check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #3a3a3a; }
.os__check li.feito { color: var(--cor-texto); }
.os__check li.feito::before { background: var(--cor-texto); border-color: var(--cor-texto); }
.os__check li.feito::after { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 3px; border-left: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(-45deg); }
.os__tile .os__status { font-size: 1.1rem; }
.os__status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2bd576; vertical-align: middle; }
.os__tile--linha { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.os__tile--linha > div { display: grid; gap: 4px; }
.os__tile--linha strong { font-size: 1.1rem; }
.os__tile--linha p { white-space: nowrap; }
@media (max-width: 960px) { .os-grade { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) {
  .os__corpo { grid-template-columns: 1fr; min-height: 0; }
  .os__menu { display: flex; gap: 2px; overflow-x: auto; padding: 10px; }
  .os__tela { grid-template-columns: 1fr; }
  .os__tile--largo { grid-column: auto; }
}

/* GMV OS como ecossistema: uma cena so, com o notebook ao centro, o navegador atras e os celulares na frente. */
.os-cabeca { max-width: 760px; }
.os-figura { position: relative; padding-bottom: 6%; }
.os-figura { view-timeline-name: --os; view-timeline-axis: block; }
.os-figura .ecossistema { position: relative; z-index: 2; width: 100%; aspect-ratio: 16 / 9; height: auto; margin: -26% 0 0; }
.os-figura .ecossistema__desktop { left: 44%; width: 64%; }
.os-figura .ecossistema__web { left: -2%; top: 4%; width: 32%; opacity: 0.7; }
.os-figura .ecossistema__ios { left: auto; right: 15%; bottom: 4%; width: 25%; z-index: 3; }
.os-figura .ecossistema__android { right: -2%; bottom: -6%; width: 25%; z-index: 4; }
/* Paralaxe na rolagem: cada camada desce de uma altura diferente ate a posicao natural. */
@keyframes os-paralaxe { from { translate: 0 var(--p, 60px); } to { translate: 0 0; } }
@supports (animation-timeline: view()) {
  .os-figura > img, .os-figura .ecossistema img { animation: os-paralaxe 1s linear both; animation-timeline: --os; animation-range: cover 0% cover 85%; }
  .os-figura > img { --p: 40px; }
  .os-figura .ecossistema__web { --p: 90px; }
  .os-figura .ecossistema__desktop { --p: 130px; }
  .os-figura .ecossistema__ios { --p: 190px; }
  .os-figura .ecossistema__android { --p: 230px; }
}
.ecossistema img { position: absolute; display: block; height: auto; -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(62% 62% at 50% 50%, #000 52%, transparent 100%); }
.ecossistema__desktop { left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%); z-index: 2; }
.ecossistema__web { left: -4%; top: -2%; width: 46%; opacity: 0.85; z-index: 1; }
.ecossistema__ios { left: 2%; bottom: -8%; width: 36%; z-index: 3; }
.ecossistema__android { right: 0; bottom: -10%; width: 34%; z-index: 3; }
.os-acessos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--cor-texto-2); font-family: var(--fonte-titulo); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.os-acessos li { display: inline-flex; align-items: center; gap: 9px; }
.os-acessos svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cor-texto); }
@media (max-width: 760px) {
  .os-figura { padding-bottom: 0; }
  .os-figura .ecossistema { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; aspect-ratio: auto; height: auto; margin: 12px 0 0; }
  .os-figura > img, .os-figura .ecossistema img { animation: none; translate: 0 0; }
  .ecossistema img { position: static; width: 100%; transform: none; opacity: 1; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%); }
  .ecossistema__desktop { grid-column: 1 / -1; }
  .ecossistema .ecossistema__web { display: none; }
  .os-acessos { gap: 8px 18px; }
}

/* Como voce aprende: estante estilo streaming. Fileiras que rolam na horizontal, alinhadas ao miolo e sangrando ate a borda da tela. */
.estante { --rec: max(20px, calc((100% - 1080px) / 2)); display: grid; gap: 40px; margin: 40px -20px 0; }
.estante__fila { min-width: 0; animation: fila-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
@keyframes fila-entra { from { opacity: 0; transform: translateY(32px); } }
.estante__cabeca { max-width: calc(var(--rec) + 720px); padding: 0 20px 0 var(--rec); }
.estante__cabeca h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.estante__cabeca p { margin: 6px 0 0; color: var(--cor-texto-2); font-size: 0.95rem; line-height: 1.55; }
.estante__trilho { display: flex; gap: 16px; margin: 0; padding: 22px var(--rec) 28px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: var(--rec); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
.estante__trilho::-webkit-scrollbar { display: none; }
.estante__trilho > li { flex: 0 0 auto; scroll-snap-align: start; }
/* Vitrine: o texto em duas colunas e o leque em perspectiva com as capas das series (no estilo dos cartoes de aula) e o celular no centro. */
.vitrine__topo { display: grid; gap: 28px 56px; align-items: start; }
@media (min-width: 860px) { .vitrine__topo { grid-template-columns: 0.85fr 1.15fr; } }
.vitrine__selo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.vitrine__selo em { padding: 4px 8px; border: 1px solid var(--cor-borda); border-radius: 6px; background: var(--cor-superficie); color: var(--cor-texto-2); font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.vitrine__apoio { max-width: 38ch; margin: 0; color: var(--cor-texto-2); font-size: 1rem; line-height: 1.65; }
.vitrine__frase { max-width: none; margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.vitrine__grifo { display: block; margin-top: 8px; font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 1.3em; font-style: italic; font-weight: 400; color: var(--cor-acento); }
.vitrine { position: relative; display: flex; justify-content: center; gap: 14px; width: 100%; margin: 48px 0 0; padding: 16px 0 28px; perspective: 1400px; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 70%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.vitrine figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: 14px; background: var(--cor-superficie); }
.vitrine img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vitrine__capa { flex: 0 0 176px; aspect-ratio: 3 / 4; opacity: var(--o, 1); transform: rotateY(calc(var(--k, 0) * -6deg)) translateZ(calc(var(--k, 0) * var(--k, 0) * -7px)); transition: transform 0.5s ease, opacity 0.5s ease, border-color 0.35s ease; }
.vitrine__capa:hover { z-index: 2; opacity: 1; transform: rotateY(0) translateZ(40px) translateY(-6px); border-color: var(--cor-acento); }
@keyframes vitrine-deriva { from { translate: calc(var(--k, 0) * 12px) 0; } to { translate: calc(var(--k, 0) * -12px) 0; } }
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .vitrine__capa { animation: vitrine-deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
/* Os tres formatos numa linha limpa, sem fundo: o icone em placa fundindo no preto da pagina e o texto ao lado. */
.vitrine__formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.vitrine__formatos li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.vitrine__formatos img { display: block; width: 96px; aspect-ratio: 1; object-fit: cover; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(60% 60% at 50% 50%, #000 55%, transparent 100%); transition: transform 0.5s ease; }
.vitrine__formatos li:hover img { transform: scale(1.08); }
.vitrine__formatos h3 { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.vitrine__formatos p { margin: 0; color: var(--cor-texto-2); font-size: 0.9rem; line-height: 1.55; }
/* Cenas das sessoes ao vivo e das imersoes: foto com degrade, selo e titulo. */
.cena { position: relative; width: 300px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 24px 50px -24px rgb(0 0 0 / 90%); transition: transform 0.35s ease; }
.cena img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 0.6s ease; }
.cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 10 10 / 5%) 30%, rgb(10 10 10 / 90%)); }
.cena__vivo { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 4px; background: rgb(10 10 10 / 70%); backdrop-filter: blur(6px); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-texto); }
.cena__vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 0 rgb(229 57 53 / 60%); animation: cena-pulso 1.6s ease-out infinite; }
@keyframes cena-pulso { to { box-shadow: 0 0 0 8px rgb(229 57 53 / 0%); } }
.cena__texto { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; }
.cena__texto strong { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.cena__texto span { color: var(--cor-texto-2); font-size: 0.82rem; line-height: 1.4; }
.cena:hover { z-index: 2; transform: translateY(-6px) scale(1.03); }
.cena:hover img { transform: scale(1.06); }
.cena--larga { width: 520px; aspect-ratio: 21 / 9; }
.cena--larga img { object-position: 50% 32%; }
.cena--larga .cena__vivo::before { display: none; }
.cena--larga .cena__texto strong { font-size: 1.3rem; }
.cena--larga .cena__texto span { max-width: 42ch; font-size: 0.88rem; }
@media (max-width: 900px) {
  .estante { gap: 32px; margin-top: 28px; }
  .estante__trilho { gap: 12px; padding-top: 16px; padding-bottom: 22px; }
  .vitrine { justify-content: flex-start; gap: 12px; width: auto; margin: 36px -20px 0; padding: 0 20px 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; perspective: none; -webkit-mask-image: none; mask-image: none; }
  .vitrine::-webkit-scrollbar { display: none; }
  .vitrine__capa { flex-basis: 46vw; opacity: 1; transform: none; scroll-snap-align: center; }
  .vitrine__formatos { grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }
  .cena { width: 260px; }
  .cena--larga { width: 300px; aspect-ratio: 16 / 9; }
  .cena--larga .cena__texto strong { font-size: 1.1rem; }
  .cena--larga .cena__texto span { font-size: 0.8rem; }
}

/* Jornada das etapas: a secao fica presa na tela e a trilha anda na horizontal conforme a rolagem. A linha de luz se desenha, um cometa percorre o caminho, os pontos acendem e os cartoes surgem um a um. */
.bloco--fases { padding-top: 0; padding-bottom: 48px; }
.jornada { --rec: max(20px, calc((100vw - 1080px) / 2)); position: relative; margin: 0 -20px; view-timeline-name: --jornada; view-timeline-axis: block; }
.jornada__palco { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; box-sizing: border-box; padding: clamp(40px, 5vw, 64px) 0 36px; overflow-x: clip; }
.jornada__palco::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 62%, rgb(255 255 255 / 5%), transparent 70%); }
.jornada__palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 12% 28%, rgb(255 255 255 / 55%), transparent 60%), radial-gradient(1px 1px at 32% 72%, rgb(255 255 255 / 45%), transparent 60%), radial-gradient(1.5px 1.5px at 58% 22%, rgb(255 255 255 / 60%), transparent 60%), radial-gradient(1px 1px at 76% 64%, rgb(255 255 255 / 40%), transparent 60%), radial-gradient(1px 1px at 90% 36%, rgb(255 255 255 / 50%), transparent 60%), radial-gradient(1.5px 1.5px at 44% 88%, rgb(255 255 255 / 45%), transparent 60%), radial-gradient(1px 1px at 22% 50%, rgb(255 255 255 / 40%), transparent 60%); animation: jornada-cintila 5s ease-in-out infinite alternate; }
@keyframes jornada-cintila { from { opacity: 0.3; } to { opacity: 1; } }
.jornada__topo { position: relative; z-index: 1; padding: 0 20px; }
.jornada__topo .bloco__titulo { max-width: 22ch; font-size: clamp(1.7rem, 2.7vw, 2.3rem); }
.jornada__topo .bloco__intro { margin-bottom: 0; font-size: 1rem; line-height: 1.6; }
.jornada__trilho { position: relative; z-index: 1; width: max-content; padding: 0 var(--rec); }
.jornada__etapas { position: relative; display: flex; gap: 50px; width: 2000px; margin: 0; padding: 0; list-style: none; }
.jornada__linha { position: absolute; left: 0; top: 0; width: 100%; height: 160px; overflow: visible; pointer-events: none; }
.jornada__linha path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jornada__base { stroke: rgb(255 255 255 / 10%); }
.jornada__luz { stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgb(255 255 255 / 75%)); }
.jornada__cometa { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgb(255 255 255 / 85%), 0 0 40px 12px rgb(255 255 255 / 22%); offset-path: path("M0 110 C 60 20, 120 20, 180 80 S 300 150, 384 100 S 520 20, 588 80 S 700 150, 792 100 S 930 20, 996 80 S 1100 150, 1200 100 S 1340 20, 1404 80 S 1520 150, 1608 100 S 1750 20, 1812 80 S 1950 130, 2000 90"); offset-distance: 100%; offset-rotate: auto; pointer-events: none; }
.jornada__cometa::after { content: ""; position: absolute; right: 100%; top: 50%; width: 110px; height: 2px; translate: 0 -50%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 75%)); filter: blur(0.6px); }
.etapa { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: stretch; justify-items: center; flex: 0 0 360px; width: 360px; }
.etapa__no { position: relative; display: block; width: 14px; height: 14px; margin: 73px 0 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / 8%), 0 0 22px rgb(255 255 255 / 55%); }
.etapa__no::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 22%); }
.etapa__cartao { position: relative; align-self: stretch; box-sizing: border-box; width: 100%; margin-top: 24px; padding: 24px 24px 22px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 22px; background: linear-gradient(135deg, #1b1b1b 0%, #080808 42%, #131313 64%, #060606 100%); box-shadow: 0 36px 60px -34px rgb(0 0 0 / 95%), inset 0 1px 0 rgb(255 255 255 / 9%); overflow: hidden; transition: border-color 0.4s ease; }
.etapa__cartao::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0) 0 3px, rgb(255 255 255 / 2.5%) 3px 4px); }
.etapa__cartao::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 6%) 44%, rgb(255 255 255 / 16%) 50%, rgb(255 255 255 / 6%) 56%, transparent 70%) no-repeat; background-size: 250% 100%; background-position: 170% 0; }
.etapa__cartao:hover { border-color: rgb(255 255 255 / 20%); }
.etapa__cartao:hover::after { animation: faixa-brilho 1.6s ease; }
.etapa__cartao > * { position: relative; z-index: 1; }
@keyframes cartao-brilho { from { background-position: 190% 0; } to { background-position: -90% 0; } }
.etapa__cartao small { position: absolute; top: -10px; right: 12px; z-index: 0; margin: 0; pointer-events: none; color: rgb(255 255 255 / 5%); font-family: var(--fonte-titulo); font-size: 7rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.etapa__cartao h3 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.etapa__cartao em { display: block; margin-bottom: 12px; color: var(--cor-texto-3); font-size: 0.8rem; font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
.etapa__cartao p { margin: 0 0 12px; color: var(--cor-texto-2); font-size: 0.92rem; line-height: 1.5; }
.etapa__cartao b { display: block; color: var(--cor-acento); font-size: 0.82rem; font-weight: 600; line-height: 1.45; }
.jornada__barra { position: relative; z-index: 1; height: 2px; margin: 0 var(--rec); border-radius: 2px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.jornada__barra i { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, rgb(255 255 255 / 35%), #fff); }
@keyframes jornada-anda { to { translate: calc(100vw - 100%) 0; } }
@keyframes jornada-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jornada-voa { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes jornada-acende { from { opacity: 0.2; scale: 0.6; box-shadow: none; } to { opacity: 1; scale: 1; box-shadow: 0 0 0 6px rgb(255 255 255 / 8%), 0 0 22px rgb(255 255 255 / 55%); } }
@keyframes jornada-surge { from { opacity: 0; translate: 0 28px; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes jornada-barra { from { scale: 0 1; } to { scale: 1 1; } }
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .jornada { height: 440vh; }
    .jornada__palco { position: sticky; top: 0; min-height: 100vh; justify-content: center; }
    .jornada__topo .bloco__etiqueta { margin-bottom: 6px; }
    .jornada__topo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px 56px; align-items: end; width: min(100%, 1080px); margin: 0 auto; padding: 0; }
    .jornada__topo .bloco__etiqueta { grid-column: 1; margin-bottom: 0; }
    .jornada__topo .bloco__titulo { grid-column: 1; margin-bottom: 0; }
    .jornada__topo .bloco__intro { grid-column: 2; grid-row: 1 / span 2; }
    .jornada__trilho { animation: jornada-anda linear both; animation-timeline: --jornada; animation-range: contain 8% contain 92%; }
    .jornada__luz { animation: jornada-desenha linear both; animation-timeline: --jornada; animation-range: contain 0% contain 88%; }
    .jornada__cometa { animation: jornada-voa linear both; animation-timeline: --jornada; animation-range: contain 0% contain 88%; }
    .etapa__no { animation: jornada-acende ease both; animation-timeline: --jornada; animation-range: contain calc(var(--i, 0) * 17%) contain calc(var(--i, 0) * 17% + 12%); }
    .etapa__cartao { animation: jornada-surge ease both; animation-timeline: --jornada; animation-range: contain calc(var(--i, 0) * 17% + 2%) contain calc(var(--i, 0) * 17% + 16%); }
    .etapa__cartao::after { animation: cartao-brilho linear both; animation-timeline: --jornada; animation-range: contain calc(var(--i, 0) * 17% + 6%) contain calc(var(--i, 0) * 17% + 34%); }
    .etapa__cartao:hover::after { animation: faixa-brilho 1.6s ease; }
    .jornada__barra i { animation: jornada-barra linear both; animation-timeline: --jornada; animation-range: contain 0% contain 100%; }
  }
}
@supports not (animation-timeline: view()) {
  .jornada__trilho { width: auto; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .jornada__etapas { padding: 0 var(--rec); }
}
@media (max-width: 900px) {
  .jornada__palco { gap: 24px; padding: 56px 0 8px; }
  .jornada__trilho { width: auto; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .jornada__trilho::-webkit-scrollbar { display: none; }
  .jornada__etapas { width: max-content; gap: 14px; padding: 0 20px 8px; }
  .jornada__linha, .jornada__cometa, .etapa__no, .jornada__barra { display: none; }
  .etapa { flex-basis: 82vw; width: 82vw; scroll-snap-align: center; }
  .etapa__cartao { margin-top: 0; }
}

/* Nichos em etiquetas. */
.nichos { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
/* Acabamento piano black: laca preta brilhante, reflexo na metade de cima, brilho que atravessa ao passar o mouse. */

.nichos li { position: relative; overflow: hidden; isolation: isolate; padding: 13px 20px; border-radius: 999px; color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: 0.95rem; font-weight: 600; cursor: default; background: linear-gradient(180deg, #161616 0%, #0b0b0b 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, color 0.3s ease; }
/* Brilho discreto que atravessa a etiqueta ao passar o mouse. */
.nichos li::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 30%; background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 9%) 50%, transparent 100%); transform: translateX(-140%) skewX(-18deg); pointer-events: none; }
.nichos li:hover { translate: 0 -2px; color: var(--cor-acento); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
.nichos li:hover::after { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transform: translateX(440%) skewX(-18deg); }
/* Tres faixas que deslizam, com profundidade: a de tras menor, apagada e lenta; a da frente inteira e mais rapida. */
.nichos-faixas { display: grid; gap: 10px; margin: 38px 0 0; }
.nichos-faixa { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nichos-faixas .nichos { flex-wrap: nowrap; width: max-content; margin: 0; animation: nichos-desliza var(--dur, 50s) linear infinite; will-change: transform; }
.nichos-faixa--volta .nichos { animation-direction: reverse; }
.nichos-faixa:hover .nichos { animation-play-state: paused; }
.nichos-faixa--fundo { scale: 0.88; opacity: 0.42; }
.nichos-faixa--meio { scale: 0.95; opacity: 0.7; }
.nichos-faixa--frente { scale: 1; opacity: 1; }
@keyframes nichos-desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nichos-faixa { -webkit-mask-image: none; mask-image: none; }
  .nichos-faixas .nichos { flex-wrap: wrap; width: auto; animation: none; }
  .nichos-faixas .nichos li[aria-hidden] { display: none; }
  .nichos-faixa--fundo, .nichos-faixa--meio { scale: 1; opacity: 1; }
}
.nichos__nota { margin: 26px 0 0; color: var(--cor-texto-2); font-size: 1rem; }

/* Citacao de reforco. */
.bloco--citacao .bloco__miolo { text-align: center; }
.citacao { margin: 0 auto; max-width: none; }
.citacao p { margin: 0 auto; max-width: 18ch; font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.citacao cite { display: block; margin-top: 22px; color: var(--cor-acento); font-style: normal; font-family: var(--fonte-titulo); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.citacao__chamada { max-width: 46ch; margin: 28px auto 0; color: var(--cor-texto-2); font-size: 1.05rem; line-height: 1.6; }
.bloco--citacao .bloco__acao { margin-top: 30px; }

/* Blocos do catalogo: a secao fica no preto da pagina; os itens viram cartoes. */
section[class*="flxb-"] { background: transparent !important; border-radius: 0 !important; }
.apps li img { width: 88px !important; height: 88px !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px !important; background: #000; }
.apps li { align-content: start; }
#numeros li, #passos li, #passos article, #passos > div > ol > li { background: var(--cor-superficie) !important; border-radius: var(--raio) !important; padding: 30px 28px !important; }
#numeros li strong { display: block; min-height: 0; margin-bottom: 12px; white-space: nowrap; font-family: var(--fonte-titulo); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--cor-texto); }
#numeros li { color: var(--cor-texto-2); font-size: 1rem; line-height: 1.5; }
#numeros .flxb-cabeca, #passos .flxb-cabeca { text-align: left; margin-inline: 0; }
#passos .flxb-acoes { justify-content: flex-start; }
#passos .flxb-passos__item { padding-inline: 0 !important; }
#passos .flxb-passos__numero { justify-content: start; width: auto; min-width: 0; }
@media (max-width: 760px) { #passos .flxb-passos__lista { max-width: none; margin: 0; } }
#numeros .flxb-numeros__grade { padding-inline: 0; }
#numeros .flxb-numeros__item { padding-inline: 0 !important; }
.passos > li { background: var(--cor-superficie) !important; border-radius: var(--raio) !important; overflow: hidden; }
.ferramenta .ferramenta__icone { width: 72px !important; height: 72px !important; border-radius: 18px; }
.ferramenta > div { padding: 34px 30px !important; }
/* A foto do cartao esta escondida: a grade passa a ter uma coluna so, senao o texto cai na coluna estreita da foto. */
.ferramenta { grid-template-columns: 1fr !important; }
/* Icones gerados com fundo preto puro sobre cartao quase preto: o preto some e fica so o objeto. */
.passos .passos__img, .apps img, .ferramenta__icone { mix-blend-mode: screen; background: transparent !important; }

/* Dourado contido: o acento fica nos botoes; numeros, etiquetas, nomes e destaques em branco e cinza. */
.momentos__n { color: var(--cor-texto); }
.momentos__diag strong, .apoios__n, .fases__n, .citacao cite { color: var(--cor-texto-3); }
.virada__cabeca span:last-child { color: var(--cor-texto); }
.fases li:last-child { background: var(--cor-superficie); }
.ferramenta__para { color: var(--cor-texto-2); }
.nichos li:hover { color: var(--cor-texto); }
.flxb-passos__numero { color: var(--cor-texto-3) !important; }
.experts { background: var(--cor-superficie); }
/* Quatro cartas em leque: os tres socios e o time. */
#sec-quem-conduz .experts { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px 10px 20px; }
#sec-quem-conduz .experts .expert--lado:first-child { transform: translateX(22%) rotate(-8deg) translateY(18px); }
#sec-quem-conduz .experts .expert--centro { transform: translateX(7%) rotate(-2deg); }
#sec-quem-conduz .experts .expert:nth-child(3) { z-index: 2; transform: translateX(-7%) rotate(2deg) translateY(4px); }
#sec-quem-conduz .experts .expert--lado:last-child { transform: translateX(-22%) rotate(8deg) translateY(18px); }
#sec-quem-conduz .experts .expert--lado:first-child:hover { transform: translateX(22%) translateY(-10px); }
#sec-quem-conduz .experts .expert--centro:hover { transform: translateX(7%) translateY(-10px); }
#sec-quem-conduz .experts .expert:nth-child(3):hover { transform: translateX(-7%) translateY(-10px); }
#sec-quem-conduz .experts .expert--lado:last-child:hover { transform: translateX(-22%) translateY(-10px); }
@media (max-width: 600px) {
  #sec-quem-conduz .experts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 0 0; }
  #sec-quem-conduz .experts .expert, #sec-quem-conduz .experts .expert:hover { transform: none !important; translate: 0 0 !important; }
}
@media (max-width: 800px) { .virada__depois::before { color: var(--cor-texto); } }

/* Time no palco: a foto larga e protagonista, o baralho de cartas sobre a borda dela e a bio embaixo. */
.time-palco { position: relative; margin: 40px 0 0; }
.time-palco__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, #000 52%, transparent 100%); }
#sec-quem-conduz .time-palco .experts { position: absolute; left: 32px; bottom: 25%; display: flex; align-items: flex-end; gap: 12px; width: auto; padding: 0; background: none !important; }
#sec-quem-conduz .time-palco .experts .expert { width: clamp(84px, 11vw, 150px); margin: 0; transform: none !important; translate: 0 0 !important; transition: transform 0.25s ease, translate 0.25s ease; }
#sec-quem-conduz .time-palco .experts .expert.ativo, #sec-quem-conduz .time-palco .experts .expert:hover { translate: 0 -10px !important; }
#sec-quem-conduz .time-palco .experts .expert figcaption { bottom: 10px; font-size: 0.82rem; }
.time-palco::after { content: ""; position: absolute; left: 0; top: 0; width: 62%; height: 62%; border-radius: 26px 0 0 0; pointer-events: none; background: radial-gradient(120% 120% at 0% 0%, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 45%) 45%, transparent 75%); }
.time-palco__texto { position: absolute; z-index: 2; left: 40px; top: 36px; width: min(40%, 470px); margin: 0; padding: 0; color: rgb(255 255 255 / 86%); font-size: 0.98rem; line-height: 1.6; text-shadow: 0 2px 14px rgb(0 0 0 / 85%); }
@media (max-width: 1100px) { .time-palco__texto { left: 24px; top: 22px; width: min(46%, 420px); font-size: 0.82rem; line-height: 1.5; } }
.time-bio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 56px; margin-top: -110px; position: relative; z-index: 2; }
.time-bio__nome { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.time-bio .bloco__intro { margin: 0 0 16px; }
.time-esp { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; min-height: 84px; align-content: flex-start; }
.time-esp li { position: relative; overflow: hidden; padding: 9px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cor-acento) 55%, transparent); background: color-mix(in srgb, var(--cor-acento) 12%, transparent); color: var(--cor-texto); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0; transform: translateY(14px) scale(0.7); filter: blur(6px); animation: espSurge 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) forwards; animation-delay: calc(var(--i) * 110ms); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-acento) 50%, transparent); }
.time-esp li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 35%) 50%, transparent 70%); transform: translateX(-120%); animation: espBrilho 0.9s ease forwards; animation-delay: calc(var(--i) * 110ms + 350ms); pointer-events: none; }
@keyframes espSurge { 0% { opacity: 0; transform: translateY(14px) scale(0.7); filter: blur(6px); } 60% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--cor-acento) 55%, transparent); } 100% { opacity: 1; transform: none; filter: none; box-shadow: 0 0 0 0 transparent; } }
@keyframes espBrilho { to { transform: translateX(120%); } }
/* Especialidades como fluxo de nós ligados por fios, no estilo de editor de automações. */
.time-flow { position: relative; display: flex; justify-content: flex-end; min-height: 300px; margin-top: 16px; }
.time-palco > .time-flow__fios { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#sec-quem-conduz .time-palco .experts { z-index: 1; }
.time-flow__fios path { fill: none; stroke: rgb(255 255 255 / 26%); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.time-flow__fios path.desenha { stroke-dashoffset: 1; animation: fioDesenha 0.14s ease-out forwards; }
@keyframes fioDesenha { to { stroke-dashoffset: 0; } }
.time-flow__col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-self: stretch; gap: 14px; }
.no { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 108px; animation: noEntra 0.12s ease-out both; }
.no--esp { animation-delay: calc(var(--i) * 12ms + 20ms); }
.no__tile { position: relative; box-sizing: border-box; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 12px; border: 0; background: #1c1c1e; box-shadow: 0 14px 34px rgb(0 0 0 / 70%), 0 4px 10px rgb(0 0 0 / 55%), 0 0 0 1px rgb(255 255 255 / 6%); color: #fff; }
.no__tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.no__tile--img { background: transparent; }
.no__tile { background: transparent; box-shadow: none; }
.no__tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 30px rgb(0 0 0 / 65%), 0 4px 10px rgb(0 0 0 / 50%); }
.no__rot { font-size: 0.74rem; font-weight: 600; line-height: 1.2; text-align: center; color: rgb(255 255 255 / 92%); text-shadow: 0 1px 8px rgb(0 0 0 / 80%); }
.no--esp .no__tile::before { content: ""; position: absolute; left: -6px; top: 50%; width: 6px; height: 14px; margin-top: -7px; border-radius: 2px; background: #c9c9c9; }
@keyframes noEntra { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 761px) {
  .time-palco__foto { opacity: 0.4; }
  .time-palco .time-flow { position: absolute; z-index: 2; left: 70%; right: 3%; top: 4%; bottom: 36%; margin: 0; min-height: 0; }
}
@media (max-width: 1100px) { .no__tile { width: 52px; height: 52px; } .no__tile svg { width: 22px; height: 22px; } .no__rot { font-size: 0.68rem; } }
@media (max-width: 760px) {
  .time-palco { display: flex; flex-direction: column; }
  .time-palco .experts { order: 1; }
  .time-palco .time-flow { order: 2; margin-top: 56px; }
  .time-palco__texto { order: 3; }
  .no { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .no, .time-flow__fios path.desenha { animation: none; } .time-flow__fios path.desenha { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .time-esp li { animation: none; opacity: 1; transform: none; filter: none; } .time-esp li::after { display: none; } }
@media (max-width: 760px) {
  .time-palco__foto { aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  #sec-quem-conduz .time-palco .experts { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  #sec-quem-conduz .time-palco .experts .expert { width: auto; }
  #sec-quem-conduz .time-palco .experts .expert figcaption { font-size: 0.72rem; bottom: 8px; }
  .time-palco::after { display: none; }
  .time-palco__texto { position: static; width: auto; margin-top: 14px; color: var(--cor-texto); text-shadow: none; font-size: 1rem; }
  .time-bio { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
}

/* Topo no computador: texto centralizado na vertical, preto com leve profundidade e a foto esmaecendo para o texto e para baixo. */
@media (min-width: 980px) and (min-height: 640px) {
  .cartao { align-content: center !important; padding-top: 0 !important; padding-bottom: 5vh !important; }
  .palco::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 85% at 10% 42%, rgb(255 255 255 / 4.5%), transparent 65%), linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 28%, transparent 70%, rgb(0 0 0 / 45%)); }
  .palco__foto { left: calc(var(--borda) + var(--recuo) + var(--coluna) - 200px); }
  .palco__foto::before { width: min(300px, 40%); background: linear-gradient(to right, var(--cor-fundo) 0%, rgb(10 10 10 / 94%) 22%, rgb(10 10 10 / 55%) 55%, transparent 100%); }
  .palco__foto::after { display: block; top: auto; height: 36%; background: linear-gradient(to bottom, transparent, var(--cor-fundo)); }
  .palco__foto img { object-position: 50% 0; }
}
@media (min-width: 1700px) and (min-height: 640px) {
  .palco__foto { left: calc(var(--borda) + var(--recuo) + var(--coluna) - 360px); }
  .palco__foto::before { width: min(520px, 46%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition: none !important; }
}

/* flx:blocos-base */
/* Base dos BLOCOS do flxOS (entra uma vez no styles.css da página).
   Tudo em :where() = especificidade zero: as classes do site que o estúdio
   põe ao lado das de papel (botão, título, container…) sempre vencem. As
   cores e fontes vêm dos tokens da página (tokens.css). */
:where(.flxb-secao) { padding: clamp(56px, 8vw, 112px) 0; color: var(--cor-texto, #111); }
:where(.flxb-container) { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
:where(.flxb-cabeca) { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
:where(.flxb-sobretitulo) { margin: 0 0 12px; color: var(--cor-acento, #5258e4); font: 700 12px/1.3 var(--fonte-texto, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
:where(.flxb-titulo) { margin: 0; color: var(--cor-texto, #111); font: 700 clamp(28px, 4.2vw, 44px)/1.12 var(--fonte-titulo, var(--fonte-texto, system-ui, sans-serif)); letter-spacing: -.01em; text-wrap: balance; }
:where(.flxb-texto) { margin: 16px 0 0; color: var(--cor-texto-2, #555); font: 400 clamp(16px, 1.6vw, 18px)/1.6 var(--fonte-texto, system-ui, sans-serif); text-wrap: pretty; }
:where(.flxb-cartao) { box-sizing: border-box; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--cor-borda, rgba(0, 0, 0, .1)); border-radius: calc(var(--raio, 12px) + 4px); background: var(--cor-superficie, #fff); }
:where(.flxb-botao) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--raio, 12px); background: var(--cor-acento, #5258e4); color: var(--cor-acento-texto, #fff); font: 700 16px/1.2 var(--fonte-texto, system-ui, sans-serif); text-align: center; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
:where(.flxb-botao:hover) { filter: brightness(1.08); transform: translateY(-1px); }
:where(.flxb-acoes) { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
:where(.flxb img) { display: block; max-width: 100%; height: auto; }

/* flx:bloco bloco-passos */
/* Bloco Passos: três colunas numeradas com um fio entre os números. */
.flxb-passos__lista { margin: 0; padding: 0; list-style: none; }
.flxb-passos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); counter-reset: none; }
.flxb-passos__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.flxb-passos__item:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 64px; right: calc(-1 * clamp(24px, 4vw, 48px) + 16px); height: 1px; background: var(--cor-borda, rgba(0, 0, 0, .12)); }
.flxb-passos__numero { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border: 1px solid var(--cor-acento, #5258e4); border-radius: 50%; color: var(--cor-acento, #5258e4); font: 700 18px/1 var(--fonte-titulo, var(--fonte-texto, system-ui, sans-serif)); }
.flxb-passos__nome { margin: 0; color: var(--cor-texto, #111); font: 700 20px/1.3 var(--fonte-titulo, var(--fonte-texto, system-ui, sans-serif)); }
.flxb-passos__descricao { margin: 0; color: var(--cor-texto-2, #555); font: 400 16px/1.6 var(--fonte-texto, system-ui, sans-serif); }
@media (max-width: 760px) {
  .flxb-passos__lista { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .flxb-passos__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
  .flxb-passos__numero { grid-row: span 2; margin-bottom: 0; }
  .flxb-passos__item:not(:last-child)::after { top: 56px; bottom: -24px; left: 24px; right: auto; width: 1px; height: auto; }
}

/* flx:bloco bloco-numeros */
/* Bloco Números: quatro colunas separadas por fios (duas no tablet, uma no celular). */
.flxb-numeros__grade { margin: 0; padding: 0; list-style: none; }
.flxb-numeros__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.flxb-numeros__item { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--cor-acento, #5258e4); }
.flxb-numeros__valor { color: var(--cor-texto, #111); font: 800 clamp(36px, 4.6vw, 52px)/1 var(--fonte-titulo, var(--fonte-texto, system-ui, sans-serif)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.flxb-numeros__legenda { max-width: 24ch; color: var(--cor-texto-2, #555); font: 400 15px/1.5 var(--fonte-texto, system-ui, sans-serif); }
@media (max-width: 860px) { .flxb-numeros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .flxb-numeros__grade { grid-template-columns: minmax(0, 1fr); } }