/* Offisul — site próprio (layout C: abas no topo + destaques). Paleta do logo. */
:root {
  --azul: #1f4f9a; --azul-claro: #1e7dbf; --caixa: #eef3fa; --verde: #61ce70; --verde-escuro: #2e8b3d;
  --ambar: #d97706; --roxo: #6b4fa0; --texto: #1c2433; --suave: #5a6577; --linha: #dbe4f0; --fundo: #f5f8fc;
  --largura: 1200px; --raio: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--texto);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-claro); }
h1, h2, h3 { line-height: 1.25; }
.dentro { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 10px; top: 10px; background: #fff; padding: 8px 12px; z-index: 9; }
.rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--azul-claro); }
.ler { font-size: 13px; font-weight: 700; color: var(--azul-claro); }

/* topo */
.topo { background: #fff; border-bottom: 1px solid var(--linha); }
.topo__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; padding-top: 14px; }
.marca { flex: 0 0 auto; background: var(--caixa); border-radius: 8px; padding: 9px 14px; line-height: 1; }
.marca__logo { display: block; font-size: 27px; font-weight: 800; color: var(--azul); letter-spacing: -.5px; }
.marca__logo b { color: var(--azul-claro); }
.marca__sub { display: block; font-size: 8px; font-weight: 700; letter-spacing: 2px; color: var(--azul); margin-top: 4px; }
.topo__frase { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; color: var(--suave); }
.abas { flex: 1 0 100%; }
.abas ul { list-style: none; margin: 6px 0 0 -14px; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.abas ul::-webkit-scrollbar { display: none; }
.abas a { display: block; padding: 8px 14px 10px; color: var(--verde-escuro); white-space: nowrap; border-bottom: 4px solid transparent; font-size: 15px; }
.abas a:hover { color: var(--azul); }
.abas a.ativa { color: var(--azul); font-weight: 700; border-bottom-color: var(--verde); }
.topo__acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.busca input { width: 240px; border: 1px solid var(--linha); background: var(--caixa); border-radius: 22px; padding: 10px 16px; font-size: 14px; outline: none; }
.busca input:focus { border-color: var(--azul-claro); background: #fff; }
.botao-whats { display: inline-block; background: var(--verde); color: #fff !important; font-weight: 700; padding: 11px 20px; border-radius: 8px; white-space: nowrap; }
.botao-whats:hover { filter: brightness(.95); }
.botao-whats--grande { display: block; text-align: center; font-size: 17px; padding: 14px 20px; margin: 18px 0; }
.botao { display: inline-block; background: var(--azul); color: #fff !important; font-weight: 700; padding: 11px 20px; border-radius: 8px; }

/* conteúdo */
.conteudo { flex: 1 0 auto; padding: 26px 0 44px; }
.secao { margin: 34px 0; }
.titulo-secao { font-size: 22px; margin: 0 0 16px; padding-left: 14px; border-left: 8px solid var(--azul); display: flex; align-items: baseline; gap: 12px; }
.titulo-secao--verde { border-color: var(--verde); } .titulo-secao--azul-claro { border-color: var(--azul-claro); }
.ver-tudo { margin-left: auto; font-size: 14px; font-weight: 600; }
.cabeca { margin-bottom: 20px; }
.cabeca h1 { font-size: 32px; margin: 0 0 6px; }
.cabeca p { margin: 0 0 12px; color: var(--suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros a { padding: 6px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--linha); font-size: 14px; color: var(--texto); }
.filtros a.ativa { background: var(--azul); border-color: var(--azul); color: #fff; }
.vazio { color: var(--suave); font-style: italic; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 32px; }

/* capa: dica da semana + categorias */
.capa { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.capa__artigo { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; color: var(--texto); }
.capa__artigo:hover { box-shadow: 0 6px 20px rgba(31, 79, 154, .10); color: var(--texto); }
.capa__foto { min-height: 260px; background: linear-gradient(135deg, var(--azul), var(--azul-claro)); display: flex; align-items: flex-end; padding: 20px; }
.capa__foto img { width: 100%; height: 100%; object-fit: cover; }
.capa__foto:has(img) { padding: 0; }
.capa__selo { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.1; opacity: .9; }
.capa__texto { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.capa__texto strong { font-size: 25px; line-height: 1.2; }
.capa__texto span:not(.rotulo):not(.ler) { color: var(--suave); }
.capa__lado { display: flex; flex-direction: column; gap: 10px; }
.capa__lado .titulo-secao { font-size: 18px; margin-bottom: 4px; }
.capa__cat { display: block; background: #fff; border: 1px solid var(--linha); border-left: 6px solid var(--azul-claro); border-radius: 10px; padding: 12px 16px; color: var(--texto); }
.capa__cat strong { display: block; }
.capa__cat span { font-size: 13px; color: var(--suave); }
[data-cat="corrida-e-maratona"].capa__cat { border-left-color: var(--verde); }
[data-cat="pnl-e-mente"].capa__cat { border-left-color: var(--roxo); }
[data-cat="rotina"].capa__cat { border-left-color: var(--ambar); }

/* cartões de dica */
.grade-artigos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cartao-artigo { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; color: var(--texto); }
.cartao-artigo:hover { box-shadow: 0 6px 18px rgba(31, 79, 154, .10); color: var(--texto); }
.cartao-artigo__foto { aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--azul-claro), var(--azul)); display: flex; align-items: flex-end; padding: 14px 16px; }
.cartao-artigo__foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao-artigo__foto:has(img) { padding: 0; }
[data-cat="corrida-e-maratona"].cartao-artigo__foto, [data-cat="corrida-e-maratona"].capa__foto { background: linear-gradient(135deg, #3fae55, #1e7d3a); }
[data-cat="pnl-e-mente"].cartao-artigo__foto, [data-cat="pnl-e-mente"].capa__foto { background: linear-gradient(135deg, #8a6cc4, #5a3f8c); }
[data-cat="rotina"].cartao-artigo__foto, [data-cat="rotina"].capa__foto { background: linear-gradient(135deg, #e89a2c, #c46a08); }
.cartao-artigo__selo { color: #fff; font-weight: 800; font-size: 15px; opacity: .92; }
.cartao-artigo__texto { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cartao-artigo__texto strong { font-size: 17px; line-height: 1.3; }
.cartao-artigo__resumo { font-size: 14px; color: var(--suave); flex: 1; }
.grade-artigos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* departamentos */
.azulejos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.azulejo { display: block; background: #fff; border: 1px solid var(--linha); border-left: 6px solid var(--azul); border-radius: var(--raio); padding: 18px 22px; color: var(--texto); }
.azulejo strong { display: block; font-size: 20px; margin-bottom: 6px; }
.azulejo span { display: block; color: var(--suave); font-size: 14px; }
.azulejo em { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: 13px; color: var(--azul); }
.azulejo--ambar { border-left-color: var(--ambar); } .azulejo--ambar em { color: var(--ambar); }
.azulejo--verde { border-left-color: var(--verde); } .azulejo--verde em { color: var(--verde-escuro); }
.azulejo:hover { box-shadow: 0 6px 18px rgba(31, 79, 154, .10); color: var(--texto); }

/* produtos */
.grade-produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cartao-produto { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; color: var(--texto); }
.cartao-produto:hover { box-shadow: 0 6px 18px rgba(31, 79, 154, .10); color: var(--texto); }
.cartao-produto__foto { position: relative; aspect-ratio: 4 / 3; background: var(--caixa); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cartao-produto__foto img { width: 100%; height: 100%; object-fit: contain; }
.selo { display: inline-block; padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .3px; }
.cartao-produto__foto .selo { position: absolute; top: 8px; left: 8px; z-index: 1; }
.selo--usado { background: var(--ambar); } .selo--novo { background: var(--verde-escuro); } .selo--servico { background: var(--azul-claro); }
.cartao-produto strong { font-size: 15px; line-height: 1.3; }
.linha { font-size: 12px; } .linha--usado { color: var(--ambar); } .linha--novo { color: var(--verde-escuro); }
.cartao-produto__preco { margin-top: auto; font-size: 19px; font-weight: 800; }
.cartao-produto__preco del { font-size: 13px; font-weight: 400; color: var(--suave); margin-right: 6px; }
.cartao-produto__acao { display: block; text-align: center; background: var(--verde); color: #fff; font-weight: 700; font-size: 14px; padding: 9px; border-radius: 8px; }
.produto { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; }
.produto__principal { width: 100%; border-radius: 10px; background: var(--caixa); }
.produto__miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.produto__miniaturas img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
.produto__sem-foto { aspect-ratio: 4 / 3; background: var(--caixa); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--suave); }
.produto h1 { font-size: 28px; margin: 10px 0 6px; }
.produto__preco { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.produto__preco del { font-size: 16px; font-weight: 400; color: var(--suave); margin-right: 8px; }
.ficha { background: var(--caixa); border-radius: 10px; padding: 14px 18px; }
.ficha h2 { font-size: 15px; margin: 0 0 6px; color: var(--azul); }
.ficha p { margin: 0 0 6px; font-size: 15px; }

/* artigo e páginas: leitura confortável */
.artigo { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 34px 40px; }
.trilha { font-size: 13px; color: var(--suave); }
.artigo h1 { font-size: 34px; margin: 10px 0 10px; }
.artigo__linha-fina { font-size: 19px; color: var(--suave); margin: 0 0 10px; }
.artigo__meta { font-size: 13px; color: var(--suave); margin: 0 0 20px; }
.artigo__capa { margin: 0 0 20px; }
.artigo__capa img { border-radius: 10px; }
.artigo__credito { margin-top: 6px; font-size: 12px; color: #6b7a90; }
.artigo__credito a { color: inherit; }
.texto { font-size: 18px; line-height: 1.75; }
.texto h2 { font-size: 24px; margin: 32px 0 10px; }
.texto h3 { font-size: 20px; margin: 24px 0 8px; }
.texto a { text-decoration: underline; }
.texto blockquote { margin: 20px 0; padding: 4px 20px; border-left: 5px solid var(--verde); background: var(--caixa); border-radius: 0 8px 8px 0; }
.texto img { border-radius: 8px; margin: 12px 0; }
.aviso-saude { font-size: 13px; color: var(--suave); background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; margin-top: 28px; }
.pagina { max-width: 820px; margin: 0 auto; }
.pagina h1 { margin-top: 0; font-size: 30px; }
.pagina .texto { font-size: 17px; }
.servicos-fotos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 6px 0 22px; }
@media (max-width: 700px) {
  .servicos-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servico-foto:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .servico-foto:last-child:nth-child(odd) img { aspect-ratio: 16 / 7; }
}
.servico-foto { margin: 0; border-radius: 10px; overflow: hidden; background: var(--caixa); display: flex; flex-direction: column; }
.servico-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.servico-foto figcaption { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.servico-foto strong { font-size: 14px; line-height: 1.25; color: var(--azul); }
.servico-foto small { font-size: 11px; color: #6b7a90; }
.paginacao { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.paginacao a { padding: 6px 13px; border-radius: 6px; background: #fff; border: 1px solid var(--linha); color: var(--texto); }
.paginacao a.ativa { background: var(--azul); border-color: var(--azul); color: #fff; }

/* anúncios */
.ad { margin: 20px 0; text-align: center; min-height: 90px; }
.ad__rotulo { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); margin-bottom: 4px; }

/* rodapé */
.rodape { background: var(--azul); color: #dbe6f5; padding: 26px 0; font-size: 14px; }
.rodape a { color: #fff; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
.rodape__dados { margin: 0 0 6px; }
.rodape__credito { margin: 0; font-size: 12px; color: #a9bddc; }

/* aviso de cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .15); padding: 14px 18px; display: flex; gap: 14px; align-items: center; z-index: 50; font-size: 14px; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; flex: 1; }
.cookies button { background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; cursor: pointer; }

/* celular */
@media (max-width: 960px) {
  .capa { grid-template-columns: 1fr; }
  .grade-artigos, .grade-artigos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produto { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topo__dentro { flex-wrap: wrap; gap: 10px 14px; padding-top: 10px; }
  .topo__frase, .busca { display: none; }
  /* v0.8.5: no celular o menu QUEBRA em duas linhas — rolando de lado, com a
     barra escondida, "Contato" ficava fora da tela sem ninguém saber */
  .abas ul { flex-wrap: wrap; overflow: visible; margin-left: -8px; gap: 0; }
  .abas a { padding: 6px 8px 7px; font-size: 13.5px; border-bottom-width: 3px; }
  .topo__acoes { margin: 0 0 0 auto; }
  .botao-whats { padding: 9px 14px; font-size: 14px; }
  .capa__artigo { grid-template-columns: 1fr; }
  .capa__foto { min-height: 150px; }
  .capa__texto strong { font-size: 21px; }
  .grade-artigos, .grade-artigos--3 { grid-template-columns: 1fr; }
  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .azulejos { grid-template-columns: 1fr; }
  .artigo, .cartao, .produto { padding: 20px 18px; }
  .artigo h1 { font-size: 26px; }
  .texto { font-size: 17px; }
  .cabeca h1 { font-size: 26px; }
}
/* cartão sem foto: a categoria já está no selo colorido, não repete em cima do título */
.cartao-artigo__foto[data-cat] + .cartao-artigo__texto .rotulo { display: none; }
@media (max-width: 760px) {
  .cartao-artigo__foto[data-cat] { aspect-ratio: auto; min-height: 44px; padding: 10px 16px; }
  .cartao-artigo__foto:has(img) { aspect-ratio: 16 / 9; }
  .capa__foto[data-cat] { min-height: 90px; }
  .cartao-produto__preco { font-size: 17px; }
  .cartao-produto__preco del { display: block; }
}
/* v0.6.2: a capa ilustrada (1200x630) no quadro estreito da "dica da semana":
   enquadra o desenho (à direita) em vez de cortar a marca pela metade */
.capa__foto img { object-position: 96% center; }
@media (max-width: 760px) { .capa__foto:has(img) { aspect-ratio: 1200 / 630; min-height: 0; } .capa__foto img { object-position: center; } }