@charset "UTF-8";

/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════════╗
╟────────────────────────────────────────────────────────────────────────────────────┤ 20260921 1400  ├────╢
║                                   DESIGN SYSTEM 26 — Plataforma Diálogo Social
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════╝

# Descrição: tokens e componentes do layout 26, convertidos do mockup PDS_vs260921.
             Normatização registrada em .dev/ARCHITECTURE.md.

# Ordem de carga: bootstrap.css → filantropia_cores.css → ds_26.css
                  (este arquivo é o último, então vence por ordem sem precisar de !important)

# Exceção: o bootstrap.css tem um bloco legado colado no fim (≈ linha 11244) com
           !important em "li, p span, blockquote, a" e em "ul". Contra esse bloco a ordem
           não resolve — os poucos !important deste arquivo estão lá por causa dele e
           ficam sempre escopados numa classe do 26 (ex.: .ds-topo).

# Regra: TODAS as regras são baseadas em classe. Nenhum seletor de elemento solto,
         para não colidir com o style.css legado.
*/

 


/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    TOKENS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
:root {

	/* ╠════════════════════════════╣ cores de marca */
	--color-laranja:		#ff8200;
	--color-laranja2:		#e15500;
	--color-laranja3:		#d16b00;
	--color-laranja4:		#ffc07f;
	--color-laranja5:		#ffe5c9;
	--color-laranja6:		#fff2e3;	/* novo no 26 — fundo muito claro */

	/* ╠════════════════════════════╣ cores neutras */
	--color-preto2:			#0b1017;	/* novo no 26 — fundo profundo */
	--color-preto:			#141d2d;
	--color-preto3:			#1c2636;	/* novo no 26 — superfície elevada */
	--color-cinza:			#71878e;
	--color-cinza2:			#a6b2b6;
	--color-cinza3:			#e5e5e5;
	--color-cinza4:			#f5f5f5;
	--color-branco:			#ffffff;

	/* ╠════════════════════════════╣ acento e semânticas */
	--color-amarelo:		#FFDD00;
	--color-verde:			#cddc39;	/* novo no 26 — conteúdo aberto/gratuito */
	--color-alerta:			#d0046b;

	/* ╠════════════════════════════╣ transparências */
	--branco-sutil:			rgba(255,255,255,0.08);
	--branco-borda:			rgba(255,255,255,0.15);
	--branco-forte:			rgba(255,255,255,0.35);
	--branco-divisor:		rgba(255,255,255,0.40);
	--laranja-sutil:		rgba(255,130,0,0.18);
	--laranja-foco:			rgba(255,130,0,0.12);
	--preto-overlay:		rgba(11,16,23,0.72);
	--preto-overlay-forte:	rgba(11,16,23,0.82);

	/* véu do hero: escurece a esquerda para o texto ler sobre o vídeo */
	--veu-hero:			linear-gradient(90deg, rgba(11,16,23,0.90) 0%, rgba(11,16,23,0.68) 52%, rgba(11,16,23,0.35) 100%);

	/* ╠════════════════════════════╣ tipografia */
	--font-display:			'Raleway', sans-serif;
	--font-body:			'Lato', sans-serif;

	--text-xs:				12px;
	--text-sm:				14px;
	--text-base:			16px;
	--text-md:				20px;
	--text-lg:				24px;
	--text-xl:				28px;
	--text-2xl:				32px;
	--text-3xl:				36px;
	--text-4xl:				42px;
	--text-5xl:				52px;

	--fw-regular:			400;
	--fw-semibold:			600;
	--fw-bold:				700;
	--fw-extrabold:			800;
	--fw-black:				900;

	--leading-tight:		1.2;
	--leading-snug:			1.4;
	--leading-normal:		1.6;

	/* ╠════════════════════════════╣ forma */
	--raio-sm:				5px;
	--raio-md:				8px;
	--raio-lg:				10px;

	--sombra-sm:			0 1px 3px rgba(20,29,45,0.10);
	--sombra-md:			0 4px 12px rgba(20,29,45,0.12);
	--sombra-lg:			0 8px 30px rgba(20,29,45,0.15);
	--sombra-xl:			0 16px 48px rgba(20,29,45,0.18);

	/* ╠════════════════════════════╣ espaço */
	--container-max:		1280px;
	--container-px:			32px;
	--secao-py:				96px;
	--secao-py-sm:			32px;
	--gap-secao:			40px;
	--gap-grid:				24px;
	--gap-card:				12px;

	/* ╠════════════════════════════╣ movimento */
	--transicao:			250ms ease;
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    LAYOUT
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ container */
.ds-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}



/* ╠════════════════════════════╣ seção */
.ds-secao {
	padding-top: var(--secao-py);
	padding-bottom: var(--secao-py);
}

.ds-secao--sm {
	padding-top: var(--secao-py-sm);
	padding-bottom: var(--secao-py-sm);
}

/*├────────────────────────┤ cabeçalho da seção: eyebrow + título à esquerda, botão à direita */
.ds-secao__cabecalho {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-grid);
	margin-bottom: var(--gap-secao);
}

.ds-secao__titulos {
	display: flex;
	flex-direction: column;
	gap: 10px;
}



/* ╠════════════════════════════╣ fundos que não existem em filantropia_cores.css */
.ds-bg-preto2		{ background-color: var(--color-preto2); }

.ds-borda-topo		{ border-top: 1px solid var(--color-cinza3); }
.ds-borda-topo-clara{ border-top: 1px solid var(--branco-sutil); }







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    TIPOGRAFIA
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ títulos */
.ds-h1 {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-5xl);
	line-height: var(--leading-tight);
	margin: 0;
}

.ds-h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	margin: 0;
}

/*├────────────────────────┤ título de duas linhas (Planos, Painel do Assinante) */
.ds-titulo-duplo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ds-titulo-duplo__topo {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	margin: 0;

	/* o legado do fim do bootstrap.css manda "p { color: #151515 !important }" e a ordem de
	   carga não vence — sem o !important o "Junte-se à" sai cinza-escuro em vez de laranja. */
	color: var(--color-laranja) !important;
}

/* Mesmo caso do .ds-secao-instrutores: o legado manda "h2 { font-weight: 600 !important;
   letter-spacing: 1px !important }" e o título sai mais leve e mais espaçado do que o mockup
   pede (Raleway 800, sem letter-spacing). O escopo fica na classe do título duplo para não
   mexer nas outras H2 do site — o tamanho (36px em vez de 42px) continua vindo do legado e
   é decisão à parte, porque mudaria todos os títulos de uma vez. */
.ds-titulo-duplo .ds-h2 {
	font-weight: var(--fw-extrabold) !important;
	letter-spacing: normal !important;
}

/* o mockup quebra a linha de apoio em ~640px; sem isso o texto corre a largura toda */
.ds-titulo-duplo .ds-p { max-width: 640px; }



/* ╠════════════════════════════╣ eyebrow — um estilo, cor pelo modificador */
.ds-eyebrow {
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
}



/* ╠════════════════════════════╣ texto corrido */
.ds-p {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	margin: 0;
}

.ds-meta {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	margin: 0;
}

/*├────────────────────────┤ linha de metadados do cartão de vídeo: eixo · duração.
  O "Certificado" do mockup ficou de fora — não há origem, e foi pedido para sair.
  Combina com .ds-meta, que dá a fonte; aqui só o arranjo e a cor. */
.ds-meta-linha {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	color: var(--color-cinza2);
}

.ds-meta-linha > span {
	display: flex;
	align-items: center;
	gap: 6px;
}

/*├────────────────────────┤ o bootstrap.css patchado abre com "* { color:#141d2d }", que casa
  com o span e com o ícone e vence a herança (seletor próprio ganha de valor herdado).
  Sem estas duas linhas a linha inteira sai preta sobre o fundo escuro — invisível.
  O mesmo motivo obriga o `color: inherit` dos ícones em ÍCONES, no fim do arquivo. */
.ds-meta-linha > span,
.ds-meta-linha > span > i {
	color: inherit;
}








/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BOTÕES
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

Raleway 800 em todos — exceção documentada à regra do fonts.json, aprovada na Fase 2.
*/



/* ╠════════════════════════════╣ primário sólido */
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-base);
	line-height: 1.2;
	padding: 13px 26px;
	border: none;
	border-radius: var(--raio-sm);
	background: var(--color-laranja);
	color: var(--color-preto);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.ds-btn:hover,
.ds-btn:focus {
	background: var(--color-laranja2);
	color: var(--color-branco);
	text-decoration: none;
}

.ds-btn--sm	{ padding: 11px 22px; }
.ds-btn--lg	{ padding: 16px 40px; }



/* ╠════════════════════════════╣ contornado — texto laranja (decisão da Fase 2)

   Os !important aqui são obrigatórios, não preferência: o bloco legado no fim do bootstrap.css
   manda "a { font: 16px sans-serif !important; font-weight: 500 !important; color: #151515
   !important }" e ganha da ordem de carga. Sem eles o CTA do cartão sai cinza-escuro em
   sans-serif, e não laranja em Raleway 800. Mesmo motivo já documentado em
   .ds-btn--outline-branco, logo abaixo. */
.ds-btn--outline {
	font-family: var(--font-display) !important;
	font-weight: var(--fw-extrabold) !important;
	font-size: var(--text-base) !important;
	line-height: 1.2 !important;
	background: transparent;
	border: 2px solid var(--color-laranja);
	color: var(--color-laranja) !important;
	box-shadow: var(--sombra-md);
}

.ds-btn--outline:hover,
.ds-btn--outline:focus {
	background: var(--color-laranja);
	color: var(--color-preto) !important;
}

/*├────────────────────────┤ variante de fundo escuro (agenda). O mockup tem as duas: texto
    laranja sobre fundo claro e texto branco sobre card escuro. Aqui os !important são
    obrigatórios — o bloco legado do bootstrap.css manda "a { font: 16px sans-serif !important;
    font-weight: 500 !important; color: #151515 !important }" e ganha da ordem de carga. */
.ds-btn--outline-branco {
	font-family: var(--font-display) !important;
	font-size: 15px !important;
	font-weight: var(--fw-extrabold) !important;
	line-height: 1.2 !important;
	color: var(--color-branco) !important;
	padding: 12px 26px;
	box-shadow: none;
}

.ds-btn--outline-branco:hover,
.ds-btn--outline-branco:focus {
	background: var(--color-laranja);
	color: var(--color-preto) !important;
}



/* ╠════════════════════════════╣ largura total — CTA dentro de cartão */
.ds-btn--block {
	display: flex;
	width: 100%;
	padding: 13px 16px;
	margin-top: auto;
}



/* ╠════════════════════════════╣ botão dos planos

   O cartão de plano não tem mais variante de destaque — os três usam o mesmo CTA sólido do
   sistema (.ds-btn), só em largura total. */
/* ╠════════════════════════════╣ seta de carrossel

   A seta é um <a>, então cai no bloco legado do fim do bootstrap.css — o mesmo motivo já
   documentado em .ds-btn--outline e .ds-paginacao. Sem os !important o chevron sai #151515
   (quase preto) dentro de um círculo escuro, e a 16px em vez de 22px, porque o legado manda
   "a { font: 16px sans-serif !important; color: #151515 !important }".
   O .ds-seta > i logo abaixo usa color:inherit, então é daqui que ele tira o branco. */
.ds-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px !important;
	background: var(--preto-overlay);
	border: 1px solid var(--branco-forte);
	border-radius: 50rem;
	color: var(--color-branco) !important;
	text-decoration: none;
	z-index: 3;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.ds-seta:hover,
.ds-seta:focus {
	background: var(--color-laranja);
	border-color: var(--color-laranja);
	color: var(--color-preto) !important;
}

.ds-seta--prev	{ left: -8px; }
.ds-seta--next	{ right: -8px; }

.ds-seta[aria-disabled="true"] {
	opacity: 0;
	pointer-events: none;
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    CARTÕES
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ cartão claro — eixo, painel do assinante */
.ds-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-branco);
	border: 1px solid var(--color-cinza3);
	border-radius: var(--raio-lg);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--transicao);
}

.ds-card:hover	{ box-shadow: var(--sombra-lg); text-decoration: none; }

.ds-card__midia {
	width: 100%;
	background-color: var(--color-laranja6);
	background-size: cover;
	background-position: center;
}

.ds-card__corpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	flex: 1;
}

.ds-card__titulo-lg {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	margin: 0;
}

.ds-card__titulo {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-md);
	line-height: 1.3;
	margin: 0;
}

/* O nome do professor sai num <h3>, e o legado do bootstrap.css manda
   "h3 { letter-spacing: 1px !important }" — no corpo de 12px isso espaça a ponto de estourar a
   largura do cartão. A cor já está salva pela .branco, que também é !important. */
.ds-card__titulo-sm {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-xs);
	line-height: 1.25;
	letter-spacing: normal !important;
	margin: 0;
}

/*├────────────────────────┤ variante do cartão de vídeo: título em laranja e peso 600, como no
  mockup. Reverte a pendência P5 nº 2 do ARCHITECTURE.md — trilha, e-book e texto seguem
  brancos. O corpo (20px) fica no degrau do sistema; o mockup pedia 22px. */
.ds-card__titulo--destaque {
	font-weight: var(--fw-semibold);
}



/* ╠════════════════════════════╣ cartão de conteúdo — videoaula, trilha, e-book */
.ds-card-conteudo {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	transition: transform var(--transicao);
}

.ds-card-conteudo:hover	{ transform: translateY(-4px); }

.ds-card-conteudo__thumb {
	position: relative;
	aspect-ratio: 5 / 7;
	background-color: var(--branco-sutil);
	border-radius: var(--raio-lg);
}

/*├────────────────────────┤ variante com borda e recorte (trilha e e-book) */
.ds-card-conteudo__thumb--fechada {
	border: 1px solid var(--branco-borda);
	overflow: hidden;
}

.ds-card-conteudo__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--gap-card);
	padding: 18px 4px 4px;
	flex: 1;
}

/*├────────────────────────┤ thumb clicável: leva ao mesmo lugar que o CTA do cartão.
  Cobre o thumb inteiro, inclusive play e badges — nenhum dos dois é interativo. */
.ds-card-conteudo__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

/*├────────────────────────┤ botão de play sobreposto ao thumb da videoaula */
.ds-card-conteudo__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ds-card-conteudo__play > span {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	background: var(--branco-forte);
	border: 2px solid var(--color-laranja2);
	color: var(--color-laranja2);
	box-shadow: var(--sombra-md);
}

/*├────────────────────────┤ PARADO: avatar do palestrante. O estilo está pronto e aprovado,
  mas tb_00_conteudo_idxs não guarda a foto do palestrante por conteúdo. Ver .dev/REVISAO.md */
.ds-card-conteudo__palestrante {
	position: absolute;
	left: 50%;
	bottom: -24px;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	border: 2px solid var(--color-laranja2);
	background-size: cover;
	background-position: center;
	box-shadow: var(--sombra-lg);
	z-index: 3;
}

/*├────────────────────────┤ o avatar acima exige respiro extra na grade */
.ds-grid-videoaulas {
	--bs-gutter-x: 56px;
	--bs-gutter-y: 54px;
}



/* ╠════════════════════════════╣ cartão de professor */
.ds-card-professor {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 10px;
	background: var(--color-preto3);
	border: 1px solid var(--branco-sutil);
	border-radius: var(--raio-md);
}

.ds-card-professor__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--raio-sm);
	filter: grayscale(1);
}

/*├────────────────────────┤ instrutor sem foto no acervo (só na /instrutores): as iniciais ocupam o
  quadrado da foto. Fundo escuro de propósito — o laranja claro do .ds-avatar gritava mais que as
  fotos em preto e branco ao lado */
.ds-card-professor__foto--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-4xl);
	background: var(--color-preto2);
	color: var(--color-laranja2);
	filter: none;
}

/*├────────────────────────┤ o mockup dá 5px entre nome, selo e link — o gap-1 do Bootstrap é 4px
  e some no cartão de 1/6 da grade */
.ds-card-professor__dados {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Mesmo caso do .ds-secao-agenda: o legado do bootstrap.css manda
   "h2 { font-weight: 600 !important; letter-spacing: 1px !important }" e ganha da ordem de
   carga, então o título sai mais leve e mais espaçado do que o mockup pede (Raleway 800, sem
   letter-spacing). O escopo fica na classe da seção para não mexer nas outras H2 do site: hoje
   TODAS elas rendem 36px/600 por causa desse mesmo legado, e não os 42px/700 que o sistema
   definiu (ARCHITECTURE.md, linha 202). Consertar de uma vez é decisão à parte — muda o tamanho
   de todos os títulos do site. */
.ds-secao-instrutores .ds-h2 {
	font-weight: var(--fw-extrabold) !important;
	letter-spacing: normal !important;
}



/* ╠════════════════════════════╣ cartão de plano

   Os três cartões são iguais agora — nenhum tem destaque de cor ou selo flutuante; o que
   diferencia Prata/Ouro/Platina é só o texto do eyebrow no topo. */
.ds-card-plano {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--color-branco);
	border: 1px solid var(--color-cinza3);
	border-radius: var(--raio-lg);
	padding: 30px 26px;
}

.ds-card-plano__cabecalho {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* O nome é um <h3> e o legado do fim do bootstrap.css manda "h3 { color: #ff8200 !important;
   letter-spacing: 1px !important }" — sem os dois !important abaixo o nome sai laranja e com
   tracking, em vez do navy sem tracking do mockup. */
.ds-card-plano__nome {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-xl);
	line-height: 1;
	margin: 0;

	color: var(--color-preto) !important;
	letter-spacing: normal !important;
}

/* a citação é o próprio <p>, então cai no "p { color: #151515 !important }" do legado — a
   .cinza do HTML já resolve, por ser mais específica que o seletor de elemento. */
.ds-card-plano__citacao {
	font-family: var(--font-body);
	font-style: italic;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	margin: 0;
}

/*├────────────────────────┤ preço: uma faixa com borda em cima e embaixo, à esquerda */
.ds-card-plano__preco {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 0;
	border-top: 1px solid var(--color-cinza3);
	border-bottom: 1px solid var(--color-cinza3);
}

.ds-card-plano__valor {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-2xl);
}

/*├────────────────────────┤ benefícios, agrupados por rótulo */
.ds-card-plano__beneficios {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* "Inclui tudo do plano X" (Ouro e Platina) — mesmo !important da .ds-card-plano__item, pelo
   mesmo bloco legado ("p span" não pega aqui porque não há <p> por cima, mas o resto bate). */
.ds-card-plano__inclui {
	display: flex;
	align-items: flex-start;
	gap: 9px;

	font-family: var(--font-body) !important;
	font-weight: var(--fw-bold) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--color-preto) !important;
}

.ds-card-plano__grupo {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* O bloco legado do fim do bootstrap.css manda "ul { padding-left: 70px !important }" —
   empurrava a lista inteira para a direita. */
.ds-card-plano__lista {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	list-style: none;
	padding: 0 !important;
}

/* Mesmo bloco legado: "li { font: 16px sans-serif !important; line-height: 24px !important;
   font-weight: 500 !important; color: #151515 !important }" — sem os !important abaixo o
   item cresce, quebra linha onde o mockup não quebra e sai na cor errada. Os três cartões
   usam a mesma cor agora, então ela vai direto aqui em vez de depender de .branco/.preto
   espalhados no HTML. */
.ds-card-plano__item {
	display: flex;
	align-items: flex-start;
	gap: 9px;

	font-family: var(--font-body) !important;
	font-weight: var(--fw-regular) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--color-preto) !important;
}

.ds-card-plano__item > i,
.ds-card-plano__inclui > i { flex: none; line-height: var(--leading-normal); font-size: var(--text-base); }

/*├────────────────────────┤ grade dos planos */
.ds-grid-planos {
	--bs-gutter-x: 20px;
	--bs-gutter-y: 20px;
}



/* ╠════════════════════════════╣ cartão de evento (agenda) */
.ds-card-evento {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 26px 30px;
	background: var(--color-preto);
	border: 1px solid var(--branco-borda);
	border-radius: var(--raio-lg);
	box-shadow: 0 8px 24px rgba(0,0,0,0.22);	/* mais fechada que a --sombra-lg: precisa ler sobre o laranja */
}

.ds-card-evento__data {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 76px;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
}

.ds-card-evento__dia {
	font-size: var(--text-4xl);
	line-height: 1;
	color: var(--color-laranja);
}

.ds-card-evento__mes {
	font-size: var(--text-base);
	letter-spacing: 2px;
	color: var(--color-branco);
}

.ds-card-evento__divisor {
	flex: none;
	width: 1px;
	align-self: stretch;
	background: var(--branco-borda);
}

.ds-card-evento__img {
	flex: none;
	width: 236px;
	height: 132px;
	object-fit: cover;
	border-radius: var(--raio-md);
	background-size: cover;
	background-position: center;
}

.ds-card-evento__infos {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*├────────────────────────┤ o bloco legado do bootstrap.css (a, h2, h3 com !important) atropela
    o DS 26 justamente aqui: o "Saber mais" saía em #151515 sobre o card escuro, o dia e o mês
    perdiam a Raleway, e h2/h3 ganhavam letter-spacing. Os !important abaixo existem só por
    causa desse bloco e estão todos escopados em classe do 26. */

/* título da seção: o legado força peso 600 e letter-spacing 1px em "h2" */
.ds-secao-agenda .ds-h2 {
	font-weight: var(--fw-extrabold) !important;
	letter-spacing: normal !important;
}

.ds-secao-agenda .ds-secao__titulos .ds-eyebrow {
	font-size: 13px;
}

/* dia e mês: declaram a fonte no próprio elemento, senão o span não herda do __data */
.ds-card-evento__dia {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
}

.ds-card-evento__mes {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 15px;
}

/* linha "ON-LINE · AO VIVO · 2H": o ícone precisa do inline-flex para alinhar com o texto */
.ds-card-evento__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 1px;
}

/* título do card: o legado força letter-spacing 1px em "h3" */
.ds-card-evento .ds-card__titulo {
	font-weight: var(--fw-bold);
	font-size: 21px;
	line-height: 1.35;
	letter-spacing: normal !important;
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BADGES, CHIPS E AVATAR
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ badge */
.ds-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--text-xs);
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 50rem;
}

.ds-badge--exclusivo	{ background: var(--color-laranja2);	color: var(--color-branco); }
.ds-badge--aberto		{ background: var(--color-verde);		color: var(--color-preto); }
.ds-badge--overlay		{ background: var(--preto-overlay);		color: var(--color-branco); }
.ds-badge--laranja		{ background: var(--laranja-sutil);		color: var(--color-laranja); text-transform: none; letter-spacing: normal; }

/*├────────────────────────┤ badge posicionado sobre a imagem do cartão */
.ds-badge--canto-esq	{ position: absolute; top: 12px; left: 12px;  z-index: 2; }
.ds-badge--canto-dir	{ position: absolute; top: 12px; right: 12px; z-index: 2; }

/*├────────────────────────┤ ponto colorido dentro do badge de eixo */
.ds-badge__ponto {
	width: 7px;
	height: 7px;
	border-radius: 50rem;
	background: var(--color-laranja);
	flex: none;
}



/* ╠════════════════════════════╣ chip de tema */
.ds-chip {
	display: inline-block;
	padding: 6px 12px;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--text-xs);
	line-height: 1.4;
	background: var(--color-laranja6);
	border: 1px solid var(--color-laranja4);
	border-radius: 50rem;
	color: var(--color-preto);
	text-decoration: none;
	transition: border-color var(--transicao), color var(--transicao);
}

.ds-chip:hover {
	border-color: var(--color-laranja);
	color: var(--color-laranja2);
	text-decoration: none;
}



/* ╠════════════════════════════╣ avatar do usuário no cabeçalho */
.ds-avatar {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-base);
	background: var(--color-laranja5);
	color: var(--color-laranja2);
	border-radius: 50rem;
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BUSCA
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ busca compacta do cabeçalho */
.ds-busca-header {
	position: relative;
	flex: none;
}

.ds-busca-header__ico {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--color-cinza2);
	pointer-events: none;
}

.ds-busca-header__campo {
	width: 248px;
	height: 48px;
	padding: 0 16px 0 40px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-branco);
	background: var(--branco-sutil);
	border: 1px solid var(--branco-borda);
	border-radius: 50rem;
}

.ds-busca-header__campo::placeholder { color: var(--color-cinza2); opacity: 1; }



/* ╠════════════════════════════╣ busca grande — "O que você deseja aprender hoje?" */
.ds-busca-bloco {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	text-align: center;
}

.ds-busca-hero {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 6px 6px 6px 20px;
	background: var(--color-branco);
	border: 1px solid var(--color-cinza3);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-md);
}

.ds-busca-hero__ico {
	flex: none;
	font-size: 18px;
	color: var(--color-laranja);
}

.ds-busca-hero__campo {
	flex: 1;
	height: 48px;
	border: none;
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-preto);
}

.ds-busca-hero__campo::placeholder { color: var(--color-cinza2); opacity: 1; }



/* ╠════════════════════════════╣ foco padrão dos campos do 26 */
.ds-busca-header__campo:focus,
.ds-busca-hero__campo:focus {
	outline: none;
	border-color: var(--color-laranja);
	box-shadow: 0 0 0 3px var(--laranja-foco);
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    CABEÇALHO
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
.ds-topo {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-preto);
	border-bottom: 1px solid var(--branco-borda);
}

.ds-topo__interno {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 78px;
}

.ds-topo__marca img { height: 58px; width: auto; display: block; }

.ds-topo__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}

/* ╠════════════════════════════╣ link de menu — sobrescreve o .nav-link do Bootstrap

   Os !important daqui para baixo nao sao gosto: o bootstrap.css do projeto tem um
   bloco legado colado no fim (por volta da linha 11244) com

       li, p span, blockquote, a { font: 16px sans-serif !important;
                                   line-height: 24px !important;
                                   color: #151515 !important;
                                   font-weight: 500 !important; }
       ul    { padding-left: 70px !important; }
       ul li { list-style: disc; }

   que atropela tipografia, cor e recuo de QUALQUER <a>/<li> da pagina. Sem marcar,
   o menu sai cinza, sans-serif, sem negrito e com bolinha. So levam !important as
   propriedades que perdem para esse bloco, e so dentro de .ds-topo.                  */
.ds-topo .ds-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	font-family: var(--font-display) !important;
	font-weight: var(--fw-bold) !important;
	font-size: 15px !important;			/* 15px do mockup — fica entre --text-sm e --text-base */
	line-height: normal !important;
	color: var(--color-branco) !important;
	border-radius: var(--raio-sm);
	text-decoration: none;
	transition: background var(--transicao), color var(--transicao);
}

/* o Bootstrap 5 poe .show no proprio link (bootstrap.js:2133), nao no .dropdown de fora —
   por isso o estado aberto e .ds-nav__link.show, e nao ".show > .ds-nav__link"          */
.ds-topo .ds-nav__link:hover,
.ds-topo .ds-nav__link:focus,
.ds-topo .ds-nav__link.show {
	background: var(--branco-sutil);
	color: var(--color-laranja) !important;
}

/* o "* { color: #141d2d }" do legado pinta o <i> direto (nao e heranca, e regra no elemento),
   entao o chevron sumia no fundo escuro. Aqui ele volta a seguir a cor do proprio link.  */
.ds-topo .ds-nav__link i { color: inherit; }

/* ╠════════════════════════════╣ dropdown do 26 */
.ds-topo .dropdown-menu {
	min-width: 224px;
	margin-top: 0;						/* cola no link, igual ao top:100% do mockup */
	padding: 8px !important;			/* vence o "ul { padding-left: 70px }" legado */
	background: var(--color-branco);
	border: 1px solid var(--color-cinza3);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-lg);
}

.ds-topo .dropdown-item {
	padding: 10px 14px;
	font-family: var(--font-body) !important;
	font-weight: var(--fw-bold) !important;
	font-size: 15px !important;
	line-height: normal !important;
	color: var(--color-preto) !important;
	border-radius: var(--raio-sm);
}

.ds-topo .dropdown-item:hover,
.ds-topo .dropdown-item:focus {
	background: var(--color-laranja5);
	color: var(--color-laranja2) !important;
}

.ds-topo .dropdown-item--alerta			{ color: var(--color-alerta) !important; }
.ds-topo .dropdown-item--alerta:hover,
.ds-topo .dropdown-item--alerta:focus	{ background: var(--color-cinza4); color: var(--color-alerta) !important; }

/* ╠════════════════════════════╣ lista do dropdown — mata a bolinha do "ul li { list-style: disc }" */
.ds-topo__lista			{ list-style: none; margin: 0; }
.ds-topo__lista li		{ list-style: none; }
.ds-topo__lista li + li	{ margin-top: 2px; }	/* o gap:2px da coluna do mockup */



   



/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    HERO
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
.ds-hero { background: #0B0F16; }

.ds-hero__palco {
	position: relative;
	overflow: hidden;
	max-width: var(--container-max);
	margin: 0 auto;
}

.ds-hero__video {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	z-index: 0;
}

.ds-hero__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--veu-hero);
}

.ds-hero__conteudo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-grid);
	max-width: 660px;
	padding: 88px var(--container-px) var(--secao-py);
}

.ds-hero__badge {
	display: inline-block;
	padding: 8px 16px;
	background: rgb(255 130 0);
	color: var(--color-laranja);
	border-radius: 50rem;
}

.ds-hero__lead { max-width: 540px; }

.ds-hero__acoes { display: flex; gap: 14px; align-items: center; }

/* ╠════════════════════════════╣ caixa "continuar de onde parei" */
.ds-hero__retomar {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 600px;
	margin-top: 12px;
	padding: 20px;
	background: var(--branco-sutil);
	border: 1px solid var(--branco-borda);
	border-radius: var(--raio-lg);
}

.ds-hero__retomar-capa {
	flex: none;
	width: 72px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--raio-sm);
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    BARRA DE PROGRESSO
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

PARADO: não há origem para o percentual assistido por usuário. Estilo aprovado, pronto para
quando o dado existir. Mesmo caso de .ds-hero__retomar. Ver .dev/REVISAO.md
(a .ds-meta-linha saiu deste estado em 20260923: eixo e duração vieram das indexações.)
*/
.ds-progresso {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ds-progresso__trilho {
	flex: 1;
	height: 8px;
	background: var(--branco-forte);
	border-radius: 50rem;
	overflow: hidden;
}

.ds-progresso__trilho--fino { height: 6px; }

.ds-progresso__barra {
	height: 100%;
	background: var(--color-laranja);
	border-radius: 50rem;
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    ABAS E LINKS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/



/* ╠════════════════════════════╣ abas de tema */
.ds-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid var(--color-cinza3);
	margin-bottom: var(--gap-grid);
}

.ds-abas__item {
	display: inline-block;
	padding: 12px 18px;
	margin-bottom: -1px;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-base);
	color: var(--color-cinza);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: var(--raio-md) var(--raio-md) 0 0;
	text-decoration: none;
	transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}

.ds-abas__item:hover	{ color: var(--color-laranja2); }

.ds-abas__item.ativa {
	font-weight: var(--fw-extrabold);
	color: var(--color-preto);
	background: var(--color-laranja6);
	border-bottom-color: var(--color-laranja);
}

/*├────────────────────────┤ painel escondido: o [hidden] do Bootstrap perde para .d-flex
                            (as duas regras são !important e a utility vem depois no arquivo),
                            então o painel inativo continuava visível. Seletor duplo para vencer. */
[data-ds-painel][hidden] {
	display: none !important;
}



/* ╠════════════════════════════╣ links */
.ds-link-acao {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--text-base);
	color: var(--color-laranja2);
	text-decoration: none;
}

/* O "Saiba mais" do cartão de professor é um <a>: sem os !important o bloco legado do fim do
   bootstrap.css o entrega em sans-serif 16px, peso 500, #151515 e line-height 24px — quase
   invisível sobre o #1c2636 do cartão e alto demais para a coluna de 1/6 da grade. O `font`
   do legado é shorthand, por isso family, size, weight e line-height precisam de um !important
   cada. Mesmo motivo já documentado em .ds-btn--outline e .ds-paginacao. */
.ds-link-discreto {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--branco-forte);
	text-decoration: none;
	transition: color var(--transicao), border-color var(--transicao);

	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: var(--fw-bold) !important;
	line-height: var(--leading-tight) !important;
	color: var(--color-cinza2) !important;
}

.ds-link-discreto:hover {
	color: var(--color-laranja) !important;
	border-color: var(--color-laranja);
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    CARROSSEL
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
.ds-carrossel			{ position: relative; }
.ds-carrossel__janela	{ overflow: hidden; }

.ds-carrossel__trilho {
	display: flex;
	transition: transform 550ms ease;
}

.ds-carrossel__item		{ flex: 0 0 100%; box-sizing: border-box; }

.ds-carrossel__pontos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 3;
}

.ds-carrossel__ponto {
	width: 9px;
	height: 9px;
	border-radius: 50rem;
	background: var(--branco-forte);
	text-decoration: none;
	transition: width 300ms ease, background 300ms ease;
}

.ds-carrossel__ponto.ativo {
	width: 28px;
	background: var(--color-laranja);
}







/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    MODAL DO PROFESSOR
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝
*/
.ds-modal .modal-content {
	background: var(--color-preto3);
	border: 1px solid var(--branco-borda);
	border-radius: var(--raio-lg);
	box-shadow: var(--sombra-xl);
}

.ds-modal__grade {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
}

.ds-modal__foto {
	height: 65%;
	background-size: cover;
	background-position: center;
	background-color: var(--color-preto);
	border-radius: var(--raio-lg) 0 0 var(--raio-lg);
}

.ds-modal__corpo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 34px 34px 34px 30px;
}

.ds-modal__bloco {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/*├────────────────────────┤ item da lista "Cursos na plataforma" que tem destino: vira <a> e cai
  no bloco legado do fim do bootstrap.css, que entregaria sans-serif 16px/500 e line-height 24px.
  Os !important repõem o que o .ds-card-plano__item já diz. Mesmo motivo de .ds-link-discreto e
  .ds-paginacao. */
.ds-modal__curso {
	text-decoration: none;
	transition: color var(--transicao);

	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.45 !important;
}

/*├────────────────────────┤ cor dos itens da lista, com link ou sem. A .branco que o ds_26.js põe no
  item NÃO basta: o .ds-card-plano__item manda preto !important com a mesma especificidade e vem
  depois dela na carga (filantropia_cores.css → ds_26.css), então o curso saía preto no fundo
  escuro do modal. O escopo em .ds-modal sobe a especificidade sem tocar nos cartões de plano.
  Fica antes do :hover, que empata em especificidade e precisa vir depois para o laranja vencer. */
.ds-modal .ds-card-plano__item {
	color: var(--color-branco) !important;
}

.ds-modal__curso:hover,
.ds-modal__curso:focus {
	color: var(--color-laranja) !important;
	text-decoration: underline;
}

.ds-modal__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--preto-overlay);
	border: none;
	border-radius: 50rem;
	color: var(--color-branco);
	z-index: 2;
	transition: background var(--transicao), color var(--transicao);
}

.ds-modal__fechar:hover {
	background: var(--color-laranja);
	color: var(--color-preto);
}
/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    RODAPÉ
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

Medidas copiadas da seção "H · RODAPÉ" do mockup PDS_vs260921.

Dois legados brigam com este bloco, por isso ele usa !important em quase toda regra de texto:

1. style.css tem `footer { margin-top: 50px!important; padding: 18px 0 86px 0 }`.
2. bootstrap.css tem, no fim do arquivo, um remendo antigo:
   `li, p span, blockquote, a { font: 16px sans-serif!important; line-height:24px!important;
    color:#151515!important; font-weight:500!important }` mais `p { color:#151515!important }`.
   Sem !important aqui todo link do rodapé fica #151515 sobre fundo #141d2d — preto no preto.
   Carregar o ds_26.css por último não resolve: !important vence ordem de carga.
   Atenção: o atalho `font:` do legado zera família, tamanho, peso e entrelinha de uma vez,
   então as quatro precisam ser redeclaradas, não só a cor.
*/
.ds-rodape {
	background: var(--color-preto);
	margin-top: 0 !important;
	padding: 0 !important;
}

.ds-rodape__topo { padding-top: 94px; }

/* ╠════════════════════════════╣ grade das 4 colunas
   O mockup pede 1.4 / 1 / 1 / 1.2 — proporção que a grade de 12 do bootstrap não dá.
   Daí a grade própria: 1 coluna no celular, 2 no tablet, 4 no desktop. */
.ds-rodape__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

@media (min-width: 576px) {
	.ds-rodape__grid		{ grid-template-columns: 1fr 1fr; }
	.ds-rodape__coluna--marca	{ grid-column: 1 / -1; }
}

@media (min-width: 992px) {
	.ds-rodape__grid		{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
	.ds-rodape__coluna--marca	{ grid-column: auto; }
}

.ds-rodape__coluna {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ds-rodape__coluna--marca	{ gap: 20px; }

.ds-rodape__marca {
	height: 84px;
	width: auto;
	max-width: 100%;
	object-fit: contain;	/* no celular a coluna aperta; sem isto o logo sai achatado */
	align-self: flex-start;
}

.ds-rodape__sobre {
	font-family: var(--font-body) !important;
	font-weight: var(--fw-regular) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--color-cinza2) !important;
	max-width: 300px;
	margin: 0;
}

/* ╠════════════════════════════╣ título de coluna (Raleway 800, diferente do .ds-eyebrow) */
.ds-rodape__titulo {
	font-family: var(--font-display) !important;
	font-weight: var(--fw-extrabold) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-branco) !important;
	margin: 0;
}

/* ╠════════════════════════════╣ links das colunas */
.ds-rodape__link {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-body) !important;
	font-weight: var(--fw-regular) !important;
	font-size: 15px !important;
	line-height: var(--leading-snug) !important;
	color: var(--color-cinza2) !important;
	text-decoration: none;
	transition: color var(--transicao);
}

.ds-rodape__link:hover	{ color: var(--color-laranja) !important; }

.ds-rodape__ponto {
	width: 5px;
	height: 5px;
	border-radius: 50rem;
	background: var(--color-laranja2);
	flex: none;
}

/* ╠════════════════════════════╣ redes sociais */
.ds-rodape__social {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.ds-rodape__social a {
	width: 42px;
	height: 42px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base) !important;
	line-height: 1 !important;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50rem;
	color: var(--color-branco) !important;
	text-decoration: none;
	transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.ds-rodape__social a:hover {
	background: var(--color-laranja);
	border-color: var(--color-laranja);
	color: var(--color-preto) !important;
}

/* mesmo caso do .ds-topo: o "* { color: #141d2d }" do style.css pinta o <i> direto, e regra
   no elemento vence herança. Sem isto os 4 ícones ficam #141d2d sobre fundo #141d2d. */
.ds-rodape__social a i { color: inherit; }

/* ╠════════════════════════════╣ barra legal */
.ds-rodape__legal-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap-grid);
	margin-top: 56px;
	padding: 28px 0;
	border-top: 1px solid rgba(255,255,255,0.12);
}

.ds-rodape__legal {
	font-family: var(--font-body) !important;
	font-weight: var(--fw-regular) !important;
	font-size: 13px !important;
	line-height: var(--leading-snug) !important;
	color: var(--color-cinza) !important;
	text-decoration: none;
	margin: 0;
}

a.ds-rodape__legal:hover { color: var(--color-laranja) !important; }

/* diagnóstico do acesso (id|funções|plano|vigência) — mutado, no meio da barra */
.ds-rodape__diag {
	flex: 1;
	text-align: center;
	opacity: .45;
	font-size: 11px !important;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}






/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════╗
║                                    UTILITÁRIOS
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

O Bootstrap 5.0.2 não traz object-fit, aspect-ratio nem flex:none como utilitário.
Estas classes cobrem essa lacuna e evitam qualquer style= inline na marcação.
*/

/* ╠════════════════════════════╣ flex */
.ds-flex-none		{ flex: none; }
.ds-flex-1			{ flex: 1; }

/* ╠════════════════════════════╣ posição */
.ds-cobre-tudo		{ position: absolute; inset: 0; border-radius: inherit; }

/* ╠════════════════════════════╣ imagem que preenche um pai de altura conhecida */
.ds-img-cobre {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ╠════════════════════════════╣ imagem em fluxo: a altura sai da proporção, não do pai */
.ds-img-prop {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* ╠════════════════════════════╣ proporções usadas nos cartões */
.ds-prop-3x2		{ aspect-ratio: 3 / 2; }
.ds-prop-16x9		{ aspect-ratio: 16 / 9; }
.ds-prop-1x1		{ aspect-ratio: 1 / 1; }
.ds-prop-banner		{ aspect-ratio: 2000 / 315; }	/* proporção real dos banners da maratona */

/* ╠════════════════════════════╣ tamanho de ícone */
.ds-ico-xs			{ font-size: 10px; }
/*├────────────────────────┤ ícone que herda a cor do componente que o contém.
  Obrigatório por causa do "* { color:#141d2d }" que abre o bootstrap.css patchado: o seletor
  universal casa com o <i> e vence o valor herdado do pai. Sem isto, a seta do play, o cadeado
  do badge e o ícone dentro do botão saem azul-escuros — invisíveis sobre fundo escuro.
  Ícone com classe de cor própria (.laranja, .branco…) não é afetado: elas têm !important. */
.ds-badge > i,
.ds-btn > i,
.ds-seta > i,
.ds-card-conteudo__play > span > i {
	color: inherit;
}

.ds-ico-sm			{ font-size: 13px; }
.ds-ico-md			{ font-size: 16px; }
.ds-ico-xl			{ font-size: 24px; }

/* ╠════════════════════════════╣ listas sem marcador */
.ds-lista-limpa {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ╠════════════════════════════╣ quantos itens cabem na janela do carrossel */
.ds-carrossel__item--3	{ flex-basis: 33.3333%; }
.ds-carrossel__item--6	{ flex-basis: 16.6667%; }


/* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗
   ║   LISTA DE CONTEUDO — o terceiro container, ao lado da grade e do carrossel
   ╚══════════════════════════════════════════════════════════════════════════════════════════════╝
   Linha horizontal: thumb pequena + infos + acao. Modelada no .ds-card-evento, que e o unico
   horizontal que o DS ja tinha — mesma borda, mesmo raio, mesmo fundo. */

.ds-lista-conteudo {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ds-lista-conteudo__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 18px;
	background: var(--color-preto);
	border: 1px solid var(--branco-borda);
	border-radius: var(--raio-md);
	text-decoration: none;
	transition: border-color var(--transicao), transform var(--transicao);
}

.ds-lista-conteudo__item:hover {
	border-color: var(--color-laranja);
	transform: translateX(4px);
	text-decoration: none;
}

.ds-lista-conteudo__thumb {
	position: relative;
	flex: none;
	width: 108px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--raio-sm);
	background: var(--preto-overlay);
}

/* o cadeado fica sobre a thumb, nao ao lado do titulo: a linha ja e estreita */
.ds-lista-conteudo__cadeado {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50rem;
	background: var(--preto-overlay);
	color: var(--color-branco);
	font-size: 11px;
}

.ds-lista-conteudo__infos {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;			/* sem isso o flex item nao encolhe e o texto longo estoura a linha */
}

.ds-lista-conteudo__acao { flex: none; }

/* no celular a linha vira bloco: thumb e texto empilhados, botao em largura total */
@media (max-width: 575.98px) {

	.ds-lista-conteudo__item {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ds-lista-conteudo__thumb	{ width: 84px; }
	.ds-lista-conteudo__acao	{ flex: 1 1 100%; }
	.ds-lista-conteudo__acao .ds-btn { width: 100%; justify-content: center; }
}


/* ╔══════════════════════════════════════════════════════════════════════════════════════════════╗
   ║   PAGINACAO — sobre fundo preto, centralizada no container
   ╚══════════════════════════════════════════════════════════════════════════════════════════════╝
   Os !important de fonte e cor sao obrigatorios, nao preferencia: o bloco legado no fim do
   bootstrap.css manda "a { font: 16px sans-serif !important; line-height: 24px !important;
   color: #151515 !important; font-weight: 500 !important }" e ganha da ordem de carga. Sem eles
   o numero da pagina sai quase preto sobre fundo preto, em sans-serif. Mesmo motivo ja
   documentado em .ds-btn--outline. O `font` do legado e shorthand, entao family, size, weight
   e line-height precisam de !important cada um.

   O fundo e transparente de proposito: quem pinta e a secao. Assim a faixa acompanha qualquer
   secao em que a paginacao for usada, sem precisar de variante. */

.ds-paginacao {
	display: flex;
	justify-content: center;
}

.ds-paginacao .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* o Bootstrap cola os itens com margin-left:-1px para formar a barra unica; aqui eles sao
   pastilhas soltas, entao a colagem sai */
.ds-paginacao .page-item:not(:first-child) .page-link { margin-left: 0; }

.ds-paginacao .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--branco-borda);
	border-radius: var(--raio-sm);
	box-shadow: none;
	text-decoration: none;
	transition: background var(--transicao), border-color var(--transicao);

	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1 !important;
	color: var(--color-branco) !important;
}

.ds-paginacao a.page-link:hover,
.ds-paginacao a.page-link:focus {
	background: var(--color-laranja);
	border-color: var(--color-laranja);
	color: var(--color-preto) !important;
	outline: none;
}

/* a pagina atual e um <span>, nao um <a> — nao tem hover nem destino */
.ds-paginacao .page-item.active .page-link {
	background: var(--color-laranja);
	border-color: var(--color-laranja);
	color: var(--color-preto) !important;
}