/* Diário de Olímpia: estilo principal */

:root {
	--papel: #F5F7F4;
	--superficie: #FFFFFF;
	--tinta: #102029;
	--suave: #44525A;
	--linha: #D5DDD8;
	--acento: #0E6A86;
	--acento-claro: #DDEEF2;
	--vivo: #D23C22;
	--anuncio: #EAEFEB;
	--titulo: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--texto: "Literata", Georgia, "Times New Roman", serif;
	--noite: #0D1B3A;   /* marinho escuro: rodapé e faixa Termas e Folclore */
	--marinho: #13254B; /* marinho do emblema DO, mais profundo: barra de menu */
	--claro-sobre-marinho: #8FD6EA;
	--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--largura: 1200px;
	--trilho: 325px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 17px;
	line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 8px 14px; }
.pular:focus { left: 16px; }

.envelope, .conteudo > :not(.faixa-olimpia) { max-width: var(--largura); margin-inline: auto; padding-inline: 16px; }

/* Tipos -------------------------------------------------------------- */
.hl { font-family: var(--titulo); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; margin: 0; font-size: 18px; }
.kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor, var(--acento)); }
.kicker--selo { justify-self: start; color: #fff; background: var(--cor, var(--acento)); padding: 4px 9px; border-radius: 4px; }

/* Editorias com faixa colorida e subeditorias em pílulas */
.secao--faixa .secao-cab { background: var(--cor); color: #fff; border-top: 0; border-radius: 8px; padding: 12px 18px; margin-bottom: 12px; align-items: center; }
.secao--faixa .secao-cab h2 { font-size: 24px; }
.secao--faixa .secao-cab h2 a { color: #fff; }
.secao--faixa .ver-tudo { color: #fff; opacity: 0.9; }
.secao--faixa .ver-tudo:hover { opacity: 1; text-decoration: underline; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pilulas a { font: 500 11.5px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; color: var(--cor, var(--acento)); background: color-mix(in srgb, var(--cor, var(--acento)) 10%, #fff); }
.pilulas a:hover { background: var(--cor, var(--acento)); color: #fff; }
.arquivo-cab--faixa .arquivo-faixa { background: var(--cor); color: #fff; border-radius: 10px; padding: 18px 22px; display: grid; gap: 4px; }
.arquivo-cab--faixa .arquivo-faixa .kicker { color: rgba(255, 255, 255, 0.8); }
.arquivo-cab--faixa .pilulas { margin: 6px 0 0; }
.meta { font-family: var(--mono); font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.chamada { color: var(--suave); margin: 0; font-size: 16px; line-height: 1.45; }
a:hover .hl, a:focus-visible .hl { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--acento); }

/* Barra do topo ------------------------------------------------------ */
.barra-topo { border-bottom: 1px solid var(--linha); font-family: var(--mono); font-size: 12px; color: var(--suave); }
.barra-topo .envelope { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 18px; padding-block: 8px; }
.links-topo ul, .rodape-secoes ul, .rodape-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.links-topo a:hover { color: var(--acento); }

/* Cabeçalho ---------------------------------------------------------- */
.cabecalho { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 28px; padding-block: 16px 14px; }
.marca { margin: 0; font-weight: inherit; font-size: inherit; line-height: 1; }
.marca a { display: block; }
.marca-regiao { display: block; font-family: var(--titulo); font-weight: 600; font-size: clamp(12px, 1.1vw, 14px); color: var(--acento); margin-bottom: 3px; }
.marca-nome { display: block; font-family: var(--titulo); font-weight: 800; font-size: clamp(28px, 3.2vw, 38px); line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; }
.marca .marca-link { display: flex; align-items: center; gap: 14px; }
.marca-do { display: block; width: auto; height: clamp(50px, 5vw, 64px); flex: none; }
.marca-textos { display: block; min-width: 0; }
.marca--logo .custom-logo-link { display: block; }
.marca--logo .custom-logo { width: auto; height: 90px; max-width: 100%; object-fit: contain; }
.cabecalho .espaco-anuncio, .cabecalho .anuncio-vazio { justify-self: end; max-width: 735px; width: 100%; }

/* Menu --------------------------------------------------------------- */
.navegacao { position: sticky; top: 0; z-index: 50; background: var(--marinho); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(13, 27, 58, 0.18); }
.navegacao .menu-principal > li > a { color: #fff; }
.navegacao .menu-principal > li > a:hover, .navegacao .menu-principal .current-menu-item > a, .navegacao .menu-principal .current-category-ancestor > a { color: var(--claro-sobre-marinho); box-shadow: inset 0 -3px 0 var(--claro-sobre-marinho); }
.navegacao .menu-principal .sub-menu a { color: var(--tinta); }
/* Ícones da barra: menu (três traços) e lupa, separados por um fio. */
.nav-acoes { display: flex; align-items: center; gap: 16px; padding-right: 20px; margin-right: 6px; border-right: 1px solid rgba(255, 255, 255, 0.14); flex: none; }
.nav-divisor { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.28); }
.navegacao .menu-botao, .busca-botao { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 46px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; }
.navegacao .menu-icone, .navegacao .menu-icone::before, .navegacao .menu-icone::after { width: 24px; height: 3px; border-radius: 2px; background: #fff; }
.navegacao .menu-icone::before { top: -8px; }
.navegacao .menu-icone::after { top: 8px; }
.navegacao .menu-botao:hover .menu-icone, .navegacao .menu-botao:hover .menu-icone::before, .navegacao .menu-botao:hover .menu-icone::after { background: var(--claro-sobre-marinho); }
.busca-botao:hover, .busca-botao[aria-expanded="true"] { color: var(--claro-sobre-marinho); }
.busca-painel { background: var(--noite); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 14px; }
.busca--painel { max-width: 720px; }
.busca--painel input { flex: 1; width: auto; font-size: 17px; padding: 11px 14px; border: 0; background: #fff; color: var(--tinta); border-radius: 2px 0 0 2px; }
.busca--painel button { background: var(--claro-sobre-marinho); color: var(--marinho); font-weight: 600; padding: 0 18px; }
.admin-bar .navegacao { top: 32px; }
.nav-linha { display: flex; align-items: center; gap: 16px; }
.menu-principal { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; }
.menu-principal > li { position: relative; }
.menu-principal a { display: block; padding: 11px 11px; font-family: var(--titulo); font-weight: 600; font-size: 15px; white-space: nowrap; }
.menu-principal > li > a:hover, .menu-principal .current-menu-item > a, .menu-principal .current-category-ancestor > a { color: var(--acento); }
.menu-principal a[href*="diario-ao-vivo"] { color: var(--vivo); }
.menu-principal a[href*="diario-ao-vivo"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); margin-right: 7px; vertical-align: 2px; animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: 0.25; } }
.menu-principal .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px 0; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 10px 24px rgba(16, 32, 41, 0.12); }
.menu-principal .sub-menu a { font-weight: 500; font-size: 14.5px; padding: 7px 16px; }
.menu-principal .sub-menu a:hover { background: var(--acento-claro); }
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: block; }

.busca { display: flex; gap: 0; }
.busca input { font: 15px/1.2 var(--texto); padding: 7px 10px; border: 1px solid var(--linha); border-right: 0; background: var(--superficie); color: var(--tinta); width: 190px; border-radius: 2px 0 0 2px; }
.busca button { font: 500 12px var(--mono); letter-spacing: 0.04em; padding: 0 12px; border: 0; background: var(--tinta); color: #fff; cursor: pointer; border-radius: 0 2px 2px 0; }
.busca--pagina { margin-top: 14px; max-width: 520px; }
.busca--pagina input { flex: 1; width: auto; font-size: 17px; padding: 10px 12px; }
.busca-link { display: none; font-family: var(--mono); font-size: 12px; padding: 8px 0; color: var(--acento); }

/* Anúncios ----------------------------------------------------------- */
.espaco-anuncio { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.anuncio { min-width: 0; overflow: hidden; }
.espaco-anuncio::before { content: "Publicidade"; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); justify-self: center; }
.cabecalho .espaco-anuncio::before { display: none; }
.anuncio, .anuncio .textwidget { max-width: 100%; }
.anuncio img { margin-inline: auto; }
.espaco-anuncio.faixa { margin-block: 6px 34px; }
.espaco-anuncio.largo { margin-block: 8px 30px; }
.espaco-anuncio.no-texto { margin-block: 28px; }
.espaco-anuncio.lateral { gap: 18px; }
.anuncio-vazio { display: grid; place-items: center; min-height: 90px; padding: 12px; border: 2px dashed var(--vivo); color: var(--vivo); font-family: var(--mono); font-size: 12px; text-align: center; background: var(--anuncio); }
.anuncio-vazio.faixa { margin-block: 6px 34px; }

/* Fotos -------------------------------------------------------------- */
.card-foto { display: block; overflow: hidden; background: var(--anuncio); border-radius: 2px; }
.card-foto .foto { width: 100%; height: 100%; object-fit: cover; }
.foto--vazia { display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--acento-claro), var(--anuncio)); }

/* Capa: topo --------------------------------------------------------- */
.capa-topo { display: grid; grid-template-columns: 3fr 6fr 3fr; grid-template-areas: "ultimas manchete secundarias"; gap: 28px; padding-block: 26px 30px; }
.manchete { grid-area: manchete; display: grid; gap: 12px; align-content: start; }
.manchete .card-foto { aspect-ratio: 16 / 10; }
.manchete .hl { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.025em; }
.secundarias { grid-area: secundarias; display: grid; gap: 22px; align-content: start; }
.secundarias .card-foto { aspect-ratio: 3 / 2; }
.secundarias .hl { font-size: 20px; }

.ultimas { grid-area: ultimas; display: flex; flex-direction: column; }
/* A folga da coluna se divide entre os itens de "Últimas": a lista termina alinhada com a manchete. */
.ultimas ol { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ultimas h2 { font-family: var(--titulo); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vivo); margin: 22px 0 8px; }
.ultimas ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linha); }
.ultimas li { position: relative; padding: 0 0 15px 16px; }
.ultimas li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--papel); border: 2px solid var(--vivo); }
.ultimas li:first-child::before { background: var(--vivo); }
.ultimas a { display: grid; gap: 2px; }
.ultimas time { font-family: var(--mono); font-size: 12px; color: var(--vivo); font-variant-numeric: tabular-nums; }
.ultimas .hl { font-family: var(--texto); font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0; }

/* Cards -------------------------------------------------------------- */
.card { display: grid; gap: 8px; align-content: start; }
.card .card-foto { aspect-ratio: 3 / 2; }
.card.grande .hl { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.card.grande .card-foto { aspect-ratio: 16 / 9; }

/* Corpo com coluna lateral ------------------------------------------ */
.corpo { display: grid; grid-template-columns: minmax(0, 1fr) var(--trilho); gap: 40px; padding-block: 8px 30px; }
.trilho { display: grid; gap: 28px; align-content: start; align-self: stretch; }
/* Os dois últimos banners acompanham a rolagem até o fim da coluna. */
.fixo-lateral { position: sticky; top: 64px; }
.admin-bar .fixo-lateral { top: 96px; }
.fixo-lateral .espaco-anuncio { gap: 12px; }
.fixo-lateral .anuncio img { width: 100%; max-width: 325px; height: auto; max-height: calc((100vh - 140px) / 2); object-fit: contain; }

.secao { padding-block: 4px 30px; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 2px solid var(--tinta); padding-top: 10px; margin-bottom: 18px; }
.secao-cab h2 { font-family: var(--titulo); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.ver-tudo { font-family: var(--mono); font-size: 12px; color: var(--acento); white-space: nowrap; }

.grade-cidade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; }
.lista-miniaturas { display: grid; align-content: start; }
.card.miniatura { grid-template-columns: 96px 1fr; column-gap: 14px; padding-block: 12px; border-bottom: 1px solid var(--linha); }
.card.miniatura:first-child { padding-top: 0; }
.card.miniatura .card-foto { grid-row: span 3; aspect-ratio: 1; }
.card.miniatura .hl { font-size: 17px; }

.grade-quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.grade-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lista-horas { list-style: none; margin: 0; padding: 0; }
.lista-horas li { border-bottom: 1px solid var(--linha); }
.lista-horas li:first-child a { padding-top: 0; }
.lista-horas a { display: grid; gap: 3px; padding-block: 11px; }
.lista-horas time { font-family: var(--mono); font-size: 12px; color: var(--acento); }
.lista-horas .hl { font-size: 16.5px; }

.grade-turismo { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 22px; }
.destaque-foto { position: relative; display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--anuncio); }
.destaque-foto .foto { width: 100%; height: 100%; object-fit: cover; }
.legenda-sobre { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 40px 18px 18px; background: linear-gradient(transparent, rgba(8, 18, 24, 0.88)); color: #fff; }
.legenda-sobre .kicker { color: #9FDDEE; }
.legenda-sobre .hl { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.legenda-sobre .meta { color: #D6E2E4; }

.grade-texto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-texto .card { padding-inline: 20px; border-left: 1px solid var(--linha); }
.grade-texto .card:first-child { padding-left: 0; border-left: 0; }
.grade-texto .hl { font-family: var(--texto); font-weight: 600; font-size: 20px; letter-spacing: -0.005em; line-height: 1.25; }

/* Mais lidas --------------------------------------------------------- */
.mais-lidas h2 { font-family: var(--titulo); font-weight: 800; font-size: 20px; margin: 0 0 4px; border-top: 2px solid var(--tinta); padding-top: 10px; }
.mais-lidas ol { list-style: none; margin: 0; padding: 0; counter-reset: lidas; }
.mais-lidas li { counter-increment: lidas; display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding-block: 12px; border-bottom: 1px solid var(--linha); }
.mais-lidas li::before { content: counter(lidas); font-family: var(--titulo); font-weight: 800; font-size: 26px; line-height: 1; color: var(--acento); }
.mais-lidas .hl { font-size: 16px; display: block; }

/* Matéria ------------------------------------------------------------ */
.leitura { display: grid; grid-template-columns: minmax(0, 680px) var(--trilho); justify-content: space-between; gap: 48px; padding-block: 28px 34px; }
.materia-cab { display: grid; gap: 12px; margin-bottom: 22px; }
.materia-titulo { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.025em; }
.linha-fina { margin: 0; font-size: 21px; line-height: 1.4; color: var(--suave); }
.materia-meta { margin: 0; }
.compartilhar { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar a, .compartilhar button { font: 500 12px var(--mono); letter-spacing: 0.03em; padding: 7px 12px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); border-radius: 999px; cursor: pointer; }
.compartilhar a:first-child { background: #1F8F4E; border-color: #1F8F4E; color: #fff; }
.compartilhar a:hover, .compartilhar button:hover { border-color: var(--acento); }
.materia-foto { margin: 0 0 24px; }
.materia-foto img { width: 100%; border-radius: 2px; }
.materia-foto figcaption, .wp-caption-text { font-family: var(--mono); font-size: 12px; color: var(--suave); margin-top: 6px; }

.conteudo-materia { font-size: 18px; line-height: 1.7; }
.conteudo-materia::after { content: ""; display: table; clear: both; }
.conteudo-materia p { margin: 0 0 1.05em; }
.conteudo-materia a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.conteudo-materia h2, .conteudo-materia h3 { font-family: var(--titulo); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin: 1.4em 0 0.5em; }
.conteudo-materia h2 { font-size: 26px; }
.conteudo-materia h3 { font-size: 21px; }
.conteudo-materia blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--acento); font-style: italic; color: var(--suave); }
.conteudo-materia img { border-radius: 2px; }
.conteudo-materia .alignleft { float: left; margin: 6px 22px 12px 0; max-width: 50%; }
.conteudo-materia .alignright { float: right; margin: 6px 0 12px 22px; max-width: 50%; }
.conteudo-materia .aligncenter { margin-inline: auto; clear: both; }
.conteudo-materia .wp-caption { max-width: 100%; }
.conteudo-materia iframe, .conteudo-materia video { max-width: 100%; }
.conteudo-materia iframe[src*="youtube"], .conteudo-materia iframe[src*="youtu.be"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.conteudo-materia table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.conteudo-materia td, .conteudo-materia th { border: 1px solid var(--linha); padding: 6px 10px; }
.materia-rodape { display: grid; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linha); }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tags a { font-family: var(--mono); font-size: 12px; padding: 4px 10px; background: var(--acento-claro); color: var(--acento); border-radius: 999px; }
.coluna-texto { min-width: 0; }
/* Bloco que ocupa o vão ao lado da coluna lateral: o script revela só o que couber. */
.bloco-preencher { margin-top: 34px; }
.bloco-preencher:not(.ativo) { display: none; }
.bloco-preencher .linha-materia:first-of-type { padding-top: 0; }
.bloco-preencher .linha-materia.extra { display: none; }

/* Editorias, busca e 404 -------------------------------------------- */
.arquivo-cab { display: grid; gap: 8px; padding-block: 28px 4px; }
.arquivo-cab .hl { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.03em; }
.arquivo-desc { color: var(--suave); max-width: 65ch; }
.arquivo-desc p { margin: 0; }
.subeditorias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.subeditorias a { font-family: var(--mono); font-size: 12px; padding: 5px 11px; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); }
.subeditorias a:hover { border-color: var(--acento); color: var(--acento); }
.lista-arquivo { display: grid; gap: 0; align-content: start; }
.lista-arquivo .card.grande { padding-bottom: 22px; border-bottom: 1px solid var(--linha); }
.lista-arquivo .card.grande .hl { font-size: 30px; }
.linha-materia { display: grid; grid-template-columns: 218px 1fr; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--linha); }
.linha-materia .card-foto { aspect-ratio: 218 / 150; }
.linha-texto { display: grid; gap: 6px; align-content: start; }
.linha-texto .hl { font-size: 20px; }
.linha-texto .chamada { font-size: 15.5px; }
.vazio { font-size: 19px; }
.pagination, .navigation.pagination { margin-top: 26px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 13px; }
.nav-links .page-numbers { padding: 7px 12px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 2px; }
.nav-links .page-numbers.current { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.nav-links .dots { border: 0; background: none; }

/* Rodapé: enxuto (subir para o topo; logo, direitos e WhatsApp) ------- */
.rodape { margin-top: 40px; }
.rodape-topo { display: flex; justify-content: flex-end; padding-block: 18px; }
/* Faixa azul-marinho de ponta a ponta, no mesmo tom da barra de menu */
.rodape-faixa { background: var(--marinho); color: #fff; padding-bottom: env(safe-area-inset-bottom, 0px); }
.rodape-faixa .rodape-linha { padding-block: 20px 22px; }
.rodape-faixa .marca-rodape { color: #fff; }
.rodape-faixa .marca-rodape img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.55)); }
.rodape-faixa .rodape-direitos { color: #C9D3E6; }
.subir { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--titulo); color: var(--tinta); border: 1px solid var(--suave); border-radius: 6px; padding: 8px 18px; background: var(--superficie); }
.subir:hover { border-color: var(--marinho); background: var(--marinho); color: #fff; }
.rodape-linha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.marca-rodape { display: flex; align-items: center; gap: 10px; color: var(--tinta); font: 800 19px var(--titulo); letter-spacing: -0.03em; }
.marca-rodape img { height: 38px; width: auto; }
.rodape-direitos { margin: 0; text-align: center; font: 500 12.5px var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--suave); }
.rodape-whatsapp { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--titulo); color: #fff; background: #1F8F4E; border-radius: 999px; padding: 8px 16px 8px 12px; }
.rodape-whatsapp:hover { background: #17733E; }

/* Tempo em Olímpia --------------------------------------------------- */
.tempo { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 12px 12px 10px; box-shadow: 0 2px 10px rgba(16, 32, 41, 0.05); min-height: 132px; }
.tempo-carregando { margin: 24px 0 0; font: 500 12px var(--mono); color: var(--suave); }
.tempo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tempo-cab strong { font: 800 16px var(--titulo); letter-spacing: -0.01em; }
.tempo-fonte { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.tempo-chuva { margin: 4px 0 8px; font-size: 13.5px; color: var(--tinta); }
.tempo-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 2px; }
.tempo-periodo { display: grid; justify-items: center; gap: 2px; font: 500 11.5px var(--titulo); color: var(--suave); }
.tempo-periodo svg { width: 36px; height: 38px; }
.tempo-agora { display: grid; justify-items: end; padding-left: 6px; }
.tempo-graus { font: 800 36px/1 var(--titulo); letter-spacing: -0.04em; }
.tempo-minmax { font: 500 12px var(--mono); color: var(--suave); white-space: nowrap; }
.tempo-minmax strong { color: var(--tinta); }

/* Selo de imagem feita por IA --------------------------------------- */
.card-foto, .destaque-foto { position: relative; }
.selo-ia { position: absolute; left: 8px; top: 8px; z-index: 1; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(11, 26, 34, 0.82); color: #fff; padding: 3px 7px; border-radius: 2px; }
.aviso-ia { font-weight: 500; color: var(--tinta); }

/* Faixa "Olímpia: Termas e Folclore" (largura total) ----------------- */
.faixa-olimpia { padding: 40px max(16px, calc((100% - var(--largura)) / 2 + 16px)) 44px; background: radial-gradient(90% 120% at 100% 0%, #24407A 0%, transparent 60%), var(--noite); color: #E6EDEF; margin-block: 10px 34px; }
.faixa-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.faixa-cab .kicker { color: #6FC3DC; }
.faixa-cab h2 { margin: 6px 0 0; font-family: var(--titulo); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1; color: #fff; }
.faixa-cab .ver-tudo { color: #6FC3DC; }
.faixa-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.faixa-grade .destaque-foto { aspect-ratio: 16 / 10; }
.faixa-lista { display: grid; align-content: start; }
.faixa-lista .card.miniatura { grid-template-columns: 140px 1fr; border-bottom-color: rgba(255, 255, 255, 0.12); }
.faixa-lista .card.miniatura .card-foto { aspect-ratio: 218 / 150; grid-row: span 3; }
.faixa-lista .kicker { color: #6FC3DC; }
.faixa-lista .hl { color: #fff; font-size: 18px; }
.faixa-lista .meta { color: #8FA3A9; }

/* Opinião e Diário ao Vivo (segunda coluna da Capa) ------------------ */
.bloco-opiniao h2, .bloco-aovivo h2 { font-family: var(--titulo); font-weight: 800; font-size: 20px; margin: 0 0 4px; border-top: 2px solid var(--tinta); padding-top: 10px; }
.bloco-opiniao ul { list-style: none; margin: 0; padding: 0; }
.bloco-opiniao li a { display: grid; gap: 4px; padding-block: 13px; border-bottom: 1px solid var(--linha); }
.bloco-opiniao .hl { font-family: var(--texto); font-weight: 500; font-style: italic; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.bloco-aovivo h2 { color: var(--vivo); }
.bloco-aovivo ol { list-style: none; margin: 0; padding: 0; }
.bloco-aovivo li a { display: grid; gap: 3px; padding-block: 10px; border-bottom: 1px solid var(--linha); }
.bloco-aovivo time { font-family: var(--mono); font-size: 12px; color: var(--vivo); }
.bloco-aovivo .hl { font-size: 16px; }

/* Ouvir o texto ------------------------------------------------------ */
.ouvir { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 4px; max-width: 420px; }
.ouvir-botao { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--titulo); color: var(--tinta); background: none; border: 0; padding: 0; cursor: pointer; }
.ouvir-icone { width: 30px; height: 30px; border-radius: 50%; background: var(--acento); position: relative; flex: none; }
.ouvir-icone::before { content: ""; position: absolute; left: 11px; top: 9px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.ouvir.tocando .ouvir-icone::before { left: 10px; top: 10px; width: 3px; height: 10px; border: 0; background: #fff; box-shadow: 6px 0 0 #fff; }
.ouvir-tempo { margin-left: auto; }

/* Página do autor ---------------------------------------------------- */
.autor-cab { grid-template-columns: auto 1fr; align-items: center; column-gap: 22px; }
.autor-foto { border-radius: 50%; width: 112px; height: 112px; }

/* Menu do celular ---------------------------------------------------- */
.menu-botao { display: none; align-items: center; gap: 10px; font: 700 15px var(--titulo); color: var(--tinta); background: none; border: 0; padding: 11px 0; cursor: pointer; }
.menu-icone { width: 20px; height: 2px; background: var(--tinta); position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--tinta); }
.menu-icone::before { top: -6px; }
.menu-icone::after { top: 6px; }
/* Gaveta de menu (desliza da esquerda) */
.menu-fundo { position: fixed; inset: 0; z-index: 999; background: rgba(8, 16, 34, 0.5); }
.menu-tela { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: min(380px, 100%); overflow-y: auto; background: var(--marinho); color: #fff; box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35); padding: 18px 0 40px; animation: gaveta 0.22s ease-out; }
@keyframes gaveta { from { transform: translateX(-100%); } }
.gaveta-topo { display: flex; gap: 10px; align-items: center; padding: 0 18px 16px; }
.gaveta-busca { display: flex; flex: 1; min-width: 0; }
.gaveta-busca input { flex: 1; min-width: 0; font: 16px var(--texto); padding: 11px 14px; border: 0; border-radius: 6px 0 0 6px; color: var(--tinta); }
.gaveta-busca button { display: grid; place-items: center; width: 46px; border: 0; border-radius: 0 6px 6px 0; background: var(--claro-sobre-marinho); color: var(--marinho); cursor: pointer; }
.menu-fechar { flex: none; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.gaveta-cab { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.gaveta-titulo { font: 800 22px var(--titulo); letter-spacing: -0.02em; }
.tamanho-texto { display: flex; gap: 6px; }
.tamanho-texto button { font: 800 15px var(--titulo); background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 4px 9px; cursor: pointer; }
.tamanho-texto button:hover { border-color: var(--claro-sobre-marinho); color: var(--claro-sobre-marinho); }
.gaveta-atalhos ul, .menu-tela-lista { list-style: none; margin: 0; padding: 0; }
.gaveta-atalhos { border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-block: 6px; }
.gaveta-atalhos a { display: grid; grid-template-columns: 26px 1px 1fr 12px; align-items: center; gap: 14px; padding: 11px 18px; font: 700 17px var(--titulo); }
.gaveta-atalhos a::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 22px; background: rgba(255, 255, 255, 0.3); }
.gaveta-icone { grid-column: 1; grid-row: 1; display: grid; place-items: center; color: #fff; }
.gaveta-atalhos a > span:last-child { grid-column: 3; grid-row: 1; }
.gaveta-atalhos a::after, .menu-tela-lista a::after { content: ""; grid-column: 4; justify-self: end; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
.gaveta-secoes { padding-block: 8px; }
.menu-tela-lista a { display: grid; grid-template-columns: 1fr 12px; align-items: center; padding: 10px 18px 10px 38px; position: relative; font: 500 16px var(--titulo); color: #E6EDEF; }
.menu-tela-lista a::before { content: ""; position: absolute; left: 20px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: currentColor; }
.menu-tela-lista a::after { grid-column: 2; }
.gaveta-atalhos a:hover, .menu-tela-lista a:hover { background: rgba(255, 255, 255, 0.06); color: var(--claro-sobre-marinho); }
.menu-aberto, .menu-aberto body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu-tela { animation: none; } }

/* Tamanho do texto escolhido pelo leitor (A+ / A-) */
.conteudo-materia { font-size: calc(18px * var(--escala, 1)); }
.linha-fina { font-size: calc(21px * var(--escala, 1)); }

/* Telas médias ------------------------------------------------------- */
@media (max-width: 1080px) {
	.faixa-grade { grid-template-columns: 1fr; }
	.capa-topo { grid-template-columns: 1fr 1fr; grid-template-areas: "manchete manchete" "secundarias ultimas"; }
	.corpo, .leitura { grid-template-columns: minmax(0, 1fr); }
	.trilho { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
	.fixo-lateral { position: static; }
	.fixo-lateral .anuncio img { max-height: none; }
	.grade-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rodape-grade { grid-template-columns: 1fr 1fr; }
}

/* Celular ------------------------------------------------------------ */
@media (max-width: 782px) {
	.admin-bar .navegacao { top: 46px; }
}
@media (max-width: 720px) {
	body { font-size: 16px; }
	.cabecalho { grid-template-columns: minmax(0, 1fr); }
	.marca--logo .custom-logo { height: 64px; }
	.cabecalho .espaco-anuncio, .cabecalho .anuncio-vazio { justify-self: stretch; }
	/* Cabeçalho compacto: sem a barra de data, marca menor, barra fina com "Seções" e busca. */
	.barra-topo { display: none; }
	.cabecalho { padding-block: 12px 10px; gap: 10px; }
	.menu-principal { display: none; }
	.nav-acoes { border-right: 0; }
	/* Rodapé empilhado */
	.rodape-linha { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
	.rodape-topo { justify-content: center; }
	/* Banners laterais: no celular, 1 por grupo (o sorteio alterna quem aparece). */
	.trilho .espaco-anuncio.lateral .anuncio ~ .anuncio { display: none; }
	.faixa-olimpia { padding-block: 28px 30px; }
	.faixa-lista .card.miniatura { grid-template-columns: 112px 1fr; }
	.autor-cab { grid-template-columns: 1fr; }
	.ouvir { max-width: none; }
	.capa-topo { grid-template-columns: 1fr; grid-template-areas: "manchete" "secundarias" "ultimas"; }
	.secundarias { grid-template-columns: 1fr 1fr; gap: 16px; }
	.secundarias .hl { font-size: 17px; }
	.grade-cidade, .grade-lista, .grade-turismo, .grade-texto, .grade-quatro { grid-template-columns: 1fr; }
	.grade-texto .card { padding: 14px 0; border-left: 0; border-top: 1px solid var(--linha); }
	.grade-texto .card:first-child { border-top: 0; padding-top: 0; }
	.linha-materia { grid-template-columns: 112px 1fr; gap: 14px; }
	.linha-texto .chamada { display: none; }
	.linha-texto .hl { font-size: 17px; }
	.conteudo-materia { font-size: calc(17px * var(--escala, 1)); }
	.rodape-grade { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.marca .marca-link { gap: 10px; }
	.marca-do { height: 50px; }
	.marca-nome { font-size: 28px; }
	.marca-regiao { font-size: 12px; }
	.conteudo-materia .alignleft, .conteudo-materia .alignright { float: none; margin: 12px 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.menu-principal a[href*="diario-ao-vivo"]::before { animation: none; }
}