/* LP de parceiro (lp-parceiros/SPEC §5, 11/10/2026). O hero é o padrão (hero.css); aqui só a correção de cor da foto do
   parceiro (fotos chegam com luz e fundo variados) e a dobra "Quem é". Tokens do DS 2.0 (assets/tokens.css).
   Hero em .par-hero (não .lp-hero: esse nome é do hero antigo da abrir-conta, no bundle.css). */
#main .par-hero .par-hero-foto { filter: brightness(.9) saturate(.9) contrast(1.04); }

/* .lp-quem.lp-quem: acima de 1000px o v3.css ("main section:not(#atributos):not(.hero,.lp-hero)", especificidade 1,1,2) pôs padding de
   64px e min-height de dobra com flex nesta seção, e a regra simples (1,1,0) perdia. Dobrar a classe (1,2,0) devolve o padding
   pedido e tira a altura mínima: o respiro de baixo fica pequeno de verdade (12/10/2026). */
#main .lp-quem.lp-quem { min-height: 0; display: block; padding: clamp(64px, 9vw, 120px) 0 clamp(24px, 4vw, 56px); background: var(--bg); }
#main .lp-quem .wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); display: grid; gap: 24px; }
#main .lp-quem-bio p { max-width: 720px; color: #c9c9c9; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; margin: 0 0 1em; }
#main .lp-quem-destaques { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#main .lp-quem-destaques li { background: var(--surface-1, #141414); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 20px; }

/* "Quem é": eyebrow e título (nome) centralizados (12/10/2026, pedido do Paulo). A bio e os destaques seguem como estão. */
#main .lp-quem .eyebrow, #main .lp-quem h2 { text-align: center; justify-content: center; }

/* Ordem do molde (12/10/2026): hero + barra, fio tracejado, S8 sem o kicker, "Quem é", S3 com o parágrafo da S2 logo abaixo
   do título. O fio (.tr-dash) e o .tr-s2-inner saíram da .tr-s2, que não existe mais no molde; as regras do trader.css que
   dependiam dela (#main .tr .tr-s2.tr-sec e .tr-s2 .tr-s2-inner) são replicadas aqui. .tr-dash e .tr-lead não dependem
   dela, e o trader.js anima o fio por [data-tr-seen] em qualquer lugar do .tr. */
#main .tr .tr-s3 .lp-s3-lead { max-width: 860px; margin: clamp(20px, 2.4vw, 32px) auto 0; text-align: center; text-wrap: wrap; }
/* sem o kicker, o título da S8 abre a seção: o respiro de cima é só o padding da dobra (a margem de 24px era para o kicker) */
#main .tr .tr-s8 .tr-s8-title:first-child { margin-top: 0; }

/* Botão "Abrir minha conta" no fim de cada dobra (12/10/2026, pedido do Paulo). Só no desktop: abaixo de 760px (o corte do
   site, hero.css e trader.css) a barra fixa .tr-bar já faz esse papel. O wrapper entra no molde pelo build (S3, S4, S6, S7, S9,
   S10) e pelo site Next (dobra "Quem é"); a S5 e a S8 já têm o botão delas, e o hero também. */
#main .lp-cta-dobra { display: flex; justify-content: center; margin: clamp(32px, 3.6vw, 48px) auto 0; }
@media (max-width: 759.98px) { #main .lp-cta-dobra { display: none; } }

/* o reset de <a> do trader.css (.tr a, .tr a:hover: cor do texto e do acento) vence o .btn--primary do DS: a cor do texto do botão
   (e o glow, como no hero) é restabelecida aqui, como o hero.css faz para o .hero */
#main .tr .lp-cta-dobra .btn--primary, #main .tr .lp-cta-dobra .btn--primary:hover, #main .lp-quem .lp-cta-dobra .btn--primary, #main .lp-quem .lp-cta-dobra .btn--primary:hover { color: var(--cta-text); }
#main .lp-cta-dobra .btn--primary { box-shadow: var(--glow); }
#main .lp-cta-dobra .btn--primary:hover { box-shadow: var(--glow-2); }

/* S6 sem o mockup, no celular: o trader.css zera a margem de cima da linha de tags (ela vinha depois da composição); sem a
   composição, a linha precisa do respiro do apoio. No desktop a margem do trader.css (28px) já vale. */
@media (max-width: 759.98px) { #main .tr .tr-s6 .tr-s6-body { margin-top: 28px; } }

/* Benefícios do parceiro (14/10/2026, pedido do Paulo): dobra BRANCA e opcional logo depois do "Quem é", montada pelo site Next
   na mesma lacuna. data-theme="light" na seção puxa o tema claro do DS 2.0 (tokens.css): texto neutral-900, destaque oliva
   (--accent), botão preto com texto branco (--cta). O .tr fixa --tr-acc em amarelo no nível dele, então o destaque do título é
   reposto aqui; o glow amarelo do botão sai (sobre o branco ele vira mancha). Classe dobrada pelo mesmo motivo da .lp-quem. */
#main .lp-beneficios.lp-beneficios { min-height: 0; display: block; padding: clamp(64px, 9vw, 120px) 0; background: var(--surface-1); color: var(--text); }
#main .lp-beneficios .wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); display: grid; gap: clamp(28px, 3.2vw, 44px); }
#main .lp-beneficios h2 { text-align: center; color: var(--text); margin: 0; }
#main .tr .lp-beneficios .tr-h2 em, #main .lp-beneficios h2 em { font-style: normal; color: var(--accent); }
#main .lp-ben-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#main .lp-ben-lista li { display: grid; gap: 8px; align-content: start; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
#main .lp-ben-lista strong { font-weight: 700; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.25; color: var(--text); }
#main .lp-ben-lista span { font-size: 16px; line-height: 1.5; color: var(--text-2); }
#main .lp-ben-condicao { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-2); }
#main .lp-beneficios .lp-cta-dobra { margin-top: 0; }
#main .tr .lp-beneficios .lp-cta-dobra .btn--primary, #main .tr .lp-beneficios .lp-cta-dobra .btn--primary:hover,
#main .lp-beneficios .lp-cta-dobra .btn--primary, #main .lp-beneficios .lp-cta-dobra .btn--primary:hover { color: var(--cta-text); box-shadow: none; }