/* =========================================================================
   DeVeneta — Design System
   Direção B (Placar) · paleta da marca: preto, branco, âmbar
   Este arquivo é a Etapa 4 em código. Os mesmos valores devem ser lançados
   em Elementor › Site Settings › Global Colors e Global Fonts, para que os
   widgets herdem em vez de receber estilo manual.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */

:root {
	/* --- Cor: marca ------------------------------------------------------ */
	--dv-preto:        #010101;  /* logotipo, uso institucional              */
	--dv-tinta:        #101114;  /* superfícies escuras: header, footer, CTA */
	--dv-tinta-2:      #2A2C31;  /* divisórias sobre tinta                   */
	--dv-tinta-3:      #35383E;  /* bordas de campo sobre tinta              */
	--dv-ambar:        #FCBB15;  /* destaque: filete, etiqueta, botão        */
	--dv-ambar-texto:  #8A6100;  /* âmbar legível sobre branco (6,1:1)       */
	--dv-branco:       #FFFFFF;

	/* --- Cor: texto ------------------------------------------------------ */
	--dv-texto:        #14161A;  /* corpo (15,9:1 sobre branco)              */
	--dv-texto-2:      #40454C;  /* linha fina, resumo (9,3:1)               */
	--dv-texto-3:      #5B6169;  /* metadados (6,2:1)                        */
	--dv-texto-claro:  #C9CBD0;  /* corpo sobre tinta (12,1:1)               */
	--dv-texto-claro-2:#A5A8AE;  /* metadados sobre tinta (7,4:1)            */

	/* --- Cor: superfície e traço ---------------------------------------- */
	--dv-fundo:        #FFFFFF;
	--dv-fundo-2:      #F7F5F0;  /* caixas de apoio: fontes, destaque        */
	--dv-linha:        #E1E4E8;  /* borda de card e de campo                 */
	--dv-linha-2:      #F0EEE9;  /* separador interno de lista               */
	--dv-imagem:       #E5E6E9;  /* placeholder enquanto a foto carrega      */

	/* --- Cor: estado ----------------------------------------------------- */
	--dv-urgente:      #A32020;  /* plantão, correção, erro de formulário    */
	--dv-aovivo:       #1B6B3A;  /* jogo em andamento, sucesso               */
	--dv-foco:         #FCBB15;  /* halo de foco de teclado                  */

	/* Nunca usar --dv-ambar como cor de texto sobre branco: 1,7:1.
	   Nunca usar apenas cor para diferenciar link de texto: sublinhado sempre. */

	/* --- Tipografia ------------------------------------------------------ */
	--dv-fonte-titulo: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--dv-fonte-texto:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	--dv-fonte-mono:   ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Escala responsiva. Mínimo = 390px, máximo = 1280px. */
	--dv-t-manchete:   clamp(1.75rem, 1.15rem + 2.6vw, 2.375rem); /* 28→38 */
	--dv-t-h1:         clamp(1.6875rem, 1.1rem + 2.5vw, 2.5rem);  /* 27→40 */
	--dv-t-h2:         clamp(1.375rem, 1.05rem + 1.4vw, 1.625rem);/* 22→26 */
	--dv-t-h3:         clamp(1.1875rem, 1.05rem + 0.6vw, 1.3125rem);
	--dv-t-titulo-card:clamp(1.03125rem, 0.97rem + 0.3vw, 1.1875rem);
	--dv-t-linhafina:  clamp(1.09375rem, 1rem + 0.45vw, 1.25rem); /* 17.5→20 */
	--dv-t-corpo:      clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* 17→18 */
	--dv-t-meta:       0.8125rem;
	--dv-t-etiqueta:   0.71875rem;

	--dv-lh-manchete:  1.22;
	--dv-lh-titulo:    1.25;
	--dv-lh-corpo:     1.68;
	--dv-lh-meta:      1.4;

	/* --- Espaçamento: régua de 4 px -------------------------------------- */
	--dv-e-1: 4px;   --dv-e-2: 8px;   --dv-e-3: 12px;  --dv-e-4: 16px;
	--dv-e-5: 20px;  --dv-e-6: 24px;  --dv-e-8: 32px;  --dv-e-10: 40px;
	--dv-e-12: 48px; --dv-e-16: 64px;

	/* --- Layout ----------------------------------------------------------- */
	--dv-container:    1160px;  /* largura máxima do conteúdo               */
	--dv-leitura:      720px;   /* coluna de texto: 66–72 caracteres        */
	--dv-sidebar:      300px;
	--dv-gutter:       28px;
	--dv-margem-mobile:16px;

	/* --- Traço e sombra ---------------------------------------------------- */
	--dv-raio:         4px;     /* único raio do projeto                     */
	--dv-borda:        1px solid var(--dv-linha);
	--dv-sombra:       0 1px 3px rgba(1, 1, 1, .10);  /* a única sombra      */

	/* --- Áreas de toque --------------------------------------------------- */
	--dv-toque:        44px;
}

/* Ajuste de texto do controle de acessibilidade. */
html[data-dv-texto='grande'] { font-size: 112.5%; }
html[data-dv-texto='maior']  { font-size: 125%; }

/* Modo de alto contraste: remove o cinza intermediário e reforça as bordas. */
html[data-dv-contraste] {
	--dv-texto-2: #14161A;
	--dv-texto-3: #2A2C31;
	--dv-texto-claro: #FFFFFF;
	--dv-texto-claro-2: #FFFFFF;
	--dv-linha: #14161A;
	--dv-linha-2: #767B82;
	--dv-fundo-2: #FFFFFF;
}

html[data-dv-sem-animacao] *,
html[data-dv-sem-animacao] *::before,
html[data-dv-sem-animacao] *::after {
	animation-duration: .001ms !important;
	transition-duration: .001ms !important;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------------- */

body {
	font-family: var(--dv-fonte-texto);
	font-size: var(--dv-t-corpo);
	line-height: var(--dv-lh-corpo);
	color: var(--dv-texto);
	background: var(--dv-fundo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--dv-fonte-titulo);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: var(--dv-lh-titulo);
	text-wrap: balance;
	margin: 0;
}

p { text-wrap: pretty; }

/* Link: cor + sublinhado. A cor sozinha nunca identifica um link. */
a {
	color: var(--dv-texto);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(1, 1, 1, .35);
}

a:hover {
	text-decoration-color: var(--dv-ambar-texto);
	color: var(--dv-ambar-texto);
}

/* Títulos de card não sublinham em repouso — o card inteiro já é o alvo. */
.dv-news-card a,
.dv-headline a,
.dv-menu a { text-decoration: none; }

.dv-news-card a:hover,
.dv-headline a:hover { text-decoration: underline; }

/* Foco de teclado: sempre visível, sempre igual, em qualquer fundo. */
:focus-visible {
	outline: 3px solid var(--dv-foco);
	outline-offset: 2px;
	border-radius: 2px;
}

.dv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--dv-tinta);
	color: #fff;
	padding: var(--dv-e-3) var(--dv-e-5);
	font-weight: 600;
	text-decoration: none;
}

.dv-skip-link:focus {
	left: var(--dv-e-4);
	top: var(--dv-e-4);
}

img { max-width: 100%; height: auto; }

/* Reserva de espaço: toda figura tem proporção declarada, o CLS não sobe. */
.dv-media { display: block; background: var(--dv-imagem); overflow: hidden; }
.dv-media--16x9 { aspect-ratio: 16 / 9; }
.dv-media--3x2  { aspect-ratio: 3 / 2; }
.dv-media--1x1  { aspect-ratio: 1 / 1; }
.dv-media img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------------- */

.dv-container {
	width: 100%;
	max-width: var(--dv-container);
	margin-inline: auto;
	padding-inline: var(--dv-margem-mobile);
}

@media (min-width: 768px) {
	.dv-container { padding-inline: var(--dv-e-8); }
}

.dv-grid { display: grid; gap: var(--dv-gutter); }

/* Manchete + coluna de apoio. Uma coluna até 900px. */
.dv-grid--destaques { grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.dv-grid--destaques { grid-template-columns: 1.62fr 1fr; }
}

/* Grade de 4 cards → 2 no tablet → 1 no celular. */
.dv-grid--cards { grid-template-columns: 1fr; }
@media (min-width: 600px) { .dv-grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dv-grid--cards { grid-template-columns: repeat(4, 1fr); } }

/* Matéria + sidebar. A sidebar só existe a partir de 1024px. */
.dv-grid--artigo { grid-template-columns: 1fr; gap: var(--dv-e-10); }
@media (min-width: 1024px) {
	.dv-grid--artigo { grid-template-columns: minmax(0, 1fr) var(--dv-sidebar); gap: 44px; }
}

.dv-secao { display: flex; flex-direction: column; gap: var(--dv-e-4); }

.dv-secao__cabecalho {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--dv-e-4);
	border-bottom: 2px solid var(--dv-tinta);
	padding-bottom: 7px;
}

.dv-secao__cabecalho--agenda { border-bottom-color: var(--dv-ambar); }

.dv-secao__titulo {
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--dv-tinta);
}

/* -------------------------------------------------------------------------
   4. CABEÇALHO E RODAPÉ
   ---------------------------------------------------------------------- */

.dv-header { background: var(--dv-tinta); color: #fff; }
.dv-header a { color: #fff; text-decoration: none; }
.dv-header a:hover { color: var(--dv-ambar); }

.dv-header__barra {
	display: flex; justify-content: space-between; align-items: center;
	min-height: 34px; font-size: .75rem; color: var(--dv-texto-claro-2);
	border-bottom: 1px solid var(--dv-tinta-2);
}

.dv-header__principal {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--dv-e-4); min-height: 72px;
}

.dv-header__logo img { height: 30px; width: auto; display: block; }
@media (max-width: 767px) { .dv-header__logo img { height: 24px; } }

.dv-menu {
	display: flex; align-items: center; gap: 26px;
	min-height: 44px; font-size: .875rem; font-weight: 600;
	border-top: 1px solid var(--dv-tinta-2);
}

.dv-menu a {
	display: flex; align-items: center; min-height: 44px;
	border-bottom: 3px solid transparent;
}

.dv-menu .current-menu-item > a,
.dv-menu a:hover { border-bottom-color: var(--dv-ambar); color: #fff; }

/* Faixa de editorias rolável no mobile — mesmo conteúdo do menu. */
@media (max-width: 767px) {
	.dv-menu {
		overflow-x: auto;
		scrollbar-width: none;
		gap: var(--dv-e-4);
		-webkit-overflow-scrolling: touch;
	}
	.dv-menu::-webkit-scrollbar { display: none; }
	.dv-menu a { white-space: nowrap; }
}

.dv-header__acao {
	min-height: var(--dv-toque);
	min-width: var(--dv-toque);
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--dv-e-2); padding-inline: var(--dv-e-3);
	border: 1px solid var(--dv-tinta-3);
	background: none; color: #fff; font: inherit; font-size: .75rem; font-weight: 600;
	cursor: pointer;
}

.dv-header__acao--destaque { border-color: var(--dv-ambar); color: var(--dv-ambar); }

.dv-footer { background: var(--dv-tinta); color: var(--dv-texto-claro); padding-block: var(--dv-e-8); }
.dv-footer a { color: var(--dv-texto-claro); text-decoration: none; }
.dv-footer a:hover { color: var(--dv-ambar); text-decoration: underline; }
.dv-footer__legal {
	border-top: 1px solid var(--dv-tinta-2);
	margin-top: var(--dv-e-6); padding-top: var(--dv-e-4);
	font-size: .78125rem; color: var(--dv-texto-claro-2);
	display: flex; flex-wrap: wrap; gap: var(--dv-e-4); justify-content: space-between;
}

/* -------------------------------------------------------------------------
   5. ETIQUETA DE EDITORIA
   ---------------------------------------------------------------------- */

.dv-category-label {
	display: inline-block;
	font-size: var(--dv-t-etiqueta);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dv-ambar-texto);
	text-decoration: none;
}

/* Variante preenchida: só na manchete e no topo da matéria. */
.dv-category-label--solida {
	background: var(--dv-ambar);
	color: var(--dv-tinta);
	padding: 4px 9px;
}

.dv-category-label--urgente { background: var(--dv-urgente); color: #fff; padding: 4px 9px; }
.dv-category-label--aovivo  { color: var(--dv-aovivo); }

/* -------------------------------------------------------------------------
   6. CARDS
   Três variantes. Nenhuma outra deve ser criada.
   ---------------------------------------------------------------------- */

.dv-news-card { display: flex; flex-direction: column; gap: 7px; }
.dv-news-card__titulo { font-size: var(--dv-t-titulo-card); line-height: var(--dv-lh-titulo); color: var(--dv-tinta); }
.dv-news-card__meta { font-size: .75rem; color: var(--dv-texto-3); line-height: var(--dv-lh-meta); }

/* Manchete */
.dv-headline { display: flex; flex-direction: column; gap: 10px; }
.dv-headline__titulo {
	font-size: var(--dv-t-manchete);
	line-height: var(--dv-lh-manchete);
	color: var(--dv-tinta);
	max-width: 24ch;
}
.dv-headline__linhafina {
	font-size: 1.0625rem; line-height: 1.55; color: var(--dv-texto-2); max-width: 62ch;
}
.dv-headline__credito { font-size: .6875rem; color: var(--dv-texto-3); }

/* Card horizontal (secundária, relacionada, resultado de busca) */
.dv-news-card--horizontal {
	flex-direction: row; gap: var(--dv-e-3);
	border-bottom: 1px solid #E4E0D8; padding-bottom: var(--dv-e-4);
}
.dv-news-card--horizontal .dv-media { width: 116px; flex: none; }
.dv-news-card--horizontal .dv-news-card__titulo { font-size: 1.1875rem; }
@media (max-width: 480px) {
	.dv-news-card--horizontal .dv-media { width: 96px; }
}

/* Item de lista cronológica */
.dv-lista-ultimas { display: flex; flex-direction: column; gap: 9px; }
.dv-lista-ultimas__item { display: flex; gap: 9px; align-items: baseline; }
.dv-lista-ultimas__hora {
	width: 40px; flex: none;
	font-size: .75rem; font-weight: 700; color: var(--dv-ambar-texto);
	font-variant-numeric: tabular-nums;
}
.dv-lista-ultimas__titulo { font-size: .90625rem; line-height: 1.35; color: var(--dv-texto); }

/* -------------------------------------------------------------------------
   7. FAIXA DE JOGOS E AGENDA
   ---------------------------------------------------------------------- */

.dv-jogos { display: flex; gap: 10px; align-items: stretch; }
.dv-jogos__lista { display: flex; gap: 10px; flex: 1; }
.dv-jogo {
	flex: 1; min-width: 158px;
	border: var(--dv-borda); padding: 9px 11px;
	display: flex; flex-direction: column; gap: 3px;
}
.dv-jogo--proximo { border-left: 3px solid var(--dv-ambar); }
.dv-jogo__contexto { font-size: .65625rem; font-weight: 700; color: var(--dv-texto-3); }
.dv-jogo--proximo .dv-jogo__contexto { color: var(--dv-aovivo); }
.dv-jogo__times { font-size: .875rem; font-weight: 700; color: var(--dv-tinta); }

@media (max-width: 767px) {
	.dv-jogos__lista { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
	.dv-jogos__lista::-webkit-scrollbar { display: none; }
	.dv-jogo { scroll-snap-align: start; }
}

.dv-agenda { display: flex; flex-direction: column; gap: 11px; }
.dv-agenda__item { display: flex; gap: var(--dv-e-3); align-items: flex-start; }
.dv-agenda__data {
	width: 48px; flex: none; text-align: center;
	border-right: 2px solid var(--dv-ambar); padding-right: var(--dv-e-2);
}
.dv-agenda__dia { font-size: 1.0625rem; font-weight: 700; color: var(--dv-tinta); }
.dv-agenda__semana { font-size: .65625rem; color: var(--dv-texto-3); text-transform: uppercase; }
.dv-agenda__titulo { font-size: .90625rem; font-weight: 600; color: var(--dv-tinta); line-height: 1.3; }
.dv-agenda__local { font-size: .78125rem; color: var(--dv-texto-3); }

/* -------------------------------------------------------------------------
   8. CORPO DA MATÉRIA
   ---------------------------------------------------------------------- */

.dv-article-header { display: flex; flex-direction: column; gap: var(--dv-e-3); }
.dv-article-header h1 { font-size: var(--dv-t-h1); line-height: 1.2; }
.dv-article-header__linhafina {
	font-size: var(--dv-t-linhafina); line-height: 1.5; color: var(--dv-texto-2);
}

.dv-byline {
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: var(--dv-e-3);
	border-block: 1px solid #E4E0D8; padding-block: var(--dv-e-3);
	font-size: .875rem;
}
.dv-byline__meta { font-size: .78125rem; color: var(--dv-texto-3); }
.dv-byline__foto { width: 40px; height: 40px; border-radius: 50%; background: var(--dv-imagem); flex: none; }

.dv-figura { display: flex; flex-direction: column; gap: 6px; }
.dv-figura figcaption { font-size: .78125rem; line-height: 1.5; color: var(--dv-texto-3); }
.dv-figura figcaption strong { color: var(--dv-texto-2); }

.dv-article-body {
	max-width: var(--dv-leitura);
	font-size: var(--dv-t-corpo);
	line-height: var(--dv-lh-corpo);
}

.dv-article-body > * + * { margin-top: var(--dv-e-4); }
.dv-article-body h2 { font-size: var(--dv-t-h2); margin-top: var(--dv-e-8); }
.dv-article-body h3 { font-size: var(--dv-t-h3); margin-top: var(--dv-e-6); }
.dv-article-body ul, .dv-article-body ol { padding-left: 1.35em; }
.dv-article-body li + li { margin-top: var(--dv-e-2); }

.dv-article-body blockquote {
	border-left: 4px solid var(--dv-ambar);
	padding: 4px 0 4px 18px;
	font-size: 1.25rem; line-height: 1.5; color: var(--dv-tinta);
	margin-inline: 0;
}
.dv-article-body blockquote cite {
	display: block; font-size: .875rem; font-style: normal;
	color: var(--dv-texto-3); margin-top: 7px;
}

/* Tabela responsiva: rola na horizontal sem quebrar o layout. */
.dv-tabela { overflow-x: auto; border: var(--dv-borda); }
.dv-tabela table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 420px; }
.dv-tabela th, .dv-tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--dv-linha-2); }
.dv-tabela th { font-weight: 700; background: var(--dv-fundo-2); position: sticky; top: 0; }
.dv-tabela td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.dv-caixa {
	border: var(--dv-borda); background: var(--dv-fundo-2);
	padding: var(--dv-e-4); display: flex; flex-direction: column; gap: 5px;
}
.dv-caixa__rotulo {
	font-size: .71875rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--dv-tinta);
}

.dv-correcao {
	border-left: 3px solid var(--dv-urgente); background: #FBF6F6;
	padding: var(--dv-e-3) var(--dv-e-4); display: flex; flex-direction: column; gap: 4px;
}
.dv-correcao__rotulo {
	font-size: .71875rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--dv-urgente);
}

.dv-tags { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.dv-tags a {
	font-size: .78125rem; border: var(--dv-borda); padding: 6px 11px;
	text-decoration: none; color: var(--dv-texto);
	min-height: 32px; display: inline-flex; align-items: center;
}
.dv-tags a:hover { border-color: var(--dv-tinta); }

/* Barra de progresso de leitura */
.dv-progresso {
	position: sticky; top: 0; z-index: 50;
	height: 3px; background: var(--dv-ambar);
	transform: scaleX(0); transform-origin: left;
	will-change: transform;
}

/* Compartilhamento: discreto, no fim, com área de toque de 44px. */
.dv-share { display: flex; gap: var(--dv-e-2); flex-wrap: wrap; }
.dv-share a {
	flex: 1 1 auto; min-height: var(--dv-toque);
	display: inline-flex; align-items: center; justify-content: center;
	border: var(--dv-borda); padding-inline: var(--dv-e-3);
	font-size: .84375rem; text-decoration: none; color: var(--dv-tinta);
}
.dv-share a:hover { border-color: var(--dv-tinta); background: var(--dv-fundo-2); }

.dv-related-posts { display: flex; flex-direction: column; gap: var(--dv-e-3); }

/* -------------------------------------------------------------------------
   9. BOTÕES
   ---------------------------------------------------------------------- */

.dv-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--dv-toque); padding: 12px 20px;
	font-family: var(--dv-fonte-texto); font-size: .90625rem; font-weight: 700;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
}

.dv-btn--primario { background: var(--dv-ambar); color: var(--dv-tinta); }
.dv-btn--primario:hover { background: #E3A700; color: var(--dv-tinta); }

.dv-btn--secundario { background: var(--dv-tinta); color: #fff; }
.dv-btn--secundario:hover { background: #2A2C31; color: #fff; }

.dv-btn--contorno { border-color: var(--dv-tinta); color: var(--dv-tinta); background: none; }
.dv-btn--contorno:hover { background: var(--dv-fundo-2); }

.dv-btn--sobre-escuro { border-color: #56595F; color: #fff; background: none; }
.dv-btn--sobre-escuro:hover { border-color: #fff; }

.dv-cta {
	background: var(--dv-tinta); color: #fff;
	padding: var(--dv-e-6) var(--dv-e-8);
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--dv-e-6); flex-wrap: wrap;
}
.dv-cta h2, .dv-cta h3 { color: #fff; }
.dv-cta p { color: var(--dv-texto-claro); margin: 0; font-size: .9375rem; line-height: 1.55; }

/* -------------------------------------------------------------------------
   10. FORMULÁRIOS
   ---------------------------------------------------------------------- */

.dv-campo { display: flex; flex-direction: column; gap: 4px; }
.dv-campo label { font-size: .78125rem; font-weight: 600; color: var(--dv-tinta); }
.dv-campo input,
.dv-campo textarea,
.dv-campo select {
	min-height: var(--dv-toque);
	border: 1px solid #B9BEC6; background: #fff;
	padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--dv-texto);
	border-radius: 0;
}
.dv-campo input:focus,
.dv-campo textarea:focus,
.dv-campo select:focus {
	border-color: var(--dv-tinta);
	outline: 3px solid var(--dv-foco);
	outline-offset: 1px;
}
.dv-campo__ajuda { font-size: .75rem; color: var(--dv-texto-3); }

/* Erro: ícone + texto, nunca só a cor da borda. */
.dv-campo--erro input,
.dv-campo--erro textarea { border-color: var(--dv-urgente); border-width: 2px; }
.dv-campo__erro {
	font-size: .8125rem; font-weight: 600; color: var(--dv-urgente);
	display: flex; gap: 6px; align-items: center;
}
.dv-campo__erro::before { content: '!'; font-weight: 700; border: 2px solid currentColor; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }

/* -------------------------------------------------------------------------
   11. PUBLICIDADE
   O slot reserva a altura ANTES de o anúncio carregar. É o que segura o CLS.
   ---------------------------------------------------------------------- */

.dv-ad-slot {
	display: flex; flex-direction: column; gap: 4px; align-items: stretch;
	margin-block: var(--dv-e-6);
}

.dv-ad-slot__rotulo {
	font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
	color: #8B929B;
}

.dv-ad-slot__area {
	display: flex; align-items: center; justify-content: center;
	background: var(--dv-fundo-2); overflow: hidden;
}

/* Alturas reservadas por formato. */
.dv-ad-slot--970x250 .dv-ad-slot__area { min-height: 250px; }
.dv-ad-slot--728x90  .dv-ad-slot__area { min-height: 90px; }
.dv-ad-slot--300x250 .dv-ad-slot__area { min-height: 250px; }
.dv-ad-slot--320x100 .dv-ad-slot__area { min-height: 100px; }

/* No mobile, o billboard vira 320x100 — e a altura reservada muda junto. */
@media (max-width: 767px) {
	.dv-ad-slot--970x250 .dv-ad-slot__area { min-height: 100px; }
}

/* Distância visual entre anúncio e conteúdo editorial. */
.dv-article-body .dv-ad-slot {
	border-block: 1px solid var(--dv-linha-2);
	padding-block: var(--dv-e-4);
	margin-block: var(--dv-e-8);
}

/* Conteúdo patrocinado: identificação obrigatória, nunca discreta. */
.dv-patrocinado {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--dv-tinta); color: #fff;
	font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; padding: 4px 9px;
}

/* -------------------------------------------------------------------------
   12. ALERTAS E PLANTÃO
   ---------------------------------------------------------------------- */

.dv-alerta {
	display: flex; gap: var(--dv-e-3); align-items: center;
	padding: var(--dv-e-3) var(--dv-e-4);
	border-left: 4px solid var(--dv-urgente); background: #FBF6F6;
	font-size: .9375rem;
}
.dv-alerta--info { border-left-color: var(--dv-tinta); background: var(--dv-fundo-2); }
.dv-alerta--ok { border-left-color: var(--dv-aovivo); background: #F4F9F6; }

.dv-plantao {
	background: var(--dv-urgente); color: #fff;
	padding: var(--dv-e-3) var(--dv-e-4);
	display: flex; gap: var(--dv-e-3); align-items: center;
}
.dv-plantao__rotulo {
	font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; border: 1px solid #fff; padding: 2px 7px; flex: none;
}
.dv-plantao a { color: #fff; font-weight: 600; }

/* -------------------------------------------------------------------------
   13. PAGINAÇÃO
   ---------------------------------------------------------------------- */

.dv-paginacao { display: flex; gap: 7px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dv-paginacao .page-numbers {
	min-width: var(--dv-toque); min-height: var(--dv-toque);
	display: inline-flex; align-items: center; justify-content: center;
	border: var(--dv-borda); padding-inline: var(--dv-e-3);
	text-decoration: none; color: var(--dv-texto); font-size: .875rem;
}
.dv-paginacao .page-numbers.current {
	background: var(--dv-tinta); border-color: var(--dv-tinta); color: #fff; font-weight: 700;
}

/* -------------------------------------------------------------------------
   14. CONTROLES DE ACESSIBILIDADE
   ---------------------------------------------------------------------- */

.dv-accessibility-controls {
	position: relative;
}

#dv-a11y-painel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
	background: #fff; color: var(--dv-texto);
	border: 2px solid var(--dv-tinta); box-shadow: var(--dv-sombra);
	padding: var(--dv-e-4); width: 260px;
	display: flex; flex-direction: column; gap: var(--dv-e-3);
}

#dv-a11y-painel button {
	min-height: var(--dv-toque); width: 100%;
	border: var(--dv-borda); background: #fff; color: var(--dv-texto);
	font: inherit; font-size: .875rem; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; padding-inline: var(--dv-e-3);
}
#dv-a11y-painel button[aria-pressed='true'] {
	background: var(--dv-tinta); color: #fff; border-color: var(--dv-tinta);
}

/* -------------------------------------------------------------------------
   15. IMPRESSÃO
   ---------------------------------------------------------------------- */

@media print {
	.dv-header, .dv-footer, .dv-ad-slot, .dv-share,
	.dv-progresso, .dv-accessibility-controls, .dv-related-posts { display: none !important; }
	.dv-article-body { max-width: none; font-size: 11pt; }
	a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}