/* ==========================================================
   OS BLOCOS DA PÁGINA DE VENDAS (#446) — das cópias higgsfield-v3 e v4
   ==========================================================
   Referências: higgsfield.ai, luma.ai, krea.ai e midjourney.com. O que a
   pessoa destacou: "2 banners de vídeo com texto por cima e botão de
   ação", "banner de vídeo 'minimizado' ao passar o mouse abre texto com
   botão interativo", "testar paletas novas", e "o vídeo do início do site
   poderia ser mil vezes melhor".

   Tudo preso a `#vitrine.vit--proposta`, como a v1, e na cor de destaque
   da paleta (`--pp-acento`, em css/vitrine-proposta.css). */

/* ==========================================================
   1. A CAPA COM O VÍDEO (higgsfield-v4)
   ==========================================================
   "Retirar esses textos" — a linha, o botão, a nota e o "Veja o Linealt
   em ação" — e "alterar o banner de vídeo grande do meio do site para o
   vídeo de intro lá em cima". Sobram o selo e o título, centrados, e logo
   embaixo o banner da prática (css/vitrine-banner.css), da largura da
   página, com o brilho da cor de destaque por trás. */
#vitrine.vit--proposta .vit__capa--cinema {
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  gap: clamp(1.4rem, 3vw, 2.2rem); max-width: 96rem;
  padding-top: clamp(2.2rem, 5vw, 4.5rem);
}
#vitrine.vit--proposta .vit__capa--cinema .vit__capa-txt { text-align: center; max-width: 60rem; }
#vitrine.vit--proposta .vit__capa--cinema h1 { font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: .9; margin-bottom: 0; }
#vitrine.vit--proposta .vit__capa--cinema .vban { position: relative; width: 100%; max-width: 88rem; margin: 0; text-align: left; }
#vitrine.vit--proposta .vit__capa--cinema .vban::before {
  content: ''; position: absolute; z-index: -1; inset: 8% 6% 12%;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--pp-acento) 34%, transparent), transparent 70%);
  filter: blur(48px); pointer-events: none;
}

/* O "TESTAR" E O "ENTRAR" NO TOPO, no mesmo desenho: "confere se a arte do
   botão testar e do novo botão login/cadastro, ícone de pessoa vetor, vão
   estar iguais". Mesma altura, canto, letra, relevo e um ícone de linha
   cada; muda só a cor — o Testar no azul do canvas ("faça o botão testar
   lá de cima em azul"), o Entrar no vermelho da marca, mais destacado que o
   contorno claro de antes. */
.vit__testar,
#vitrine.vit--proposta .vit__topo-acoes .vit__entrar {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .5rem 1rem; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 600; line-height: 1.2; color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.vit__testar { background: #2563eb; }
.vit__testar:hover { background: #1d4ed8; }
#vitrine.vit--proposta .vit__topo-acoes .vit__entrar { background: var(--pp-acento); }
#vitrine.vit--proposta .vit__topo-acoes .vit__entrar:hover { background: color-mix(in srgb, var(--pp-acento) 86%, #000); }
.vit__testar:focus-visible, #vitrine.vit--proposta .vit__entrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vit__bt-ic {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.vit__bt-ic--cheio { fill: currentColor; }
@media (max-width: 560px) {
  .vit__testar, #vitrine.vit--proposta .vit__topo-acoes .vit__entrar { padding: .45rem .7rem; }
}

/* ==========================================================
   2. OS DOIS BANNERS DE VÍDEO
   ========================================================== */
.vit__cartazes {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem;
  max-width: 88rem; margin: 0 auto; padding: 1rem clamp(1rem, 5vw, 3.5rem) 2rem;
}
@media (max-width: 900px) { .vit__cartazes { grid-template-columns: 1fr; } }
.vit__cartaz {
  position: relative; overflow: hidden; min-height: 22rem; border-radius: 20px;
  display: flex; align-items: center; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .08);
}
.vit__cartaz-cena { position: absolute; inset: -6%; z-index: -2; animation: cartaz-deriva 22s ease-in-out infinite alternate; }
@keyframes cartaz-deriva {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-3%, -2%); }
}
/* por cima do vídeo, o escuro do lado do texto e a cor de cada um */
.vit__cartaz::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 14, .9) 0%, rgba(10, 11, 14, .55) 45%, rgba(10, 11, 14, .05) 100%);
}
.vit__cartaz-txt { padding: clamp(1.6rem, 4vw, 3rem); max-width: 30rem; text-align: left; }
.vit__cartaz h3 {
  margin: 0 0 .7rem; color: #fff; line-height: 1;
  font: 600 clamp(1.9rem, 3.4vw, 2.8rem)/1.02 'Inter', system-ui, sans-serif; letter-spacing: -.03em;
}
.vit__cartaz h3.vit__cartaz-caixa {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em;
}
.vit__cartaz p { margin: 0 0 1.4rem; color: rgba(255, 255, 255, .78); font-size: 1rem; }
.vit__cartaz-bt {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
  padding: .9rem 1.6rem; border-radius: 10px;
  font: 700 .86rem 'Space Grotesk', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.vit__cartaz-bt--cheio {
  border: 0; background: var(--pp-acento); color: var(--pp-acento-txt);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.vit__cartaz-bt--vazado { border: 1px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .25); color: #fff; }
.vit__cartaz-bt:hover { filter: brightness(1.08); }
.vit__cartaz-bt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* o vídeo do primeiro: um mural com fotos e cordão, num pôr do sol */
.vit__cartaz--mural .vit__cartaz-cena {
  background:
    radial-gradient(ellipse at 75% 20%, rgba(255, 120, 170, .55), transparent 55%),
    radial-gradient(ellipse at 95% 90%, rgba(255, 170, 90, .45), transparent 50%),
    linear-gradient(135deg, #3b2a48 0%, #7a4b6a 55%, #d58b8b 100%);
}
.vit__cartaz--mural .vit__cartaz-cena > i {
  position: absolute; display: grid; place-items: center; text-align: center; font-style: normal;
  font: 400 1.25rem/1.05 'Caveat', cursive; color: #3a3200;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.vc__postit { width: 9rem; height: 8.4rem; background: #ffe066; left: 58%; top: 12%; transform: rotate(-4deg); }
/* a foto cobre a metade direita do post-it amarelo: o texto fica na metade
   que aparece, e quebra pela largura nas três línguas, sem <br> (#448) */
.vc__postit:not(.vc__postit--rosa):not(.vc__postit--azul) { box-sizing: border-box; padding: 0 4.2rem 0 .6rem; }
.vc__postit--rosa { background: #ffb0c8; left: 82%; top: 56%; transform: rotate(5deg); }
.vc__postit--azul { background: #a6e3ff; left: 62%; top: 64%; transform: rotate(-2deg); }
.vc__foto { left: 74%; top: 6%; padding: .6rem .6rem 1.6rem; background: #fff; transform: rotate(3deg); }
.vc__foto img:not(.vc__pino) { display: block; width: 9rem; height: 8rem; object-fit: cover; }
/* o cordão em triângulo e os pins: os pontos vêm do js/vitrine-v3.js, que
   mede onde cada peça marca o pin dela (.vc__ancora) */
.vc__ancora { position: absolute; left: 50%; top: .95rem; width: 0; height: 0; }
.vc__cordas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none;
  overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35));
}
.vc__pino {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; visibility: hidden;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4));
}
.vc__pino.fincado { visibility: visible; }

/* o vídeo do segundo: o material da pessoa chegando ao mural — um vídeo,
   uma foto, um áudio tocando e um link —, boiando devagar */
.vit__cartaz--midia .vit__cartaz-cena {
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(ellipse at 82% 30%, rgba(70, 150, 255, .42), transparent 60%),
    linear-gradient(160deg, #0f1a2e 0%, #0b1018 60%);
}
@media (min-width: 901px) {
  .vit__cartaz--midia .vit__cartaz-txt { max-width: 64%; }
  /* o título um pouco menor que o do primeiro: a coluna dele é mais estreita */
  .vit__cartaz--midia h3.vit__cartaz-caixa { font-size: clamp(1.7rem, 2.9vw, 2.6rem); }
}
.vit__cartaz-bt { white-space: nowrap; }
.vc__midia {
  position: absolute; display: block; font-style: normal; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45); animation: vc-boia 7s ease-in-out infinite alternate;
}
.vc__midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes vc-boia { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.vc__midia svg { display: block; width: 100%; height: 100%; }
.vc__midia--mapa    { left: 62%; top: 10%;  width: 8.4rem; height: 5.6rem; padding: .45rem; background: #fff; }
.vc__midia--tarefas { left: 78%; top: 30%; width: 6.6rem; height: 4.9rem; padding: .3rem; background: #fff; transform: rotate(3deg); animation-delay: -2s; }
.vc__midia--video   { left: 63%; top: 46%; width: 8rem; height: 5rem; animation-delay: -3s; }
.vc__midia--arquivo { left: 86%; top: 62%; width: 4.2rem; height: 5.2rem; overflow: visible; box-shadow: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); animation-delay: -5s; }
.vc__midia--audio {
  left: 63%; top: 78%; width: 8.4rem; height: 2.7rem; padding: 0 .7rem; background: #fff;
  display: flex; align-items: center; gap: 3px; animation-delay: -4s;
}
/* o áudio gravado na hora: o botão vermelho com o microfone */
.vc__midia--audio b {
  flex: none; width: 1.6rem; height: 1.6rem; margin-right: .3rem; border-radius: 50%;
  background: #ff0a2b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='4' width='6' height='10' rx='3' fill='%23fff' stroke='none'/%3E%3Cpath d='M6.5 11.5a5.5 5.5 0 0 0 11 0M12 17v3'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.vc__midia--audio s { flex: 1; height: 60%; border-radius: 2px; background: #c3c9d4; transform-origin: 50% 50%; animation: vc-onda 1.1s ease-in-out infinite alternate; }
.vc__midia--audio s:nth-child(odd) { animation-delay: -.4s; } .vc__midia--audio s:nth-child(3n) { animation-delay: -.8s; }
.vc__midia--audio s:nth-child(-n+5) { background: #ff0a2b; }
@keyframes vc-onda { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
/* no telefone o texto ocupa a largura: ficam o mapa em cima e o áudio embaixo */
@media (max-width: 560px) {
  .vc__midia--tarefas, .vc__midia--video, .vc__midia--arquivo { display: none; }
  .vc__midia--audio { top: 78%; }
}
/* a paisagem desenhada na foto do primeiro: a da Terra fica só no vídeo */
.vc__paisagem { display: block; width: 9rem; height: 8rem; }

/* ==========================================================
   3. OS USOS, NUM CARROSSEL (higgsfield-v4)
   ========================================================== */
.vit__minis-setas { display: flex; justify-content: flex-end; gap: .5rem; max-width: 72rem; margin: 1.2rem auto 0; }
.vit__seta {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--borda); background: var(--pp-vidro); color: var(--ink);
}
.vit__seta:hover:not(:disabled) { background: var(--pp-vidro-forte); }
.vit__seta:disabled { opacity: .35; cursor: default; }
.vit__seta:focus-visible { outline: 2px solid var(--pp-acento); outline-offset: 2px; }
.vit__seta svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* a trilha: os cartões lado a lado, quatro à vista, dois no tablet e um e
   pouco no telefone (o pedaço do próximo diz que há mais) */
.vit__minis {
  display: flex; gap: 1rem; max-width: 72rem; margin: .8rem auto 0; padding: 2px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vit__minis::-webkit-scrollbar { display: none; }
.vit__minis:focus-visible { outline: 2px solid var(--pp-acento); outline-offset: 4px; border-radius: 18px; }
.vit__mini {
  flex: 0 0 calc((100% - 3rem) / 4); scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column;
}
@media (max-width: 1000px) { .vit__mini { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 560px)  { .vit__mini { flex-basis: 84%; } }
/* a cena em cima, em 3 : 2, e o nome embaixo: a altura é a mesma em todos */
.vit__mini-cena { position: relative; aspect-ratio: 3 / 2; }
.vm__arte { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.vit__mini-txt { padding: .2rem 1.2rem 1.2rem; text-align: left; }
.vit__mini-txt b { display: block; color: #fff; font: 700 1.02rem 'Space Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.vit__mini-txt span { display: block; margin-top: .25rem; color: rgba(255, 255, 255, .72); font-size: .86rem; line-height: 1.45; }

/* o fundo de cada um */
.vit__mini--aula     { background: radial-gradient(ellipse at 30% 20%, #3f7f5f, transparent 60%), linear-gradient(160deg, #1d3b2e, #0f1c16); }
.vit__mini--curso    { background: radial-gradient(ellipse at 70% 20%, #7b4bd6, transparent 60%), linear-gradient(160deg, #2a1748, #120a20); }
.vit__mini--caso     { background: radial-gradient(ellipse at 50% 30%, #5a3a2a, transparent 60%), linear-gradient(160deg, #2b1d16, #120c09); }
.vit__mini--trabalho { background: radial-gradient(ellipse at 30% 30%, #2f6fd6, transparent 60%), linear-gradient(160deg, #13274a, #0a1222); }
.vit__mini--ideias   { background: radial-gradient(ellipse at 50% 35%, #1f8a86, transparent 60%), linear-gradient(160deg, #0f3d3e, #081a1b); }
.vit__mini--plano    { background: radial-gradient(ellipse at 30% 25%, #c27a1a, transparent 60%), linear-gradient(160deg, #3d2a0c, #160f05); }
.vit__mini--proposta { background: radial-gradient(ellipse at 70% 30%, #b4234f, transparent 60%), linear-gradient(160deg, #3a0d1c, #14060b); }
.vit__mini--mood     { background: radial-gradient(ellipse at 40% 25%, #6b7aa8, transparent 60%), linear-gradient(160deg, #1d2333, #0c0f17); }
.vit__mini--estudo   { background: radial-gradient(ellipse at 35% 25%, #7a9a2a, transparent 60%), linear-gradient(160deg, #24300f, #0e1306); }
.vit__mini--treino   { background: radial-gradient(ellipse at 40% 35%, #e0603a, transparent 60%), linear-gradient(160deg, #4a1a10, #170805); }
.vit__mini--viagem   { background: radial-gradient(ellipse at 60% 30%, #19a7c4, transparent 60%), linear-gradient(160deg, #06343f, #031317); }
.vit__mini--tutorial { background: radial-gradient(ellipse at 65% 25%, #b03ab8, transparent 60%), linear-gradient(160deg, #33103a, #130615); }

/* o que se move em cada cena */
.vm__quadro { animation: vm-etapas 6s ease-in-out infinite; }
@keyframes vm-etapas {
  0%, 28%  { transform: translateX(0); }
  36%, 61% { transform: translateX(80px); }
  69%, 94% { transform: translateX(160px); }
  100%     { transform: translateX(0); }
}
.vm__circulo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vm-risca 5s ease-in-out infinite; }
@keyframes vm-risca { 0%, 12% { stroke-dashoffset: 1; opacity: 0; } 13% { stroke-dashoffset: 1; opacity: 1; } 42%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vm__anda { transform-box: fill-box; transform-origin: 0 50%; animation: vm-anda 8s linear infinite; }
@keyframes vm-anda { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.vm__onda { animation: vm-onda 1.4s ease-in-out infinite; }
.vm__onda + .vm__onda { animation-delay: .25s; }
@keyframes vm-onda { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.vm__pisca { animation: vban-pisca 1s steps(2, start) infinite; }
.vm__fio { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vm-fio 7s ease-in-out infinite; }
.vm__fio:nth-child(2) { animation-delay: .7s; }
.vm__fio:nth-child(3) { animation-delay: 1.4s; }
.vm__fio:nth-child(4) { animation-delay: 2.1s; }
@keyframes vm-fio { 0%, 6% { stroke-dashoffset: 1; opacity: 0; } 7% { stroke-dashoffset: 1; opacity: 1; } 22%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vm__lupa { animation: vm-lupa 7s ease-in-out infinite; }
@keyframes vm-lupa { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(118px, -40px); } 70% { transform: translate(70px, 50px); } }
/* o holofote do slide passa pelo que importa, um de cada vez */
.vm__alvo { animation: vm-alvo 7.5s ease-in-out infinite; }
@keyframes vm-alvo {
  0%, 26%  { transform: translateX(0); }
  34%, 59% { transform: translateX(74px); }
  67%, 92% { transform: translateX(148px); }
  100%     { transform: translateX(0); }
}
.vm__brota { transform-box: fill-box; transform-origin: center; animation: vm-brota 7s ease infinite; }
@keyframes vm-brota { 0%, 30% { transform: scale(0); } 38%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.vm__pulsa { transform-box: fill-box; transform-origin: center; animation: vm-pulsa 2.4s ease-in-out infinite; }
@keyframes vm-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.vm__amostra { transform-box: fill-box; transform-origin: center; animation: vm-amostra 4s ease-in-out infinite; }
.vm__amostra:nth-child(2) { animation-delay: .2s; } .vm__amostra:nth-child(3) { animation-delay: .4s; }
.vm__amostra:nth-child(4) { animation-delay: .6s; } .vm__amostra:nth-child(5) { animation-delay: .8s; }
@keyframes vm-amostra { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px); } }
.vm__marca-texto { transform-box: fill-box; transform-origin: 0 50%; animation: vm-marca 5s ease-in-out infinite; }
@keyframes vm-marca { 0%, 10% { transform: scaleX(0); } 35%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* o cursor do tutorial clica nos três passos, um depois do outro */
.vm__cursor { animation: vm-cursor 6s ease-in-out infinite; }
/* O cursor passa pelos três passos na ordem em que eles são lidos.
   As marcas mudaram junto com a arte do cartão, que deixou de ser a
   janela de outro programa para ser três peças do mural. */
@keyframes vm-cursor {
  0%, 22%  { transform: translate(60px, 68px); }
  33%, 55% { transform: translate(228px, 70px); }
  66%, 88% { transform: translate(104px, 146px); }
  100%     { transform: translate(60px, 68px); }
}
.vm__clique { opacity: 0; transform-box: fill-box; transform-origin: center; animation: vm-clique 2s ease-out infinite; }
.vm__caminha { animation: vm-caminha 7s ease-in-out infinite; }
@keyframes vm-caminha {
  0%, 8%   { transform: translate(36px, 168px); }
  25%      { transform: translate(81px, 139px); }
  45%      { transform: translate(130px, 112px); }
  68%      { transform: translate(190px, 86px); }
  88%, 100% { transform: translate(252px, 54px); }
}
.vm__aviao { animation: vm-aviao 8s ease-in-out infinite; }
@keyframes vm-aviao {
  0%, 6%   { transform: translate(74px, 120px) rotate(-50deg); }
  40%, 46% { transform: translate(160px, 48px) rotate(10deg); }
  86%, 100% { transform: translate(236px, 122px) rotate(60deg); }
}
@keyframes vm-clique { 0%, 60% { opacity: 0; transform: scale(.4); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
  .vm__arte * { animation: none !important; }
  .vm__circulo, .vm__fio { stroke-dashoffset: 0; }
}

/* ==========================================================
   4. OS PLANOS, CADA UM NA SUA COR, E O ANUAL (higgsfield-v4)
   ==========================================================
   "Nos planos e armazenamento, use cores diferentes para cada uma e
   adiciona um botão de anual." As cores ficam nas duas do site — "azul
   para o básico, vermelho para dar importância" (#176) —: o Grátis
   neutro, o Plus azul e o Pro vermelho, o mais forte. Cada uma vale nos
   dois temas. */
#vitrine.vit--proposta .plano { --pl-cor: #8a919c; --pl-tinta: 0%; }
#vitrine.vit--proposta .plano--plus { --pl-cor: #2563eb; --pl-tinta: 16%; }
#vitrine.vit--proposta .plano--premium { --pl-cor: #ff0a2b; --pl-tinta: 16%; }
#vitrine.vit--proposta .plano,
#vitrine.vit--proposta .plano--plus,
#vitrine.vit--proposta .plano--premium {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pl-cor) var(--pl-tinta), transparent), var(--pp-cartao) 55%);
  border: 1px solid color-mix(in srgb, var(--pl-cor) 45%, var(--borda));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--pl-cor) 10%, transparent);
  color: var(--ink);
}
#vitrine.vit--proposta .plano--atual { border-color: var(--borda); box-shadow: none; }
/* o texto de todos na tinta do tema: o Pro herdava o branco do cartão escuro de antes */
#vitrine.vit--proposta .plano .plano__nome { color: var(--ink); }
#vitrine.vit--proposta .plano .plano__preco, #vitrine.vit--proposta .plano .plano__aviso,
#vitrine.vit--proposta .plano li { color: var(--suave); }
#vitrine.vit--proposta .plano li.plano__mais { color: var(--ink); }
#vitrine.vit--proposta .plano li::before { border-color: var(--pl-cor); }
#vitrine.vit--proposta .plano .plano__aviso { border-top-color: var(--borda); }
#vitrine.vit--proposta .plano .plano__diamante { color: var(--pl-cor); }
#vitrine.vit--proposta .plano .plano__destaque { background: var(--pp-vidro); }
#vitrine.vit--proposta .plano .plano__destaque b { color: var(--ink); }
#vitrine.vit--proposta .plano .plano__destaque span { color: var(--suave); }
#vitrine.vit--proposta .plano .plano__destaque svg { color: var(--pl-cor); }
#vitrine.vit--proposta .plano .plano__breve {
  background: color-mix(in srgb, var(--pl-cor) 16%, transparent); color: var(--pl-cor); border: 0;
}
.plano__ciclo { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 500; color: var(--suave); }

/* a chave do mensal e do anual, em cima dos cartões, à direita */
.vit__cobranca {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  max-width: 72rem; margin: 1.2rem auto 1rem; font-weight: 600; color: var(--suave);
}
.vit__cobranca span { transition: color .2s; }
.vit__cobranca span[data-lado="mensal"] { color: var(--ink); }
.vit__chave {
  position: relative; width: 2.8rem; height: 1.55rem; border-radius: 99px; border: 0; cursor: pointer; padding: 0;
  background: var(--pp-vidro-forte, #ccc);
  transition: background .2s;
}
.vit__chave i {
  position: absolute; left: .18rem; top: .18rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.vit__chave[aria-checked="true"] { background: var(--pp-acento); }
.vit__chave[aria-checked="true"] i { transform: translateX(1.25rem); }
.vit__chave:focus-visible { outline: 2px solid var(--pp-acento); outline-offset: 2px; }
.vit__cobranca:has(.vit__chave[aria-checked="true"]) span[data-lado="mensal"] { color: var(--suave); }
.vit__cobranca:has(.vit__chave[aria-checked="true"]) span[data-lado="anual"] { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .vit__chave, .vit__chave i { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .vit__cartaz-cena, .vc__midia, .vc__midia s { animation: none !important; }
}

/* ==========================================================
   O .LINEALT, O QUARTO FORMATO (higgsfield-v4)
   ========================================================== */
@media (min-width: 1001px) {
  #vitrine.vit--proposta .vit__formatos-lista { grid-template-columns: repeat(4, 1fr); }
  /* em quatro, o ícone vai em cima: ao lado, o texto ficava numa coluna estreita */
  #vitrine.vit--proposta .vit__formatos-lista > div { flex-direction: column; gap: .85rem; }
}
@media (min-width: 761px) and (max-width: 1000px) { #vitrine.vit--proposta .vit__formatos-lista { grid-template-columns: repeat(2, 1fr); } }
#vitrine.vit--proposta .vit__formatos { max-width: 80rem; }

/* ==========================================================
   O YOUTUBE E AS REDES (higgsfield-v4)
   ==========================================================
   À esquerda, o mesmo mural em três telas — o vídeo largo com o REC e o
   rabisco, o corte alto e o post quadrado do carrossel —; à direita, o que
   cada uma pede. Tudo desenhado em CSS, e parado com menos movimento. */
.vit__social-grade {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 72rem; margin: 2rem auto 0;
}
@media (max-width: 900px) { .vit__social-grade { grid-template-columns: 1fr; } }
.vit__social-palco { position: relative; }
.vs__arte { display: block; width: 100%; height: auto; max-width: none; overflow: visible; }
.vs__pisca { animation: vban-pisca 1s steps(2, start) infinite; }
.vs__onda rect { transform-box: fill-box; transform-origin: 50% 50%; animation: vs-onda 1.2s ease-in-out infinite alternate; }
.vs__onda rect:nth-child(3n) { animation-delay: -.4s; }
.vs__onda rect:nth-child(3n + 1) { animation-delay: -.8s; }
@keyframes vs-onda { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.vs__anda { transform-box: fill-box; transform-origin: 0 50%; animation: vs-anda 9s linear infinite; }
@keyframes vs-anda { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.vs__risco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vs-risca 4.5s ease-in-out infinite; }
@keyframes vs-risca { 0%, 15% { stroke-dashoffset: 1; opacity: 0; } 16% { stroke-dashoffset: 1; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vit__social-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.vit__social-lista li {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; text-align: left;
  background: var(--pp-cartao); border: 1px solid var(--borda); border-radius: 14px;
}
.vit__social-lista p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--suave); }
.vit__social-lista b { display: block; margin-bottom: .25rem; font-size: 1.05rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .vs__arte * { animation: none !important; }
  .vs__risco { stroke-dashoffset: 0; }
}

/* ==========================================================
   O NOME NO FIM, NA LETRA DA FRASE (higgsfield-v4)
   ========================================================== */
.vit__nome-fim { display: none; }
#vitrine.vit--proposta .vit__marca--fim { display: none; }
#vitrine.vit--proposta .vit__nome-fim { display: inline; }
.vit__nome-fim em { font-style: normal; color: #ff0a2b; }

/* ==========================================================
   OS TÍTULOS NA LINHA DO QUE OS ACOMPANHA (higgsfield-v4)
   ==========================================================
   "Dá para descer o título e o subtítulo para encaixar com as setas": as
   setas sobem para a linha do subtítulo, à direita, e os cartões vêm logo
   embaixo. "Descer esse título para ficar alinhado com o texto Mensal,
   alinhar para baixo": a chave sobe para a linha do título, pela base. E as
   Perguntas: o título começa onde a lista começa. No telefone, tudo volta a
   empilhar. */
@media (min-width: 761px) {
  #vitrine.vit--proposta .vit__usos > .vit__linha { padding-right: 7rem; box-sizing: border-box; }
  /* 2rem do vão de baixo do subtítulo + 2,6rem da altura das setas */
  #vitrine.vit--proposta .vit__minis-setas { margin-top: -4.6rem; }
  #vitrine.vit--proposta .vit__minis { margin-top: 1.4rem; }
}
@media (min-width: 1000px) {
  #vitrine.vit--proposta #vit-planos > h2 { padding-right: 15rem; box-sizing: border-box; }
  /* 1,6rem do vão de baixo do título + a altura da chave, menos a folga da letra */
  #vitrine.vit--proposta .vit__cobranca { margin-top: -3.45rem; margin-bottom: 1.6rem; }
}
#vitrine.vit--proposta .vit__faq > h2 { max-width: 48rem; }

/* ==========================================================
   A LUZ DO FIM, ANDANDO (higgsfield-v4)
   ==========================================================
   "Faça o vermelho do background se movendo lento pelo fundo." O brilho
   vermelho, que era parado no meio de cima, vira uma mancha que atravessa o
   bloco devagar, de um lado ao outro, por baixo da malha e do texto. Com
   menos movimento, ela fica parada no meio. */
#vitrine.vit--proposta .vit__fim > .vit__fim-luz {
  position: absolute; z-index: 0; left: -15%; top: -60%; width: 75%; height: 170%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pp-acento) 40%, transparent), transparent);
  animation: fim-luz 20s ease-in-out infinite alternate;
}
@keyframes fim-luz {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(40%, 14%); }
  100% { transform: translate(72%, -8%); }
}
@media (prefers-reduced-motion: reduce) {
  #vitrine.vit--proposta .vit__fim > .vit__fim-luz { animation: none; left: 12%; }
}

/* ==========================================================
   OS AJUSTES DA PÁGINA NO AR (#450)
   ========================================================== */
/* o logo é um link para o início, e os botões de testar viraram links */
.vit__marca-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; border-radius: 6px; }
.vit__marca-link:focus-visible { outline: 2px solid var(--pp-acento, #ff0a2b); outline-offset: 4px; }
#vitrine a.vit__testar, #vitrine a.vit__cheio, #vitrine a.vit__cartaz-bt { text-decoration: none; }

/* A SOMBRA DE BAIXO DO VERMELHO: "quase não dá para ver esse efeito de
   botão, no azul ficou perfeita a diferença de tons". O preto por cima de
   um vermelho tão aceso some; a borda de baixo passa a ser o próprio
   vermelho, bem mais escuro. */
#vitrine.vit--proposta { --pp-acento-fundo: color-mix(in srgb, var(--pp-acento) 60%, #000); }
#vitrine.vit--proposta .vit__cheio {
  box-shadow: inset 0 -3px 0 var(--pp-acento-fundo), 0 8px 24px color-mix(in srgb, var(--pp-acento) 22%, transparent);
}
#vitrine.vit--proposta .vit__cheio:active { box-shadow: inset 0 -1px 0 var(--pp-acento-fundo); }
#vitrine.vit--proposta .vit__topo-acoes .vit__entrar,
.vit__cartaz-bt--cheio { box-shadow: inset 0 -3px 0 var(--pp-acento-fundo); }

/* O TÍTULO DA CAPA EM DUAS LINHAS: com a letra no tamanho máximo, a coluna
   de 60rem não cabia "Pare de passar slides." e quebrava em três no
   notebook. A coluna acompanha o vídeo, e o equilíbrio das linhas fica com
   o navegador quando precisar quebrar. */
#vitrine.vit--proposta .vit__capa--cinema .vit__capa-txt { max-width: 88rem; }
#vitrine.vit--proposta .vit__capa--cinema h1 { text-wrap: balance; }

/* OS TÍTULOS MAIS PERTO DO QUE APRESENTAM: "acredito que esse título dá
   para descer ainda mais", nos usos, nos quatro gestos e nas redes. O vão
   entre o título e o subtítulo, e entre o subtítulo e os cartões, cai pela
   metade. */
#vitrine.vit--proposta .vit__usos > h2,
#vitrine.vit--proposta #vit-como > h2,
#vitrine.vit--proposta #vit-social > h2 { margin-bottom: .75rem; }
#vitrine.vit--proposta .vit__usos > .vit__linha,
#vitrine.vit--proposta #vit-como > .vit__linha,
#vitrine.vit--proposta #vit-social > .vit__linha { margin-bottom: 1.1rem; }
#vitrine.vit--proposta #vit-como > .vit__passos { margin-top: 0; }
#vitrine.vit--proposta .vit__social-grade { margin-top: 1.1rem; }
@media (min-width: 761px) {
  /* as setas na linha do subtítulo: o vão de baixo dele (1,1rem) + a altura delas (2,6rem) */
  #vitrine.vit--proposta .vit__minis-setas { margin-top: -3.7rem; }
  #vitrine.vit--proposta .vit__minis { margin-top: 1rem; }
}